Fix: 헤더 관련 오류 수정, suspense등 추가

frontend/src/components/Header/WorkspaceNavigation.tsx

@@ -13,6 +13,10 @@ export default function WorkspaceNavigation() {
 
   const activeWorkspaceId = workspaceId ?? workspaces[0]?.id;
 
+  if (workspaces.length === 0) {
+    return <div></div>;
+  }
+
   return (
     <nav className="hidden items-center gap-5 md:flex">
       <Link

frontend/src/components/Header/index.tsx

@@ -1,9 +1,10 @@
-import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { Bell } from 'lucide-react';
 import { useLocation, Link } from 'react-router-dom';
 import UserProfileModal from './UserProfileModal';
 import WorkspaceNavigation from './WorkspaceNavigation';
+import useAuthStore from '@/stores/useAuthStore';
+import { Suspense } from 'react';
 
 export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 
@@ -11,6 +12,8 @@ export default function Header({ className, ...props }: HeaderProps) {
   const location = useLocation();
   const isHomePage = location.pathname === '/';
 
+  const profile = useAuthStore((state) => state.profile);
+
   return (
     <header
       className={cn(
@@ -28,10 +31,14 @@ export default function Header({ className, ...props }: HeaderProps) {
           WorLabel
         </Link>
 
-        {!isHomePage && <WorkspaceNavigation />}
+        {!isHomePage && profile && (
+          <Suspense fallback={<div></div>}>
+            <WorkspaceNavigation />
+          </Suspense>
+        )}
       </div>
 
-      {!isHomePage && (
+      {!isHomePage && profile && (
         <div className="flex items-center gap-4 md:gap-5">
           <Bell className="h-4 w-4 text-black sm:h-5 sm:w-5" />
           <UserProfileModal />

frontend/src/queries/workspaces/useWorkspaceListQuery.ts

@@ -3,7 +3,7 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 
 export default function useWorkspaceListQuery(memberId: number, lastWorkspaceId?: number, limit?: number) {
   return useSuspenseQuery({
-    queryKey: ['workspaceList'],
+    queryKey: ['workspaceList', memberId, lastWorkspaceId, limit],
     queryFn: () => getWorkspaceList(memberId, lastWorkspaceId, limit),
   });
 }