73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { Label } from "@/components/ui/label";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Input } from "@/components/ui/input";
|
|
import type { PopWorkDetailConfig } from "../types";
|
|
|
|
interface PopWorkDetailConfigPanelProps {
|
|
config?: PopWorkDetailConfig;
|
|
onChange?: (config: PopWorkDetailConfig) => void;
|
|
}
|
|
|
|
const DEFAULT_PHASE_LABELS: Record<string, string> = {
|
|
PRE: "작업 전",
|
|
IN: "작업 중",
|
|
POST: "작업 후",
|
|
};
|
|
|
|
export function PopWorkDetailConfigPanel({
|
|
config,
|
|
onChange,
|
|
}: PopWorkDetailConfigPanelProps) {
|
|
const cfg: PopWorkDetailConfig = {
|
|
showTimer: config?.showTimer ?? true,
|
|
showQuantityInput: config?.showQuantityInput ?? true,
|
|
phaseLabels: config?.phaseLabels ?? { ...DEFAULT_PHASE_LABELS },
|
|
};
|
|
|
|
const update = (partial: Partial<PopWorkDetailConfig>) => {
|
|
onChange?.({ ...cfg, ...partial });
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs sm:text-sm">타이머 표시</Label>
|
|
<Switch
|
|
checked={cfg.showTimer}
|
|
onCheckedChange={(v) => update({ showTimer: v })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs sm:text-sm">수량 입력 표시</Label>
|
|
<Switch
|
|
checked={cfg.showQuantityInput}
|
|
onCheckedChange={(v) => update({ showQuantityInput: v })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label className="text-xs sm:text-sm">단계 라벨</Label>
|
|
{(["PRE", "IN", "POST"] as const).map((phase) => (
|
|
<div key={phase} className="flex items-center gap-2">
|
|
<span className="w-12 text-xs font-medium text-muted-foreground">
|
|
{phase}
|
|
</span>
|
|
<Input
|
|
className="h-8 text-xs"
|
|
value={cfg.phaseLabels[phase] ?? DEFAULT_PHASE_LABELS[phase]}
|
|
onChange={(e) =>
|
|
update({
|
|
phaseLabels: { ...cfg.phaseLabels, [phase]: e.target.value },
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|