From 250cd864c54dfe2205db7728a1626b726976aa43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Thu, 5 Sep 2024 17:58:07 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=9B=8C=ED=81=AC=EC=8A=A4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=A4=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B0=98=EC=9C=BC=EB=A1=9C=20Admin=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AdminLayout/index.stories.tsx  | 44 +++++++++++++++
 frontend/src/components/AdminLayout/index.tsx | 32 +++++++++++
 .../src/components/AdminMenuSidebar/index.tsx | 32 +++++++++++
 .../components/AdminProjectSidebar/index.tsx  | 54 +++++++++++++++++++
 4 files changed, 162 insertions(+)
 create mode 100644 frontend/src/components/AdminLayout/index.stories.tsx
 create mode 100644 frontend/src/components/AdminLayout/index.tsx
 create mode 100644 frontend/src/components/AdminMenuSidebar/index.tsx
 create mode 100644 frontend/src/components/AdminProjectSidebar/index.tsx

diff --git a/frontend/src/components/AdminLayout/index.stories.tsx b/frontend/src/components/AdminLayout/index.stories.tsx
new file mode 100644
index 0000000..9b60b9c
--- /dev/null
+++ b/frontend/src/components/AdminLayout/index.stories.tsx
@@ -0,0 +1,44 @@
+import '@/index.css';
+import { Meta, StoryObj } from '@storybook/react';
+import AdminLayout from './index';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Workspace } from '@/types';
+
+const meta: Meta<typeof AdminLayout> = {
+  title: 'Layout/AdminLayout',
+  component: AdminLayout,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AdminLayout>;
+
+const workspace: Workspace = {
+  id: 1,
+  name: 'Workspace Alpha',
+  projects: [
+    {
+      id: 1,
+      name: 'Project Alpha',
+      type: 'Segmentation',
+      children: [],
+    },
+    {
+      id: 2,
+      name: 'Project Beta',
+      type: 'Classification',
+      children: [],
+    },
+  ],
+};
+
+export const Default: Story = {
+  render: () => (
+    <Router>
+      <AdminLayout workspace={workspace} />
+    </Router>
+  ),
+};
diff --git a/frontend/src/components/AdminLayout/index.tsx b/frontend/src/components/AdminLayout/index.tsx
new file mode 100644
index 0000000..39e24cb
--- /dev/null
+++ b/frontend/src/components/AdminLayout/index.tsx
@@ -0,0 +1,32 @@
+import { Outlet } from 'react-router-dom';
+import Header from '../Header';
+import { ResizablePanelGroup, ResizablePanel } from '../ui/resizable';
+import AdminProjectSidebar from '../AdminProjectSidebar';
+import AdminMenuSidebar from '../AdminMenuSidebar';
+import { Workspace } from '@/types';
+
+interface AdminLayoutProps {
+  workspace: Workspace;
+}
+
+export default function AdminLayout({ workspace }: AdminLayoutProps) {
+  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}
+          />
+          <ResizablePanel className="flex w-full items-center">
+            <main className="h-full grow">
+              <Outlet />
+            </main>
+          </ResizablePanel>
+          <AdminMenuSidebar />
+        </ResizablePanelGroup>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/components/AdminMenuSidebar/index.tsx b/frontend/src/components/AdminMenuSidebar/index.tsx
new file mode 100644
index 0000000..154e604
--- /dev/null
+++ b/frontend/src/components/AdminMenuSidebar/index.tsx
@@ -0,0 +1,32 @@
+import { useNavigate } from 'react-router-dom';
+import { cn } from '@/lib/utils';
+
+export default function AdminMenuSidebar() {
+  const navigate = useNavigate();
+
+  const menuItems = [
+    { label: '작업', path: '/admin/tasks' },
+    { label: '리뷰', path: '/admin/reviews' },
+    { label: '멤버 관리', path: '/admin/members' },
+  ];
+
+  return (
+    <div className="flex h-full w-[280px] flex-col border-l border-gray-300 bg-gray-100 p-4">
+      <h2 className="mb-4 text-lg font-semibold text-gray-800">메뉴</h2>
+      <div className="flex flex-col gap-2">
+        {menuItems.map((item) => (
+          <button
+            key={item.label}
+            className={cn(
+              'cursor-pointer rounded-md px-3 py-2 text-left text-gray-700 hover:bg-gray-200',
+              'transition-colors focus:bg-gray-300 focus:outline-none'
+            )}
+            onClick={() => navigate(item.path)}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/AdminProjectSidebar/index.tsx b/frontend/src/components/AdminProjectSidebar/index.tsx
new file mode 100644
index 0000000..7e984fb
--- /dev/null
+++ b/frontend/src/components/AdminProjectSidebar/index.tsx
@@ -0,0 +1,54 @@
+import { ResizablePanel, ResizableHandle } from '../ui/resizable';
+import { Project } from '@/types';
+import { useNavigate } from 'react-router-dom';
+import { SquarePen } from 'lucide-react';
+import { Button } from '../ui/button';
+
+interface AdminProjectSidebarProps {
+  workspaceName: string;
+  projects: Project[];
+}
+
+export default function AdminProjectSidebar({ workspaceName, projects }: AdminProjectSidebarProps): JSX.Element {
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <ResizablePanel
+        minSize={15}
+        maxSize={35}
+        defaultSize={20}
+        className="flex h-full flex-col bg-gray-100"
+      >
+        <header className="body flex w-full items-center gap-2 p-2">
+          <h1 className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl font-bold text-gray-900">
+            {workspaceName}
+          </h1>
+          <button>
+            <SquarePen size={16} />
+          </button>
+          <Button
+            variant="outline"
+            size="xs"
+            className="caption border-gray-800 bg-gray-100"
+            onClick={() => console.log('New project')}
+          >
+            새 프로젝트
+          </Button>
+        </header>
+        <div className="flex flex-col gap-2 p-4">
+          {projects.map((project) => (
+            <button
+              key={project.id}
+              className="rounded-md px-3 py-2 text-left hover:bg-gray-200"
+              onClick={() => navigate(`/project/${project.id}`)}
+            >
+              {project.name}
+            </button>
+          ))}
+        </div>
+      </ResizablePanel>
+      <ResizableHandle className="bg-gray-300" />
+    </>
+  );
+}