fix: update V2PropertiesPanel to use V2FieldConfigPanel for input and select components

- Replaced references to V2InputConfigPanel and V2SelectConfigPanel with V2FieldConfigPanel in the V2PropertiesPanel.
- This change ensures consistent configuration handling for both input and select components, improving maintainability and usability.

Made-with: Cursor

frontend/components/v2/config-panels/V2InputConfigPanel.tsx

@@ -13,18 +13,7 @@ import { Switch } from "@/components/ui/switch";
 import { Separator } from "@/components/ui/separator";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import {
+import { Settings, ChevronDown, Loader2, Type, Hash, Lock, AlignLeft, SlidersHorizontal, Palette, ListOrdered } from "lucide-react";
-  Settings,
-  ChevronDown,
-  Loader2,
-  Type,
-  Hash,
-  Lock,
-  AlignLeft,
-  SlidersHorizontal,
-  Palette,
-  ListOrdered,
-} from "lucide-react";
 import { cn } from "@/lib/utils";
 import { AutoGenerationType, AutoGenerationConfig } from "@/types/screen";
 import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
@@ -35,15 +24,9 @@ interface V2InputConfigPanelProps {
   config: Record<string, any>;
   onChange: (config: Record<string, any>) => void;
   menuObjid?: number;
-  allComponents?: any[];
 }
 
-export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
+export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config, onChange, menuObjid }) => {
-  config,
-  onChange,
-  menuObjid,
-  allComponents = [],
-}) => {
   const [numberingRules, setNumberingRules] = useState<NumberingRuleConfig[]>([]);
   const [loadingRules, setLoadingRules] = useState(false);
   const [parentMenus, setParentMenus] = useState<any[]>([]);
@@ -68,7 +51,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
           const userMenus = allMenus.filter((menu: any) => {
             const menuType = menu.menu_type || menu.menuType;
             const level = menu.level || menu.lev || menu.LEVEL;
-            return menuType === "1" && (level === 2 || level === 3 || level === "2" || level === "3");
+            return menuType === '1' && (level === 2 || level === 3 || level === '2' || level === '3');
           });
           setParentMenus(userMenus);
         }
@@ -87,10 +70,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
     const loadRules = async () => {
       const isNumbering = inputType === "numbering" || config.autoGeneration?.type === "numbering_rule";
       if (!isNumbering) return;
-      if (!selectedMenuObjid) {
+      if (!selectedMenuObjid) { setNumberingRules([]); return; }
-        setNumberingRules([]);
-        return;
-      }
       setLoadingRules(true);
       try {
         const response = await getAvailableNumberingRules(selectedMenuObjid);
@@ -112,10 +92,10 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
       {/* ─── 1단계: 입력 타입 선택 (카드 방식) ─── */}
       <div className="space-y-2">
         <div className="flex items-center gap-2">
-          <Type className="text-muted-foreground h-4 w-4" />
+          <Type className="h-4 w-4 text-muted-foreground" />
           <p className="text-sm font-medium">입력 타입</p>
         </div>
-        <p className="text-muted-foreground text-[11px]">입력 필드의 종류를 선택해요</p>
+        <p className="text-[11px] text-muted-foreground">입력 필드의 종류를 선택해요</p>
       </div>
 
       <div className="grid grid-cols-2 gap-2">
@@ -152,23 +132,20 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
             className={cn(
               "flex items-center gap-2 rounded-lg border p-2.5 text-left transition-all",
               inputType === item.value
-                ? "border-primary bg-primary/5 ring-primary/20 ring-1"
+                ? "border-primary bg-primary/5 ring-1 ring-primary/20"
-                : "border-border hover:border-primary/30 hover:bg-muted/30",
+                : "border-border hover:border-primary/30 hover:bg-muted/30"
             )}
           >
-            <item.icon
+            <item.icon className={cn(
-              className={cn("h-4 w-4 shrink-0", inputType === item.value ? "text-primary" : "text-muted-foreground")}
+              "h-4 w-4 shrink-0",
-            />
+              inputType === item.value ? "text-primary" : "text-muted-foreground"
+            )} />
             <div className="min-w-0">
-              <span
+              <span className={cn(
-                className={cn(
+                "text-xs font-medium block",
-                  "block text-xs font-medium",
+                inputType === item.value ? "text-primary" : "text-foreground"
-                  inputType === item.value ? "text-primary" : "text-foreground",
+              )}>{item.label}</span>
-                )}
+              <span className="text-[10px] text-muted-foreground block truncate">{item.desc}</span>
-              >
-                {item.label}
-              </span>
-              <span className="text-muted-foreground block truncate text-[10px]">{item.desc}</span>
             </div>
           </button>
         ))}
