Merge branch 'fe/feat/api' into 'fe/develop'

Feat: 레이블 카테고리 , 모델 api 및 쿼리 구현

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

frontend/src/api/categoryApi.ts

@@ -0,0 +1,31 @@
+import api from '@/api/axiosConfig';
+import { LabelCategoryRequest, LabelCategoryResponse } from '@/types';
+
+// 레이블 카테고리 리스트 조회
+export async function getProjectCategories(projectId: number) {
+  return api.get<LabelCategoryResponse[]>(`/projects/${projectId}/categories`).then(({ data }) => data);
+}
+
+// 레이블 카테고리 추가
+export async function addProjectCategories(projectId: number, categoryData: LabelCategoryRequest) {
+  return api.post(`/projects/${projectId}/categories`, categoryData).then(({ data }) => data);
+}
+
+// 레이블 카테고리 단일 조회
+export async function getCategoryById(projectId: number, categoryId: number) {
+  return api.get<LabelCategoryResponse>(`/projects/${projectId}/categories/${categoryId}`).then(({ data }) => data);
+}
+
+// 레이블 카테고리 삭제
+export async function deleteCategory(projectId: number, categoryId: number) {
+  return api.delete(`/projects/${projectId}/categories/${categoryId}`).then(({ data }) => data);
+}
+
+// 레이블 카테고리 존재 여부 조회
+export async function checkCategoryExists(projectId: number, categoryName: string) {
+  return api
+    .get<boolean>(`/projects/${projectId}/categories/exist`, {
+      params: { categoryName },
+    })
+    .then(({ data }) => data);
+}

frontend/src/api/modelApi.ts

@@ -0,0 +1,22 @@
+import api from '@/api/axiosConfig';
+import { ModelRequest, ModelResponse, ProjectModelsResponse, ModelCategoryResponse } from '@/types';
+
+export async function updateModelName(projectId: number, modelId: number, modelData: ModelRequest) {
+  return api.put<ModelResponse>(`/projects/${projectId}/models/${modelId}`, modelData).then(({ data }) => data);
+}
+
+export async function trainModel(projectId: number) {
+  return api.post(`/projects/${projectId}/train`).then(({ data }) => data);
+}
+
+export async function getProjectModels(projectId: number) {
+  return api.get<ProjectModelsResponse>(`/projects/${projectId}/models`).then(({ data }) => data);
+}
+
+export async function addProjectModel(projectId: number, modelData: ModelRequest) {
+  return api.post<ModelResponse>(`/projects/${projectId}/models`, modelData).then(({ data }) => data);
+}
+
+export async function getModelCategories(modelId: number) {
+  return api.get<ModelCategoryResponse[]>(`/models/${modelId}/categories`).then(({ data }) => data);
+}

frontend/src/pages/ModelManage.tsx

