From e64d22e2f63932516aee5c2837e8ff88643e0678 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=A0=EB=B3=91=EC=B2=A0?= <zomking@gmail.com>
Date: Thu, 29 Jan 2026 14:00:24 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9E=85=EA=B3=A0=20=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=20=EC=97=85=EC=B2=B4=20=EC=A0=9C=EA=B3=B5=20=EC=84=B1=EC=A0=81?=
 =?UTF-8?q?=EC=84=9C=20=ED=8C=8C=EC=9D=BC=20=EC=97=85=EB=A1=9C=EB=93=9C=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 기존 정적 플레이스홀더를 FileDropzone 공통 컴포넌트로 교체
- 드래그앤드롭 및 클릭 파일 선택 지원
- 파일 선택 후 파일명/크기 표시 및 삭제 기능

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../ReceivingManagement/ReceivingDetail.tsx   | 53 ++++++++++++++++---
 1 file changed, 46 insertions(+), 7 deletions(-)

diff --git a/src/components/material/ReceivingManagement/ReceivingDetail.tsx b/src/components/material/ReceivingManagement/ReceivingDetail.tsx
index 5b1e5525..89dee42c 100644
--- a/src/components/material/ReceivingManagement/ReceivingDetail.tsx
+++ b/src/components/material/ReceivingManagement/ReceivingDetail.tsx
@@ -16,7 +16,8 @@
 
 import { useState, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Upload, FileText } from 'lucide-react';
+import { FileText, X } from 'lucide-react';
+import { FileDropzone } from '@/components/ui/file-dropzone';
 import { InspectionModalV2 } from '@/app/[locale]/(protected)/quality/qms/components/InspectionModalV2';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -79,6 +80,9 @@ export function ReceivingDetail({ id, mode = 'view' }: Props) {
   // 폼 데이터 (등록/수정 모드용)
   const [formData, setFormData] = useState<Partial<ReceivingDetailType>>(INITIAL_FORM_DATA);
 
+  // 업로드된 파일 상태 (File 객체)
+  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+
   // 수입검사 성적서 모달 상태
   const [isInspectionModalOpen, setIsInspectionModalOpen] = useState(false);
 
@@ -403,18 +407,53 @@ export function ReceivingDetail({ id, mode = 'view' }: Props) {
             {/* 업체 제공 성적서 자료 - 파일 업로드 */}
             <div className="mt-4">
               <Label className="text-sm text-muted-foreground">업체 제공 성적서 자료</Label>
-              <div className="mt-1.5 px-4 py-8 border-2 border-dashed rounded-md bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
-                <div className="flex flex-col items-center justify-center gap-2 text-sm text-muted-foreground">
-                  <Upload className="w-8 h-8 text-gray-400" />
-                  <span>클릭하여 파일을 찾거나, 마우스로 파일을 끌어오세요.</span>
-                </div>
+              <div className="mt-1.5">
+                {uploadedFile || formData.certificateFileName ? (
+                  <div className="flex items-center gap-3 px-4 py-3 border rounded-md bg-gray-50">
+                    <FileText className="w-5 h-5 text-blue-500 shrink-0" />
+                    <span className="text-sm truncate flex-1">
+                      {uploadedFile?.name || formData.certificateFileName}
+                    </span>
+                    {uploadedFile && (
+                      <span className="text-xs text-muted-foreground shrink-0">
+                        {(uploadedFile.size / (1024 * 1024)).toFixed(1)}MB
+                      </span>
+                    )}
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setUploadedFile(null);
+                        handleInputChange('certificateFile', undefined);
+                        handleInputChange('certificateFileName', undefined);
+                      }}
+                      className="p-1 hover:bg-gray-200 rounded shrink-0"
+                    >
+                      <X className="w-4 h-4 text-gray-500" />
+                    </button>
+                  </div>
+                ) : (
+                  <FileDropzone
+                    onFilesSelect={(files) => {
+                      const file = files[0];
+                      if (file) {
+                        setUploadedFile(file);
+                        handleInputChange('certificateFileName', file.name);
+                      }
+                    }}
+                    accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx"
+                    maxSize={20}
+                    compact
+                    title="클릭하여 파일을 찾거나, 마우스로 파일을 끌어오세요"
+                    description="PDF, 이미지, 문서 파일 (최대 20MB)"
+                  />
+                )}
               </div>
             </div>
           </CardContent>
         </Card>
       </div>
     );
-  }, [formData]);
+  }, [formData, uploadedFile]);
 
   // ===== 커스텀 헤더 액션 (view/edit 모드) =====
   const customHeaderActions = (isViewMode || isEditMode) && detail ? (