Merge branch 'fe/feat/257-auto-label-select-model' into 'fe/develop'

Feat: 오토 레이블링 시 모델 선택 기능 추가 - S11P21S002-257

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

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>
+  );
+}

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>
   );