컴포넌트 화면편집기에 배치

frontend/components/screen/panels/ComponentsPanel.tsx

@@ -18,6 +18,7 @@ interface ComponentItem {
   category: string;
   componentType: string;
   componentConfig: any;
+  webType: string; // webType 추가
   icon: React.ReactNode;
   defaultSize: { width: number; height: number };
 }
@@ -30,6 +31,7 @@ const COMPONENT_CATEGORIES = [
   { id: "navigation", name: "네비게이션", description: "화면 이동을 도와주는 컴포넌트" },
   { id: "feedback", name: "피드백", description: "사용자 피드백을 제공하는 컴포넌트" },
   { id: "input", name: "입력", description: "사용자 입력을 받는 컴포넌트" },
+  { id: "표시", name: "표시", description: "정보를 표시하고 알리는 컴포넌트" },
   { id: "other", name: "기타", description: "기타 컴포넌트" },
 ];
 
@@ -50,16 +52,41 @@ export const ComponentsPanel: React.FC<ComponentsPanelProps> = ({ onDragStart })
   const componentItems = useMemo(() => {
     if (!componentsData?.components) return [];
 
-    return componentsData.components.map((component) => ({
-      id: component.component_code,
-      name: component.component_name,
-      description: component.description || `${component.component_name} 컴포넌트`,
-      category: component.category || "other",
-      componentType: component.component_config?.type || component.component_code,
-      componentConfig: component.component_config,
-      icon: getComponentIcon(component.icon_name || component.component_config?.type),
-      defaultSize: component.default_size || getDefaultSize(component.component_config?.type),
-    }));
+    return componentsData.components.map((component) => {
+      console.log("🔍 ComponentsPanel 컴포넌트 매핑:", {
+        component_code: component.component_code,
+        component_name: component.component_name,
+        component_config: component.component_config,
+        componentType: component.component_config?.type || component.component_code,
+        webType: component.component_config?.type || component.component_code,
+        category: component.category,
+      });
+
+      // 카테고리 매핑 (영어 -> 한국어)
+      const categoryMapping: Record<string, string> = {
+        display: "표시",
+        action: "액션",
+        layout: "레이아웃",
+        data: "데이터",
+        navigation: "네비게이션",
+        feedback: "피드백",
+        input: "입력",
+      };
+
+      const mappedCategory = categoryMapping[component.category] || component.category || "other";
+
+      return {
+        id: component.component_code,
+        name: component.component_name,
+        description: component.description || `${component.component_name} 컴포넌트`,
+        category: mappedCategory,
+        componentType: component.component_config?.type || component.component_code,
+        componentConfig: component.component_config,
+        webType: component.component_config?.type || component.component_code, // webType 추가
+        icon: getComponentIcon(component.icon_name || component.component_config?.type),
+        defaultSize: component.default_size || getDefaultSize(component.component_config?.type),
+      };
+    });
   }, [componentsData]);
 
   // 필터링된 컴포넌트