diff --git a/frontend/components/screen/panels/ComponentsPanel.tsx b/frontend/components/screen/panels/ComponentsPanel.tsx index 42f00dcb..e464c7dc 100644 --- a/frontend/components/screen/panels/ComponentsPanel.tsx +++ b/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, 테이블, 입력, 데이터 */} @@ -333,9 +353,10 @@ export function ComponentsPanel({ {/* Unified 컴포넌트 탭 */} -
-

- Unified 컴포넌트는 속성 기반으로 다양한 기능을 지원하는 새로운 컴포넌트입니다. +

+

+ Unified 컴포넌트는 속성 기반으로 다양한 기능을 + 지원하는 새로운 컴포넌트입니다.

{getFilteredComponents("unified").length > 0