Merge branch 'fe/develop' of https://lab.ssafy.com/s11-s-project/S11P21S002 into fe/refactor/admin-site

frontend/src/components/ImageCanvas/LabelPolygon.tsx

@@ -1,6 +1,5 @@
 import { Label } from '@/types';
 import Konva from 'konva';
-import { useState } from 'react';
 import { Line } from 'react-konva';
 import PolygonTransformer from './PolygonTransformer';
 
@@ -8,21 +7,25 @@ export default function LabelPolygon({
   isSelected,
   onSelect,
   info,
+  setLabel,
   stage,
   dragLayer,
 }: {
   isSelected: boolean;
   onSelect: () => void;
   info: Label;
+  setLabel: (coordinate: [number, number][]) => void;
   stage: Konva.Stage;
   dragLayer: Konva.Layer;
 }) {
-  const [coordinates, setCoordinates] = useState<Array<[number, number]>>(info.coordinates);
+  const handleChange = (coordinates: [number, number][]) => {
+    setLabel(coordinates);
+  };
 
   return (
     <>
       <Line
-        points={coordinates.flat()}
+        points={info.coordinates.flat()}
         stroke={info.color}
         strokeWidth={1}
         onMouseDown={onSelect}
@@ -33,8 +36,8 @@ export default function LabelPolygon({
       />
       {isSelected && (
         <PolygonTransformer
-          coordinates={coordinates}
-          setCoordinates={setCoordinates}
+          coordinates={info.coordinates}
+          setCoordinates={handleChange}
           stage={stage}
           dragLayer={dragLayer}
         />

frontend/src/components/ImageCanvas/index.tsx

@@ -119,10 +119,10 @@ export default function ImageCanvas() {
     setPolygonPoints([]);
     if (polygonPoints.length < 4) return;
 
-    const color = Math.floor(Math.random() * 65535)
+    const color = Math.floor(Math.random() * 0xffffff)
       .toString(16)
       .padStart(6, '0');
-    const id = labels.length + 1;
+    const id = labels.length;
     addLabel({
       id: id,
       name: 'label',
@@ -146,7 +146,7 @@ export default function ImageCanvas() {
       return;
     }
     setRectPoints([]);
-    const color = Math.floor(Math.random() * 65535)
+    const color = Math.floor(Math.random() * 0xffffff)
       .toString(16)
       .padStart(6, '0');
     const id = labels.length;
@@ -289,6 +289,7 @@ export default function ImageCanvas() {
                 isSelected={label.id === selectedLabelId}
                 onSelect={() => setSelectedLabelId(label.id)}
                 info={label}
+                setLabel={setLabel(label.id)}
                 stage={stageRef.current as Konva.Stage}
                 dragLayer={dragLayerRef.current as Konva.Layer}
               />

frontend/src/components/WorkspaceDropdownMenu/index.tsx

@@ -12,17 +12,34 @@ import React from 'react';
 import ImageUploadFolderForm from '../ImageUploadFolderModal/ImageUploadFolderForm';
 import ImageUploadZipForm from '../ImageUploadZipModal/ImageUploadZipForm';
 
-export default function WorkspaceDropdownMenu({ projectId, folderId }: { projectId: number; folderId: number }) {
+export default function WorkspaceDropdownMenu({
+  projectId,
+  folderId,
+  refetch,
+}: {
+  projectId: number;
+  folderId: number;
+  refetch: () => void;
+}) {
   const [isOpenUploadFile, setIsOpenUploadFile] = React.useState(false);
   const [isOpenUploadFolder, setIsOpenUploadFolder] = React.useState(false);
   const [isOpenUploadZip, setIsOpenUploadZip] = React.useState(false);
 
   const handleOpenUploadFile = () => setIsOpenUploadFile(true);
-  const handleCloseUploadFile = () => setIsOpenUploadFile(false);
+  const handleCloseUploadFile = () => {
+    refetch();
+    setIsOpenUploadFile(false);
+  };
   const handleOpenUploadFolder = () => setIsOpenUploadFolder(true);
-  const handleCloseUploadFolder = () => setIsOpenUploadFolder(false);
+  const handleCloseUploadFolder = () => {
+    refetch();
+    setIsOpenUploadFolder(false);
+  };
   const handleOpenUploadZip = () => setIsOpenUploadZip(true);
-  const handleCloseUploadZip = () => setIsOpenUploadZip(false);
+  const handleCloseUploadZip = () => {
+    refetch();
+    setIsOpenUploadZip(false);
+  };
 
   return (
     <>

frontend/src/components/WorkspaceSidebar/ProjectDirectoryItem.tsx

@@ -36,20 +36,19 @@ export default function ProjectDirectoryItem({
         <button className="flex items-center">
           <ChevronRight
             size={16}
-            className={`stroke-gray-500 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+            className={cn('stroke-gray-500 transition-transform', isExpanded ? 'rotate-90' : '')}
           />
         </button>
         <span className="overflow-hidden text-ellipsis whitespace-nowrap">{item.title}</span>
       </div>
-      {isExpanded && (
-        <div className="caption flex flex-col">
+      {
+        <div className={cn('caption flex flex-col', isExpanded ? '' : 'hidden')}>
           {folderData.children.map((item) => (
             <ProjectDirectoryItem
               key={`${projectId}-${item.title}`}
               projectId={projectId}
               item={item}
               depth={depth + 1}
-              initialExpanded={true}
             />
           ))}
           {folderData.images.map((item) => (
@@ -61,7 +60,7 @@ export default function ProjectDirectoryItem({
             />
           ))}
         </div>
-      )}
+      }
     </>
   );
 }

frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx

@@ -11,7 +11,7 @@ import WorkspaceDropdownMenu from '../WorkspaceDropdownMenu';
 export default function ProjectStructure({ project }: { project: Project }) {
   const setProject = useCanvasStore((state) => state.setProject);
   const image = useCanvasStore((state) => state.image);
-  const { data: folderData } = useFolderQuery(project.id.toString(), 0);
+  const { data: folderData, refetch } = useFolderQuery(project.id.toString(), 0);
 
   useEffect(() => {
     setProject(project);
@@ -27,6 +27,7 @@ export default function ProjectStructure({ project }: { project: Project }) {
           <WorkspaceDropdownMenu
             projectId={project.id}
             folderId={0}
+            refetch={refetch}
           />
         </header>
         {folderData.children.length === 0 && folderData.images.length === 0 ? (

frontend/src/components/WorkspaceSidebar/index.tsx

@@ -5,6 +5,7 @@ import { Project } from '@/types';
 import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '../ui/select';
 import useCanvasStore from '@/stores/useCanvasStore';
 import { webPath } from '@/router';
+import { Suspense } from 'react';
 
 export default function WorkspaceSidebar({ workspaceName, projects }: { workspaceName: string; projects: Project[] }) {
   const { projectId: selectedProjectId } = useParams<{ projectId: string }>();
@@ -48,7 +49,7 @@ export default function WorkspaceSidebar({ workspaceName, projects }: { workspac
             </SelectContent>
           </Select>
         </div>
-        {selectedProject && <ProjectStructure project={selectedProject} />}
+        <Suspense fallback={<div></div>}>{selectedProject && <ProjectStructure project={selectedProject} />}</Suspense>
       </ResizablePanel>
       <ResizableHandle className="bg-gray-300" />
     </>

frontend/src/pages/ImageFolderUploadTest.tsx

@@ -1,16 +0,0 @@
-import WorkspaceDropdownMenu from '@/components/WorkspaceDropdownMenu';
-import { useParams } from 'react-router-dom';
-
-export default function ImageFolderUploadTest() {
-  const params = useParams<{ workspaceId: string; projectId: string }>();
-  const projectId = Number(params.projectId);
-
-  return (
-    <div className="min-h-screen w-full">
-      <WorkspaceDropdownMenu
-        projectId={projectId}
-        folderId={0}
-      />
-    </div>
-  );
-}

frontend/src/router/index.tsx

@@ -16,7 +16,6 @@ import WorkspaceBrowseIndex from '@/pages/WorkspaceBrowseIndex';
 import AdminIndex from '@/pages/AdminIndex';
 import LabelCanvas from '@/pages/LabelCanvas';
 import ReviewDetail from '@/pages/ReviewDetail';
-import ImageFolderUploadTest from '@/pages/ImageFolderUploadTest';
 import NotFound from '@/pages/NotFound';
 import ReviewRequest from '@/pages/ReviewRequest';
 import ModelIndex from '@/pages/ModelIndex';
@@ -28,7 +27,6 @@ export const webPath = {
   workspace: () => '/workspace',
   admin: () => `/admin`,
   oauthCallback: () => '/redirect/oauth2',
-  imageFolderUploadTest: () => '/imagefolderuploadtest',
 };
 
 const router = createBrowserRouter([
@@ -153,10 +151,6 @@ const router = createBrowserRouter([
       </Suspense>
     ),
   },
-  {
-    path: `${webPath.imageFolderUploadTest()}/:projectId`,
-    element: <ImageFolderUploadTest />,
-  },
 ]);
 
 export default router;