From 4866027334e9e85bee3407efd7c050fa682f99b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Fri, 4 Oct 2024 13:43:04 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Refactor:=20=ED=94=84=EB=A1=9C=EC=A0=9D?=
 =?UTF-8?q?=ED=8A=B8=20=EB=8B=B9=20=ED=95=99=EC=8A=B5=20=EB=AA=A8=EB=8D=B8?=
 =?UTF-8?q?=201=EA=B0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ModelManage/TrainingSettings.tsx | 1 +
 frontend/src/components/ModelManage/TrainingTab.tsx      | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ModelManage/TrainingSettings.tsx b/frontend/src/components/ModelManage/TrainingSettings.tsx
index 420e93b..2c2de83 100644
--- a/frontend/src/components/ModelManage/TrainingSettings.tsx
+++ b/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>
 
diff --git a/frontend/src/components/ModelManage/TrainingTab.tsx b/frontend/src/components/ModelManage/TrainingTab.tsx
index c338cde..11df1ca 100644
--- a/frontend/src/components/ModelManage/TrainingTab.tsx
+++ b/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) {

From a2a54639b26ab4d9aa5da0f3c2c987d0b29f841e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Fri, 4 Oct 2024 14:11:44 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Design:=20=EC=B0=A8=ED=8A=B8=20=EC=83=89=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ModelManage/EvaluationTab.tsx  | 10 +++----
 .../components/ModelManage/ModelBarChart.tsx  | 27 +++++++++++--------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/ModelManage/EvaluationTab.tsx b/frontend/src/components/ModelManage/EvaluationTab.tsx
index 14dcf5e..8705560 100644
--- a/frontend/src/components/ModelManage/EvaluationTab.tsx
+++ b/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"
           />
diff --git a/frontend/src/components/ModelManage/ModelBarChart.tsx b/frontend/src/components/ModelManage/ModelBarChart.tsx
index df2cc37..fc260ce 100644
--- a/frontend/src/components/ModelManage/ModelBarChart.tsx
+++ b/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}
                   />
                 );
               }}