From 6d853919825c30a9bcdc42f8c645e5060bba58c1 Mon Sep 17 00:00:00 2001
From: swcho <swcho@mind-one.co.kr>
Date: Mon, 26 May 2025 13:44:13 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20fileUploadFrom.tsx=20=ED=8C=8C=EC=9D=BC?=
 =?UTF-8?q?=EB=AA=85=20width=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/sn/app/components/ui/fileUploadForm.tsx  |  2 +-
 .../app/components/ui/operFileUploadForm.tsx  | 53 +++----------------
 2 files changed, 7 insertions(+), 48 deletions(-)

diff --git a/apps/sn/app/components/ui/fileUploadForm.tsx b/apps/sn/app/components/ui/fileUploadForm.tsx
index 939399bef..f4c7292e9 100644
--- a/apps/sn/app/components/ui/fileUploadForm.tsx
+++ b/apps/sn/app/components/ui/fileUploadForm.tsx
@@ -43,7 +43,7 @@ const FileUploadForm = ({ onSubmit, showButton = true, showPreview = false, acce
         <div> {/* 컴포넌트 루트 div */}
             <div className="card p-6"> {/* 카드 스타일링 */}
                 <div className='flex items-center gap-2'> {/* FileUploader와 Button을 정렬하는 메인 flex 컨테이너 */}
-                    <div className="w-[220px] mr-4"> {/* FileUploader의 너비와 오른쪽 여백을 제어하는 컨테이너 */}
+                    <div className="w-[300px] mr-4"> {/* FileUploader의 너비와 오른쪽 여백을 제어하는 컨테이너 */}
                         <FileUploader
                             id={uniqueId}
                             className="!h-auto !max-w-none flex-row items-center gap-2"
diff --git a/apps/sn/app/components/ui/operFileUploadForm.tsx b/apps/sn/app/components/ui/operFileUploadForm.tsx
index 7de737e9b..a990e1077 100644
--- a/apps/sn/app/components/ui/operFileUploadForm.tsx
+++ b/apps/sn/app/components/ui/operFileUploadForm.tsx
@@ -6,6 +6,7 @@ import type { HttpResponse, Upload } from "tus-js-client";
 import { FileUploader } from "@common/components";
 import { handleUpload } from "@utils";
 import { set } from 'react-hook-form';
+import FileUploadForm from './fileUploadForm';
 
 const operFileUploadForm = ({ title, onSubmit }: { title: string, onSubmit: (files: string, year: string, quarter: string, code:string, id:string) => void }) => {
     const [atflCd, setAtflCd] = useState<string | null>(null);
@@ -52,53 +53,11 @@ const operFileUploadForm = ({ title, onSubmit }: { title: string, onSubmit: (fil
                             selectArray={quater}
                             onSelectValue={(value: string | number) => setSelectedQuarter(String(value))}
                         />
-                        <div className='flex ml-5 items-center'>
-                            <div className="w-[80px] mr-4">
-                                <FileUploader
-                                id="atflCd"
-                                className="!h-auto !max-w-none flex-col !items-start"
-                                accept=".jpeg,.jpg,.png"
-                                onUpload={(e) => {
-                                    const selectedFiles = e.target.files;
-                                    if (!selectedFiles) return;
-
-                                    setFiles(selectedFiles);
-                                    if (selectedFiles[0]) {
-                                        handleUpload(selectedFiles, {
-                                            handleUploadStart: setUpload,
-                                            handleSuccess: setUpload,
-                                            handleResponse: handleUploadResponse(selectedFiles[0]),
-                                        });
-                                    }
-
-                                }}
-                                customPreview={<></>}
-                                />
-                            </div>
-                            <Button
-                                className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700"
-                                size="sm"
-                                onClick={() => {
-                                    console.log(files?.[0]?.name)
-                                    if (!files) {
-                                        alert('파일을 선택해주세요.');
-                                        return;
-                                    }
-                                    if (!selectedYear) {
-                                        alert('등록년도를 선택해주세요.');
-                                        return;
-                                    }
-                                    if (!selectedQuarter) {
-                                        alert('분기를 선택해주세요.');
-                                        return;
-                                    }
-                                    const fileNm = files?.[0]?.name || '';
-                                    onSubmit(fileNm, selectedYear, selectedQuarter, atflCd || '', atflId || '');
-                                }}
-                            >
-                                등록
-                            </Button>
-                        </div>
+                        <FileUploadForm
+                            onSubmit={onSubmit}
+                            showButton={true}
+                            showPreview={true}
+                            accept={""} />
                     </div>
                 </div>
             </div>