컴포넌트 정리

frontend/components/screen/panels/ComponentsPanel.tsx

@@ -6,7 +6,20 @@ import { Badge } from "@/components/ui/badge";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
 import { ComponentDefinition, ComponentCategory } from "@/types/component";
-import { Search, Package, Grid, Layers, Palette, Zap, MousePointer, Edit3, BarChart3, Database, Wrench, Sparkles } from "lucide-react";
+import {
+  Search,
+  Package,
+  Grid,
+  Layers,
+  Palette,
+  Zap,
+  MousePointer,
+  Edit3,
+  BarChart3,
+  Database,
+  Wrench,
+  Sparkles,
+} from "lucide-react";
 import { TableInfo, ColumnInfo } from "@/types/screen";
 import TablesPanel from "./TablesPanel";
 
@@ -54,92 +67,99 @@ export function ComponentsPanel({
 
   // Unified 컴포넌트 정의 (새로운 통합 컴포넌트 시스템)
   // 입력 컴포넌트(unified-input, unified-select, unified-date)는 테이블 컬럼 드래그 시 자동 생성되므로 숨김
-  const unifiedComponents: ComponentDefinition[] = useMemo(() => [
-    // unified-input: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
-    // unified-select: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
-    // unified-date: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
-    // unified-layout: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리
-    // unified-group: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리
-    {
-      id: "unified-list",
-      name: "통합 목록",
-      description: "테이블, 카드, 칸반, 리스트 등 다양한 데이터 표시 방식 지원",
-      category: "display" as ComponentCategory,
-      tags: ["table", "list", "card", "kanban", "unified"],
-      defaultSize: { width: 600, height: 400 },
-    },
-    {
-      id: "unified-media",
-      name: "통합 미디어",
-      description: "이미지, 비디오, 오디오, 파일 업로드 등 미디어 컴포넌트",
-      category: "display" as ComponentCategory,
-      tags: ["image", "video", "audio", "file", "unified"],
-      defaultSize: { width: 300, height: 200 },
-    },
-    {
-      id: "unified-biz",
-      name: "통합 비즈니스",
-      description: "플로우 다이어그램, 랙 구조, 채번규칙 등 비즈니스 컴포넌트",
-      category: "utility" as ComponentCategory,
-      tags: ["flow", "rack", "numbering", "unified"],
-      defaultSize: { width: 600, height: 400 },
-    },
-    {
-      id: "unified-hierarchy",
-      name: "통합 계층",
-      description: "트리, 조직도, BOM, 연쇄 선택박스 등 계층 구조 컴포넌트",
-      category: "data" as ComponentCategory,
-      tags: ["tree", "org", "bom", "cascading", "unified"],
-      defaultSize: { width: 400, height: 300 },
-    },
-    {
-      id: "unified-repeater",
-      name: "통합 반복 데이터",
-      description: "반복 데이터 관리 (인라인/모달/버튼 모드)",
-      category: "data" as ComponentCategory,
-      tags: ["repeater", "table", "modal", "button", "unified"],
-      defaultSize: { width: 600, height: 300 },
-    },
-  ], []);
+  const unifiedComponents: ComponentDefinition[] = useMemo(
+    () => [
+      // unified-input: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
+      // unified-select: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
+      // unified-date: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
+      // unified-layout: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리
+      // unified-group: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리
+      {
+        id: "unified-list",
+        name: "통합 목록",
+        description: "테이블, 카드, 칸반, 리스트 등 다양한 데이터 표시 방식 지원",
+        category: "display" as ComponentCategory,
+        tags: ["table", "list", "card", "kanban", "unified"],
+        defaultSize: { width: 600, height: 400 },
+      },
+      {
+        id: "unified-media",
+        name: "통합 미디어",
+        description: "이미지, 비디오, 오디오, 파일 업로드 등 미디어 컴포넌트",
+        category: "display" as ComponentCategory,
+        tags: ["image", "video", "audio", "file", "unified"],
+        defaultSize: { width: 300, height: 200 },
+      },
+      {
+        id: "unified-biz",
+        name: "통합 비즈니스",
+        description: "플로우 다이어그램, 랙 구조, 채번규칙 등 비즈니스 컴포넌트",
+        category: "utility" as ComponentCategory,
+        tags: ["flow", "rack", "numbering", "unified"],
+        defaultSize: { width: 600, height: 400 },
+      },
+      {
+        id: "unified-hierarchy",
+        name: "통합 계층",
+        description: "트리, 조직도, BOM, 연쇄 선택박스 등 계층 구조 컴포넌트",
+        category: "data" as ComponentCategory,
+        tags: ["tree", "org", "bom", "cascading", "unified"],
+        defaultSize: { width: 400, height: 300 },
+      },
+      {
+        id: "unified-repeater",
+        name: "통합 반복 데이터",
+        description: "반복 데이터 관리 (인라인/모달/버튼 모드)",
+        category: "data" as ComponentCategory,
+        tags: ["repeater", "table", "modal", "button", "unified"],
+        defaultSize: { width: 600, height: 300 },
+      },
+    ],
+    [],
+  );
 
   // 카테고리별 컴포넌트 그룹화
   const componentsByCategory = useMemo(() => {
     // 숨길 컴포넌트 ID 목록
     const hiddenComponents = [
       // 기본 입력 컴포넌트 (테이블 컬럼 드래그 시 자동 생성)
-      "text-input", 
-      "number-input", 
-      "date-input", 
+      "text-input",
+      "number-input",
+      "date-input",
       "textarea-basic",
       // Unified 컴포넌트로 대체됨
-      "image-widget",        // → UnifiedMedia (image)
-      "file-upload",         // → UnifiedMedia (file)
+      "image-widget", // → UnifiedMedia (image)
+      "file-upload", // → UnifiedMedia (file)
       "entity-search-input", // → UnifiedSelect (entity 모드)
       "autocomplete-search-input", // → UnifiedSelect (autocomplete 모드)
       // UnifiedBiz로 통합 예정
-      "rack-structure",      // → UnifiedBiz (rack)
+      "rack-structure", // → UnifiedBiz (rack)
       // DataFlow 전용 (일반 화면에서 불필요)
       "mail-recipient-selector",
       // 현재 사용 안함
       "repeater-field-group",
+      // unified-repeater로 통합됨
+      "simple-repeater-table", // → unified-repeater (inline 모드)
+      "modal-repeater-table", // → unified-repeater (modal 모드)
+      // 특수 업무용 컴포넌트 (일반 화면에서 불필요)
+      "tax-invoice-list", // 세금계산서 전용
+      "customer-item-mapping", // 고객-품목 매핑 전용
+      // unified-list로 통합됨
+      "card-display", // → unified-list (card 모드)
+      // unified-media로 통합됨
+      "image-display", // → unified-media (image)
+      // 공통코드관리로 통합 예정
+      "category-manager", // → 공통코드관리 기능으로 통합 예정
     ];
 
     return {
-      input: allComponents.filter(
-        (c) => c.category === ComponentCategory.INPUT && !hiddenComponents.includes(c.id),
-      ),
-      action: allComponents.filter(
-        (c) => c.category === ComponentCategory.ACTION && !hiddenComponents.includes(c.id),
-      ),
+      input: allComponents.filter((c) => c.category === ComponentCategory.INPUT && !hiddenComponents.includes(c.id)),
+      action: allComponents.filter((c) => c.category === ComponentCategory.ACTION && !hiddenComponents.includes(c.id)),
       display: allComponents.filter(
         (c) => c.category === ComponentCategory.DISPLAY && !hiddenComponents.includes(c.id),
       ),
-      data: allComponents.filter(
-        (c) => c.category === ComponentCategory.DATA && !hiddenComponents.includes(c.id),
-      ),
-      layout: allComponents.filter(
-        (c) => c.category === ComponentCategory.LAYOUT && !hiddenComponents.includes(c.id),
-      ),
+      data: allComponents.filter((c) => c.category === ComponentCategory.DATA && !hiddenComponents.includes(c.id)),
+      layout: allComponents.filter((c) => c.category === ComponentCategory.LAYOUT && !hiddenComponents.includes(c.id)),
       utility: allComponents.filter(
         (c) => c.category === ComponentCategory.UTILITY && !hiddenComponents.includes(c.id),
       ),
@@ -270,7 +290,7 @@ export function ComponentsPanel({
           {/* 1행: Unified, 테이블, 입력, 데이터 */}
           <TabsTrigger
             value="unified"
-            className="flex items-center justify-center gap-0.5 px-0 text-[10px] bg-primary/10 data-[state=active]:bg-primary data-[state=active]:text-white"
+            className="bg-primary/10 data-[state=active]:bg-primary flex items-center justify-center gap-0.5 px-0 text-[10px] data-[state=active]:text-white"
             title="Unified 컴포넌트"
           >
             <Sparkles className="h-3 w-3" />
@@ -333,9 +353,10 @@ export function ComponentsPanel({
 
         {/* Unified 컴포넌트 탭 */}
         <TabsContent value="unified" className="mt-0 flex-1 space-y-2 overflow-y-auto">
-          <div className="mb-2 rounded-md bg-primary/5 border border-primary/20 p-2">
-            <p className="text-[10px] text-muted-foreground leading-relaxed">
-              <span className="font-semibold text-primary">Unified 컴포넌트</span>는 속성 기반으로 다양한 기능을 지원하는 새로운 컴포넌트입니다.
+          <div className="bg-primary/5 border-primary/20 mb-2 rounded-md border p-2">
+            <p className="text-muted-foreground text-[10px] leading-relaxed">
+              <span className="text-primary font-semibold">Unified 컴포넌트</span>는 속성 기반으로 다양한 기능을
+              지원하는 새로운 컴포넌트입니다.
             </p>
           </div>
           {getFilteredComponents("unified").length > 0