7ec5a438d4
- 테이블 관리 서비스에서 검색 옵션에 operator를 추가하여 정확한 일치(equals) 및 부분 일치(contains) 검색을 지원하도록 개선하였습니다. - 파일 업로드 컴포넌트에서 레거시 file-upload 기능을 통합하여 안정적인 파일 업로드를 제공하며, V2Media와의 호환성을 강화하였습니다. - DynamicComponentRenderer에서 파일 업로드 컴포넌트의 디버깅 로깅을 추가하여 문제 해결을 용이하게 하였습니다. - 웹 타입 매핑에서 파일 및 이미지 타입을 레거시 file-upload로 변경하여 일관성을 유지하였습니다.
353 lines
15 KiB
TypeScript
353 lines
15 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useMemo } from "react";
|
||
import { Input } from "@/components/ui/input";
|
||
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, Database, GripVertical } from "lucide-react";
|
||
import { TableInfo, ColumnInfo } from "@/types/screen";
|
||
import TablesPanel from "./TablesPanel";
|
||
|
||
interface ComponentsPanelProps {
|
||
className?: string;
|
||
// 테이블 관련 props
|
||
tables?: TableInfo[];
|
||
searchTerm?: string;
|
||
onSearchChange?: (value: string) => void;
|
||
onTableDragStart?: (e: React.DragEvent, table: TableInfo, column?: ColumnInfo) => void;
|
||
selectedTableName?: string;
|
||
placedColumns?: Set<string>; // 이미 배치된 컬럼명 집합
|
||
// 테이블 선택 관련 props
|
||
onTableSelect?: (tableName: string) => void; // 테이블 선택 콜백
|
||
showTableSelector?: boolean; // 테이블 선택 UI 표시 여부 (기본: 테이블 없으면 표시)
|
||
}
|
||
|
||
export function ComponentsPanel({
|
||
className,
|
||
tables = [],
|
||
searchTerm = "",
|
||
onSearchChange,
|
||
onTableDragStart,
|
||
selectedTableName,
|
||
placedColumns,
|
||
onTableSelect,
|
||
showTableSelector = true,
|
||
}: ComponentsPanelProps) {
|
||
const [searchQuery, setSearchQuery] = useState("");
|
||
|
||
// 레지스트리에서 모든 컴포넌트 조회
|
||
const allComponents = useMemo(() => {
|
||
const components = ComponentRegistry.getAllComponents();
|
||
// v2-table-list가 자동 등록되므로 수동 추가 불필요
|
||
return components;
|
||
}, []);
|
||
|
||
// V2 컴포넌트 정의 (새로운 통합 컴포넌트 시스템)
|
||
// 입력 컴포넌트(v2-input, v2-select, v2-date)는 테이블 컬럼 드래그 시 자동 생성되므로 숨김
|
||
const v2Components = useMemo(
|
||
() =>
|
||
[
|
||
// v2-input: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
|
||
// v2-select: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
|
||
// v2-date: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
|
||
// v2-layout: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리
|
||
// v2-group: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리
|
||
// v2-list: table-list, card-display로 분리하여 숨김 처리
|
||
// v2-media 제거 - 테이블 컬럼의 image/file 입력 타입으로 사용
|
||
// v2-biz 제거 - 개별 컴포넌트(flow-widget, rack-structure, numbering-rule)로 직접 표시
|
||
// v2-hierarchy 제거 - 현재 미사용
|
||
{
|
||
id: "v2-repeater",
|
||
name: "리피터 그리드",
|
||
description: "행 단위로 데이터를 추가/수정/삭제",
|
||
category: "data" as ComponentCategory,
|
||
tags: ["repeater", "table", "modal", "button", "v2", "v2"],
|
||
defaultSize: { width: 600, height: 300 },
|
||
},
|
||
] as ComponentDefinition[],
|
||
[],
|
||
);
|
||
|
||
// 카테고리별 컴포넌트 그룹화
|
||
const componentsByCategory = useMemo(() => {
|
||
// 숨길 컴포넌트 ID 목록
|
||
const hiddenComponents = [
|
||
// 기본 입력 컴포넌트 (테이블 컬럼 드래그 시 자동 생성)
|
||
"text-input",
|
||
"number-input",
|
||
"date-input",
|
||
"textarea-basic",
|
||
// V2 컴포넌트로 대체됨
|
||
"image-widget", // → V2Media (image)
|
||
// "file-upload", // 🆕 레거시 컴포넌트 노출 (안정적인 파일 업로드)
|
||
"entity-search-input", // → V2Select (entity 모드)
|
||
"autocomplete-search-input", // → V2Select (autocomplete 모드)
|
||
// DataFlow 전용 (일반 화면에서 불필요)
|
||
"mail-recipient-selector",
|
||
// 현재 사용 안함
|
||
"repeater-field-group",
|
||
// v2-repeater로 통합됨
|
||
"simple-repeater-table", // → v2-repeater (inline 모드)
|
||
"modal-repeater-table", // → v2-repeater (modal 모드)
|
||
// 특수 업무용 컴포넌트 (일반 화면에서 불필요)
|
||
"tax-invoice-list", // 세금계산서 전용
|
||
"customer-item-mapping", // 고객-품목 매핑 전용
|
||
// card-display는 별도 컴포넌트로 유지
|
||
// v2-media로 통합됨
|
||
"image-display", // → v2-media (image)
|
||
// 공통코드관리로 통합 예정
|
||
"category-manager", // → 공통코드관리 기능으로 통합 예정
|
||
// 분할 패널 정리 (split-panel-layout v1 유지)
|
||
"split-panel-layout2", // → split-panel-layout로 통합
|
||
"screen-split-panel", // 화면 임베딩 방식은 사용하지 않음
|
||
// 미완성/미사용 컴포넌트 (기존 화면 호환성 유지, 새 추가만 막음)
|
||
"accordion-basic", // 아코디언 컴포넌트
|
||
"conditional-container", // 조건부 컨테이너
|
||
"universal-form-modal", // 범용 폼 모달
|
||
// 통합 미디어 (테이블 컬럼 입력 타입으로 사용)
|
||
"v2-media", // → 테이블 컬럼의 image/file 입력 타입으로 사용
|
||
// 플로우 위젯 숨김 처리
|
||
"flow-widget",
|
||
// 선택 항목 상세입력 - 기존 컴포넌트 조합으로 대체 가능
|
||
"selected-items-detail-input",
|
||
// 연관 데이터 버튼 - v2-repeater로 대체 가능
|
||
"related-data-buttons",
|
||
// ===== V2로 대체된 기존 컴포넌트 (v2 버전만 사용) =====
|
||
"button-primary", // → v2-button-primary
|
||
"split-panel-layout", // → v2-split-panel-layout
|
||
"aggregation-widget", // → v2-aggregation-widget
|
||
"card-display", // → v2-card-display
|
||
"table-list", // → v2-table-list
|
||
"text-display", // → v2-text-display
|
||
"divider-line", // → v2-divider-line
|
||
"numbering-rule", // → v2-numbering-rule
|
||
"section-paper", // → v2-section-paper
|
||
"section-card", // → v2-section-card
|
||
"location-swap-selector", // → v2-location-swap-selector
|
||
"rack-structure", // → v2-rack-structure
|
||
"v2-repeater", // → v2-repeater (아래 v2Components에서 별도 처리)
|
||
"repeat-container", // → v2-repeat-container
|
||
"repeat-screen-modal", // → v2-repeat-screen-modal
|
||
"pivot-grid", // → v2-pivot-grid
|
||
"table-search-widget", // → v2-table-search-widget
|
||
"tabs", // → v2-tabs
|
||
"tabs-widget", // → v2-tabs-widget
|
||
];
|
||
|
||
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)),
|
||
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)),
|
||
utility: allComponents.filter(
|
||
(c) => c.category === ComponentCategory.UTILITY && !hiddenComponents.includes(c.id),
|
||
),
|
||
v2: v2Components,
|
||
};
|
||
}, [allComponents, v2Components]);
|
||
|
||
// 카테고리별 검색 필터링
|
||
const getFilteredComponents = (category: keyof typeof componentsByCategory) => {
|
||
let components = componentsByCategory[category];
|
||
|
||
if (searchQuery) {
|
||
const query = searchQuery.toLowerCase();
|
||
components = components.filter(
|
||
(component: ComponentDefinition) =>
|
||
component.name.toLowerCase().includes(query) ||
|
||
component.description.toLowerCase().includes(query) ||
|
||
component.tags?.some((tag: string) => tag.toLowerCase().includes(query)),
|
||
);
|
||
}
|
||
|
||
return components;
|
||
};
|
||
|
||
// 카테고리 아이콘 매핑
|
||
const getCategoryIcon = (category: ComponentCategory) => {
|
||
switch (category) {
|
||
case "display":
|
||
return <Palette className="h-6 w-6" />;
|
||
case "action":
|
||
return <Zap className="h-6 w-6" />;
|
||
case "data":
|
||
return <Database className="h-6 w-6" />;
|
||
case "layout":
|
||
return <Layers className="h-6 w-6" />;
|
||
case "utility":
|
||
return <Package className="h-6 w-6" />;
|
||
default:
|
||
return <Grid className="h-6 w-6" />;
|
||
}
|
||
};
|
||
|
||
// 드래그 시작 핸들러
|
||
const handleDragStart = (e: React.DragEvent<HTMLDivElement>, component: ComponentDefinition) => {
|
||
const dragData = {
|
||
type: "component",
|
||
component: component,
|
||
};
|
||
e.dataTransfer.setData("application/json", JSON.stringify(dragData));
|
||
e.dataTransfer.effectAllowed = "copy";
|
||
};
|
||
|
||
// 카테고리별 배경색 매핑
|
||
const getCategoryColor = (category: string) => {
|
||
switch (category) {
|
||
case "data":
|
||
return "from-blue-500/10 to-blue-600/10 text-blue-600 group-hover:from-blue-500/20 group-hover:to-blue-600/20";
|
||
case "display":
|
||
return "from-emerald-500/10 to-emerald-600/10 text-emerald-600 group-hover:from-emerald-500/20 group-hover:to-emerald-600/20";
|
||
case "input":
|
||
return "from-violet-500/10 to-violet-600/10 text-violet-600 group-hover:from-violet-500/20 group-hover:to-violet-600/20";
|
||
case "layout":
|
||
return "from-amber-500/10 to-amber-600/10 text-amber-600 group-hover:from-amber-500/20 group-hover:to-amber-600/20";
|
||
case "action":
|
||
return "from-rose-500/10 to-rose-600/10 text-rose-600 group-hover:from-rose-500/20 group-hover:to-rose-600/20";
|
||
default:
|
||
return "from-slate-500/10 to-slate-600/10 text-slate-600 group-hover:from-slate-500/20 group-hover:to-slate-600/20";
|
||
}
|
||
};
|
||
|
||
// 컴포넌트 카드 렌더링 함수 (컴팩트 버전)
|
||
const renderComponentCard = (component: ComponentDefinition) => (
|
||
<div
|
||
key={component.id}
|
||
draggable
|
||
onDragStart={(e) => {
|
||
handleDragStart(e, component);
|
||
e.currentTarget.style.opacity = "0.6";
|
||
e.currentTarget.style.transform = "rotate(2deg) scale(0.98)";
|
||
}}
|
||
onDragEnd={(e) => {
|
||
e.currentTarget.style.opacity = "1";
|
||
e.currentTarget.style.transform = "none";
|
||
}}
|
||
className="group bg-card hover:border-primary/40 cursor-grab rounded-lg border px-3 py-2.5 transition-all duration-200 hover:shadow-sm active:scale-[0.98] active:cursor-grabbing"
|
||
>
|
||
<div className="flex items-center gap-2.5">
|
||
<div
|
||
className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-gradient-to-br transition-all duration-200 ${getCategoryColor(component.category)}`}
|
||
>
|
||
{getCategoryIcon(component.category)}
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<span className="text-foreground block truncate text-xs font-medium">{component.name}</span>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-muted-foreground text-[10px] capitalize">{component.category}</span>
|
||
<span className="text-muted-foreground/60 text-[10px]">|</span>
|
||
<span className="text-muted-foreground text-[10px]">
|
||
{component.defaultSize.width}×{component.defaultSize.height}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="text-muted-foreground/40 group-hover:text-muted-foreground/60 transition-colors">
|
||
<GripVertical className="h-3.5 w-3.5" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
// 빈 상태 렌더링
|
||
const renderEmptyState = () => (
|
||
<div className="flex h-32 items-center justify-center text-center">
|
||
<div className="p-6">
|
||
<Package className="text-muted-foreground/40 mx-auto mb-2 h-10 w-10" />
|
||
<p className="text-muted-foreground text-xs font-medium">컴포넌트를 찾을 수 없습니다</p>
|
||
<p className="text-muted-foreground/60 mt-1 text-xs">검색어를 조정해보세요</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<div className={`bg-background flex h-full flex-col p-4 ${className}`}>
|
||
{/* 헤더 */}
|
||
<div className="mb-3">
|
||
<h2 className="mb-0.5 text-sm font-semibold">컴포넌트</h2>
|
||
<p className="text-muted-foreground text-xs">{allComponents.length}개 사용 가능</p>
|
||
</div>
|
||
|
||
{/* 통합 검색 */}
|
||
<div className="mb-3">
|
||
<div className="relative">
|
||
<Search className="text-muted-foreground absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2" />
|
||
<Input
|
||
placeholder="컴포넌트, 테이블, 컬럼 검색..."
|
||
value={searchQuery}
|
||
onChange={(e) => {
|
||
const value = e.target.value;
|
||
setSearchQuery(value);
|
||
// 테이블 검색도 함께 업데이트
|
||
if (onSearchChange) {
|
||
onSearchChange(value);
|
||
}
|
||
}}
|
||
className="h-8 pl-8 text-xs"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 테이블 / 컴포넌트 탭 */}
|
||
<Tabs defaultValue="tables" className="flex min-h-0 flex-1 flex-col">
|
||
<TabsList className="mb-3 grid h-8 w-full shrink-0 grid-cols-2 gap-1 p-1">
|
||
<TabsTrigger value="tables" className="flex items-center justify-center gap-1 text-xs">
|
||
<Database className="h-3 w-3" />
|
||
<span>테이블</span>
|
||
</TabsTrigger>
|
||
<TabsTrigger value="components" className="flex items-center justify-center gap-1 text-xs">
|
||
<Package className="h-3 w-3" />
|
||
<span>컴포넌트</span>
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
|
||
{/* 테이블 컬럼 탭 */}
|
||
<TabsContent value="tables" className="mt-0 flex-1 overflow-y-auto">
|
||
<TablesPanel
|
||
tables={tables}
|
||
searchTerm={searchTerm}
|
||
onSearchChange={onSearchChange || (() => {})}
|
||
onDragStart={onTableDragStart || (() => {})}
|
||
selectedTableName={selectedTableName}
|
||
placedColumns={placedColumns}
|
||
onTableSelect={onTableSelect}
|
||
showTableSelector={showTableSelector}
|
||
/>
|
||
</TabsContent>
|
||
|
||
{/* 컴포넌트 탭 */}
|
||
<TabsContent value="components" className="mt-0 flex-1 space-y-2 overflow-y-auto">
|
||
{(() => {
|
||
const allFilteredComponents = [
|
||
...getFilteredComponents("v2"),
|
||
...getFilteredComponents("action"),
|
||
...getFilteredComponents("display"),
|
||
...getFilteredComponents("data"),
|
||
...getFilteredComponents("layout"),
|
||
...getFilteredComponents("input"),
|
||
...getFilteredComponents("utility"),
|
||
];
|
||
|
||
return allFilteredComponents.length > 0
|
||
? allFilteredComponents.map(renderComponentCard)
|
||
: renderEmptyState();
|
||
})()}
|
||
</TabsContent>
|
||
</Tabs>
|
||
|
||
{/* 도움말 */}
|
||
<div className="border-primary/20 bg-primary/5 mt-3 rounded-lg border p-3">
|
||
<div className="flex items-start gap-2">
|
||
<MousePointer className="text-primary mt-0.5 h-3.5 w-3.5 flex-shrink-0" />
|
||
<p className="text-muted-foreground text-xs leading-relaxed">
|
||
컴포넌트를 <span className="text-foreground font-semibold">드래그</span>하여 화면에 추가하세요
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|