ERP-node/frontend/components/barcode/designer/BarcodeComponentPalette.tsx

"use client";

import { useDrag } from "react-dnd";
import { Type, Barcode, Image, Minus, Square } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { BarcodeLabelComponent } from "@/types/barcode";
import { v4 as uuidv4 } from "uuid";

const ITEMS: { type: BarcodeLabelComponent["type"]; label: string; icon: React.ReactNode; barcodeType?: string }[] = [
  { type: "text", label: "텍스트", icon: <Type className="h-4 w-4" /> },
  { type: "barcode", label: "바코드", icon: <Barcode className="h-4 w-4" /> },
  { type: "barcode", label: "QR 코드", icon: <Barcode className="h-4 w-4" />, barcodeType: "QR" },
  { type: "image", label: "이미지", icon: <Image className="h-4 w-4" /> },
  { type: "line", label: "선", icon: <Minus className="h-4 w-4" /> },
  { type: "rectangle", label: "사각형", icon: <Square className="h-4 w-4" /> },
];

const MM_TO_PX = 4;

function defaultComponent(type: BarcodeLabelComponent["type"], barcodeType?: string): BarcodeLabelComponent {
  const id = `comp_${uuidv4()}`;
  const base = { id, type, x: 10 * MM_TO_PX, y: 10 * MM_TO_PX, width: 80, height: 24, zIndex: 0 };

  switch (type) {
    case "text":
      return { ...base, content: "텍스트", fontSize: 10, fontColor: "#000000" };
    case "barcode": {
      const isQR = barcodeType === "QR";
      return {
        ...base,
        width: isQR ? 100 : 120,
        height: isQR ? 100 : 40,
        barcodeType: barcodeType || "CODE128",
        barcodeValue: isQR ? "" : "123456789",
        showBarcodeText: !isQR,
      };
    }
    case "image":
      return { ...base, width: 60, height: 60, imageUrl: "", objectFit: "contain" };
    case "line":
      return { ...base, width: 100, height: 2, lineColor: "#000", lineWidth: 1 };
    case "rectangle":
      return { ...base, width: 80, height: 40, backgroundColor: "transparent", lineColor: "#000", lineWidth: 1 };
    default:
      return base;
  }
}

function DraggableItem({
  type,
  label,
  icon,
  barcodeType,
}: {
  type: BarcodeLabelComponent["type"];
  label: string;
  icon: React.ReactNode;
  barcodeType?: string;
}) {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: "barcode-component",
    item: { component: defaultComponent(type, barcodeType) },
    collect: (m) => ({ isDragging: m.isDragging() }),
  }));

  return (
    <div
      ref={drag}
      className={`flex cursor-move items-center gap-2 rounded border p-2 text-sm hover:border-blue-500 hover:bg-blue-50 ${
        isDragging ? "opacity-50" : ""
      }`}
    >
      {icon}
      <span>{label}</span>
    </div>
  );
}

export function BarcodeComponentPalette() {
  return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="text-sm">요소 추가</CardTitle>
      </CardHeader>
      <CardContent className="space-y-2">
        {ITEMS.map((item, idx) => (
          <DraggableItem
            key={item.barcodeType ? `${item.type}_${item.barcodeType}` : `${item.type}_${idx}`}
            type={item.type}
            label={item.label}
            icon={item.icon}
            barcodeType={item.barcodeType}
          />
        ))}
      </CardContent>
    </Card>
  );
}