359 lines
13 KiB
TypeScript
359 lines
13 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 { Textarea } from "@/components/ui/textarea";
|
||
import { Slider } from "@/components/ui/slider";
|
||
import { AlignLeft } from "lucide-react";
|
||
import { WebTypeConfigPanelProps } from "@/lib/registry/types";
|
||
import { WidgetComponent, TextareaTypeConfig } from "@/types/screen";
|
||
|
||
export const TextareaConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
|
||
component,
|
||
onUpdateComponent,
|
||
onUpdateProperty,
|
||
}) => {
|
||
const widget = component as WidgetComponent;
|
||
const config = (widget.webTypeConfig as TextareaTypeConfig) || {};
|
||
|
||
// 로컬 상태
|
||
const [localConfig, setLocalConfig] = useState<TextareaTypeConfig>({
|
||
rows: config.rows || 4,
|
||
cols: config.cols || undefined,
|
||
minLength: config.minLength || undefined,
|
||
maxLength: config.maxLength || undefined,
|
||
placeholder: config.placeholder || "",
|
||
defaultValue: config.defaultValue || "",
|
||
required: config.required || false,
|
||
readonly: config.readonly || false,
|
||
resizable: config.resizable !== false, // 기본값 true
|
||
autoHeight: config.autoHeight || false,
|
||
showCharCount: config.showCharCount || false,
|
||
wrap: config.wrap || "soft",
|
||
});
|
||
|
||
// 컴포넌트 변경 시 로컬 상태 동기화
|
||
useEffect(() => {
|
||
const currentConfig = (widget.webTypeConfig as TextareaTypeConfig) || {};
|
||
setLocalConfig({
|
||
rows: currentConfig.rows || 4,
|
||
cols: currentConfig.cols || undefined,
|
||
minLength: currentConfig.minLength || undefined,
|
||
maxLength: currentConfig.maxLength || undefined,
|
||
placeholder: currentConfig.placeholder || "",
|
||
defaultValue: currentConfig.defaultValue || "",
|
||
required: currentConfig.required || false,
|
||
readonly: currentConfig.readonly || false,
|
||
resizable: currentConfig.resizable !== false,
|
||
autoHeight: currentConfig.autoHeight || false,
|
||
showCharCount: currentConfig.showCharCount || false,
|
||
wrap: currentConfig.wrap || "soft",
|
||
});
|
||
}, [widget.webTypeConfig]);
|
||
|
||
// 설정 업데이트 핸들러
|
||
const updateConfig = (field: keyof TextareaTypeConfig, value: any) => {
|
||
const newConfig = { ...localConfig, [field]: value };
|
||
setLocalConfig(newConfig);
|
||
onUpdateProperty("webTypeConfig", newConfig);
|
||
};
|
||
|
||
// 현재 문자 수 계산
|
||
const currentCharCount = (localConfig.defaultValue || "").length;
|
||
const isOverLimit = localConfig.maxLength ? currentCharCount > localConfig.maxLength : false;
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2 text-xs">
|
||
<AlignLeft className="h-4 w-4" />
|
||
텍스트영역 설정
|
||
</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="space-y-2">
|
||
<Label htmlFor="defaultValue" className="text-xs">
|
||
기본값
|
||
</Label>
|
||
<Textarea
|
||
id="defaultValue"
|
||
value={localConfig.defaultValue || ""}
|
||
onChange={(e) => updateConfig("defaultValue", e.target.value)}
|
||
placeholder="기본 텍스트 내용"
|
||
className="text-xs"
|
||
rows={3}
|
||
/>
|
||
{localConfig.showCharCount && (
|
||
<div className={`text-xs ${isOverLimit ? "text-red-500" : "text-muted-foreground"}`}>
|
||
{currentCharCount}
|
||
{localConfig.maxLength && ` / ${localConfig.maxLength}`} 글자
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 크기 설정 */}
|
||
<div className="space-y-3">
|
||
<h4 className="text-sm font-medium">크기 설정</h4>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="rows" className="text-xs">
|
||
행 수: {localConfig.rows}
|
||
</Label>
|
||
<Slider
|
||
id="rows"
|
||
min={1}
|
||
max={20}
|
||
step={1}
|
||
value={[localConfig.rows || 4]}
|
||
onValueChange={([value]) => updateConfig("rows", value)}
|
||
className="w-full"
|
||
/>
|
||
<div className="text-muted-foreground flex justify-between text-xs">
|
||
<span>1줄</span>
|
||
<span>20줄</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="cols" className="text-xs">
|
||
열 수 (선택사항)
|
||
</Label>
|
||
<Input
|
||
id="cols"
|
||
type="number"
|
||
value={localConfig.cols || ""}
|
||
onChange={(e) => {
|
||
const value = e.target.value ? parseInt(e.target.value) : undefined;
|
||
updateConfig("cols", value);
|
||
}}
|
||
placeholder="자동 (CSS로 제어)"
|
||
min={10}
|
||
max={200}
|
||
className="text-xs"
|
||
/>
|
||
<p className="text-muted-foreground text-xs">비워두면 CSS width로 제어됩니다.</p>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<div className="space-y-1">
|
||
<Label htmlFor="resizable" className="text-xs">
|
||
크기 조절 가능
|
||
</Label>
|
||
<p className="text-muted-foreground text-xs">사용자가 텍스트영역 크기를 조절할 수 있습니다.</p>
|
||
</div>
|
||
<Switch
|
||
id="resizable"
|
||
checked={localConfig.resizable || false}
|
||
onCheckedChange={(checked) => updateConfig("resizable", checked)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<div className="space-y-1">
|
||
<Label htmlFor="autoHeight" className="text-xs">
|
||
자동 높이
|
||
</Label>
|
||
<p className="text-muted-foreground text-xs">내용에 따라 높이가 자동으로 조절됩니다.</p>
|
||
</div>
|
||
<Switch
|
||
id="autoHeight"
|
||
checked={localConfig.autoHeight || false}
|
||
onCheckedChange={(checked) => updateConfig("autoHeight", checked)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 텍스트 제한 */}
|
||
<div className="space-y-3">
|
||
<h4 className="text-sm font-medium">텍스트 제한</h4>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="minLength" className="text-xs">
|
||
최소 글자 수
|
||
</Label>
|
||
<Input
|
||
id="minLength"
|
||
type="number"
|
||
value={localConfig.minLength || ""}
|
||
onChange={(e) => {
|
||
const value = e.target.value ? parseInt(e.target.value) : undefined;
|
||
updateConfig("minLength", value);
|
||
}}
|
||
placeholder="제한 없음"
|
||
min={0}
|
||
className="text-xs"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="maxLength" className="text-xs">
|
||
최대 글자 수
|
||
</Label>
|
||
<Input
|
||
id="maxLength"
|
||
type="number"
|
||
value={localConfig.maxLength || ""}
|
||
onChange={(e) => {
|
||
const value = e.target.value ? parseInt(e.target.value) : undefined;
|
||
updateConfig("maxLength", value);
|
||
}}
|
||
placeholder="제한 없음"
|
||
min={1}
|
||
className="text-xs"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<div className="space-y-1">
|
||
<Label htmlFor="showCharCount" className="text-xs">
|
||
글자 수 표시
|
||
</Label>
|
||
<p className="text-muted-foreground text-xs">현재 입력된 글자 수를 표시합니다.</p>
|
||
</div>
|
||
<Switch
|
||
id="showCharCount"
|
||
checked={localConfig.showCharCount || false}
|
||
onCheckedChange={(checked) => updateConfig("showCharCount", checked)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 텍스트 줄바꿈 설정 */}
|
||
<div className="space-y-3">
|
||
<h4 className="text-sm font-medium">줄바꿈 설정</h4>
|
||
|
||
<div className="space-y-2">
|
||
<Label className="text-xs">줄바꿈 방식</Label>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => updateConfig("wrap", "soft")}
|
||
className={`rounded border p-2 text-xs ${
|
||
localConfig.wrap === "soft" ? "bg-primary text-primary-foreground" : "bg-background"
|
||
}`}
|
||
>
|
||
Soft
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => updateConfig("wrap", "hard")}
|
||
className={`rounded border p-2 text-xs ${
|
||
localConfig.wrap === "hard" ? "bg-primary text-primary-foreground" : "bg-background"
|
||
}`}
|
||
>
|
||
Hard
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => updateConfig("wrap", "off")}
|
||
className={`rounded border p-2 text-xs ${
|
||
localConfig.wrap === "off" ? "bg-primary text-primary-foreground" : "bg-background"
|
||
}`}
|
||
>
|
||
Off
|
||
</button>
|
||
</div>
|
||
<div className="text-muted-foreground text-xs">
|
||
{localConfig.wrap === "soft" && "화면에서만 줄바꿈 (기본값)"}
|
||
{localConfig.wrap === "hard" && "실제 텍스트에 줄바꿈 포함"}
|
||
{localConfig.wrap === "off" && "줄바꿈 없음 (스크롤)"}
|
||
</div>
|
||
</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">
|
||
<Textarea
|
||
placeholder={localConfig.placeholder || "텍스트 입력 미리보기"}
|
||
rows={localConfig.rows}
|
||
cols={localConfig.cols}
|
||
disabled={localConfig.readonly}
|
||
required={localConfig.required}
|
||
minLength={localConfig.minLength}
|
||
maxLength={localConfig.maxLength}
|
||
defaultValue={localConfig.defaultValue}
|
||
style={{
|
||
resize: localConfig.resizable ? "both" : "none",
|
||
minHeight: localConfig.autoHeight ? "auto" : undefined,
|
||
}}
|
||
className="text-xs"
|
||
wrap={localConfig.wrap}
|
||
/>
|
||
{localConfig.showCharCount && (
|
||
<div className="text-muted-foreground mt-1 text-right text-xs">
|
||
0{localConfig.maxLength && ` / ${localConfig.maxLength}`} 글자
|
||
</div>
|
||
)}
|
||
<div className="text-muted-foreground mt-2 text-xs">
|
||
{localConfig.rows}행{localConfig.cols && ` × ${localConfig.cols}열`}
|
||
{localConfig.resizable && " • 크기조절가능"}
|
||
{localConfig.autoHeight && " • 자동높이"}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
TextareaConfigPanel.displayName = "TextareaConfigPanel";
|
||
|
||
|