From 9a29b5b21c6b77c5995de76abbc3b4e5d7061f63 Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Mon, 30 Sep 2024 12:56:58 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Fix:=20classification=20=EC=A0=80=EC=9E=A5?=
 =?UTF-8?q?=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CanvasControlBar/index.tsx  | 18 +++++++++++-------
 frontend/src/components/ImageCanvas/index.tsx  |  1 +
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/CanvasControlBar/index.tsx b/frontend/src/components/CanvasControlBar/index.tsx
index d9ef705..6a2f251 100644
--- a/frontend/src/components/CanvasControlBar/index.tsx
+++ b/frontend/src/components/CanvasControlBar/index.tsx
@@ -1,14 +1,17 @@
 import useCanvasStore from '@/stores/useCanvasStore';
-import { LucideIcon, MousePointer2, PenTool, Plus, Save, Square } from 'lucide-react';
+import { BookmarkPlus, LucideIcon, MousePointer2, PenTool, Save, Square } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { MessageSquare } from 'lucide-react';
+import { LabelCategoryResponse } from '@/types';
 
 export default function CanvasControlBar({
   saveJson,
   projectType,
+  categories,
 }: {
   saveJson: () => void;
   projectType: 'classification' | 'detection' | 'segmentation';
+  categories: LabelCategoryResponse[];
 }) {
   const { drawState, setDrawState, setLabels, labels } = useCanvasStore();
   const buttonBaseClassName = 'rounded-lg p-2 transition-colors';
@@ -22,7 +25,7 @@ export default function CanvasControlBar({
   };
 
   return (
-    <div className="fixed bottom-14 left-[50%] flex translate-x-[-50%] items-center gap-2 rounded-xl bg-white p-1 shadow-xl">
+    <div className="fixed bottom-10 left-[50%] flex translate-x-[-50%] items-center gap-2 rounded-xl bg-white p-1 shadow-xl">
       {Object.keys(controls).map((control) => {
         const Icon = controls[control];
         return (
@@ -39,24 +42,25 @@ export default function CanvasControlBar({
         );
       })}
 
-      {projectType === 'classification' && labels.length === 0 && (
+      {projectType === 'classification' && (
         <button
-          className={cn(buttonClassName, buttonBaseClassName)}
+          className={cn(labels.length === 0 ? buttonClassName : '', buttonBaseClassName)}
           onClick={() => {
             setLabels([
               {
                 id: 0,
-                categoryId: 0,
+                categoryId: categories[0]!.id,
                 color: '#1177ff',
                 type: 'point',
                 coordinates: [[0, 0]],
               },
             ]);
           }}
+          disabled={labels.length !== 0}
         >
-          <Plus
+          <BookmarkPlus
             size={20}
-            color="black"
+            color={labels.length === 0 ? 'black' : 'gray'}
           />
         </button>
       )}
diff --git a/frontend/src/components/ImageCanvas/index.tsx b/frontend/src/components/ImageCanvas/index.tsx
index 79988bb..9244c5d 100644
--- a/frontend/src/components/ImageCanvas/index.tsx
+++ b/frontend/src/components/ImageCanvas/index.tsx
@@ -461,6 +461,7 @@ export default function ImageCanvas() {
       <CanvasControlBar
         saveJson={saveJson}
         projectType={project!.type}
+        categories={categories}
       />
     </div>
   ) : (

From 715440b37da3319cd9397d80ba0e51deff207717 Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Mon, 30 Sep 2024 13:01:41 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Fix:=20=EB=B9=8C=EB=93=9C=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/CanvasControlBar/index.stories.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/components/CanvasControlBar/index.stories.tsx b/frontend/src/components/CanvasControlBar/index.stories.tsx
index 52d945d..8340d9f 100644
--- a/frontend/src/components/CanvasControlBar/index.stories.tsx
+++ b/frontend/src/components/CanvasControlBar/index.stories.tsx
@@ -10,5 +10,11 @@ export const Default = () => (
   <CanvasControlBar
     saveJson={() => {}}
     projectType="segmentation"
+    categories={[
+      {
+        id: 1,
+        labelName: 'label',
+      },
+    ]}
   />
 );