Refactor: 모델 관리 리팩토링

frontend/src/pages/ModelManage.tsx

@@ -1,12 +1,11 @@
-import { Rabbit, Bird, Turtle, Settings, Share } from 'lucide-react';
+import { Rabbit, Bird, Turtle, Share } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import ModelLineChart from '@/components/ModelLineChart';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import ModelBarChart from '@/components/ModelBarChart';
 
 export default function ModelManage() {
@@ -27,17 +26,7 @@ export default function ModelManage() {
 
   const [lossData] = useState<MetricData[]>(dummyLossData);
   const [training, setTraining] = useState(false);
-
+  const [selectedModel, setSelectedModel] = useState<string | null>(null);
-  useEffect(() => {
-    if (training) {
-      const socket = new WebSocket('ws://localhost:8080/ws');
-      socket.onmessage = (event) => {
-        const data = JSON.parse(event.data);
-        console.log('Received data:', data);
-      };
-      return () => socket.close();
-    }
-  }, [training]);
 
   const handleTrainingToggle = () => {
     setTraining((prev) => !prev);
@@ -48,24 +37,6 @@ export default function ModelManage() {
       <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>
-          <Drawer>
-            <DrawerTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="md:hidden"
-              >
-                <Settings className="size-4" />
-                <span className="sr-only">설정</span>
-              </Button>
-            </DrawerTrigger>
-            <DrawerContent className="max-h-[80vh]">
-              <DrawerHeader>
-                <DrawerTitle>설정</DrawerTitle>
-              </DrawerHeader>
-              <SettingsForm />
-            </DrawerContent>
-          </Drawer>
           <Button
             variant="outline"
             size="sm"
@@ -86,42 +57,61 @@ export default function ModelManage() {
               <TabsTrigger value="results">모델 평가</TabsTrigger>
             </TabsList>
 
+            {/* 모델 학습 탭 */}
             <TabsContent value="train">
               <div className="grid gap-8 md:grid-cols-2">
                 <div className="flex flex-col gap-6">
                   <SettingsForm />
                   <Button
-                    variant={training ? 'destructive' : 'default'}
+                    variant={training ? 'destructive' : 'outlinePrimary'}
                     size="lg"
                     onClick={handleTrainingToggle}
                   >
                     {training ? '학습 중단' : '학습 시작'}
                   </Button>
                 </div>
-
                 <div className="flex flex-col justify-center">
                   <ModelLineChart data={lossData} />
                 </div>
               </div>
             </TabsContent>
 
+            {/* 모델 평가 탭 */}
             <TabsContent value="results">
-              <div className="grid gap-8 md:grid-cols-2">
+              {/* 모델 선택 */}
-                <div className="flex flex-col gap-6">
+              <div className="mb-4">
-                  <ModelBarChart
+                <Label htmlFor="select-model">모델 선택</Label>
-                    data={[
+                <Select onValueChange={setSelectedModel}>
-                      { name: 'precision', value: 0.734, fill: 'var(--color-precision)' },
+                  <SelectTrigger id="select-model">
-                      { name: 'recall', value: 0.75, fill: 'var(--color-recall)' },
+                    <SelectValue placeholder="모델을 선택하세요" />
-                      { name: 'mAP50', value: 0.995, fill: 'var(--color-map50)' },
+                  </SelectTrigger>
-                      { name: 'mAP50_95', value: 0.97, fill: 'var(--color-map50-95)' },
+                  <SelectContent>
-                      { name: 'fitness', value: 0.973, fill: 'var(--color-fitness)' },
+                    <SelectItem value="genesis">Genesis</SelectItem>
-                    ]}
+                    <SelectItem value="explorer">Explorer</SelectItem>
-                  />
+                    <SelectItem value="quantum">Quantum</SelectItem>
-                </div>
+                  </SelectContent>
-                <div className="flex flex-col justify-center">
+                </Select>
-                  <LabelingPreview />
-                </div>
               </div>
+
+              {/* 선택된 모델에 따른 BarChart 및 Labeling Preview */}
+              {selectedModel && (
+                <div className="grid gap-8 md:grid-cols-2">
+                  <div className="flex flex-col gap-6">
+                    <ModelBarChart
+                      data={[
+                        { name: 'precision', value: 0.734, fill: 'var(--color-precision)' },
+                        { name: 'recall', value: 0.75, fill: 'var(--color-recall)' },
+                        { name: 'mAP50', value: 0.995, fill: 'var(--color-map50)' },
+                        { name: 'mAP50_95', value: 0.97, fill: 'var(--color-map50-95)' },
+                        { name: 'fitness', value: 0.973, fill: 'var(--color-fitness)' },
+                      ]}
+                    />
+                  </div>
+                  <div className="flex flex-col justify-center">
+                    <LabelingPreview />
+                  </div>
+                </div>
+              )}
             </TabsContent>
           </Tabs>
         </main>
@@ -190,11 +180,22 @@ function SettingsForm() {
             placeholder="-1"
             id="batch"
           />
+          <SelectWithLabel
+            label="옵티마이저"
+            id="optimizer"
+            options={['SGD', 'Adam', 'AdamW', 'NAdam', 'RAdam', 'RMSProp']}
+            placeholder="옵티마이저 선택"
+          />
           <InputWithLabel
             label="학습률(LR0)"
             placeholder="0.01"
             id="lr0"
           />
+          <InputWithLabel
+            label="학습률(LRF)"
+            placeholder="0.01"
+            id="lrf"
+          />
         </div>
       </fieldset>
     </form>
@@ -244,3 +245,32 @@ function InputWithLabel({ label, id, placeholder }: InputWithLabelProps) {
     </div>
   );
 }
+interface SelectWithLabelProps {
+  label: string;
+  id: string;
+  options: string[];
+  placeholder: string;
+}
+
+function SelectWithLabel({ label, id, options, placeholder }: SelectWithLabelProps) {
+  return (
+    <div className="grid gap-3">
+      <Label htmlFor={id}>{label}</Label>
+      <Select>
+        <SelectTrigger id={id}>
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem
+              key={option}
+              value={option}
+            >
+              {option}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}