src/components/ProtectedRoute.tsx

+import { Navigate, Outlet } from 'react-router';
+import { useAuthStore } from '@/stores/authStore';
+
+export default function ProtectedRoute() {
+  const { token } = useAuthStore();
+
+  if (!token) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <Outlet />;
+}

src/components/project-switcher.tsx

@@ -38,7 +38,9 @@ export function ProjectSwitcher() {
                 {selectedProject ? (
                   <>
                     <span className="font-semibold">Project</span>
-                    <span>{selectedProject.name}</span>
+                    <span>
+                      {selectedProject.name} ({selectedProject.role})
+                    </span>
                   </>
                 ) : (
                   <span className="text-muted-foreground">프로젝트를 선택해주세요</span>
@@ -47,7 +49,7 @@ export function ProjectSwitcher() {
               <ChevronsUpDown className="ml-auto" />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-[--radix-dropdown-menu-trigger-width]" align="start">
+          <DropdownMenuContent className="w-[var(--radix-dropdown-menu-trigger-width)]" align="start">
             {projects.map((project) => (
               <DropdownMenuItem key={project.id} onSelect={() => handleSelectProject(project)}>
                 {project.name} {project.id === selectedProject?.id && <Check className="ml-auto" />}

src/pages/Root.tsx

@@ -9,7 +9,7 @@ export default function Root() {
     <div className="[--header-height:calc(theme(spacing.14))]">
       <SidebarProvider className="flex flex-col">
         <SiteHeader />
-        <div className="flex flex-1">
+        <div className="flex flex-1 px-0 my-0 lg:mx-6">
           <AppSidebar />
           <SidebarInset className="overflow-hidden">
             <Outlet />

src/pages/certificate/List.tsx

@@ -135,7 +135,7 @@ export default function CertificateList() {
                 </>
               ) : certificates.length === 0 ? (
                 <TableRow>
-                  <TableCell colSpan={4} className="text-center text-muted-foreground">
+                  <TableCell colSpan={5} className="text-center text-muted-foreground">
                     현재 프로젝트에 등록된 인증서가 없습니다.
                   </TableCell>
                 </TableRow>

src/routes.tsx

 import { Routes, Route } from 'react-router';
+import ProtectedRoute from '@/components/ProtectedRoute';
 import Root from '@/pages/Root';
 import NotFound from '@/pages/NotFound';
 import Home from '@/pages/Home';
@@ -17,8 +18,10 @@ export default function AppRoutes() {
   return (
     <Routes>
       <Route path="/" element={<Root />}>
-        <Route index element={<Home />} />
         <Route path="login" element={<Login />} />
+
+        <Route element={<ProtectedRoute />}>
+          <Route index element={<Home />} />
           <Route path="routing">
             <Route index element={<RoutingList />} />
             <Route path="create" element={<RoutingCreate />} />
@@ -36,6 +39,8 @@ export default function AppRoutes() {
           <Route path="log">
             <Route index element={<LogList />} />
           </Route>
+        </Route>
+
         <Route path="*" element={<NotFound />} />
       </Route>
     </Routes>

src/stores/authStore.ts

@@ -7,7 +7,7 @@ export interface AuthStore {
   username: string;
   isAdmin: boolean;
   projects: Project[];
-  selectedProject: (Project & { role?: string }) | null;
+  selectedProject: (Project & { role: string }) | null;
   setSelectedProject: (project: Project) => Promise<void>;
   authFetch: (input: RequestInfo, init?: RequestInit) => Promise<Response>;
   login: (username: string, password: string) => void;
@@ -23,9 +23,6 @@ export const useAuthStore = create<AuthStore>()(
       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! },
         });
@@ -59,7 +56,7 @@ export const useAuthStore = create<AuthStore>()(
         const { isAdmin, projects } = await response.json();
 
         set({ token, username, isAdmin, projects });
-        get().setSelectedProject(projects[0]);
+        await get().setSelectedProject(projects[0]);
       },
       logout: () => set({ token: null, username: '', isAdmin: false, projects: [], selectedProject: null }),
     }),