243 lines
9.0 KiB
TypeScript
243 lines
9.0 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React, { useState, useEffect } from "react";
|
||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { Switch } from "@/components/ui/switch";
|
||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
|
|
import { WebTypeConfigPanelProps } from "@/lib/registry/types";
|
||
|
|
import { WidgetComponent, NumberTypeConfig } from "@/types/screen";
|
||
|
|
|
||
|
|
export const NumberConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
|
||
|
|
component,
|
||
|
|
onUpdateComponent,
|
||
|
|
onUpdateProperty,
|
||
|
|
}) => {
|
||
|
|
const widget = component as WidgetComponent;
|
||
|
|
const config = (widget.webTypeConfig as NumberTypeConfig) || {};
|
||
|
|
|
||
|
|
// 로컬 상태
|
||
|
|
const [localConfig, setLocalConfig] = useState<NumberTypeConfig>({
|
||
|
|
min: config.min || undefined,
|
||
|
|
max: config.max || undefined,
|
||
|
|
step: config.step || undefined,
|
||
|
|
format: config.format || "integer",
|
||
|
|
decimalPlaces: config.decimalPlaces || undefined,
|
||
|
|
thousandSeparator: config.thousandSeparator || false,
|
||
|
|
placeholder: config.placeholder || "",
|
||
|
|
required: config.required || false,
|
||
|
|
readonly: config.readonly || false,
|
||
|
|
});
|
||
|
|
|
||
|
|
// 컴포넌트 변경 시 로컬 상태 동기화
|
||
|
|
useEffect(() => {
|
||
|
|
const currentConfig = (widget.webTypeConfig as NumberTypeConfig) || {};
|
||
|
|
setLocalConfig({
|
||
|
|
min: currentConfig.min || undefined,
|
||
|
|
max: currentConfig.max || undefined,
|
||
|
|
step: currentConfig.step || undefined,
|
||
|
|
format: currentConfig.format || "integer",
|
||
|
|
decimalPlaces: currentConfig.decimalPlaces || undefined,
|
||
|
|
thousandSeparator: currentConfig.thousandSeparator || false,
|
||
|
|
placeholder: currentConfig.placeholder || "",
|
||
|
|
required: currentConfig.required || false,
|
||
|
|
readonly: currentConfig.readonly || false,
|
||
|
|
});
|
||
|
|
}, [widget.webTypeConfig]);
|
||
|
|
|
||
|
|
// 설정 업데이트 핸들러
|
||
|
|
const updateConfig = (field: keyof NumberTypeConfig, value: any) => {
|
||
|
|
const newConfig = { ...localConfig, [field]: value };
|
||
|
|
setLocalConfig(newConfig);
|
||
|
|
onUpdateProperty("webTypeConfig", newConfig);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="flex items-center gap-2 text-sm">숫자 설정</CardTitle>
|
||
|
|
<CardDescription className="text-xs">숫자 입력 필드의 세부 설정을 관리합니다.</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="space-y-4">
|
||
|
|
{/* 기본 설정 */}
|
||
|
|
<div className="space-y-3">
|
||
|
|
<h4 className="text-sm font-medium">기본 설정</h4>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="placeholder" className="text-xs">
|
||
|
|
플레이스홀더
|
||
|
|
</Label>
|
||
|
|
<Input
|
||
|
|
id="placeholder"
|
||
|
|
value={localConfig.placeholder || ""}
|
||
|
|
onChange={(e) => updateConfig("placeholder", e.target.value)}
|
||
|
|
placeholder="숫자를 입력하세요"
|
||
|
|
className="text-xs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-2 gap-2">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="min" className="text-xs">
|
||
|
|
최솟값
|
||
|
|
</Label>
|
||
|
|
<Input
|
||
|
|
id="min"
|
||
|
|
type="number"
|
||
|
|
value={localConfig.min ?? ""}
|
||
|
|
onChange={(e) => updateConfig("min", e.target.value ? parseFloat(e.target.value) : undefined)}
|
||
|
|
placeholder="0"
|
||
|
|
className="text-xs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="max" className="text-xs">
|
||
|
|
최댓값
|
||
|
|
</Label>
|
||
|
|
<Input
|
||
|
|
id="max"
|
||
|
|
type="number"
|
||
|
|
value={localConfig.max ?? ""}
|
||
|
|
onChange={(e) => updateConfig("max", e.target.value ? parseFloat(e.target.value) : undefined)}
|
||
|
|
placeholder="100"
|
||
|
|
className="text-xs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="step" className="text-xs">
|
||
|
|
증감 단위
|
||
|
|
</Label>
|
||
|
|
<Input
|
||
|
|
id="step"
|
||
|
|
type="number"
|
||
|
|
value={localConfig.step ?? ""}
|
||
|
|
onChange={(e) => updateConfig("step", e.target.value ? parseFloat(e.target.value) : undefined)}
|
||
|
|
placeholder="1"
|
||
|
|
min="0"
|
||
|
|
step="0.01"
|
||
|
|
className="text-xs"
|
||
|
|
/>
|
||
|
|
<p className="text-muted-foreground text-xs">증가/감소 버튼 클릭 시 변경되는 값의 크기</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 형식 설정 */}
|
||
|
|
<div className="space-y-3">
|
||
|
|
<h4 className="text-sm font-medium">형식 설정</h4>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="format" className="text-xs">
|
||
|
|
숫자 형식
|
||
|
|
</Label>
|
||
|
|
<Select value={localConfig.format || "integer"} onValueChange={(value) => updateConfig("format", value)}>
|
||
|
|
<SelectTrigger className="text-xs">
|
||
|
|
<SelectValue placeholder="형식 선택" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="integer">정수</SelectItem>
|
||
|
|
<SelectItem value="decimal">소수</SelectItem>
|
||
|
|
<SelectItem value="currency">통화</SelectItem>
|
||
|
|
<SelectItem value="percentage">퍼센트</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{(localConfig.format === "decimal" || localConfig.format === "currency") && (
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="decimalPlaces" className="text-xs">
|
||
|
|
소수점 자릿수
|
||
|
|
</Label>
|
||
|
|
<Input
|
||
|
|
id="decimalPlaces"
|
||
|
|
type="number"
|
||
|
|
value={localConfig.decimalPlaces ?? ""}
|
||
|
|
onChange={(e) => updateConfig("decimalPlaces", e.target.value ? parseInt(e.target.value) : undefined)}
|
||
|
|
placeholder="2"
|
||
|
|
min="0"
|
||
|
|
max="10"
|
||
|
|
className="text-xs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div className="space-y-1">
|
||
|
|
<Label htmlFor="thousandSeparator" className="text-xs">
|
||
|
|
천 단위 구분자
|
||
|
|
</Label>
|
||
|
|
<p className="text-muted-foreground text-xs">1,000 형태로 표시합니다.</p>
|
||
|
|
</div>
|
||
|
|
<Switch
|
||
|
|
id="thousandSeparator"
|
||
|
|
checked={localConfig.thousandSeparator || false}
|
||
|
|
onCheckedChange={(checked) => updateConfig("thousandSeparator", checked)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 상태 설정 */}
|
||
|
|
<div className="space-y-3">
|
||
|
|
<h4 className="text-sm font-medium">상태 설정</h4>
|
||
|
|
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div className="space-y-1">
|
||
|
|
<Label htmlFor="required" className="text-xs">
|
||
|
|
필수 입력
|
||
|
|
</Label>
|
||
|
|
<p className="text-muted-foreground text-xs">값이 입력되어야 합니다.</p>
|
||
|
|
</div>
|
||
|
|
<Switch
|
||
|
|
id="required"
|
||
|
|
checked={localConfig.required || false}
|
||
|
|
onCheckedChange={(checked) => updateConfig("required", checked)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div className="space-y-1">
|
||
|
|
<Label htmlFor="readonly" className="text-xs">
|
||
|
|
읽기 전용
|
||
|
|
</Label>
|
||
|
|
<p className="text-muted-foreground text-xs">값을 수정할 수 없습니다.</p>
|
||
|
|
</div>
|
||
|
|
<Switch
|
||
|
|
id="readonly"
|
||
|
|
checked={localConfig.readonly || false}
|
||
|
|
onCheckedChange={(checked) => updateConfig("readonly", checked)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 미리보기 */}
|
||
|
|
<div className="space-y-3">
|
||
|
|
<h4 className="text-sm font-medium">미리보기</h4>
|
||
|
|
<div className="bg-muted/50 rounded-md border p-3">
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
placeholder={localConfig.placeholder || "숫자 입력 미리보기"}
|
||
|
|
disabled={localConfig.readonly}
|
||
|
|
required={localConfig.required}
|
||
|
|
min={localConfig.min}
|
||
|
|
max={localConfig.max}
|
||
|
|
step={localConfig.step}
|
||
|
|
className="text-xs"
|
||
|
|
/>
|
||
|
|
<div className="text-muted-foreground mt-2 text-xs">
|
||
|
|
{localConfig.format === "currency" && "통화 형식으로 표시됩니다."}
|
||
|
|
{localConfig.format === "percentage" && "퍼센트 형식으로 표시됩니다."}
|
||
|
|
{localConfig.thousandSeparator && "천 단위 구분자가 적용됩니다."}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
NumberConfigPanel.displayName = "NumberConfigPanel";
|
||
|
|
|
||
|
|
|