src/components/app-sidebar.tsx

@@ -17,7 +17,6 @@ import {
 import { ProjectSwitcher } from '@/components/project-switcher';
 
 const data = {
-  projects: ['aolda_edu', 'proxy_manager', 'blog'],
   menus: [
     {
       title: '웹 프록시 서버',
@@ -58,15 +57,15 @@ const data = {
 };
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  const { token } = useAuthStore();
+  const { token, selectedProject } = useAuthStore();
   const location = useLocation();
   const selected = location.pathname.split('/')[1] || '';
 
   return (
     <Sidebar className="top-(--header-height) h-[calc(100svh-var(--header-height))]!" {...props}>
-      {token ? (
+      {token && selectedProject ? (
         <SidebarHeader>
-          <ProjectSwitcher projects={data.projects} defaultProject={data.projects[0]} />
+          <ProjectSwitcher />
         </SidebarHeader>
       ) : null}
       <SidebarContent>
@@ -78,7 +77,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                 {item.items.map((item) => (
                   <SidebarMenuItem key={item.title}>
                     <SidebarMenuButton asChild isActive={selected === item.url}>
-                      <Link to={item.url} aria-disabled={token === null}>
+                      <Link to={item.url} aria-disabled={!token || !selectedProject}>
                         <item.icon />
                         {item.title}
                       </Link>

src/components/project-switcher.tsx

-import * as React from 'react';
+import { useAuthStore } from '@/stores/authStore';
 import { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-react';
+import { toast } from 'sonner';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -7,9 +8,19 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { Project } from '@/types/project';
 
-export function ProjectSwitcher({ projects, defaultProject }: { projects: string[]; defaultProject: string }) {
-  const [selectedProject, setSelectedProject] = React.useState(defaultProject);
+export function ProjectSwitcher() {
+  const { projects, selectedProject, setSelectedProject } = useAuthStore();
+
+  const handleSelectProject = async (project: Project) => {
+    try {
+      await setSelectedProject(project);
+    } catch (error) {
+      console.error(error);
+      toast.error('프로젝트 권한을 조회할 수 없습니다.');
+    }
+  };
 
   return (
     <SidebarMenu>
@@ -24,16 +35,22 @@ export function ProjectSwitcher({ projects, defaultProject }: { projects: string
                 <GalleryVerticalEnd className="size-4" />
               </div>
               <div className="flex flex-col gap-0.5 leading-none">
+                {selectedProject ? (
+                  <>
                     <span className="font-semibold">Project</span>
-                <span className="">{selectedProject}</span>
+                    <span>{selectedProject.name}</span>
+                  </>
+                ) : (
+                  <span className="text-muted-foreground">프로젝트를 선택해주세요</span>
+                )}
               </div>
               <ChevronsUpDown className="ml-auto" />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-[--radix-dropdown-menu-trigger-width]" align="start">
             {projects.map((project) => (
-              <DropdownMenuItem key={project} onSelect={() => setSelectedProject(project)}>
-                {project} {project === selectedProject && <Check className="ml-auto" />}
+              <DropdownMenuItem key={project.id} onSelect={() => handleSelectProject(project)}>
+                {project.name} {project.id === selectedProject?.id && <Check className="ml-auto" />}
               </DropdownMenuItem>
             ))}
           </DropdownMenuContent>

src/components/site-header.tsx

@@ -16,7 +16,7 @@ import {
 export function SiteHeader() {
   const navigate = useNavigate();
   const { toggleSidebar } = useSidebar();
-  const { token, logout } = useAuthStore();
+  const { token, username, logout } = useAuthStore();
 
   const handleLogout = () => {
     logout();
@@ -36,11 +36,11 @@ export function SiteHeader() {
           <DropdownMenu>
             <DropdownMenuTrigger asChild className="ml-auto cursor-pointer">
               <Avatar className="w-10 h-10 border">
-                <AvatarFallback>{'admin'.charAt(0)}</AvatarFallback>
+                <AvatarFallback>{username.charAt(0)}</AvatarFallback>
               </Avatar>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <DropdownMenuLabel>닉네임</DropdownMenuLabel>
+              <DropdownMenuLabel>{username}</DropdownMenuLabel>
               <DropdownMenuSeparator />
               <DropdownMenuItem onClick={handleLogout} className="cursor-pointer">
                 <LogOut />

src/stores/authStore.ts

 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
+import { Project } from '@/types/project';
 
 export interface AuthStore {
   token: string | null;
+  username: string;
+  isAdmin: boolean;
+  projects: Project[];
+  selectedProject: (Project & { role?: string }) | null;
+  setSelectedProject: (project: Project) => Promise<void>;
   login: (username: string, password: string) => void;
   logout: () => void;
 }
 
 export const useAuthStore = create<AuthStore>()(
   persist(
-    (set) => ({
+    (set, get) => ({
       token: null,
+      username: '',
+      isAdmin: false,
+      projects: [],
+      selectedProject: null,
+      setSelectedProject: async (project) => {
+        set({ selectedProject: project });
+        console.log(project);
+
+        const response = await fetch(`/api/auth/role?projectId=${project.id}`, {
+          headers: { 'X-Subject-Token': get().token! },
+        });
+
+        if (!response.ok) {
+          throw new Error('프로젝트 정보를 가져오지 못했습니다.');
+        }
+
+        const { role } = await response.json();
+        set({ selectedProject: { ...project, role } });
+
+        console.log(role);
+      },
       login: async (username, password) => {
         const response = await fetch('/api/auth/login', {
           method: 'POST',
@@ -23,11 +50,12 @@ export const useAuthStore = create<AuthStore>()(
         }
 
         const token = response.headers.get('X-Subject-Token')!;
-        console.log(token);
+        const { isAdmin, projects } = await response.json();
 
-        set({ token });
+        set({ token, username, isAdmin, projects });
+        get().setSelectedProject(projects[0]);
       },
-      logout: () => set({ token: null }),
+      logout: () => set({ token: null, username: '', isAdmin: false, projects: [], selectedProject: null }),
     }),
     { name: 'authStorage' }
   )

src/types/project.ts

+export interface Project {
+  id: string;
+  name: string;
+}