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

59
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 { 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(
(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