From 347071ad93e271c8d66bd4bf49cfa10bba99c1e5 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, 27 Sep 2024 09:36:27 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20=ED=97=A4=EB=8D=94=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Header/WorkspaceNavigation.tsx | 42 +++++++++++++++++++
 frontend/src/components/Header/index.tsx      | 33 ++-------------
 2 files changed, 45 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/components/Header/WorkspaceNavigation.tsx

diff --git a/frontend/src/components/Header/WorkspaceNavigation.tsx b/frontend/src/components/Header/WorkspaceNavigation.tsx
new file mode 100644
index 0000000..98f42be
--- /dev/null
+++ b/frontend/src/components/Header/WorkspaceNavigation.tsx
@@ -0,0 +1,42 @@
+import { cn } from '@/lib/utils';
+import { Link, useParams } from 'react-router-dom';
+import useAuthStore from '@/stores/useAuthStore';
+import useWorkspaceListQuery from '@/queries/workspaces/useWorkspaceListQuery';
+
+export default function WorkspaceNavigation() {
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+  const profile = useAuthStore((state) => state.profile);
+  const memberId = profile?.id;
+
+  const { data: workspacesResponse } = useWorkspaceListQuery(memberId ?? 0);
+  const workspaces = workspacesResponse?.workspaceResponses || [];
+
+  const activeWorkspaceId = workspaceId ?? workspaces[0]?.id;
+
+  return (
+    <nav className="hidden items-center gap-5 md:flex">
+      <Link
+        to={activeWorkspaceId ? `/browse/${activeWorkspaceId}` : '/browse'}
+        className={cn('text-color-text-default-default', 'font-body-strong', 'text-sm sm:text-base md:text-lg')}
+      >
+        workspace
+      </Link>
+      {activeWorkspaceId && (
+        <>
+          <Link
+            to={`/workspace/${activeWorkspaceId}`}
+            className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}
+          >
+            labeling
+          </Link>
+          <Link
+            to={`/admin/${activeWorkspaceId}`}
+            className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}
+          >
+            admin
+          </Link>
+        </>
+      )}
+    </nav>
+  );
+}
diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
index d1a2fab..62ff9d4 100644
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -1,16 +1,14 @@
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { Bell } from 'lucide-react';
-import { useLocation, Link, useParams } from 'react-router-dom';
+import { useLocation, Link } from 'react-router-dom';
 import UserProfileModal from './UserProfileModal';
+import WorkspaceNavigation from './WorkspaceNavigation';
 
 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 === '/';
 
   return (
@@ -30,32 +28,7 @@ export default function Header({ className, ...props }: HeaderProps) {
           WorLabel
         </Link>
 
-        {!isHomePage && (
-          <nav className="hidden items-center gap-5 md:flex">
-            <Link
-              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>
-            {!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>
-        )}
+        {!isHomePage && <WorkspaceNavigation />}
       </div>
 
       {!isHomePage && (