From e746491e4449a1b05f731a3e9b84d81b03d71b7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Wed, 28 Aug 2024 09:56:27 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20ImageUploadModal=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EC=9D=BC=EA=B4=80=EC=84=B1=20=EA=B0=95=ED=99=94=20?=
 =?UTF-8?q?-=20S11P21S002-69?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ImageUploadModal/index.tsx | 89 ++++++++++---------
 1 file changed, 46 insertions(+), 43 deletions(-)

diff --git a/frontend/src/components/ImageUploadModal/index.tsx b/frontend/src/components/ImageUploadModal/index.tsx
index f736811..ad80a65 100644
--- a/frontend/src/components/ImageUploadModal/index.tsx
+++ b/frontend/src/components/ImageUploadModal/index.tsx
@@ -65,51 +65,54 @@ export default function ImageUploadModal({ title, buttonText, onClose }: ImageUp
   };
 
   return (
-    <div className="mx-auto w-[610px]">
-      <div className={cn('relative flex flex-col gap-5 rounded-2xl border border-gray-200 bg-white p-5 shadow-md')}>
-        <div className="flex items-center justify-between">
-          <span className="font-sans text-2xl font-bold leading-tight text-gray-1000">{title}</span>
-          <CloseButton onClick={handleClose} />
-        </div>
-        <div className="flex flex-col gap-5">
-          <div className="flex justify-center">
-            <div
-              className={cn(
-                'relative flex h-44 w-full max-w-[570px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-primary bg-gray-100 p-5 text-center'
-              )}
-              onDrop={handleDrop}
-              onDragOver={handleDragOver}
-            >
-              <input
-                type="file"
-                multiple
-                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-                onChange={handleFilesUpload}
-              />
-              <p className="font-sans text-base font-normal leading-relaxed text-gray-500">
-                파일을 업로드하려면 클릭하거나
-                <br />
-                드래그하여 파일을 여기에 놓으세요
-              </p>
-            </div>
-          </div>
-          {files.length > 0 && (
-            <div>
-              <FileList
-                files={files}
-                onRemoveFile={(index) => setFiles(files.filter((_, i) => i !== index))}
-              />
-            </div>
-          )}
-        </div>
+    <div className="flex w-[610px] flex-col gap-10 rounded-3xl border px-10 py-5 shadow-lg">
+      <header className="flex items-center justify-between">
+        <h1 className="small-title">{title}</h1>
+        <button
+          className="flex items-center justify-center w-8 h-8"
+          onClick={handleClose}
+        >
+          <CloseButton />
+        </button>
+      </header>
+      <div className="flex flex-col gap-5">
         <div className="flex justify-center">
-          <Button
-            isActive={files.length > 0 && !isUploading}
-            text={isUploading ? `업로드 중... (${uploadProgress}%)` : buttonText}
-            onClick={handleUpload}
-            progress={uploadProgress}
-          />
+          <div
+            className={cn(
+              'relative flex h-44 w-full max-w-[570px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-primary bg-gray-100 p-5 text-center'
+            )}
+            onDrop={handleDrop}
+            onDragOver={handleDragOver}
+          >
+            <input
+              type="file"
+              multiple
+              className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+              onChange={handleFilesUpload}
+            />
+            <p className="font-sans text-base font-normal leading-relaxed text-gray-500">
+              파일을 업로드하려면 클릭하거나
+              <br />
+              드래그하여 파일을 여기에 놓으세요
+            </p>
+          </div>
         </div>
+        {files.length > 0 && (
+          <div>
+            <FileList
+              files={files}
+              onRemoveFile={(index) => setFiles(files.filter((_, i) => i !== index))}
+            />
+          </div>
+        )}
+      </div>
+      <div className="flex justify-center">
+        <Button
+          isActive={files.length > 0 && !isUploading}
+          text={isUploading ? `업로드 중... (${uploadProgress}%)` : buttonText}
+          onClick={handleUpload}
+          progress={uploadProgress}
+        />
       </div>
     </div>
   );