@@ -1,12 +1,11 @@
-import { Rabbit, Bird, Turtle, Settings, Share } from 'lucide-react';
+import { Rabbit, Bird, Turtle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import ModelLineChart from '@/components/ModelLineChart';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import ModelBarChart from '@/components/ModelBarChart';
 
 export default function ModelManage() {
@@ -27,17 +26,7 @@ export default function ModelManage() {
 
   const [lossData] = useState<MetricData[]>(dummyLossData);
   const [training, setTraining] = useState(false);
-
+  const [selectedModel, setSelectedModel] = useState<string | null>(null);
-  useEffect(() => {
-    if (training) {
-      const socket = new WebSocket('ws://localhost:8080/ws');
-      socket.onmessage = (event) => {
-        const data = JSON.parse(event.data);
-        console.log('Received data:', data);
-      };
-      return () => socket.close();
-    }
-  }, [training]);
 
   const handleTrainingToggle = () => {
     setTraining((prev) => !prev);
@@ -48,32 +37,6 @@ export default function ModelManage() {
       <div className="flex flex-col">
         <header className="bg-background sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b px-4">
           <h1 className="text-xl font-semibold">모델 관리</h1>
-          <Drawer>
-            <DrawerTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="md:hidden"
-              >
-                <Settings className="size-4" />
-                <span className="sr-only">설정</span>
-              </Button>
-            </DrawerTrigger>
-            <DrawerContent className="max-h-[80vh]">
-              <DrawerHeader>
-                <DrawerTitle>설정</DrawerTitle>
-              </DrawerHeader>
-              <SettingsForm />
-            </DrawerContent>
-          </Drawer>
-          <Button
-            variant="outline"
-            size="sm"
-            className="ml-auto gap-1.5 text-sm"
-          >
-            <Share className="size-3.5" />
-            공유
-          </Button>
         </header>
 
         <main className="grid flex-1 gap-4 overflow-auto p-4">
@@ -86,42 +49,61 @@ export default function ModelManage() {
               <TabsTrigger value="results">모델 평가</TabsTrigger>
             </TabsList>
 
+            {/* 모델 학습 탭 */}
             <TabsContent value="train">
               <div className="grid gap-8 md:grid-cols-2">
                 <div className="flex flex-col gap-6">
                   <SettingsForm />
                   <Button
-                    variant={training ? 'destructive' : 'default'}
+                    variant={training ? 'destructive' : 'outlinePrimary'}
                     size="lg"
                     onClick={handleTrainingToggle}
                   >
                     {training ? '학습 중단' : '학습 시작'}
                   </Button>
                 </div>
-
                 <div className="flex flex-col justify-center">
                   <ModelLineChart data={lossData} />
                 </div>
               </div>
             </TabsContent>
 
+            {/* 모델 평가 탭 */}
             <TabsContent value="results">
-              <div className="grid gap-8 md:grid-cols-2">
+              {/* 모델 선택 */}
-                <div className="flex flex-col gap-6">
+              <div className="mb-4">
-                  <ModelBarChart
+                <Label htmlFor="select-model">모델 선택</Label>
-                    data={[
+                <Select onValueChange={setSelectedModel}>
-                      { name: 'precision', value: 0.734, fill: 'var(--color-precision)' },
+                  <SelectTrigger id="select-model">
-                      { name: 'recall', value: 0.75, fill: 'var(--color-recall)' },
+                    <SelectValue placeholder="모델을 선택하세요" />
-                      { name: 'mAP50', value: 0.995, fill: 'var(--color-map50)' },
+                  </SelectTrigger>
-                      { name: 'mAP50_95', value: 0.97, fill: 'var(--color-map50-95)' },
+                  <SelectContent>
-                      { name: 'fitness', value: 0.973, fill: 'var(--color-fitness)' },
+                    <SelectItem value="genesis">Genesis</SelectItem>
-                    ]}
+                    <SelectItem value="explorer">Explorer</SelectItem>
-                  />
+                    <SelectItem value="quantum">Quantum</SelectItem>
-                </div>
+                  </SelectContent>
-                <div className="flex flex-col justify-center">
+                </Select>
-                  <LabelingPreview />
-                </div>
               </div>
+
+              {/* 선택된 모델에 따른 BarChart 및 Labeling Preview */}
+              {selectedModel && (
+                <div className="grid gap-8 md:grid-cols-2">
+                  <div className="flex flex-col gap-6">
+                    <ModelBarChart
+                      data={[
+                        { name: 'precision', value: 0.734, fill: 'var(--color-precision)' },
+                        { name: 'recall', value: 0.75, fill: 'var(--color-recall)' },
+                        { name: 'mAP50', value: 0.995, fill: 'var(--color-map50)' },
+                        { name: 'mAP50_95', value: 0.97, fill: 'var(--color-map50-95)' },
+                        { name: 'fitness', value: 0.973, fill: 'var(--color-fitness)' },
+                      ]}
+                    />
+                  </div>
+                  <div className="flex flex-col justify-center">
+                    <LabelingPreview />
+                  </div>
+                </div>
+              )}
             </TabsContent>
           </Tabs>
         </main>
@@ -190,11 +172,22 @@ function SettingsForm() {
             placeholder="-1"
             id="batch"
           />
+          <SelectWithLabel
+            label="옵티마이저"
+            id="optimizer"
+            options={['SGD', 'Adam', 'AdamW', 'NAdam', 'RAdam', 'RMSProp']}
+            placeholder="옵티마이저 선택"
+          />
           <InputWithLabel
             label="학습률(LR0)"
             placeholder="0.01"
             id="lr0"
           />
+          <InputWithLabel
+            label="학습률(LRF)"
+            placeholder="0.01"
+            id="lrf"
+          />
         </div>
       </fieldset>
     </form>
@@ -244,3 +237,32 @@ function InputWithLabel({ label, id, placeholder }: InputWithLabelProps) {
     </div>
   );
 }
+interface SelectWithLabelProps {
+  label: string;
+  id: string;
+  options: string[];
+  placeholder: string;
+}
+
+function SelectWithLabel({ label, id, options, placeholder }: SelectWithLabelProps) {
+  return (
+    <div className="grid gap-3">
+      <Label htmlFor={id}>{label}</Label>
+      <Select>
+        <SelectTrigger id={id}>
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem
+              key={option}
+              value={option}
+            >
+              {option}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

frontend/src/queries/category/useAddCategoryQuery.ts

@@ -0,0 +1,14 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { addProjectCategories } from '@/api/categoryApi';
+import { LabelCategoryRequest } from '@/types';
+
+export default function useAddCategoryQuery(projectId: number) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (categoryData: LabelCategoryRequest) => addProjectCategories(projectId, categoryData),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projectCategories', projectId] });
+    },
+  });
+}

frontend/src/queries/category/useCategoryByIdQuery.ts

@@ -0,0 +1,9 @@
+import { getCategoryById } from '@/api/categoryApi';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+export default function useCategoryByIdQuery(projectId: number, categoryId: number) {
+  return useSuspenseQuery({
+    queryKey: ['category', projectId, categoryId],
+    queryFn: () => getCategoryById(projectId, categoryId),
+  });
+}

frontend/src/queries/category/useCheckCategoryExistsQuery.ts

@@ -0,0 +1,9 @@
+import { checkCategoryExists } from '@/api/categoryApi';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+export default function useCheckCategoryExistsQuery(projectId: number, categoryName: string) {
+  return useSuspenseQuery({
+    queryKey: ['categoryExists', projectId, categoryName],
+    queryFn: () => checkCategoryExists(projectId, categoryName),
+  });
+}

frontend/src/queries/category/useDeleteCategoryQuery.ts

@@ -0,0 +1,13 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { deleteCategory } from '@/api/categoryApi';
+
+export default function useDeleteCategoryQuery(projectId: number, categoryId: number) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => deleteCategory(projectId, categoryId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projectCategories', projectId] });
+    },
+  });
+}

frontend/src/queries/category/useProjectCategoriesQuery.ts

@@ -0,0 +1,9 @@
+import { getProjectCategories } from '@/api/categoryApi';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+export default function useProjectCategoriesQuery(projectId: number) {
+  return useSuspenseQuery({
+    queryKey: ['projectCategories', projectId],
+    queryFn: () => getProjectCategories(projectId),
+  });
+}

frontend/src/queries/models/useCreateModelQuery.ts

@@ -0,0 +1,14 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { addProjectModel } from '@/api/modelApi';
+import { ModelRequest } from '@/types';
+
+export default function useCreateModelQuery(projectId: number) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (modelData: ModelRequest) => addProjectModel(projectId, modelData),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projectModels', projectId] });
+    },
+  });
+}

