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

Design: browse 페이지 및 워크스페이스 사이드바 디자인 개선

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

frontend/src/components/ImagePreSignedForm/index.tsx

@@ -199,10 +199,16 @@ export default function ImagePreSignedForm({
           ) : (
             <p className="text-gray-500">
               {uploadType === 'folder'
-                ? '폴더를 업로드하려면 여기를 클릭하거나 폴더를 드래그하여 여기에 놓으세요'
+                ? '폴더를 업로드하려면 여기를 클릭하거나'
                 : uploadType === 'zip'
-                  ? 'ZIP 파일을 업로드하려면 여기를 클릭하거나 ZIP 파일을 드래그하여 여기에 놓으세요'
+                  ? '압축 파일을 업로드하려면 여기를 클릭하거나'
-                  : '파일을 업로드하려면 여기를 클릭하거나 파일을 드래그하여 여기에 놓으세요'}
+                  : '파일을 업로드하려면 여기를 클릭하거나'}
+              <br />
+              {uploadType === 'folder'
+                ? '폴더를 드래그하여 여기에 놓으세요'
+                : uploadType === 'zip'
+                  ? '압축 파일을 드래그하여 여기에 놓으세요'
+                  : '파일을 드래그하여 여기에 놓으세요'}
             </p>
           )}
         </div>
@@ -217,7 +223,7 @@ export default function ImagePreSignedForm({
           {({ index, style }) => (
             <div
               key={index}
-              className="flex items-center justify-between border-b border-gray-200 p-2"
+              className="flex items-center justify-between border-gray-200 p-2"
               style={style}
             >
               <span className="truncate">{files[index].path}</span>

frontend/src/components/WorkspaceBrowseLayout/index.tsx

@@ -147,7 +147,7 @@ export default function WorkspaceBrowseLayout() {
                   </NavLink>
                 ))
               ) : (
-                <p className="text-gray-500">워크스페이스가 없습니다.</p>
+                <p className="p-2 text-gray-500">워크스페이스가 없습니다.</p>
               )}
             </div>
           </div>

frontend/src/components/WorkspaceDropdownMenu/index.tsx

@@ -1,12 +1,6 @@
 import React from 'react';
 import { Menu } from 'lucide-react';
-import {
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu';
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../ui/dropdown-menu';
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
 import ImagePreSignedForm from '../ImagePreSignedForm';
 
@@ -23,8 +17,6 @@ export default function WorkspaceDropdownMenu({
   const [fileCount, setFileCount] = React.useState<number>(0);
   const [uploadType, setUploadType] = React.useState<'file' | 'folder' | 'zip'>('file');
 
-  const handleCloseUpload = () => setIsOpenUpload(false);
-
   const handleFileCount = (fileCount: number) => {
     setFileCount(fileCount);
   };
@@ -44,7 +36,6 @@ export default function WorkspaceDropdownMenu({
           >
             파일 업로드
           </DropdownMenuItem>
-          <DropdownMenuSeparator />
           <DropdownMenuItem
             onClick={() => {
               setUploadType('folder');
@@ -53,7 +44,6 @@ export default function WorkspaceDropdownMenu({
           >
             폴더 업로드
           </DropdownMenuItem>
-          <DropdownMenuSeparator />
           <DropdownMenuItem
             onClick={() => {
               setUploadType('zip');
@@ -73,17 +63,17 @@ export default function WorkspaceDropdownMenu({
         <DialogContent className="max-w-2xl">
           <DialogHeader
             title={
-              fileCount > 0
+              uploadType === 'folder'
-                ? `파일 업로드 (${fileCount})`
+                ? '폴더 업로드'
-                : uploadType === 'file'
+                : uploadType === 'zip'
-                  ? '파일 업로드'
+                  ? '압축 파일 업로드'
-                  : uploadType === 'folder'
+                  : fileCount > 0
-                    ? '폴더 업로드'
+                    ? `파일 업로드 (${fileCount})`
-                    : '압축 파일 업로드'
+                    : '파일 업로드'
             }
           />
           <ImagePreSignedForm
-            onClose={handleCloseUpload}
+            onClose={() => setIsOpenUpload(false)}
             onRefetch={onRefetch}
             onFileCount={handleFileCount}
             projectId={projectId}

frontend/src/components/WorkspaceSidebar/ProjectContextMenu.tsx

@@ -184,7 +184,7 @@ export default function ProjectContextMenu({ projectId, folderId, node, onRefetc
               id="uploadZip"
               onClick={handleItemClick}
             >
-              ZIP 파일 업로드
+              압축 파일 업로드
             </Item>
           </>
         )}
@@ -204,7 +204,17 @@ export default function ProjectContextMenu({ projectId, folderId, node, onRefetc
       >
         <DialogTrigger asChild></DialogTrigger>
         <DialogContent className="max-w-2xl">
-          <DialogHeader title={fileCount > 0 ? `업로드 (${fileCount})` : '업로드'} />
+          <DialogHeader
+            title={
+              uploadType === 'folder'
+                ? '폴더 업로드'
+                : uploadType === 'zip'
+                  ? '압축 파일 업로드'
+                  : fileCount > 0
+                    ? `파일 업로드 (${fileCount})`
+                    : '파일 업로드'
+            }
+          />
           <ImagePreSignedForm
             onClose={() => setIsOpenUpload(false)}
             onRefetch={onRefetch}