범용 폼 모달 사전필터 기능 수정

backend-node/src/controllers/entitySearchController.ts

@@ -107,14 +107,88 @@ export async function searchEntity(req: AuthenticatedRequest, res: Response) {
     }
 
     // 추가 필터 조건 (존재하는 컬럼만)
+    // 지원 연산자: =, !=, >, <, >=, <=, in, notIn, like
+    // 특수 키 형식: column__operator (예: division__in, name__like)
     const additionalFilter = JSON.parse(filterCondition as string);
     for (const [key, value] of Object.entries(additionalFilter)) {
-      if (existingColumns.has(key)) {
+      // 특수 키 형식 파싱: column__operator
-        whereConditions.push(`${key} = $${paramIndex}`);
+      let columnName = key;
-        params.push(value);
+      let operator = "=";
-        paramIndex++;
+      
-      } else {
+      if (key.includes("__")) {
-        logger.warn("엔티티 검색: 필터 조건에 존재하지 않는 컬럼 제외", { tableName, key });
+        const parts = key.split("__");
+        columnName = parts[0];
+        operator = parts[1] || "=";
+      }
+      
+      if (!existingColumns.has(columnName)) {
+        logger.warn("엔티티 검색: 필터 조건에 존재하지 않는 컬럼 제외", { tableName, key, columnName });
+        continue;
+      }
+      
+      // 연산자별 WHERE 조건 생성
+      switch (operator) {
+        case "=":
+          whereConditions.push(`"${columnName}" = $${paramIndex}`);
+          params.push(value);
+          paramIndex++;
+          break;
+        case "!=":
+          whereConditions.push(`"${columnName}" != $${paramIndex}`);
+          params.push(value);
+          paramIndex++;
+          break;
+        case ">":
+          whereConditions.push(`"${columnName}" > $${paramIndex}`);
+          params.push(value);
+          paramIndex++;
+          break;
+        case "<":
+          whereConditions.push(`"${columnName}" < $${paramIndex}`);
+          params.push(value);
+          paramIndex++;
+          break;
+        case ">=":
+          whereConditions.push(`"${columnName}" >= $${paramIndex}`);
+          params.push(value);
+          paramIndex++;
+          break;
+        case "<=":
+          whereConditions.push(`"${columnName}" <= $${paramIndex}`);
+          params.push(value);
+          paramIndex++;
+          break;
+        case "in":
+          // IN 연산자: 값이 배열이거나 쉼표로 구분된 문자열
+          const inValues = Array.isArray(value) ? value : String(value).split(",").map(v => v.trim());
+          if (inValues.length > 0) {
+            const placeholders = inValues.map((_, i) => `$${paramIndex + i}`).join(", ");
+            whereConditions.push(`"${columnName}" IN (${placeholders})`);
+            params.push(...inValues);
+            paramIndex += inValues.length;
+          }
+          break;
+        case "notIn":
+          // NOT IN 연산자
+          const notInValues = Array.isArray(value) ? value : String(value).split(",").map(v => v.trim());
+          if (notInValues.length > 0) {
+            const placeholders = notInValues.map((_, i) => `$${paramIndex + i}`).join(", ");
+            whereConditions.push(`"${columnName}" NOT IN (${placeholders})`);
+            params.push(...notInValues);
+            paramIndex += notInValues.length;
+          }
+          break;
+        case "like":
+          whereConditions.push(`"${columnName}"::text ILIKE $${paramIndex}`);
+          params.push(`%${value}%`);
+          paramIndex++;
+          break;
+        default:
+          // 알 수 없는 연산자는 등호로 처리
+          whereConditions.push(`"${columnName}" = $${paramIndex}`);
+          params.push(value);
+          paramIndex++;
+          break;
       }
     }
 

frontend/lib/registry/components/entity-search-input/useEntitySearch.ts

@@ -53,6 +53,12 @@ export function useEntitySearch({
           limit: pagination.limit.toString(),
         });
 
+        console.log("[useEntitySearch] 검색 실행:", {
+          tableName,
+          filterCondition: filterConditionRef.current,
+          searchText: text,
+        });
+
         const response = await apiClient.get<EntitySearchResponse>(
           `/entity-search/${tableName}?${params.toString()}`
         );

frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx

@@ -32,6 +32,7 @@ export function ItemSelectionModal({
   onSelect,
   columnLabels = {},
   modalFilters = [],
+  categoryColumns = [],
 }: ItemSelectionModalProps) {
   const [localSearchText, setLocalSearchText] = useState("");
   const [selectedItems, setSelectedItems] = useState<any[]>([]);
@@ -41,6 +42,9 @@ export function ItemSelectionModal({
   
   // 카테고리 옵션 상태 (categoryRef별로 로드된 옵션)
   const [categoryOptions, setCategoryOptions] = useState<Record<string, { value: string; label: string }[]>>({});
+  
+  // 카테고리 코드 → 라벨 매핑 (테이블 데이터 표시용)
+  const [categoryLabelMap, setCategoryLabelMap] = useState<Record<string, string>>({});
 
   // 모달 필터 값과 기본 filterCondition을 합친 최종 필터 조건
   const combinedFilterCondition = useMemo(() => {
@@ -152,6 +156,54 @@ export function ItemSelectionModal({
     }
   }, [modalFilterValues]);
   
+  // 검색 결과가 변경되면 카테고리 값들의 라벨 조회
+  useEffect(() => {
+    const loadCategoryLabels = async () => {
+      if (!open || categoryColumns.length === 0 || results.length === 0) {
+        return;
+      }
+      
+      // 현재 결과에서 카테고리 컬럼의 모든 고유한 값 수집
+      // 쉼표로 구분된 다중 값도 개별적으로 수집
+      const allCodes = new Set<string>();
+      for (const row of results) {
+        for (const col of categoryColumns) {
+          const val = row[col];
+          if (val && typeof val === "string") {
+            // 쉼표로 구분된 다중 값 처리
+            const codes = val.split(",").map((c) => c.trim()).filter(Boolean);
+            for (const code of codes) {
+              if (!categoryLabelMap[code]) {
+                allCodes.add(code);
+              }
+            }
+          }
+        }
+      }
+      
+      if (allCodes.size === 0) {
+        return;
+      }
+      
+      try {
+        const response = await apiClient.post("/table-categories/labels-by-codes", {
+          valueCodes: Array.from(allCodes),
+        });
+        
+        if (response.data?.success && response.data.data) {
+          setCategoryLabelMap((prev) => ({
+            ...prev,
+            ...response.data.data,
+          }));
+        }
+      } catch (error) {
+        console.error("카테고리 라벨 조회 실패:", error);
+      }
+    };
+    
+    loadCategoryLabels();
+  }, [open, results, categoryColumns]);
+  
   // 모달 필터 값 변경 핸들러
   const handleModalFilterChange = (column: string, value: any) => {
     setModalFilterValues((prev) => ({
@@ -450,11 +502,25 @@ export function ItemSelectionModal({
                             </div>
                           </td>
                         )}
-                        {validColumns.map((col) => (
+                        {validColumns.map((col) => {
-                          <td key={col} className="px-4 py-2">
+                          const rawValue = item[col];
-                            {item[col] || "-"}
+                          // 카테고리 컬럼이면 라벨로 변환
-                          </td>
+                          const isCategory = categoryColumns.includes(col);
-                        ))}
+                          let displayValue = rawValue;
+                          
+                          if (isCategory && rawValue && typeof rawValue === "string") {
+                            // 쉼표로 구분된 다중 값 처리
+                            const codes = rawValue.split(",").map((c) => c.trim()).filter(Boolean);
+                            const labels = codes.map((code) => categoryLabelMap[code] || code);
+                            displayValue = labels.join(", ");
+                          }
+                          
+                          return (
+                            <td key={col} className="px-4 py-2">
+                              {displayValue || "-"}
+                            </td>
+                          );
+                        })}
                       </tr>
                     );
                   })

frontend/lib/registry/components/modal-repeater-table/types.ts

@@ -202,4 +202,7 @@ export interface ItemSelectionModalProps {
   
   // 모달 내부 필터 (사용자 선택 가능)
   modalFilters?: ModalFilterConfig[];
+  
+  // 카테고리 타입 컬럼 목록 (해당 컬럼은 코드 → 라벨로 변환하여 표시)
+  categoryColumns?: string[];
 }

frontend/lib/registry/components/universal-form-modal/TableSectionRenderer.tsx

@@ -381,6 +381,34 @@ export function TableSectionRenderer({
   const [dynamicOptions, setDynamicOptions] = useState<{ id: string; value: string; label: string }[]>([]);
   const [dynamicOptionsLoading, setDynamicOptionsLoading] = useState(false);
   const dynamicOptionsLoadedRef = React.useRef(false);
+  
+  // 소스 테이블의 카테고리 타입 컬럼 목록
+  const [sourceCategoryColumns, setSourceCategoryColumns] = useState<string[]>([]);
+
+  // 소스 테이블의 카테고리 타입 컬럼 목록 로드
+  useEffect(() => {
+    const loadCategoryColumns = async () => {
+      if (!tableConfig.source.tableName) return;
+      
+      try {
+        const response = await apiClient.get(
+          `/table-categories/${tableConfig.source.tableName}/columns`
+        );
+        
+        if (response.data?.success && Array.isArray(response.data.data)) {
+          const categoryColNames = response.data.data.map(
+            (col: { columnName?: string; column_name?: string }) => 
+              col.columnName || col.column_name || ""
+          ).filter(Boolean);
+          setSourceCategoryColumns(categoryColNames);
+        }
+      } catch (error) {
+        console.error("카테고리 컬럼 목록 조회 실패:", error);
+      }
+    };
+    
+    loadCategoryColumns();
+  }, [tableConfig.source.tableName]);
 
   // 조건부 테이블: 동적 옵션 로드 (optionSource 설정이 있는 경우)
   useEffect(() => {
@@ -1281,16 +1309,25 @@ export function TableSectionRenderer({
   const addRowButtonText = uiConfig?.addRowButtonText || "직접 입력";
 
   // 기본 필터 조건 생성 (사전 필터만 - 모달 필터는 ItemSelectionModal에서 처리)
+  // 연산자별로 특수 키 형식 사용: column__operator (예: division__in)
   const baseFilterCondition: Record<string, any> = useMemo(() => {
     const condition: Record<string, any> = {};
     if (filters?.preFilters) {
       for (const filter of filters.preFilters) {
-        // 간단한 "=" 연산자만 처리 (확장 가능)
+        if (!filter.column || filter.value === undefined || filter.value === "") continue;
-        if (filter.operator === "=") {
+        
+        const operator = filter.operator || "=";
+        
+        if (operator === "=") {
+          // 기본 등호 연산자는 그대로 전달
           condition[filter.column] = filter.value;
+        } else {
+          // 다른 연산자는 특수 키 형식 사용: column__operator
+          condition[`${filter.column}__${operator}`] = filter.value;
         }
       }
     }
+    console.log("[TableSectionRenderer] baseFilterCondition:", condition, "preFilters:", filters?.preFilters);
     return condition;
   }, [filters?.preFilters]);
 
@@ -1892,6 +1929,7 @@ export function TableSectionRenderer({
           onSelect={handleConditionalAddItems}
           columnLabels={columnLabels}
           modalFilters={modalFiltersForModal}
+          categoryColumns={sourceCategoryColumns}
         />
       </div>
     );
@@ -2000,6 +2038,7 @@ export function TableSectionRenderer({
         onSelect={handleAddItems}
         columnLabels={columnLabels}
         modalFilters={modalFiltersForModal}
+        categoryColumns={sourceCategoryColumns}
       />
     </div>
   );

frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx

@@ -9,17 +9,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
-import {
+import { Plus, Trash2, GripVertical, ChevronUp, ChevronDown, Settings, Database, Layout, Table } from "lucide-react";
-  Plus,
-  Trash2,
-  GripVertical,
-  ChevronUp,
-  ChevronDown,
-  Settings,
-  Database,
-  Layout,
-  Table,
-} from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { getNumberingRules } from "@/lib/api/numberingRule";
@@ -31,11 +21,7 @@ import {
   MODAL_SIZE_OPTIONS,
   SECTION_TYPE_OPTIONS,
 } from "./types";
-import {
+import { defaultSectionConfig, defaultTableSectionConfig, generateSectionId } from "./config";
-  defaultSectionConfig,
-  defaultTableSectionConfig,
-  generateSectionId,
-} from "./config";
 
 // 모달 import
 import { FieldDetailSettingsModal } from "./modals/FieldDetailSettingsModal";
@@ -45,22 +31,26 @@ import { TableSectionSettingsModal } from "./modals/TableSectionSettingsModal";
 
 // 도움말 텍스트 컴포넌트
 const HelpText = ({ children }: { children: React.ReactNode }) => (
-  <p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
+  <p className="text-muted-foreground mt-0.5 text-[10px]">{children}</p>
 );
 
 // 부모 화면에서 전달 가능한 필드 타입
 interface AvailableParentField {
-  name: string;           // 필드명 (columnName)
+  name: string; // 필드명 (columnName)
-  label: string;          // 표시 라벨
+  label: string; // 표시 라벨
   sourceComponent?: string; // 출처 컴포넌트 (예: "TableList", "SplitPanelLayout2")
-  sourceTable?: string;   // 출처 테이블명
+  sourceTable?: string; // 출처 테이블명
 }
 
-export function UniversalFormModalConfigPanel({ config, onChange, allComponents = [] }: UniversalFormModalConfigPanelProps) {
+export function UniversalFormModalConfigPanel({
+  config,
+  onChange,
+  allComponents = [],
+}: UniversalFormModalConfigPanelProps) {
   // 테이블 목록
   const [tables, setTables] = useState<{ name: string; label: string }[]>([]);
   const [tableColumns, setTableColumns] = useState<{
-    [tableName: string]: { name: string; type: string; label: string }[];
+    [tableName: string]: { name: string; type: string; label: string; inputType?: string }[];
   }>({});
 
   // 부모 화면에서 전달 가능한 필드 목록
@@ -140,7 +130,7 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
               }
             });
           }
-          
+
           // 좌측 패널 테이블 컬럼도 추출
           const leftTableName = compConfig.leftPanel?.tableName;
           if (leftTableName) {
@@ -152,7 +142,7 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
                   const colName = col.columnName || col.column_name;
                   const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
                   // 중복 방지
-                  if (!fields.some(f => f.name === colName && f.sourceTable === leftTableName)) {
+                  if (!fields.some((f) => f.name === colName && f.sourceTable === leftTableName)) {
                     fields.push({
                       name: colName,
                       label: colLabel,
@@ -179,7 +169,7 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
                 columns.forEach((col: any) => {
                   const colName = col.columnName || col.column_name;
                   const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
-                  if (!fields.some(f => f.name === colName && f.sourceTable === tableName)) {
+                  if (!fields.some((f) => f.name === colName && f.sourceTable === tableName)) {
                     fields.push({
                       name: colName,
                       label: colLabel,
@@ -198,11 +188,11 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
         // 4. 버튼 컴포넌트 - openModalWithData의 fieldMappings/dataMapping에서 소스 컬럼 추출
         if (compType === "button-primary" || compType === "button" || compType === "button-secondary") {
           const action = compConfig.action || {};
-          
+
           // fieldMappings에서 소스 컬럼 추출
           const fieldMappings = action.fieldMappings || [];
           fieldMappings.forEach((mapping: any) => {
-            if (mapping.sourceColumn && !fields.some(f => f.name === mapping.sourceColumn)) {
+            if (mapping.sourceColumn && !fields.some((f) => f.name === mapping.sourceColumn)) {
               fields.push({
                 name: mapping.sourceColumn,
                 label: mapping.sourceColumn,
@@ -211,11 +201,11 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
               });
             }
           });
-          
+
           // dataMapping에서 소스 컬럼 추출
           const dataMapping = action.dataMapping || [];
           dataMapping.forEach((mapping: any) => {
-            if (mapping.sourceColumn && !fields.some(f => f.name === mapping.sourceColumn)) {
+            if (mapping.sourceColumn && !fields.some((f) => f.name === mapping.sourceColumn)) {
               fields.push({
                 name: mapping.sourceColumn,
                 label: mapping.sourceColumn,
@@ -237,7 +227,7 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
             columns.forEach((col: any) => {
               const colName = col.columnName || col.column_name;
               const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
-              if (!fields.some(f => f.name === colName)) {
+              if (!fields.some((f) => f.name === colName)) {
                 fields.push({
                   name: colName,
                   label: colLabel,
@@ -253,8 +243,8 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
       }
 
       // 중복 제거 (같은 name이면 첫 번째만 유지)
-      const uniqueFields = fields.filter((field, index, self) =>
+      const uniqueFields = fields.filter(
-        index === self.findIndex(f => f.name === field.name)
+        (field, index, self) => index === self.findIndex((f) => f.name === field.name),
       );
 
       setAvailableParentFields(uniqueFields);
@@ -276,11 +266,19 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
       const data = response.data?.data;
       if (response.data?.success && Array.isArray(data)) {
         setTables(
-          data.map((t: { tableName?: string; table_name?: string; displayName?: string; tableLabel?: string; table_label?: string }) => ({
+          data.map(
-            name: t.tableName || t.table_name || "",
+            (t: {
-            // displayName 우선, 없으면 tableLabel, 그것도 없으면 테이블명
+              tableName?: string;
-            label: t.displayName || t.tableLabel || t.table_label || "",
+              table_name?: string;
-          })),
+              displayName?: string;
+              tableLabel?: string;
+              table_label?: string;
+            }) => ({
+              name: t.tableName || t.table_name || "",
+              // displayName 우선, 없으면 tableLabel, 그것도 없으면 테이블명
+              label: t.displayName || t.tableLabel || t.table_label || "",
+            }),
+          ),
         );
       }
     } catch (error) {
@@ -308,10 +306,13 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
               displayName?: string;
               columnComment?: string;
               column_comment?: string;
+              inputType?: string;
+              input_type?: string;
             }) => ({
               name: c.columnName || c.column_name || "",
               type: c.dataType || c.data_type || "text",
               label: c.displayName || c.columnComment || c.column_comment || c.columnName || c.column_name || "",
+              inputType: c.inputType || c.input_type || "text",
             }),
           ),
         }));
@@ -359,21 +360,24 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
   );
 
   // 섹션 관리
-  const addSection = useCallback((type: "fields" | "table" = "fields") => {
+  const addSection = useCallback(
-    const newSection: FormSectionConfig = {
+    (type: "fields" | "table" = "fields") => {
-      ...defaultSectionConfig,
+      const newSection: FormSectionConfig = {
-      id: generateSectionId(),
+        ...defaultSectionConfig,
-      title: type === "table" ? `테이블 섹션 ${config.sections.length + 1}` : `섹션 ${config.sections.length + 1}`,
+        id: generateSectionId(),
-      type,
+        title: type === "table" ? `테이블 섹션 ${config.sections.length + 1}` : `섹션 ${config.sections.length + 1}`,
-      fields: type === "fields" ? [] : undefined,
+        type,
-      tableConfig: type === "table" ? { ...defaultTableSectionConfig } : undefined,
+        fields: type === "fields" ? [] : undefined,
-    };
+        tableConfig: type === "table" ? { ...defaultTableSectionConfig } : undefined,
-    onChange({
+      };
-      ...config,
+      onChange({
-      sections: [...config.sections, newSection],
+        ...config,
-    });
+        sections: [...config.sections, newSection],
-  }, [config, onChange]);
+      });
-  
+    },
+    [config, onChange],
+  );
+
   // 섹션 타입 변경
   const changeSectionType = useCallback(
     (sectionId: string, newType: "fields" | "table") => {
@@ -381,7 +385,7 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
         ...config,
         sections: config.sections.map((s) => {
           if (s.id !== sectionId) return s;
-          
+
           if (newType === "table") {
             return {
               ...s,
@@ -400,9 +404,9 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
         }),
       });
     },
-    [config, onChange]
+    [config, onChange],
   );
-  
+
   // 테이블 섹션 설정 모달 열기
   const handleOpenTableSectionSettings = (section: FormSectionConfig) => {
     setSelectedSection(section);
@@ -487,293 +491,310 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
   };
 
   return (
-    <div className="h-full flex flex-col overflow-hidden w-full min-w-0">
+    <div className="flex h-full w-full min-w-0 flex-col overflow-hidden">
-      <div className="flex-1 overflow-y-auto overflow-x-hidden w-full min-w-0">
+      <div className="w-full min-w-0 flex-1 overflow-x-hidden overflow-y-auto">
-        <div className="space-y-4 p-4 w-full min-w-0 max-w-full">
+        <div className="w-full max-w-full min-w-0 space-y-4 p-4">
-        {/* 모달 기본 설정 */}
+          {/* 모달 기본 설정 */}
-        <Accordion type="single" collapsible defaultValue="modal-settings" className="w-full min-w-0">
+          <Accordion type="single" collapsible defaultValue="modal-settings" className="w-full min-w-0">
-          <AccordionItem value="modal-settings" className="border rounded-lg w-full min-w-0">
+            <AccordionItem value="modal-settings" className="w-full min-w-0 rounded-lg border">
-            <AccordionTrigger className="px-4 py-3 text-sm font-medium hover:no-underline w-full min-w-0">
+              <AccordionTrigger className="w-full min-w-0 px-4 py-3 text-sm font-medium hover:no-underline">
-              <div className="flex items-center gap-2 w-full min-w-0">
+                <div className="flex w-full min-w-0 items-center gap-2">
-                <Settings className="h-4 w-4 shrink-0" />
+                  <Settings className="h-4 w-4 shrink-0" />
-                <span className="truncate">모달 기본 설정</span>
+                  <span className="truncate">모달 기본 설정</span>
-              </div>
-            </AccordionTrigger>
-            <AccordionContent className="px-4 pb-4 space-y-4 w-full min-w-0">
-              <div className="w-full min-w-0">
-                <Label className="text-xs font-medium mb-1.5 block">모달 제목</Label>
-                <Input
-                  value={config.modal.title}
-                  onChange={(e) => updateModalConfig({ title: e.target.value })}
-                  className="h-9 text-sm w-full max-w-full"
-                />
-                <HelpText>모달 상단에 표시될 제목입니다</HelpText>
-              </div>
-
-              <div className="w-full min-w-0">
-                <Label className="text-xs font-medium mb-1.5 block">모달 크기</Label>
-                <Select value={config.modal.size} onValueChange={(value: any) => updateModalConfig({ size: value })}>
-                  <SelectTrigger className="h-9 text-sm w-full max-w-full">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {MODAL_SIZE_OPTIONS.map((opt) => (
-                      <SelectItem key={opt.value} value={opt.value}>
-                        {opt.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <HelpText>모달 창의 크기를 선택하세요</HelpText>
-              </div>
-
-              {/* 저장 버튼 표시 설정 */}
-              <div className="w-full min-w-0">
-                <div className="flex items-center gap-2">
-                  <Checkbox
-                    id="show-save-button"
-                    checked={config.modal.showSaveButton !== false}
-                    onCheckedChange={(checked) => updateModalConfig({ showSaveButton: checked === true })}
-                  />
-                  <Label htmlFor="show-save-button" className="text-xs font-medium cursor-pointer">
-                    저장 버튼 표시
-                  </Label>
                 </div>
-                <HelpText>체크 해제 시 모달 하단의 저장 버튼이 숨겨집니다</HelpText>
+              </AccordionTrigger>
-              </div>
+              <AccordionContent className="w-full min-w-0 space-y-4 px-4 pb-4">
-
-              <div className="space-y-3 w-full min-w-0">
                 <div className="w-full min-w-0">
-                  <Label className="text-xs font-medium mb-1.5 block">저장 버튼 텍스트</Label>
+                  <Label className="mb-1.5 block text-xs font-medium">모달 제목</Label>
                   <Input
-                    value={config.modal.saveButtonText || "저장"}
+                    value={config.modal.title}
-                    onChange={(e) => updateModalConfig({ saveButtonText: e.target.value })}
+                    onChange={(e) => updateModalConfig({ title: e.target.value })}
-                    className="h-9 text-sm w-full max-w-full"
+                    className="h-9 w-full max-w-full text-sm"
                   />
+                  <HelpText>모달 상단에 표시될 제목입니다</HelpText>
                 </div>
+
                 <div className="w-full min-w-0">
-                  <Label className="text-xs font-medium mb-1.5 block">취소 버튼 텍스트</Label>
+                  <Label className="mb-1.5 block text-xs font-medium">모달 크기</Label>
-                  <Input
+                  <Select value={config.modal.size} onValueChange={(value: any) => updateModalConfig({ size: value })}>
-                    value={config.modal.cancelButtonText || "취소"}
+                    <SelectTrigger className="h-9 w-full max-w-full text-sm">
-                    onChange={(e) => updateModalConfig({ cancelButtonText: e.target.value })}
+                      <SelectValue />
-                    className="h-9 text-sm w-full max-w-full"
+                    </SelectTrigger>
-                  />
+                    <SelectContent>
+                      {MODAL_SIZE_OPTIONS.map((opt) => (
+                        <SelectItem key={opt.value} value={opt.value}>
+                          {opt.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <HelpText>모달 창의 크기를 선택하세요</HelpText>
                 </div>
-              </div>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
 
-        {/* 저장 설정 */}
+                {/* 저장 버튼 표시 설정 */}
-        <Accordion type="single" collapsible defaultValue="save-settings" className="w-full min-w-0">
+                <div className="w-full min-w-0">
-          <AccordionItem value="save-settings" className="border rounded-lg w-full min-w-0">
+                  <div className="flex items-center gap-2">
-            <AccordionTrigger className="px-4 py-3 text-sm font-medium hover:no-underline w-full min-w-0">
+                    <Checkbox
-              <div className="flex items-center gap-2 w-full min-w-0">
+                      id="show-save-button"
-                <Database className="h-4 w-4 shrink-0" />
+                      checked={config.modal.showSaveButton !== false}
-                <span className="truncate">저장 설정</span>
+                      onCheckedChange={(checked) => updateModalConfig({ showSaveButton: checked === true })}
-              </div>
+                    />
-            </AccordionTrigger>
+                    <Label htmlFor="show-save-button" className="cursor-pointer text-xs font-medium">
-            <AccordionContent className="px-4 pb-4 space-y-4 w-full min-w-0">
+                      저장 버튼 표시
-              <div className="space-y-3 w-full min-w-0">
+                    </Label>
-                <div className="flex-1 min-w-0">
+                  </div>
-                  <Label className="text-xs font-medium mb-1.5 block">저장 테이블</Label>
+                  <HelpText>체크 해제 시 모달 하단의 저장 버튼이 숨겨집니다</HelpText>
-                  <p className="text-sm text-muted-foreground">
-                    {config.saveConfig.tableName || "(미설정)"}
-                  </p>
-                  {config.saveConfig.customApiSave?.enabled && config.saveConfig.customApiSave?.multiTable?.enabled && (
-                    <Badge variant="secondary" className="text-xs px-2 py-0.5 mt-2">
-                      다중 테이블 모드
-                    </Badge>
-                  )}
                 </div>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => setSaveSettingsModalOpen(true)}
-                  className="h-9 text-xs w-full"
-                >
-                  <Settings className="h-4 w-4 mr-2" />
-                  저장 설정 열기
-                </Button>
-              </div>
-              <HelpText>
-                데이터를 저장할 테이블과 방식을 설정합니다.
-                <br />
-                "저장 설정 열기"를 클릭하여 상세 설정을 변경하세요.
-              </HelpText>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
 
-        {/* 섹션 구성 */}
+                <div className="w-full min-w-0 space-y-3">
-        <Accordion type="single" collapsible defaultValue="sections" className="w-full min-w-0">
+                  <div className="w-full min-w-0">
-          <AccordionItem value="sections" className="border rounded-lg w-full min-w-0">
+                    <Label className="mb-1.5 block text-xs font-medium">저장 버튼 텍스트</Label>
-            <AccordionTrigger className="px-4 py-3 text-sm font-medium hover:no-underline w-full min-w-0">
+                    <Input
-              <div className="flex items-center gap-2 w-full min-w-0">
+                      value={config.modal.saveButtonText || "저장"}
-                <Layout className="h-4 w-4 shrink-0" />
+                      onChange={(e) => updateModalConfig({ saveButtonText: e.target.value })}
-                <span className="truncate">섹션 구성</span>
+                      className="h-9 w-full max-w-full text-sm"
-                <Badge variant="secondary" className="text-xs px-2 py-0.5 shrink-0">
+                    />
-                  {config.sections.length}개
+                  </div>
-                </Badge>
+                  <div className="w-full min-w-0">
-              </div>
+                    <Label className="mb-1.5 block text-xs font-medium">취소 버튼 텍스트</Label>
-            </AccordionTrigger>
+                    <Input
-            <AccordionContent className="px-4 pb-4 space-y-4 w-full min-w-0">
+                      value={config.modal.cancelButtonText || "취소"}
-              {/* 섹션 추가 버튼들 */}
+                      onChange={(e) => updateModalConfig({ cancelButtonText: e.target.value })}
-              <div className="flex gap-2 w-full min-w-0">
+                      className="h-9 w-full max-w-full text-sm"
-                <Button size="sm" variant="outline" onClick={() => addSection("fields")} className="h-9 text-xs flex-1 min-w-0">
+                    />
-                  <Plus className="h-4 w-4 mr-1 shrink-0" />
+                  </div>
-                  <span className="truncate">필드 섹션</span>
-                </Button>
-                <Button size="sm" variant="outline" onClick={() => addSection("table")} className="h-9 text-xs flex-1 min-w-0">
-                  <Table className="h-4 w-4 mr-1 shrink-0" />
-                  <span className="truncate">테이블 섹션</span>
-                </Button>
-              </div>
-              <HelpText>
-                필드 섹션: 일반 입력 필드들을 배치합니다.
-                <br />
-                테이블 섹션: 품목 목록 등 반복 테이블 형식 데이터를 관리합니다.
-              </HelpText>
-
-              {config.sections.length === 0 ? (
-                <div className="text-center py-12 border border-dashed rounded-lg w-full bg-muted/20">
-                  <p className="text-sm text-muted-foreground mb-2 font-medium">섹션이 없습니다</p>
-                  <p className="text-xs text-muted-foreground">위 버튼으로 섹션을 추가하세요</p>
                 </div>
-              ) : (
+              </AccordionContent>
-                <div className="space-y-3 w-full min-w-0">
+            </AccordionItem>
-                  {config.sections.map((section, index) => (
+          </Accordion>
-                    <div key={section.id} className="border rounded-lg p-3 bg-card w-full min-w-0 overflow-hidden space-y-3">
+
-                      {/* 헤더: 제목 + 타입 배지 + 삭제 */}
+          {/* 저장 설정 */}
-                      <div className="flex items-start justify-between gap-3 w-full min-w-0">
+          <Accordion type="single" collapsible defaultValue="save-settings" className="w-full min-w-0">
-                        <div className="flex-1 min-w-0">
+            <AccordionItem value="save-settings" className="w-full min-w-0 rounded-lg border">
-                          <div className="flex items-center gap-2 mb-1.5">
+              <AccordionTrigger className="w-full min-w-0 px-4 py-3 text-sm font-medium hover:no-underline">
-                            <span className="text-sm font-medium truncate">{section.title}</span>
+                <div className="flex w-full min-w-0 items-center gap-2">
+                  <Database className="h-4 w-4 shrink-0" />
+                  <span className="truncate">저장 설정</span>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="w-full min-w-0 space-y-4 px-4 pb-4">
+                <div className="w-full min-w-0 space-y-3">
+                  <div className="min-w-0 flex-1">
+                    <Label className="mb-1.5 block text-xs font-medium">저장 테이블</Label>
+                    <p className="text-muted-foreground text-sm">{config.saveConfig.tableName || "(미설정)"}</p>
+                    {config.saveConfig.customApiSave?.enabled &&
+                      config.saveConfig.customApiSave?.multiTable?.enabled && (
+                        <Badge variant="secondary" className="mt-2 px-2 py-0.5 text-xs">
+                          다중 테이블 모드
+                        </Badge>
+                      )}
+                  </div>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => setSaveSettingsModalOpen(true)}
+                    className="h-9 w-full text-xs"
+                  >
+                    <Settings className="mr-2 h-4 w-4" />
+                    저장 설정 열기
+                  </Button>
+                </div>
+                <HelpText>
+                  데이터를 저장할 테이블과 방식을 설정합니다.
+                  <br />
+                  "저장 설정 열기"를 클릭하여 상세 설정을 변경하세요.
+                </HelpText>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+
+          {/* 섹션 구성 */}
+          <Accordion type="single" collapsible defaultValue="sections" className="w-full min-w-0">
+            <AccordionItem value="sections" className="w-full min-w-0 rounded-lg border">
+              <AccordionTrigger className="w-full min-w-0 px-4 py-3 text-sm font-medium hover:no-underline">
+                <div className="flex w-full min-w-0 items-center gap-2">
+                  <Layout className="h-4 w-4 shrink-0" />
+                  <span className="truncate">섹션 구성</span>
+                  <Badge variant="secondary" className="shrink-0 px-2 py-0.5 text-xs">
+                    {config.sections.length}개
+                  </Badge>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="w-full min-w-0 space-y-4 px-4 pb-4">
+                {/* 섹션 추가 버튼들 */}
+                <div className="flex w-full min-w-0 gap-2">
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => addSection("fields")}
+                    className="h-9 min-w-0 flex-1 text-xs"
+                  >
+                    <Plus className="mr-1 h-4 w-4 shrink-0" />
+                    <span className="truncate">필드 섹션</span>
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => addSection("table")}
+                    className="h-9 min-w-0 flex-1 text-xs"
+                  >
+                    <Table className="mr-1 h-4 w-4 shrink-0" />
+                    <span className="truncate">테이블 섹션</span>
+                  </Button>
+                </div>
+                <HelpText>
+                  필드 섹션: 일반 입력 필드들을 배치합니다.
+                  <br />
+                  테이블 섹션: 품목 목록 등 반복 테이블 형식 데이터를 관리합니다.
+                </HelpText>
+
+                {config.sections.length === 0 ? (
+                  <div className="bg-muted/20 w-full rounded-lg border border-dashed py-12 text-center">
+                    <p className="text-muted-foreground mb-2 text-sm font-medium">섹션이 없습니다</p>
+                    <p className="text-muted-foreground text-xs">위 버튼으로 섹션을 추가하세요</p>
+                  </div>
+                ) : (
+                  <div className="w-full min-w-0 space-y-3">
+                    {config.sections.map((section, index) => (
+                      <div
+                        key={section.id}
+                        className="bg-card w-full min-w-0 space-y-3 overflow-hidden rounded-lg border p-3"
+                      >
+                        {/* 헤더: 제목 + 타입 배지 + 삭제 */}
+                        <div className="flex w-full min-w-0 items-start justify-between gap-3">
+                          <div className="min-w-0 flex-1">
+                            <div className="mb-1.5 flex items-center gap-2">
+                              <span className="truncate text-sm font-medium">{section.title}</span>
+                              {section.type === "table" ? (
+                                <Badge
+                                  variant="outline"
+                                  className="border-purple-200 bg-purple-50 px-1.5 py-0.5 text-xs text-purple-600"
+                                >
+                                  테이블
+                                </Badge>
+                              ) : section.repeatable ? (
+                                <Badge variant="outline" className="px-1.5 py-0.5 text-xs">
+                                  반복
+                                </Badge>
+                              ) : null}
+                            </div>
                             {section.type === "table" ? (
-                              <Badge variant="outline" className="text-xs px-1.5 py-0.5 text-purple-600 bg-purple-50 border-purple-200">
+                              <Badge variant="secondary" className="px-2 py-0.5 text-xs">
-                                테이블
+                                {section.tableConfig?.source?.tableName || "(소스 미설정)"}
                               </Badge>
-                            ) : section.repeatable ? (
+                            ) : (
-                              <Badge variant="outline" className="text-xs px-1.5 py-0.5">
+                              <Badge variant="secondary" className="px-2 py-0.5 text-xs">
-                                반복
+                                {(section.fields || []).length}개 필드
                               </Badge>
-                            ) : null}
+                            )}
                           </div>
-                          {section.type === "table" ? (
-                            <Badge variant="secondary" className="text-xs px-2 py-0.5">
-                              {section.tableConfig?.source?.tableName || "(소스 미설정)"}
-                            </Badge>
-                          ) : (
-                            <Badge variant="secondary" className="text-xs px-2 py-0.5">
-                              {(section.fields || []).length}개 필드
-                            </Badge>
-                          )}
-                        </div>
-                        
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          onClick={() => removeSection(section.id)}
-                          className="h-7 w-7 p-0 text-destructive hover:text-destructive shrink-0"
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
 
-                      {/* 순서 조정 버튼 */}
+                          <Button
-                      <div className="flex items-center gap-2">
+                            size="sm"
-                        <GripVertical className="h-4 w-4 text-muted-foreground shrink-0" />
+                            variant="ghost"
-                        <div className="flex gap-1">
+                            onClick={() => removeSection(section.id)}
+                            className="text-destructive hover:text-destructive h-7 w-7 shrink-0 p-0"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+
+                        {/* 순서 조정 버튼 */}
+                        <div className="flex items-center gap-2">
+                          <GripVertical className="text-muted-foreground h-4 w-4 shrink-0" />
+                          <div className="flex gap-1">
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() => moveSectionUp(index)}
+                              disabled={index === 0}
+                              className="h-7 px-2 text-xs"
+                            >
+                              <ChevronUp className="h-3.5 w-3.5" />
+                            </Button>
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() => moveSectionDown(index)}
+                              disabled={index === config.sections.length - 1}
+                              className="h-7 px-2 text-xs"
+                            >
+                              <ChevronDown className="h-3.5 w-3.5" />
+                            </Button>
+                          </div>
+                        </div>
+
+                        {/* 필드 목록 (필드 타입만) */}
+                        {section.type !== "table" && (section.fields || []).length > 0 && (
+                          <div className="flex max-w-full flex-wrap gap-1.5 overflow-hidden pt-1">
+                            {(section.fields || []).slice(0, 4).map((field) => (
+                              <Badge
+                                key={field.id}
+                                variant="outline"
+                                className={cn("shrink-0 px-2 py-0.5 text-xs", getFieldTypeColor(field.fieldType))}
+                              >
+                                {field.label}
+                              </Badge>
+                            ))}
+                            {(section.fields || []).length > 4 && (
+                              <Badge variant="outline" className="shrink-0 px-2 py-0.5 text-xs">
+                                +{(section.fields || []).length - 4}
+                              </Badge>
+                            )}
+                          </div>
+                        )}
+
+                        {/* 테이블 컬럼 목록 (테이블 타입만) */}
+                        {section.type === "table" &&
+                          section.tableConfig?.columns &&
+                          section.tableConfig.columns.length > 0 && (
+                            <div className="flex max-w-full flex-wrap gap-1.5 overflow-hidden pt-1">
+                              {section.tableConfig.columns.slice(0, 4).map((col, idx) => (
+                                <Badge
+                                  key={col.field || `col_${idx}`}
+                                  variant="outline"
+                                  className="shrink-0 border-purple-200 bg-purple-50 px-2 py-0.5 text-xs text-purple-600"
+                                >
+                                  {col.label || col.field || `컬럼 ${idx + 1}`}
+                                </Badge>
+                              ))}
+                              {section.tableConfig.columns.length > 4 && (
+                                <Badge variant="outline" className="shrink-0 px-2 py-0.5 text-xs">
+                                  +{section.tableConfig.columns.length - 4}
+                                </Badge>
+                              )}
+                            </div>
+                          )}
+
+                        {/* 설정 버튼 (타입에 따라 다름) */}
+                        {section.type === "table" ? (
                           <Button
                             size="sm"
                             variant="outline"
-                            onClick={() => moveSectionUp(index)}
+                            onClick={() => handleOpenTableSectionSettings(section)}
-                            disabled={index === 0}
+                            className="h-9 w-full text-xs"
-                            className="h-7 px-2 text-xs"
                           >
-                            <ChevronUp className="h-3.5 w-3.5" />
+                            <Table className="mr-2 h-4 w-4" />
+                            테이블 설정
                           </Button>
+                        ) : (
                           <Button
                             size="sm"
                             variant="outline"
-                            onClick={() => moveSectionDown(index)}
+                            onClick={() => handleOpenSectionLayout(section)}
-                            disabled={index === config.sections.length - 1}
+                            className="h-9 w-full text-xs"
-                            className="h-7 px-2 text-xs"
                           >
-                            <ChevronDown className="h-3.5 w-3.5" />
+                            <Layout className="mr-2 h-4 w-4" />
+                            레이아웃 설정
                           </Button>
-                        </div>
+                        )}
                       </div>
-
+                    ))}
-                      {/* 필드 목록 (필드 타입만) */}
+                  </div>
-                      {section.type !== "table" && (section.fields || []).length > 0 && (
+                )}
-                        <div className="flex flex-wrap gap-1.5 max-w-full overflow-hidden pt-1">
+              </AccordionContent>
-                          {(section.fields || []).slice(0, 4).map((field) => (
+            </AccordionItem>
-                            <Badge
+          </Accordion>
-                              key={field.id}
-                              variant="outline"
-                              className={cn("text-xs px-2 py-0.5 shrink-0", getFieldTypeColor(field.fieldType))}
-                            >
-                              {field.label}
-                            </Badge>
-                          ))}
-                          {(section.fields || []).length > 4 && (
-                            <Badge variant="outline" className="text-xs px-2 py-0.5 shrink-0">
-                              +{(section.fields || []).length - 4}
-                            </Badge>
-                          )}
-                        </div>
-                      )}
-                      
-                      {/* 테이블 컬럼 목록 (테이블 타입만) */}
-                      {section.type === "table" && section.tableConfig?.columns && section.tableConfig.columns.length > 0 && (
-                        <div className="flex flex-wrap gap-1.5 max-w-full overflow-hidden pt-1">
-                          {section.tableConfig.columns.slice(0, 4).map((col, idx) => (
-                            <Badge
-                              key={col.field || `col_${idx}`}
-                              variant="outline"
-                              className="text-xs px-2 py-0.5 shrink-0 text-purple-600 bg-purple-50 border-purple-200"
-                            >
-                              {col.label || col.field || `컬럼 ${idx + 1}`}
-                            </Badge>
-                          ))}
-                          {section.tableConfig.columns.length > 4 && (
-                            <Badge variant="outline" className="text-xs px-2 py-0.5 shrink-0">
-                              +{section.tableConfig.columns.length - 4}
-                            </Badge>
-                          )}
-                        </div>
-                      )}
-
-                      {/* 설정 버튼 (타입에 따라 다름) */}
-                      {section.type === "table" ? (
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          onClick={() => handleOpenTableSectionSettings(section)}
-                          className="h-9 text-xs w-full"
-                        >
-                          <Table className="h-4 w-4 mr-2" />
-                          테이블 설정
-                        </Button>
-                      ) : (
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          onClick={() => handleOpenSectionLayout(section)}
-                          className="h-9 text-xs w-full"
-                        >
-                          <Layout className="h-4 w-4 mr-2" />
-                          레이아웃 설정
-                        </Button>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
         </div>
       </div>
 
@@ -813,11 +834,13 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
             setFieldDetailModalOpen(true);
           }}
           tableName={config.saveConfig.tableName}
-          tableColumns={tableColumns[config.saveConfig.tableName || ""]?.map(col => ({
+          tableColumns={
-            name: col.name,
+            tableColumns[config.saveConfig.tableName || ""]?.map((col) => ({
-            type: col.type,
+              name: col.name,
-            label: col.label || col.name
+              type: col.type,
-          })) || []}
+              label: col.label || col.name,
+            })) || []
+          }
         />
       )}
 
@@ -845,15 +868,13 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
                 fields: group.fields.map((f) => (f.id === updatedField.id ? updatedField : f)),
               })),
             };
-            
+
             // config 업데이트
             onChange({
               ...config,
-              sections: config.sections.map((s) =>
+              sections: config.sections.map((s) => (s.id === selectedSection.id ? updatedSection : s)),
-                s.id === selectedSection.id ? updatedSection : s
-              ),
             });
-            
+
             // selectedSection과 selectedField 상태도 업데이트 (다음에 다시 열었을 때 최신 값 반영)
             setSelectedSection(updatedSection);
             setSelectedField(updatedField as FormFieldConfig);
@@ -881,29 +902,28 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
               ...selectedSection,
               ...updates,
             };
-            
+
             // config 업데이트
             onChange({
               ...config,
-              sections: config.sections.map((s) =>
+              sections: config.sections.map((s) => (s.id === selectedSection.id ? updatedSection : s)),
-                s.id === selectedSection.id ? updatedSection : s
-              ),
             });
-            
+
             setSelectedSection(updatedSection);
             setTableSectionSettingsModalOpen(false);
           }}
-          tables={tables.map(t => ({ table_name: t.name, comment: t.label }))}
+          tables={tables.map((t) => ({ table_name: t.name, comment: t.label }))}
           tableColumns={Object.fromEntries(
             Object.entries(tableColumns).map(([tableName, cols]) => [
               tableName,
-              cols.map(c => ({
+              cols.map((c) => ({
                 column_name: c.name,
                 data_type: c.type,
                 is_nullable: "YES",
                 comment: c.label,
+                input_type: c.inputType || "text",
               })),
-            ])
+            ]),
           )}
           onLoadTableColumns={loadTableColumns}
           allSections={config.sections as FormSectionConfig[]}

frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect, useMemo, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -15,6 +15,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Plus, Trash2, GripVertical, ChevronUp, ChevronDown, Settings, Check, ChevronsUpDown, Filter, Table as TableIcon, Search } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
 
 // 타입 import
 import {
@@ -2415,7 +2416,7 @@ interface TableSectionSettingsModalProps {
   section: FormSectionConfig;
   onSave: (updates: Partial<FormSectionConfig>) => void;
   tables: { table_name: string; comment?: string }[];
-  tableColumns: Record<string, { column_name: string; data_type: string; is_nullable: string; comment?: string }[]>;
+  tableColumns: Record<string, { column_name: string; data_type: string; is_nullable: string; comment?: string; input_type?: string }[]>;
   onLoadTableColumns: (tableName: string) => void;
   // 카테고리 목록 (table_column_category_values에서 가져옴)
   categoryList?: { tableName: string; columnName: string; displayName?: string }[];
@@ -2452,6 +2453,11 @@ export function TableSectionSettingsModal({
   
   // 활성 탭
   const [activeTab, setActiveTab] = useState("source");
+  
+  // 사전 필터 카테고리 옵션 캐시 (컬럼명 -> 옵션 배열)
+  const [preFilterCategoryOptions, setPreFilterCategoryOptions] = useState<
+    Record<string, { value: string; label: string }[]>
+  >({});
 
   // open이 변경될 때마다 데이터 동기화
   useEffect(() => {
@@ -2513,6 +2519,47 @@ export function TableSectionSettingsModal({
     return tableColumns[tableConfig.source.tableName] || [];
   }, [tableColumns, tableConfig.source.tableName]);
 
+  // 카테고리 옵션 로드 함수
+  const loadCategoryOptions = useCallback(async (columnName: string) => {
+    if (!tableConfig.source.tableName || !columnName) return;
+    
+    // 이미 로드된 경우 스킵
+    if (preFilterCategoryOptions[columnName]) return;
+    
+    try {
+      const response = await apiClient.get(
+        `/table-categories/${tableConfig.source.tableName}/${columnName}/values`
+      );
+      if (response.data?.success && response.data?.data) {
+        const options = response.data.data.map((item: any) => ({
+          // value는 DB에 저장된 실제 값(valueCode)을 사용해야 필터링이 정상 작동
+          value: item.valueCode || item.value_code || item.valueLabel || item.value_label || "",
+          // label은 사용자에게 보여질 라벨
+          label: item.valueLabel || item.value_label || item.valueCode || item.value_code || "",
+        }));
+        setPreFilterCategoryOptions((prev) => ({
+          ...prev,
+          [columnName]: options,
+        }));
+      }
+    } catch (error) {
+      console.error(`카테고리 옵션 로드 실패 (${columnName}):`, error);
+    }
+  }, [tableConfig.source.tableName, preFilterCategoryOptions]);
+
+  // 사전 필터에서 선택된 카테고리 컬럼들의 옵션 자동 로드
+  useEffect(() => {
+    const preFilters = tableConfig.filters?.preFilters || [];
+    preFilters.forEach((filter) => {
+      if (filter.column) {
+        const col = sourceTableColumns.find((c) => c.column_name === filter.column);
+        if (col && col.input_type === "category") {
+          loadCategoryOptions(filter.column);
+        }
+      }
+    });
+  }, [tableConfig.filters?.preFilters, sourceTableColumns, loadCategoryOptions]);
+
   // 저장 테이블의 컬럼 목록
   const saveTableColumns = useMemo(() => {
     // 저장 테이블이 지정되어 있으면 해당 테이블의 컬럼, 아니면 소스 테이블의 컬럼 사용
@@ -3159,59 +3206,96 @@ export function TableSectionSettingsModal({
                       </Button>
                     </div>
 
-                    {(tableConfig.filters?.preFilters || []).map((filter, index) => (
+                    {(tableConfig.filters?.preFilters || []).map((filter, index) => {
-                      <div key={index} className="flex items-center gap-2 border rounded-lg p-2 bg-card">
+                      // 선택된 컬럼의 정보 조회
-                        <Select
+                      const selectedColumn = filter.column 
-                          value={filter.column || undefined}
+                        ? sourceTableColumns.find((c) => c.column_name === filter.column) 
-                          onValueChange={(value) => updatePreFilter(index, { column: value })}
+                        : null;
-                        >
+                      const isCategory = selectedColumn?.input_type === "category";
-                          <SelectTrigger className="h-8 text-xs w-[150px]">
+                      const categoryOptions = isCategory && filter.column 
-                            <SelectValue placeholder="컬럼" />
+                        ? preFilterCategoryOptions[filter.column] || [] 
-                          </SelectTrigger>
+                        : [];
-                          <SelectContent>
+                      
-                            {sourceTableColumns
+                      return (
-                              .filter((col) => col.column_name)
+                        <div key={index} className="flex items-center gap-2 border rounded-lg p-2 bg-card">
-                              .map((col) => (
+                          <Select
-                                <SelectItem key={col.column_name} value={col.column_name}>
+                            value={filter.column || undefined}
-                                  {col.column_name}
+                            onValueChange={(value) => {
+                              updatePreFilter(index, { column: value, value: "" }); // 컬럼 변경 시 값 초기화
+                              // 카테고리 컬럼인 경우 옵션 로드
+                              const col = sourceTableColumns.find((c) => c.column_name === value);
+                              if (col && col.input_type === "category") {
+                                loadCategoryOptions(value);
+                              }
+                            }}
+                          >
+                            <SelectTrigger className="h-8 text-xs w-[150px]">
+                              <SelectValue placeholder="컬럼" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {sourceTableColumns
+                                .filter((col) => col.column_name)
+                                .map((col) => (
+                                  <SelectItem key={col.column_name} value={col.column_name}>
+                                    {col.comment || col.column_name}
+                                  </SelectItem>
+                                ))}
+                            </SelectContent>
+                          </Select>
+
+                          <Select
+                            value={filter.operator || undefined}
+                            onValueChange={(value: any) => updatePreFilter(index, { operator: value })}
+                          >
+                            <SelectTrigger className="h-8 text-xs w-[100px]">
+                              <SelectValue placeholder="연산자" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {FILTER_OPERATOR_OPTIONS.map((opt) => (
+                                <SelectItem key={opt.value} value={opt.value}>
+                                  {opt.label}
                                 </SelectItem>
                               ))}
-                          </SelectContent>
+                            </SelectContent>
-                        </Select>
+                          </Select>
 
-                        <Select
+                          {/* 카테고리 컬럼인 경우 Select Box로 값 선택 */}
-                          value={filter.operator || undefined}
+                          {isCategory ? (
-                          onValueChange={(value: any) => updatePreFilter(index, { operator: value })}
+                            <Select
-                        >
+                              value={filter.value || undefined}
-                          <SelectTrigger className="h-8 text-xs w-[100px]">
+                              onValueChange={(value) => updatePreFilter(index, { value })}
-                            <SelectValue placeholder="연산자" />
+                            >
-                          </SelectTrigger>
+                              <SelectTrigger className="h-8 text-xs flex-1">
-                          <SelectContent>
+                                <SelectValue placeholder="값 선택" />
-                            {FILTER_OPERATOR_OPTIONS.map((opt) => (
+                              </SelectTrigger>
-                              <SelectItem key={opt.value} value={opt.value}>
+                              <SelectContent>
-                                {opt.label}
+                                {categoryOptions.map((opt) => (
-                              </SelectItem>
+                                  <SelectItem key={opt.value} value={opt.value}>
-                            ))}
+                                    {opt.label}
-                          </SelectContent>
+                                  </SelectItem>
-                        </Select>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          ) : (
+                            <Input
+                              value={filter.value || ""}
+                              onChange={(e) => updatePreFilter(index, { value: e.target.value })}
+                              placeholder="값"
+                              className="h-8 text-xs flex-1"
+                            />
+                          )}
 
-                        <Input
+                          <Button
-                          value={filter.value || ""}
+                            size="sm"
-                          onChange={(e) => updatePreFilter(index, { value: e.target.value })}
+                            variant="ghost"
-                          placeholder="값"
+                            onClick={() => removePreFilter(index)}
-                          className="h-8 text-xs flex-1"
+                            className="h-8 w-8 p-0 text-destructive hover:text-destructive"
-                        />
+                          >
-
+                            <Trash2 className="h-3.5 w-3.5" />
-                        <Button
+                          </Button>
-                          size="sm"
+                        </div>
-                          variant="ghost"
+                      );
-                          onClick={() => removePreFilter(index)}
+                    })}
-                          className="h-8 w-8 p-0 text-destructive hover:text-destructive"
-                        >
-                          <Trash2 className="h-3.5 w-3.5" />
-                        </Button>
-                      </div>
-                    ))}
                   </div>
 
                   <Separator />