@@ -176,34 +153,34 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
 
       {/* ─── 채번 타입 전용 설정 ─── */}
       {inputType === "numbering" && (
-        <div className="bg-muted/30 space-y-3 rounded-lg border p-4">
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
           <div className="flex items-center gap-2">
-            <ListOrdered className="text-primary h-4 w-4" />
+            <ListOrdered className="h-4 w-4 text-primary" />
             <span className="text-sm font-medium">채번 규칙</span>
           </div>
 
           <div>
-            <p className="text-muted-foreground mb-1.5 text-xs">적용할 메뉴</p>
+            <p className="mb-1.5 text-xs text-muted-foreground">적용할 메뉴</p>
             {menuObjid && selectedMenuObjid === menuObjid ? (
-              <div className="bg-background rounded-md border p-2">
+              <div className="rounded-md border bg-background p-2">
-                <p className="text-muted-foreground text-xs">현재 화면 메뉴 사용 중</p>
+                <p className="text-xs text-muted-foreground">현재 화면 메뉴 사용 중</p>
                 <div className="mt-1 flex items-center justify-between">
                   <p className="text-sm font-medium">
-                    {parentMenus.find((m: any) => m.objid === menuObjid)?.menu_name_kor ||
+                    {parentMenus.find((m: any) => m.objid === menuObjid)?.menu_name_kor
-                      parentMenus.find((m: any) => m.objid === menuObjid)?.translated_name ||
+                      || parentMenus.find((m: any) => m.objid === menuObjid)?.translated_name
-                      `메뉴 #${menuObjid}`}
+                      || `메뉴 #${menuObjid}`}
                   </p>
                   <button
                     type="button"
                     onClick={() => setSelectedMenuObjid(undefined)}
-                    className="text-muted-foreground hover:text-foreground text-[10px]"
+                    className="text-[10px] text-muted-foreground hover:text-foreground"
                   >
                     변경
                   </button>
                 </div>
               </div>
             ) : loadingMenus ? (
-              <div className="text-muted-foreground flex items-center gap-2 py-1 text-xs">
+              <div className="text-muted-foreground flex items-center gap-2 text-xs py-1">
                 <Loader2 className="h-3 w-3 animate-spin" />
                 메뉴 목록 로딩 중...
               </div>
@@ -239,9 +216,9 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
 
           {selectedMenuObjid && (
             <div>
-              <p className="text-muted-foreground mb-1.5 text-xs">채번 규칙</p>
+              <p className="mb-1.5 text-xs text-muted-foreground">채번 규칙</p>
               {loadingRules ? (
-                <div className="text-muted-foreground flex items-center gap-2 py-1 text-xs">
+                <div className="text-muted-foreground flex items-center gap-2 text-xs py-1">
                   <Loader2 className="h-3 w-3 animate-spin" />
                   채번 규칙 로딩 중...
                 </div>
@@ -266,14 +243,13 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
                   <SelectContent>
                     {numberingRules.map((rule) => (
                       <SelectItem key={rule.ruleId} value={String(rule.ruleId)}>
-                        {rule.ruleName} ({rule.separator || "-"}
+                        {rule.ruleName} ({rule.separator || "-"}{"{번호}"})
-                        {"{번호}"})
                       </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
               ) : (
-                <p className="text-muted-foreground text-xs">선택한 메뉴에 등록된 채번 규칙이 없어요</p>
+                <p className="text-xs text-muted-foreground">선택한 메뉴에 등록된 채번 규칙이 없어요</p>
               )}
             </div>
           )}
@@ -281,7 +257,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
           <div className="flex items-center justify-between py-1">
             <div>
               <p className="text-sm">읽기전용</p>
-              <p className="text-muted-foreground text-[11px]">채번 필드는 자동 생성되므로 읽기전용을 권장해요</p>
+              <p className="text-[11px] text-muted-foreground">채번 필드는 자동 생성되므로 읽기전용을 권장해요</p>
             </div>
             <Switch
               checked={config.readonly !== false}
@@ -295,10 +271,10 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
       {inputType !== "numbering" && (
         <>
           {/* 기본 설정 영역 */}
-          <div className="bg-muted/30 space-y-3 rounded-lg border p-4">
+          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
             {/* 안내 텍스트 (placeholder) */}
             <div className="flex items-center justify-between py-1">
-              <span className="text-muted-foreground text-xs">안내 텍스트</span>
+              <span className="text-xs text-muted-foreground">안내 텍스트</span>
               <Input
                 value={config.placeholder || ""}
                 onChange={(e) => updateConfig("placeholder", e.target.value)}
@@ -310,7 +286,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
             {/* 입력 형식 - 텍스트 타입 전용 */}
             {(inputType === "text" || !config.inputType) && (
               <div className="flex items-center justify-between py-1">
-                <span className="text-muted-foreground text-xs">입력 형식</span>
+                <span className="text-xs text-muted-foreground">입력 형식</span>
                 <Select value={config.format || "none"} onValueChange={(value) => updateConfig("format", value)}>
                   <SelectTrigger className="h-7 w-[160px] text-xs">
                     <SelectValue placeholder="형식 선택" />
@@ -330,8 +306,8 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
             {/* 입력 마스크 */}
             <div className="flex items-center justify-between py-1">
               <div>
-                <span className="text-muted-foreground text-xs">입력 마스크</span>
+                <span className="text-xs text-muted-foreground">입력 마스크</span>
-                <p className="text-muted-foreground mt-0.5 text-[10px]"># = 숫자, A = 문자, * = 모두</p>
+                <p className="text-[10px] text-muted-foreground mt-0.5"># = 숫자, A = 문자, * = 모두</p>
               </div>
               <Input
                 value={config.mask || ""}
@@ -344,10 +320,10 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
             {/* 숫자/슬라이더: 범위 설정 */}
             {(inputType === "number" || inputType === "slider") && (
               <div className="space-y-2 pt-1">
-                <p className="text-muted-foreground text-xs">값 범위</p>
+                <p className="text-xs text-muted-foreground">값 범위</p>
                 <div className="flex gap-2">
                   <div className="flex-1">
-                    <Label className="text-muted-foreground text-[10px]">최소값</Label>
+                    <Label className="text-[10px] text-muted-foreground">최소값</Label>
                     <Input
                       type="number"
                       value={config.min ?? ""}
@@ -357,7 +333,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
                     />
                   </div>
                   <div className="flex-1">
-                    <Label className="text-muted-foreground text-[10px]">최대값</Label>
+                    <Label className="text-[10px] text-muted-foreground">최대값</Label>
                     <Input
                       type="number"
                       value={config.max ?? ""}
@@ -367,7 +343,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
                     />
                   </div>
                   <div className="flex-1">
-                    <Label className="text-muted-foreground text-[10px]">단계</Label>
+                    <Label className="text-[10px] text-muted-foreground">단계</Label>
                     <Input
                       type="number"
                       value={config.step ?? ""}
@@ -383,7 +359,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
             {/* 여러 줄 텍스트: 줄 수 */}
             {inputType === "textarea" && (
               <div className="flex items-center justify-between py-1">
-                <span className="text-muted-foreground text-xs">줄 수</span>
+                <span className="text-xs text-muted-foreground">줄 수</span>
                 <Input
                   type="number"
                   value={config.rows || 3}
@@ -401,27 +377,27 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
             <CollapsibleTrigger asChild>
               <button
                 type="button"
-                className="bg-muted/30 hover:bg-muted/50 flex w-full items-center justify-between rounded-lg border px-4 py-2.5 text-left transition-colors"
+                className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
               >
                 <div className="flex items-center gap-2">
-                  <Settings className="text-muted-foreground h-4 w-4" />
+                  <Settings className="h-4 w-4 text-muted-foreground" />
                   <span className="text-sm font-medium">고급 설정</span>
                 </div>
                 <ChevronDown
                   className={cn(
-                    "text-muted-foreground h-4 w-4 transition-transform duration-200",
+                    "h-4 w-4 text-muted-foreground transition-transform duration-200",
-                    advancedOpen && "rotate-180",
+                    advancedOpen && "rotate-180"
                   )}
                 />
               </button>
             </CollapsibleTrigger>
             <CollapsibleContent>
-              <div className="space-y-3 rounded-b-lg border border-t-0 p-4">
+              <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
                 {/* 자동 생성 토글 */}
                 <div className="flex items-center justify-between py-1">
                   <div>
                     <p className="text-sm">자동 생성</p>
-                    <p className="text-muted-foreground text-[11px]">값이 자동으로 채워져요</p>
+                    <p className="text-[11px] text-muted-foreground">값이 자동으로 채워져요</p>
                   </div>
                   <Switch
                     checked={config.autoGeneration?.enabled || false}
@@ -436,10 +412,10 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
                 </div>
 
                 {config.autoGeneration?.enabled && (
-                  <div className="border-primary/20 ml-1 space-y-3 border-l-2 pl-3">
+                  <div className="space-y-3 ml-1 border-l-2 border-primary/20 pl-3">
                     {/* 자동 생성 타입 */}
                     <div>
-                      <p className="text-muted-foreground mb-1.5 text-xs">생성 방식</p>
+                      <p className="mb-1.5 text-xs text-muted-foreground">생성 방식</p>
                       <Select
                         value={config.autoGeneration?.type || "none"}
                         onValueChange={(value: AutoGenerationType) => {
@@ -469,7 +445,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
                     </div>
 
                     {config.autoGeneration?.type && config.autoGeneration.type !== "none" && (
-                      <p className="text-muted-foreground text-[11px]">
+                      <p className="text-[11px] text-muted-foreground">
                         {AutoGenerationUtils.getTypeDescription(config.autoGeneration.type)}
                       </p>
                     )}
@@ -478,7 +454,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
                     {config.autoGeneration?.type === "numbering_rule" && (
                       <div className="space-y-3">
                         <div>
-                          <p className="text-muted-foreground mb-1.5 text-xs">
+                          <p className="mb-1.5 text-xs text-muted-foreground">
                             대상 메뉴 <span className="text-destructive">*</span>
                           </p>
                           <Select
@@ -514,11 +490,11 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
 
                         {selectedMenuObjid ? (
                           <div>
-                            <p className="text-muted-foreground mb-1.5 text-xs">
+                            <p className="mb-1.5 text-xs text-muted-foreground">
                               채번 규칙 <span className="text-destructive">*</span>
                             </p>
                             {loadingRules ? (
-                              <div className="text-muted-foreground flex items-center gap-2 text-xs">
+                              <div className="flex items-center gap-2 text-xs text-muted-foreground">
                                 <Loader2 className="h-3 w-3 animate-spin" />
                                 규칙 로딩 중...
                               </div>
@@ -568,7 +544,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
                         <div className="space-y-3">
                           {["random_string", "random_number"].includes(config.autoGeneration.type) && (
                             <div className="flex items-center justify-between py-1">
-                              <span className="text-muted-foreground text-xs">길이</span>
+                              <span className="text-xs text-muted-foreground">길이</span>
                               <Input
                                 type="number"
                                 min="1"
@@ -589,7 +565,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
                           )}
 
                           <div className="flex items-center justify-between py-1">
-                            <span className="text-muted-foreground text-xs">접두사</span>
+                            <span className="text-xs text-muted-foreground">접두사</span>
                             <Input
                               value={config.autoGeneration?.options?.prefix || ""}
                               onChange={(e) => {
@@ -607,7 +583,7 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
                           </div>
 
                           <div className="flex items-center justify-between py-1">
-                            <span className="text-muted-foreground text-xs">접미사</span>
+                            <span className="text-xs text-muted-foreground">접미사</span>
                             <Input
                               value={config.autoGeneration?.options?.suffix || ""}
                               onChange={(e) => {
@@ -624,8 +600,8 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
                           </div>
 
                           <div>
-                            <span className="text-muted-foreground text-xs">미리보기</span>
+                            <span className="text-xs text-muted-foreground">미리보기</span>
-                            <div className="bg-muted mt-1 rounded-md border p-2 font-mono text-xs">
+                            <div className="mt-1 rounded-md border bg-muted p-2 text-xs font-mono">
                               {AutoGenerationUtils.generatePreviewValue(config.autoGeneration)}
                             </div>
                           </div>
@@ -668,7 +644,10 @@ function DataBindingSection({
   const tableListComponents = React.useMemo(() => {
     return allComponents.filter((comp) => {
       const type =
-        comp.componentType || comp.widgetType || comp.componentConfig?.type || (comp.url && comp.url.split("/").pop());
+        comp.componentType ||
+        comp.widgetType ||
+        comp.componentConfig?.type ||
+        (comp.url && comp.url.split("/").pop());
       return type === "v2-table-list";
     });
   }, [allComponents]);
@@ -681,7 +660,11 @@ function DataBindingSection({
 
   const selectedTableName = React.useMemo(() => {
     if (!selectedTableComponent) return null;
-    return selectedTableComponent.componentConfig?.selectedTable || selectedTableComponent.selectedTable || null;
+    return (
+      selectedTableComponent.componentConfig?.selectedTable ||
+      selectedTableComponent.selectedTable ||
+      null
+    );
   }, [selectedTableComponent]);
 
   // 선택된 테이블의 컬럼 목록 로드
@@ -742,7 +725,9 @@ function DataBindingSection({
 
       {config.dataBinding && (
         <div className="space-y-2 rounded border p-2">
-          <p className="text-muted-foreground text-[10px]">테이블에서 행 선택 시 해당 컬럼 값이 자동으로 채워집니다</p>
+          <p className="text-[10px] text-muted-foreground">
+            테이블에서 행 선택 시 해당 컬럼 값이 자동으로 채워집니다
+          </p>
 
           {/* 소스 테이블 컴포넌트 선택 */}
           <div className="space-y-1">
@@ -765,7 +750,8 @@ function DataBindingSection({
                 </SelectTrigger>
                 <SelectContent>
                   {tableListComponents.map((comp) => {
-                    const tblName = comp.componentConfig?.selectedTable || comp.selectedTable || "";
+                    const tblName =
+                      comp.componentConfig?.selectedTable || comp.selectedTable || "";
                     const label = comp.componentConfig?.label || comp.label || comp.id;
                     return (
                       <SelectItem key={comp.id} value={comp.id}>
@@ -783,7 +769,7 @@ function DataBindingSection({
             <div className="space-y-1">
               <Label className="text-xs font-medium">가져올 컬럼</Label>
               {loadingColumns ? (
-                <p className="text-muted-foreground text-[10px]">컬럼 로딩 중...</p>
+                <p className="text-[10px] text-muted-foreground">컬럼 로딩 중...</p>
               ) : tableColumns.length === 0 ? (
                 <>
                   <Input
@@ -797,7 +783,7 @@ function DataBindingSection({
                     placeholder="컬럼명 직접 입력"
                     className="h-7 text-xs"
                   />
-                  <p className="text-muted-foreground text-[10px]">컬럼 정보를 불러올 수 없어 직접 입력</p>
+                  <p className="text-[10px] text-muted-foreground">컬럼 정보를 불러올 수 없어 직접 입력</p>
                 </>
               ) : (
                 <Select