From c19082949b973ab2863f1fc2b778d18e8cd5add1 Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Wed, 28 Aug 2024 16:08:12 +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=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20S11?=
 =?UTF-8?q?P21S002-75?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json                    | 11 +++
 frontend/package.json                         |  1 +
 .../WorkspaceSidebar/ProjectDirectoryItem.tsx | 58 +++++++++++++
 .../WorkspaceSidebar/ProjectFileItem.tsx      | 43 ++++++++++
 .../WorkspaceSidebar/ProjectStructure.tsx     | 60 ++++++++++++++
 .../WorkspaceSidebar/index.stories.tsx        | 82 +++++++++++++++++++
 .../src/components/WorkspaceSidebar/index.tsx | 45 ++++++++++
 frontend/src/components/ui/button.tsx         |  1 +
 frontend/src/components/ui/resizable.tsx      | 43 ++++++++++
 frontend/src/types/index.ts                   | 21 +++++
 frontend/tailwind.config.js                   |  4 +
 11 files changed, 369 insertions(+)
 create mode 100644 frontend/src/components/WorkspaceSidebar/ProjectDirectoryItem.tsx
 create mode 100644 frontend/src/components/WorkspaceSidebar/ProjectFileItem.tsx
 create mode 100644 frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx
 create mode 100644 frontend/src/components/WorkspaceSidebar/index.stories.tsx
 create mode 100644 frontend/src/components/WorkspaceSidebar/index.tsx
 create mode 100644 frontend/src/components/ui/resizable.tsx
 create mode 100644 frontend/src/types/index.ts

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c1878ce..3fa64d0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -20,6 +20,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.53.0",
+        "react-resizable-panels": "^2.1.1",
         "react-router-dom": "^6.26.1",
         "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7",
@@ -10264,6 +10265,16 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "node_modules/react-resizable-panels": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.1.tgz",
+      "integrity": "sha512-+cUV/yZBYfiBj+WJtpWDJ3NtR4zgDZfHt3+xtaETKE+FCvp+RK/NJxacDQKxMHgRUTSkfA6AnGljQ5QZNsCQoA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.26.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index bbbb134..9249900 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,6 +26,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
+    "react-resizable-panels": "^2.1.1",
     "react-router-dom": "^6.26.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
