Feat: json 데이터 캔버스에 렌더링

frontend/src/api/labelJsonApi.ts

@@ -0,0 +1,6 @@
+import { LabelJson } from '@/types';
+import axios from 'axios';
+
+export async function getLabelJson(jsonPath: string) {
+  return axios.get<LabelJson>(jsonPath).then(({ data }) => data);
+}

frontend/src/components/ImageCanvas/index.tsx

@@ -7,8 +7,13 @@ import LabelRect from './LabelRect';
 import { Vector2d } from 'konva/lib/types';
 import LabelPolygon from './LabelPolygon';
 import CanvasControlBar from '../CanvasControlBar';
+import useLabelJsonQuery from '@/queries/labelJson/useLabelJsonQuery';
+import { Label } from '@/types';
 
 export default function ImageCanvas() {
+  const { imagePath, dataPath } = useCanvasStore((state) => state.image)!;
+  const { data: labelData } = useLabelJsonQuery(dataPath);
+  const { shapes } = labelData;
   const selectedLabelId = useCanvasStore((state) => state.selectedLabelId);
   const setSelectedLabelId = useCanvasStore((state) => state.setSelectedLabelId);
   const sidebarSize = useCanvasStore((state) => state.sidebarSize);
@@ -17,14 +22,27 @@ export default function ImageCanvas() {
   const stageRef = useRef<Konva.Stage>(null);
   const dragLayerRef = useRef<Konva.Layer>(null);
   const scale = useRef<number>(0);
-  const imageUrl = useCanvasStore((state) => state.image);
   const labels = useCanvasStore((state) => state.labels) ?? [];
-  const [image] = useImage(imageUrl);
-  const [rectPoints, setRectPoints] = useState<[number, number][]>([]);
-  const [polygonPoints, setPolygonPoints] = useState<[number, number][]>([]);
+  const [image] = useImage(imagePath);
   const drawState = useCanvasStore((state) => state.drawState);
   const setDrawState = useCanvasStore((state) => state.setDrawState);
   const addLabel = useCanvasStore((state) => state.addLabel);
+  const setLabels = useCanvasStore((state) => state.setLabels);
+  const [rectPoints, setRectPoints] = useState<[number, number][]>([]);
+  const [polygonPoints, setPolygonPoints] = useState<[number, number][]>([]);
+
+  useEffect(() => {
+    setLabels(
+      shapes.map<Label>(({ label, color, points, shape_type }, index) => ({
+        id: index,
+        name: label,
+        color,
+        type: shape_type === 'polygon' ? 'polygon' : 'rect',
+        coordinates: points,
+      }))
+    );
+  }, [setLabels, shapes]);
+
   const startDrawRect = () => {
     const { x, y } = stageRef.current!.getRelativePointerPosition()!;
     setRectPoints([

frontend/src/components/WorkspaceSidebar/ProjectFileItem.tsx

@@ -6,7 +6,7 @@ import useCanvasStore from '@/stores/useCanvasStore';
 export default function ProjectFileItem({
   className = '',
   item,
-  depth = 1,
+  depth = 0,
   selected,
 }: {
   className?: string;
@@ -15,22 +15,11 @@ export default function ProjectFileItem({
   selected: boolean;
 }) {
   const paddingLeft = depth * 12;
-  const changeImage = useCanvasStore((state) => state.changeImage);
+  // const changeImage = useCanvasStore((state) => state.changeImage);
+  const setImage = useCanvasStore((state) => state.setImage);
 
   const handleClick = () => {
-    // TODO: fetch image
-    changeImage(item.imageUrl, [
-      {
-        id: item.id,
-        name: item.imageTitle,
-        type: 'rect',
-        color: '#FF0000',
-        coordinates: [
-          [0, 0],
-          [100, 100],
-        ],
-      },
-    ]);
+    setImage(item);
   };
 
   return (

frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx

@@ -9,6 +9,18 @@ export default function ProjectStructure({ project }: { project: Project }) {
   const image = useCanvasStore((state) => state.image);
   const { data: folderData } = useFolderQuery(project.id.toString(), 0);
 
+  // TODO: 더미 데이터 제거
+  folderData.images = [
+    {
+      id: 1,
+      imagePath: 'https://worlabel-file-bucket.s3.ap-northeast-2.amazonaws.com/dummy.jpg',
+      // dataPath: 'https://worlabel-file-bucket.s3.ap-northeast-2.amazonaws.com/detection.json',
+      dataPath: 'https://worlabel-file-bucket.s3.ap-northeast-2.amazonaws.com/segmentation.json',
+      imageTitle: 'dummy',
+      status: 'PENDING',
+    },
+  ];
+
   return (
     <div className="flex h-full flex-col overflow-y-auto px-1 pb-2">
       <header className="flex w-full items-center gap-2 rounded p-1">
@@ -45,7 +57,7 @@ export default function ProjectStructure({ project }: { project: Project }) {
             <ProjectFileItem
               key={`${project.id}-${item.imageTitle}`}
               item={item}
-              selected={image === item.imageUrl}
+              selected={image?.id === item.id}
             />
           ))}
         </div>

frontend/src/pages/LabelCanvas.tsx

@@ -5,13 +5,13 @@ import useCanvasStore from '@/stores/useCanvasStore';
 import { Suspense } from 'react';
 
 export default function LabelCanvas() {
-  const imageUrl = useCanvasStore((state) => state.image);
+  const image = useCanvasStore((state) => state.image);
 
   return (
     <ResizablePanel className="flex w-full items-center">
       <Suspense fallback={<div></div>}>
         <main className="h-full grow">
-          {imageUrl ? (
+          {image ? (
             <ImageCanvas />
           ) : (
             <div className="body flex h-full w-full select-none items-center justify-center bg-gray-200 text-gray-400">

frontend/src/queries/labelJson/useLabelJsonQuery.ts

@@ -0,0 +1,9 @@
+import { getLabelJson } from '@/api/labelJsonApi';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+export default function useLabelJsonQuery(jsonPath: string) {
+  return useSuspenseQuery({
+    queryKey: ['labelJson', jsonPath],
+    queryFn: () => getLabelJson(jsonPath),
+  });
+}

frontend/src/stores/useCanvasStore.ts

@@ -1,14 +1,14 @@
-import { Label } from '@/types';
+import { ImageResponse, Label } from '@/types';
 import { create } from 'zustand';
 
 interface CanvasState {
   sidebarSize: number;
-  image: string;
+  image: ImageResponse | null;
   labels: Label[];
   drawState: 'pen' | 'rect' | 'pointer';
   selectedLabelId: number | null;
   setSidebarSize: (width: number) => void;
-  changeImage: (image: string, labels: Label[]) => void;
+  setImage: (image: ImageResponse) => void;
   setLabels: (labels: Label[]) => void;
   addLabel: (label: Label) => void;
   removeLabel: (labelId: number) => void;
@@ -19,12 +19,12 @@ interface CanvasState {
 
 const useCanvasStore = create<CanvasState>()((set) => ({
   sidebarSize: 20,
-  image: '',
+  image: null,
   labels: [],
   drawState: 'pointer',
   selectedLabelId: null,
   setSidebarSize: (width) => set({ sidebarSize: width }),
-  changeImage: (image: string, labels: Label[]) => set({ image, labels }),
+  setImage: (image) => set({ image }),
   addLabel: (label: Label) => set((state) => ({ labels: [...state.labels, label] })),
   setLabels: (labels) => set({ labels }),
   removeLabel: (labelId: number) => set((state) => ({ labels: state.labels.filter((label) => label.id !== labelId) })),

frontend/src/types/index.ts

@@ -16,7 +16,7 @@ export type DirectoryItem = {
 export type Project = {
   id: number;
   name: string;
-  type: 'Classification' | 'Detection' | 'Segmentation';
+  type: 'classification' | 'detection' | 'segmentation';
   children: Array<DirectoryItem | FileItem>;
 };
 
@@ -53,7 +53,8 @@ export interface FolderResponse {
 export interface ImageResponse {
   id: number;
   imageTitle: string;
-  imageUrl: string;
+  imagePath: string;
+  dataPath: string;
   status: 'PENDING' | 'IN_PROGRESS' | 'SAVE' | 'REVIEW_REQUEST' | 'COMPLETED';
 }
 
@@ -261,3 +262,22 @@ export interface ErrorResponse {
   message: string;
   isSuccess: boolean;
 }
+
+export interface Shape {
+  label: string;
+  color: string;
+  points: [number, number][];
+  group_id: number;
+  shape_type: 'polygon' | 'rectangle';
+  flags: Record<string, never>;
+}
+
+export interface LabelJson {
+  version: string;
+  task_type: 'det' | 'seg';
+  shapes: Shape[];
+  split: string;
+  imageHeight: number;
+  imageWidth: number;
+  imageDepth: number;
+}