From 24e194c221960f08bd6b66a452f3abba7a68902e Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Tue, 8 Oct 2024 10:45:28 +0900
Subject: [PATCH 1/3] =?UTF-8?q?Design:=20footer,=20home=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Footer/index.tsx     | 30 ++++++++------------
 frontend/src/components/PageLayout/index.tsx |  2 +-
 frontend/src/pages/Home.tsx                  | 10 +++----
 3 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/Footer/index.tsx b/frontend/src/components/Footer/index.tsx
index 4459e8f..cdbd3fd 100644
--- a/frontend/src/components/Footer/index.tsx
+++ b/frontend/src/components/Footer/index.tsx
@@ -1,24 +1,18 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
+import { Link } from 'react-router-dom';
 
-export interface FooterProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export default function Footer({ className, ...props }: FooterProps) {
+export default function Footer() {
   return (
-    <footer
-      className={cn('mt-[100px] border-t border-gray-200 bg-gray-100', className)}
-      {...props}
-    >
-      <div className="container py-10">
-        <div className="flex flex-col items-start gap-5">
-          <div className="relative">
-            <div className="font-heading text-lg text-gray-600 md:text-xl">WorLabel</div>
-            <p className="font-body-small mt-2 text-gray-500">Copyright © 2024 WorLabel All rights reserved</p>
+    <footer className="select-none bg-gray-100">
+      <div className="container py-8 text-gray-400">
+        <div className="body-small flex flex-col items-start gap-5">
+          <div>
+            <div className="heading">WorLabel</div>
+            <span>Copyright © 2024 WorLabel. All rights reserved.</span>
           </div>
-          <div className="inline-flex items-center gap-4">
-            <div className="font-body-small text-gray-500">서비스 이용약관</div>
-            <div className="h-4 w-px bg-gray-400" />
-            <div className="font-body-small text-gray-500">개인정보 처리방침</div>
+          <div className="inline-flex items-center gap-2">
+            <Link to="#">서비스 이용약관</Link>
+            <span className="h-3 w-px rounded bg-gray-400" />
+            <Link to="#">개인정보 처리방침</Link>
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/PageLayout/index.tsx b/frontend/src/components/PageLayout/index.tsx
index f1952e9..11e4be9 100644
--- a/frontend/src/components/PageLayout/index.tsx
+++ b/frontend/src/components/PageLayout/index.tsx
@@ -15,7 +15,7 @@ export default function PageLayout() {
             </main>
           </Suspense>
         </div>
-        <Footer className="mt-0" />
+        <Footer />
       </div>
     </>
   );
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index c8c0498..46e5b3b 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -9,16 +9,16 @@ export default function Home() {
   const { accessToken } = useAuthStore();
 
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center bg-gray-50">
+    <div className="flex h-full w-full flex-col items-center justify-center break-keep bg-gray-50 px-10">
       <div className="text-center">
-        <p className="text-5xl font-semibold leading-[60px] text-black">
-          <span className="text-primary">웹 기반 오토 레이블링</span> 플랫폼
+        <p className="text-5xl font-semibold leading-[1.2] text-gray-900">
+          <span className="font-bold text-primary">웹 기반 오토 레이블링</span> 플랫폼
           <br />
-          <span className="text-primary">WorLabel</span>에 오신 것을 환영합니다
+          <span className="font-bold text-primary">WorLabel</span>에 오신 것을 환영합니다
         </p>
       </div>
       <div className="mt-4 text-center">
-        <p className="text-xl font-light leading-[28px] text-black">
+        <p className="body font-light leading-[28px] text-gray-500">
           WorLabel로 레이블링 작업을 간소화하세요.
           <br />
           브라우저에서 직접 레이블링을 자동화하여 빠르고 효율적인 워크플로우를 경험하세요.

From a819d64ea92c46b6113c60c2927f3698ca24b4fd Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Tue, 8 Oct 2024 11:06:34 +0900
Subject: [PATCH 2/3] =?UTF-8?q?Design:=20footer=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Footer/index.tsx | 51 ++++++++----------------
 1 file changed, 16 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/Footer/index.tsx b/frontend/src/components/Footer/index.tsx
index edf63d6..a2613ac 100644
--- a/frontend/src/components/Footer/index.tsx
+++ b/frontend/src/components/Footer/index.tsx
@@ -1,42 +1,24 @@
 import * as React from 'react';
 import Modal from './Modal';
-import { cn } from '@/lib/utils';
-export interface FooterProps extends React.HTMLAttributes<HTMLDivElement> {}
 
-export default function Footer({ className, ...props }: FooterProps) {
-  const [isTermsOpen, setIsTermsOpen] = React.useState(false);
-  const [isPrivacyOpen, setIsPrivacyOpen] = React.useState(false);
+export default function Footer() {
+  const [modalState, setModalState] = React.useState<'terms' | 'privacy' | null>(null);
 
   return (
-    <footer
-      className={cn('mt-[100px] border-t border-gray-200 bg-gray-100', className)}
-      {...props}
-    >
-      {' '}
-      <div className="container py-10">
-        <div className="flex flex-col items-start gap-5">
-          <div className="relative">
-            <div className="font-heading text-lg text-gray-600 md:text-xl">WorLabel</div>
-            <p className="font-body-small mt-2 text-gray-500">Copyright © 2024 WorLabel All rights reserved</p>
+    <footer className="select-none bg-gray-100">
+      <div className="container py-8 text-gray-400">
+        <div className="body-small flex flex-col items-start gap-5">
+          <div>
+            <div className="heading">WorLabel</div>
+            <span>Copyright © 2024 WorLabel All rights reserved</span>
           </div>
-          <div className="inline-flex items-center gap-4">
-            <button
-              className="font-body-small text-gray-500 hover:text-primary"
-              onClick={() => setIsTermsOpen(true)}
-            >
-              서비스 이용약관
-            </button>
-            <div className="h-4 w-px bg-gray-400" />
-            <button
-              className="font-body-small text-gray-500 hover:text-primary"
-              onClick={() => setIsPrivacyOpen(true)}
-            >
-              개인정보 처리방침
-            </button>
+          <div className="inline-flex items-center gap-2">
+            <button onClick={() => setModalState('terms')}>서비스 이용약관</button>
+            <span className="h-3 w-px rounded bg-gray-400" />
+            <button onClick={() => setModalState('privacy')}>개인정보 처리방침</button>
           </div>
         </div>
       </div>
-      {/* Terms of Service Modal */}
       <Modal
         title="서비스 이용약관"
         content={
@@ -86,10 +68,9 @@ export default function Footer({ className, ...props }: FooterProps) {
             </p>
           </>
         }
-        open={isTermsOpen}
-        onClose={() => setIsTermsOpen(false)}
+        open={modalState === 'terms'}
+        onClose={() => setModalState(null)}
       />
-      {/* Privacy Policy Modal */}
       <Modal
         title="개인정보 처리방침"
         content={
@@ -142,8 +123,8 @@ export default function Footer({ className, ...props }: FooterProps) {
             </p>
           </>
         }
-        open={isPrivacyOpen}
-        onClose={() => setIsPrivacyOpen(false)}
+        open={modalState === 'privacy'}
+        onClose={() => setModalState(null)}
       />
     </footer>
   );

From 4827abbcb44aae528543b11b57e7e58c4884d490 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=99=8D=EC=B0=BD=EA=B8=B0?= <hckhong@naver.com>
Date: Tue, 8 Oct 2024 12:56:12 +0900
Subject: [PATCH 3/3] =?UTF-8?q?Design:=20browse=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=B0=8F=20=EC=9B=8C=ED=81=AC=EC=8A=A4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=A4=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ImagePreSignedForm/index.tsx   | 14 +++++++---
 .../WorkspaceBrowseLayout/index.tsx           |  2 +-
 .../WorkspaceDropdownMenu/index.tsx           | 28 ++++++-------------
 .../WorkspaceSidebar/ProjectContextMenu.tsx   | 14 ++++++++--
 4 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/ImagePreSignedForm/index.tsx b/frontend/src/components/ImagePreSignedForm/index.tsx
index daace94..00e0d55 100644
--- a/frontend/src/components/ImagePreSignedForm/index.tsx
+++ b/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>
diff --git a/frontend/src/components/WorkspaceBrowseLayout/index.tsx b/frontend/src/components/WorkspaceBrowseLayout/index.tsx
index fb800fa..c488ce0 100644
--- a/frontend/src/components/WorkspaceBrowseLayout/index.tsx
+++ b/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>
diff --git a/frontend/src/components/WorkspaceDropdownMenu/index.tsx b/frontend/src/components/WorkspaceDropdownMenu/index.tsx
index 0dd9578..2b0ee81 100644
--- a/frontend/src/components/WorkspaceDropdownMenu/index.tsx
+++ b/frontend/src/components/WorkspaceDropdownMenu/index.tsx
@@ -1,12 +1,6 @@
 import React from 'react';
 import { Menu } from 'lucide-react';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../ui/dropdown-menu';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, 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
-                ? `파일 업로드 (${fileCount})`
-                : uploadType === 'file'
-                  ? '파일 업로드'
-                  : uploadType === 'folder'
-                    ? '폴더 업로드'
-                    : '압축 파일 업로드'
+              uploadType === 'folder'
+                ? '폴더 업로드'
+                : uploadType === 'zip'
+                  ? '압축 파일 업로드'
+                  : fileCount > 0
+                    ? `파일 업로드 (${fileCount})`
+                    : '파일 업로드'
             }
           />
           <ImagePreSignedForm
-            onClose={handleCloseUpload}
+            onClose={() => setIsOpenUpload(false)}
             onRefetch={onRefetch}
             onFileCount={handleFileCount}
             projectId={projectId}
diff --git a/frontend/src/components/WorkspaceSidebar/ProjectContextMenu.tsx b/frontend/src/components/WorkspaceSidebar/ProjectContextMenu.tsx
index 403f75f..b690012 100644
--- a/frontend/src/components/WorkspaceSidebar/ProjectContextMenu.tsx
+++ b/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}