252 lines
8.1 KiB
TypeScript
252 lines
8.1 KiB
TypeScript
"use client";
|
||
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
import { Switch } from "@/components/ui/switch";
|
||
import { Trash2 } from "lucide-react";
|
||
import { useBarcodeDesigner } from "@/contexts/BarcodeDesignerContext";
|
||
import { BarcodeLabelComponent } from "@/types/barcode";
|
||
|
||
export function BarcodeDesignerRightPanel() {
|
||
const {
|
||
components,
|
||
selectedComponentId,
|
||
updateComponent,
|
||
removeComponent,
|
||
selectComponent,
|
||
widthMm,
|
||
heightMm,
|
||
setWidthMm,
|
||
setHeightMm,
|
||
} = useBarcodeDesigner();
|
||
|
||
const selected = components.find((c) => c.id === selectedComponentId);
|
||
|
||
if (!selected) {
|
||
return (
|
||
<div className="w-72 border-l bg-white p-4">
|
||
<p className="text-muted-foreground text-sm">요소를 선택하면 속성을 편집할 수 있습니다.</p>
|
||
<div className="mt-4 space-y-2">
|
||
<Label className="text-xs">라벨 크기 (mm)</Label>
|
||
<div className="flex gap-2">
|
||
<Input
|
||
type="number"
|
||
min={10}
|
||
max={200}
|
||
value={widthMm}
|
||
onChange={(e) => setWidthMm(Number(e.target.value) || 50)}
|
||
/>
|
||
<span className="py-2">×</span>
|
||
<Input
|
||
type="number"
|
||
min={10}
|
||
max={200}
|
||
value={heightMm}
|
||
onChange={(e) => setHeightMm(Number(e.target.value) || 30)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const update = (updates: Partial<BarcodeLabelComponent>) =>
|
||
updateComponent(selected.id, updates);
|
||
|
||
return (
|
||
<div className="w-72 border-l bg-white">
|
||
<div className="border-b p-2 flex items-center justify-between">
|
||
<span className="text-sm font-medium">속성</span>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-8 w-8 text-destructive"
|
||
onClick={() => {
|
||
removeComponent(selected.id);
|
||
selectComponent(null);
|
||
}}
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
<div className="space-y-4 p-4">
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div>
|
||
<Label className="text-xs">X (px)</Label>
|
||
<Input
|
||
type="number"
|
||
value={Math.round(selected.x)}
|
||
onChange={(e) => update({ x: Number(e.target.value) || 0 })}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label className="text-xs">Y (px)</Label>
|
||
<Input
|
||
type="number"
|
||
value={Math.round(selected.y)}
|
||
onChange={(e) => update({ y: Number(e.target.value) || 0 })}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label className="text-xs">너비</Label>
|
||
<Input
|
||
type="number"
|
||
min={4}
|
||
value={Math.round(selected.width)}
|
||
onChange={(e) => update({ width: Number(e.target.value) || 10 })}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label className="text-xs">높이</Label>
|
||
<Input
|
||
type="number"
|
||
min={4}
|
||
value={Math.round(selected.height)}
|
||
onChange={(e) => update({ height: Number(e.target.value) || 10 })}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{selected.type === "text" && (
|
||
<>
|
||
<div>
|
||
<Label className="text-xs">내용</Label>
|
||
<Input
|
||
value={selected.content || ""}
|
||
onChange={(e) => update({ content: e.target.value })}
|
||
placeholder="텍스트"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label className="text-xs">글자 크기</Label>
|
||
<Input
|
||
type="number"
|
||
min={6}
|
||
max={72}
|
||
value={selected.fontSize || 10}
|
||
onChange={(e) => update({ fontSize: Number(e.target.value) || 10 })}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label className="text-xs">글자 색</Label>
|
||
<Input
|
||
type="color"
|
||
value={selected.fontColor || "#000000"}
|
||
onChange={(e) => update({ fontColor: e.target.value })}
|
||
className="h-9 w-20 p-1"
|
||
/>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{selected.type === "barcode" && (
|
||
<>
|
||
<div>
|
||
<Label className="text-xs">바코드 유형</Label>
|
||
<Select
|
||
value={selected.barcodeType || "CODE128"}
|
||
onValueChange={(v) => update({ barcodeType: v })}
|
||
>
|
||
<SelectTrigger className="h-9">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="CODE128">CODE128</SelectItem>
|
||
<SelectItem value="CODE39">CODE39</SelectItem>
|
||
<SelectItem value="EAN13">EAN13</SelectItem>
|
||
<SelectItem value="EAN8">EAN8</SelectItem>
|
||
<SelectItem value="QR">QR 코드</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div>
|
||
<Label className="text-xs">값</Label>
|
||
<Input
|
||
value={selected.barcodeValue || ""}
|
||
onChange={(e) => update({ barcodeValue: e.target.value })}
|
||
placeholder="123456789"
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Switch
|
||
checked={selected.showBarcodeText !== false}
|
||
onCheckedChange={(v) => update({ showBarcodeText: v })}
|
||
/>
|
||
<Label className="text-xs">숫자 표시 (1D)</Label>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{selected.type === "line" && (
|
||
<>
|
||
<div>
|
||
<Label className="text-xs">선 두께</Label>
|
||
<Input
|
||
type="number"
|
||
min={1}
|
||
value={selected.lineWidth || 1}
|
||
onChange={(e) => update({ lineWidth: Number(e.target.value) || 1 })}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label className="text-xs">색상</Label>
|
||
<Input
|
||
type="color"
|
||
value={selected.lineColor || "#000000"}
|
||
onChange={(e) => update({ lineColor: e.target.value })}
|
||
className="h-9 w-20 p-1"
|
||
/>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{selected.type === "rectangle" && (
|
||
<>
|
||
<div>
|
||
<Label className="text-xs">테두리 두께</Label>
|
||
<Input
|
||
type="number"
|
||
min={0}
|
||
value={selected.lineWidth ?? 1}
|
||
onChange={(e) => update({ lineWidth: Number(e.target.value) || 0 })}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label className="text-xs">테두리 색</Label>
|
||
<Input
|
||
type="color"
|
||
value={selected.lineColor || "#000000"}
|
||
onChange={(e) => update({ lineColor: e.target.value })}
|
||
className="h-9 w-20 p-1"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label className="text-xs">배경 색</Label>
|
||
<Input
|
||
type="color"
|
||
value={selected.backgroundColor || "#ffffff"}
|
||
onChange={(e) => update({ backgroundColor: e.target.value })}
|
||
className="h-9 w-20 p-1"
|
||
/>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{selected.type === "image" && (
|
||
<div>
|
||
<Label className="text-xs">이미지 URL</Label>
|
||
<Input
|
||
value={selected.imageUrl || ""}
|
||
onChange={(e) => update({ imageUrl: e.target.value })}
|
||
placeholder="https://..."
|
||
/>
|
||
<p className="text-muted-foreground mt-1 text-xs">또는 나중에 업로드 기능 연동</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|