frontend/components/screen/panels/ComponentsPanel.tsx

@@ -25,14 +25,25 @@ interface ComponentItem {
 
 // 컴포넌트 카테고리 정의 (실제 생성된 컴포넌트에 맞게)
 const COMPONENT_CATEGORIES = [
-  { id: "action", name: "액션", description: "사용자 동작을 처리하는 컴포넌트" },
-  { id: "layout", name: "레이아웃", description: "화면 구조를 제공하는 컴포넌트" },
-  { id: "data", name: "데이터", description: "데이터를 표시하는 컴포넌트" },
-  { id: "navigation", name: "네비게이션", description: "화면 이동을 도와주는 컴포넌트" },
-  { id: "feedback", name: "피드백", description: "사용자 피드백을 제공하는 컴포넌트" },
-  { id: "input", name: "입력", description: "사용자 입력을 받는 컴포넌트" },
+  { id: "액션", name: "액션", description: "사용자 동작을 처리하는 컴포넌트" },
+  { id: "레이아웃", name: "레이아웃", description: "화면 구조를 제공하는 컴포넌트" },
+  { id: "데이터", name: "데이터", description: "데이터를 표시하는 컴포넌트" },
+  { id: "네비게이션", name: "네비게이션", description: "화면 이동을 도와주는 컴포넌트" },
+  { id: "피드백", name: "피드백", description: "사용자 피드백을 제공하는 컴포넌트" },
+  { id: "입력", name: "입력", description: "사용자 입력을 받는 컴포넌트" },
   { id: "표시", name: "표시", description: "정보를 표시하고 알리는 컴포넌트" },
-  { id: "other", name: "기타", description: "기타 컴포넌트" },
+  { id: "컨테이너", name: "컨테이너", description: "다른 컴포넌트를 담는 컨테이너" },
+  { id: "위젯", name: "위젯", description: "범용 위젯 컴포넌트" },
+  { id: "템플릿", name: "템플릿", description: "미리 정의된 템플릿" },
+  { id: "차트", name: "차트", description: "데이터 시각화 컴포넌트" },
+  { id: "폼", name: "폼", description: "폼 관련 컴포넌트" },
+  { id: "미디어", name: "미디어", description: "이미지, 비디오 등 미디어 컴포넌트" },
+  { id: "유틸리티", name: "유틸리티", description: "보조 기능 컴포넌트" },
+  { id: "관리", name: "관리", description: "관리자 전용 컴포넌트" },
+  { id: "시스템", name: "시스템", description: "시스템 관련 컴포넌트" },
+  { id: "UI", name: "UI", description: "일반 UI 컴포넌트" },
+  { id: "컴포넌트", name: "컴포넌트", description: "일반 컴포넌트" },
+  { id: "기타", name: "기타", description: "기타 컴포넌트" },
 ];
 
 export const ComponentsPanel: React.FC<ComponentsPanelProps> = ({ onDragStart }) => {
@@ -50,7 +61,20 @@ export const ComponentsPanel: React.FC<ComponentsPanelProps> = ({ onDragStart })
 
   // 컴포넌트를 ComponentItem으로 변환
   const componentItems = useMemo(() => {
-    if (!componentsData?.components) return [];
+    if (!componentsData?.components) {
+      console.log("🔍 ComponentsPanel: 컴포넌트 데이터 없음");
+      return [];
+    }
+
+    console.log("🔍 ComponentsPanel 전체 컴포넌트 데이터:", {
+      totalComponents: componentsData.components.length,
+      components: componentsData.components.map((c) => ({
+        code: c.component_code,
+        name: c.component_name,
+        category: c.category,
+        config: c.component_config,
+      })),
+    });
 
     return componentsData.components.map((component) => {
       console.log("🔍 ComponentsPanel 컴포넌트 매핑:", {
@@ -71,6 +95,27 @@ export const ComponentsPanel: React.FC<ComponentsPanelProps> = ({ onDragStart })
         navigation: "네비게이션",
         feedback: "피드백",
         input: "입력",
+        container: "컨테이너",
+        widget: "위젯",
+        template: "템플릿",
+        chart: "차트",
+        form: "폼",
+        media: "미디어",
+        utility: "유틸리티",
+        admin: "관리",
+        system: "시스템",
+        ui: "UI",
+        component: "컴포넌트",
+        기타: "기타",
+        other: "기타",
+        // 한국어도 처리
+        표시: "표시",
+        액션: "액션",
+        레이아웃: "레이아웃",
+        데이터: "데이터",
+        네비게이션: "네비게이션",
+        피드백: "피드백",
+        입력: "입력",
       };
 
       const mappedCategory = categoryMapping[component.category] || component.category || "other";
@@ -110,15 +155,30 @@ export const ComponentsPanel: React.FC<ComponentsPanelProps> = ({ onDragStart })
       groups[category.id] = filteredComponents.filter((component) => component.category === category.id);
     });
 
+    console.log("🔍 카테고리별 그룹화 결과:", {
+      총컴포넌트: filteredComponents.length,
+      카테고리별개수: Object.entries(groups).map(([cat, comps]) => ({ 카테고리: cat, 개수: comps.length })),
+    });
+
     return groups;
   }, [filteredComponents]);
 
+  console.log("🔍 ComponentsPanel 상태:", {
+    loading,
+    error: error?.message,
+    componentsData,
+    componentItemsLength: componentItems.length,
+  });
+
   if (loading) {
     return (
       <div className="flex h-full items-center justify-center">
         <div className="text-center">
           <Layers className="mx-auto h-8 w-8 animate-pulse text-gray-400" />
           <p className="mt-2 text-sm text-gray-500">컴포넌트 로딩 중...</p>
+          <p className="text-xs text-gray-400">
+            API: {process.env.NODE_ENV === "development" ? "http://localhost:8080" : "39.117.244.52:8080"}
+          </p>
         </div>
       </div>
     );
@@ -131,6 +191,10 @@ export const ComponentsPanel: React.FC<ComponentsPanelProps> = ({ onDragStart })
           <Layers className="mx-auto h-8 w-8 text-red-400" />
           <p className="mt-2 text-sm text-red-500">컴포넌트 로드 실패</p>
           <p className="text-xs text-gray-500">{error.message}</p>
+          <details className="mt-2 text-left">
+            <summary className="cursor-pointer text-xs text-gray-400">상세 오류</summary>
+            <pre className="mt-1 text-xs whitespace-pre-wrap text-gray-400">{JSON.stringify(error, null, 2)}</pre>
+          </details>
         </div>
       </div>
     );