share job

frontend/src/app/(main)/fedex/0010/[sq]/page.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { use } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+import { getFedexDetail, updateFedexAttach } from '@/lib/api/fedex';
+import FileUpload from '@/components/common/FileUpload';
+import Link from 'next/link';
+
+function Field({ label, value }: { label: string; value?: string | number | null }) {
+  return (
+    <div>
+      <dt className="text-xs font-medium text-gray-500 mb-0.5">{label}</dt>
+      <dd className="text-sm text-gray-900">{value ?? '-'}</dd>
+    </div>
+  );
+}
+
+export default function Fedex0010DetailPage({
+  params,
+}: {
+  params: Promise<{ sq: string }>;
+}) {
+  const { sq } = use(params);
+  const router = useRouter();
+  const qc = useQueryClient();
+
+  const { data: item, isLoading } = useQuery({
+    queryKey: ['fedex', 'detail', sq],
+    queryFn: () => getFedexDetail(Number(sq)),
+    enabled: !!sq,
+  });
+
+  const attachMut = useMutation({
+    mutationFn: (atchNo: string) => updateFedexAttach(Number(sq), atchNo),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['fedex', 'detail', sq] }),
+  });
+
+  if (isLoading) return <div className="p-4 text-gray-400">로딩 중...</div>;
+  if (!item) return <div className="p-4 text-gray-400">데이터를 찾을 수 없습니다.</div>;
+
+  return (
+    <div className="p-4 max-w-2xl">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-xl font-bold">수입정정 상세</h1>
+        <div className="flex gap-2">
+          <Link
+            href="/fedex/0010"
+            className="px-3 py-1.5 text-sm border rounded hover:bg-gray-50"
+          >
+            목록
+          </Link>
+        </div>
+      </div>
+
+      <div className="bg-white border rounded-lg p-5 space-y-5">
+        {/* 신고 정보 */}
+        <section>
+          <h2 className="text-sm font-semibold text-gray-700 mb-3 pb-1 border-b">신고 정보</h2>
+          <dl className="grid grid-cols-2 gap-x-6 gap-y-3">
+            <Field label="신고번호" value={item.singoNo} />
+            <Field label="업체명" value={item.comNm} />
+            <Field label="원신고일" value={item.jSingoDt} />
+            <Field label="정정신고일" value={item.sSingoDt} />
+            <Field label="관세청 구분" value={item.jGwiDes || item.jGwiCd} />
+            <Field label="신고 구분" value={item.ieGbn === 'I' ? '수입' : '수출'} />
+          </dl>
+        </section>
+
+        {/* 정정 정보 */}
+        <section>
+          <h2 className="text-sm font-semibold text-gray-700 mb-3 pb-1 border-b">정정 정보</h2>
+          <dl className="grid grid-cols-2 gap-x-6 gap-y-3">
+            <Field label="처리상태" value={item.fStDes || item.fStCd} />
+            <Field label="정정사유" value={item.fJjDes1 || item.fJjCd} />
+            <Field label="담당자" value={item.fJjNm} />
+            <Field label="처리일" value={item.fJjRegDt} />
+            <div className="col-span-2">
+              <dt className="text-xs font-medium text-gray-500 mb-0.5">정정내용</dt>
+              <dd className="text-sm text-gray-900 whitespace-pre-wrap bg-gray-50 rounded p-3 min-h-16">
+                {item.fJjContents || '-'}
+              </dd>
+            </div>
+          </dl>
+        </section>
+
+        {/* 등록자 */}
+        <section>
+          <h2 className="text-sm font-semibold text-gray-700 mb-3 pb-1 border-b">등록 정보</h2>
+          <dl className="grid grid-cols-2 gap-x-6 gap-y-3">
+            <Field label="등록자 ID" value={item.regUserId} />
+          </dl>
+        </section>
+
+        {/* 첨부파일 */}
+        <section>
+          <h2 className="text-sm font-semibold text-gray-700 mb-3 pb-1 border-b">첨부파일</h2>
+          <FileUpload
+            atchNo={item.attachNo || undefined}
+            division="FEDEX"
+            onChange={(atchNo) => attachMut.mutate(atchNo)}
+          />
+        </section>
+      </div>
+    </div>
+  );
+}