Refactor: 선택인자로 더미 데이터 넘기도록 함

frontend/.storybook/preview.tsx

@@ -1,11 +1,9 @@
-// .storybook/preview.ts
 import React from 'react';
 import type { Preview } from '@storybook/react';
 import { MemoryRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import '../src/index.css';
 
-// QueryClient 생성
 const queryClient = new QueryClient();
 
 const preview: Preview = {

frontend/src/components/AdminLayout/index.tsx

@@ -1,4 +1,5 @@
 import { Outlet } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import Header from '../Header';
 import { ResizablePanelGroup, ResizablePanel } from '../ui/resizable';
 import AdminProjectSidebar from '../AdminProjectSidebar';
@@ -6,18 +7,59 @@ import AdminMenuSidebar from '../AdminMenuSidebar';
 import { Workspace } from '@/types';
 
 interface AdminLayoutProps {
-  workspace: Workspace;
+  workspace?: Workspace;
 }
 
 export default function AdminLayout({ workspace }: AdminLayoutProps) {
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+
+  const numericWorkspaceId = workspaceId ? parseInt(workspaceId, 10) : 0;
+
+  const effectiveWorkspace: Workspace = workspace || {
+    id: numericWorkspaceId,
+    name: workspaceId ? `workspace-${workspaceId}` : 'default-workspace',
+    projects: [
+      {
+        id: 1,
+        name: 'project1',
+        type: 'Detection',
+        children: [],
+      },
+      {
+        id: 2,
+        name: 'project2',
+        type: 'Detection',
+        children: [],
+      },
+      {
+        id: 3,
+        name: 'project3',
+        type: 'Detection',
+        children: [],
+      },
+      {
+        id: 4,
+        name: 'project4',
+        type: 'Detection',
+        children: [],
+      },
+      {
+        id: 5,
+        name: 'project5',
+        type: 'Detection',
+        children: [],
+      },
+    ],
+  };
+
   return (
     <>
       <Header className="fixed left-0 top-0" />
       <div className="mt-16 h-[calc(100vh-64px)] w-screen">
         <ResizablePanelGroup direction="horizontal">
           <AdminProjectSidebar
-            workspaceName={workspace.name}
-            projects={workspace.projects}
+            workspaceName={effectiveWorkspace.name}
+            projects={effectiveWorkspace.projects}
           />
           <ResizablePanel className="flex w-full items-center">
             <main className="h-full grow">

frontend/src/components/AdminMemberManage/index.tsx

@@ -16,18 +16,24 @@ interface Project {
 
 export default function AdminMemberManage({
   title = '멤버 관리',
-  projects,
-  onProjectChange,
-  onSubmit,
-  members,
-  onMemberInvite,
+  projects = [
+    { id: 'project-1', name: '프로젝트 A' },
+    { id: 'project-2', name: '프로젝트 B' },
+  ],
+  onProjectChange = (projectId: string) => console.log('Selected Project:', projectId),
+  onSubmit = (data: MemberManageFormValues) => console.log('Submitted:', data),
+  members = [
+    { email: 'admin1@example.com', role: 'admin' },
+    { email: 'viewer2@example.com', role: 'viewer' },
+  ],
+  onMemberInvite = () => console.log('Invite member'),
 }: {
   title?: string;
-  projects: Project[];
-  onProjectChange: (projectId: string) => void;
-  onSubmit: (data: MemberManageFormValues) => void;
-  members: Member[];
-  onMemberInvite: () => void;
+  projects?: Project[];
+  onProjectChange?: (projectId: string) => void;
+  onSubmit?: (data: MemberManageFormValues) => void;
+  members?: Member[];
+  onMemberInvite?: () => void;
 }) {
   return (
     <div className="flex w-full flex-col gap-6 border-b-[0.67px] border-[#dcdcde] bg-[#fbfafd] p-6">