Refactor: 모델 관리 리팩토링 중

frontend/src/components/ModelManage/TrainingGraph.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
 import ModelLineChart from './ModelLineChart';
-import usePollingTrainingModelReport from '@/queries/reports/usePollingModelReportsQuery';
+import usePollingModelReportsQuery from '@/queries/reports/usePollingModelReportsQuery';
 import { ModelResponse } from '@/types';
-import { Spinner } from '@/components/ui/spinner';
 
 interface TrainingGraphProps {
   projectId: number | null;
@@ -12,7 +11,7 @@ interface TrainingGraphProps {
 
 export default function TrainingGraph({ projectId, selectedModel, className }: TrainingGraphProps) {
   const [isPolling, setIsPolling] = useState(false);
-  const { data: trainingDataList, isLoading } = usePollingTrainingModelReport(
+  const { data: trainingDataList } = usePollingModelReportsQuery(
     projectId as number,
     selectedModel?.id as number,
     isPolling
@@ -26,15 +25,6 @@ export default function TrainingGraph({ projectId, selectedModel, className }: T
     }
   }, [selectedModel]);
 
-  if (isLoading) {
-    return (
-      <div className={`flex items-center justify-center ${className}`}>
-        <Spinner />
-        데이터 로딩 중...
-      </div>
-    );
-  }
-
   return (
     <ModelLineChart
       data={trainingDataList || []}

frontend/src/components/ModelManage/TrainingSettings.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import SelectWithLabel from './SelectWithLabel';
 import InputWithLabel from './InputWithLabel';
@@ -33,6 +33,7 @@ export default function TrainingSettings({
   const [lrf, setLrf] = useState<number>(0.001);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const queryClient = useQueryClient();
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
   const handleSubmit = () => {
     if (selectedModel?.isTrain) {
@@ -47,17 +48,34 @@ export default function TrainingSettings({
         lr0,
         lrf,
       };
-      queryClient.invalidateQueries({ queryKey: ['projectModels', projectId] });
       setIsSubmitting(true);
       handleTrainingStart(trainData);
-      setTimeout(() => {
-        queryClient.invalidateQueries({ queryKey: ['projectModels', projectId] });
-        setIsSubmitting(false);
-        console.log(selectedModel);
-      }, 1000);
     }
   };
 
+  useEffect(() => {
+    if (isSubmitting) {
+      intervalRef.current = setInterval(() => {
+        queryClient.invalidateQueries({ queryKey: ['projectModels', projectId] });
+      }, 1000);
+    } else if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [isSubmitting, queryClient, projectId]);
+
+  useEffect(() => {
+    if (selectedModel?.isTrain) {
+      setIsSubmitting(false);
+    }
+  }, [selectedModel]);
+
   return (
     <fieldset className={cn('grid gap-6 rounded-lg border p-4', className)}>
       <legend className="-ml-1 px-1 text-sm font-medium">모델 설정</legend>