Merge branch 'fe/refactor/learn' into 'fe/develop'

Refactor: 모델 학습 리팩토링

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

frontend/src/components/ModelManage/EvaluationTab.tsx

@@ -109,11 +109,11 @@ function ModelEvaluation({ projectId, selectedModel }: ModelEvaluationProps) {
           {/* 차트의 높이를 100%로 맞춤 */}
           <ModelBarChart
             data={[
-              { name: 'precision', value: resultData[0]?.precision, fill: 'var(--color-precision)' },
-              { name: 'recall', value: resultData[0]?.recall, fill: 'var(--color-recall)' },
-              { name: 'map50', value: resultData[0]?.map50, fill: 'var(--color-map50)' },
-              { name: 'map5095', value: resultData[0]?.map5095, fill: 'var(--color-map5095)' },
-              { name: 'fitness', value: resultData[0]?.fitness, fill: 'var(--color-fitness)' },
+              { name: 'precision', value: resultData[0]?.precision, fill: 'hsl(0, 0%, 0%)' },
+              { name: 'recall', value: resultData[0]?.recall, fill: 'hsl(0, 0%, 30%)' },
+              { name: 'map50', value: resultData[0]?.map50, fill: 'hsl(0, 0%, 25%)' },
+              { name: 'map5095', value: resultData[0]?.map5095, fill: 'hsl(0, 0%, 35%)' },
+              { name: 'fitness', value: resultData[0]?.fitness, fill: 'hsl(0, 0%, 15%)' },
             ]}
             className="h-full"
           />

frontend/src/components/ModelManage/ModelBarChart.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import { Bar, BarChart, CartesianGrid, XAxis, YAxis, Rectangle } from 'recharts';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';
@@ -18,27 +19,29 @@ interface ModelBarChartProps {
 const chartConfig = {
   precision: {
     label: 'Precision',
-    color: '#FF6347',
+    color: 'hsl(var(--chart-1))',
   },
   recall: {
     label: 'Recall',
-    color: '#1E90FF',
+    color: 'hsl(var(--chart-2))',
   },
   map50: {
     label: 'mAP50',
-    color: '#32CD30',
+    color: 'hsl(var(--chart-3))',
   },
   map5095: {
     label: 'mAP50-95',
-    color: '#BA55D3',
+    color: 'hsl(var(--chart-4))',
   },
   fitness: {
     label: 'Fitness',
-    color: '#FF1493',
+    color: 'hsl(var(--chart-5))',
   },
 } satisfies ChartConfig;
 
 export default function ModelBarChart({ data, className }: ModelBarChartProps) {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
   return (
     <Card className={className}>
       <CardHeader>
@@ -73,15 +76,17 @@ export default function ModelBarChart({ data, className }: ModelBarChartProps) {
               dataKey="value"
               strokeWidth={0}
               radius={8}
-              activeIndex={2}
-              activeBar={({ ...props }) => {
+              fillOpacity={1}
+              onMouseEnter={(_, index) => setActiveIndex(index)}
+              onMouseLeave={() => setActiveIndex(null)}
+              shape={({ ...props }) => {
                 return (
                   <Rectangle
                     {...props}
-                    fillOpacity={1}
-                    stroke={props.payload.fill}
-                    strokeDasharray={0}
-                    strokeDashoffset={0}
+                    fill={props.fill}
+                    fillOpacity={activeIndex === props.index ? 0.8 : 1}
+                    stroke={activeIndex === props.index ? props.fill : 'none'}
+                    strokeWidth={activeIndex === props.index ? 2 : 0}
                   />
                 );
               }}

frontend/src/components/ModelManage/TrainingSettings.tsx

@@ -70,6 +70,7 @@ export default function TrainingSettings({
             const selected = models?.find((model) => model.id === parseInt(value, 10));
             setSelectedModel(selected || null);
           }}
+          disabled={isWaiting || isTraining}
         />
       </div>
 

frontend/src/components/ModelManage/TrainingTab.tsx

@@ -34,13 +34,13 @@ export default function TrainingTab({ projectId }: TrainingTabProps) {
       );
       setIsTraining(newIsTraining);
 
-      if (selectedModel && trainingModels.some((model) => model.id === selectedModel.id)) {
-        setSelectedModel(selectedModel);
+      if (trainingModels.length > 0) {
+        setSelectedModel(trainingModels[0]);
       } else {
         setSelectedModel(null);
       }
     }
-  }, [models, selectedModel]);
+  }, [models]);
 
   useEffect(() => {
     if (models && selectedModel) {