502 lines
14 KiB
TypeScript
502 lines
14 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* UnifiedHierarchy
|
||
|
|
*
|
||
|
|
* 통합 계층 구조 컴포넌트
|
||
|
|
* - tree: 트리 뷰
|
||
|
|
* - org: 조직도
|
||
|
|
* - bom: BOM 구조
|
||
|
|
* - cascading: 연쇄 드롭다운
|
||
|
|
*/
|
||
|
|
|
||
|
|
import React, { forwardRef, useCallback, useState } from "react";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { UnifiedHierarchyProps, HierarchyNode } from "@/types/unified-components";
|
||
|
|
import {
|
||
|
|
ChevronRight,
|
||
|
|
ChevronDown,
|
||
|
|
Folder,
|
||
|
|
FolderOpen,
|
||
|
|
File,
|
||
|
|
Plus,
|
||
|
|
Minus,
|
||
|
|
GripVertical,
|
||
|
|
User,
|
||
|
|
Users,
|
||
|
|
Building
|
||
|
|
} from "lucide-react";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 트리 노드 컴포넌트
|
||
|
|
*/
|
||
|
|
const TreeNode = forwardRef<HTMLDivElement, {
|
||
|
|
node: HierarchyNode;
|
||
|
|
level: number;
|
||
|
|
maxLevel?: number;
|
||
|
|
selectedNode?: HierarchyNode;
|
||
|
|
onSelect?: (node: HierarchyNode) => void;
|
||
|
|
editable?: boolean;
|
||
|
|
draggable?: boolean;
|
||
|
|
showQty?: boolean;
|
||
|
|
className?: string;
|
||
|
|
}>(({
|
||
|
|
node,
|
||
|
|
level,
|
||
|
|
maxLevel,
|
||
|
|
selectedNode,
|
||
|
|
onSelect,
|
||
|
|
editable,
|
||
|
|
draggable,
|
||
|
|
showQty,
|
||
|
|
className
|
||
|
|
}, ref) => {
|
||
|
|
const [isOpen, setIsOpen] = useState(level < 2);
|
||
|
|
const hasChildren = node.children && node.children.length > 0;
|
||
|
|
const isSelected = selectedNode?.id === node.id;
|
||
|
|
|
||
|
|
// 최대 레벨 제한
|
||
|
|
if (maxLevel && level >= maxLevel) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div ref={ref} className={className}>
|
||
|
|
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"flex items-center gap-1 py-1 px-2 rounded cursor-pointer hover:bg-muted/50",
|
||
|
|
isSelected && "bg-primary/10 text-primary"
|
||
|
|
)}
|
||
|
|
style={{ paddingLeft: `${level * 16 + 8}px` }}
|
||
|
|
onClick={() => onSelect?.(node)}
|
||
|
|
>
|
||
|
|
{/* 드래그 핸들 */}
|
||
|
|
{draggable && (
|
||
|
|
<GripVertical className="h-4 w-4 text-muted-foreground cursor-grab" />
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 확장/축소 아이콘 */}
|
||
|
|
{hasChildren ? (
|
||
|
|
<CollapsibleTrigger asChild onClick={(e) => e.stopPropagation()}>
|
||
|
|
<Button variant="ghost" size="icon" className="h-5 w-5 p-0">
|
||
|
|
{isOpen ? (
|
||
|
|
<ChevronDown className="h-4 w-4" />
|
||
|
|
) : (
|
||
|
|
<ChevronRight className="h-4 w-4" />
|
||
|
|
)}
|
||
|
|
</Button>
|
||
|
|
</CollapsibleTrigger>
|
||
|
|
) : (
|
||
|
|
<span className="w-5" />
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 폴더/파일 아이콘 */}
|
||
|
|
{hasChildren ? (
|
||
|
|
isOpen ? (
|
||
|
|
<FolderOpen className="h-4 w-4 text-amber-500" />
|
||
|
|
) : (
|
||
|
|
<Folder className="h-4 w-4 text-amber-500" />
|
||
|
|
)
|
||
|
|
) : (
|
||
|
|
<File className="h-4 w-4 text-muted-foreground" />
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 라벨 */}
|
||
|
|
<span className="flex-1 text-sm truncate">{node.label}</span>
|
||
|
|
|
||
|
|
{/* 수량 (BOM용) */}
|
||
|
|
{showQty && node.data?.qty && (
|
||
|
|
<span className="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
|
||
|
|
x{String(node.data.qty)}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 편집 버튼 */}
|
||
|
|
{editable && (
|
||
|
|
<div className="flex gap-1">
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100"
|
||
|
|
onClick={(e) => { e.stopPropagation(); }}
|
||
|
|
>
|
||
|
|
<Plus className="h-3 w-3" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 자식 노드 */}
|
||
|
|
{hasChildren && (
|
||
|
|
<CollapsibleContent>
|
||
|
|
{node.children!.map((child) => (
|
||
|
|
<TreeNode
|
||
|
|
key={child.id}
|
||
|
|
node={child}
|
||
|
|
level={level + 1}
|
||
|
|
maxLevel={maxLevel}
|
||
|
|
selectedNode={selectedNode}
|
||
|
|
onSelect={onSelect}
|
||
|
|
editable={editable}
|
||
|
|
draggable={draggable}
|
||
|
|
showQty={showQty}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</CollapsibleContent>
|
||
|
|
)}
|
||
|
|
</Collapsible>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
TreeNode.displayName = "TreeNode";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 트리 뷰 컴포넌트
|
||
|
|
*/
|
||
|
|
const TreeView = forwardRef<HTMLDivElement, {
|
||
|
|
data: HierarchyNode[];
|
||
|
|
selectedNode?: HierarchyNode;
|
||
|
|
onNodeSelect?: (node: HierarchyNode) => void;
|
||
|
|
editable?: boolean;
|
||
|
|
draggable?: boolean;
|
||
|
|
maxLevel?: number;
|
||
|
|
className?: string;
|
||
|
|
}>(({ data, selectedNode, onNodeSelect, editable, draggable, maxLevel, className }, ref) => {
|
||
|
|
return (
|
||
|
|
<div ref={ref} className={cn("border rounded-lg p-2", className)}>
|
||
|
|
{data.length === 0 ? (
|
||
|
|
<div className="py-8 text-center text-muted-foreground text-sm">
|
||
|
|
데이터가 없습니다
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
data.map((node) => (
|
||
|
|
<TreeNode
|
||
|
|
key={node.id}
|
||
|
|
node={node}
|
||
|
|
level={0}
|
||
|
|
maxLevel={maxLevel}
|
||
|
|
selectedNode={selectedNode}
|
||
|
|
onSelect={onNodeSelect}
|
||
|
|
editable={editable}
|
||
|
|
draggable={draggable}
|
||
|
|
/>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
TreeView.displayName = "TreeView";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 조직도 뷰 컴포넌트
|
||
|
|
*/
|
||
|
|
const OrgView = forwardRef<HTMLDivElement, {
|
||
|
|
data: HierarchyNode[];
|
||
|
|
selectedNode?: HierarchyNode;
|
||
|
|
onNodeSelect?: (node: HierarchyNode) => void;
|
||
|
|
className?: string;
|
||
|
|
}>(({ data, selectedNode, onNodeSelect, className }, ref) => {
|
||
|
|
const renderOrgNode = (node: HierarchyNode, isRoot = false) => {
|
||
|
|
const isSelected = selectedNode?.id === node.id;
|
||
|
|
const hasChildren = node.children && node.children.length > 0;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div key={node.id} className="flex flex-col items-center">
|
||
|
|
{/* 노드 카드 */}
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"flex flex-col items-center p-3 border rounded-lg cursor-pointer hover:border-primary transition-colors",
|
||
|
|
isSelected && "border-primary bg-primary/5",
|
||
|
|
isRoot && "bg-primary/10"
|
||
|
|
)}
|
||
|
|
onClick={() => onNodeSelect?.(node)}
|
||
|
|
>
|
||
|
|
<div className={cn(
|
||
|
|
"w-10 h-10 rounded-full flex items-center justify-center mb-2",
|
||
|
|
isRoot ? "bg-primary text-primary-foreground" : "bg-muted"
|
||
|
|
)}>
|
||
|
|
{isRoot ? (
|
||
|
|
<Building className="h-5 w-5" />
|
||
|
|
) : hasChildren ? (
|
||
|
|
<Users className="h-5 w-5" />
|
||
|
|
) : (
|
||
|
|
<User className="h-5 w-5" />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="font-medium text-sm">{node.label}</div>
|
||
|
|
{node.data?.title && (
|
||
|
|
<div className="text-xs text-muted-foreground">{String(node.data.title)}</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 자식 노드 */}
|
||
|
|
{hasChildren && (
|
||
|
|
<>
|
||
|
|
{/* 연결선 */}
|
||
|
|
<div className="w-px h-4 bg-border" />
|
||
|
|
<div className="flex gap-4">
|
||
|
|
{node.children!.map((child, index) => (
|
||
|
|
<React.Fragment key={child.id}>
|
||
|
|
{index > 0 && <div className="w-4" />}
|
||
|
|
{renderOrgNode(child)}
|
||
|
|
</React.Fragment>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div ref={ref} className={cn("overflow-auto p-4", className)}>
|
||
|
|
{data.length === 0 ? (
|
||
|
|
<div className="py-8 text-center text-muted-foreground text-sm">
|
||
|
|
조직 데이터가 없습니다
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="flex flex-col items-center gap-4">
|
||
|
|
{data.map((node) => renderOrgNode(node, true))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
OrgView.displayName = "OrgView";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* BOM 뷰 컴포넌트 (수량 포함 트리)
|
||
|
|
*/
|
||
|
|
const BomView = forwardRef<HTMLDivElement, {
|
||
|
|
data: HierarchyNode[];
|
||
|
|
selectedNode?: HierarchyNode;
|
||
|
|
onNodeSelect?: (node: HierarchyNode) => void;
|
||
|
|
editable?: boolean;
|
||
|
|
className?: string;
|
||
|
|
}>(({ data, selectedNode, onNodeSelect, editable, className }, ref) => {
|
||
|
|
return (
|
||
|
|
<div ref={ref} className={cn("border rounded-lg p-2", className)}>
|
||
|
|
{data.length === 0 ? (
|
||
|
|
<div className="py-8 text-center text-muted-foreground text-sm">
|
||
|
|
BOM 데이터가 없습니다
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
data.map((node) => (
|
||
|
|
<TreeNode
|
||
|
|
key={node.id}
|
||
|
|
node={node}
|
||
|
|
level={0}
|
||
|
|
selectedNode={selectedNode}
|
||
|
|
onSelect={onNodeSelect}
|
||
|
|
editable={editable}
|
||
|
|
showQty={true}
|
||
|
|
/>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
BomView.displayName = "BomView";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 연쇄 드롭다운 컴포넌트
|
||
|
|
*/
|
||
|
|
const CascadingView = forwardRef<HTMLDivElement, {
|
||
|
|
data: HierarchyNode[];
|
||
|
|
selectedNode?: HierarchyNode;
|
||
|
|
onNodeSelect?: (node: HierarchyNode) => void;
|
||
|
|
maxLevel?: number;
|
||
|
|
className?: string;
|
||
|
|
}>(({ data, selectedNode, onNodeSelect, maxLevel = 3, className }, ref) => {
|
||
|
|
const [selections, setSelections] = useState<string[]>([]);
|
||
|
|
|
||
|
|
// 레벨별 옵션 가져오기
|
||
|
|
const getOptionsForLevel = (level: number): HierarchyNode[] => {
|
||
|
|
if (level === 0) return data;
|
||
|
|
|
||
|
|
let currentNodes = data;
|
||
|
|
for (let i = 0; i < level; i++) {
|
||
|
|
const selectedId = selections[i];
|
||
|
|
if (!selectedId) return [];
|
||
|
|
|
||
|
|
const selectedNode = currentNodes.find((n) => n.id === selectedId);
|
||
|
|
if (!selectedNode?.children) return [];
|
||
|
|
|
||
|
|
currentNodes = selectedNode.children;
|
||
|
|
}
|
||
|
|
return currentNodes;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 선택 핸들러
|
||
|
|
const handleSelect = (level: number, nodeId: string) => {
|
||
|
|
const newSelections = [...selections.slice(0, level), nodeId];
|
||
|
|
setSelections(newSelections);
|
||
|
|
|
||
|
|
// 마지막 선택된 노드 찾기
|
||
|
|
let node = data.find((n) => n.id === newSelections[0]);
|
||
|
|
for (let i = 1; i < newSelections.length; i++) {
|
||
|
|
node = node?.children?.find((n) => n.id === newSelections[i]);
|
||
|
|
}
|
||
|
|
if (node) {
|
||
|
|
onNodeSelect?.(node);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div ref={ref} className={cn("flex gap-2", className)}>
|
||
|
|
{Array.from({ length: maxLevel }, (_, level) => {
|
||
|
|
const options = getOptionsForLevel(level);
|
||
|
|
const isDisabled = level > 0 && !selections[level - 1];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Select
|
||
|
|
key={level}
|
||
|
|
value={selections[level] || ""}
|
||
|
|
onValueChange={(value) => handleSelect(level, value)}
|
||
|
|
disabled={isDisabled || options.length === 0}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="flex-1">
|
||
|
|
<SelectValue placeholder={`${level + 1}단계 선택`} />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{options.map((option) => (
|
||
|
|
<SelectItem key={option.id} value={option.id}>
|
||
|
|
{option.label}
|
||
|
|
</SelectItem>
|
||
|
|
))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
CascadingView.displayName = "CascadingView";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 메인 UnifiedHierarchy 컴포넌트
|
||
|
|
*/
|
||
|
|
export const UnifiedHierarchy = forwardRef<HTMLDivElement, UnifiedHierarchyProps>(
|
||
|
|
(props, ref) => {
|
||
|
|
const {
|
||
|
|
id,
|
||
|
|
label,
|
||
|
|
required,
|
||
|
|
style,
|
||
|
|
size,
|
||
|
|
config: configProp,
|
||
|
|
data = [],
|
||
|
|
selectedNode,
|
||
|
|
onNodeSelect,
|
||
|
|
} = props;
|
||
|
|
|
||
|
|
// config가 없으면 기본값 사용
|
||
|
|
const config = configProp || { type: "tree" as const, viewMode: "tree" as const, dataSource: "static" as const };
|
||
|
|
|
||
|
|
// 뷰모드별 렌더링
|
||
|
|
const renderHierarchy = () => {
|
||
|
|
const viewMode = config.viewMode || config.type || "tree";
|
||
|
|
switch (viewMode) {
|
||
|
|
case "tree":
|
||
|
|
return (
|
||
|
|
<TreeView
|
||
|
|
data={data}
|
||
|
|
selectedNode={selectedNode}
|
||
|
|
onNodeSelect={onNodeSelect}
|
||
|
|
editable={config.editable}
|
||
|
|
draggable={config.draggable}
|
||
|
|
maxLevel={config.maxLevel}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
case "org":
|
||
|
|
return (
|
||
|
|
<OrgView
|
||
|
|
data={data}
|
||
|
|
selectedNode={selectedNode}
|
||
|
|
onNodeSelect={onNodeSelect}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
case "bom":
|
||
|
|
return (
|
||
|
|
<BomView
|
||
|
|
data={data}
|
||
|
|
selectedNode={selectedNode}
|
||
|
|
onNodeSelect={onNodeSelect}
|
||
|
|
editable={config.editable}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
case "dropdown":
|
||
|
|
case "cascading":
|
||
|
|
return (
|
||
|
|
<CascadingView
|
||
|
|
data={data}
|
||
|
|
selectedNode={selectedNode}
|
||
|
|
onNodeSelect={onNodeSelect}
|
||
|
|
maxLevel={config.maxLevel}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
default:
|
||
|
|
return (
|
||
|
|
<TreeView
|
||
|
|
data={data}
|
||
|
|
selectedNode={selectedNode}
|
||
|
|
onNodeSelect={onNodeSelect}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const showLabel = label && style?.labelDisplay !== false;
|
||
|
|
const componentWidth = size?.width || style?.width;
|
||
|
|
const componentHeight = size?.height || style?.height;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
ref={ref}
|
||
|
|
id={id}
|
||
|
|
className="flex flex-col"
|
||
|
|
style={{
|
||
|
|
width: componentWidth,
|
||
|
|
height: componentHeight,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{showLabel && (
|
||
|
|
<Label
|
||
|
|
htmlFor={id}
|
||
|
|
style={{
|
||
|
|
fontSize: style?.labelFontSize,
|
||
|
|
color: style?.labelColor,
|
||
|
|
fontWeight: style?.labelFontWeight,
|
||
|
|
marginBottom: style?.labelMarginBottom,
|
||
|
|
}}
|
||
|
|
className="text-sm font-medium flex-shrink-0"
|
||
|
|
>
|
||
|
|
{label}
|
||
|
|
{required && <span className="text-orange-500 ml-0.5">*</span>}
|
||
|
|
</Label>
|
||
|
|
)}
|
||
|
|
<div className="flex-1 min-h-0">
|
||
|
|
{renderHierarchy()}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
UnifiedHierarchy.displayName = "UnifiedHierarchy";
|
||
|
|
|
||
|
|
export default UnifiedHierarchy;
|
||
|
|
|