Merge branch 'fe/refactor/header' into 'fe/develop'

Refactor: 헤더 수정

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

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>
+  );
+}

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 && (
+        {!isHomePage && <WorkspaceNavigation />}
-          <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>
-        )}
       </div>
 
       {!isHomePage && (