106 lines
3.5 KiB
TypeScript
106 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Trash2 } from "lucide-react";
|
|
import { NumberingRulePart, CodePartType, GenerationMethod, CODE_PART_TYPE_OPTIONS } from "@/types/numbering-rule";
|
|
import { AutoConfigPanel } from "./AutoConfigPanel";
|
|
import { ManualConfigPanel } from "./ManualConfigPanel";
|
|
|
|
interface NumberingRuleCardProps {
|
|
part: NumberingRulePart;
|
|
onUpdate: (updates: Partial<NumberingRulePart>) => void;
|
|
onDelete: () => void;
|
|
isPreview?: boolean;
|
|
}
|
|
|
|
export const NumberingRuleCard: React.FC<NumberingRuleCardProps> = ({
|
|
part,
|
|
onUpdate,
|
|
onDelete,
|
|
isPreview = false,
|
|
}) => {
|
|
return (
|
|
<Card className="border-border bg-card">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<Badge variant="outline" className="text-xs sm:text-sm">
|
|
규칙 {part.order}
|
|
</Badge>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={onDelete}
|
|
className="text-destructive h-7 w-7 sm:h-8 sm:w-8"
|
|
disabled={isPreview}
|
|
>
|
|
<Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-3 sm:space-y-4">
|
|
<div>
|
|
<Label className="text-xs font-medium sm:text-sm">구분 유형</Label>
|
|
<Select
|
|
value={part.partType}
|
|
onValueChange={(value) => onUpdate({ partType: value as CodePartType })}
|
|
disabled={isPreview}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{CODE_PART_TYPE_OPTIONS.map((option) => (
|
|
<SelectItem key={option.value} value={option.value} className="text-xs sm:text-sm">
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-xs font-medium sm:text-sm">생성 방식</Label>
|
|
<Select
|
|
value={part.generationMethod}
|
|
onValueChange={(value) => onUpdate({ generationMethod: value as GenerationMethod })}
|
|
disabled={isPreview}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="auto" className="text-xs sm:text-sm">
|
|
자동 생성
|
|
</SelectItem>
|
|
<SelectItem value="manual" className="text-xs sm:text-sm">
|
|
직접 입력
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{part.generationMethod === "auto" ? (
|
|
<AutoConfigPanel
|
|
partType={part.partType}
|
|
config={part.autoConfig}
|
|
onChange={(autoConfig) => onUpdate({ autoConfig })}
|
|
isPreview={isPreview}
|
|
/>
|
|
) : (
|
|
<ManualConfigPanel
|
|
config={part.manualConfig}
|
|
onChange={(manualConfig) => onUpdate({ manualConfig })}
|
|
isPreview={isPreview}
|
|
/>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|