frontend/src/queries/models/useModelCategoriesQuery.ts

@@ -0,0 +1,9 @@
+import { getModelCategories } from '@/api/modelApi';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+export default function useModelCategoriesQuery(modelId: number) {
+  return useSuspenseQuery({
+    queryKey: ['modelCategories', modelId],
+    queryFn: () => getModelCategories(modelId),
+  });
+}

frontend/src/queries/models/useProjectModelsQuery.ts

@@ -0,0 +1,9 @@
+import { getProjectModels } from '@/api/modelApi';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+export default function useProjectModelsQuery(projectId: number) {
+  return useSuspenseQuery({
+    queryKey: ['projectModels', projectId],
+    queryFn: () => getProjectModels(projectId),
+  });
+}

frontend/src/queries/models/useTrainModelQuery.ts

@@ -0,0 +1,8 @@
+import { useMutation } from '@tanstack/react-query';
+import { trainModel } from '@/api/modelApi';
+
+export default function useTrainModelQuery(projectId: number) {
+  return useMutation({
+    mutationFn: () => trainModel(projectId),
+  });
+}

frontend/src/queries/models/useUpdateModelNameQuery.ts

@@ -0,0 +1,14 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { updateModelName } from '@/api/modelApi';
+import { ModelRequest } from '@/types';
+
+export default function useUpdateModelNameQuery(projectId: number, modelId: number) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (modelData: ModelRequest) => updateModelName(projectId, modelId, modelData),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projectModels', projectId] });
+    },
+  });
+}

frontend/src/types/index.ts

@@ -280,3 +280,34 @@ export interface ImageFolderRequest {
   parentId: number;
   files: File[];
 }
+
+// 모델 요청 DTO (API로 전달할 데이터 타입)
+export interface ModelRequest {
+  name: string;
+}
+
+// 모델 응답 DTO (API로부터 받는 데이터 타입)
+export interface ModelResponse {
+  id: number;
+  name: string;
+}
+
+// 모델 카테고리 응답 DTO
+export interface ModelCategoryResponse {
+  id: number;
+  name: string;
+}
+
+// 프로젝트 모델 리스트 응답 DTO
+export interface ProjectModelsResponse extends Array<ModelResponse> {}
+
+// 카테고리 요청 DTO
+export interface LabelCategoryRequest {
+  labelCategoryList: number[];
+}
+
+// 카테고리 응답 DTO
+export interface LabelCategoryResponse {
+  id: number;
+  name: string;
+}