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

Refactor: 학습 그래프 대기 표시

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

frontend/src/components/ModelManage/EvaluationTab.tsx

@@ -123,6 +123,7 @@ function ModelEvaluation({ projectId, selectedModel }: ModelEvaluationProps) {
           {/* 차트의 높이를 100%로 맞춤 */}
           <ModelLineChart
             data={reportData}
+            isTraining={false}
             className="h-full"
           />
         </div>

frontend/src/components/ModelManage/ModelBarChart.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from 'recharts';
-
+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';
 
@@ -19,23 +18,23 @@ interface ModelBarChartProps {
 const chartConfig = {
   precision: {
     label: 'Precision',
-    color: 'hsl(var(--chart-1))',
+    color: '#FF6347',
   },
   recall: {
     label: 'Recall',
-    color: 'hsl(var(--chart-2))',
+    color: '#1E90FF',
   },
   mAP50: {
     label: 'mAP50',
-    color: 'hsl(var(--chart-3))',
+    color: '#32CD3',
   },
   mAP50_95: {
     label: 'mAP50-95',
-    color: 'hsl(var(--chart-4))',
+    color: '#BA55D3',
   },
   fitness: {
     label: 'Fitness',
-    color: 'hsl(var(--chart-5))',
+    color: '#FF1493',
   },
 } satisfies ChartConfig;
 
@@ -60,6 +59,7 @@ export default function ModelBarChart({ data, className }: ModelBarChartProps) {
               axisLine={false}
               tickFormatter={(value) => chartConfig[value as keyof typeof chartConfig]?.label}
             />
+            <YAxis />
             <ChartTooltip
               cursor={false}
               content={<ChartTooltipContent hideLabel />}

frontend/src/components/ModelManage/ModelLineChart.tsx

@@ -4,9 +4,11 @@ import { CartesianGrid, Line, LineChart, XAxis, YAxis, Tooltip, Legend } from 'r
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { ChartConfig, ChartContainer } from '@/components/ui/chart';
 import { ReportResponse } from '@/types';
+import { Spinner } from '@/components/ui/spinner';
 
 interface ModelLineChartProps {
   data: ReportResponse[];
+  isTraining: boolean;
   className?: string;
 }
 
@@ -33,7 +35,7 @@ const chartConfig = {
   },
 } satisfies ChartConfig;
 
-export default function ModelLineChart({ data, className }: ModelLineChartProps) {
+export default function ModelLineChart({ data, isTraining, className }: ModelLineChartProps) {
   const latestData = data.length > 0 ? data[data.length - 1] : undefined;
 
   const totalEpochs = latestData?.totalEpochs || 0;
@@ -55,6 +57,7 @@ export default function ModelLineChart({ data, className }: ModelLineChartProps)
     const hasNonZeroData = filledData.some((d) => d[dataKey] !== 0);
     return hasNonZeroData ? (
       <Line
+        key={dataKey}
         dataKey={dataKey}
         type="monotone"
         stroke={color}
@@ -63,6 +66,7 @@ export default function ModelLineChart({ data, className }: ModelLineChartProps)
       />
     ) : null;
   };
+
   return (
     <Card className={className}>
       <CardHeader>
@@ -73,7 +77,7 @@ export default function ModelLineChart({ data, className }: ModelLineChartProps)
           <div className="mb-4 flex justify-between">
             <p>현재 에포크: {latestData.epoch}</p>
             <p>총 에포크: {latestData.totalEpochs}</p>
-            <p>예상 남은시간: {latestData.leftSecond}초</p>
+            <p>예상 남은시간: {latestData.leftSecond.toFixed(2)}초</p>
           </div>
         )}
         <ChartContainer config={chartConfig}>
@@ -101,6 +105,37 @@ export default function ModelLineChart({ data, className }: ModelLineChartProps)
             {renderLine('dflLoss', chartConfig.dflLoss.color)}
             {renderLine('fitness', chartConfig.fitness.color)}
             {renderLine('segLoss', chartConfig.segLoss.color)}
+
+            {isTraining && data.length === 0 && (
+              <foreignObject
+                x="0"
+                y="0"
+                width="100%"
+                height="100%"
+              >
+                <div className="flex h-full w-full items-center justify-center">
+                  <div className="flex flex-col items-center">
+                    <Spinner
+                      size="large"
+                      show={true}
+                    />
+                    <p className="mt-4 text-lg font-semibold">대기 중...</p>
+                  </div>
+                </div>
+              </foreignObject>
+            )}
+            {!isTraining && data.length === 0 && (
+              <foreignObject
+                x="0"
+                y="0"
+                width="100%"
+                height="100%"
+              >
+                <div className="flex h-full w-full items-center justify-center text-lg font-semibold text-gray-500">
+                  학습 중이 아닙니다.
+                </div>
+              </foreignObject>
+            )}
           </LineChart>
         </ChartContainer>
       </CardContent>

frontend/src/components/ModelManage/TrainingGraph.tsx

@@ -27,6 +27,7 @@ export default function TrainingGraph({
   return (
     <ModelLineChart
       data={trainingDataList || []}
+      isTraining={isTraining}
       className={className}
     />
   );