컴포넌트 정리
This commit is contained in:
parent
0dafd417ef
commit
2a8acd9a02
|
|
@ -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,53 +67,56 @@ 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(() => {
|
||||
|
|
@ -112,34 +128,38 @@ export function ComponentsPanel({
|
|||
"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
|
||||
|
|
|
|||
Loading…
Reference in New Issue