From 7bb156e8c01db8c675282de87480703922edcfed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Fri, 13 Sep 2024 08:17:23 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20=ED=94=84=EB=A1=9C=EC=A0=9D?=
 =?UTF-8?q?=ED=8A=B8=20=ED=81=AC=EB=A6=AC=EC=97=90=EC=9D=B4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=9D=BC?=
 =?UTF-8?q?=EC=8A=A4=20=EC=84=A4=EC=A0=95=20=EA=B0=80=EB=8A=A5=ED=95=98?=
 =?UTF-8?q?=EA=B2=8C=20=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Header/index.tsx      | 34 +++++++++++--------
 .../components/ProjectCreateModal/index.tsx   |  5 +--
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
index ff2f537..0375839 100644
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { Bell, User } from 'lucide-react';
-import { useLocation, Link } from 'react-router-dom';
+import { useLocation, Link, useParams } from 'react-router-dom';
 
 export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 
 export default function Header({ className, ...props }: HeaderProps) {
   const location = useLocation();
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+  const isWorkspaceIdNaN = isNaN(Number(workspaceId));
 
   const isHomePage = location.pathname === '/';
 
@@ -30,23 +32,27 @@ export default function Header({ className, ...props }: HeaderProps) {
         {!isHomePage && (
           <nav className="hidden items-center gap-5 md:flex">
             <Link
-              to="/browse"
+              to={isWorkspaceIdNaN ? '/browse' : `/browse/${workspaceId}`}
               className={cn('text-color-text-default-default', 'font-body-strong', 'text-sm sm:text-base md:text-lg')}
             >
               workspace
             </Link>
-            <Link
-              to="/workspace"
-              className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}
-            >
-              labeling
-            </Link>
-            <Link
-              to="/admin/1"
-              className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}
-            >
-              admin
-            </Link>
+            {!isWorkspaceIdNaN && (
+              <>
+                <Link
+                  to={`/workspace/${workspaceId}`}
+                  className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}
+                >
+                  labeling
+                </Link>
+                <Link
+                  to={`/admin/${workspaceId}`}
+                  className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}
+                >
+                  admin
+                </Link>
+              </>
+            )}
           </nav>
         )}
       </div>
diff --git a/frontend/src/components/ProjectCreateModal/index.tsx b/frontend/src/components/ProjectCreateModal/index.tsx
index dd48044..3ed7cf9 100644
--- a/frontend/src/components/ProjectCreateModal/index.tsx
+++ b/frontend/src/components/ProjectCreateModal/index.tsx
@@ -6,9 +6,10 @@ import { Plus } from 'lucide-react';
 
 interface ProjectCreateModalProps {
   onSubmit: (data: { title: string; labelType: 'classification' | 'detection' | 'segmentation' }) => void;
+  buttonClass?: string;
 }
 
-export default function ProjectCreateModal({ onSubmit }: ProjectCreateModalProps) {
+export default function ProjectCreateModal({ onSubmit, buttonClass = '' }: ProjectCreateModalProps) {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const handleOpen = () => setIsOpen(true);
@@ -35,7 +36,7 @@ export default function ProjectCreateModal({ onSubmit }: ProjectCreateModalProps
       <DialogTrigger asChild>
         <Button
           variant="outlinePrimary"
-          className="mt-4 flex items-center gap-2"
+          className={`${buttonClass}`}
           onClick={handleOpen}
         >
           <Plus size={16} />