diff --git a/backend-node/src/controllers/entitySearchController.ts b/backend-node/src/controllers/entitySearchController.ts index 4d911c57..5f198c3f 100644 --- a/backend-node/src/controllers/entitySearchController.ts +++ b/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)) { - whereConditions.push(`${key} = $${paramIndex}`); - params.push(value); - paramIndex++; - } else { - logger.warn("엔티티 검색: 필터 조건에 존재하지 않는 컬럼 제외", { tableName, key }); + // 특수 키 형식 파싱: column__operator + let columnName = key; + let operator = "="; + + if (key.includes("__")) { + 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; } } diff --git a/frontend/lib/registry/components/entity-search-input/useEntitySearch.ts b/frontend/lib/registry/components/entity-search-input/useEntitySearch.ts index 1fac26d6..2ae71595 100644 --- a/frontend/lib/registry/components/entity-search-input/useEntitySearch.ts +++ b/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( `/entity-search/${tableName}?${params.toString()}` ); diff --git a/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx b/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx index ad73c317..1eca9fab 100644 --- a/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx +++ b/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([]); @@ -41,6 +42,9 @@ export function ItemSelectionModal({ // 카테고리 옵션 상태 (categoryRef별로 로드된 옵션) const [categoryOptions, setCategoryOptions] = useState>({}); + + // 카테고리 코드 → 라벨 매핑 (테이블 데이터 표시용) + const [categoryLabelMap, setCategoryLabelMap] = useState>({}); // 모달 필터 값과 기본 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(); + 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({ )} - {validColumns.map((col) => ( - - {item[col] || "-"} - - ))} + {validColumns.map((col) => { + const rawValue = item[col]; + // 카테고리 컬럼이면 라벨로 변환 + 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 ( + + {displayValue || "-"} + + ); + })} ); }) diff --git a/frontend/lib/registry/components/modal-repeater-table/types.ts b/frontend/lib/registry/components/modal-repeater-table/types.ts index ad373200..ba23c60e 100644 --- a/frontend/lib/registry/components/modal-repeater-table/types.ts +++ b/frontend/lib/registry/components/modal-repeater-table/types.ts @@ -202,4 +202,7 @@ export interface ItemSelectionModalProps { // 모달 내부 필터 (사용자 선택 가능) modalFilters?: ModalFilterConfig[]; + + // 카테고리 타입 컬럼 목록 (해당 컬럼은 코드 → 라벨로 변환하여 표시) + categoryColumns?: string[]; } diff --git a/frontend/lib/registry/components/universal-form-modal/TableSectionRenderer.tsx b/frontend/lib/registry/components/universal-form-modal/TableSectionRenderer.tsx index 405e2abf..fb1b2ea3 100644 --- a/frontend/lib/registry/components/universal-form-modal/TableSectionRenderer.tsx +++ b/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([]); + + // 소스 테이블의 카테고리 타입 컬럼 목록 로드 + 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 = useMemo(() => { const condition: Record = {}; if (filters?.preFilters) { for (const filter of filters.preFilters) { - // 간단한 "=" 연산자만 처리 (확장 가능) - if (filter.operator === "=") { + if (!filter.column || filter.value === undefined || filter.value === "") continue; + + 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} /> ); @@ -2000,6 +2038,7 @@ export function TableSectionRenderer({ onSelect={handleAddItems} columnLabels={columnLabels} modalFilters={modalFiltersForModal} + categoryColumns={sourceCategoryColumns} /> ); diff --git a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx index 27af68f1..7186ca7e 100644 --- a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx +++ b/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 { - Plus, - Trash2, - GripVertical, - ChevronUp, - ChevronDown, - Settings, - Database, - Layout, - Table, -} from "lucide-react"; +import { 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 { - defaultSectionConfig, - defaultTableSectionConfig, - generateSectionId, -} from "./config"; +import { 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 }) => ( -

{children}

+

{children}

); // 부모 화면에서 전달 가능한 필드 타입 interface AvailableParentField { - name: string; // 필드명 (columnName) - label: string; // 표시 라벨 + name: string; // 필드명 (columnName) + 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) => - index === self.findIndex(f => f.name === field.name) + const uniqueFields = fields.filter( + (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 }) => ({ - name: t.tableName || t.table_name || "", - // displayName 우선, 없으면 tableLabel, 그것도 없으면 테이블명 - label: t.displayName || t.tableLabel || t.table_label || "", - })), + data.map( + (t: { + tableName?: string; + 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 newSection: FormSectionConfig = { - ...defaultSectionConfig, - id: generateSectionId(), - title: type === "table" ? `테이블 섹션 ${config.sections.length + 1}` : `섹션 ${config.sections.length + 1}`, - type, - fields: type === "fields" ? [] : undefined, - tableConfig: type === "table" ? { ...defaultTableSectionConfig } : undefined, - }; - onChange({ - ...config, - sections: [...config.sections, newSection], - }); - }, [config, onChange]); - + const addSection = useCallback( + (type: "fields" | "table" = "fields") => { + const newSection: FormSectionConfig = { + ...defaultSectionConfig, + id: generateSectionId(), + title: type === "table" ? `테이블 섹션 ${config.sections.length + 1}` : `섹션 ${config.sections.length + 1}`, + type, + fields: type === "fields" ? [] : undefined, + tableConfig: type === "table" ? { ...defaultTableSectionConfig } : undefined, + }; + onChange({ + ...config, + sections: [...config.sections, newSection], + }); + }, + [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 ( -
-
-
- {/* 모달 기본 설정 */} - - - -
- - 모달 기본 설정 -
- - -
- - updateModalConfig({ title: e.target.value })} - className="h-9 text-sm w-full max-w-full" - /> - 모달 상단에 표시될 제목입니다 -
- -
- - - 모달 창의 크기를 선택하세요 -
- - {/* 저장 버튼 표시 설정 */} -
-
- updateModalConfig({ showSaveButton: checked === true })} - /> - +
+
+
+ {/* 모달 기본 설정 */} + + + +
+ + 모달 기본 설정
- 체크 해제 시 모달 하단의 저장 버튼이 숨겨집니다 -
- -
+ +
- + updateModalConfig({ saveButtonText: e.target.value })} - className="h-9 text-sm w-full max-w-full" + value={config.modal.title} + onChange={(e) => updateModalConfig({ title: e.target.value })} + className="h-9 w-full max-w-full text-sm" /> + 모달 상단에 표시될 제목입니다
+
- - updateModalConfig({ cancelButtonText: e.target.value })} - className="h-9 text-sm w-full max-w-full" - /> + + + 모달 창의 크기를 선택하세요
-
- - - - {/* 저장 설정 */} - - - -
- - 저장 설정 -
- - -
-
- -

- {config.saveConfig.tableName || "(미설정)"} -

- {config.saveConfig.customApiSave?.enabled && config.saveConfig.customApiSave?.multiTable?.enabled && ( - - 다중 테이블 모드 - - )} + {/* 저장 버튼 표시 설정 */} +
+
+ updateModalConfig({ showSaveButton: checked === true })} + /> + +
+ 체크 해제 시 모달 하단의 저장 버튼이 숨겨집니다
- -
- - 데이터를 저장할 테이블과 방식을 설정합니다. -
- "저장 설정 열기"를 클릭하여 상세 설정을 변경하세요. - - - - - {/* 섹션 구성 */} - - - -
- - 섹션 구성 - - {config.sections.length}개 - -
- - - {/* 섹션 추가 버튼들 */} -
- -