From 2541beba91b46dcee7c8faded70beee566930efd Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Wed, 2 Oct 2024 09:52:43 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=98=A4=ED=86=A0=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EB=B8=94=EB=A7=81=20=EC=8B=9C=20=EB=AA=A8=EB=8D=B8=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20-=20S11P2?=
 =?UTF-8?q?1S002-257?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WorkspaceSidebar/AutoLabelButton.tsx      | 79 +++++++++++++++++++
 .../WorkspaceSidebar/ProjectStructure.tsx     | 51 +-----------
 2 files changed, 81 insertions(+), 49 deletions(-)
 create mode 100644 frontend/src/components/WorkspaceSidebar/AutoLabelButton.tsx

diff --git a/frontend/src/components/WorkspaceSidebar/AutoLabelButton.tsx b/frontend/src/components/WorkspaceSidebar/AutoLabelButton.tsx
new file mode 100644
index 0000000..8c29d98
--- /dev/null
+++ b/frontend/src/components/WorkspaceSidebar/AutoLabelButton.tsx
@@ -0,0 +1,79 @@
+import { useToast } from '@/hooks/use-toast';
+import { LoaderCircle, Play } from 'lucide-react';
+import { Button } from '../ui/button';
+import useAutoLabelQuery from '@/queries/projects/useAutoLabelQuery';
+import { useQueryClient } from '@tanstack/react-query';
+import useProjectModelsQuery from '@/queries/models/useProjectModelsQuery';
+import { useId, useRef } from 'react';
+
+export default function AutoLabelButton({ projectId }: { projectId: number }) {
+  const { data: modelData } = useProjectModelsQuery(projectId);
+  const queryClient = useQueryClient();
+  const requestAutoLabel = useAutoLabelQuery();
+  const { toast } = useToast();
+  const id = useId();
+  const modelRef = useRef<HTMLSelectElement>(null);
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <div className="flex w-full items-center gap-1.5">
+        <label
+          htmlFor={id}
+          className="body-small shrink-0"
+        >
+          모델
+        </label>
+        <select
+          id={id}
+          ref={modelRef}
+          className="body-small w-full cursor-pointer rounded border border-gray-300 bg-gray-50 p-1"
+          defaultValue={modelData.filter((model) => model.isDefault)[0].id}
+        >
+          {modelData?.map((model) => (
+            <option
+              key={model.id}
+              value={model.id}
+            >
+              {model.name}
+            </option>
+          ))}
+        </select>
+      </div>
+      <Button
+        variant="blue"
+        className="w-full overflow-hidden"
+        disabled={requestAutoLabel.isPending}
+        onClick={() => {
+          requestAutoLabel.mutate(
+            { projectId: projectId, modelId: parseInt(modelRef.current?.value || '1') },
+            {
+              onSuccess: () => {
+                queryClient.invalidateQueries({ queryKey: ['folder', projectId.toString()] });
+                queryClient.invalidateQueries({ queryKey: ['labelJson'] });
+                toast({ title: '레이블링 성공' });
+              },
+              onError: () => {
+                toast({ title: '레이블링 중 오류가 발생했습니다.' });
+              },
+            }
+          );
+        }}
+      >
+        {requestAutoLabel.isPending ? (
+          <LoaderCircle
+            size={16}
+            className="animate-spin"
+          />
+        ) : (
+          <>
+            <Play
+              size={16}
+              className="mr-1 shrink-0"
+            />
+            <span>자동 레이블링</span>
+          </>
+        )}
+      </Button>
+    </div>
+  );
+}
diff --git a/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx b/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx
index 3ca75fd..76f0b04 100644
--- a/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx
+++ b/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx
@@ -1,26 +1,19 @@
 import { Project } from '@/types';
-import { LoaderCircle, Play } from 'lucide-react';
 import ProjectFileItem from './ProjectFileItem';
 import ProjectDirectoryItem from './ProjectDirectoryItem';
 import useFolderQuery from '@/queries/folders/useFolderQuery';
 import useCanvasStore from '@/stores/useCanvasStore';
-import { Button } from '../ui/button';
 import { useEffect } from 'react';
 import WorkspaceDropdownMenu from '../WorkspaceDropdownMenu';
-import useAutoLabelQuery from '@/queries/projects/useAutoLabelQuery';
 import useProjectStore from '@/stores/useProjectStore';
-import { useQueryClient } from '@tanstack/react-query';
-import { useToast } from '@/hooks/use-toast';
 import useProjectCategoriesQuery from '@/queries/category/useProjectCategoriesQuery';
+import AutoLabelButton from './AutoLabelButton';
 
 export default function ProjectStructure({ project }: { project: Project }) {
   const { setProject, setCategories } = useProjectStore();
   const { data: categories } = useProjectCategoriesQuery(project.id);
   const image = useCanvasStore((state) => state.image);
   const { data: folderData, refetch } = useFolderQuery(project.id.toString(), 0);
-  const queryClient = useQueryClient();
-  const requestAutoLabel = useAutoLabelQuery();
-  const { toast } = useToast();
 
   useEffect(() => {
     setCategories(categories);
@@ -69,47 +62,7 @@ export default function ProjectStructure({ project }: { project: Project }) {
       </div>
 
       <div className="flex">
-        <Button
-          variant="blue"
-          className="w-full overflow-hidden"
-          disabled={requestAutoLabel.isPending}
-          onClick={() => {
-            requestAutoLabel.mutate(
-              { projectId: project.id },
-              {
-                onSuccess: () => {
-                  queryClient.invalidateQueries({ queryKey: ['folder', project!.id.toString()] });
-                  queryClient.invalidateQueries({ queryKey: ['labelJson'] });
-                  toast({
-                    title: '레이블링 성공',
-                  });
-                },
-                onError: () => {
-                  toast({
-                    title: '레이블링 중 오류가 발생했습니다.',
-                  });
-                },
-              }
-            );
-          }}
-        >
-          {requestAutoLabel.isPending ? (
-            <>
-              <LoaderCircle
-                size={16}
-                className="animate-spin"
-              />
-            </>
-          ) : (
-            <>
-              <Play
-                size={16}
-                className="mr-1"
-              />
-              <span>자동 레이블링</span>
-            </>
-          )}
-        </Button>
+        <AutoLabelButton projectId={project.id} />
       </div>
     </div>
   );