Refactor: 모델 학습 작동하게 함

frontend/src/components/ModelManage/TrainingSettings.tsx

@@ -48,9 +48,13 @@ export default function TrainingSettings({
     }
   };
 
+  const isTraining = selectedModel?.isTrain;
+  const isWaiting = isPolling && !isTraining;
+
   return (
     <fieldset className={cn('grid gap-6 rounded-lg border p-4', className)}>
       <legend className="-ml-1 px-1 text-sm font-medium">모델 설정</legend>
+
       <div className="grid gap-3">
         <SelectWithLabel
           label="모델 선택"
@@ -69,7 +73,7 @@ export default function TrainingSettings({
           }}
         />
       </div>
-      {!selectedModel?.isTrain && (
+      {!isPolling && !isTraining && (
         <>
           <div className="grid grid-cols-2 gap-4">
             <InputWithLabel
@@ -130,19 +134,30 @@ export default function TrainingSettings({
             variant="outlinePrimary"
             size="lg"
             onClick={handleSubmit}
-            disabled={!selectedModel || isPolling}
+            disabled={!selectedModel}
           >
-            {isPolling ? '대기 중...' : '학습 시작'}
+            학습 시작
           </Button>
         </>
       )}
-      {selectedModel?.isTrain && (
+
+      {isWaiting && (
         <Button
           variant="secondary"
           size="lg"
           onClick={handleTrainingStop}
         >
-          학습 중단
+          대기 중
+        </Button>
+      )}
+
+      {isTraining && (
+        <Button
+          variant="secondary"
+          size="lg"
+          onClick={handleTrainingStop}
+        >
+          학습 중
         </Button>
       )}
     </fieldset>

frontend/src/components/ModelManage/TrainingTab.tsx

@@ -16,9 +16,6 @@ export default function TrainingTab({ projectId }: TrainingTabProps) {
   const queryClient = useQueryClient();
 
   const { mutate: startTraining } = useTrainModelQuery(numericProjectId as number, {
-    onSuccess: () => {
-      setIsPolling(true);
-    },
     onError: () => {
       alert('학습 요청 실패');
       setIsPolling(false);
@@ -28,24 +25,34 @@ export default function TrainingTab({ projectId }: TrainingTabProps) {
   const handleTrainingStart = (trainData: ModelTrainRequest) => {
     if (numericProjectId !== null) {
       startTraining(trainData);
+      setIsPolling(true);
     }
   };
 
   useEffect(() => {
     if (!selectedModel || !numericProjectId || !isPolling) return;
 
-    const intervalId = setInterval(() => {
-      queryClient.invalidateQueries({ queryKey: ['projectModels', numericProjectId] });
-    }, 2000);
+    const intervalId = setInterval(async () => {
+      await queryClient.invalidateQueries({ queryKey: ['projectModels', numericProjectId] });
 
-    const timeoutId = setTimeout(() => {
-      clearInterval(intervalId);
-      setIsPolling(false);
-    }, 30000);
+      const models = await queryClient.getQueryData<ModelResponse[]>(['projectModels', numericProjectId]);
+
+      const updatedModel = models?.find((model) => model.id === selectedModel.id);
+
+      if (updatedModel) {
+        setSelectedModel(updatedModel);
+
+        if (updatedModel.isTrain) {
+          setIsPolling(true);
+        } else if (!updatedModel.isTrain && selectedModel.isTrain) {
+          setIsPolling(false);
+          setSelectedModel(null);
+        }
+      }
+    }, 2000);
 
     return () => {
       clearInterval(intervalId);
-      clearTimeout(timeoutId);
     };
   }, [selectedModel, numericProjectId, queryClient, isPolling]);
 
@@ -56,7 +63,7 @@ export default function TrainingTab({ projectId }: TrainingTabProps) {
   return (
     <div className="grid grid-rows-[auto_1fr] gap-8 md:grid-cols-2">
       <TrainingSettings
-        key={selectedModel?.isTrain ? 'training' : 'settings'}
+        key={`${selectedModel?.isTrain ? 'training' : 'settings'}-${isPolling}`}
         projectId={numericProjectId}
         selectedModel={selectedModel}
         setSelectedModel={setSelectedModel}
@@ -66,7 +73,7 @@ export default function TrainingTab({ projectId }: TrainingTabProps) {
         className="h-full"
       />
       <TrainingGraph
-        key={selectedModel?.isTrain ? 'training' : 'graph'}
+        key={`${selectedModel?.isTrain ? 'training' : 'graph'}-${isPolling}`}
         projectId={numericProjectId}
         selectedModel={selectedModel}
         className="h-full"

frontend/src/queries/models/useProjectModelsQuery.ts

@@ -5,5 +5,6 @@ export default function useProjectModelsQuery(projectId: number) {
   return useSuspenseQuery({
     queryKey: ['projectModels', projectId],
     queryFn: () => getProjectModels(projectId),
+    refetchOnWindowFocus: false,
   });
 }