4f10b5e42d
447+ 파일, 4500+ 줄 변경: - gray-* → border/bg-muted/text-foreground/text-muted-foreground - blue-* → primary/ring - red-* → destructive - green-* → emerald (일관성) - indigo-* → primary - yellow/orange → amber (통일) - dark mode 변형도 시맨틱 토큰으로 변환 Made-with: Cursor
57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useDrag } from "react-dnd";
|
|
import { Type, Table, Image, Minus, PenLine, Stamp as StampIcon, Hash, CreditCard, Calculator, Barcode, CheckSquare } from "lucide-react";
|
|
|
|
interface ComponentItem {
|
|
type: string;
|
|
label: string;
|
|
icon: React.ReactNode;
|
|
}
|
|
|
|
const COMPONENTS: ComponentItem[] = [
|
|
{ type: "text", label: "텍스트", icon: <Type className="h-4 w-4" /> },
|
|
{ type: "table", label: "테이블", icon: <Table className="h-4 w-4" /> },
|
|
{ type: "image", label: "이미지", icon: <Image className="h-4 w-4" /> },
|
|
{ type: "divider", label: "구분선", icon: <Minus className="h-4 w-4" /> },
|
|
{ type: "signature", label: "서명란", icon: <PenLine className="h-4 w-4" /> },
|
|
{ type: "stamp", label: "도장란", icon: <StampIcon className="h-4 w-4" /> },
|
|
{ type: "pageNumber", label: "페이지번호", icon: <Hash className="h-4 w-4" /> },
|
|
{ type: "card", label: "정보카드", icon: <CreditCard className="h-4 w-4" /> },
|
|
{ type: "calculation", label: "계산", icon: <Calculator className="h-4 w-4" /> },
|
|
{ type: "barcode", label: "바코드/QR", icon: <Barcode className="h-4 w-4" /> },
|
|
{ type: "checkbox", label: "체크박스", icon: <CheckSquare className="h-4 w-4" /> },
|
|
];
|
|
|
|
function DraggableComponentItem({ type, label, icon }: ComponentItem) {
|
|
const [{ isDragging }, drag] = useDrag(() => ({
|
|
type: "component",
|
|
item: { componentType: type },
|
|
collect: (monitor) => ({
|
|
isDragging: monitor.isDragging(),
|
|
}),
|
|
}));
|
|
|
|
return (
|
|
<div
|
|
ref={drag}
|
|
className={`flex cursor-move items-center gap-2 rounded border p-2 text-sm transition-all hover:border-primary hover:bg-primary/10 ${
|
|
isDragging ? "opacity-50" : ""
|
|
}`}
|
|
>
|
|
{icon}
|
|
<span>{label}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ComponentPalette() {
|
|
return (
|
|
<div className="space-y-2">
|
|
{COMPONENTS.map((component) => (
|
|
<DraggableComponentItem key={component.type} {...component} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|