Design: 모델 페이지 리팩토링

frontend/src/components/ModelManage/EvaluationTab.tsx

@@ -111,8 +111,8 @@ function ModelEvaluation({ projectId, selectedModel }: ModelEvaluationProps) {
             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: 'mAP50_95', value: resultData[0]?.map5095, fill: 'var(--color-map50-95)' },
+              { 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)' },
             ]}
             className="h-full"

frontend/src/components/ModelManage/ModelBarChart.tsx

@@ -24,11 +24,11 @@ const chartConfig = {
     label: 'Recall',
     color: '#1E90FF',
   },
-  mAP50: {
+  map50: {
     label: 'mAP50',
-    color: '#32CD3',
+    color: '#32CD30',
   },
-  mAP50_95: {
+  map5095: {
     label: 'mAP50-95',
     color: '#BA55D3',
   },
@@ -62,21 +62,26 @@ export default function ModelBarChart({ data, className }: ModelBarChartProps) {
             <YAxis />
             <ChartTooltip
               cursor={false}
-              content={<ChartTooltipContent hideLabel />}
+              content={
+                <ChartTooltipContent
+                  hideLabel
+                  className="bg-white"
+                />
+              }
             />
             <Bar
               dataKey="value"
-              strokeWidth={2}
+              strokeWidth={0}
               radius={8}
               activeIndex={2}
               activeBar={({ ...props }) => {
                 return (
                   <Rectangle
                     {...props}
-                    fillOpacity={0.8}
+                    fillOpacity={1}
                     stroke={props.payload.fill}
-                    strokeDasharray={4}
-                    strokeDashoffset={4}
+                    strokeDasharray={0}
+                    strokeDashoffset={0}
                   />
                 );
               }}

frontend/src/components/ModelManage/index.tsx

@@ -10,8 +10,8 @@ export default function ModelManage() {
   return (
     <div className="grid h-screen w-full">
       <div className="flex flex-col">
-        <header className="bg-background sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b px-4">
-          <h1 className="text-xl font-semibold">모델 관리</h1>
+        <header className="bg-background flex h-16 items-center gap-1 border-b border-gray-200 px-4">
+          <h1 className="heading">모델 관리</h1>
         </header>
 
         <main className="grid flex-1 gap-4 overflow-auto p-4">
@@ -19,9 +19,20 @@ export default function ModelManage() {
             defaultValue="train"
             className="w-full"
           >
-            <TabsList>
-              <TabsTrigger value="train">모델 학습</TabsTrigger>
-              <TabsTrigger value="results">모델 평가</TabsTrigger>
+            {/* TabsList랑 TabsTrigger 디자인이 shadcn 문서에서 본 것과 많이 다르고 이상함.. 그래서 일단 className을 일일이 지정함.. */}
+            <TabsList className="rounded-none border-transparent bg-transparent shadow-none">
+              <TabsTrigger
+                value="train"
+                className="rounded-none border-b-2 border-transparent bg-transparent shadow-none data-[state=active]:border-blue-500 data-[state=active]:shadow-none"
+              >
+                모델 학습
+              </TabsTrigger>
+              <TabsTrigger
+                value="results"
+                className="rounded-none border-b-2 border-transparent bg-transparent shadow-none data-[state=active]:border-blue-500 data-[state=active]:shadow-none"
+              >
+                모델 평가
+              </TabsTrigger>
             </TabsList>
 
             <TabsContent value="train">