웹타입 컴포넌트 분리작업

frontend/components/screen/config-panels/TextConfigPanel.tsx

@@ -0,0 +1,231 @@
+"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 { Textarea } from "@/components/ui/textarea";
+// import { Switch } from "@/components/ui/switch";
+// import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { WebTypeConfigPanelProps } from "@/lib/registry/types";
+import { WidgetComponent, TextTypeConfig } from "@/types/screen";
+
+export const TextConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
+  component,
+  onUpdateComponent,
+  onUpdateProperty,
+}) => {
+  const widget = component as WidgetComponent;
+  const config = (widget.webTypeConfig as TextTypeConfig) || {};
+
+  // 로컬 상태
+  const [localConfig, setLocalConfig] = useState<TextTypeConfig>({
+    minLength: config.minLength || undefined,
+    maxLength: config.maxLength || undefined,
+    pattern: config.pattern || "",
+    placeholder: config.placeholder || "",
+    autoComplete: config.autoComplete || "off",
+    format: config.format || "none",
+    required: config.required || false,
+    readonly: config.readonly || false,
+  });
+
+  // 컴포넌트 변경 시 로컬 상태 동기화
+  useEffect(() => {
+    const currentConfig = (widget.webTypeConfig as TextTypeConfig) || {};
+    setLocalConfig({
+      minLength: currentConfig.minLength || undefined,
+      maxLength: currentConfig.maxLength || undefined,
+      pattern: currentConfig.pattern || "",
+      placeholder: currentConfig.placeholder || "",
+      autoComplete: currentConfig.autoComplete || "off",
+      format: currentConfig.format || "none",
+      required: currentConfig.required || false,
+      readonly: currentConfig.readonly || false,
+    });
+  }, [widget.webTypeConfig]);
+
+  // 설정 업데이트 핸들러
+  const updateConfig = (field: keyof TextTypeConfig, 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="minLength" className="text-xs">
+                최소 길이
+              </Label>
+              <Input
+                id="minLength"
+                type="number"
+                value={localConfig.minLength || ""}
+                onChange={(e) => updateConfig("minLength", e.target.value ? parseInt(e.target.value) : undefined)}
+                placeholder="0"
+                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) => updateConfig("maxLength", e.target.value ? parseInt(e.target.value) : undefined)}
+                placeholder="100"
+                min="1"
+                className="text-xs"
+              />
+            </div>
+          </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
+              id="format"
+              value={localConfig.format || "none"}
+              onChange={(e) => updateConfig("format", e.target.value)}
+              className="border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-xs shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <option value="none">제한 없음</option>
+              <option value="email">이메일</option>
+              <option value="phone">전화번호</option>
+              <option value="url">URL</option>
+              <option value="korean">한글만</option>
+              <option value="english">영문만</option>
+              <option value="alphanumeric">영숫자만</option>
+            </select>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="pattern" className="text-xs">
+              정규식 패턴
+            </Label>
+            <Input
+              id="pattern"
+              value={localConfig.pattern || ""}
+              onChange={(e) => updateConfig("pattern", e.target.value)}
+              placeholder="예: [A-Za-z0-9]+"
+              className="font-mono text-xs"
+            />
+            <p className="text-muted-foreground text-xs">JavaScript 정규식 패턴을 입력하세요.</p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="autoComplete" className="text-xs">
+              자동완성
+            </Label>
+            <select
+              id="autoComplete"
+              value={localConfig.autoComplete || "off"}
+              onChange={(e) => updateConfig("autoComplete", e.target.value)}
+              className="border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-xs shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <option value="off">사용 안함</option>
+              <option value="on">사용</option>
+              <option value="name">이름</option>
+              <option value="email">이메일</option>
+              <option value="username">사용자명</option>
+              <option value="current-password">현재 비밀번호</option>
+              <option value="new-password">새 비밀번호</option>
+              <option value="organization">조직명</option>
+              <option value="street-address">주소</option>
+              <option value="tel">전화번호</option>
+            </select>
+          </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>
+            <input
+              type="checkbox"
+              id="required"
+              checked={localConfig.required || false}
+              onChange={(e) => updateConfig("required", e.target.checked)}
+              className="border-input bg-background text-primary focus:ring-ring h-4 w-4 rounded border focus:ring-2 focus:ring-offset-2"
+            />
+          </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>
+            <input
+              type="checkbox"
+              id="readonly"
+              checked={localConfig.readonly || false}
+              onChange={(e) => updateConfig("readonly", e.target.checked)}
+              className="border-input bg-background text-primary focus:ring-ring h-4 w-4 rounded border focus:ring-2 focus:ring-offset-2"
+            />
+          </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
+              placeholder={localConfig.placeholder || "미리보기"}
+              disabled={localConfig.readonly}
+              required={localConfig.required}
+              maxLength={localConfig.maxLength}
+              minLength={localConfig.minLength}
+              pattern={localConfig.pattern}
+              autoComplete={localConfig.autoComplete}
+              className="text-xs"
+            />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+TextConfigPanel.displayName = "TextConfigPanel";