From f628a84477cb8d1937e7bd87ecf0b615db1ec3b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Wed, 2 Oct 2024 23:14:16 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20=ED=95=99=EC=8A=B5=20=EA=B7=B8?=
 =?UTF-8?q?=EB=9E=98=ED=94=84=20=EB=8C=80=EA=B8=B0=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ModelManage/EvaluationTab.tsx  |  1 +
 .../components/ModelManage/ModelLineChart.tsx | 39 ++++++++++++++++++-
 .../components/ModelManage/TrainingGraph.tsx  |  1 +
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ModelManage/EvaluationTab.tsx b/frontend/src/components/ModelManage/EvaluationTab.tsx
index b6c112b..18d4d1a 100644
--- a/frontend/src/components/ModelManage/EvaluationTab.tsx
+++ b/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>
diff --git a/frontend/src/components/ModelManage/ModelLineChart.tsx b/frontend/src/components/ModelManage/ModelLineChart.tsx
index 5b6519b..5e97766 100644
--- a/frontend/src/components/ModelManage/ModelLineChart.tsx
+++ b/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>
diff --git a/frontend/src/components/ModelManage/TrainingGraph.tsx b/frontend/src/components/ModelManage/TrainingGraph.tsx
index 487b030..9e282a5 100644
--- a/frontend/src/components/ModelManage/TrainingGraph.tsx
+++ b/frontend/src/components/ModelManage/TrainingGraph.tsx
@@ -27,6 +27,7 @@ export default function TrainingGraph({
   return (
     <ModelLineChart
       data={trainingDataList || []}
+      isTraining={isTraining}
       className={className}
     />
   );