From d79bf97406e8bc87f632e5b39469d4d348f1f9a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Mon, 9 Sep 2024 17:24:40 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20=EC=84=A0=ED=83=9D=EC=9D=B8?=
 =?UTF-8?q?=EC=9E=90=EB=A1=9C=20=EB=8D=94=EB=AF=B8=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=EB=84=98=EA=B8=B0=EB=8F=84=EB=A1=9D=20=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.storybook/preview.tsx               |  2 -
 frontend/src/components/AdminLayout/index.tsx | 48 +++++++++++++++++--
 .../components/AdminMemberManage/index.tsx    | 26 ++++++----
 3 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
index 9364210..7df26fa 100644
--- a/frontend/.storybook/preview.tsx
+++ b/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 = {
diff --git a/frontend/src/components/AdminLayout/index.tsx b/frontend/src/components/AdminLayout/index.tsx
index 39e24cb..012f841 100644
--- a/frontend/src/components/AdminLayout/index.tsx
+++ b/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">
diff --git a/frontend/src/components/AdminMemberManage/index.tsx b/frontend/src/components/AdminMemberManage/index.tsx
index 4951792..e870a8b 100644
--- a/frontend/src/components/AdminMemberManage/index.tsx
+++ b/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">