Merge branch 'fe/feat/72-workspace-layout' into 'fe/develop'

Feat: 워크스페이스 레이아웃 추가, 라우터 연결 - S11P21S002-72

See merge request s11-s-project/S11P21S002!12

frontend/src/components/WorkspaceLayout/index.tsx

@@ -0,0 +1,79 @@
+import { Outlet } from 'react-router-dom';
+import Header from '../Header';
+import { Project } from '@/types';
+import { ResizablePanelGroup, ResizablePanel } from '../ui/resizable';
+import WorkspaceSidebar from '../WorkspaceSidebar';
+
+export default function WorkspaceLayout() {
+  const workspace: { name: string; projects: Project[] } = {
+    name: 'Workspace-name-1',
+    projects: [
+      {
+        id: 1,
+        name: 'project-111',
+        type: 'Segmentation',
+        children: [
+          {
+            id: 12,
+            type: 'directory',
+            name: 'directory-1',
+            children: [
+              {
+                id: 123,
+                type: 'directory',
+                name: 'directory-2',
+                children: [
+                  { id: 1, url: '', type: 'image', name: 'image-1.jpg', status: 'done' },
+                  { id: 1, url: '', type: 'image', name: 'image-2.jpg', status: 'idle' },
+                ],
+              },
+              { id: 1, url: '', type: 'image', name: 'image-1.jpg', status: 'idle' },
+              { id: 1, url: '', type: 'image', name: 'image-2.jpg', status: 'done' },
+            ],
+          },
+          { id: 1, url: '', type: 'image', name: 'image-1.jpg', status: 'done' },
+        ],
+      },
+      {
+        id: 2,
+        name: 'very-extremely-long-long-project-name-222',
+        type: 'Classification',
+        children: [
+          {
+            id: 23,
+            type: 'directory',
+            name: 'this-is-my-very-very-long-directory-name-that-will-be-overflow',
+            children: [
+              { id: 1, url: '', type: 'image', name: 'image-1.jpg', status: 'done' },
+              { id: 1, url: '', type: 'image', name: 'image-2.jpg', status: 'done' },
+            ],
+          },
+          {
+            id: 1,
+            url: '',
+            type: 'image',
+            name: 'wow-this-is-my-very-very-long-image-name-so-this-will-be-overflow-too.jpg',
+            status: 'idle',
+          },
+        ],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <Header className="fixed left-0 top-0" />
+      <main className="mt-16 h-[calc(100vh-64px)] w-screen">
+        <ResizablePanelGroup direction="horizontal">
+          <WorkspaceSidebar
+            workspaceName={workspace.name}
+            projects={workspace.projects}
+          />
+          <ResizablePanel className="flex w-full items-center justify-center">
+            <Outlet />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </main>
+    </>
+  );
+}

frontend/src/router/index.tsx

@@ -1,8 +1,14 @@
+import WorkspaceLayout from '@/components/WorkspaceLayout';
 import { createBrowserRouter } from 'react-router-dom';
 
+export const webPath = {
+  home: () => '/',
+  workspace: () => '/workspace',
+};
+
 const router = createBrowserRouter([
   {
-    path: '/',
+    path: webPath.home(),
     element: <div>home</div>,
     children: [
       {
@@ -11,6 +17,16 @@ const router = createBrowserRouter([
       },
     ],
   },
+  {
+    path: webPath.workspace(),
+    element: <WorkspaceLayout />,
+    children: [
+      {
+        index: true,
+        element: <div>workspace</div>,
+      },
+    ],
+  },
 ]);
 
 export default router;