Feat: 파일 상태마다 다른 아이콘 적용

frontend/src/components/ImageCanvas/index.tsx

@@ -65,13 +65,9 @@ export default function ImageCanvas() {
       imageHeight: image!.height,
     });
 
-    saveImageLabels(project.id, imageId, { data: json })
-      .catch(() => {
-        alert('레이블 데이터 저장 실패');
-      })
-      .then(() => {
-        alert('레이블링 성공!');
-      });
+    saveImageLabels(project.id, imageId, { data: json }).catch(() => {
+      alert('레이블 데이터 저장 실패');
+    });
   };
   const startDrawRect = () => {
     const { x, y } = stageRef.current!.getRelativePointerPosition()!;

frontend/src/components/WorkspaceSidebar/ProjectFileItem.tsx

@@ -1,6 +1,6 @@
 import { cn } from '@/lib/utils';
 import { ImageResponse } from '@/types';
-import { Check, Image, Minus } from 'lucide-react';
+import { ArrowDownToLine, Check, Image, Loader, Minus, Send } from 'lucide-react';
 import useCanvasStore from '@/stores/useCanvasStore';
 
 export default function ProjectFileItem({
@@ -25,7 +25,7 @@ export default function ProjectFileItem({
   return (
     <button
       className={cn(
-        `flex w-full gap-2 rounded-md py-0.5 pr-1 ${selected ? 'bg-gray-200' : 'hover:bg-gray-100'}`,
+        `flex w-full items-center gap-2 rounded-md py-0.5 pr-1 ${selected ? 'bg-gray-200' : 'hover:bg-gray-100'}`,
         className
       )}
       style={{
@@ -40,15 +40,30 @@ export default function ProjectFileItem({
         />
       </div>
       <span className="grow overflow-hidden text-ellipsis whitespace-nowrap text-left">{item.imageTitle}</span>
-      {item.status === 'COMPLETED' ? (
-        <Check
-          size={16}
-          className="shrink-0 stroke-green-500"
+      {item.status === 'PENDING' ? (
+        <Minus
+          size={12}
+          className="shrink-0 stroke-gray-400"
+        />
+      ) : item.status === 'IN_PROGRESS' ? (
+        <Loader
+          size={12}
+          className="shrink-0 stroke-yellow-500"
+        />
+      ) : item.status === 'SAVE' ? (
+        <ArrowDownToLine
+          size={12}
+          className="shrink-0 stroke-gray-400"
+        />
+      ) : item.status === 'REVIEW_REQUEST' ? (
+        <Send
+          size={12}
+          className="shrink-0 stroke-blue-400"
         />
       ) : (
-        <Minus
-          size={16}
-          className="shrink-0 stroke-gray-400"
+        <Check
+          size={12}
+          className="shrink-0 stroke-green-500"
         />
       )}
     </button>

frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx

@@ -1,5 +1,5 @@
 import { Project } from '@/types';
-import { Play } from 'lucide-react';
+import { LoaderCircle, Play } from 'lucide-react';
 import ProjectFileItem from './ProjectFileItem';
 import ProjectDirectoryItem from './ProjectDirectoryItem';
 import useFolderQuery from '@/queries/folders/useFolderQuery';
@@ -62,11 +62,17 @@ export default function ProjectStructure({ project }: { project: Project }) {
         <Button
           variant="outlinePrimary"
           className="w-full"
+          disabled={requestAutoLabel.isPending}
           onClick={() => {
             requestAutoLabel.mutate(
               { projectId: project.id },
               {
-                onSuccess: refetch,
+                onSuccess: () => {
+                  refetch;
+                  setTimeout(() => {
+                    alert('레이블링 성공!');
+                  }, 100);
+                },
                 onError: () => {
                   alert('자동 레이블링을 요청하는 중 오류가 발생했습니다.');
                 },
@@ -74,11 +80,22 @@ export default function ProjectStructure({ project }: { project: Project }) {
             );
           }}
         >
-          <Play
-            size={16}
-            className="mr-1"
-          />
-          <span>자동 레이블링</span>
+          {requestAutoLabel.isPending ? (
+            <>
+              <LoaderCircle
+                size={16}
+                className="animate-spin"
+              />
+            </>
+          ) : (
+            <>
+              <Play
+                size={16}
+                className="mr-1"
+              />
+              <span>자동 레이블링</span>
+            </>
+          )}
         </Button>
       </div>
     </div>