kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

컴포넌트 정리

This commit is contained in:
kjs 2026-01-05 11:33:57 +09:00
parent 0dafd417ef
commit 2a8acd9a02
1 changed files with 91 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
frontend/components/screen/panels/ComponentsPanel.tsx
View File

@ -6,7 +6,20 @@ import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ComponentRegistry } from "@/lib/registry/ComponentRegistry"; import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
import { ComponentDefinition, ComponentCategory } from "@/types/component"; 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 { TableInfo, ColumnInfo } from "@/types/screen";
import TablesPanel from "./TablesPanel"; import TablesPanel from "./TablesPanel";
@ -54,53 +67,56 @@ export function ComponentsPanel({
// Unified 컴포넌트 정의 (새로운 통합 컴포넌트 시스템) // Unified 컴포넌트 정의 (새로운 통합 컴포넌트 시스템)
// 입력 컴포넌트(unified-input, unified-select, unified-date)는 테이블 컬럼 드래그 시 자동 생성되므로 숨김 // 입력 컴포넌트(unified-input, unified-select, unified-date)는 테이블 컬럼 드래그 시 자동 생성되므로 숨김
const unifiedComponents: ComponentDefinition[] = useMemo(() => [ const unifiedComponents: ComponentDefinition[] = useMemo(
// unified-input: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리 () => [
// unified-select: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리 // unified-input: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
// unified-date: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리 // unified-select: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
// unified-layout: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리 // unified-date: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
// unified-group: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리 // unified-layout: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리
{ // unified-group: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리
id: "unified-list", {
name: "통합 목록", id: "unified-list",
description: "테이블, 카드, 칸반, 리스트 등 다양한 데이터 표시 방식 지원", name: "통합 목록",
category: "display" as ComponentCategory, description: "테이블, 카드, 칸반, 리스트 등 다양한 데이터 표시 방식 지원",
tags: ["table", "list", "card", "kanban", "unified"], category: "display" as ComponentCategory,
defaultSize: { width: 600, height: 400 }, tags: ["table", "list", "card", "kanban", "unified"],
}, defaultSize: { width: 600, height: 400 },
{ },
id: "unified-media", {
name: "통합 미디어", id: "unified-media",
description: "이미지, 비디오, 오디오, 파일 업로드 등 미디어 컴포넌트", name: "통합 미디어",
category: "display" as ComponentCategory, description: "이미지, 비디오, 오디오, 파일 업로드 등 미디어 컴포넌트",
tags: ["image", "video", "audio", "file", "unified"], category: "display" as ComponentCategory,
defaultSize: { width: 300, height: 200 }, tags: ["image", "video", "audio", "file", "unified"],
}, defaultSize: { width: 300, height: 200 },
{ },
id: "unified-biz", {
name: "통합 비즈니스", id: "unified-biz",
description: "플로우 다이어그램, 랙 구조, 채번규칙 등 비즈니스 컴포넌트", name: "통합 비즈니스",
category: "utility" as ComponentCategory, description: "플로우 다이어그램, 랙 구조, 채번규칙 등 비즈니스 컴포넌트",
tags: ["flow", "rack", "numbering", "unified"], category: "utility" as ComponentCategory,
defaultSize: { width: 600, height: 400 }, tags: ["flow", "rack", "numbering", "unified"],
}, defaultSize: { width: 600, height: 400 },
{ },
id: "unified-hierarchy", {
name: "통합 계층", id: "unified-hierarchy",
description: "트리, 조직도, BOM, 연쇄 선택박스 등 계층 구조 컴포넌트", name: "통합 계층",
category: "data" as ComponentCategory, description: "트리, 조직도, BOM, 연쇄 선택박스 등 계층 구조 컴포넌트",
tags: ["tree", "org", "bom", "cascading", "unified"], category: "data" as ComponentCategory,
defaultSize: { width: 400, height: 300 }, tags: ["tree", "org", "bom", "cascading", "unified"],
}, defaultSize: { width: 400, height: 300 },
{ },
id: "unified-repeater", {
name: "통합 반복 데이터", id: "unified-repeater",
description: "반복 데이터 관리 (인라인/모달/버튼 모드)", name: "통합 반복 데이터",
category: "data" as ComponentCategory, description: "반복 데이터 관리 (인라인/모달/버튼 모드)",
tags: ["repeater", "table", "modal", "button", "unified"], category: "data" as ComponentCategory,
defaultSize: { width: 600, height: 300 }, tags: ["repeater", "table", "modal", "button", "unified"],
}, defaultSize: { width: 600, height: 300 },
], []); },
],
[],
);
// 카테고리별 컴포넌트 그룹화 // 카테고리별 컴포넌트 그룹화
const componentsByCategory = useMemo(() => { const componentsByCategory = useMemo(() => {
@ -112,34 +128,38 @@ export function ComponentsPanel({
"date-input", "date-input",
"textarea-basic", "textarea-basic",
// Unified 컴포넌트로 대체됨 // Unified 컴포넌트로 대체됨
"image-widget", // → UnifiedMedia (image) "image-widget", // → UnifiedMedia (image)
"file-upload", // → UnifiedMedia (file) "file-upload", // → UnifiedMedia (file)
"entity-search-input", // → UnifiedSelect (entity 모드) "entity-search-input", // → UnifiedSelect (entity 모드)
"autocomplete-search-input", // → UnifiedSelect (autocomplete 모드) "autocomplete-search-input", // → UnifiedSelect (autocomplete 모드)
// UnifiedBiz로 통합 예정 // UnifiedBiz로 통합 예정
"rack-structure", // → UnifiedBiz (rack) "rack-structure", // → UnifiedBiz (rack)
// DataFlow 전용 (일반 화면에서 불필요) // DataFlow 전용 (일반 화면에서 불필요)
"mail-recipient-selector", "mail-recipient-selector",
// 현재 사용 안함 // 현재 사용 안함
"repeater-field-group", "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 { 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( display: allComponents.filter(
(c) => c.category === ComponentCategory.DISPLAY && !hiddenComponents.includes(c.id), (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( utility: allComponents.filter(
(c) => c.category === ComponentCategory.UTILITY && !hiddenComponents.includes(c.id), (c) => c.category === ComponentCategory.UTILITY && !hiddenComponents.includes(c.id),
), ),
@ -270,7 +290,7 @@ export function ComponentsPanel({
{/* 1행: Unified, 테이블, 입력, 데이터 */} {/* 1행: Unified, 테이블, 입력, 데이터 */}
<TabsTrigger <TabsTrigger
value="unified" 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 컴포넌트" title="Unified 컴포넌트"
> >
<Sparkles className="h-3 w-3" /> <Sparkles className="h-3 w-3" />
@ -333,9 +353,10 @@ export function ComponentsPanel({
{/* Unified 컴포넌트 탭 */} {/* Unified 컴포넌트 탭 */}
<TabsContent value="unified" className="mt-0 flex-1 space-y-2 overflow-y-auto"> <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> </p>
</div> </div>
{getFilteredComponents("unified").length > 0 {getFilteredComponents("unified").length > 0