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

Refactor: 업로드 관련 디자인 개선 및 리팩토링 See merge request s11-s-project/S11P21S002!288
2024-10-04 14:40:07 +09:00 · 2024-10-04 14:40:07 +09:00 · dcb016d41b
commit dcb016d41b
parent 4b85ff33d8 f14e0f27c5
4 changed files with 62 additions and 40 deletions
--- a/frontend/src/components/ImageUploadPresignedModal/index.tsx
+++ b/frontend/src/components/ImageUploadPresignedModal/index.tsx
@ -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}
--- a/frontend/src/components/ProjectCreateModal/ProjectCreateForm.tsx
+++ b/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">
-                  <TabsTrigger value="manual">직접 입력</TabsTrigger>
-                  <TabsTrigger value="file">파일로 입력</TabsTrigger>
+                <TabsList className="mb-4 rounded-none border-transparent bg-transparent shadow-none">
+                  <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">
-                      파일을 업로드하려면 여기를 클릭하거나 파일을 드래그하여 여기에 놓으세요.
-                    </p>
+                    {isDragging ? (
+                      <p className="text-primary">드래그한 파일을 여기에 놓으세요</p>
+                    ) : (
+                      <p className="text-gray-500">
+                        파일을 업로드하려면 여기를 클릭하거나
+                        <br />
+                        파일을 드래그하여 여기에 놓으세요.
+                      </p>
+                    )}
                    <input
                      type="file"
                      ref={fileInputRef}
--- a/frontend/src/components/WorkspaceBrowseLayout/index.tsx
+++ b/frontend/src/components/WorkspaceBrowseLayout/index.tsx
@ -30,7 +30,6 @@ export default function WorkspaceBrowseLayout() {
  };

  const workspaces = workspacesResponse?.workspaceResponses ?? [];
-  console.log(workspaces);

  return (
    <>
--- a/frontend/src/components/WorkspaceDropdownMenu/index.tsx
+++ b/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}