채번 자동생성기능

frontend/lib/registry/components/text-input/TextInputConfigPanel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -8,6 +8,8 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { TextInputConfig } from "./types";
 import { AutoGenerationType, AutoGenerationConfig } from "@/types/screen";
 import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
+import { getAvailableNumberingRules } from "@/lib/api/numberingRule";
+import { NumberingRuleConfig } from "@/types/numbering-rule";
 
 export interface TextInputConfigPanelProps {
   config: TextInputConfig;
@@ -19,6 +21,32 @@ export interface TextInputConfigPanelProps {
  * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
  */
 export const TextInputConfigPanel: React.FC<TextInputConfigPanelProps> = ({ config, onChange }) => {
+  // 채번 규칙 목록 상태
+  const [numberingRules, setNumberingRules] = useState<NumberingRuleConfig[]>([]);
+  const [loadingRules, setLoadingRules] = useState(false);
+
+  // 채번 규칙 목록 로드
+  useEffect(() => {
+    const loadRules = async () => {
+      setLoadingRules(true);
+      try {
+        const response = await getAvailableNumberingRules();
+        if (response.success && response.data) {
+          setNumberingRules(response.data);
+        }
+      } catch (error) {
+        console.error("채번 규칙 목록 로드 실패:", error);
+      } finally {
+        setLoadingRules(false);
+      }
+    };
+
+    // autoGeneration.type이 numbering_rule일 때만 로드
+    if (config.autoGeneration?.type === "numbering_rule") {
+      loadRules();
+    }
+  }, [config.autoGeneration?.type]);
+
   const handleChange = (key: keyof TextInputConfig, value: any) => {
     onChange({ [key]: value });
   };
@@ -100,6 +128,7 @@ export const TextInputConfigPanel: React.FC<TextInputConfigPanelProps> = ({ conf
                 <SelectItem value="current_user">현재 사용자 ID</SelectItem>
                 <SelectItem value="current_time">현재 시간</SelectItem>
                 <SelectItem value="sequence">순차 번호</SelectItem>
+                <SelectItem value="numbering_rule">채번 규칙</SelectItem>
                 <SelectItem value="random_string">랜덤 문자열</SelectItem>
                 <SelectItem value="random_number">랜덤 숫자</SelectItem>
                 <SelectItem value="company_code">회사 코드</SelectItem>
@@ -113,6 +142,49 @@ export const TextInputConfigPanel: React.FC<TextInputConfigPanelProps> = ({ conf
                 {AutoGenerationUtils.getTypeDescription(config.autoGeneration.type)}
               </div>
             )}
+
+            {/* 채번 규칙 선택 */}
+            {config.autoGeneration?.type === "numbering_rule" && (
+              <div className="space-y-2">
+                <Label htmlFor="numberingRuleId">
+                  채번 규칙 선택 <span className="text-destructive">*</span>
+                </Label>
+                <Select
+                  value={config.autoGeneration?.options?.numberingRuleId || ""}
+                  onValueChange={(value) => {
+                    const currentConfig = config.autoGeneration!;
+                    handleChange("autoGeneration", {
+                      ...currentConfig,
+                      options: {
+                        ...currentConfig.options,
+                        numberingRuleId: value,
+                      },
+                    });
+                  }}
+                  disabled={loadingRules}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder={loadingRules ? "규칙 로딩 중..." : "채번 규칙 선택"} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {numberingRules.length === 0 ? (
+                      <SelectItem value="no-rules" disabled>
+                        사용 가능한 규칙이 없습니다
+                      </SelectItem>
+                    ) : (
+                      numberingRules.map((rule) => (
+                        <SelectItem key={rule.ruleId} value={rule.ruleId}>
+                          {rule.ruleName} ({rule.ruleId})
+                        </SelectItem>
+                      ))
+                    )}
+                  </SelectContent>
+                </Select>
+                <p className="text-muted-foreground text-xs">
+                  현재 메뉴에서 사용 가능한 채번 규칙만 표시됩니다
+                </p>
+              </div>
+            )}
           </div>
         )}