From 751feba4d18ff65c6f326f8b206ca8e538b76b70 Mon Sep 17 00:00:00 2001
From: chaeseungyun <thslr57@naver.com>
Date: Wed, 11 Sep 2024 17:54:36 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=ED=8C=8C=EC=9D=BC=20=EC=97=85=EB=A1=9C?=
 =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/fileUploadModal/fileUploadModal.module.scss | 1 +
 src/page/Auth/Signup/components/fileUploadModal/index.tsx  | 5 ++++-
 src/page/Auth/Signup/components/ownerInfoStep/index.tsx    | 7 +++++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/page/Auth/Signup/components/fileUploadModal/fileUploadModal.module.scss b/src/page/Auth/Signup/components/fileUploadModal/fileUploadModal.module.scss
index 34c761a8..d65cb960 100644
--- a/src/page/Auth/Signup/components/fileUploadModal/fileUploadModal.module.scss
+++ b/src/page/Auth/Signup/components/fileUploadModal/fileUploadModal.module.scss
@@ -67,5 +67,6 @@
     font-weight: 500;
     background-color: #175c8e;
     color: white;
+    cursor: pointer;
   }
 }
diff --git a/src/page/Auth/Signup/components/fileUploadModal/index.tsx b/src/page/Auth/Signup/components/fileUploadModal/index.tsx
index c95392b5..0b50d452 100644
--- a/src/page/Auth/Signup/components/fileUploadModal/index.tsx
+++ b/src/page/Auth/Signup/components/fileUploadModal/index.tsx
@@ -1,3 +1,4 @@
+import { useRef } from 'react';
 import { createPortal } from 'react-dom';
 import styles from './fileUploadModal.module.scss';
 
@@ -7,6 +8,7 @@ interface FileUploadModalProps {
 }
 
 export default function FileUploadModal({ onClose, onUpload }: FileUploadModalProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files) {
       onUpload(event.target.files);
@@ -36,6 +38,7 @@ export default function FileUploadModal({ onClose, onUpload }: FileUploadModalPr
             onChange={handleFileChange}
             style={{ display: 'none' }}
             id="file-upload"
+            ref={fileInputRef}
           />
           <button
             type="button"
@@ -47,7 +50,7 @@ export default function FileUploadModal({ onClose, onUpload }: FileUploadModalPr
           <button
             type="button"
             className={styles['upload-button--upload']}
-            onClick={() => document.getElementById('file-upload')?.click()}
+            onClick={() => fileInputRef.current?.click()}
           >
             첨부하기
           </button>
diff --git a/src/page/Auth/Signup/components/ownerInfoStep/index.tsx b/src/page/Auth/Signup/components/ownerInfoStep/index.tsx
index e8717074..a5ca90e0 100644
--- a/src/page/Auth/Signup/components/ownerInfoStep/index.tsx
+++ b/src/page/Auth/Signup/components/ownerInfoStep/index.tsx
@@ -6,6 +6,7 @@ import FileUploadModal from 'page/Auth/Signup/components/fileUploadModal';
 import useUploadFile from 'query/upload';
 import { isKoinError, sendClientError } from '@bcsdlab/koin';
 import showToast from 'utils/ts/showToast';
+import { toast } from 'react-toastify';
 import styles from './ownerInfoStep.module.scss';
 
 interface OwnerInfo {
@@ -45,6 +46,10 @@ export default function OwnerInfoStep({ onSearch, setIsStepComplete }: OwnerInfo
       const response = await uploadFiles(formData);
       const { file_urls: fileUrls } = response.data;
       const formattedUrls = fileUrls.map((url: string) => ({ file_url: url }));
+      if (formattedUrls.length + uploadedFiles.length > 5) {
+        toast.error('파일은 최대 5개 등록할 수 있습니다');
+        return;
+      }
       setUploadedFiles((prev) => [...prev, ...formattedUrls]);
       setFileNames((prev) => [...prev, ...names]);
       setValue('attachment_urls', [...uploadedFiles, ...formattedUrls]);
@@ -157,6 +162,8 @@ export default function OwnerInfoStep({ onSearch, setIsStepComplete }: OwnerInfo
             },
           })}
           placeholder="숫자만 입력해주세요."
+          type="text"
+          inputMode="numeric"
           onChange={handleCompanyNumberChange}
         />
         {errors.company_number && <span className={styles['error-message']}>{errors.company_number.message}</span>}