diff --git a/backend-node/src/app.ts b/backend-node/src/app.ts index ad4ced77..914f608c 100644 --- a/backend-node/src/app.ts +++ b/backend-node/src/app.ts @@ -138,6 +138,7 @@ import categoryTreeRoutes from "./routes/categoryTreeRoutes"; // 카테고리 import processWorkStandardRoutes from "./routes/processWorkStandardRoutes"; // 공정 작업기준 import aiAssistantProxy from "./routes/aiAssistantProxy"; // AI 어시스턴트 API 프록시 (같은 포트로 서비스) import auditLogRoutes from "./routes/auditLogRoutes"; // 통합 변경 이력 +import moldRoutes from "./routes/moldRoutes"; // 금형 관리 import { BatchSchedulerService } from "./services/batchSchedulerService"; // import collectionRoutes from "./routes/collectionRoutes"; // 임시 주석 // import batchRoutes from "./routes/batchRoutes"; // 임시 주석 @@ -326,6 +327,7 @@ app.use("/api/category-value-cascading", categoryValueCascadingRoutes); // 카 app.use("/api/category-tree", categoryTreeRoutes); // 카테고리 트리 (테스트) app.use("/api/process-work-standard", processWorkStandardRoutes); // 공정 작업기준 app.use("/api/audit-log", auditLogRoutes); // 통합 변경 이력 +app.use("/api/mold", moldRoutes); // 금형 관리 app.use("/api", screenEmbeddingRoutes); // 화면 임베딩 및 데이터 전달 app.use("/api/ai/v1", aiAssistantProxy); // AI 어시스턴트 (동일 서비스 내 프록시 → AI 서비스 포트) app.use("/api/vehicle", vehicleTripRoutes); // 차량 운행 이력 관리 diff --git a/backend-node/src/controllers/adminController.ts b/backend-node/src/controllers/adminController.ts index 57edad10..9dea63b8 100644 --- a/backend-node/src/controllers/adminController.ts +++ b/backend-node/src/controllers/adminController.ts @@ -3563,29 +3563,36 @@ export async function getTableSchema( logger.info("테이블 스키마 조회", { tableName, companyCode }); - // information_schema와 table_type_columns를 JOIN하여 컬럼 정보와 라벨 정보 함께 가져오기 + // information_schema와 table_type_columns를 JOIN하여 컬럼 정보 + 회사별 제약조건 함께 가져오기 + // 회사별 설정 우선, 없으면 공통(*) 설정 사용 const schemaQuery = ` SELECT ic.column_name, ic.data_type, - ic.is_nullable, + ic.is_nullable AS db_is_nullable, ic.column_default, ic.character_maximum_length, ic.numeric_precision, ic.numeric_scale, - ttc.column_label, - ttc.display_order + COALESCE(ttc_company.column_label, ttc_common.column_label) AS column_label, + COALESCE(ttc_company.display_order, ttc_common.display_order) AS display_order, + COALESCE(ttc_company.is_nullable, ttc_common.is_nullable) AS ttc_is_nullable, + COALESCE(ttc_company.is_unique, ttc_common.is_unique) AS ttc_is_unique FROM information_schema.columns ic - LEFT JOIN table_type_columns ttc - ON ttc.table_name = ic.table_name - AND ttc.column_name = ic.column_name - AND ttc.company_code = '*' + LEFT JOIN table_type_columns ttc_common + ON ttc_common.table_name = ic.table_name + AND ttc_common.column_name = ic.column_name + AND ttc_common.company_code = '*' + LEFT JOIN table_type_columns ttc_company + ON ttc_company.table_name = ic.table_name + AND ttc_company.column_name = ic.column_name + AND ttc_company.company_code = $2 WHERE ic.table_schema = 'public' AND ic.table_name = $1 - ORDER BY COALESCE(ttc.display_order, ic.ordinal_position), ic.ordinal_position + ORDER BY COALESCE(ttc_company.display_order, ttc_common.display_order, ic.ordinal_position), ic.ordinal_position `; - const columns = await query(schemaQuery, [tableName]); + const columns = await query(schemaQuery, [tableName, companyCode]); if (columns.length === 0) { res.status(404).json({ @@ -3595,17 +3602,28 @@ export async function getTableSchema( return; } - // 컬럼 정보를 간단한 형태로 변환 (라벨 정보 포함) - const columnList = columns.map((col: any) => ({ - name: col.column_name, - label: col.column_label || col.column_name, // 라벨이 없으면 컬럼명 사용 - type: col.data_type, - nullable: col.is_nullable === "YES", - default: col.column_default, - maxLength: col.character_maximum_length, - precision: col.numeric_precision, - scale: col.numeric_scale, - })); + // 컬럼 정보를 간단한 형태로 변환 (회사별 제약조건 반영) + const columnList = columns.map((col: any) => { + // DB level nullable + 회사별 table_type_columns 제약조건 통합 + // table_type_columns에서 is_nullable = 'N'이면 필수 (DB가 nullable이어도) + const dbNullable = col.db_is_nullable === "YES"; + const ttcNotNull = col.ttc_is_nullable === "N"; + const effectiveNullable = ttcNotNull ? false : dbNullable; + + const ttcUnique = col.ttc_is_unique === "Y"; + + return { + name: col.column_name, + label: col.column_label || col.column_name, + type: col.data_type, + nullable: effectiveNullable, + unique: ttcUnique, + default: col.column_default, + maxLength: col.character_maximum_length, + precision: col.numeric_precision, + scale: col.numeric_scale, + }; + }); logger.info(`테이블 스키마 조회 성공: ${columnList.length}개 컬럼`); diff --git a/backend-node/src/controllers/categoryValueCascadingController.ts b/backend-node/src/controllers/categoryValueCascadingController.ts index 66250bf9..f57b6822 100644 --- a/backend-node/src/controllers/categoryValueCascadingController.ts +++ b/backend-node/src/controllers/categoryValueCascadingController.ts @@ -818,13 +818,13 @@ export const getCategoryValueCascadingParentOptions = async ( const group = groupResult.rows[0]; - // 부모 카테고리 값 조회 (table_column_category_values에서) + // 부모 카테고리 값 조회 (category_values에서) let optionsQuery = ` SELECT value_code as value, value_label as label, value_order as display_order - FROM table_column_category_values + FROM category_values WHERE table_name = $1 AND column_name = $2 AND is_active = true @@ -916,13 +916,13 @@ export const getCategoryValueCascadingChildOptions = async ( const group = groupResult.rows[0]; - // 자식 카테고리 값 조회 (table_column_category_values에서) + // 자식 카테고리 값 조회 (category_values에서) let optionsQuery = ` SELECT value_code as value, value_label as label, value_order as display_order - FROM table_column_category_values + FROM category_values WHERE table_name = $1 AND column_name = $2 AND is_active = true diff --git a/backend-node/src/controllers/dataflowExecutionController.ts b/backend-node/src/controllers/dataflowExecutionController.ts index 338fa628..71eb2211 100644 --- a/backend-node/src/controllers/dataflowExecutionController.ts +++ b/backend-node/src/controllers/dataflowExecutionController.ts @@ -8,6 +8,7 @@ import { Request, Response } from "express"; import { AuthenticatedRequest } from "../types/auth"; import { query } from "../database/db"; import logger from "../utils/logger"; +import { TableManagementService } from "../services/tableManagementService"; /** * 데이터 액션 실행 @@ -81,6 +82,19 @@ async function executeMainDatabaseAction( company_code: companyCode, }; + // UNIQUE 제약조건 검증 (INSERT/UPDATE/UPSERT 전) + if (["insert", "update", "upsert"].includes(actionType.toLowerCase())) { + const tms = new TableManagementService(); + const uniqueViolations = await tms.validateUniqueConstraints( + tableName, + dataWithCompany, + companyCode + ); + if (uniqueViolations.length > 0) { + throw new Error(`중복된 값이 존재합니다: ${uniqueViolations.join(", ")}`); + } + } + switch (actionType.toLowerCase()) { case "insert": return await executeInsert(tableName, dataWithCompany); diff --git a/backend-node/src/controllers/dynamicFormController.ts b/backend-node/src/controllers/dynamicFormController.ts index 48b55d18..31c11638 100644 --- a/backend-node/src/controllers/dynamicFormController.ts +++ b/backend-node/src/controllers/dynamicFormController.ts @@ -1,7 +1,9 @@ import { Response } from "express"; import { dynamicFormService } from "../services/dynamicFormService"; import { enhancedDynamicFormService } from "../services/enhancedDynamicFormService"; +import { TableManagementService } from "../services/tableManagementService"; import { AuthenticatedRequest } from "../types/auth"; +import { formatPgError } from "../utils/pgErrorUtil"; // 폼 데이터 저장 (기존 버전 - 레거시 지원) export const saveFormData = async ( @@ -47,6 +49,21 @@ export const saveFormData = async ( formDataWithMeta.company_code = companyCode; } + // UNIQUE 제약조건 검증 (INSERT 전) + const tms = new TableManagementService(); + const uniqueViolations = await tms.validateUniqueConstraints( + tableName, + formDataWithMeta, + companyCode || "*" + ); + if (uniqueViolations.length > 0) { + res.status(400).json({ + success: false, + message: `중복된 값이 존재합니다: ${uniqueViolations.join(", ")}`, + }); + return; + } + // 클라이언트 IP 주소 추출 const ipAddress = req.ip || @@ -68,9 +85,12 @@ export const saveFormData = async ( }); } catch (error: any) { console.error("❌ 폼 데이터 저장 실패:", error); - res.status(500).json({ + const { companyCode } = req.user as any; + const friendlyMsg = await formatPgError(error, companyCode); + const statusCode = error.code?.startsWith("23") ? 400 : 500; + res.status(statusCode).json({ success: false, - message: error.message || "데이터 저장에 실패했습니다.", + message: friendlyMsg, }); } }; @@ -108,6 +128,21 @@ export const saveFormDataEnhanced = async ( formDataWithMeta.company_code = companyCode; } + // UNIQUE 제약조건 검증 (INSERT 전) + const tmsEnhanced = new TableManagementService(); + const uniqueViolations = await tmsEnhanced.validateUniqueConstraints( + tableName, + formDataWithMeta, + companyCode || "*" + ); + if (uniqueViolations.length > 0) { + res.status(400).json({ + success: false, + message: `중복된 값이 존재합니다: ${uniqueViolations.join(", ")}`, + }); + return; + } + // 개선된 서비스 사용 const result = await enhancedDynamicFormService.saveFormData( screenId, @@ -118,9 +153,12 @@ export const saveFormDataEnhanced = async ( res.json(result); } catch (error: any) { console.error("❌ 개선된 폼 데이터 저장 실패:", error); - res.status(500).json({ + const { companyCode } = req.user as any; + const friendlyMsg = await formatPgError(error, companyCode); + const statusCode = error.code?.startsWith("23") ? 400 : 500; + res.status(statusCode).json({ success: false, - message: error.message || "데이터 저장에 실패했습니다.", + message: friendlyMsg, }); } }; @@ -146,12 +184,28 @@ export const updateFormData = async ( const formDataWithMeta = { ...data, updated_by: userId, - writer: data.writer || userId, // ✅ writer가 없으면 userId로 설정 + writer: data.writer || userId, updated_at: new Date(), }; + // UNIQUE 제약조건 검증 (UPDATE 시 자기 자신 제외) + const tmsUpdate = new TableManagementService(); + const uniqueViolations = await tmsUpdate.validateUniqueConstraints( + tableName, + formDataWithMeta, + companyCode || "*", + id + ); + if (uniqueViolations.length > 0) { + res.status(400).json({ + success: false, + message: `중복된 값이 존재합니다: ${uniqueViolations.join(", ")}`, + }); + return; + } + const result = await dynamicFormService.updateFormData( - id, // parseInt 제거 - 문자열 ID 지원 + id, tableName, formDataWithMeta ); @@ -163,9 +217,12 @@ export const updateFormData = async ( }); } catch (error: any) { console.error("❌ 폼 데이터 업데이트 실패:", error); - res.status(500).json({ + const { companyCode } = req.user as any; + const friendlyMsg = await formatPgError(error, companyCode); + const statusCode = error.code?.startsWith("23") ? 400 : 500; + res.status(statusCode).json({ success: false, - message: error.message || "데이터 업데이트에 실패했습니다.", + message: friendlyMsg, }); } }; @@ -199,11 +256,27 @@ export const updateFormDataPartial = async ( const newDataWithMeta = { ...newData, updated_by: userId, - writer: newData.writer || userId, // ✅ writer가 없으면 userId로 설정 + writer: newData.writer || userId, }; + // UNIQUE 제약조건 검증 (부분 UPDATE 시 자기 자신 제외) + const tmsPartial = new TableManagementService(); + const uniqueViolations = await tmsPartial.validateUniqueConstraints( + tableName, + newDataWithMeta, + companyCode || "*", + id + ); + if (uniqueViolations.length > 0) { + res.status(400).json({ + success: false, + message: `중복된 값이 존재합니다: ${uniqueViolations.join(", ")}`, + }); + return; + } + const result = await dynamicFormService.updateFormDataPartial( - id, // 🔧 parseInt 제거 - UUID 문자열도 지원 + id, tableName, originalData, newDataWithMeta @@ -216,9 +289,12 @@ export const updateFormDataPartial = async ( }); } catch (error: any) { console.error("❌ 부분 업데이트 실패:", error); - res.status(500).json({ + const { companyCode } = req.user as any; + const friendlyMsg = await formatPgError(error, companyCode); + const statusCode = error.code?.startsWith("23") ? 400 : 500; + res.status(statusCode).json({ success: false, - message: error.message || "부분 업데이트에 실패했습니다.", + message: friendlyMsg, }); } }; diff --git a/backend-node/src/controllers/entityJoinController.ts b/backend-node/src/controllers/entityJoinController.ts index 15e05473..de9ee95f 100644 --- a/backend-node/src/controllers/entityJoinController.ts +++ b/backend-node/src/controllers/entityJoinController.ts @@ -417,10 +417,10 @@ export class EntityJoinController { // 1. 현재 테이블의 Entity 조인 설정 조회 const allJoinConfigs = await entityJoinService.detectEntityJoins(tableName, undefined, companyCode); - // 🆕 화면 디자이너용: table_column_category_values는 카테고리 드롭다운용이므로 제외 + // 🆕 화면 디자이너용: category_values는 카테고리 드롭다운용이므로 제외 // 카테고리 값은 엔티티 조인 컬럼이 아니라 셀렉트박스 옵션으로 사용됨 const joinConfigs = allJoinConfigs.filter( - (config) => config.referenceTable !== "table_column_category_values" + (config) => config.referenceTable !== "category_values" ); if (joinConfigs.length === 0) { diff --git a/backend-node/src/controllers/entitySearchController.ts b/backend-node/src/controllers/entitySearchController.ts index 62fc8bbe..c0c4c36d 100644 --- a/backend-node/src/controllers/entitySearchController.ts +++ b/backend-node/src/controllers/entitySearchController.ts @@ -181,20 +181,92 @@ export async function getDistinctColumnValues(req: AuthenticatedRequest, res: Re ? `WHERE ${whereConditions.join(" AND ")}` : ""; - // DISTINCT 쿼리 실행 - const query = ` + // 1단계: DISTINCT 값 조회 + const distinctQuery = ` SELECT DISTINCT "${columnName}" as value, "${effectiveLabelColumn}" as label FROM "${tableName}" ${whereClause} ORDER BY "${effectiveLabelColumn}" ASC LIMIT 500 `; + const result = await pool.query(distinctQuery, params); - const result = await pool.query(query, params); + // 2단계: 카테고리/코드 라벨 변환 (값이 있을 때만) + if (result.rows.length > 0) { + const rawValues = result.rows.map((r: any) => r.value); + const labelMap: Record = {}; + + // category_values에서 라벨 조회 + try { + const cvCompanyCondition = companyCode !== "*" + ? `AND (company_code = $4 OR company_code = '*')` + : ""; + const cvParams = companyCode !== "*" + ? [tableName, columnName, rawValues, companyCode] + : [tableName, columnName, rawValues]; + + const cvResult = await pool.query( + `SELECT value_code, value_label FROM category_values + WHERE table_name = $1 AND column_name = $2 + AND value_code = ANY($3) AND is_active = true + ${cvCompanyCondition}`, + cvParams + ); + cvResult.rows.forEach((r: any) => { + labelMap[r.value_code] = r.value_label; + }); + } catch (e) { + // category_values 조회 실패 시 무시 + } + + // code_info에서 라벨 조회 (code_category 기반) + try { + const ttcResult = await pool.query( + `SELECT code_category FROM table_type_columns + WHERE table_name = $1 AND column_name = $2 AND code_category IS NOT NULL + LIMIT 1`, + [tableName, columnName] + ); + const codeCategory = ttcResult.rows[0]?.code_category; + + if (codeCategory) { + const ciCompanyCondition = companyCode !== "*" + ? `AND (company_code = $3 OR company_code = '*')` + : ""; + const ciParams = companyCode !== "*" + ? [codeCategory, rawValues, companyCode] + : [codeCategory, rawValues]; + + const ciResult = await pool.query( + `SELECT code_value, code_name FROM code_info + WHERE code_category = $1 AND code_value = ANY($2) AND is_active = 'Y' + ${ciCompanyCondition}`, + ciParams + ); + ciResult.rows.forEach((r: any) => { + if (!labelMap[r.code_value]) { + labelMap[r.code_value] = r.code_name; + } + }); + } + } catch (e) { + // code_info 조회 실패 시 무시 + } + + // 라벨 매핑 적용 + if (Object.keys(labelMap).length > 0) { + result.rows.forEach((row: any) => { + if (labelMap[row.value]) { + row.label = labelMap[row.value]; + } + }); + } + } logger.info("컬럼 DISTINCT 값 조회 성공", { tableName, columnName, + columnInputType: columnInputType || "none", labelColumn: effectiveLabelColumn, companyCode, hasFilters: !!filtersParam, diff --git a/backend-node/src/controllers/moldController.ts b/backend-node/src/controllers/moldController.ts new file mode 100644 index 00000000..ee500f5e --- /dev/null +++ b/backend-node/src/controllers/moldController.ts @@ -0,0 +1,497 @@ +import { Response } from "express"; +import { AuthenticatedRequest } from "../types/auth"; +import { query } from "../database/db"; +import { logger } from "../utils/logger"; + +// ============================================ +// 금형 마스터 CRUD +// ============================================ + +export async function getMoldList(req: AuthenticatedRequest, res: Response): Promise { + try { + const companyCode = req.user!.companyCode; + const { mold_code, mold_name, mold_type, operation_status } = req.query; + + const conditions: string[] = []; + const params: any[] = []; + let paramIndex = 1; + + if (companyCode === "*") { + // 최고 관리자: 전체 조회 + } else { + conditions.push(`company_code = $${paramIndex}`); + params.push(companyCode); + paramIndex++; + } + + if (mold_code) { + conditions.push(`mold_code ILIKE $${paramIndex}`); + params.push(`%${mold_code}%`); + paramIndex++; + } + if (mold_name) { + conditions.push(`mold_name ILIKE $${paramIndex}`); + params.push(`%${mold_name}%`); + paramIndex++; + } + if (mold_type) { + conditions.push(`mold_type = $${paramIndex}`); + params.push(mold_type); + paramIndex++; + } + if (operation_status) { + conditions.push(`operation_status = $${paramIndex}`); + params.push(operation_status); + paramIndex++; + } + + const whereClause = conditions.length > 0 ? `WHERE ${conditions.join(" AND ")}` : ""; + const sql = `SELECT * FROM mold_mng ${whereClause} ORDER BY created_date DESC`; + const result = await query(sql, params); + + logger.info("금형 목록 조회", { companyCode, count: result.length }); + res.json({ success: true, data: result }); + } catch (error: any) { + logger.error("금형 목록 조회 오류", error); + res.status(500).json({ success: false, message: error.message }); + } +} + +export async function getMoldDetail(req: AuthenticatedRequest, res: Response): Promise { + try { + const companyCode = req.user!.companyCode; + const { moldCode } = req.params; + + let sql: string; + let params: any[]; + + if (companyCode === "*") { + sql = `SELECT * FROM mold_mng WHERE mold_code = $1 LIMIT 1`; + params = [moldCode]; + } else { + sql = `SELECT * FROM mold_mng WHERE mold_code = $1 AND company_code = $2 LIMIT 1`; + params = [moldCode, companyCode]; + } + + const result = await query(sql, params); + if (result.length === 0) { + res.status(404).json({ success: false, message: "금형을 찾을 수 없습니다." }); + return; + } + + res.json({ success: true, data: result[0] }); + } catch (error: any) { + logger.error("금형 상세 조회 오류", error); + res.status(500).json({ success: false, message: error.message }); + } +} + +export async function createMold(req: AuthenticatedRequest, res: Response): Promise { + try { + const companyCode = req.user!.companyCode; + const userId = req.user!.userId; + const { + mold_code, mold_name, mold_type, category, manufacturer, + manufacturing_number, manufacturing_date, cavity_count, + shot_count, mold_quantity, base_input_qty, operation_status, + remarks, image_path, memo, + } = req.body; + + if (!mold_code || !mold_name) { + res.status(400).json({ success: false, message: "금형코드와 금형명은 필수입니다." }); + return; + } + + const sql = ` + INSERT INTO mold_mng ( + company_code, mold_code, mold_name, mold_type, category, + manufacturer, manufacturing_number, manufacturing_date, + cavity_count, shot_count, mold_quantity, base_input_qty, + operation_status, remarks, image_path, memo, writer + ) VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11,$12,$13,$14,$15,$16,$17) + RETURNING * + `; + const params = [ + companyCode, mold_code, mold_name, mold_type || null, category || null, + manufacturer || null, manufacturing_number || null, manufacturing_date || null, + cavity_count || 0, shot_count || 0, mold_quantity || 1, base_input_qty || 0, + operation_status || "ACTIVE", remarks || null, image_path || null, memo || null, userId, + ]; + + const result = await query(sql, params); + logger.info("금형 생성", { companyCode, moldCode: mold_code }); + res.json({ success: true, data: result[0], message: "금형이 등록되었습니다." }); + } catch (error: any) { + if (error.code === "23505") { + res.status(409).json({ success: false, message: "이미 존재하는 금형코드입니다." }); + return; + } + logger.error("금형 생성 오류", error); + res.status(500).json({ success: false, message: error.message }); + } +} + +export async function updateMold(req: AuthenticatedRequest, res: Response): Promise { + try { + const companyCode = req.user!.companyCode; + const { moldCode } = req.params; + const { + mold_name, mold_type, category, manufacturer, + manufacturing_number, manufacturing_date, cavity_count, + shot_count, mold_quantity, base_input_qty, operation_status, + remarks, image_path, memo, + } = req.body; + + const sql = ` + UPDATE mold_mng SET + mold_name = COALESCE($1, mold_name), + mold_type = $2, category = $3, manufacturer = $4, + manufacturing_number = $5, manufacturing_date = $6, + cavity_count = COALESCE($7, cavity_count), + shot_count = COALESCE($8, shot_count), + mold_quantity = COALESCE($9, mold_quantity), + base_input_qty = COALESCE($10, base_input_qty), + operation_status = COALESCE($11, operation_status), + remarks = $12, image_path = $13, memo = $14, + updated_date = NOW() + WHERE mold_code = $15 AND company_code = $16 + RETURNING * + `; + const params = [ + mold_name, mold_type, category, manufacturer, + manufacturing_number, manufacturing_date, + cavity_count, shot_count, mold_quantity, base_input_qty, + operation_status, remarks, image_path, memo, + moldCode, companyCode, + ]; + + const result = await query(sql, params); + if (result.length === 0) { + res.status(404).json({ success: false, message: "금형을 찾을 수 없습니다." }); + return; + } + + logger.info("금형 수정", { companyCode, moldCode }); + res.json({ success: true, data: result[0], message: "금형이 수정되었습니다." }); + } catch (error: any) { + logger.error("금형 수정 오류", error); + res.status(500).json({ success: false, message: error.message }); + } +} + +export async function deleteMold(req: AuthenticatedRequest, res: Response): Promise { + try { + const companyCode = req.user!.companyCode; + const { moldCode } = req.params; + + // 관련 데이터 먼저 삭제 + await query(`DELETE FROM mold_serial WHERE mold_code = $1 AND company_code = $2`, [moldCode, companyCode]); + await query(`DELETE FROM mold_inspection_item WHERE mold_code = $1 AND company_code = $2`, [moldCode, companyCode]); + await query(`DELETE FROM mold_part WHERE mold_code = $1 AND company_code = $2`, [moldCode, companyCode]); + + const result = await query( + `DELETE FROM mold_mng WHERE mold_code = $1 AND company_code = $2 RETURNING id`, + [moldCode, companyCode] + ); + + if (result.length === 0) { + res.status(404).json({ success: false, message: "금형을 찾을 수 없습니다." }); + return; + } + + logger.info("금형 삭제", { companyCode, moldCode }); + res.json({ success: true, message: "금형이 삭제되었습니다." }); + } catch (error: any) { + logger.error("금형 삭제 오류", error); + res.status(500).json({ success: false, message: error.message }); + } +} + +// ============================================ +// 일련번호 CRUD +// ============================================ + +export async function getMoldSerials(req: AuthenticatedRequest, res: Response): Promise { + try { + const companyCode = req.user!.companyCode; + const { moldCode } = req.params; + + const sql = `SELECT * FROM mold_serial WHERE mold_code = $1 AND company_code = $2 ORDER BY serial_number`; + const result = await query(sql, [moldCode, companyCode]); + + res.json({ success: true, data: result }); + } catch (error: any) { + logger.error("일련번호 목록 조회 오류", error); + res.status(500).json({ success: false, message: error.message }); + } +} + +export async function createMoldSerial(req: AuthenticatedRequest, res: Response): Promise { + try { + const companyCode = req.user!.companyCode; + const userId = req.user!.userId; + const { moldCode } = req.params; + const { serial_number, status, progress, work_description, manager, completion_date, remarks } = req.body; + + let finalSerialNumber = serial_number; + + // 일련번호가 비어있으면 채번 규칙으로 자동 생성 + if (!finalSerialNumber) { + try { + const { numberingRuleService } = await import("../services/numberingRuleService"); + const rule = await numberingRuleService.getNumberingRuleByColumn( + companyCode, + "mold_serial", + "serial_number" + ); + + if (rule) { + // formData에 mold_code를 포함 (reference 파트에서 참조) + const formData = { mold_code: moldCode, ...req.body }; + finalSerialNumber = await numberingRuleService.allocateCode( + rule.ruleId, + companyCode, + formData + ); + logger.info("일련번호 자동 채번 완료", { serialNumber: finalSerialNumber, ruleId: rule.ruleId }); + } + } catch (numError: any) { + logger.error("일련번호 자동 채번 실패", { error: numError.message }); + } + } + + if (!finalSerialNumber) { + res.status(400).json({ success: false, message: "일련번호를 생성할 수 없습니다. 채번 규칙을 확인해주세요." }); + return; + } + + const sql = ` + INSERT INTO mold_serial (company_code, mold_code, serial_number, status, progress, work_description, manager, completion_date, remarks, writer) + VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9,$10) + RETURNING * + `; + const params = [ + companyCode, moldCode, finalSerialNumber, status || "STORED", + progress || 0, work_description || null, manager || null, + completion_date || null, remarks || null, userId, + ]; + + const result = await query(sql, params); + res.json({ success: true, data: result[0], message: "일련번호가 등록되었습니다." }); + } catch (error: any) { + if (error.code === "23505") { + res.status(409).json({ success: false, message: "이미 존재하는 일련번호입니다." }); + return; + } + logger.error("일련번호 생성 오류", error); + res.status(500).json({ success: false, message: error.message }); + } +} + +export async function deleteMoldSerial(req: AuthenticatedRequest, res: Response): Promise { + try { + const companyCode = req.user!.companyCode; + const { id } = req.params; + + const result = await query( + `DELETE FROM mold_serial WHERE id = $1 AND company_code = $2 RETURNING id`, + [id, companyCode] + ); + + if (result.length === 0) { + res.status(404).json({ success: false, message: "일련번호를 찾을 수 없습니다." }); + return; + } + + res.json({ success: true, message: "일련번호가 삭제되었습니다." }); + } catch (error: any) { + logger.error("일련번호 삭제 오류", error); + res.status(500).json({ success: false, message: error.message }); + } +} + +// ============================================ +// 점검항목 CRUD +// ============================================ + +export async function getMoldInspections(req: AuthenticatedRequest, res: Response): Promise { + try { + const companyCode = req.user!.companyCode; + const { moldCode } = req.params; + + const sql = `SELECT * FROM mold_inspection_item WHERE mold_code = $1 AND company_code = $2 ORDER BY created_date`; + const result = await query(sql, [moldCode, companyCode]); + + res.json({ success: true, data: result }); + } catch (error: any) { + logger.error("점검항목 조회 오류", error); + res.status(500).json({ success: false, message: error.message }); + } +} + +export async function createMoldInspection(req: AuthenticatedRequest, res: Response): Promise { + try { + const companyCode = req.user!.companyCode; + const userId = req.user!.userId; + const { moldCode } = req.params; + const { + inspection_item, inspection_cycle, inspection_method, + inspection_content, lower_limit, upper_limit, unit, + is_active, checklist, remarks, + } = req.body; + + if (!inspection_item) { + res.status(400).json({ success: false, message: "점검항목명은 필수입니다." }); + return; + } + + const sql = ` + INSERT INTO mold_inspection_item ( + company_code, mold_code, inspection_item, inspection_cycle, + inspection_method, inspection_content, lower_limit, upper_limit, + unit, is_active, checklist, remarks, writer + ) VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11,$12,$13) + RETURNING * + `; + const params = [ + companyCode, moldCode, inspection_item, inspection_cycle || null, + inspection_method || null, inspection_content || null, + lower_limit || null, upper_limit || null, unit || null, + is_active || "Y", checklist || null, remarks || null, userId, + ]; + + const result = await query(sql, params); + res.json({ success: true, data: result[0], message: "점검항목이 등록되었습니다." }); + } catch (error: any) { + logger.error("점검항목 생성 오류", error); + res.status(500).json({ success: false, message: error.message }); + } +} + +export async function deleteMoldInspection(req: AuthenticatedRequest, res: Response): Promise { + try { + const companyCode = req.user!.companyCode; + const { id } = req.params; + + const result = await query( + `DELETE FROM mold_inspection_item WHERE id = $1 AND company_code = $2 RETURNING id`, + [id, companyCode] + ); + + if (result.length === 0) { + res.status(404).json({ success: false, message: "점검항목을 찾을 수 없습니다." }); + return; + } + + res.json({ success: true, message: "점검항목이 삭제되었습니다." }); + } catch (error: any) { + logger.error("점검항목 삭제 오류", error); + res.status(500).json({ success: false, message: error.message }); + } +} + +// ============================================ +// 부품 CRUD +// ============================================ + +export async function getMoldParts(req: AuthenticatedRequest, res: Response): Promise { + try { + const companyCode = req.user!.companyCode; + const { moldCode } = req.params; + + const sql = `SELECT * FROM mold_part WHERE mold_code = $1 AND company_code = $2 ORDER BY created_date`; + const result = await query(sql, [moldCode, companyCode]); + + res.json({ success: true, data: result }); + } catch (error: any) { + logger.error("부품 목록 조회 오류", error); + res.status(500).json({ success: false, message: error.message }); + } +} + +export async function createMoldPart(req: AuthenticatedRequest, res: Response): Promise { + try { + const companyCode = req.user!.companyCode; + const userId = req.user!.userId; + const { moldCode } = req.params; + const { + part_name, replacement_cycle, unit, specification, + manufacturer, manufacturer_code, image_path, remarks, + } = req.body; + + if (!part_name) { + res.status(400).json({ success: false, message: "부품명은 필수입니다." }); + return; + } + + const sql = ` + INSERT INTO mold_part ( + company_code, mold_code, part_name, replacement_cycle, + unit, specification, manufacturer, manufacturer_code, + image_path, remarks, writer + ) VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11) + RETURNING * + `; + const params = [ + companyCode, moldCode, part_name, replacement_cycle || null, + unit || null, specification || null, manufacturer || null, + manufacturer_code || null, image_path || null, remarks || null, userId, + ]; + + const result = await query(sql, params); + res.json({ success: true, data: result[0], message: "부품이 등록되었습니다." }); + } catch (error: any) { + logger.error("부품 생성 오류", error); + res.status(500).json({ success: false, message: error.message }); + } +} + +export async function deleteMoldPart(req: AuthenticatedRequest, res: Response): Promise { + try { + const companyCode = req.user!.companyCode; + const { id } = req.params; + + const result = await query( + `DELETE FROM mold_part WHERE id = $1 AND company_code = $2 RETURNING id`, + [id, companyCode] + ); + + if (result.length === 0) { + res.status(404).json({ success: false, message: "부품을 찾을 수 없습니다." }); + return; + } + + res.json({ success: true, message: "부품이 삭제되었습니다." }); + } catch (error: any) { + logger.error("부품 삭제 오류", error); + res.status(500).json({ success: false, message: error.message }); + } +} + +// ============================================ +// 일련번호 현황 집계 +// ============================================ + +export async function getMoldSerialSummary(req: AuthenticatedRequest, res: Response): Promise { + try { + const companyCode = req.user!.companyCode; + const { moldCode } = req.params; + + const sql = ` + SELECT + COUNT(*) as total, + COUNT(*) FILTER (WHERE status = 'IN_USE') as in_use, + COUNT(*) FILTER (WHERE status = 'REPAIR') as repair, + COUNT(*) FILTER (WHERE status = 'STORED') as stored, + COUNT(*) FILTER (WHERE status = 'DISPOSED') as disposed + FROM mold_serial + WHERE mold_code = $1 AND company_code = $2 + `; + const result = await query(sql, [moldCode, companyCode]); + + res.json({ success: true, data: result[0] }); + } catch (error: any) { + logger.error("일련번호 현황 조회 오류", error); + res.status(500).json({ success: false, message: error.message }); + } +} diff --git a/backend-node/src/controllers/numberingRuleController.ts b/backend-node/src/controllers/numberingRuleController.ts index 8a9f6b56..a3887ab8 100644 --- a/backend-node/src/controllers/numberingRuleController.ts +++ b/backend-node/src/controllers/numberingRuleController.ts @@ -405,6 +405,30 @@ router.post( } ); +// 테이블+컬럼 기반 채번 규칙 조회 (메인 API) +router.get( + "/by-column/:tableName/:columnName", + authenticateToken, + async (req: AuthenticatedRequest, res: Response) => { + const companyCode = req.user!.companyCode; + const { tableName, columnName } = req.params; + + try { + const rule = await numberingRuleService.getNumberingRuleByColumn( + companyCode, + tableName, + columnName + ); + return res.json({ success: true, data: rule }); + } catch (error: any) { + logger.error("테이블+컬럼 기반 채번 규칙 조회 실패", { + error: error.message, + }); + return res.status(500).json({ success: false, error: error.message }); + } + } +); + // ==================== 테스트 테이블용 API ==================== // [테스트] 테스트 테이블에서 채번 규칙 목록 조회 diff --git a/backend-node/src/controllers/tableManagementController.ts b/backend-node/src/controllers/tableManagementController.ts index b8436176..5087a1c9 100644 --- a/backend-node/src/controllers/tableManagementController.ts +++ b/backend-node/src/controllers/tableManagementController.ts @@ -2087,6 +2087,23 @@ export async function multiTableSave( return; } + // UNIQUE 제약조건 검증 (트랜잭션 전에) + const tmsMulti = new TableManagementService(); + const uniqueViolations = await tmsMulti.validateUniqueConstraints( + mainTable.tableName, + mainData, + companyCode, + isUpdate ? mainData[mainTable.primaryKeyColumn] : undefined + ); + if (uniqueViolations.length > 0) { + client.release(); + res.status(400).json({ + success: false, + message: `중복된 값이 존재합니다: ${uniqueViolations.join(", ")}`, + }); + return; + } + await client.query("BEGIN"); // 1. 메인 테이블 저장 @@ -3019,3 +3036,72 @@ export async function toggleColumnUnique( }); } } + +/** + * 회사별 채번 타입 컬럼 조회 (카테고리 패턴과 동일) + * + * @route GET /api/table-management/numbering-columns + */ +export async function getNumberingColumnsByCompany( + req: AuthenticatedRequest, + res: Response +): Promise { + try { + const companyCode = req.user?.companyCode; + + logger.info("회사별 채번 컬럼 조회 요청", { companyCode }); + + if (!companyCode) { + res.status(400).json({ + success: false, + message: "회사 코드를 확인할 수 없습니다.", + }); + return; + } + + const { getPool } = await import("../database/db"); + const pool = getPool(); + + const targetCompanyCode = companyCode === "*" ? "*" : companyCode; + + const columnsQuery = ` + SELECT DISTINCT + ttc.table_name AS "tableName", + COALESCE( + tl.table_label, + initcap(replace(ttc.table_name, '_', ' ')) + ) AS "tableLabel", + ttc.column_name AS "columnName", + COALESCE( + ttc.column_label, + initcap(replace(ttc.column_name, '_', ' ')) + ) AS "columnLabel", + ttc.input_type AS "inputType" + FROM table_type_columns ttc + LEFT JOIN table_labels tl + ON ttc.table_name = tl.table_name + WHERE ttc.input_type = 'numbering' + AND ttc.company_code = $1 + ORDER BY ttc.table_name, ttc.column_name + `; + + const columnsResult = await pool.query(columnsQuery, [targetCompanyCode]); + + logger.info("채번 컬럼 조회 완료", { + companyCode, + rowCount: columnsResult.rows.length, + }); + + res.json({ + success: true, + data: columnsResult.rows, + }); + } catch (error: any) { + logger.error("채번 컬럼 조회 실패", { error: error.message }); + res.status(500).json({ + success: false, + message: "채번 컬럼 조회 중 오류가 발생했습니다.", + error: error.message, + }); + } +} diff --git a/backend-node/src/middleware/errorHandler.ts b/backend-node/src/middleware/errorHandler.ts index 54d8f0a2..b592ae2e 100644 --- a/backend-node/src/middleware/errorHandler.ts +++ b/backend-node/src/middleware/errorHandler.ts @@ -41,13 +41,27 @@ export const errorHandler = ( // PostgreSQL 에러 코드 참조: https://www.postgresql.org/docs/current/errcodes-appendix.html if (pgError.code === "23505") { // unique_violation - error = new AppError("중복된 데이터가 존재합니다.", 400); + const constraint = pgError.constraint || ""; + const tbl = pgError.table || ""; + let col = ""; + if (constraint && tbl) { + const prefix = `${tbl}_`; + const suffix = "_key"; + if (constraint.startsWith(prefix) && constraint.endsWith(suffix)) { + col = constraint.slice(prefix.length, -suffix.length); + } + } + const detail = col ? ` [${col}]` : ""; + error = new AppError(`중복된 데이터가 존재합니다.${detail}`, 400); } else if (pgError.code === "23503") { // foreign_key_violation error = new AppError("참조 무결성 제약 조건 위반입니다.", 400); } else if (pgError.code === "23502") { // not_null_violation - error = new AppError("필수 입력값이 누락되었습니다.", 400); + const colName = pgError.column || ""; + const tableName = pgError.table || ""; + const detail = colName ? ` [${tableName}.${colName}]` : ""; + error = new AppError(`필수 입력값이 누락되었습니다.${detail}`, 400); } else if (pgError.code.startsWith("23")) { // 기타 무결성 제약 조건 위반 error = new AppError("데이터 무결성 제약 조건 위반입니다.", 400); @@ -84,6 +98,7 @@ export const errorHandler = ( // 응답 전송 res.status(statusCode).json({ success: false, + message: message, error: { message: message, ...(process.env.NODE_ENV === "development" && { stack: error.stack }), diff --git a/backend-node/src/routes/dataRoutes.ts b/backend-node/src/routes/dataRoutes.ts index de83e720..c8ba23d8 100644 --- a/backend-node/src/routes/dataRoutes.ts +++ b/backend-node/src/routes/dataRoutes.ts @@ -5,6 +5,8 @@ import { multiTableExcelService, TableChainConfig } from "../services/multiTable import { authenticateToken } from "../middleware/authMiddleware"; import { AuthenticatedRequest } from "../types/auth"; import { auditLogService } from "../services/auditLogService"; +import { TableManagementService } from "../services/tableManagementService"; +import { formatPgError } from "../utils/pgErrorUtil"; const router = express.Router(); @@ -950,6 +952,20 @@ router.post( console.log(`🏢 company_name 자동 추가: ${req.user.companyName}`); } + // UNIQUE 제약조건 검증 + const tms = new TableManagementService(); + const uniqueViolations = await tms.validateUniqueConstraints( + tableName, + enrichedData, + req.user?.companyCode || "*" + ); + if (uniqueViolations.length > 0) { + return res.status(400).json({ + success: false, + message: `중복된 값이 존재합니다: ${uniqueViolations.join(", ")}`, + }); + } + // 레코드 생성 const result = await dataService.createRecord(tableName, enrichedData); @@ -1019,6 +1035,21 @@ router.put( console.log(`✏️ 레코드 수정: ${tableName}/${id}`, data); + // UNIQUE 제약조건 검증 (자기 자신 제외) + const tmsUpdate = new TableManagementService(); + const uniqueViolations = await tmsUpdate.validateUniqueConstraints( + tableName, + data, + req.user?.companyCode || "*", + String(id) + ); + if (uniqueViolations.length > 0) { + return res.status(400).json({ + success: false, + message: `중복된 값이 존재합니다: ${uniqueViolations.join(", ")}`, + }); + } + // 레코드 수정 const result = await dataService.updateRecord(tableName, id, data); diff --git a/backend-node/src/routes/moldRoutes.ts b/backend-node/src/routes/moldRoutes.ts new file mode 100644 index 00000000..76eaa67d --- /dev/null +++ b/backend-node/src/routes/moldRoutes.ts @@ -0,0 +1,49 @@ +import express from "express"; +import { authenticateToken } from "../middleware/authMiddleware"; +import { + getMoldList, + getMoldDetail, + createMold, + updateMold, + deleteMold, + getMoldSerials, + createMoldSerial, + deleteMoldSerial, + getMoldInspections, + createMoldInspection, + deleteMoldInspection, + getMoldParts, + createMoldPart, + deleteMoldPart, + getMoldSerialSummary, +} from "../controllers/moldController"; + +const router = express.Router(); +router.use(authenticateToken); + +// 금형 마스터 +router.get("/", getMoldList); +router.get("/:moldCode", getMoldDetail); +router.post("/", createMold); +router.put("/:moldCode", updateMold); +router.delete("/:moldCode", deleteMold); + +// 일련번호 +router.get("/:moldCode/serials", getMoldSerials); +router.post("/:moldCode/serials", createMoldSerial); +router.delete("/serials/:id", deleteMoldSerial); + +// 일련번호 현황 집계 +router.get("/:moldCode/serial-summary", getMoldSerialSummary); + +// 점검항목 +router.get("/:moldCode/inspections", getMoldInspections); +router.post("/:moldCode/inspections", createMoldInspection); +router.delete("/inspections/:id", deleteMoldInspection); + +// 부품 +router.get("/:moldCode/parts", getMoldParts); +router.post("/:moldCode/parts", createMoldPart); +router.delete("/parts/:id", deleteMoldPart); + +export default router; diff --git a/backend-node/src/routes/tableManagementRoutes.ts b/backend-node/src/routes/tableManagementRoutes.ts index a8964e99..92449cf6 100644 --- a/backend-node/src/routes/tableManagementRoutes.ts +++ b/backend-node/src/routes/tableManagementRoutes.ts @@ -25,6 +25,7 @@ import { toggleLogTable, getCategoryColumnsByMenu, // 🆕 메뉴별 카테고리 컬럼 조회 getCategoryColumnsByCompany, // 🆕 회사별 카테고리 컬럼 조회 + getNumberingColumnsByCompany, // 채번 타입 컬럼 조회 multiTableSave, // 🆕 범용 다중 테이블 저장 getTableEntityRelations, // 🆕 두 테이블 간 엔티티 관계 조회 getReferencedByTables, // 🆕 현재 테이블을 참조하는 테이블 조회 @@ -254,6 +255,12 @@ router.post("/tables/:tableName/log/toggle", toggleLogTable); */ router.get("/category-columns", getCategoryColumnsByCompany); +/** + * 회사 기준 모든 채번 타입 컬럼 조회 + * GET /api/table-management/numbering-columns + */ +router.get("/numbering-columns", getNumberingColumnsByCompany); + /** * 메뉴의 형제 메뉴들이 사용하는 모든 테이블의 카테고리 타입 컬럼 조회 * GET /api/table-management/menu/:menuObjid/category-columns diff --git a/backend-node/src/services/entityJoinService.ts b/backend-node/src/services/entityJoinService.ts index a37942e1..1f345727 100644 --- a/backend-node/src/services/entityJoinService.ts +++ b/backend-node/src/services/entityJoinService.ts @@ -92,7 +92,7 @@ export class EntityJoinService { if (column.input_type === "category") { // 카테고리 타입: reference 정보가 비어있어도 자동 설정 - referenceTable = referenceTable || "table_column_category_values"; + referenceTable = referenceTable || "category_values"; referenceColumn = referenceColumn || "value_code"; displayColumn = displayColumn || "value_label"; @@ -308,7 +308,7 @@ export class EntityJoinService { const usedAliasesForColumns = new Set(); // joinConfigs를 참조 테이블 + 소스 컬럼별로 중복 제거하여 별칭 생성 - // (table_column_category_values는 같은 테이블이라도 sourceColumn마다 별도 JOIN 필요) + // (category_values는 같은 테이블이라도 sourceColumn마다 별도 JOIN 필요) const uniqueReferenceTableConfigs = joinConfigs.reduce((acc, config) => { if ( !acc.some( @@ -336,7 +336,7 @@ export class EntityJoinService { counter++; } usedAliasesForColumns.add(alias); - // 같은 테이블이라도 sourceColumn이 다르면 별도 별칭 생성 (table_column_category_values 대응) + // 같은 테이블이라도 sourceColumn이 다르면 별도 별칭 생성 (category_values 대응) const aliasKey = `${config.referenceTable}:${config.sourceColumn}`; aliasMap.set(aliasKey, alias); logger.info( @@ -455,9 +455,10 @@ export class EntityJoinService { const aliasKey = `${config.referenceTable}:${config.sourceColumn}`; const alias = aliasMap.get(aliasKey); - // table_column_category_values는 특별한 조인 조건 필요 (회사별 필터링) - if (config.referenceTable === "table_column_category_values") { - return `LEFT JOIN ${config.referenceTable} ${alias} ON main."${config.sourceColumn}"::TEXT = ${alias}."${config.referenceColumn}"::TEXT AND ${alias}.table_name = '${tableName}' AND ${alias}.column_name = '${config.sourceColumn}' AND ${alias}.company_code = main.company_code AND ${alias}.is_active = true`; + // category_values는 특별한 조인 조건 필요 (회사별 필터링) + // is_active 필터 제거: 비활성화된 카테고리도 라벨로 표시되어야 함 + if (config.referenceTable === "category_values") { + return `LEFT JOIN ${config.referenceTable} ${alias} ON main."${config.sourceColumn}"::TEXT = ${alias}."${config.referenceColumn}"::TEXT AND ${alias}.table_name = '${tableName}' AND ${alias}.column_name = '${config.sourceColumn}' AND ${alias}.company_code = main.company_code`; } // user_info는 전역 테이블이므로 company_code 조건 없이 조인 @@ -528,10 +529,10 @@ export class EntityJoinService { return "join"; } - // table_column_category_values는 특수 조인 조건이 필요하므로 캐시 불가 - if (config.referenceTable === "table_column_category_values") { + // category_values는 특수 조인 조건이 필요하므로 캐시 불가 + if (config.referenceTable === "category_values") { logger.info( - `🎯 table_column_category_values는 캐시 전략 불가: ${config.sourceColumn}` + `🎯 category_values는 캐시 전략 불가: ${config.sourceColumn}` ); return "join"; } @@ -723,10 +724,10 @@ export class EntityJoinService { const aliasKey = `${config.referenceTable}:${config.sourceColumn}`; const alias = aliasMap.get(aliasKey); - // table_column_category_values는 특별한 조인 조건 필요 (회사별 필터링만) - if (config.referenceTable === "table_column_category_values") { - // 멀티테넌시: 회사 데이터만 사용 (공통 데이터 제외) - return `LEFT JOIN ${config.referenceTable} ${alias} ON main."${config.sourceColumn}"::TEXT = ${alias}."${config.referenceColumn}"::TEXT AND ${alias}.table_name = '${tableName}' AND ${alias}.column_name = '${config.sourceColumn}' AND ${alias}.company_code = main.company_code AND ${alias}.is_active = true`; + // category_values는 특별한 조인 조건 필요 (회사별 필터링만) + // is_active 필터 제거: 비활성화된 카테고리도 라벨로 표시되어야 함 + if (config.referenceTable === "category_values") { + return `LEFT JOIN ${config.referenceTable} ${alias} ON main."${config.sourceColumn}"::TEXT = ${alias}."${config.referenceColumn}"::TEXT AND ${alias}.table_name = '${tableName}' AND ${alias}.column_name = '${config.sourceColumn}' AND ${alias}.company_code = main.company_code`; } return `LEFT JOIN ${config.referenceTable} ${alias} ON main."${config.sourceColumn}"::TEXT = ${alias}."${config.referenceColumn}"::TEXT`; diff --git a/backend-node/src/services/masterDetailExcelService.ts b/backend-node/src/services/masterDetailExcelService.ts index 40cd58e3..a0370ed6 100644 --- a/backend-node/src/services/masterDetailExcelService.ts +++ b/backend-node/src/services/masterDetailExcelService.ts @@ -494,7 +494,7 @@ class MasterDetailExcelService { /** * 특정 테이블의 특정 컬럼이 채번 타입인지 확인하고, 채번 규칙 ID를 반환 - * 회사별 설정을 우선 조회하고, 없으면 공통(*) 설정으로 fallback + * numbering_rules 테이블에서 table_name + column_name + company_code로 직접 조회 */ private async detectNumberingRuleForColumn( tableName: string, @@ -502,32 +502,58 @@ class MasterDetailExcelService { companyCode?: string ): Promise<{ numberingRuleId: string } | null> { try { - // 회사별 설정 우선, 공통 설정 fallback (company_code DESC로 회사별이 먼저) + // 1. table_type_columns에서 numbering 타입인지 확인 const companyCondition = companyCode && companyCode !== "*" ? `AND company_code IN ($3, '*')` : `AND company_code = '*'`; - const params = companyCode && companyCode !== "*" + const ttcParams = companyCode && companyCode !== "*" ? [tableName, columnName, companyCode] : [tableName, columnName]; - const result = await query( - `SELECT input_type, detail_settings, company_code - FROM table_type_columns + const ttcResult = await query( + `SELECT input_type FROM table_type_columns WHERE table_name = $1 AND column_name = $2 ${companyCondition} - ORDER BY CASE WHEN company_code = '*' THEN 1 ELSE 0 END`, - params + AND input_type = 'numbering' LIMIT 1`, + ttcParams ); - // 채번 타입인 행 찾기 (회사별 우선) - for (const row of result) { - if (row.input_type === "numbering") { - const settings = typeof row.detail_settings === "string" - ? JSON.parse(row.detail_settings || "{}") - : row.detail_settings; - - if (settings?.numberingRuleId) { - return { numberingRuleId: settings.numberingRuleId }; - } + if (ttcResult.length === 0) return null; + + // 2. numbering_rules에서 table_name + column_name으로 규칙 조회 + const ruleCompanyCondition = companyCode && companyCode !== "*" + ? `AND company_code IN ($3, '*')` + : `AND company_code = '*'`; + const ruleParams = companyCode && companyCode !== "*" + ? [tableName, columnName, companyCode] + : [tableName, columnName]; + + const ruleResult = await query( + `SELECT rule_id FROM numbering_rules + WHERE table_name = $1 AND column_name = $2 ${ruleCompanyCondition} + ORDER BY CASE WHEN company_code = '*' THEN 1 ELSE 0 END + LIMIT 1`, + ruleParams + ); + + if (ruleResult.length > 0) { + return { numberingRuleId: ruleResult[0].rule_id }; + } + + // 3. fallback: detail_settings.numberingRuleId (하위 호환) + const fallbackResult = await query( + `SELECT detail_settings FROM table_type_columns + WHERE table_name = $1 AND column_name = $2 ${companyCondition} + AND input_type = 'numbering' + ORDER BY CASE WHEN company_code = '*' THEN 1 ELSE 0 END`, + ttcParams + ); + + for (const row of fallbackResult) { + const settings = typeof row.detail_settings === "string" + ? JSON.parse(row.detail_settings || "{}") + : row.detail_settings; + if (settings?.numberingRuleId) { + return { numberingRuleId: settings.numberingRuleId }; } } @@ -540,7 +566,7 @@ class MasterDetailExcelService { /** * 특정 테이블의 모든 채번 컬럼을 한 번에 조회 - * 회사별 설정 우선, 공통(*) 설정 fallback + * numbering_rules 테이블에서 table_name + column_name으로 직접 조회 * @returns Map */ private async detectAllNumberingColumns( @@ -549,6 +575,7 @@ class MasterDetailExcelService { ): Promise> { const numberingCols = new Map(); try { + // 1. table_type_columns에서 numbering 타입 컬럼 목록 조회 const companyCondition = companyCode && companyCode !== "*" ? `AND company_code IN ($2, '*')` : `AND company_code = '*'`; @@ -556,22 +583,26 @@ class MasterDetailExcelService { ? [tableName, companyCode] : [tableName]; - const result = await query( - `SELECT column_name, detail_settings, company_code - FROM table_type_columns - WHERE table_name = $1 AND input_type = 'numbering' ${companyCondition} - ORDER BY column_name, CASE WHEN company_code = '*' THEN 1 ELSE 0 END`, + const ttcResult = await query( + `SELECT DISTINCT column_name FROM table_type_columns + WHERE table_name = $1 AND input_type = 'numbering' ${companyCondition}`, params ); - // 컬럼별로 회사 설정 우선 적용 - for (const row of result) { - if (numberingCols.has(row.column_name)) continue; // 이미 회사별 설정이 있으면 스킵 - const settings = typeof row.detail_settings === "string" - ? JSON.parse(row.detail_settings || "{}") - : row.detail_settings; - if (settings?.numberingRuleId) { - numberingCols.set(row.column_name, settings.numberingRuleId); + // 2. 각 컬럼에 대해 numbering_rules에서 규칙 조회 + for (const row of ttcResult) { + const ruleResult = await query( + `SELECT rule_id FROM numbering_rules + WHERE table_name = $1 AND column_name = $2 ${companyCondition} + ORDER BY CASE WHEN company_code = '*' THEN 1 ELSE 0 END + LIMIT 1`, + companyCode && companyCode !== "*" + ? [tableName, row.column_name, companyCode] + : [tableName, row.column_name] + ); + + if (ruleResult.length > 0) { + numberingCols.set(row.column_name, ruleResult[0].rule_id); } } diff --git a/backend-node/src/services/menuCopyService.ts b/backend-node/src/services/menuCopyService.ts index f67e09a3..af755316 100644 --- a/backend-node/src/services/menuCopyService.ts +++ b/backend-node/src/services/menuCopyService.ts @@ -3098,7 +3098,7 @@ export class MenuCopyService { } const allValuesResult = await client.query( - `SELECT * FROM table_column_category_values + `SELECT * FROM category_values WHERE company_code = $1 AND (${columnConditions.join(" OR ")}) ORDER BY depth NULLS FIRST, parent_value_id NULLS FIRST, value_order`, @@ -3115,7 +3115,7 @@ export class MenuCopyService { // 5. 대상 회사에 이미 존재하는 값 한 번에 조회 const existingValuesResult = await client.query( `SELECT value_id, table_name, column_name, value_code - FROM table_column_category_values WHERE company_code = $1`, + FROM category_values WHERE company_code = $1`, [targetCompanyCode] ); const existingValueKeys = new Map( @@ -3194,7 +3194,7 @@ export class MenuCopyService { }); const insertResult = await client.query( - `INSERT INTO table_column_category_values ( + `INSERT INTO category_values ( table_name, column_name, value_code, value_label, value_order, parent_value_id, depth, description, color, icon, is_active, is_default, created_at, created_by, company_code, menu_objid diff --git a/backend-node/src/services/multiTableExcelService.ts b/backend-node/src/services/multiTableExcelService.ts index d18f479b..7f9de79d 100644 --- a/backend-node/src/services/multiTableExcelService.ts +++ b/backend-node/src/services/multiTableExcelService.ts @@ -970,10 +970,11 @@ class MultiTableExcelService { const result = await pool.query( `SELECT c.column_name, - c.is_nullable, + c.is_nullable AS db_is_nullable, c.column_default, COALESCE(ttc.column_label, cl.column_label) AS column_label, - COALESCE(ttc.reference_table, cl.reference_table) AS reference_table + COALESCE(ttc.reference_table, cl.reference_table) AS reference_table, + COALESCE(ttc.is_nullable, cl.is_nullable) AS ttc_is_nullable FROM information_schema.columns c LEFT JOIN table_type_columns cl ON c.table_name = cl.table_name AND c.column_name = cl.column_name AND cl.company_code = '*' @@ -991,13 +992,13 @@ class MultiTableExcelService { // 시스템 컬럼 제외 if (MultiTableExcelService.SYSTEM_COLUMNS.has(colName)) continue; - // FK 컬럼 제외 (reference_table이 있는 컬럼 = 다른 테이블의 PK를 참조) - // 단, 비즈니스적으로 의미 있는 FK는 남길 수 있으므로, - // _id로 끝나면서 reference_table이 있는 경우만 제외 + // FK 컬럼 제외 if (row.reference_table && colName.endsWith("_id")) continue; const hasDefault = row.column_default !== null; - const isNullable = row.is_nullable === "YES"; + const dbNullable = row.db_is_nullable === "YES"; + const ttcNotNull = row.ttc_is_nullable === "N"; + const isNullable = ttcNotNull ? false : dbNullable; const isRequired = !isNullable && !hasDefault; columns.push({ diff --git a/backend-node/src/services/numberingRuleService.ts b/backend-node/src/services/numberingRuleService.ts index 6f6fe81c..91ae4cb5 100644 --- a/backend-node/src/services/numberingRuleService.ts +++ b/backend-node/src/services/numberingRuleService.ts @@ -172,6 +172,16 @@ class NumberingRuleService { break; } + case "reference": { + const refColumn = autoConfig.referenceColumnName; + if (refColumn && formData && formData[refColumn]) { + prefixParts.push(String(formData[refColumn])); + } else { + prefixParts.push(""); + } + break; + } + default: break; } @@ -1245,6 +1255,14 @@ class NumberingRuleService { return ""; } + case "reference": { + const refColumn = autoConfig.referenceColumnName; + if (refColumn && formData && formData[refColumn]) { + return String(formData[refColumn]); + } + return "REF"; + } + default: logger.warn("알 수 없는 파트 타입", { partType: part.partType }); return ""; @@ -1375,6 +1393,13 @@ class NumberingRuleService { return catMapping2?.format || "CATEGORY"; } + case "reference": { + const refCol2 = autoConfig.referenceColumnName; + if (refCol2 && formData && formData[refCol2]) { + return String(formData[refCol2]); + } + return "REF"; + } default: return ""; } @@ -1524,6 +1549,15 @@ class NumberingRuleService { return ""; } + case "reference": { + const refColumn = autoConfig.referenceColumnName; + if (refColumn && formData && formData[refColumn]) { + return String(formData[refColumn]); + } + logger.warn("reference 파트: 참조 컬럼 값 없음", { refColumn, formDataKeys: formData ? Object.keys(formData) : [] }); + return ""; + } + default: return ""; } @@ -1747,7 +1781,53 @@ class NumberingRuleService { `; const params = [companyCode, tableName, columnName]; - const result = await pool.query(query, params); + let result = await pool.query(query, params); + + // fallback: column_name이 비어있는 레거시 규칙 검색 + if (result.rows.length === 0) { + const fallbackQuery = ` + SELECT + r.rule_id AS "ruleId", + r.rule_name AS "ruleName", + r.description, + r.separator, + r.reset_period AS "resetPeriod", + r.current_sequence AS "currentSequence", + r.table_name AS "tableName", + r.column_name AS "columnName", + r.company_code AS "companyCode", + r.category_column AS "categoryColumn", + r.category_value_id AS "categoryValueId", + cv.value_label AS "categoryValueLabel", + r.created_at AS "createdAt", + r.updated_at AS "updatedAt", + r.created_by AS "createdBy" + FROM numbering_rules r + LEFT JOIN category_values cv ON r.category_value_id = cv.value_id + WHERE r.company_code = $1 + AND r.table_name = $2 + AND (r.column_name IS NULL OR r.column_name = '') + AND r.category_value_id IS NULL + ORDER BY r.updated_at DESC + LIMIT 1 + `; + result = await pool.query(fallbackQuery, [companyCode, tableName]); + + // 찾으면 column_name 자동 업데이트 (레거시 데이터 마이그레이션) + if (result.rows.length > 0) { + const foundRule = result.rows[0]; + await pool.query( + `UPDATE numbering_rules SET column_name = $1 WHERE rule_id = $2 AND company_code = $3`, + [columnName, foundRule.ruleId, companyCode] + ); + result.rows[0].columnName = columnName; + logger.info("레거시 채번 규칙 자동 매핑 완료", { + ruleId: foundRule.ruleId, + tableName, + columnName, + }); + } + } if (result.rows.length === 0) { logger.info("테이블+컬럼 기반 채번 규칙을 찾을 수 없음", { @@ -1760,7 +1840,6 @@ class NumberingRuleService { const rule = result.rows[0]; - // 파트 정보 조회 (테스트 테이블) const partsQuery = ` SELECT id, @@ -1779,7 +1858,7 @@ class NumberingRuleService { ]); rule.parts = extractSeparatorAfterFromParts(partsResult.rows); - logger.info("테이블+컬럼 기반 채번 규칙 조회 성공 (테스트)", { + logger.info("테이블+컬럼 기반 채번 규칙 조회 성공", { ruleId: rule.ruleId, ruleName: rule.ruleName, }); diff --git a/backend-node/src/services/tableCategoryValueService.ts b/backend-node/src/services/tableCategoryValueService.ts index dd2f73a9..96efdfbb 100644 --- a/backend-node/src/services/tableCategoryValueService.ts +++ b/backend-node/src/services/tableCategoryValueService.ts @@ -31,7 +31,7 @@ class TableCategoryValueService { tc.column_name AS "columnLabel", COUNT(cv.value_id) AS "valueCount" FROM table_type_columns tc - LEFT JOIN table_column_category_values cv + LEFT JOIN category_values cv ON tc.table_name = cv.table_name AND tc.column_name = cv.column_name AND cv.is_active = true @@ -50,7 +50,7 @@ class TableCategoryValueService { tc.column_name AS "columnLabel", COUNT(cv.value_id) AS "valueCount" FROM table_type_columns tc - LEFT JOIN table_column_category_values cv + LEFT JOIN category_values cv ON tc.table_name = cv.table_name AND tc.column_name = cv.column_name AND cv.is_active = true @@ -110,7 +110,7 @@ class TableCategoryValueService { ) tc LEFT JOIN ( SELECT table_name, column_name, COUNT(*) as cnt - FROM table_column_category_values + FROM category_values WHERE is_active = true GROUP BY table_name, column_name ) cv_count ON tc.table_name = cv_count.table_name AND tc.column_name = cv_count.column_name @@ -133,7 +133,7 @@ class TableCategoryValueService { ) tc LEFT JOIN ( SELECT table_name, column_name, COUNT(*) as cnt - FROM table_column_category_values + FROM category_values WHERE is_active = true AND company_code = $1 GROUP BY table_name, column_name ) cv_count ON tc.table_name = cv_count.table_name AND tc.column_name = cv_count.column_name @@ -207,7 +207,7 @@ class TableCategoryValueService { is_active AS "isActive", is_default AS "isDefault", company_code AS "companyCode", - NULL::numeric AS "menuObjid", + menu_objid AS "menuObjid", created_at AS "createdAt", updated_at AS "updatedAt", created_by AS "createdBy", @@ -289,7 +289,7 @@ class TableCategoryValueService { // 최고 관리자: 모든 회사에서 중복 체크 duplicateQuery = ` SELECT value_id - FROM table_column_category_values + FROM category_values WHERE table_name = $1 AND column_name = $2 AND value_code = $3 @@ -300,7 +300,7 @@ class TableCategoryValueService { // 일반 회사: 자신의 회사에서만 중복 체크 duplicateQuery = ` SELECT value_id - FROM table_column_category_values + FROM category_values WHERE table_name = $1 AND column_name = $2 AND value_code = $3 @@ -316,8 +316,41 @@ class TableCategoryValueService { throw new Error("이미 존재하는 코드입니다"); } + // 라벨 중복 체크 (같은 테이블+컬럼+회사에서 동일한 라벨명 방지) + let labelDupQuery: string; + let labelDupParams: any[]; + + if (companyCode === "*") { + labelDupQuery = ` + SELECT value_id + FROM category_values + WHERE table_name = $1 + AND column_name = $2 + AND value_label = $3 + AND is_active = true + `; + labelDupParams = [value.tableName, value.columnName, value.valueLabel]; + } else { + labelDupQuery = ` + SELECT value_id + FROM category_values + WHERE table_name = $1 + AND column_name = $2 + AND value_label = $3 + AND company_code = $4 + AND is_active = true + `; + labelDupParams = [value.tableName, value.columnName, value.valueLabel, companyCode]; + } + + const labelDupResult = await pool.query(labelDupQuery, labelDupParams); + + if (labelDupResult.rows.length > 0) { + throw new Error(`이미 동일한 이름의 카테고리 값이 존재합니다: "${value.valueLabel}"`); + } + const insertQuery = ` - INSERT INTO table_column_category_values ( + INSERT INTO category_values ( table_name, column_name, value_code, value_label, value_order, parent_value_id, depth, description, color, icon, is_active, is_default, company_code, menu_objid, created_by @@ -425,6 +458,32 @@ class TableCategoryValueService { values.push(updates.isDefault); } + // 라벨 수정 시 중복 체크 (자기 자신 제외) + if (updates.valueLabel !== undefined) { + const currentRow = await pool.query( + `SELECT table_name, column_name, company_code FROM category_values WHERE value_id = $1`, + [valueId] + ); + + if (currentRow.rows.length > 0) { + const { table_name, column_name, company_code } = currentRow.rows[0]; + const labelDupResult = await pool.query( + `SELECT value_id FROM category_values + WHERE table_name = $1 + AND column_name = $2 + AND value_label = $3 + AND company_code = $4 + AND is_active = true + AND value_id != $5`, + [table_name, column_name, updates.valueLabel, company_code, valueId] + ); + + if (labelDupResult.rows.length > 0) { + throw new Error(`이미 동일한 이름의 카테고리 값이 존재합니다: "${updates.valueLabel}"`); + } + } + } + setClauses.push(`updated_at = NOW()`); setClauses.push(`updated_by = $${paramIndex++}`); values.push(userId); @@ -436,7 +495,7 @@ class TableCategoryValueService { // 최고 관리자: 모든 카테고리 값 수정 가능 values.push(valueId); updateQuery = ` - UPDATE table_column_category_values + UPDATE category_values SET ${setClauses.join(", ")} WHERE value_id = $${paramIndex++} RETURNING @@ -459,7 +518,7 @@ class TableCategoryValueService { // 일반 회사: 자신의 카테고리 값만 수정 가능 values.push(valueId, companyCode); updateQuery = ` - UPDATE table_column_category_values + UPDATE category_values SET ${setClauses.join(", ")} WHERE value_id = $${paramIndex++} AND company_code = $${paramIndex++} @@ -516,14 +575,14 @@ class TableCategoryValueService { if (companyCode === "*") { valueQuery = ` SELECT table_name, column_name, value_code - FROM table_column_category_values + FROM category_values WHERE value_id = $1 `; valueParams = [valueId]; } else { valueQuery = ` SELECT table_name, column_name, value_code - FROM table_column_category_values + FROM category_values WHERE value_id = $1 AND company_code = $2 `; @@ -635,10 +694,10 @@ class TableCategoryValueService { if (companyCode === "*") { query = ` WITH RECURSIVE category_tree AS ( - SELECT value_id FROM table_column_category_values WHERE parent_value_id = $1 + SELECT value_id FROM category_values WHERE parent_value_id = $1 UNION ALL SELECT cv.value_id - FROM table_column_category_values cv + FROM category_values cv INNER JOIN category_tree ct ON cv.parent_value_id = ct.value_id ) SELECT value_id FROM category_tree @@ -647,11 +706,11 @@ class TableCategoryValueService { } else { query = ` WITH RECURSIVE category_tree AS ( - SELECT value_id FROM table_column_category_values + SELECT value_id FROM category_values WHERE parent_value_id = $1 AND company_code = $2 UNION ALL SELECT cv.value_id - FROM table_column_category_values cv + FROM category_values cv INNER JOIN category_tree ct ON cv.parent_value_id = ct.value_id WHERE cv.company_code = $2 ) @@ -697,10 +756,10 @@ class TableCategoryValueService { let labelParams: any[]; if (companyCode === "*") { - labelQuery = `SELECT value_label FROM table_column_category_values WHERE value_id = $1`; + labelQuery = `SELECT value_label FROM category_values WHERE value_id = $1`; labelParams = [id]; } else { - labelQuery = `SELECT value_label FROM table_column_category_values WHERE value_id = $1 AND company_code = $2`; + labelQuery = `SELECT value_label FROM category_values WHERE value_id = $1 AND company_code = $2`; labelParams = [id, companyCode]; } @@ -730,10 +789,10 @@ class TableCategoryValueService { let deleteParams: any[]; if (companyCode === "*") { - deleteQuery = `DELETE FROM table_column_category_values WHERE value_id = $1`; + deleteQuery = `DELETE FROM category_values WHERE value_id = $1`; deleteParams = [id]; } else { - deleteQuery = `DELETE FROM table_column_category_values WHERE value_id = $1 AND company_code = $2`; + deleteQuery = `DELETE FROM category_values WHERE value_id = $1 AND company_code = $2`; deleteParams = [id, companyCode]; } @@ -770,7 +829,7 @@ class TableCategoryValueService { if (companyCode === "*") { // 최고 관리자: 모든 카테고리 값 일괄 삭제 가능 deleteQuery = ` - UPDATE table_column_category_values + UPDATE category_values SET is_active = false, updated_at = NOW(), updated_by = $2 WHERE value_id = ANY($1::int[]) `; @@ -778,7 +837,7 @@ class TableCategoryValueService { } else { // 일반 회사: 자신의 카테고리 값만 일괄 삭제 가능 deleteQuery = ` - UPDATE table_column_category_values + UPDATE category_values SET is_active = false, updated_at = NOW(), updated_by = $3 WHERE value_id = ANY($1::int[]) AND company_code = $2 @@ -819,7 +878,7 @@ class TableCategoryValueService { if (companyCode === "*") { // 최고 관리자: 모든 카테고리 값 순서 변경 가능 updateQuery = ` - UPDATE table_column_category_values + UPDATE category_values SET value_order = $1, updated_at = NOW() WHERE value_id = $2 `; @@ -827,7 +886,7 @@ class TableCategoryValueService { } else { // 일반 회사: 자신의 카테고리 값만 순서 변경 가능 updateQuery = ` - UPDATE table_column_category_values + UPDATE category_values SET value_order = $1, updated_at = NOW() WHERE value_id = $2 AND company_code = $3 @@ -1379,48 +1438,23 @@ class TableCategoryValueService { let query: string; let params: any[]; + // is_active 필터 제거: 비활성화된 카테고리도 라벨로 표시되어야 함 if (companyCode === "*") { - // 최고 관리자: 두 테이블 모두에서 조회 (UNION으로 병합) - // 두 번째 쿼리용 플레이스홀더: $n+1 ~ $2n - const placeholders2 = valueCodes.map((_, i) => `$${n + i + 1}`).join(", "); query = ` - SELECT value_code, value_label FROM ( - SELECT value_code, value_label - FROM table_column_category_values - WHERE value_code IN (${placeholders1}) - AND is_active = true - UNION ALL - SELECT value_code, value_label - FROM category_values - WHERE value_code IN (${placeholders2}) - AND is_active = true - ) combined + SELECT DISTINCT value_code, value_label + FROM category_values + WHERE value_code IN (${placeholders1}) `; - params = [...valueCodes, ...valueCodes]; + params = [...valueCodes]; } else { - // 일반 회사: 두 테이블에서 자신의 카테고리 값 + 공통 카테고리 값 조회 - // 첫 번째: $1~$n (valueCodes), $n+1 (companyCode) - // 두 번째: $n+2~$2n+1 (valueCodes), $2n+2 (companyCode) - const companyIdx1 = n + 1; - const placeholders2 = valueCodes.map((_, i) => `$${n + 1 + i + 1}`).join(", "); - const companyIdx2 = 2 * n + 2; - + const companyIdx = n + 1; query = ` - SELECT value_code, value_label FROM ( - SELECT value_code, value_label - FROM table_column_category_values - WHERE value_code IN (${placeholders1}) - AND is_active = true - AND (company_code = $${companyIdx1} OR company_code = '*') - UNION ALL - SELECT value_code, value_label - FROM category_values - WHERE value_code IN (${placeholders2}) - AND is_active = true - AND (company_code = $${companyIdx2} OR company_code = '*') - ) combined + SELECT DISTINCT value_code, value_label + FROM category_values + WHERE value_code IN (${placeholders1}) + AND (company_code = $${companyIdx} OR company_code = '*') `; - params = [...valueCodes, companyCode, ...valueCodes, companyCode]; + params = [...valueCodes, companyCode]; } const result = await pool.query(query, params); @@ -1488,7 +1522,7 @@ class TableCategoryValueService { // 최고 관리자: 모든 카테고리 값 조회 query = ` SELECT value_code, value_label - FROM table_column_category_values + FROM category_values WHERE table_name = $1 AND column_name = $2 AND is_active = true @@ -1498,7 +1532,7 @@ class TableCategoryValueService { // 일반 회사: 자신의 카테고리 값 + 공통 카테고리 값 조회 query = ` SELECT value_code, value_label - FROM table_column_category_values + FROM category_values WHERE table_name = $1 AND column_name = $2 AND is_active = true diff --git a/backend-node/src/services/tableManagementService.ts b/backend-node/src/services/tableManagementService.ts index ed7ad460..6d994f93 100644 --- a/backend-node/src/services/tableManagementService.ts +++ b/backend-node/src/services/tableManagementService.ts @@ -2691,6 +2691,32 @@ export class TableManagementService { logger.info(`created_date 자동 추가: ${data.created_date}`); } + // 채번 자동 적용: input_type = 'numbering'인 컬럼에 값이 비어있으면 자동 채번 + try { + const companyCode = data.company_code || "*"; + const numberingColsResult = await query( + `SELECT DISTINCT column_name FROM table_type_columns + WHERE table_name = $1 AND input_type = 'numbering' + AND company_code IN ($2, '*')`, + [tableName, companyCode] + ); + + for (const row of numberingColsResult) { + const col = row.column_name; + if (!data[col] || data[col] === "" || data[col] === "자동 생성됩니다") { + const { numberingRuleService } = await import("./numberingRuleService"); + const rule = await numberingRuleService.getNumberingRuleByColumn(companyCode, tableName, col); + if (rule) { + const generatedCode = await numberingRuleService.allocateCode(rule.ruleId, companyCode, data); + data[col] = generatedCode; + logger.info(`채번 자동 적용: ${tableName}.${col} = ${generatedCode}`); + } + } + } + } catch (numErr: any) { + logger.warn(`채번 자동 적용 중 오류 (무시됨): ${numErr.message}`); + } + // 🆕 테이블에 존재하는 컬럼만 필터링 (존재하지 않는 컬럼은 무시) const skippedColumns: string[] = []; const existingColumns = Object.keys(data).filter((col) => { @@ -3437,10 +3463,12 @@ export class TableManagementService { } // ORDER BY 절 구성 - // sortBy가 없으면 created_date 컬럼이 있는 경우에만 기본 정렬 적용 + // sortBy가 메인 테이블 컬럼이면 main. 접두사, 조인 별칭이면 접두사 없이 사용 const hasCreatedDateColumn = selectColumns.includes("created_date"); const orderBy = options.sortBy - ? `main."${options.sortBy}" ${options.sortOrder === "desc" ? "DESC" : "ASC"}` + ? selectColumns.includes(options.sortBy) + ? `main."${options.sortBy}" ${options.sortOrder === "desc" ? "DESC" : "ASC"}` + : `"${options.sortBy}" ${options.sortOrder === "desc" ? "DESC" : "ASC"}` : hasCreatedDateColumn ? `main."created_date" DESC` : ""; @@ -3505,7 +3533,7 @@ export class TableManagementService { const referenceTableColumns = new Map(); const uniqueRefTables = new Set( joinConfigs - .filter((c) => c.referenceTable !== "table_column_category_values") // 카테고리는 제외 + .filter((c) => c.referenceTable !== "category_values") // 카테고리는 제외 .map((c) => `${c.referenceTable}:${c.sourceColumn}`) ); @@ -3684,7 +3712,9 @@ export class TableManagementService { selectColumns, "", // WHERE 절은 나중에 추가 options.sortBy - ? `main."${options.sortBy}" ${options.sortOrder || "ASC"}` + ? selectColumns.includes(options.sortBy) + ? `main."${options.sortBy}" ${options.sortOrder || "ASC"}` + : `"${options.sortBy}" ${options.sortOrder || "ASC"}` : hasCreatedDateForSearch ? `main."created_date" DESC` : undefined, @@ -3875,7 +3905,9 @@ export class TableManagementService { const whereClause = whereConditions.join(" AND "); const hasCreatedDateForOrder = selectColumns.includes("created_date"); const orderBy = options.sortBy - ? `main."${options.sortBy}" ${options.sortOrder === "desc" ? "DESC" : "ASC"}` + ? selectColumns.includes(options.sortBy) + ? `main."${options.sortBy}" ${options.sortOrder === "desc" ? "DESC" : "ASC"}` + : `"${options.sortBy}" ${options.sortOrder === "desc" ? "DESC" : "ASC"}` : hasCreatedDateForOrder ? `main."created_date" DESC` : ""; @@ -4310,8 +4342,8 @@ export class TableManagementService { ]; for (const config of joinConfigs) { - // table_column_category_values는 특수 조인 조건이 필요하므로 항상 DB 조인 - if (config.referenceTable === "table_column_category_values") { + // category_values는 특수 조인 조건이 필요하므로 항상 DB 조인 + if (config.referenceTable === "category_values") { dbJoins.push(config); console.log(`🔗 DB 조인 (특수 조건): ${config.referenceTable}`); continue; diff --git a/backend-node/src/utils/pgErrorUtil.ts b/backend-node/src/utils/pgErrorUtil.ts new file mode 100644 index 00000000..3f7c56d3 --- /dev/null +++ b/backend-node/src/utils/pgErrorUtil.ts @@ -0,0 +1,80 @@ +import { query } from "../database/db"; + +/** + * PostgreSQL 에러를 사용자 친절한 메시지로 변환 + * table_type_columns의 column_label을 조회하여 한글 라벨로 표시 + */ +export async function formatPgError( + error: any, + companyCode?: string +): Promise { + if (!error || !error.code) { + return error?.message || "데이터 처리 중 오류가 발생했습니다."; + } + + switch (error.code) { + case "23502": { + // not_null_violation + const colName = error.column || ""; + const tblName = error.table || ""; + + if (colName && tblName && companyCode) { + try { + const rows = await query( + `SELECT column_label FROM table_type_columns + WHERE table_name = $1 AND column_name = $2 AND company_code = $3 + LIMIT 1`, + [tblName, colName, companyCode] + ); + const label = rows[0]?.column_label; + if (label) { + return `필수 입력값이 누락되었습니다: ${label}`; + } + } catch { + // 라벨 조회 실패 시 컬럼명으로 폴백 + } + } + const detail = colName ? ` [${colName}]` : ""; + return `필수 입력값이 누락되었습니다.${detail}`; + } + case "23505": { + // unique_violation + const constraint = error.constraint || ""; + const tblName = error.table || ""; + // constraint 이름에서 컬럼명 추출 시도 (예: item_mst_item_code_key → item_code) + let colName = ""; + if (constraint && tblName) { + const prefix = `${tblName}_`; + const suffix = "_key"; + if (constraint.startsWith(prefix) && constraint.endsWith(suffix)) { + colName = constraint.slice(prefix.length, -suffix.length); + } + } + if (colName && tblName && companyCode) { + try { + const rows = await query( + `SELECT column_label FROM table_type_columns + WHERE table_name = $1 AND column_name = $2 AND company_code = $3 + LIMIT 1`, + [tblName, colName, companyCode] + ); + const label = rows[0]?.column_label; + if (label) { + return `중복된 데이터가 존재합니다: ${label}`; + } + } catch { + // 폴백 + } + } + const detail = colName ? ` [${colName}]` : ""; + return `중복된 데이터가 존재합니다.${detail}`; + } + case "23503": + return "참조 무결성 제약 조건 위반입니다."; + default: + if (error.code.startsWith("23")) { + return "데이터 무결성 제약 조건 위반입니다."; + } + return error.message || "데이터 처리 중 오류가 발생했습니다."; + } +} diff --git a/docs/ycshin-node/BIC[계획]-버튼-아이콘화.md b/docs/ycshin-node/BIC[계획]-버튼-아이콘화.md new file mode 100644 index 00000000..816eaa1e --- /dev/null +++ b/docs/ycshin-node/BIC[계획]-버튼-아이콘화.md @@ -0,0 +1,340 @@ +# [계획서] 버튼 아이콘화 - 화면 디자이너 버튼 표시 모드 확장 + +> 관련 문서: [맥락노트](./BIC[맥락]-버튼-아이콘화.md) | [체크리스트](./BIC[체크]-버튼-아이콘화.md) + +## 개요 + +화면 디자이너에서 버튼을 텍스트 모드(현행), 아이콘 모드, 아이콘+텍스트 모드 중 선택할 수 있도록 확장한다. +아이콘 모드 선택 시 버튼 액션에 맞는 아이콘 후보군이 제시되고, 관리자가 원하는 아이콘을 선택한다. +아이콘 크기 비율(버튼 높이 대비 4단계 프리셋), 아이콘 색상, 텍스트 위치(4방향), 아이콘-텍스트 간격 설정을 제공한다. +관리자가 lucide 검색 또는 외부 SVG 붙여넣기로 커스텀 아이콘을 추가/삭제할 수 있다. + +--- + +## 현재 동작 + +- 버튼은 항상 **텍스트 모드**로만 표시됨 +- `ButtonConfigPanel.tsx`에서 "버튼 텍스트" 입력 → 실제 화면에서 해당 텍스트가 버튼에 표시 +- 아이콘 표시 기능 없음 + +### 현재 코드 위치 + +| 구분 | 파일 | 설명 | +|------|------|------| +| 설정 패널 | `frontend/components/screen/config-panels/ButtonConfigPanel.tsx` | 버튼 텍스트, 액션 설정 (784~854행) | +| 뷰어 렌더링 | `frontend/components/screen/InteractiveScreenViewerDynamic.tsx` | 실제 버튼 렌더링 (961~983행) | +| 뷰어 렌더링 | `frontend/components/screen/InteractiveScreenViewer.tsx` | 실제 버튼 렌더링 (2041~2059행) | +| 위젯 렌더링 | `frontend/components/screen/widgets/types/ButtonWidget.tsx` | 위젯 기반 버튼 렌더링 (67~86행) | +| 최적화 컴포넌트 | `frontend/components/screen/OptimizedButtonComponent.tsx` | 최적화된 버튼 컴포넌트 (643~674행) | + +--- + +## 변경 후 동작 + +### 1. 표시 모드 선택 (라디오 그룹) + +ButtonConfigPanel에 "버튼 텍스트" 입력 위에 표시 모드 선택 UI 추가: + +- **텍스트 모드** (기본값, 현행 유지): 버튼에 텍스트만 표시 +- **아이콘 모드**: 버튼에 아이콘만 표시 +- **아이콘+텍스트 모드**: 버튼에 아이콘과 텍스트를 함께 표시 + +``` +[ 텍스트 | 아이콘 | 아이콘+텍스트 ] ← 라디오 그룹 (토글 형태) +``` + +### 2. 텍스트 모드 선택 시 + +- 현재와 동일하게 "버튼 텍스트" 입력 필드 표시 +- 변경 사항 없음 + +### 2-1. 아이콘+텍스트 모드 선택 시 + +- 아이콘 선택 UI (3장과 동일) + 버튼 텍스트 입력 필드 **둘 다 표시** +- 렌더링: 텍스트 위치에 따라 아이콘과 텍스트 배치 방향이 달라짐 +- 텍스트 위치 4방향: 오른쪽(기본), 왼쪽, 위쪽, 아래쪽 +- 예시: `[ ✓ 저장 ]` (오른쪽), `[ 저장 ✓ ]` (왼쪽), 세로 배치 (위쪽/아래쪽) +- 아이콘과 텍스트 사이 간격: 기본 6px, 관리자가 0~무제한 조절 가능 (슬라이더 0~32px + 직접 입력) + +### 3. 아이콘 모드 선택 시 + +#### 3-1. 버튼 액션별 추천 아이콘 목록 + +버튼 액션(`action.type`)에 따라 해당 액션에 어울리는 아이콘 후보군을 그리드로 표시: + +| 버튼 액션 | 값 | 추천 아이콘 (lucide-react) | +|-----------|-----|---------------------------| +| 저장 | `save` | Check, Save, CheckCircle, CircleCheck, FileCheck, ShieldCheck | +| 삭제 | `delete` | Trash2, Trash, XCircle, X, Eraser, CircleX | +| 편집 | `edit` | Pencil, PenLine, Edit, SquarePen, FilePen, PenTool | +| 페이지 이동 | `navigate` | ArrowRight, ExternalLink, MoveRight, Navigation, CornerUpRight, Link | +| 모달 열기 | `modal` | Maximize2, PanelTop, AppWindow, LayoutGrid, Layers, FolderOpen | +| 데이터 전달 | `transferData` | SendHorizontal, ArrowRightLeft, Repeat, PackageCheck, Upload, Share2 | +| 엑셀 다운로드 | `excel_download` | Download, FileDown, FileSpreadsheet, Sheet, Table, FileOutput | +| 엑셀 업로드 | `excel_upload` | Upload, FileUp, FileSpreadsheet, Sheet, ImportIcon, FileInput | +| 즉시 저장 | `quickInsert` | Zap, Plus, PlusCircle, SquarePlus, FilePlus, BadgePlus | +| 제어 흐름 | `control` | Settings, SlidersHorizontal, ToggleLeft, Workflow, GitBranch, Cog | +| 바코드 스캔 | `barcode_scan` | ScanLine, QrCode, Camera, Scan, ScanBarcode, Focus | +| 운행알림 및 종료 | `operation_control` | Truck, Car, MapPin, Navigation2, Route, Bell | +| 이벤트 발송 | `event` | Send, Bell, Radio, Megaphone, Podcast, BellRing | +| 복사 | `copy` | Copy, ClipboardCopy, Files, CopyPlus, Duplicate, ClipboardList | + +**적절한 아이콘이 없는 액션 (숨김 처리된 deprecated 액션들):** + +| 버튼 액션 | 값 | 안내 문구 | +|-----------|-----|----------| +| 연관 데이터 버튼 모달 열기 | `openRelatedModal` | 안내 문구 표시 + 커스텀 아이콘 추가 가능 | +| (deprecated) 데이터 전달 + 모달 | `openModalWithData` | 안내 문구 표시 + 커스텀 아이콘 추가 가능 | +| 테이블 이력 보기 | `view_table_history` | 안내 문구 표시 + 커스텀 아이콘 추가 가능 | +| 코드 병합 | `code_merge` | 안내 문구 표시 + 커스텀 아이콘 추가 가능 | +| 공차등록 | `empty_vehicle` | 안내 문구 표시 + 커스텀 아이콘 추가 가능 | + +> 안내 문구: "적절한 추천 아이콘이 없습니다. 텍스트 모드를 사용하거나 아래에서 아이콘을 직접 추가하세요." +> 안내 문구 아래에 커스텀 아이콘 목록 + lucide 검색/SVG 붙여넣기 버튼이 표시됨 + +#### 3-2. 아이콘 선택 UI + +- 액션별 추천 아이콘을 4~6열 그리드로 표시 +- 각 아이콘은 32x32 크기, 호버 시 하이라이트, 선택 시 ring 표시 +- 아이콘 아래에 이름 표시 (`text-[10px]`) +- 관리자가 추가한 커스텀 아이콘이 있으면 "커스텀 아이콘" 구분선 아래 함께 표시 + +#### 3-3. 아이콘 크기 비율 설정 + +버튼 높이 대비 비율로 아이콘 크기를 설정 (정사각형 유지): + +**프리셋 (ToggleGroup, 4단계):** + +| 이름 | 버튼 높이 대비 | 설명 | +|------|--------------|------| +| 작게 | 40% | 컴팩트한 아이콘 | +| 보통 | 55% | 기본값, 대부분의 버튼에 적합 | +| 크게 | 70% | 존재감 있는 크기 | +| 매우 크게 | 85% | 아이콘 강조, 버튼에 꽉 차는 느낌 | + +- px 직접 입력은 제거 (비율 기반이므로 버튼 크기 변경 시 아이콘도 자동 비례) +- 저장: `icon.size`에 프리셋 문자열(`"보통"`) 저장 +- 렌더링: `height: N%` + `aspect-ratio: 1/1`로 정사각형 유지 + +#### 3-4. 아이콘 색상 설정 + +아이콘 크기 아래에 아이콘 전용 색상 설정: + +- **컬러 피커**: 기존 버튼 색상 설정과 동일한 UI 사용 +- **기본값**: 미설정 (= `textColor` 상속, 기존 동작과 동일) +- **설정 시**: lucide 아이콘은 지정한 색상으로 덮어쓰기 +- **외부 SVG**: 고유 색상이 하드코딩된 SVG는 이 설정의 영향을 받지 않음 (원본 유지) +- **초기화 버튼**: "텍스트 색상과 동일" 버튼으로 별도 색상 해제 가능 + +| 상황 | iconColor 설정 | 결과 | +|------|---------------|------| +| lucide 아이콘, iconColor 미설정 | 없음 | textColor 상속 (기존 동작) | +| lucide 아이콘, iconColor 설정 | `#22c55e` | 초록색 아이콘 | +| 외부 SVG (고유 색상), iconColor 설정 | `#22c55e` | SVG 원본 색상 유지 (무시) | +| 외부 SVG (currentColor), iconColor 설정 | `#22c55e` | 초록색 아이콘 | + +#### 3-5. 텍스트 위치 설정 (아이콘+텍스트 모드 전용) + +아이콘 대비 텍스트의 배치 방향을 4방향으로 설정: + +| 위치 | 값 | 레이아웃 | 설명 | +|------|-----|---------|------| +| 왼쪽 | `left` | `텍스트 ← 아이콘` | 텍스트가 아이콘 왼쪽 (가로) | +| 오른쪽 | `right` | `아이콘 → 텍스트` | 기본값, 아이콘 뒤에 텍스트 (가로) | +| 위쪽 | `top` | 텍스트 위, 아이콘 아래 | 세로 배치 | +| 아래쪽 | `bottom` | 아이콘 위, 텍스트 아래 | 세로 배치 | + +- 기본값: `"right"` (아이콘 오른쪽에 텍스트) +- 저장: `componentConfig.iconTextPosition` +- 아이콘 모드에서는 이 옵션이 숨겨짐 (텍스트가 없으므로 불필요) + +#### 3-6. 아이콘-텍스트 간격 설정 (아이콘+텍스트 모드 전용) + +아이콘+텍스트 모드에서 아이콘과 텍스트 사이 간격을 조절: + +- **슬라이더**: 0~32px 범위 시각적 조절 +- **직접 입력**: px 수치 직접 입력 (최솟값 0, 최댓값 제한 없음) +- **기본값**: 6px +- 아이콘 모드에서는 이 옵션이 숨겨짐 (텍스트가 없으므로 불필요) + +#### 3-7. 아이콘 모드 레이아웃 안내 + +아이콘만 표시하면 텍스트보다 좁은 공간으로 충분하므로 안내 문구 표시: + +``` +ℹ 아이콘만 표시할 때는 버튼 영역의 가로 폭을 줄여 정사각형에 가깝게 만들면 더 깔끔합니다. +``` + +- `bg-blue-50 dark:bg-blue-950/20` 배경의 안내 박스 +- 아이콘 모드(`"icon"`)에서만 표시, 아이콘+텍스트 모드에서는 숨김 + +#### 3-8. 디폴트 아이콘 자동 부여 + +아이콘/아이콘+텍스트 모드 전환 시 아이콘이 미선택 상태이면 **디폴트 아이콘을 자동으로 부여**한다. + +| 상황 | 디폴트 아이콘 | +|------|-------------| +| 추천 아이콘이 있는 액션 (save, delete 등) | 해당 액션의 **첫 번째 추천 아이콘** (예: save → Check) | +| 추천 아이콘이 없는 액션 (deprecated 등) | 범용 폴백 아이콘: `SquareMousePointer` | + +**커스텀 아이콘 삭제 시:** +- 현재 선택된 커스텀 아이콘을 삭제하면 **디폴트 아이콘으로 자동 복귀** (텍스트 모드로 빠지지 않음) +- 아이콘 모드를 유지한 채 디폴트 아이콘이 캔버스에 즉시 반영됨 + +#### 3-9. 커스텀 아이콘 추가/삭제 + +**방법 1: lucide 아이콘 검색으로 추가** +- "아이콘 추가" 버튼 클릭 시 lucide 아이콘 전체 검색 가능한 모달/팝오버 표시 +- 검색 입력 → 아이콘 이름으로 필터링 → 선택하면 커스텀 목록에 추가 + +**방법 2: 외부 SVG 붙여넣기로 추가** +- "SVG 붙여넣기" 버튼 클릭 시 텍스트 입력 영역(textarea) 표시 +- 외부에서 복사한 SVG 코드를 붙여넣기 → 미리보기로 확인 → "추가" 버튼으로 등록 +- SVG 유효성 검사: `; + action: { + type: string; // 기존: 버튼 액션 타입 + // ...기존 action 속성들 유지 + }; +} +``` + +### 저장 예시 + +```json +{ + "text": "저장", + "displayMode": "icon", + "icon": { + "name": "Check", + "type": "lucide", + "size": "보통", + "color": "#22c55e" + }, + "customIcons": ["Rocket", "Star"], + "customSvgIcons": [ + { + "name": "회사로고", + "svg": "..." + } + ], + "action": { + "type": "save" + } +} +``` + +--- + +## 시각적 동작 예시 + +### ButtonConfigPanel (디자이너 편집 모드) + +``` +표시 모드: [ 텍스트 | (아이콘) | 아이콘+텍스트 ] ← 아이콘 선택됨 + +아이콘 선택: +┌──────────────────────────────────┐ +│ 추천 아이콘 (저장) │ +│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ +│ │ ✓ │ │ 💾 │ │ ✓○ │ │ ○✓ │ │ +│ │Check│ │Save│ │Chk○│ │○Chk│ │ +│ └────┘ └────┘ └────┘ └────┘ │ +│ ┌────┐ ┌────┐ │ +│ │📄✓│ │🛡✓│ │ +│ │FChk│ │ShCk│ │ +│ └────┘ └────┘ │ +│ │ +│ ── 커스텀 아이콘 ── │ +│ ┌────┐ ┌────┐ ┌────┐ │ +│ │ 🚀 │ │ ⭐ │ │[로고]│ │ +│ │Rckt │ │Star│ │회사 │ │ +│ │ ✕ │ │ ✕│ │ ✕ │ │ +│ └────┘ └────┘ └────┘ │ +│ [+ lucide 검색] [+ SVG 붙여넣기]│ +└──────────────────────────────────┘ + +아이콘 크기 비율: [ 작게 | (보통) | 크게 | 매우 크게 ] +텍스트 위치: [ 왼쪽 | (오른쪽) | 위쪽 | 아래쪽 ] ← 아이콘+텍스트 모드에서만 표시 +아이콘-텍스트 간격: [━━━━━○━━] [6] px ← 아이콘+텍스트 모드에서만 표시 +아이콘 색상: [■ #22c55e] [텍스트 색상과 동일] + +ℹ 아이콘만 표시할 때는 버튼 영역의 가로 폭을 줄여 정사각형에 가깝게 만들면 더 깔끔합니다. +``` + +### 실제 화면 렌더링 + +| 모드 | 표시 | +|------|------| +| 텍스트 모드 | `[ 저장 ]` | +| 아이콘 모드 (보통, 55%) | `[ ✓ ]` | +| 아이콘 모드 (매우 크게, 85%) | `[ ✓ ]` | +| 아이콘+텍스트 (텍스트 오른쪽) | `[ ✓ 저장 ]` (간격 6px) | +| 아이콘+텍스트 (텍스트 왼쪽) | `[ 저장 ✓ ]` | +| 아이콘+텍스트 (텍스트 아래쪽) | 아이콘 위, 텍스트 아래 (세로) | +| 아이콘+텍스트 (색상 분리) | `[ 초록✓ 검정저장 ]` | + +--- + +## 변경 대상 + +### 수정 파일 + +| 파일 | 변경 내용 | +|------|----------| +| `ButtonConfigPanel.tsx` | 표시 모드 3종 라디오, 아이콘 그리드, 크기, 색상, 간격 설정, 레이아웃 안내, 커스텀 아이콘 UI | +| `InteractiveScreenViewerDynamic.tsx` | `displayMode` 3종 분기 → 아이콘/아이콘+텍스트/텍스트 렌더링 | +| `InteractiveScreenViewer.tsx` | 동일 분기 추가 | +| `ButtonWidget.tsx` | 동일 분기 추가 | +| `OptimizedButtonComponent.tsx` | 동일 분기 추가 | +| `ScreenDesigner.tsx` | 입력 필드 포커스 시 키보드 단축키 기본 동작 허용 (Ctrl+A/C/V/Z) | +| `RealtimePreviewDynamic.tsx` | 버튼 컴포넌트 position wrapper에서 border 속성 분리 (이중 테두리 방지) | + +### 신규 파일 + +| 파일 | 내용 | +|------|------| +| `frontend/lib/button-icon-map.ts` | 버튼 액션별 추천 아이콘 매핑 + 아이콘 동적 렌더링 유틸 | + +--- + +## 설계 원칙 + +- 기본값은 `"text"` 모드 → 기존 모든 버튼은 변경 없이 동작 +- `displayMode`가 없거나 `"text"`이면 현행 텍스트 렌더링 유지 +- 아이콘/아이콘+텍스트 모드 전환 시 아이콘 미선택이면 **디폴트 아이콘 자동 부여** (빈 상태 방지) +- 커스텀 아이콘 삭제 시 텍스트 모드로 빠지지 않고 **디폴트 아이콘으로 자동 복귀** +- 아이콘 모드에서도 `text` 값은 유지 (접근성 aria-label로 활용) +- 기본 아이콘은 lucide-react 사용 (프로젝트 일관성) +- 외부 SVG 붙여넣기도 지원 → 관리자가 회사 로고 등 자체 아이콘을 등록 가능 +- lucide 커스텀 아이콘은 `componentConfig.customIcons`에, SVG 아이콘은 `componentConfig.customSvgIcons`에 저장 +- lucide 아이콘 렌더링: 아이콘 이름 → 컴포넌트 매핑, SVG 아이콘 렌더링: `dangerouslySetInnerHTML` + DOMPurify 정화 diff --git a/docs/ycshin-node/BIC[맥락]-버튼-아이콘화.md b/docs/ycshin-node/BIC[맥락]-버튼-아이콘화.md new file mode 100644 index 00000000..f4b2b16d --- /dev/null +++ b/docs/ycshin-node/BIC[맥락]-버튼-아이콘화.md @@ -0,0 +1,263 @@ +# [맥락노트] 버튼 아이콘화 - 화면 디자이너 버튼 표시 모드 확장 + +> 관련 문서: [계획서](./BIC[계획]-버튼-아이콘화.md) | [체크리스트](./BIC[체크]-버튼-아이콘화.md) + +--- + +## 왜 이 작업을 하는가 + +- 현재 모든 버튼은 텍스트로만 표시 → 버튼 영역이 넓어야 하고, 모바일/태블릿에서 공간 효율이 낮음 +- "저장", "삭제", "추가" 같은 자주 쓰는 버튼은 아이콘만으로 충분히 인식 가능 +- 관리자가 화면 레이아웃을 더 컴팩트하게 구성할 수 있도록 선택권 제공 +- 단, "출하 계획" 같이 아이콘화가 어려운 특수 버튼이 존재하므로 텍스트 모드도 반드시 유지 + +--- + +## 핵심 결정 사항과 근거 + +### 1. 표시 모드는 3종 라디오 그룹(토글 형태)으로 구현 + +- **결정**: `ToggleGroup` 형태의 세 개 옵션 (텍스트 / 아이콘 / 아이콘+텍스트) +- **근거**: 세 모드는 상호 배타적. 아이콘+텍스트 병합 모드가 있어야 `[ + 추가 ]`, `[ 💾 저장 ]` 같은 실무 패턴을 지원. 아이콘만으로 의미 전달이 부족한 경우 텍스트를 병기하면 사용자 인식 속도가 빨라짐 +- **대안 검토**: Switch(토글) → 기각 ("무엇이 켜지는지" 직관적이지 않음, 3종 불가) + +### 2. 기본값은 텍스트 모드 + +- **결정**: `displayMode` 기본값 = `"text"` +- **근거**: 기존 모든 버튼은 텍스트로 동작 중. 아이콘 모드는 명시적으로 선택해야만 적용되어야 하위 호환성이 보장됨 +- **중요**: `displayMode`가 `undefined`이거나 `"text"`이면 현행 동작 그대로 유지 + +### 3. 아이콘은 버튼 액션(action.type)에 연동 + +- **결정**: 버튼 액션을 변경하면 해당 액션에 맞는 추천 아이콘 목록이 자동으로 갱신됨 +- **근거**: 관리자가 "저장" 아이콘을 고른 뒤 액션을 "삭제"로 바꾸면 혼란 발생. 액션별로 적절한 아이콘 후보를 보여주는 것이 자연스러움 +- **주의**: 액션 변경 시 이전에 선택한 아이콘이 새 액션의 추천 목록에 없으면 선택 초기화 + +### 4. 액션별 아이콘은 6개씩 제공, 적절한 아이콘이 없으면 안내 문구 + +- **결정**: 활성 액션 14개 각각에 6개의 lucide-react 아이콘 후보 제공 +- **근거**: 너무 적으면 선택지 부족, 너무 많으면 선택 피로. 6개가 2행 그리드로 깔끔하게 표시됨 +- **deprecated/숨김 액션**: UI에서 숨김 처리된 액션은 추천 아이콘 없이 안내 문구만 표시 + +### 5. 커스텀 아이콘 추가는 2가지 방법 제공 + +- **결정**: (1) lucide 아이콘 검색 + (2) 외부 SVG 붙여넣기 두 가지 경로 제공 +- **근거**: lucide 내장 아이콘만으로는 부족한 경우 존재 (회사 로고, 업종별 특수 아이콘 등). 외부에서 가져온 SVG를 직접 붙여넣기로 등록할 수 있어야 실무 유연성 확보 +- **lucide 추가**: "lucide 검색" 버튼 → 팝오버에서 검색 → 선택 → `customIcons` 배열에 이름 추가 +- **SVG 추가**: "SVG 붙여넣기" 버튼 → textarea에 SVG 코드 붙여넣기 → 미리보기 확인 → 이름 입력 → `customSvgIcons` 배열에 `{ name, svg }` 저장 +- **SVG 유효성**: ``, `onload` 같은 악성 코드가 포함될 수 있으므로 XSS 방지 필수 +- **렌더링**: 정화된 SVG를 `dangerouslySetInnerHTML`로 렌더링 (정화 후이므로 안전) +- **대안 검토**: SVG를 이미지 파일로 업로드 → 기각 (관리자 입장에서 복사-붙여넣기가 훨씬 간편) + +### 6. 아이콘 색상은 별도 설정, 기본값은 textColor 상속 + +- **결정**: `icon.color` 옵션 추가. 미설정 시 `textColor`를 상속, 설정하면 아이콘만 해당 색상 적용 +- **근거**: 아이콘+텍스트 모드에서 `[ 초록✓ 검정저장 ]` 같이 아이콘과 텍스트 색을 분리하고 싶은 경우 존재. 삭제 버튼에 빨간 아이콘 + 흰 텍스트 같은 세밀한 디자인도 가능 +- **기본값**: 미설정 (= `textColor` 상속) → 설정하지 않으면 기존 동작과 100% 동일 +- **외부 SVG**: `fill`이 하드코딩된 SVG는 이 설정 무시 (SVG 원본 색상 유지가 의도). `currentColor`를 사용하는 SVG만 영향받음 +- **구현**: 아이콘을 ``으로 감싸서 아이콘만 색상 분리 +- **초기화**: "텍스트 색상과 동일" 버튼으로 별도 색상 해제 → `icon.color` 삭제 + +### 7. 아이콘 크기는 버튼 높이 대비 비율(%) 프리셋 4단계 + +- **결정**: 작게(40%) / 보통(55%) / 크게(70%) / 매우 크게(85%) — 버튼 높이 대비 비율 +- **근거**: 절대 px 값은 버튼 크기가 바뀌면 비율이 깨짐. 비율 기반이면 버튼 크기를 조정해도 아이콘이 자동으로 비례하여 일관된 시각적 균형 유지 +- **기본값**: `"보통"` (55%) — 대부분의 버튼 크기에 적합 +- **px 직접 입력 제거**: 관리자에게 과도한 선택지를 주면 오히려 일관성이 깨짐. 4단계 프리셋만으로 충분 +- **구현**: CSS `height: N%` + `aspect-ratio: 1/1`로 정사각형 유지, lucide 아이콘은 래핑 span으로 크기 제어 +- **레거시 호환**: 기존 `"sm"`, `"md"` 등 레거시 값은 55%(보통)로 자동 폴백 + +### 8. 아이콘 동적 렌더링은 매핑 객체 방식 + +- **결정**: lucide-react 아이콘 이름(string) → 실제 컴포넌트 매핑 객체를 별도 파일로 관리 +- **근거**: `import * from 'lucide-react'`는 번들 크기에 영향. 사용하는 아이콘만 명시적으로 매핑 +- **파일**: `frontend/lib/button-icon-map.ts` +- **구현**: `Record` 형태의 매핑 + `renderIcon(name, size)` 유틸 함수 + +### 9. 아이콘 모드에서도 text 값은 유지 + +- **결정**: `displayMode === "icon"`이어도 `text` 필드는 삭제하지 않음 +- **근거**: 접근성(`aria-label`), 검색/필터링 등에 텍스트가 필요할 수 있음 +- **렌더링**: 아이콘 모드에서는 `text`를 `aria-label` 용도로만 보존 +- **아이콘+텍스트 모드**: `text`가 아이콘 오른쪽에 함께 렌더링됨 + +### 10. 아이콘-텍스트 간격 설정 추가 + +- **결정**: 아이콘+텍스트 모드에서 아이콘과 텍스트 사이 간격을 관리자가 조절 가능 (`iconGap`) +- **근거**: 고정 `gap-1.5`(6px)로는 다양한 버튼 크기/디자인에 대응 불가. 간격이 좁으면 답답하고, 넓으면 분리되어 보이는 경우가 있어 관리자에게 조절 권한 제공 +- **기본값**: 6px (기존 `gap-1.5`와 동일) +- **UI**: 슬라이더(0~32px) + 숫자 직접 입력(최댓값 제한 없음) +- **저장**: `componentConfig.iconGap` (숫자) + +### 11. 키보드 단축키 입력 필드 충돌 해결 + +- **결정**: `ScreenDesigner`의 글로벌 키보드 핸들러에서 입력 필드 포커스 시 앱 단축키를 무시하도록 수정 +- **근거**: SVG 붙여넣기 textarea에서 Ctrl+V/A/C/Z가 작동하지 않는 치명적 UX 문제 발견. 글로벌 `keydown` 핸들러가 `{ capture: true }`로 모든 키보드 이벤트를 가로채고 있었음 +- **수정**: `browserShortcuts` 일괄 차단과 앱 전용 단축키 처리 앞에 `e.target`/`document.activeElement` 기반 입력 필드 감지 가드 추가 +- **영향**: input, textarea, select, contentEditable 요소에서 텍스트 편집 단축키가 정상 동작 + +### 12. noIconAction에서 커스텀 아이콘 추가 허용 + +- **결정**: 추천 아이콘이 없는 deprecated 액션에서도 커스텀 아이콘(lucide 검색, SVG 붙여넣기) 추가 가능 +- **근거**: "적절한 아이콘이 없습니다" 문구만 표시하고 아이콘 추가를 완전 차단하면 관리자가 필요한 아이콘을 직접 등록할 방법이 없음. 추천은 없지만 직접 추가는 허용해야 유연성 확보 +- **안내 문구**: "적절한 추천 아이콘이 없습니다. 텍스트 모드를 사용하거나 아래에서 아이콘을 직접 추가하세요." + +### 13. 아이콘 모드 레이아웃 안내 문구 + +- **결정**: 아이콘 모드(`"icon"`) 선택 시 "버튼 영역의 가로 폭을 줄여 정사각형에 가깝게 만들면 더 깔끔합니다" 안내 표시 +- **근거**: 아이콘 자체는 항상 정사각형(24x24 viewBox)이지만, 디자이너에서 버튼 컨테이너는 가로로 넓은 직사각형이 기본. 아이콘만 넣으면 좌우 여백이 과다해 보이므로 버튼 영역을 줄이라는 안내가 필요. 자동 크기 조정은 기존 레이아웃을 깨뜨릴 위험이 있어 도입하지 않되, 관리자에게 팁을 제공하면 스스로 최적화할 수 있음 +- **표시 조건**: `displayMode === "icon"`일 때만 (아이콘+텍스트 모드는 가로 공간이 필요하므로 해당 안내 불필요) +- **대안 검토**: 자동 정사각형 조정 → 기각 (관리자 수동 레이아웃 파괴 위험) + +### 14. 디폴트 아이콘 자동 부여 + +- **결정**: 아이콘/아이콘+텍스트 모드 전환 시 아이콘이 미선택이면 디폴트 아이콘을 자동으로 부여. 커스텀 아이콘 삭제 시에도 텍스트 모드로 빠지지 않고 디폴트 아이콘으로 복귀 +- **근거**: 아이콘 모드로 전환했는데 아무것도 안 보이면 "기능이 작동하지 않는다"는 착각을 유발. 또한 커스텀 아이콘을 삭제했을 때 갑자기 텍스트로 빠지면 관리자가 의도치 않은 모드 변경을 경험하게 됨 +- **디폴트 선택 기준**: 해당 액션의 첫 번째 추천 아이콘 (예: save → Check). 추천 아이콘이 없는 액션은 범용 폴백 `SquareMousePointer` 사용 +- **구현**: `getDefaultIconForAction(actionType)` 유틸 함수로 중앙화 (`button-icon-map.tsx`) +- **폴백 아이콘**: `SquareMousePointer` — 마우스 포인터 + 사각형 형태로 "버튼 클릭 동작"을 범용적으로 표현 + +### 15. 아이콘+텍스트 모드에서 텍스트 위치 4방향 지원 + +- **결정**: 아이콘 대비 텍스트 위치를 왼쪽/오른쪽/위쪽/아래쪽 4방향으로 설정 가능 +- **근거**: 기존에는 아이콘 오른쪽에 텍스트 고정이었으나, 세로 배치(위/아래)가 필요한 경우도 존재 (좁고 높은 버튼, 툴바 스타일). 4방향을 제공하면 관리자가 버튼 모양에 맞게 레이아웃 선택 가능 +- **기본값**: `"right"` (아이콘 오른쪽에 텍스트) — 가장 자연스러운 좌→우 읽기 방향 +- **구현**: `flexDirection` (row/column) + 요소 순서 (textFirst) 조합으로 4방향 구현 +- **저장**: `componentConfig.iconTextPosition` +- **표시 조건**: 아이콘+텍스트 모드에서만 표시 (아이콘 모드, 텍스트 모드에서는 숨김) + +### 16. 버튼 컴포넌트 테두리 이중 적용 문제 해결 + +- **결정**: `RealtimePreviewDynamic`의 position wrapper에서 버튼 컴포넌트의 border 속성을 분리(strip) +- **근거**: StyleEditor에서 설정한 border가 (1) position wrapper와 (2) 내부 버튼 요소 두 곳에 모두 적용되어 이중 테두리 발생. border는 내부 버튼(`buttonElementStyle`)에서만 렌더링해야 함 +- **수정 파일**: `RealtimePreviewDynamic.tsx` — `isButtonComponent` 조건에 `v2-button-primary` 추가하여 border strip 대상에 포함 +- **수정 파일**: `ButtonPrimaryComponent.tsx` — 외부 wrapper(`componentStyle`)에서 border 속성 destructure로 제거, `border: "none"` shorthand 대신 개별 longhand 속성으로 변경 (borderStyle 미설정 시 기본 `"solid"` 적용) + +### 17. 커스텀 아이콘 검색은 lucide 전체 목록 기반 + +- **결정**: lucide-react에서 export되는 전체 아이콘 이름 목록을 검색 가능 +- **근거**: 관리자가 "어떤 아이콘이 있는지" 모르므로 검색 기능이 필수 +- **구현**: lucide 아이콘 이름 배열을 상수로 관리하고, CommandInput으로 필터링 +- **주의**: 전체 아이콘 컴포넌트를 import하지 않고, 이름 배열만 관리 → 선택 시에만 해당 아이콘을 매핑에 추가 + +--- + +## 관련 파일 위치 + +| 구분 | 파일 경로 | 설명 | +|------|----------|------| +| 설정 패널 (수정) | `frontend/components/screen/config-panels/ButtonConfigPanel.tsx` | 버튼 텍스트/액션 설정 (784~854행에 모드 선택 추가) | +| 뷰어 렌더링 (수정) | `frontend/components/screen/InteractiveScreenViewerDynamic.tsx` | 버튼 렌더링 분기 (961~983행) | +| 뷰어 렌더링 (수정) | `frontend/components/screen/InteractiveScreenViewer.tsx` | 버튼 렌더링 분기 (2041~2059행) | +| 위젯 (수정) | `frontend/components/screen/widgets/types/ButtonWidget.tsx` | 위젯 기반 버튼 렌더링 (67~86행) | +| 최적화 버튼 (수정) | `frontend/components/screen/OptimizedButtonComponent.tsx` | 최적화된 버튼 렌더링 (643~674행) | +| 아이콘 매핑 (신규) | `frontend/lib/button-icon-map.ts` | 액션별 추천 아이콘 + 동적 렌더링 유틸 | +| 타입 정의 (참고) | `frontend/types/screen.ts` | ComponentData, componentConfig 타입 | + +--- + +## 기술 참고 + +### lucide-react 아이콘 동적 렌더링 + +```typescript +// button-icon-map.ts +import { Check, Save, Trash2, Pencil, ... } from "lucide-react"; + +const iconMap: Record> = { + Check, Save, Trash2, Pencil, ... +}; + +export function renderButtonIcon(name: string, size: string | number) { + const IconComponent = iconMap[name]; + if (!IconComponent) return null; + return ; +} +``` + +### 아이콘 크기 비율 매핑 (버튼 높이 대비 %) + +```typescript +const iconSizePresets: Record = { + "작게": 40, + "보통": 55, + "크게": 70, + "매우 크게": 85, +}; + +// 프리셋 문자열 → 비율(%) 반환. 레거시 값은 55(보통)로 폴백 +export function getIconPercent(size: string | number): number { + if (typeof size === "number") return size; + return iconSizePresets[size] ?? 55; +} + +// 버튼 높이 대비 비율 + 정사각형 유지 +export function getIconSizeStyle(size: string | number): React.CSSProperties { + const pct = getIconPercent(size); + return { height: `${pct}%`, width: "auto", aspectRatio: "1 / 1" }; +} +``` + +### 외부 SVG 아이콘 렌더링 + +```typescript +import DOMPurify from "dompurify"; + +export function renderSvgIcon(svgString: string, size: string | number) { + const clean = DOMPurify.sanitize(svgString, { USE_PROFILES: { svg: true } }); + return ( + + ); +} +``` + +### 버튼 액션별 추천 아이콘 구조 + +```typescript +const actionIconMap: Record = { + save: ["Check", "Save", "CheckCircle", "CircleCheck", "FileCheck", "ShieldCheck"], + delete: ["Trash2", "Trash", "XCircle", "X", "Eraser", "CircleX"], + // ... +}; +``` + +### 현재 버튼 액션 목록 (활성) + +| 값 | 표시명 | 아이콘화 가능 | +|-----|--------|-------------| +| `save` | 저장 | O | +| `delete` | 삭제 | O | +| `edit` | 편집 | O | +| `navigate` | 페이지 이동 | O | +| `modal` | 모달 열기 | O | +| `transferData` | 데이터 전달 | O | +| `excel_download` | 엑셀 다운로드 | O | +| `excel_upload` | 엑셀 업로드 | O | +| `quickInsert` | 즉시 저장 | O | +| `control` | 제어 흐름 | O | +| `barcode_scan` | 바코드 스캔 | O | +| `operation_control` | 운행알림 및 종료 | O | +| `event` | 이벤트 발송 | O | +| `copy` | 복사 (품목코드 초기화) | O | + +### 현재 버튼 액션 목록 (숨김/deprecated) + +| 값 | 표시명 | 아이콘화 가능 | +|-----|--------|-------------| +| `openRelatedModal` | 연관 데이터 버튼 모달 열기 | X (적절한 아이콘 없음) | +| `openModalWithData` | (deprecated) 데이터 전달 + 모달 | X | +| `view_table_history` | 테이블 이력 보기 | X | +| `code_merge` | 코드 병합 | X | +| `empty_vehicle` | 공차등록 | X | diff --git a/docs/ycshin-node/BIC[체크]-버튼-아이콘화.md b/docs/ycshin-node/BIC[체크]-버튼-아이콘화.md new file mode 100644 index 00000000..a02a15b1 --- /dev/null +++ b/docs/ycshin-node/BIC[체크]-버튼-아이콘화.md @@ -0,0 +1,158 @@ +# [체크리스트] 버튼 아이콘화 - 화면 디자이너 버튼 표시 모드 확장 + +> 관련 문서: [계획서](./BIC[계획]-버튼-아이콘화.md) | [맥락노트](./BIC[맥락]-버튼-아이콘화.md) + +--- + +## 공정 상태 + +- 전체 진행률: **100%** (전 단계 구현 및 검증 완료) +- 현재 단계: 완료 + +--- + +## 구현 체크리스트 + +### 1단계: 아이콘 매핑 파일 생성 + +- [x] `frontend/lib/button-icon-map.tsx` 생성 +- [x] 버튼 액션별 추천 아이콘 매핑 (`actionIconMap`) 정의 (14개 액션 x 6개 아이콘) +- [x] 아이콘 크기 비율 매핑 (`iconSizePresets`) 정의 (작게/보통/크게/매우 크게, 버튼 높이 대비 %) + `getIconSizeStyle()` 유틸 +- [x] lucide 아이콘 동적 렌더링 포함 `getButtonDisplayContent()` 구현 +- [x] SVG 아이콘 렌더링 (DOMPurify 정화 via `isomorphic-dompurify`) +- [x] 아이콘 이름 → 컴포넌트 매핑 객체 (`iconMap`) + `addToIconMap()` 동적 추가 +- [x] deprecated 액션용 안내 문구 상수 (`NO_ICON_MESSAGE`) 정의 +- [x] `isomorphic-dompurify` 기존 설치 확인 (추가 설치 불필요) +- [x] `ButtonIconRenderer` 공용 컴포넌트 추가 (모든 렌더러에서 재사용) +- [x] `getDefaultIconForAction()` 디폴트 아이콘 유틸 함수 추가 (액션별 첫 번째 추천 / 범용 폴백) +- [x] `FALLBACK_ICON_NAME` 상수 + `SquareMousePointer` import/매핑 추가 + +### 2단계: ButtonConfigPanel 수정 + +- [x] 표시 모드 버튼 그룹 UI 추가 (텍스트 / 아이콘 / 아이콘+텍스트) +- [x] `displayMode` 상태 관리 및 `onUpdateProperty` 연동 +- [x] 아이콘 모드 선택 시 조건부 UI 분기 (텍스트 입력 숨김 → 아이콘 선택 표시) +- [x] 아이콘+텍스트 모드 선택 시 아이콘 선택 + 텍스트 입력 **동시** 표시 +- [x] 버튼 액션별 추천 아이콘 그리드 렌더링 (4열 그리드) +- [x] 선택된 아이콘 하이라이트 (`ring-2 ring-primary/30 border-primary`) +- [x] 아이콘 크기 비율 프리셋 버튼 그룹 (작게/보통/크게/매우 크게, 한글 라벨) +- [x] px 직접 입력 필드 제거 (비율 프리셋만 제공) +- [x] `icon.name`, `icon.size` 를 `onUpdateProperty`로 저장 +- [x] 아이콘 색상 컬러 피커 구현 (`ColorPickerWithTransparent` 재사용) +- [x] "텍스트 색상과 동일" 초기화 버튼 구현 +- [x] 텍스트 위치 4방향 설정 추가 (`iconTextPosition`, 왼쪽/오른쪽/위쪽/아래쪽) +- [x] 아이콘-텍스트 간격 설정 추가 (`iconGap`, 슬라이더 + 직접 입력, 아이콘+텍스트 모드 전용) +- [x] 아이콘 모드 레이아웃 안내 문구 표시 (Info 아이콘 + bg-blue-50 박스) +- [x] 액션 변경 시 선택 아이콘 자동 초기화 로직 (추천 목록에 없으면 해제) +- [x] deprecated 액션에서 안내 문구 + 커스텀 아이콘 추가 버튼 표시 +- [x] 아이콘/아이콘+텍스트 모드 전환 시 아이콘 미선택이면 디폴트 아이콘 자동 부여 +- [x] 커스텀 아이콘 삭제 시 디폴트 아이콘으로 자동 복귀 (텍스트 모드 전환 방지) + +### 3단계: 커스텀 아이콘 추가/삭제 (lucide 검색) + +- [x] "lucide 검색" 버튼 UI +- [x] lucide 아이콘 검색 팝오버 (Popover + Command + CommandInput) +- [x] `import { icons } from "lucide-react"` 기반 전체 아이콘 검색/필터링 +- [x] 선택 시 `componentConfig.customIcons` 배열 추가 + `addToIconMap` 동적 등록 +- [x] lucide 커스텀 아이콘 그리드 렌더링 (추천 아이콘 아래, 구분선 포함) +- [x] lucide 커스텀 아이콘 X 버튼으로 개별 삭제 + +### 3-1단계: 커스텀 아이콘 추가/삭제 (SVG 붙여넣기) + +- [x] "SVG 붙여넣기" 버튼 UI (Popover) +- [x] SVG 입력 textarea + DOMPurify 실시간 미리보기 +- [x] SVG 유효성 검사 (` 관련 문서: [맥락노트](./MST[맥락노트]-v2select-multiselect-tooltip.md) | [체크리스트](./MST[체크리스트]-v2select-multiselect-tooltip.md) + +## 개요 + +모든 화면에서 다중 선택 가능한 드롭다운(`V2Select` - `DropdownSelect`)의 선택 항목 표시 방식을 개선합니다. + +--- + +## 현재 동작 + +- 다중 선택 시 `"3개 선택됨"` 같은 텍스트만 표시 +- 어떤 항목이 선택되었는지 드롭다운을 열어야만 확인 가능 + +### 현재 코드 (V2Select.tsx - DropdownSelect, 174~178행) + +```tsx +{selectedLabels.length > 0 + ? multiple + ? `${selectedLabels.length}개 선택됨` + : selectedLabels[0] + : placeholder} +``` + +--- + +## 변경 후 동작 + +### 1. 선택된 항목 라벨을 쉼표로 연결하여 한 줄로 표시 + +- 예: `"구매품, 판매품, 재고품"` +- `truncate` (text-overflow: ellipsis)로 필드 너비를 넘으면 말줄임(`...`) 처리 +- 무조건 한 줄 표시, 넘치면 `...`으로 숨김 + +### 2. 텍스트가 말줄임(`...`) 처리될 때만 호버 툴팁 표시 + +- 필드 너비를 넘어서 `...`으로 잘릴 때만 툴팁 활성화 +- 필드 내에 전부 보이면 툴팁 불필요 +- 툴팁 내용은 세로 나열로 각 항목을 한눈에 확인 가능 +- 툴팁은 딜레이 없이 즉시 표시 + +--- + +## 시각적 동작 예시 + +| 상태 | 필드 내 표시 | 호버 시 툴팁 | +|------|-------------|-------------| +| 미선택 | `선택` (placeholder) | 없음 | +| 1개 선택 | `구매품` | 없음 | +| 3개 선택 (필드 내 수용) | `구매품, 판매품, 재고품` | 없음 (잘리지 않으므로) | +| 5개 선택 (필드 넘침) | `구매품, 판매품, 재고품, 외...` | 구매품 / 판매품 / 재고품 / 외주품 / 반제품 (세로 나열) | + +--- + +## 변경 대상 + +- **파일**: `frontend/components/v2/V2Select.tsx` +- **컴포넌트**: `DropdownSelect` 내부 표시 텍스트 부분 (170~178행) +- **적용 범위**: `DropdownSelect`를 사용하는 모든 화면 (품목정보, 기타 모든 모달 포함) +- **변경 규모**: 약 30줄 내외 소규모 변경 + +--- + +## 코드 설계 + +### 추가 import + +```tsx +import { useRef, useEffect, useState } from "react"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; +``` + +### 말줄임 감지 로직 + +```tsx +// 텍스트가 잘리는지(truncated) 감지 +const textRef = useRef(null); +const [isTruncated, setIsTruncated] = useState(false); + +useEffect(() => { + const el = textRef.current; + if (el) { + setIsTruncated(el.scrollWidth > el.clientWidth); + } +}, [selectedLabels]); +``` + +### 수정 코드 (DropdownSelect 내부, 170~178행 대체) + +```tsx +const displayText = selectedLabels.length > 0 + ? (multiple ? selectedLabels.join(", ") : selectedLabels[0]) + : placeholder; + +const isPlaceholder = selectedLabels.length === 0; + +// 렌더링 부분 +{isTruncated && multiple ? ( + + + + + {displayText} + + + +
+ {selectedLabels.map((label, i) => ( +
{label}
+ ))} +
+ + + +) : ( + + {displayText} + +)} +``` + +--- + +## 설계 원칙 + +- 기존 단일 선택 동작은 변경하지 않음 +- `DropdownSelect` 공통 컴포넌트 수정이므로 모든 화면에 자동 적용 +- 무조건 한 줄 표시, 넘치면 `...`으로 말줄임 +- 툴팁은 텍스트가 실제로 잘릴 때(`scrollWidth > clientWidth`)만 표시 +- 툴팁 내용은 세로 나열로 각 항목 확인 용이 +- 툴팁 딜레이 없음 (`delayDuration={0}`) +- shadcn 표준 Tooltip 컴포넌트 사용으로 프로젝트 일관성 유지 diff --git a/docs/ycshin-node/MST[맥락]-다중선택-라벨표시.md b/docs/ycshin-node/MST[맥락]-다중선택-라벨표시.md new file mode 100644 index 00000000..155dde59 --- /dev/null +++ b/docs/ycshin-node/MST[맥락]-다중선택-라벨표시.md @@ -0,0 +1,95 @@ +# [맥락노트] V2Select 다중 선택 드롭다운 - 선택 항목 표시 개선 + +> 관련 문서: [계획서](./MST[계획서]-v2select-multiselect-tooltip.md) | [체크리스트](./MST[체크리스트]-v2select-multiselect-tooltip.md) + +--- + +## 왜 이 작업을 하는가 + +- 사용자가 수정 모달에서 다중 선택 드롭다운을 사용할 때 `"3개 선택됨"` 만 보임 +- 드롭다운을 다시 열어봐야만 무엇이 선택됐는지 확인 가능 → UX 불편 +- 선택 항목을 직접 보여주고, 넘치면 툴팁으로 확인할 수 있게 개선 + +--- + +## 핵심 결정 사항과 근거 + +### 1. "n개 선택됨" → 라벨 쉼표 나열 + +- **결정**: `"구매품, 판매품, 재고품"` 형태로 표시 +- **근거**: 사용자가 드롭다운을 열지 않아도 선택 내용을 바로 확인 가능 + +### 2. 무조건 한 줄, 넘치면 말줄임(`...`) + +- **결정**: 여러 줄 줄바꿈 없이 한 줄 고정, `truncate`로 오버플로우 처리 +- **근거**: 드롭다운 필드 높이가 고정되어 있어 여러 줄 표시 시 레이아웃이 깨짐 + +### 3. 텍스트가 잘릴 때만 툴팁 표시 + +- **결정**: `scrollWidth > clientWidth` 비교로 실제 잘림 여부 감지 후 툴팁 활성화 +- **근거**: 전부 보이는데 툴팁이 뜨면 오히려 방해. 필요할 때만 보여야 함 +- **대안 검토**: "2개 이상이면 항상 툴팁" → 기각 (불필요한 툴팁 발생) + +### 4. 툴팁 내용은 세로 나열 + +- **결정**: 툴팁 안에서 항목을 줄바꿈으로 세로 나열 +- **근거**: 가로 나열 시 툴팁도 길어져서 읽기 어려움. 세로가 한눈에 파악하기 좋음 + +### 5. 툴팁 딜레이 0ms + +- **결정**: `delayDuration={0}` 즉시 표시 +- **근거**: 사용자가 "무엇을 선택했는지" 확인하려는 의도적 행동이므로 즉시 응답해야 함 + +### 6. Radix Tooltip 대신 커스텀 호버 툴팁 사용 + +- **결정**: Radix Tooltip을 사용하지 않고 `onMouseEnter`/`onMouseLeave`로 직접 제어 +- **근거**: Radix Tooltip + Popover 조합은 이벤트 충돌 발생. 내부 배치든 외부 래핑이든 Popover가 호버를 가로챔 +- **시도 1**: Tooltip을 Button 안에 배치 → Popover가 이벤트 가로챔 (실패) +- **시도 2**: Radix 공식 패턴 (TooltipTrigger > PopoverTrigger > Button 체이닝) → 여전히 동작 안 함 (실패) +- **최종**: wrapper div에 마우스 이벤트 + 절대 위치 div로 툴팁 렌더링 (성공) +- **추가**: Popover 열릴 때 `setHoverTooltip(false)`로 툴팁 자동 숨김 + +### 8. 선택 항목 표시 순서는 드롭다운 옵션 순서 기준 + +- **결정**: 사용자가 클릭한 순서가 아닌 드롭다운 옵션 목록 순서대로 표시 +- **근거**: 선택 순서대로 보여주면 매번 순서가 달라져서 혼란. 옵션 순서 기준이 일관적이고 예측 가능 +- **구현**: `selectedValues.map(...)` → `safeOptions.filter(...).map(...)` 으로 변경 + +### 9. DropdownSelect 공통 컴포넌트 수정 + +- **결정**: 특정 화면이 아닌 `DropdownSelect` 자체를 수정 +- **근거**: 품목정보뿐 아니라 모든 화면에서 동일한 문제가 있으므로 공통 해결 + +--- + +## 관련 파일 위치 + +| 구분 | 파일 경로 | 설명 | +|------|----------|------| +| 수정 대상 | `frontend/components/v2/V2Select.tsx` | DropdownSelect 컴포넌트 (170~178행) | +| 타입 정의 | `frontend/types/v2-components.ts` | V2SelectProps, SelectOption 타입 | +| UI 컴포넌트 | `frontend/components/ui/tooltip.tsx` | shadcn Tooltip 컴포넌트 | +| 렌더러 | `frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx` | V2Select를 레지스트리에 연결 | +| 수정 모달 | `frontend/components/screen/EditModal.tsx` | 공통 편집 모달 | + +--- + +## 기술 참고 + +### truncate 감지 방식 + +``` +scrollWidth: 텍스트의 실제 전체 너비 (보이지 않는 부분 포함) +clientWidth: 요소의 보이는 너비 + +scrollWidth > clientWidth → 텍스트가 잘리고 있음 (... 표시 중) +``` + +### selectedLabels 계산 흐름 + +``` +value (string[]) → selectedValues → safeOptions에서 label 매칭 → selectedLabels (string[]) +``` + +- `selectedLabels`는 이미 `DropdownSelect` 내부에서 `useMemo`로 계산됨 (126~130행) +- 추가 데이터 fetching 불필요, 기존 값을 `.join(", ")`로 결합하면 됨 diff --git a/docs/ycshin-node/MST[체크]-다중선택-라벨표시.md b/docs/ycshin-node/MST[체크]-다중선택-라벨표시.md new file mode 100644 index 00000000..c3599343 --- /dev/null +++ b/docs/ycshin-node/MST[체크]-다중선택-라벨표시.md @@ -0,0 +1,54 @@ +# [체크리스트] V2Select 다중 선택 드롭다운 - 선택 항목 표시 개선 + +> 관련 문서: [계획서](./MST[계획서]-v2select-multiselect-tooltip.md) | [맥락노트](./MST[맥락노트]-v2select-multiselect-tooltip.md) + +--- + +## 공정 상태 + +- 전체 진행률: **100%** (완료) +- 현재 단계: 전체 완료 + +--- + +## 구현 체크리스트 + +### 1단계: 코드 수정 + +- [x] `V2Select.tsx`에 Tooltip 관련 import 추가 +- [x] `DropdownSelect` 내부에 `textRef`, `isTruncated` 상태 추가 +- [x] `useEffect`로 `scrollWidth > clientWidth` 감지 로직 추가 +- [x] 표시 텍스트를 `selectedLabels.join(", ")`로 변경 +- [x] `isTruncated && multiple` 조건으로 Tooltip 래핑 +- [x] 툴팁 내용을 세로 나열 (`space-y-0.5`)로 구성 +- [x] `delayDuration={0}` 설정 +- [x] Radix Tooltip → 커스텀 호버 툴팁으로 변경 (onMouseEnter/onMouseLeave + 절대 위치 div) +- [x] 선택 항목 표시 순서를 드롭다운 옵션 순서 기준으로 변경 + +### 2단계: 검증 + +- [x] 단일 선택 모드: 기존 동작 변화 없음 확인 +- [x] 다중 선택 1개: 라벨 정상 표시, 툴팁 없음 +- [x] 다중 선택 3개 (필드 내 수용): 쉼표 나열 표시, 툴팁 없음 +- [x] 다중 선택 5개+ (필드 넘침): 말줄임 표시, 호버 시 툴팁 세로 나열 +- [x] 품목정보 수정 모달에서 동작 확인 +- [x] 다른 화면의 다중 선택 드롭다운에서도 동작 확인 + +### 3단계: 정리 + +- [x] 린트 에러 없음 확인 +- [x] 이 체크리스트 완료 표시 업데이트 + +--- + +## 변경 이력 + +| 날짜 | 내용 | +|------|------| +| 2026-03-04 | 설계 문서 작성 완료 | +| 2026-03-04 | 맥락노트, 체크리스트 작성 완료 | +| 2026-03-04 | 파일명 MST 접두사 적용 | +| 2026-03-04 | 1단계 코드 수정 완료 (V2Select.tsx) | +| 2026-03-04 | Radix Tooltip이 Popover와 충돌 → 커스텀 호버 툴팁으로 변경 | +| 2026-03-04 | 사용자 검증 완료, 전체 작업 완료 | +| 2026-03-04 | 선택 항목 표시 순서를 옵션 순서 기준으로 변경 | diff --git a/docs/ycshin-node/탭_시스템_설계.md b/docs/ycshin-node/탭_시스템_설계.md new file mode 100644 index 00000000..50ca2468 --- /dev/null +++ b/docs/ycshin-node/탭_시스템_설계.md @@ -0,0 +1,241 @@ +# 탭 시스템 아키텍처 및 구현 계획 + +## 1. 개요 + +사이드바 메뉴 클릭 시 `router.push()` 페이지 이동 방식에서 **탭 기반 멀티 화면 시스템**으로 전환한다. + +``` + ┌──────────────────────────┐ + │ Tab Data Layer (중앙) │ + API 응답 ────────→│ │ + │ 탭별 상태 저장소 │ + │ ├─ formData │ + │ ├─ selectedRows │ + │ ├─ scrollPosition │ + │ ├─ modalState │ + │ ├─ sortState │ + │ └─ cacheState │ + │ │ + │ 공통 규칙 엔진 │ + │ ├─ 날짜 포맷 규칙 │ + │ ├─ 숫자/통화 포맷 규칙 │ + │ ├─ 로케일 처리 규칙 │ + │ ├─ 유효성 검증 규칙 │ + │ └─ 데이터 타입 변환 규칙 │ + │ │ + │ F5 복원 / 캐시 관리 │ + │ (sessionStorage 중앙관리) │ + └────────────┬─────────────┘ + │ + 가공 완료된 데이터 + │ + ┌────────────────┼────────────────┐ + │ │ │ + 화면 A (경량) 화면 B (경량) 화면 C (경량) + 렌더링만 담당 렌더링만 담당 렌더링만 담당 +``` + +## 2. 레이어 구조 + +| 레이어 | 책임 | +|---|---| +| **Tab Data Layer** | 탭별 상태 보관, 캐시, 복원, 데이터 가공 | +| **공통 규칙 엔진** | 날짜/숫자/로케일 포맷, 유효성 검증 | +| **화면 컴포넌트** | 가공된 데이터를 받아서 렌더링만 담당 | + +## 3. 파일 구성 + +| 파일 | 역할 | +|---|---| +| `stores/tabStore.ts` | Zustand 기반 탭 상태 관리 | +| `components/layout/TabBar.tsx` | 탭 바 UI (드래그, 우클릭, 오버플로우) | +| `components/layout/TabContent.tsx` | 탭별 콘텐츠 렌더링 (컨테이너) | +| `components/layout/EmptyDashboard.tsx` | 탭 없을 때 안내 화면 | +| `components/layout/AppLayout.tsx` | 전체 레이아웃 (사이드바 + 탭 + 콘텐츠) | +| `lib/tabStateCache.ts` | 탭별 상태 캐싱 엔진 | +| `lib/formatting/rules.ts` | 포맷 규칙 정의 | +| `lib/formatting/index.ts` | formatDate, formatNumber, formatCurrency | +| `app/(main)/screens/[screenId]/page.tsx` | 화면별 렌더링 | + +## 4. 기술 스택 + +- Next.js 15, React 19, Zustand +- Tailwind CSS, shadcn/ui + +--- + +## 5. Phase 1: 탭 껍데기 + +### 5-1. Zustand 탭 Store (`stores/tabStore.ts`) +- [ ] zustand 직접 의존성 추가 +- [ ] Tab 인터페이스: id, type, title, screenId, menuObjid, adminUrl +- [ ] 탭 목록, 활성 탭 ID +- [ ] openTab, closeTab, switchTab, refreshTab +- [ ] closeOtherTabs, closeTabsToLeft, closeTabsToRight, closeAllTabs +- [ ] updateTabOrder (드래그 순서 변경) +- [ ] 중복 방지: 같은 탭이면 해당 탭으로 이동 +- [ ] 닫기 후 왼쪽 탭으로 이동, 왼쪽 없으면 오른쪽 +- [ ] sessionStorage 영속화 (persist middleware) +- [ ] 탭 ID 생성 규칙: V2 화면 `tab-{screenId}-{menuObjid}`, URL 탭 `tab-url-{menuObjid}` + +### 5-2. TabBar 컴포넌트 (`components/layout/TabBar.tsx`) +- [ ] 고정 너비 탭, 화면 너비에 맞게 동적 개수 +- [ ] 활성 탭: 새로고침 버튼 + X 버튼 +- [ ] 비활성 탭: X 버튼만 +- [ ] 오버플로우 시 +N 드롭다운 (ResizeObserver 감시) +- [ ] 드래그 순서 변경 (mousedown/move/up, DOM transform 직접 조작) +- [ ] 사이드바 메뉴 드래그 드롭 수신 (`application/tab-menu` 커스텀 데이터, 마우스 위치에 삽입) +- [ ] 우클릭 컨텍스트 메뉴 (새로고침/왼쪽닫기/오른쪽닫기/다른탭닫기/모든탭닫기) +- [ ] 휠 클릭: 탭 즉시 닫기 + +### 5-3. TabContent 컴포넌트 (`components/layout/TabContent.tsx`) +- [ ] display:none 방식 (비활성 탭 DOM 유지, 상태 보존) +- [ ] 지연 마운트 (한 번 활성화된 탭만 마운트) +- [ ] 안정적 순서 유지 (탭 순서 변경 시 리마운트 방지) +- [ ] 탭별 모달 격리 (DialogPortalContainerContext) +- [ ] tab.type === "screen" -> ScreenViewPageWrapper 임베딩 +- [ ] tab.type === "admin" -> 동적 import로 관리자 페이지 렌더링 + +### 5-4. EmptyDashboard 컴포넌트 (`components/layout/EmptyDashboard.tsx`) +- [ ] 탭이 없을 때 "사이드바에서 메뉴를 선택하여 탭을 추가하세요" 표시 + +### 5-5. AppLayout 수정 (`components/layout/AppLayout.tsx`) +- [ ] handleMenuClick: router.push -> tabStore.openTab 호출 +- [ ] 레이아웃: main 영역을 TabBar + TabContent로 교체 +- [ ] children prop 제거 (탭이 콘텐츠 관리) +- [ ] 사이드바 메뉴 드래그 가능하게 (draggable) + +### 5-6. 라우팅 연동 +- [ ] `app/(main)/layout.tsx` 수정 - children 대신 탭 시스템 +- [ ] URL 직접 접근 시 탭으로 열기 (북마크/공유 링크 대응) + +--- + +## 6. Phase 2: F5 최대 복원 + +### 6-1. 탭 상태 캐싱 엔진 (`lib/tabStateCache.ts`) +- [ ] 탭별 상태 저장/복원 (sessionStorage) +- [ ] 저장 대상: formData, selectedRows, sortState, scrollPosition, modalState, checkboxState +- [ ] debounce 적용 (상태 변경마다 저장하지 않음) + +### 6-2. 복원 로직 +- [ ] 활성 탭: fresh API 호출 (캐시 데이터 무시) +- [ ] 비활성 탭: 캐시에서 복원 +- [ ] 탭 닫기 시 해당 탭의 캐시 키 일괄 삭제 + +### 6-3. 캐시 키 관리 (clearTabStateCache) + +탭 닫기/새로고침 시 관련 sessionStorage 키 일괄 제거: +- `tab-cache-{screenId}-{menuObjid}` +- `page-scroll-{screenId}-{menuObjid}` +- `tsp-{screenId}-*`, `table-state-{screenId}-*` +- `split-sel-{screenId}-*`, `catval-sel-{screenId}-*` +- `bom-tree-{screenId}-*` +- URL 탭: `tsp-{urlHash}-*`, `admin-scroll-{url}` + +--- + +## 7. Phase 3: 포맷팅 중앙화 + +### 7-1. 포맷팅 규칙 엔진 + +```typescript +// lib/formatting/rules.ts + +interface FormatRules { + date: { + display: string; // "YYYY-MM-DD" + datetime: string; // "YYYY-MM-DD HH:mm:ss" + input: string; // "YYYY-MM-DD" + }; + number: { + locale: string; // 사용자 로케일 기반 + decimals: number; // 기본 소수점 자릿수 + }; + currency: { + code: string; // 회사 설정 기반 + locale: string; + }; +} + +export function formatValue(value: any, dataType: string, rules: FormatRules): string; +export function formatDate(value: any, format?: string): string; +export function formatNumber(value: any, locale?: string): string; +export function formatCurrency(value: any, currencyCode?: string): string; +``` + +### 7-2. 하드코딩 교체 대상 +- [ ] V2DateRenderer.tsx +- [ ] EditModal.tsx +- [ ] InteractiveDataTable.tsx +- [ ] FlowWidget.tsx +- [ ] AggregationWidgetComponent.tsx +- [ ] aggregation.ts (피벗) +- [ ] 기타 하드코딩 파일들 + +--- + +## 8. Phase 4: ScreenViewPage 경량화 +- [ ] 탭 데이터 레이어에서 받은 데이터로 렌더링만 담당 +- [ ] API 호출, 캐시, 복원 로직 제거 (탭 레이어가 담당) +- [ ] 관리자 페이지도 동일한 데이터 레이어 패턴 적용 + +--- + +--- + +## 구현 완료: 다중 스크롤 영역 F5 복원 + +### 개요 + +split panel 등 한 탭 안에 **스크롤 영역이 여러 개**인 화면에서, F5 새로고침 후에도 각 영역의 스크롤 위치가 복원된다. + +탭 전환 시에는 `display: none` 방식으로 DOM이 유지되므로 브라우저가 스크롤을 자연 보존한다. 이 기능은 **F5 새로고침** 전용이다. + +### 동작 방식 + +탭 내 모든 스크롤 가능한 요소를 DOM 경로(`"0/1/0/2"` 형태)와 함께 저장한다. + +``` +scrollPositions: [ + { path: "0/1/0/2", top: 150, left: 0 }, // 예: 좌측 패널 + { path: "0/1/1/3/1", top: 420, left: 0 }, // 예: 우측 패널 +] +``` + +- **실시간 추적**: 스크롤 이벤트 발생 시 해당 요소의 경로와 위치를 Map에 기록 +- **저장 시점**: 탭 전환 시 + `beforeunload`(F5/닫기) 시 sessionStorage에 저장 +- **복원 시점**: 탭 활성화 시 경로를 기반으로 각 요소를 찾아 개별 복원 + +### 관련 파일 및 주요 함수 + +| 파일 | 역할 | +|---|---| +| `lib/tabStateCache.ts` | 스크롤 캡처/복원 핵심 로직 | +| `components/layout/TabContent.tsx` | 스크롤 이벤트 감지, 저장/복원 호출 | + +**`tabStateCache.ts` 핵심 함수**: + +| 함수 | 설명 | +|---|---| +| `getElementPath(element, container)` | 요소의 DOM 경로를 자식 인덱스 문자열로 생성 | +| `captureAllScrollPositions(container)` | TreeWalker로 컨테이너 하위 모든 스크롤 요소의 위치를 일괄 캡처 | +| `restoreAllScrollPositions(container, positions)` | 경로 기반으로 각 요소를 찾아 스크롤 위치 복원 (콘텐츠 렌더링 대기 폴링 포함) | + +**`TabContent.tsx` 핵심 Ref**: + +| Ref | 설명 | +|---|---| +| `lastScrollMapRef` | `Map>` - 탭 내 요소별 최신 스크롤 위치 | +| `pathCacheRef` | `WeakMap` - 동일 요소의 경로 재계산 방지용 캐시 | + +--- + +## 9. 참고 파일 + +| 파일 | 비고 | +|---|---| +| `frontend/components/layout/AppLayout.tsx` | 사이드바 + 콘텐츠 레이아웃 | +| `frontend/app/(main)/screens/[screenId]/page.tsx` | 화면 렌더링 (건드리지 않음) | +| `frontend/stores/modalDataStore.ts` | Zustand store 참고 패턴 | +| `frontend/lib/adminPageRegistry.tsx` | 관리자 페이지 레지스트리 | diff --git a/docs/ycshin-node/필수입력항목_자동검증_설계.md b/docs/ycshin-node/필수입력항목_자동검증_설계.md new file mode 100644 index 00000000..1edb53dd --- /dev/null +++ b/docs/ycshin-node/필수입력항목_자동검증_설계.md @@ -0,0 +1,231 @@ +# 모달 필수 입력 검증 설계 + +## 1. 목표 + +모든 모달에서 필수 입력값이 빈 상태로 저장 버튼을 클릭하면: +- 첫 번째 빈 필수 필드로 포커스 이동 + 하이라이트 +- 우측 상단에 토스트 알림 ("○○ 항목을 입력해주세요") +- 버튼은 항상 활성 상태 (비활성화하지 않음) + +--- + +## 2. 전체 구조 + +``` +┌─────────────────────────────────────────────────────────────────┐ +│ DialogContent (모든 모달의 공통 래퍼) │ +│ │ +│ useDialogAutoValidation(contentRef) │ +│ │ │ +│ ├─ 0단계: 모드 확인 │ +│ │ └─ useTabStore.mode === "user" 일 때만 실행 │ +│ │ │ +│ ├─ 1단계: 필수 필드 탐지 │ +│ │ └─ Label 내부 안에 * 문자 존재 여부 │ +│ │ (라벨 텍스트 직접 매칭 X → span 태그 안의 * 만 감지) │ +│ │ │ +│ └─ 2단계: 저장 버튼 클릭 인터셉트 │ +│ │ │ +│ ├─ 저장/수정/확인 버튼 클릭 감지 │ +│ │ (data-action-type="save"/"submit" │ +│ │ 또는 data-variant="default") │ +│ │ │ +│ ├─ 빈 필수 필드 있음: │ +│ │ ├─ 클릭 이벤트 차단 (stopPropagation + preventDefault) │ +│ │ ├─ 첫 번째 빈 필드로 포커스 이동 │ +│ │ ├─ 해당 필드 빨간 테두리 + 하이라이트 애니메이션 │ +│ │ └─ 토스트 알림: "{필드명} 항목을 입력해주세요" │ +│ │ │ +│ └─ 모든 필수 필드 입력됨: │ +│ └─ 클릭 이벤트 통과 (정상 저장 진행) │ +│ │ +│ 제외 조건: │ +│ └─ 필수 필드가 0개인 모달 → 인터셉트 없음 │ +└─────────────────────────────────────────────────────────────────┘ +``` + +--- + +## 3. 필수 필드 감지: span 기반 * 감지 + +### 원리 + +화면 관리에서 필드를 "필수"로 체크하면 `component.required = true`가 저장된다. +V2 컴포넌트가 렌더링할 때 `required = true`이면 Label 안에 `*`을 추가한다. +훅은 이 span 안의 `*`를 감지하여 필수 필드를 식별한다. + +### 오탐 방지 + +관리자가 라벨 텍스트에 직접 `*`를 입력해도 span 안에 들어가지 않으므로 오탐이 발생하지 않는다. + +``` +required = true → + → span 안에 * 있음 → 감지 O + +required = false → + → span 없음 → 감지 X + +라벨에 * 직접 입력 → + → span 없이 텍스트에 * → 감지 X (오탐 방지) +``` + +### 지원 필드 타입 + +| V2 컴포넌트 | 렌더링 요소 | 빈값 판정 | +|---|---|---| +| V2Input | ``, `