diff --git a/frontend/src/components/WorkspaceSidebar/ProjectDirectoryItem.tsx b/frontend/src/components/WorkspaceSidebar/ProjectDirectoryItem.tsx
new file mode 100644
index 0000000..aee6484
--- /dev/null
+++ b/frontend/src/components/WorkspaceSidebar/ProjectDirectoryItem.tsx
@@ -0,0 +1,58 @@
+import { DirectoryItem } from '@/types';
+import { ChevronRight } from 'lucide-react';
+import { useState } from 'react';
+import ProjectFileItem from './ProjectFileItem';
+import { cn } from '@/lib/utils';
+
+export default function ProjectDirectoryItem({
+  className = '',
+  item,
+  depth = 1,
+}: {
+  className?: string;
+  item: DirectoryItem;
+  depth?: number;
+}) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const paddingLeft = depth * 12;
+
+  return (
+    <>
+      <div
+        className={cn('flex cursor-pointer items-center gap-2 rounded-md py-0.5 pr-1 hover:bg-gray-200', className)}
+        style={{
+          paddingLeft,
+        }}
+        onClick={() => setIsExpanded((prev) => !prev)}
+      >
+        <button className="flex items-center">
+          <ChevronRight
+            size={16}
+            className={`stroke-gray-500 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+          />
+        </button>
+        <span className="overflow-hidden text-ellipsis whitespace-nowrap">{item.name}</span>
+      </div>
+      {item.children?.map((child) => {
+        const childProps = {
+          className: isExpanded ? '' : 'hidden',
+          depth: depth + 1,
+        };
+
+        return child.type === 'directory' ? (
+          <ProjectDirectoryItem
+            key={`${item.name}-${child.name}`}
+            item={child}
+            {...childProps}
+          />
+        ) : (
+          <ProjectFileItem
+            key={`${item.name}-${child.name}`}
+            item={child}
+            {...childProps}
+          />
+        );
+      })}
+    </>
+  );
+}
diff --git a/frontend/src/components/WorkspaceSidebar/ProjectFileItem.tsx b/frontend/src/components/WorkspaceSidebar/ProjectFileItem.tsx
new file mode 100644
index 0000000..7f6a3a4
--- /dev/null
+++ b/frontend/src/components/WorkspaceSidebar/ProjectFileItem.tsx
@@ -0,0 +1,43 @@
+import { cn } from '@/lib/utils';
+import { FileItem } from '@/types';
+import { Check, Image, Minus } from 'lucide-react';
+
+export default function ProjectFileItem({
+  className = '',
+  item,
+  depth = 1,
+}: {
+  className?: string;
+  item: FileItem;
+  depth?: number;
+}) {
+  const paddingLeft = depth * 12;
+
+  return (
+    <button
+      className={cn('flex w-full gap-2 rounded-md py-0.5 pr-1 hover:bg-gray-200', className)}
+      style={{
+        paddingLeft,
+      }}
+    >
+      <div className="flex items-center">
+        <Image
+          size={16}
+          className="stroke-gray-500"
+        />
+      </div>
+      <span className="grow overflow-hidden text-ellipsis whitespace-nowrap text-left">{item.name}</span>
+      {item.status === 'idle' ? (
+        <Minus
+          size={16}
+          className="stroke-gray-400"
+        />
+      ) : (
+        <Check
+          size={16}
+          className="stroke-green-500"
+        />
+      )}
+    </button>
+  );
+}
diff --git a/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx b/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx
new file mode 100644
index 0000000..181740c
--- /dev/null
+++ b/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx
@@ -0,0 +1,60 @@
+import { Project } from '@/types';
+import { ChevronRight, SquarePenIcon, Upload } from 'lucide-react';
+import { useState } from 'react';
+import ProjectFileItem from './ProjectFileItem';
+import ProjectDirectoryItem from './ProjectDirectoryItem';
+
+export default function ProjectStructure({ project }: { project: Project }) {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  return (
+    <div className="flex select-none flex-col px-1 pb-2">
+      <header className="flex w-full items-center gap-2 rounded px-1 hover:bg-gray-200">
+        <div
+          className="flex w-full cursor-pointer items-center gap-1 overflow-hidden pr-1"
+          onClick={() => setIsExpanded((prev) => !prev)}
+        >
+          <button>
+            <ChevronRight
+              size={16}
+              className={`stroke-gray-500 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+            />
+          </button>
+          <div className="flex flex-col overflow-hidden">
+            <h2 className="body-small-strong overflow-hidden text-ellipsis whitespace-nowrap">{project.name}</h2>
+            <h3 className="caption overflow-hidden text-ellipsis whitespace-nowrap">{project.type}</h3>
+          </div>
+        </div>
+        <button
+          className="flex gap-1"
+          onClick={() => console.log('edit project')}
+        >
+          <SquarePenIcon size={16} />
+        </button>
+        <button
+          className="flex gap-1"
+          onClick={() => console.log('upload image')}
+        >
+          <Upload size={16} />
+        </button>
+      </header>
+      <div className={`caption flex flex-col ${isExpanded ? '' : 'hidden'}`}>
+        {project.children.map((item) =>
+          item.type === 'directory' ? (
+            <ProjectDirectoryItem
+              key={`${project.id}-${item.name}`}
+              item={item}
+              className={isExpanded ? '' : 'hidden'}
+            />
+          ) : (
+            <ProjectFileItem
+              key={`${project.id}-${item.name}`}
+              item={item}
+              className={isExpanded ? '' : 'hidden'}
+            />
+          )
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/WorkspaceSidebar/index.stories.tsx b/frontend/src/components/WorkspaceSidebar/index.stories.tsx
new file mode 100644
index 0000000..03eef0c
--- /dev/null
+++ b/frontend/src/components/WorkspaceSidebar/index.stories.tsx
@@ -0,0 +1,82 @@
+import '@/index.css';
+import WorkspaceSidebar from '.';
+import { ResizablePanel, ResizablePanelGroup } from '../ui/resizable';
+import { Project } from '@/types';
+import { Meta } from '@storybook/react';
+import { Component } from 'react';
+
+const meta: Meta<typeof Component> = {
+  title: 'Workspace/WorkspaceSidebar',
+  component: WorkspaceSidebar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+const projects: Project[] = [
+  {
+    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',
+      },
+    ],
+  },
+];
+
+export const Default = () => (
+  <div className="h-screen">
+    <ResizablePanelGroup direction="horizontal">
+      <WorkspaceSidebar
+        workspaceName="Workspace-name-1"
+        projects={projects}
+      />
+      <ResizablePanel className="flex w-full items-center justify-center">
+        <div>Content</div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </div>
+);
diff --git a/frontend/src/components/WorkspaceSidebar/index.tsx b/frontend/src/components/WorkspaceSidebar/index.tsx
new file mode 100644
index 0000000..748e9f0
--- /dev/null
+++ b/frontend/src/components/WorkspaceSidebar/index.tsx
@@ -0,0 +1,45 @@
+import { SquarePen } from 'lucide-react';
+import { ResizableHandle, ResizablePanel } from '../ui/resizable';
+import ProjectStructure from './ProjectStructure';
+import { Button } from '../ui/button';
+import { Project } from '@/types';
+
+export default function WorkspaceSidebar({ workspaceName, projects }: { workspaceName: string; projects: Project[] }) {
+  return (
+    <>
+      <ResizablePanel
+        minSize={10}
+        maxSize={35}
+        defaultSize={20}
+        className="flex h-full flex-col bg-gray-100"
+        onResize={(size) => {
+          console.log(size);
+        }}
+      >
+        <header className="body flex w-full items-center gap-2 p-2">
+          <h1 className="w-full overflow-hidden text-ellipsis whitespace-nowrap">{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>
+          {projects.map((project) => (
+            <ProjectStructure
+              key={project.id}
+              project={project}
+            />
+          ))}
+        </div>
+      </ResizablePanel>
+      <ResizableHandle className="bg-gray-300" />
+    </>
+  );
+}
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index c2fe07a..9a10612 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -24,6 +24,7 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-10 px-4 py-2',
+        xs: 'rounded-md px-2 py-1',
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',
diff --git a/frontend/src/components/ui/resizable.tsx b/frontend/src/components/ui/resizable.tsx
new file mode 100644
index 0000000..a3bba1c
--- /dev/null
+++ b/frontend/src/components/ui/resizable.tsx
@@ -0,0 +1,43 @@
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-gray-200 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90 dark:bg-gray-800 dark:focus-visible:ring-gray-300",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-gray-200 bg-gray-200 dark:border-gray-800 dark:bg-gray-800">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
new file mode 100644
index 0000000..1bfb42d
--- /dev/null
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,21 @@
+export type FileItem = {
+  id: number;
+  name: string;
+  url: string;
+  type: 'image' | 'json';
+  status: 'idle' | 'done';
+};
+
+export type DirectoryItem = {
+  id: number;
+  name: string;
+  type: 'directory';
+  children: Array<DirectoryItem | FileItem>;
+};
+
+export type Project = {
+  id: number;
+  name: string;
+  type: 'Classification' | 'Detection' | 'Segmentation';
+  children: Array<DirectoryItem | FileItem>;
+};
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 54ed2fb..e2a6b48 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -33,6 +33,10 @@ export default {
       },
     },
     extend: {
+      padding: {
+        0.5: '0.125rem',
+        1.5: '0.375rem',
+      },
       colors: {
         transparent: 'transparent',
         current: 'currentColor',