feat: ticket form reorder, attachment, conditional project
This commit is contained in:
pray4skylark
@@ -119,20 +119,36 @@ export default function IssueDetailPage({ params }: { params: Promise<{ id: stri
|
||||
<p className="text-sm text-text-main whitespace-pre-wrap">{ticket.description}</p>
|
||||
</div>
|
||||
|
||||
{ticket.attachmentUrl && (
|
||||
<div className="bg-indigo-50 border border-indigo-200 rounded-xl px-4 py-3 text-sm flex items-center gap-3">
|
||||
<Paperclip className="w-4 h-4 text-indigo-600" />
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold text-indigo-800">첨부 파일</p>
|
||||
<p className="text-indigo-600 text-xs">{ticket.attachmentName || ticket.attachmentUrl.split('/').pop()}</p>
|
||||
</div>
|
||||
<a href={ticket.attachmentUrl} target="_blank" rel="noopener noreferrer"
|
||||
className="px-3 py-1.5 bg-white rounded-lg text-xs font-semibold text-indigo-700 border border-indigo-200 hover:bg-indigo-100 transition-colors">
|
||||
다운로드
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{ticket.category === 'VACATION' && (
|
||||
<div className="bg-amber-50 border border-amber-200 rounded-xl px-4 py-3 text-sm">
|
||||
<p className="font-semibold text-amber-800">휴가 신청</p>
|
||||
<p className="text-amber-700 mt-1">세부 일정은 description을 확인하세요.</p>
|
||||
<p className="text-amber-700 mt-1">해당 티켓은 휴가 신청 건입니다. 휴가 기간 등 세부 내용은 description을 확인하세요.</p>
|
||||
</div>
|
||||
)}
|
||||
{ticket.category === 'EXPENSE' && (
|
||||
<div className="bg-green-50 border border-green-200 rounded-xl px-4 py-3 text-sm">
|
||||
<p className="font-semibold text-green-800">비용 청구</p>
|
||||
<p className="text-green-700 mt-1">비용 청구 건입니다. 금액 및 영수증은 description과 첨부파일을 확인하세요.</p>
|
||||
</div>
|
||||
)}
|
||||
{ticket.category === 'EQUIPMENT_REQUEST' && (
|
||||
<div className="bg-purple-50 border border-purple-200 rounded-xl px-4 py-3 text-sm">
|
||||
<p className="font-semibold text-purple-800">장비 요청</p>
|
||||
<p className="text-purple-700 mt-1">장비 요청 건입니다. 요청 장비 및 긴급도는 description을 확인하세요.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -93,7 +93,7 @@ function CreateTicketModal({ onClose, onSuccess }: { onClose: () => void; onSucc
|
||||
extras.push(`\n\n[휴가 신청]\n시작일: ${extraFields.startDate}\n종료일: ${extraFields.endDate}`);
|
||||
}
|
||||
if (formData.category === 'EXPENSE') {
|
||||
extras.push(`\n\n[비용 청구]\n금액: ${extraFields.amount}원`);
|
||||
extras.push(`\n\n[비용 청구]\n금액: ${extraFields.amount}원${extraFields.receiptUrl ? `\n영수증: ${extraFields.receiptUrl}` : ''}`);
|
||||
}
|
||||
if (formData.category === 'EQUIPMENT_REQUEST') {
|
||||
extras.push(`\n\n[장비 요청]\n장비 유형: ${extraFields.equipmentType}\n긴급도: ${extraFields.urgency}`);
|
||||
@@ -109,6 +109,8 @@ function CreateTicketModal({ onClose, onSuccess }: { onClose: () => void; onSucc
|
||||
category: formData.category as TicketCategory,
|
||||
priority: formData.priority as TicketPriority,
|
||||
projectId: formData.projectId ? parseInt(formData.projectId) : undefined,
|
||||
attachmentUrl: extraFields.receiptUrl || undefined,
|
||||
attachmentName: extraFields.receiptName || undefined,
|
||||
});
|
||||
onSuccess();
|
||||
onClose();
|
||||
@@ -158,22 +160,6 @@ function CreateTicketModal({ onClose, onSuccess }: { onClose: () => void; onSucc
|
||||
{renderFieldError('title')}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-main mb-1.5">
|
||||
Description <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.description}
|
||||
onChange={(e) => updateField('description', e.target.value)}
|
||||
className={`w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none ${
|
||||
fieldErrors.description ? 'border-error' : 'border-border'
|
||||
}`}
|
||||
placeholder="Detailed explanation, error logs, steps to reproduce..."
|
||||
rows={4}
|
||||
/>
|
||||
{renderFieldError('description')}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-main mb-1.5">Category</label>
|
||||
@@ -220,21 +206,24 @@ function CreateTicketModal({ onClose, onSuccess }: { onClose: () => void; onSucc
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-main mb-1.5">Project</label>
|
||||
<select
|
||||
value={formData.projectId}
|
||||
onChange={(e) => updateField('projectId', e.target.value)}
|
||||
className="w-full px-3 py-2.5 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-white"
|
||||
>
|
||||
<option value="">해당 없음</option>
|
||||
{projects.map((p) => (
|
||||
<option key={p.projectId} value={p.projectId}>
|
||||
{p.projectName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{/* Project: only for project-related categories */}
|
||||
{['BUG', 'FEATURE', 'SUPPORT', 'QA'].includes(formData.category) && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-main mb-1.5">Project</label>
|
||||
<select
|
||||
value={formData.projectId}
|
||||
onChange={(e) => updateField('projectId', e.target.value)}
|
||||
className="w-full px-3 py-2.5 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-white"
|
||||
>
|
||||
<option value="">해당 없음</option>
|
||||
{projects.map((p) => (
|
||||
<option key={p.projectId} value={p.projectId}>
|
||||
{p.projectName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{formData.category === 'VACATION' && (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
@@ -270,21 +259,44 @@ function CreateTicketModal({ onClose, onSuccess }: { onClose: () => void; onSucc
|
||||
)}
|
||||
|
||||
{formData.category === 'EXPENSE' && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-main mb-1.5">
|
||||
금액 (원) <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={extraFields.amount || ''}
|
||||
onChange={(e) => updateExtraField('amount', e.target.value)}
|
||||
className={`w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary ${
|
||||
fieldErrors.amount ? 'border-error' : 'border-border'
|
||||
}`}
|
||||
placeholder="0"
|
||||
/>
|
||||
{renderFieldError('amount')}
|
||||
</div>
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-main mb-1.5">
|
||||
금액 (원) <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={extraFields.amount || ''}
|
||||
onChange={(e) => updateExtraField('amount', e.target.value)}
|
||||
className={`w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary ${
|
||||
fieldErrors.amount ? 'border-error' : 'border-border'
|
||||
}`}
|
||||
placeholder="0"
|
||||
/>
|
||||
{renderFieldError('amount')}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-main mb-1.5">영수증</label>
|
||||
<input type="file" accept="image/*,.pdf" onChange={async (e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
updateExtraField('receiptName', file.name);
|
||||
try {
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
const token = localStorage.getItem('accessToken');
|
||||
const res = await fetch('/api/v1/files/upload', {
|
||||
method: 'POST', headers: token ? {Authorization: `Bearer ${token}`} : {}, body: form,
|
||||
});
|
||||
const json = await res.json();
|
||||
if (json.success) updateExtraField('receiptUrl', json.data);
|
||||
} catch { updateExtraField('receiptUrl', ''); }
|
||||
}} className="w-full text-sm" />
|
||||
{extraFields.receiptName && (
|
||||
<p className="mt-1 text-xs text-text-muted">📎 {extraFields.receiptName}</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{formData.category === 'EQUIPMENT_REQUEST' && (
|
||||
@@ -325,6 +337,22 @@ function CreateTicketModal({ onClose, onSuccess }: { onClose: () => void; onSucc
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-main mb-1.5">
|
||||
Description <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.description}
|
||||
onChange={(e) => updateField('description', e.target.value)}
|
||||
className={`w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none ${
|
||||
fieldErrors.description ? 'border-error' : 'border-border'
|
||||
}`}
|
||||
placeholder="Detailed explanation, error logs, steps to reproduce..."
|
||||
rows={4}
|
||||
/>
|
||||
{renderFieldError('description')}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
|
||||
Reference in New Issue
Block a user