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,7 +67,8 @@ export function ComponentsPanel({
 
   // Unified 컴포넌트 정의 (새로운 통합 컴포넌트 시스템)
   // 입력 컴포넌트(unified-input, unified-select, unified-date)는 테이블 컬럼 드래그 시 자동 생성되므로 숨김
-  const unifiedComponents: ComponentDefinition[] = useMemo(() => [
+  const unifiedComponents: ComponentDefinition[] = useMemo(
+    () => [
       // unified-input: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
       // unified-select: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
       // unified-date: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
@@ -100,7 +114,9 @@ export function ComponentsPanel({
         tags: ["repeater", "table", "modal", "button", "unified"],
         defaultSize: { width: 600, height: 300 },
       },
-  ], []);
+    ],
+    [],
+  );
 
   // 카테고리별 컴포넌트 그룹화
   const componentsByCategory = useMemo(() => {
@@ -122,24 +138,28 @@ export function ComponentsPanel({
       "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(
+      input: allComponents.filter((c) => c.category === ComponentCategory.INPUT && !hiddenComponents.includes(c.id)),
-        (c) => c.category === ComponentCategory.INPUT && !hiddenComponents.includes(c.id),
+      action: allComponents.filter((c) => c.category === ComponentCategory.ACTION && !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(
+      data: allComponents.filter((c) => c.category === ComponentCategory.DATA && !hiddenComponents.includes(c.id)),
-        (c) => c.category === ComponentCategory.DATA && !hiddenComponents.includes(c.id),
+      layout: allComponents.filter((c) => c.category === ComponentCategory.LAYOUT && !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">
+          <div className="bg-primary/5 border-primary/20 mb-2 rounded-md border p-2">
-            <p className="text-[10px] text-muted-foreground leading-relaxed">
+            <p className="text-muted-foreground text-[10px] leading-relaxed">
-              <span className="font-semibold text-primary">Unified 컴포넌트</span>는 속성 기반으로 다양한 기능을 지원하는 새로운 컴포넌트입니다.
+              <span className="text-primary font-semibold">Unified 컴포넌트</span>는 속성 기반으로 다양한 기능을
+              지원하는 새로운 컴포넌트입니다.
             </p>
           </div>
           {getFilteredComponents("unified").length > 0