Merge branch 'fe/refactor/improve-design' into 'fe/develop'

Refactor: 업로드 관련 디자인 개선 및 리팩토링

See merge request s11-s-project/S11P21S002!288

frontend/src/components/ImageUploadPresignedModal/index.tsx

@@ -6,7 +6,7 @@ import ImageUploadPresingedForm from '@/components/ImageUploadPresignedModal/Ima
 export default function ImageUploadPresignedModal({ projectId, folderId }: { projectId: number; folderId: number }) {
   const [isOpen, setIsOpen] = React.useState(false);
   const [fileCount, setFileCount] = React.useState<number>(0);
-  
+
   const handleOpen = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleFileCount = (fileCount: number) => {
@@ -27,7 +27,7 @@ export default function ImageUploadPresignedModal({ projectId, folderId }: { pro
         </button>
       </DialogTrigger>
       <DialogContent className="max-w-2xl">
-        <DialogHeader title={fileCount > 0 ? `파일 업로드 (${fileCount}) PreSigned` : '파일 업로드 PreSigned'} />
+        <DialogHeader title={fileCount > 0 ? `파일 업로드 PreSigned (${fileCount})` : '파일 업로드 PreSigned'} />
         <ImageUploadPresingedForm
           onClose={handleClose}
           onFileCount={handleFileCount}

frontend/src/components/ProjectCreateModal/ProjectCreateForm.tsx

@@ -169,9 +169,19 @@ export default function ProjectCreateForm({ onSubmit }: { onSubmit: (data: Proje
             <div className="mb-1 flex w-full flex-col gap-2">
               <div className="body-strong">카테고리</div>
               <Tabs defaultValue="manual">
-                <TabsList className="mb-4">
+                <TabsList className="mb-4 rounded-none border-transparent bg-transparent shadow-none">
-                  <TabsTrigger value="manual">직접 입력</TabsTrigger>
+                  <TabsTrigger
-                  <TabsTrigger value="file">파일로 입력</TabsTrigger>
+                    value="manual"
+                    className="rounded-none border-b-2 border-transparent bg-transparent shadow-none data-[state=active]:border-blue-500 data-[state=active]:shadow-none"
+                  >
+                    직접 입력
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="file"
+                    className="rounded-none border-b-2 border-transparent bg-transparent shadow-none data-[state=active]:border-blue-500 data-[state=active]:shadow-none"
+                  >
+                    파일로 입력
+                  </TabsTrigger>
                 </TabsList>
                 <TabsContent value="manual">
                   <div className="mt-2 flex gap-2">
@@ -192,7 +202,7 @@ export default function ProjectCreateForm({ onSubmit }: { onSubmit: (data: Proje
                 <TabsContent value="file">
                   <div
                     className={cn(
-                      'mt-2 flex w-full items-center justify-center rounded-lg border-2 border-dashed p-5 text-center transition-colors',
+                      'mt-2 flex h-40 w-full items-center justify-center rounded-lg border-2 border-dashed p-5 text-center transition-colors',
                       isDragging ? 'border-blue-500 bg-blue-100' : 'border-gray-300 bg-gray-100'
                     )}
                     onDragOver={handleDragOver}
@@ -200,9 +210,15 @@ export default function ProjectCreateForm({ onSubmit }: { onSubmit: (data: Proje
                     onDrop={(event) => handleDrop(event, field.onChange)}
                     onClick={() => fileInputRef.current?.click()}
                   >
-                    <p className="text-gray-500">
+                    {isDragging ? (
-                      파일을 업로드하려면 여기를 클릭하거나 파일을 드래그하여 여기에 놓으세요.
+                      <p className="text-primary">드래그한 파일을 여기에 놓으세요</p>
-                    </p>
+                    ) : (
+                      <p className="text-gray-500">
+                        파일을 업로드하려면 여기를 클릭하거나
+                        <br />
+                        파일을 드래그하여 여기에 놓으세요.
+                      </p>
+                    )}
                     <input
                       type="file"
                       ref={fileInputRef}

frontend/src/components/WorkspaceBrowseLayout/index.tsx

@@ -30,7 +30,6 @@ export default function WorkspaceBrowseLayout() {
   };
 
   const workspaces = workspacesResponse?.workspaceResponses ?? [];
-  console.log(workspaces);
 
   return (
     <>

frontend/src/components/WorkspaceDropdownMenu/index.tsx

@@ -12,7 +12,7 @@ import ImageUploadFileForm from '../ImageUploadFileModal/ImageUploadFileForm';
 import ImageUploadFolderFileForm from '../ImageUploadFolderFileModal/ImageUploadFolderFileForm';
 import ImageUploadFolderForm from '../ImageUploadFolderModal/ImageUploadFolderForm';
 import ImageUploadZipForm from '../ImageUploadZipModal/ImageUploadZipForm';
-import ImageUploadPresignedForm from '../ImageUploadPresignedModal/ImageUploadPresignedForm.tsx'
+import ImageUploadPresignedForm from '../ImageUploadPresignedModal/ImageUploadPresignedForm.tsx';
 
 export default function WorkspaceDropdownMenu({
   projectId,
@@ -25,9 +25,10 @@ export default function WorkspaceDropdownMenu({
 }) {
   const [isOpenUploadFile, setIsOpenUploadFile] = React.useState<boolean>(false);
   const [fileCount, setFileCount] = React.useState<number>(0);
+  const [isOpenUploadPresigned, setIsOpenUploadPresigned] = React.useState<boolean>(false);
+  const [presignedCount, setPresignedCount] = React.useState<number>(0);
   const [isOpenUploadFolderFile, setIsOpenUploadFolderFile] = React.useState<boolean>(false);
   const [isOpenUploadFolder, setIsOpenUploadFolder] = React.useState<boolean>(false);
-  const [isOpenUploadPresigned, setIsOpenUploadPresigned] = React.useState<boolean>(false);
   const [isOpenUploadZip, setIsOpenUploadZip] = React.useState<boolean>(false);
 
   const handleOpenUploadFile = () => setIsOpenUploadFile(true);
@@ -36,6 +37,20 @@ export default function WorkspaceDropdownMenu({
     setIsOpenUploadFile(false);
   };
 
+  const handleFileCount = (fileCount: number) => {
+    setFileCount(fileCount);
+  };
+
+  const handleOpenUploadPresigned = () => setIsOpenUploadPresigned(true);
+
+  const handleCloseUploadPresigned = () => {
+    setIsOpenUploadPresigned(false);
+  };
+
+  const handlePresignedCount = (fileCount: number) => {
+    setPresignedCount(fileCount);
+  };
+
   const handleOpenUploadFolderFile = () => setIsOpenUploadFolderFile(true);
 
   const handleCloseUploadFolderFile = () => {
@@ -48,22 +63,12 @@ export default function WorkspaceDropdownMenu({
     setIsOpenUploadFolder(false);
   };
 
-  const handleOpenUploadPresigned = () => setIsOpenUploadPresigned(true);
-
-  const handleCloseUploadPresigned = () => {
-    setIsOpenUploadPresigned(false);
-  };
-
   const handleOpenUploadZip = () => setIsOpenUploadZip(true);
 
   const handleCloseUploadZip = () => {
     setIsOpenUploadZip(false);
   };
 
-  const handleFileCount = (fileCount: number) => {
-    setFileCount(fileCount);
-  };
-
   return (
     <>
       <DropdownMenu>
@@ -83,9 +88,9 @@ export default function WorkspaceDropdownMenu({
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={handleOpenUploadFile}>파일 업로드</DropdownMenuItem>
+          <DropdownMenuItem onClick={handleOpenUploadPresigned}>파일 업로드 (PresignedUrl 이용)</DropdownMenuItem>
           <DropdownMenuItem onClick={handleOpenUploadFolderFile}>폴더 업로드 (파일 업로드 API 이용)</DropdownMenuItem>
           <DropdownMenuItem onClick={handleOpenUploadFolder}>폴더 업로드 (백엔드 구현 필요)</DropdownMenuItem>
-          <DropdownMenuItem onClick={handleOpenUploadPresigned}>폴더 업로드 (PresignedUrl 이용)</DropdownMenuItem>
           <DropdownMenuItem onClick={handleOpenUploadZip}>폴더 압축파일 업로드</DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
@@ -107,6 +112,25 @@ export default function WorkspaceDropdownMenu({
         </DialogContent>
       </Dialog>
 
+      <Dialog
+        open={isOpenUploadPresigned}
+        onOpenChange={setIsOpenUploadPresigned}
+      >
+        <DialogTrigger asChild></DialogTrigger>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader
+            title={presignedCount > 0 ? `파일 업로드 PreSigned (${presignedCount})` : '파일 업로드 PreSigned'}
+          />
+          <ImageUploadPresignedForm
+            onClose={handleCloseUploadPresigned}
+            onRefetch={onRefetch}
+            onFileCount={handlePresignedCount}
+            projectId={projectId}
+            folderId={folderId}
+          />
+        </DialogContent>
+      </Dialog>
+
       <Dialog
         open={isOpenUploadFolderFile}
         onOpenChange={setIsOpenUploadFolderFile}
@@ -139,23 +163,6 @@ export default function WorkspaceDropdownMenu({
         </DialogContent>
       </Dialog>
 
-      <Dialog
-        open={isOpenUploadPresigned}
-        onOpenChange={setIsOpenUploadPresigned}
-      >
-        <DialogTrigger asChild></DialogTrigger>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader title='파일 업로드' />
-          <ImageUploadPresignedForm
-            onClose={handleCloseUploadPresigned}
-            onRefetch={onRefetch}
-            onFileCount={handleFileCount}
-            projectId={projectId}
-            folderId={folderId}
-          />
-        </DialogContent>
-      </Dialog>
-
       <Dialog
         open={isOpenUploadZip}
         onOpenChange={setIsOpenUploadZip}