From b576837f185fe5690092c353abcf28718c712ee4 Mon Sep 17 00:00:00 2001 From: kjs Date: Tue, 13 Jan 2026 18:28:11 +0900 Subject: [PATCH] =?UTF-8?q?=EB=8B=A4=EA=B5=AD=EC=96=B4=20=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EA=B0=9C=EC=84=A0:?= =?UTF-8?q?=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EB=B0=8F=20=ED=82=A4?= =?UTF-8?q?=20=EC=9E=90=EB=8F=99=20=EC=83=9D=EC=84=B1=20=EA=B8=B0=EB=8A=A5?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/controllers/multilangController.ts | 388 ++++++++++++ .../src/routes/cascadingAutoFillRoutes.ts | 1 + .../src/routes/cascadingConditionRoutes.ts | 1 + .../src/routes/cascadingHierarchyRoutes.ts | 1 + .../routes/cascadingMutualExclusionRoutes.ts | 1 + backend-node/src/routes/multilangRoutes.ts | 22 + backend-node/src/services/multilangService.ts | 456 ++++++++++++- backend-node/src/types/multilang.ts | 48 ++ docs/노드플로우_개선사항.md | 1 + docs/다국어_관리_시스템_개선_계획서.md | 597 ++++++++++++++++++ docs/메일발송_기능_사용_가이드.md | 1 + docs/즉시저장_버튼_액션_구현_계획서.md | 1 + .../admin/screenMng/screenMngList/page.tsx | 1 + .../(main)/admin/systemMng/i18nList/page.tsx | 97 ++- .../admin/multilang/CategoryTree.tsx | 199 ++++++ .../admin/multilang/KeyGenerateModal.tsx | 497 +++++++++++++++ frontend/contexts/ActiveTabContext.tsx | 1 + frontend/hooks/useAutoFill.ts | 1 + frontend/lib/api/multilang.ts | 362 +++++++++++ .../rack-structure/RackStructureComponent.tsx | 248 +++----- ..._임베딩_및_데이터_전달_시스템_구현_계획서.md | 1 + 화면_임베딩_시스템_Phase1-4_구현_완료.md | 1 + 화면_임베딩_시스템_충돌_분석_보고서.md | 1 + 23 files changed, 2745 insertions(+), 182 deletions(-) create mode 100644 docs/다국어_관리_시스템_개선_계획서.md create mode 100644 frontend/components/admin/multilang/CategoryTree.tsx create mode 100644 frontend/components/admin/multilang/KeyGenerateModal.tsx create mode 100644 frontend/lib/api/multilang.ts diff --git a/backend-node/src/controllers/multilangController.ts b/backend-node/src/controllers/multilangController.ts index 14155f86..fe211d0c 100644 --- a/backend-node/src/controllers/multilangController.ts +++ b/backend-node/src/controllers/multilangController.ts @@ -10,7 +10,10 @@ import { SaveLangTextsRequest, GetUserTextParams, BatchTranslationRequest, + GenerateKeyRequest, + CreateOverrideKeyRequest, ApiResponse, + LangCategory, } from "../types/multilang"; /** @@ -630,6 +633,391 @@ export const deleteLanguage = async ( } }; +// ===================================================== +// 카테고리 관련 API +// ===================================================== + +/** + * GET /api/multilang/categories + * 카테고리 목록 조회 API (트리 구조) + */ +export const getCategories = async ( + req: AuthenticatedRequest, + res: Response +): Promise => { + try { + logger.info("카테고리 목록 조회 요청", { user: req.user }); + + const multiLangService = new MultiLangService(); + const categories = await multiLangService.getCategories(); + + const response: ApiResponse = { + success: true, + message: "카테고리 목록 조회 성공", + data: categories, + }; + + res.status(200).json(response); + } catch (error) { + logger.error("카테고리 목록 조회 실패:", error); + res.status(500).json({ + success: false, + message: "카테고리 목록 조회 중 오류가 발생했습니다.", + error: { + code: "CATEGORY_LIST_ERROR", + details: error instanceof Error ? error.message : "Unknown error", + }, + }); + } +}; + +/** + * GET /api/multilang/categories/:categoryId + * 카테고리 상세 조회 API + */ +export const getCategoryById = async ( + req: AuthenticatedRequest, + res: Response +): Promise => { + try { + const { categoryId } = req.params; + logger.info("카테고리 상세 조회 요청", { categoryId, user: req.user }); + + const multiLangService = new MultiLangService(); + const category = await multiLangService.getCategoryById(parseInt(categoryId)); + + if (!category) { + res.status(404).json({ + success: false, + message: "카테고리를 찾을 수 없습니다.", + error: { + code: "CATEGORY_NOT_FOUND", + details: `Category ID ${categoryId} not found`, + }, + }); + return; + } + + const response: ApiResponse = { + success: true, + message: "카테고리 상세 조회 성공", + data: category, + }; + + res.status(200).json(response); + } catch (error) { + logger.error("카테고리 상세 조회 실패:", error); + res.status(500).json({ + success: false, + message: "카테고리 상세 조회 중 오류가 발생했습니다.", + error: { + code: "CATEGORY_DETAIL_ERROR", + details: error instanceof Error ? error.message : "Unknown error", + }, + }); + } +}; + +/** + * GET /api/multilang/categories/:categoryId/path + * 카테고리 경로 조회 API (부모 포함) + */ +export const getCategoryPath = async ( + req: AuthenticatedRequest, + res: Response +): Promise => { + try { + const { categoryId } = req.params; + logger.info("카테고리 경로 조회 요청", { categoryId, user: req.user }); + + const multiLangService = new MultiLangService(); + const path = await multiLangService.getCategoryPath(parseInt(categoryId)); + + const response: ApiResponse = { + success: true, + message: "카테고리 경로 조회 성공", + data: path, + }; + + res.status(200).json(response); + } catch (error) { + logger.error("카테고리 경로 조회 실패:", error); + res.status(500).json({ + success: false, + message: "카테고리 경로 조회 중 오류가 발생했습니다.", + error: { + code: "CATEGORY_PATH_ERROR", + details: error instanceof Error ? error.message : "Unknown error", + }, + }); + } +}; + +// ===================================================== +// 자동 생성 및 오버라이드 관련 API +// ===================================================== + +/** + * POST /api/multilang/keys/generate + * 키 자동 생성 API + */ +export const generateKey = async ( + req: AuthenticatedRequest, + res: Response +): Promise => { + try { + const generateData: GenerateKeyRequest = req.body; + logger.info("키 자동 생성 요청", { generateData, user: req.user }); + + // 필수 입력값 검증 + if (!generateData.companyCode || !generateData.categoryId || !generateData.keyMeaning) { + res.status(400).json({ + success: false, + message: "회사 코드, 카테고리 ID, 키 의미는 필수입니다.", + error: { + code: "MISSING_REQUIRED_FIELDS", + details: "companyCode, categoryId, and keyMeaning are required", + }, + }); + return; + } + + // 권한 검사: 공통 키(*)는 최고 관리자만 생성 가능 + if (generateData.companyCode === "*" && req.user?.companyCode !== "*") { + res.status(403).json({ + success: false, + message: "공통 키는 최고 관리자만 생성할 수 있습니다.", + error: { + code: "PERMISSION_DENIED", + details: "Only super admin can create common keys", + }, + }); + return; + } + + // 회사 관리자는 자기 회사 키만 생성 가능 + if (generateData.companyCode !== "*" && + req.user?.companyCode !== "*" && + generateData.companyCode !== req.user?.companyCode) { + res.status(403).json({ + success: false, + message: "다른 회사의 키를 생성할 권한이 없습니다.", + error: { + code: "PERMISSION_DENIED", + details: "Cannot create keys for other companies", + }, + }); + return; + } + + const multiLangService = new MultiLangService(); + const keyId = await multiLangService.generateKey({ + ...generateData, + createdBy: req.user?.userId || "system", + }); + + const response: ApiResponse = { + success: true, + message: "키가 성공적으로 생성되었습니다.", + data: keyId, + }; + + res.status(201).json(response); + } catch (error) { + logger.error("키 자동 생성 실패:", error); + res.status(500).json({ + success: false, + message: "키 자동 생성 중 오류가 발생했습니다.", + error: { + code: "KEY_GENERATE_ERROR", + details: error instanceof Error ? error.message : "Unknown error", + }, + }); + } +}; + +/** + * POST /api/multilang/keys/preview + * 키 미리보기 API + */ +export const previewKey = async ( + req: AuthenticatedRequest, + res: Response +): Promise => { + try { + const { categoryId, keyMeaning, companyCode } = req.body; + logger.info("키 미리보기 요청", { categoryId, keyMeaning, companyCode, user: req.user }); + + if (!categoryId || !keyMeaning || !companyCode) { + res.status(400).json({ + success: false, + message: "카테고리 ID, 키 의미, 회사 코드는 필수입니다.", + error: { + code: "MISSING_REQUIRED_FIELDS", + details: "categoryId, keyMeaning, and companyCode are required", + }, + }); + return; + } + + const multiLangService = new MultiLangService(); + const preview = await multiLangService.previewGeneratedKey( + parseInt(categoryId), + keyMeaning, + companyCode + ); + + const response: ApiResponse<{ + langKey: string; + exists: boolean; + isOverride: boolean; + baseKeyId?: number; + }> = { + success: true, + message: "키 미리보기 성공", + data: preview, + }; + + res.status(200).json(response); + } catch (error) { + logger.error("키 미리보기 실패:", error); + res.status(500).json({ + success: false, + message: "키 미리보기 중 오류가 발생했습니다.", + error: { + code: "KEY_PREVIEW_ERROR", + details: error instanceof Error ? error.message : "Unknown error", + }, + }); + } +}; + +/** + * POST /api/multilang/keys/override + * 오버라이드 키 생성 API + */ +export const createOverrideKey = async ( + req: AuthenticatedRequest, + res: Response +): Promise => { + try { + const overrideData: CreateOverrideKeyRequest = req.body; + logger.info("오버라이드 키 생성 요청", { overrideData, user: req.user }); + + // 필수 입력값 검증 + if (!overrideData.companyCode || !overrideData.baseKeyId) { + res.status(400).json({ + success: false, + message: "회사 코드와 원본 키 ID는 필수입니다.", + error: { + code: "MISSING_REQUIRED_FIELDS", + details: "companyCode and baseKeyId are required", + }, + }); + return; + } + + // 최고 관리자(*)는 오버라이드 키를 만들 수 없음 (이미 공통 키) + if (overrideData.companyCode === "*") { + res.status(400).json({ + success: false, + message: "공통 키에 대한 오버라이드는 생성할 수 없습니다.", + error: { + code: "INVALID_OVERRIDE", + details: "Cannot create override for common keys", + }, + }); + return; + } + + // 회사 관리자는 자기 회사 오버라이드만 생성 가능 + if (req.user?.companyCode !== "*" && + overrideData.companyCode !== req.user?.companyCode) { + res.status(403).json({ + success: false, + message: "다른 회사의 오버라이드 키를 생성할 권한이 없습니다.", + error: { + code: "PERMISSION_DENIED", + details: "Cannot create override keys for other companies", + }, + }); + return; + } + + const multiLangService = new MultiLangService(); + const keyId = await multiLangService.createOverrideKey({ + ...overrideData, + createdBy: req.user?.userId || "system", + }); + + const response: ApiResponse = { + success: true, + message: "오버라이드 키가 성공적으로 생성되었습니다.", + data: keyId, + }; + + res.status(201).json(response); + } catch (error) { + logger.error("오버라이드 키 생성 실패:", error); + res.status(500).json({ + success: false, + message: "오버라이드 키 생성 중 오류가 발생했습니다.", + error: { + code: "OVERRIDE_KEY_CREATE_ERROR", + details: error instanceof Error ? error.message : "Unknown error", + }, + }); + } +}; + +/** + * GET /api/multilang/keys/overrides/:companyCode + * 회사별 오버라이드 키 목록 조회 API + */ +export const getOverrideKeys = async ( + req: AuthenticatedRequest, + res: Response +): Promise => { + try { + const { companyCode } = req.params; + logger.info("오버라이드 키 목록 조회 요청", { companyCode, user: req.user }); + + // 권한 검사: 최고 관리자 또는 해당 회사 관리자만 조회 가능 + if (req.user?.companyCode !== "*" && companyCode !== req.user?.companyCode) { + res.status(403).json({ + success: false, + message: "다른 회사의 오버라이드 키를 조회할 권한이 없습니다.", + error: { + code: "PERMISSION_DENIED", + details: "Cannot view override keys for other companies", + }, + }); + return; + } + + const multiLangService = new MultiLangService(); + const keys = await multiLangService.getOverrideKeys(companyCode); + + const response: ApiResponse = { + success: true, + message: "오버라이드 키 목록 조회 성공", + data: keys, + }; + + res.status(200).json(response); + } catch (error) { + logger.error("오버라이드 키 목록 조회 실패:", error); + res.status(500).json({ + success: false, + message: "오버라이드 키 목록 조회 중 오류가 발생했습니다.", + error: { + code: "OVERRIDE_KEYS_LIST_ERROR", + details: error instanceof Error ? error.message : "Unknown error", + }, + }); + } +}; + /** * POST /api/multilang/batch * 다국어 텍스트 배치 조회 API diff --git a/backend-node/src/routes/cascadingAutoFillRoutes.ts b/backend-node/src/routes/cascadingAutoFillRoutes.ts index c1d69e9f..acb0cbc7 100644 --- a/backend-node/src/routes/cascadingAutoFillRoutes.ts +++ b/backend-node/src/routes/cascadingAutoFillRoutes.ts @@ -56,3 +56,4 @@ export default router; + diff --git a/backend-node/src/routes/cascadingConditionRoutes.ts b/backend-node/src/routes/cascadingConditionRoutes.ts index bbc9384d..96ab25be 100644 --- a/backend-node/src/routes/cascadingConditionRoutes.ts +++ b/backend-node/src/routes/cascadingConditionRoutes.ts @@ -52,3 +52,4 @@ export default router; + diff --git a/backend-node/src/routes/cascadingHierarchyRoutes.ts b/backend-node/src/routes/cascadingHierarchyRoutes.ts index 35ced071..f77019be 100644 --- a/backend-node/src/routes/cascadingHierarchyRoutes.ts +++ b/backend-node/src/routes/cascadingHierarchyRoutes.ts @@ -68,3 +68,4 @@ export default router; + diff --git a/backend-node/src/routes/cascadingMutualExclusionRoutes.ts b/backend-node/src/routes/cascadingMutualExclusionRoutes.ts index 29ac8ee4..6e4094f1 100644 --- a/backend-node/src/routes/cascadingMutualExclusionRoutes.ts +++ b/backend-node/src/routes/cascadingMutualExclusionRoutes.ts @@ -56,3 +56,4 @@ export default router; + diff --git a/backend-node/src/routes/multilangRoutes.ts b/backend-node/src/routes/multilangRoutes.ts index 47137346..484b7535 100644 --- a/backend-node/src/routes/multilangRoutes.ts +++ b/backend-node/src/routes/multilangRoutes.ts @@ -21,6 +21,17 @@ import { getUserText, getLangText, getBatchTranslations, + + // 카테고리 관리 API + getCategories, + getCategoryById, + getCategoryPath, + + // 자동 생성 및 오버라이드 API + generateKey, + previewKey, + createOverrideKey, + getOverrideKeys, } from "../controllers/multilangController"; const router = express.Router(); @@ -51,4 +62,15 @@ router.post("/keys/:keyId/texts", saveLangTexts); // 다국어 텍스트 저장/ router.get("/user-text/:companyCode/:menuCode/:langKey", getUserText); // 사용자별 다국어 텍스트 조회 router.get("/text/:companyCode/:langKey/:langCode", getLangText); // 특정 키의 다국어 텍스트 조회 +// 카테고리 관리 API +router.get("/categories", getCategories); // 카테고리 트리 조회 +router.get("/categories/:categoryId", getCategoryById); // 카테고리 상세 조회 +router.get("/categories/:categoryId/path", getCategoryPath); // 카테고리 경로 조회 + +// 자동 생성 및 오버라이드 API +router.post("/keys/generate", generateKey); // 키 자동 생성 +router.post("/keys/preview", previewKey); // 키 미리보기 +router.post("/keys/override", createOverrideKey); // 오버라이드 키 생성 +router.get("/keys/overrides/:companyCode", getOverrideKeys); // 오버라이드 키 목록 조회 + export default router; diff --git a/backend-node/src/services/multilangService.ts b/backend-node/src/services/multilangService.ts index 090065a3..f725f9fa 100644 --- a/backend-node/src/services/multilangService.ts +++ b/backend-node/src/services/multilangService.ts @@ -4,6 +4,7 @@ import { Language, LangKey, LangText, + LangCategory, CreateLanguageRequest, UpdateLanguageRequest, CreateLangKeyRequest, @@ -12,12 +13,428 @@ import { GetLangKeysParams, GetUserTextParams, BatchTranslationRequest, + GenerateKeyRequest, + CreateOverrideKeyRequest, ApiResponse, } from "../types/multilang"; export class MultiLangService { constructor() {} + // ===================================================== + // 카테고리 관련 메서드 + // ===================================================== + + /** + * 카테고리 목록 조회 (트리 구조) + */ + async getCategories(): Promise { + try { + logger.info("카테고리 목록 조회 시작"); + + const categories = await query<{ + category_id: number; + category_code: string; + category_name: string; + parent_id: number | null; + level: number; + key_prefix: string; + description: string | null; + sort_order: number; + is_active: string; + }>( + `SELECT category_id, category_code, category_name, parent_id, + level, key_prefix, description, sort_order, is_active + FROM multi_lang_category + WHERE is_active = 'Y' + ORDER BY level ASC, sort_order ASC, category_name ASC` + ); + + // 트리 구조로 변환 + const categoryMap = new Map(); + const rootCategories: LangCategory[] = []; + + // 모든 카테고리를 맵에 저장 + categories.forEach((cat) => { + const category: LangCategory = { + categoryId: cat.category_id, + categoryCode: cat.category_code, + categoryName: cat.category_name, + parentId: cat.parent_id, + level: cat.level, + keyPrefix: cat.key_prefix, + description: cat.description || undefined, + sortOrder: cat.sort_order, + isActive: cat.is_active, + children: [], + }; + categoryMap.set(cat.category_id, category); + }); + + // 부모-자식 관계 설정 + categoryMap.forEach((category) => { + if (category.parentId && categoryMap.has(category.parentId)) { + const parent = categoryMap.get(category.parentId)!; + parent.children = parent.children || []; + parent.children.push(category); + } else if (!category.parentId) { + rootCategories.push(category); + } + }); + + logger.info(`카테고리 목록 조회 완료: ${categories.length}개`); + return rootCategories; + } catch (error) { + logger.error("카테고리 목록 조회 중 오류 발생:", error); + throw new Error( + `카테고리 목록 조회 실패: ${error instanceof Error ? error.message : "Unknown error"}` + ); + } + } + + /** + * 카테고리 단일 조회 + */ + async getCategoryById(categoryId: number): Promise { + try { + const category = await queryOne<{ + category_id: number; + category_code: string; + category_name: string; + parent_id: number | null; + level: number; + key_prefix: string; + description: string | null; + sort_order: number; + is_active: string; + }>( + `SELECT category_id, category_code, category_name, parent_id, + level, key_prefix, description, sort_order, is_active + FROM multi_lang_category + WHERE category_id = $1`, + [categoryId] + ); + + if (!category) { + return null; + } + + return { + categoryId: category.category_id, + categoryCode: category.category_code, + categoryName: category.category_name, + parentId: category.parent_id, + level: category.level, + keyPrefix: category.key_prefix, + description: category.description || undefined, + sortOrder: category.sort_order, + isActive: category.is_active, + }; + } catch (error) { + logger.error("카테고리 조회 중 오류 발생:", error); + throw new Error( + `카테고리 조회 실패: ${error instanceof Error ? error.message : "Unknown error"}` + ); + } + } + + /** + * 카테고리 경로 조회 (부모 포함) + */ + async getCategoryPath(categoryId: number): Promise { + try { + const categories = await query<{ + category_id: number; + category_code: string; + category_name: string; + parent_id: number | null; + level: number; + key_prefix: string; + description: string | null; + sort_order: number; + is_active: string; + }>( + `WITH RECURSIVE category_path AS ( + SELECT category_id, category_code, category_name, parent_id, + level, key_prefix, description, sort_order, is_active + FROM multi_lang_category + WHERE category_id = $1 + UNION ALL + SELECT c.category_id, c.category_code, c.category_name, c.parent_id, + c.level, c.key_prefix, c.description, c.sort_order, c.is_active + FROM multi_lang_category c + INNER JOIN category_path cp ON c.category_id = cp.parent_id + ) + SELECT * FROM category_path ORDER BY level ASC`, + [categoryId] + ); + + return categories.map((cat) => ({ + categoryId: cat.category_id, + categoryCode: cat.category_code, + categoryName: cat.category_name, + parentId: cat.parent_id, + level: cat.level, + keyPrefix: cat.key_prefix, + description: cat.description || undefined, + sortOrder: cat.sort_order, + isActive: cat.is_active, + })); + } catch (error) { + logger.error("카테고리 경로 조회 중 오류 발생:", error); + throw new Error( + `카테고리 경로 조회 실패: ${error instanceof Error ? error.message : "Unknown error"}` + ); + } + } + + /** + * 키 자동 생성 + */ + async generateKey(params: GenerateKeyRequest): Promise { + try { + logger.info("키 자동 생성 시작", { params }); + + // 카테고리 경로 조회 + const categoryPath = await this.getCategoryPath(params.categoryId); + if (categoryPath.length === 0) { + throw new Error("존재하지 않는 카테고리입니다"); + } + + // lang_key 자동 생성 (prefix.meaning 형식) + const prefixes = categoryPath.map((c) => c.keyPrefix); + const langKey = [...prefixes, params.keyMeaning].join("."); + + // 중복 체크 + const existingKey = await queryOne<{ key_id: number }>( + `SELECT key_id FROM multi_lang_key_master + WHERE company_code = $1 AND lang_key = $2`, + [params.companyCode, langKey] + ); + + if (existingKey) { + throw new Error(`이미 존재하는 키입니다: ${langKey}`); + } + + // 트랜잭션으로 키와 텍스트 생성 + let keyId: number = 0; + + await transaction(async (client) => { + // 키 생성 + const keyResult = await client.query( + `INSERT INTO multi_lang_key_master + (company_code, lang_key, category_id, key_meaning, usage_note, description, is_active, created_by, updated_by) + VALUES ($1, $2, $3, $4, $5, $6, 'Y', $7, $7) + RETURNING key_id`, + [ + params.companyCode, + langKey, + params.categoryId, + params.keyMeaning, + params.usageNote || null, + params.usageNote || null, + params.createdBy || "system", + ] + ); + + keyId = keyResult.rows[0].key_id; + + // 텍스트 생성 + for (const text of params.texts) { + await client.query( + `INSERT INTO multi_lang_text + (key_id, lang_code, lang_text, is_active, created_by, updated_by) + VALUES ($1, $2, $3, 'Y', $4, $4)`, + [keyId, text.langCode, text.langText, params.createdBy || "system"] + ); + } + }); + + logger.info("키 자동 생성 완료", { keyId, langKey }); + return keyId; + } catch (error) { + logger.error("키 자동 생성 중 오류 발생:", error); + throw new Error( + `키 자동 생성 실패: ${error instanceof Error ? error.message : "Unknown error"}` + ); + } + } + + /** + * 회사별 오버라이드 키 생성 + */ + async createOverrideKey(params: CreateOverrideKeyRequest): Promise { + try { + logger.info("오버라이드 키 생성 시작", { params }); + + // 원본 키 조회 + const baseKey = await queryOne<{ + key_id: number; + company_code: string; + lang_key: string; + category_id: number | null; + key_meaning: string | null; + }>( + `SELECT key_id, company_code, lang_key, category_id, key_meaning + FROM multi_lang_key_master WHERE key_id = $1`, + [params.baseKeyId] + ); + + if (!baseKey) { + throw new Error("원본 키를 찾을 수 없습니다"); + } + + // 공통 키(*)만 오버라이드 가능 + if (baseKey.company_code !== "*") { + throw new Error("공통 키(*)만 오버라이드 할 수 있습니다"); + } + + // 이미 오버라이드 키가 있는지 확인 + const existingOverride = await queryOne<{ key_id: number }>( + `SELECT key_id FROM multi_lang_key_master + WHERE company_code = $1 AND lang_key = $2`, + [params.companyCode, baseKey.lang_key] + ); + + if (existingOverride) { + throw new Error("이미 해당 회사의 오버라이드 키가 존재합니다"); + } + + let keyId: number = 0; + + await transaction(async (client) => { + // 오버라이드 키 생성 + const keyResult = await client.query( + `INSERT INTO multi_lang_key_master + (company_code, lang_key, category_id, key_meaning, base_key_id, is_active, created_by, updated_by) + VALUES ($1, $2, $3, $4, $5, 'Y', $6, $6) + RETURNING key_id`, + [ + params.companyCode, + baseKey.lang_key, + baseKey.category_id, + baseKey.key_meaning, + params.baseKeyId, + params.createdBy || "system", + ] + ); + + keyId = keyResult.rows[0].key_id; + + // 텍스트 생성 + for (const text of params.texts) { + await client.query( + `INSERT INTO multi_lang_text + (key_id, lang_code, lang_text, is_active, created_by, updated_by) + VALUES ($1, $2, $3, 'Y', $4, $4)`, + [keyId, text.langCode, text.langText, params.createdBy || "system"] + ); + } + }); + + logger.info("오버라이드 키 생성 완료", { keyId, langKey: baseKey.lang_key }); + return keyId; + } catch (error) { + logger.error("오버라이드 키 생성 중 오류 발생:", error); + throw new Error( + `오버라이드 키 생성 실패: ${error instanceof Error ? error.message : "Unknown error"}` + ); + } + } + + /** + * 회사의 오버라이드 키 목록 조회 + */ + async getOverrideKeys(companyCode: string): Promise { + try { + logger.info("오버라이드 키 목록 조회 시작", { companyCode }); + + const keys = await query<{ + key_id: number; + company_code: string; + lang_key: string; + category_id: number | null; + key_meaning: string | null; + usage_note: string | null; + base_key_id: number | null; + is_active: string; + created_date: Date | null; + }>( + `SELECT key_id, company_code, lang_key, category_id, key_meaning, + usage_note, base_key_id, is_active, created_date + FROM multi_lang_key_master + WHERE company_code = $1 AND base_key_id IS NOT NULL + ORDER BY lang_key ASC`, + [companyCode] + ); + + return keys.map((k) => ({ + keyId: k.key_id, + companyCode: k.company_code, + langKey: k.lang_key, + categoryId: k.category_id ?? undefined, + keyMeaning: k.key_meaning ?? undefined, + usageNote: k.usage_note ?? undefined, + baseKeyId: k.base_key_id ?? undefined, + isActive: k.is_active, + createdDate: k.created_date ?? undefined, + })); + } catch (error) { + logger.error("오버라이드 키 목록 조회 중 오류 발생:", error); + throw new Error( + `오버라이드 키 목록 조회 실패: ${error instanceof Error ? error.message : "Unknown error"}` + ); + } + } + + /** + * 키 존재 여부 및 미리보기 확인 + */ + async previewGeneratedKey(categoryId: number, keyMeaning: string, companyCode: string): Promise<{ + langKey: string; + exists: boolean; + isOverride: boolean; + baseKeyId?: number; + }> { + try { + // 카테고리 경로 조회 + const categoryPath = await this.getCategoryPath(categoryId); + if (categoryPath.length === 0) { + throw new Error("존재하지 않는 카테고리입니다"); + } + + // lang_key 생성 + const prefixes = categoryPath.map((c) => c.keyPrefix); + const langKey = [...prefixes, keyMeaning].join("."); + + // 공통 키 확인 + const commonKey = await queryOne<{ key_id: number }>( + `SELECT key_id FROM multi_lang_key_master + WHERE company_code = '*' AND lang_key = $1`, + [langKey] + ); + + // 회사별 키 확인 + const companyKey = await queryOne<{ key_id: number }>( + `SELECT key_id FROM multi_lang_key_master + WHERE company_code = $1 AND lang_key = $2`, + [companyCode, langKey] + ); + + return { + langKey, + exists: !!companyKey, + isOverride: !!commonKey && !companyKey, + baseKeyId: commonKey?.key_id, + }; + } catch (error) { + logger.error("키 미리보기 중 오류 발생:", error); + throw new Error( + `키 미리보기 실패: ${error instanceof Error ? error.message : "Unknown error"}` + ); + } + } + /** * 언어 목록 조회 */ @@ -275,14 +692,14 @@ export class MultiLangService { // 메뉴 코드 필터 if (params.menuCode) { - whereConditions.push(`menu_name = $${paramIndex++}`); + whereConditions.push(`usage_note = $${paramIndex++}`); values.push(params.menuCode); } // 검색 조건 (OR) if (params.searchText) { whereConditions.push( - `(lang_key ILIKE $${paramIndex} OR description ILIKE $${paramIndex} OR menu_name ILIKE $${paramIndex})` + `(lang_key ILIKE $${paramIndex} OR description ILIKE $${paramIndex} OR usage_note ILIKE $${paramIndex})` ); values.push(`%${params.searchText}%`); paramIndex++; @@ -296,7 +713,7 @@ export class MultiLangService { const langKeys = await query<{ key_id: number; company_code: string; - menu_name: string | null; + usage_note: string | null; lang_key: string; description: string | null; is_active: string | null; @@ -305,18 +722,18 @@ export class MultiLangService { updated_date: Date | null; updated_by: string | null; }>( - `SELECT key_id, company_code, menu_name, lang_key, description, is_active, + `SELECT key_id, company_code, usage_note, lang_key, description, is_active, created_date, created_by, updated_date, updated_by FROM multi_lang_key_master ${whereClause} - ORDER BY company_code ASC, menu_name ASC, lang_key ASC`, + ORDER BY company_code ASC, usage_note ASC, lang_key ASC`, values ); const mappedKeys: LangKey[] = langKeys.map((key) => ({ keyId: key.key_id, companyCode: key.company_code, - menuName: key.menu_name || undefined, + menuName: key.usage_note || undefined, langKey: key.lang_key, description: key.description || undefined, isActive: key.is_active || "Y", @@ -407,7 +824,7 @@ export class MultiLangService { // 다국어 키 생성 const createdKey = await queryOne<{ key_id: number }>( `INSERT INTO multi_lang_key_master - (company_code, menu_name, lang_key, description, is_active, created_by, updated_by) + (company_code, usage_note, lang_key, description, is_active, created_by, updated_by) VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING key_id`, [ @@ -480,7 +897,7 @@ export class MultiLangService { values.push(keyData.companyCode); } if (keyData.menuName !== undefined) { - updates.push(`menu_name = $${paramIndex++}`); + updates.push(`usage_note = $${paramIndex++}`); values.push(keyData.menuName); } if (keyData.langKey) { @@ -668,7 +1085,7 @@ export class MultiLangService { WHERE mlt.lang_code = $1 AND mlt.is_active = $2 AND mlkm.company_code = $3 - AND mlkm.menu_name = $4 + AND mlkm.usage_note = $4 AND mlkm.lang_key = $5 AND mlkm.is_active = $6`, [ @@ -753,7 +1170,8 @@ export class MultiLangService { } /** - * 배치 번역 조회 + * 배치 번역 조회 (회사별 우선순위 적용) + * 우선순위: 회사별 키 > 공통 키(*) */ async getBatchTranslations( params: BatchTranslationRequest @@ -775,12 +1193,17 @@ export class MultiLangService { .map((_, i) => `$${i + 4}`) .join(", "); + // 회사별 우선순위를 적용하기 위해 정렬 수정 + // 회사별 키가 먼저 오도록 DESC 정렬 (company_code가 '*'보다 특정 회사 코드가 알파벳 순으로 앞) + // 또는 CASE WHEN을 사용하여 명시적으로 우선순위 설정 const translations = await query<{ lang_text: string; lang_key: string; company_code: string; + priority: number; }>( - `SELECT mlt.lang_text, mlkm.lang_key, mlkm.company_code + `SELECT mlt.lang_text, mlkm.lang_key, mlkm.company_code, + CASE WHEN mlkm.company_code = $3 THEN 1 ELSE 2 END as priority FROM multi_lang_text mlt INNER JOIN multi_lang_key_master mlkm ON mlt.key_id = mlkm.key_id WHERE mlt.lang_code = $1 @@ -788,7 +1211,7 @@ export class MultiLangService { AND mlkm.lang_key IN (${placeholders}) AND mlkm.company_code IN ($3, '*') AND mlkm.is_active = $2 - ORDER BY mlkm.company_code ASC`, + ORDER BY mlkm.lang_key ASC, priority ASC`, [params.userLang, "Y", params.companyCode, ...params.langKeys] ); @@ -799,17 +1222,22 @@ export class MultiLangService { result[key] = key; }); - // 실제 번역으로 덮어쓰기 (회사별 우선) + // 우선순위 기반으로 번역 적용 + // priority가 낮은 것(회사별)이 먼저 오므로, 먼저 처리된 키는 덮어쓰지 않음 + const processedKeys = new Set(); + translations.forEach((translation) => { const langKey = translation.lang_key; - if (params.langKeys.includes(langKey)) { + if (params.langKeys.includes(langKey) && !processedKeys.has(langKey)) { result[langKey] = translation.lang_text; + processedKeys.add(langKey); } }); logger.info("배치 번역 조회 완료", { totalKeys: params.langKeys.length, foundTranslations: translations.length, + companyOverrides: translations.filter(t => t.company_code !== '*').length, resultKeys: Object.keys(result).length, }); diff --git a/backend-node/src/types/multilang.ts b/backend-node/src/types/multilang.ts index 8ad8adb6..c30fdfaa 100644 --- a/backend-node/src/types/multilang.ts +++ b/backend-node/src/types/multilang.ts @@ -17,12 +17,30 @@ export interface LangKey { langKey: string; description?: string; isActive: string; + categoryId?: number; + keyMeaning?: string; + usageNote?: string; + baseKeyId?: number; createdDate?: Date; createdBy?: string; updatedDate?: Date; updatedBy?: string; } +// 카테고리 인터페이스 +export interface LangCategory { + categoryId: number; + categoryCode: string; + categoryName: string; + parentId?: number | null; + level: number; + keyPrefix: string; + description?: string; + sortOrder: number; + isActive: string; + children?: LangCategory[]; +} + export interface LangText { textId?: number; keyId: number; @@ -63,10 +81,38 @@ export interface CreateLangKeyRequest { langKey: string; description?: string; isActive?: string; + categoryId?: number; + keyMeaning?: string; + usageNote?: string; + baseKeyId?: number; createdBy?: string; updatedBy?: string; } +// 자동 키 생성 요청 +export interface GenerateKeyRequest { + companyCode: string; + categoryId: number; + keyMeaning: string; + usageNote?: string; + texts: Array<{ + langCode: string; + langText: string; + }>; + createdBy?: string; +} + +// 오버라이드 키 생성 요청 +export interface CreateOverrideKeyRequest { + companyCode: string; + baseKeyId: number; + texts: Array<{ + langCode: string; + langText: string; + }>; + createdBy?: string; +} + export interface UpdateLangKeyRequest { companyCode?: string; menuName?: string; @@ -90,6 +136,8 @@ export interface GetLangKeysParams { menuCode?: string; keyType?: string; searchText?: string; + categoryId?: number; + includeOverrides?: boolean; page?: number; limit?: number; } diff --git a/docs/노드플로우_개선사항.md b/docs/노드플로우_개선사항.md index 32757807..a59f4499 100644 --- a/docs/노드플로우_개선사항.md +++ b/docs/노드플로우_개선사항.md @@ -588,3 +588,4 @@ const result = await executeNodeFlow(flowId, { + diff --git a/docs/다국어_관리_시스템_개선_계획서.md b/docs/다국어_관리_시스템_개선_계획서.md new file mode 100644 index 00000000..24ca5850 --- /dev/null +++ b/docs/다국어_관리_시스템_개선_계획서.md @@ -0,0 +1,597 @@ +# 다국어 관리 시스템 개선 계획서 + +## 1. 개요 + +### 1.1 현재 시스템 분석 + +현재 ERP 시스템의 다국어 관리 시스템은 기본적인 기능은 갖추고 있으나 다음과 같은 한계점이 있습니다. + +| 항목 | 현재 상태 | 문제점 | +|------|----------|--------| +| 회사별 다국어 | `company_code` 컬럼 존재하나 `*`(공통)만 사용 | 회사별 커스텀 번역 불가 | +| 언어 키 입력 | 수동 입력 (`button.add` 등) | 명명 규칙 불일치, 오타, 중복 위험 | +| 카테고리 분류 | 없음 (`menu_name` 텍스트만 존재) | 체계적 분류/검색 불가 | +| 권한 관리 | 없음 | 모든 사용자가 모든 키 수정 가능 | +| 조회 우선순위 | 없음 | 회사별 오버라이드 불가 | + +### 1.2 개선 목표 + +1. **회사별 다국어 오버라이드 시스템**: 공통 키를 기본으로 사용하되, 회사별 커스텀 번역 지원 +2. **권한 기반 접근 제어**: 공통 키는 최고 관리자만, 회사 키는 해당 회사만 수정 +3. **카테고리 기반 분류**: 2단계 계층 구조로 체계적 분류 +4. **자동 키 생성**: 카테고리 선택 + 의미 입력으로 규칙화된 키 자동 생성 +5. **실시간 중복 체크**: 키 생성 시 중복 여부 즉시 확인 + +--- + +## 2. 데이터베이스 스키마 설계 + +### 2.1 신규 테이블: multi_lang_category (카테고리 마스터) + +```sql +CREATE TABLE multi_lang_category ( + category_id SERIAL PRIMARY KEY, + category_code VARCHAR(50) NOT NULL, -- BUTTON, FORM, MESSAGE 등 + category_name VARCHAR(100) NOT NULL, -- 버튼, 폼, 메시지 등 + parent_id INT4 REFERENCES multi_lang_category(category_id), + level INT4 DEFAULT 1, -- 1=대분류, 2=세부분류 + key_prefix VARCHAR(50) NOT NULL, -- 키 생성용 prefix + description TEXT, + sort_order INT4 DEFAULT 0, + is_active CHAR(1) DEFAULT 'Y', + created_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP, + created_by VARCHAR(50), + updated_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP, + updated_by VARCHAR(50), + UNIQUE(category_code, COALESCE(parent_id, 0)) +); + +-- 인덱스 +CREATE INDEX idx_lang_category_parent ON multi_lang_category(parent_id); +CREATE INDEX idx_lang_category_level ON multi_lang_category(level); +``` + +### 2.2 기존 테이블 수정: multi_lang_key_master + +```sql +-- 카테고리 연결 컬럼 추가 +ALTER TABLE multi_lang_key_master +ADD COLUMN category_id INT4 REFERENCES multi_lang_category(category_id); + +-- 키 의미 컬럼 추가 (자동 생성 시 사용자 입력값) +ALTER TABLE multi_lang_key_master +ADD COLUMN key_meaning VARCHAR(100); + +-- 원본 키 참조 (오버라이드 시 원본 추적) +ALTER TABLE multi_lang_key_master +ADD COLUMN base_key_id INT4 REFERENCES multi_lang_key_master(key_id); + +-- menu_name을 usage_note로 변경 (사용 위치 메모) +ALTER TABLE multi_lang_key_master +RENAME COLUMN menu_name TO usage_note; + +-- 인덱스 추가 +CREATE INDEX idx_lang_key_category ON multi_lang_key_master(category_id); +CREATE INDEX idx_lang_key_company_category ON multi_lang_key_master(company_code, category_id); +CREATE INDEX idx_lang_key_base ON multi_lang_key_master(base_key_id); +``` + +### 2.3 테이블 관계도 + +``` +multi_lang_category (1) ◀────────┐ + ├── category_id (PK) │ + ├── category_code │ + ├── parent_id (자기참조) │ + └── key_prefix │ + │ +multi_lang_key_master (N) ────────┘ + ├── key_id (PK) + ├── company_code ('*' = 공통) + ├── category_id (FK) + ├── lang_key (자동 생성) + ├── key_meaning (사용자 입력) + ├── base_key_id (오버라이드 시 원본) + └── usage_note (사용 위치 메모) + │ + ▼ +multi_lang_text (N) + ├── text_id (PK) + ├── key_id (FK) + ├── lang_code (FK → language_master) + └── lang_text +``` + +--- + +## 3. 카테고리 체계 + +### 3.1 대분류 (Level 1) + +| category_code | category_name | key_prefix | 설명 | +|---------------|---------------|------------|------| +| COMMON | 공통 | common | 범용 텍스트 | +| BUTTON | 버튼 | button | 버튼 텍스트 | +| FORM | 폼 | form | 폼 라벨, 플레이스홀더 | +| TABLE | 테이블 | table | 테이블 헤더, 빈 상태 | +| MESSAGE | 메시지 | message | 알림, 경고, 성공 메시지 | +| MENU | 메뉴 | menu | 메뉴명, 네비게이션 | +| MODAL | 모달 | modal | 모달/다이얼로그 | +| VALIDATION | 검증 | validation | 유효성 검사 메시지 | +| STATUS | 상태 | status | 상태 표시 텍스트 | +| TOOLTIP | 툴팁 | tooltip | 툴팁, 도움말 | + +### 3.2 세부분류 (Level 2) + +#### BUTTON 하위 +| category_code | category_name | key_prefix | +|---------------|---------------|------------| +| ACTION | 액션 | action | +| NAVIGATION | 네비게이션 | nav | +| TOGGLE | 토글 | toggle | + +#### FORM 하위 +| category_code | category_name | key_prefix | +|---------------|---------------|------------| +| LABEL | 라벨 | label | +| PLACEHOLDER | 플레이스홀더 | placeholder | +| HELPER | 도움말 | helper | + +#### MESSAGE 하위 +| category_code | category_name | key_prefix | +|---------------|---------------|------------| +| SUCCESS | 성공 | success | +| ERROR | 에러 | error | +| WARNING | 경고 | warning | +| INFO | 안내 | info | +| CONFIRM | 확인 | confirm | + +#### TABLE 하위 +| category_code | category_name | key_prefix | +|---------------|---------------|------------| +| HEADER | 헤더 | header | +| EMPTY | 빈 상태 | empty | +| PAGINATION | 페이지네이션 | pagination | + +#### MENU 하위 +| category_code | category_name | key_prefix | +|---------------|---------------|------------| +| ADMIN | 관리자 | admin | +| USER | 사용자 | user | + +#### MODAL 하위 +| category_code | category_name | key_prefix | +|---------------|---------------|------------| +| TITLE | 제목 | title | +| DESCRIPTION | 설명 | description | + +### 3.3 키 자동 생성 규칙 + +**형식**: `{대분류_prefix}.{세부분류_prefix}.{key_meaning}` + +**예시**: +| 대분류 | 세부분류 | 의미 입력 | 생성 키 | +|--------|----------|----------|---------| +| BUTTON | ACTION | save | `button.action.save` | +| BUTTON | ACTION | delete_selected | `button.action.delete_selected` | +| FORM | LABEL | user_name | `form.label.user_name` | +| FORM | PLACEHOLDER | search | `form.placeholder.search` | +| MESSAGE | SUCCESS | save_complete | `message.success.save_complete` | +| MESSAGE | ERROR | network_fail | `message.error.network_fail` | +| TABLE | HEADER | created_date | `table.header.created_date` | +| MENU | ADMIN | user_management | `menu.admin.user_management` | + +--- + +## 4. 회사별 다국어 시스템 + +### 4.1 조회 우선순위 + +다국어 텍스트 조회 시 다음 우선순위를 적용합니다: + +1. **회사 전용 키** (`company_code = 'COMPANY_A'`) +2. **공통 키** (`company_code = '*'`) + +```sql +-- 조회 쿼리 예시 +WITH ranked_keys AS ( + SELECT + km.lang_key, + mt.lang_text, + km.company_code, + ROW_NUMBER() OVER ( + PARTITION BY km.lang_key + ORDER BY CASE WHEN km.company_code = $1 THEN 1 ELSE 2 END + ) as priority + FROM multi_lang_key_master km + JOIN multi_lang_text mt ON km.key_id = mt.key_id + WHERE km.lang_key = ANY($2) + AND mt.lang_code = $3 + AND km.is_active = 'Y' + AND km.company_code IN ($1, '*') +) +SELECT lang_key, lang_text +FROM ranked_keys +WHERE priority = 1; +``` + +### 4.2 오버라이드 프로세스 + +1. 회사 관리자가 공통 키에서 "이 회사 전용으로 복사" 클릭 +2. 시스템이 `base_key_id`에 원본 키를 참조하는 새 키 생성 +3. 기존 번역 텍스트 복사 +4. 회사 관리자가 번역 수정 +5. 이후 해당 회사 사용자는 회사 전용 번역 사용 + +### 4.3 권한 매트릭스 + +| 작업 | 최고 관리자 (`*`) | 회사 관리자 | 일반 사용자 | +|------|------------------|-------------|-------------| +| 공통 키 조회 | O | O | O | +| 공통 키 생성 | O | X | X | +| 공통 키 수정 | O | X | X | +| 공통 키 삭제 | O | X | X | +| 회사 키 조회 | O | 자사만 | 자사만 | +| 회사 키 생성 (오버라이드) | O | O | X | +| 회사 키 수정 | O | 자사만 | X | +| 회사 키 삭제 | O | 자사만 | X | +| 카테고리 관리 | O | X | X | + +--- + +## 5. API 설계 + +### 5.1 카테고리 API + +| 엔드포인트 | 메서드 | 설명 | 권한 | +|-----------|--------|------|------| +| `/multilang/categories` | GET | 카테고리 목록 조회 | 인증 필요 | +| `/multilang/categories/tree` | GET | 계층 구조로 조회 | 인증 필요 | +| `/multilang/categories` | POST | 카테고리 생성 | 최고 관리자 | +| `/multilang/categories/:id` | PUT | 카테고리 수정 | 최고 관리자 | +| `/multilang/categories/:id` | DELETE | 카테고리 삭제 | 최고 관리자 | + +### 5.2 다국어 키 API (개선) + +| 엔드포인트 | 메서드 | 설명 | 권한 | +|-----------|--------|------|------| +| `/multilang/keys` | GET | 키 목록 조회 (카테고리/회사 필터) | 인증 필요 | +| `/multilang/keys` | POST | 키 생성 | 공통: 최고관리자, 회사: 회사관리자 | +| `/multilang/keys/:keyId` | PUT | 키 수정 | 공통: 최고관리자, 회사: 해당회사 | +| `/multilang/keys/:keyId` | DELETE | 키 삭제 | 공통: 최고관리자, 회사: 해당회사 | +| `/multilang/keys/:keyId/override` | POST | 공통 키를 회사 전용으로 복사 | 회사 관리자 | +| `/multilang/keys/check` | GET | 키 중복 체크 | 인증 필요 | +| `/multilang/keys/generate-preview` | POST | 키 자동 생성 미리보기 | 인증 필요 | + +### 5.3 API 요청/응답 예시 + +#### 키 생성 요청 +```json +POST /multilang/keys +{ + "categoryId": 11, // 세부분류 ID (BUTTON > ACTION) + "keyMeaning": "save_changes", + "description": "변경사항 저장 버튼", + "usageNote": "사용자 관리, 설정 화면", + "texts": [ + { "langCode": "KR", "langText": "저장하기" }, + { "langCode": "US", "langText": "Save Changes" }, + { "langCode": "JP", "langText": "保存する" } + ] +} +``` + +#### 키 생성 응답 +```json +{ + "success": true, + "message": "다국어 키가 생성되었습니다.", + "data": { + "keyId": 175, + "langKey": "button.action.save_changes", + "companyCode": "*", + "categoryId": 11 + } +} +``` + +#### 오버라이드 요청 +```json +POST /multilang/keys/123/override +{ + "texts": [ + { "langCode": "KR", "langText": "등록하기" }, + { "langCode": "US", "langText": "Register" } + ] +} +``` + +--- + +## 6. 프론트엔드 UI 설계 + +### 6.1 다국어 관리 페이지 리뉴얼 + +``` +┌─────────────────────────────────────────────────────────────────────────┐ +│ 다국어 관리 │ +│ 다국어 키와 번역 텍스트를 관리합니다 │ +├─────────────────────────────────────────────────────────────────────────┤ +│ [언어 관리] [다국어 키 관리] [카테고리 관리] │ +├─────────────────────────────────────────────────────────────────────────┤ +│ │ +│ ┌────────────────────┐ ┌───────────────────────────────────────────────┤ +│ │ 카테고리 필터 │ │ │ +│ │ │ │ 검색: [________________] 회사: [전체 ▼] │ +│ │ ▼ 버튼 (45) │ │ [초기화] [+ 키 등록] │ +│ │ ├ 액션 (30) │ │───────────────────────────────────────────────│ +│ │ ├ 네비게이션 (10)│ │ ☐ │ 키 │ 카테고리 │ 회사 │ 상태 │ +│ │ └ 토글 (5) │ │───────────────────────────────────────────────│ +│ │ ▼ 폼 (60) │ │ ☐ │ button.action.save │ 버튼>액션 │ 공통 │ 활성 │ +│ │ ├ 라벨 (35) │ │ ☐ │ button.action.save │ 버튼>액션 │ A사 │ 활성 │ +│ │ ├ 플레이스홀더(15)│ │ ☐ │ button.action.delete │ 버튼>액션 │ 공통 │ 활성 │ +│ │ └ 도움말 (10) │ │ ☐ │ form.label.user_name │ 폼>라벨 │ 공통 │ 활성 │ +│ │ ▶ 메시지 (40) │ │───────────────────────────────────────────────│ +│ │ ▶ 테이블 (20) │ │ 페이지: [1] [2] [3] ... [10] │ +│ │ ▶ 메뉴 (9) │ │ │ +│ └────────────────────┘ └───────────────────────────────────────────────┤ +└─────────────────────────────────────────────────────────────────────────┘ +``` + +### 6.2 키 등록 모달 + +``` +┌─────────────────────────────────────────────────────────────────┐ +│ 다국어 키 등록 │ +├─────────────────────────────────────────────────────────────────┤ +│ │ +│ ① 카테고리 선택 │ +│ ┌───────────────────────────────────────────────────────────────┤ +│ │ 대분류 * │ 세부 분류 * │ +│ │ ┌─────────────────────────┐ │ ┌─────────────────────────┐ │ +│ │ │ 공통 │ │ │ (대분류 먼저 선택) │ │ +│ │ │ ● 버튼 │ │ │ ● 액션 │ │ +│ │ │ 폼 │ │ │ 네비게이션 │ │ +│ │ │ 테이블 │ │ │ 토글 │ │ +│ │ │ 메시지 │ │ │ │ │ +│ │ └─────────────────────────┘ │ └─────────────────────────┘ │ +│ └───────────────────────────────────────────────────────────────┤ +│ │ +│ ② 키 정보 입력 │ +│ ┌───────────────────────────────────────────────────────────────┤ +│ │ 키 의미 (영문) * │ +│ │ [ save_changes ] │ +│ │ 영문 소문자, 밑줄(_) 사용. 예: save, add_new, delete_all │ +│ │ │ +│ │ ───────────────────────────────────────────────────────── │ +│ │ 자동 생성 키: │ +│ │ ┌─────────────────────────────────────────────────────────┐ │ +│ │ │ button.action.save_changes │ │ +│ │ └─────────────────────────────────────────────────────────┘ │ +│ │ ✓ 사용 가능한 키입니다 │ +│ └───────────────────────────────────────────────────────────────┤ +│ │ +│ ③ 설명 및 번역 │ +│ ┌───────────────────────────────────────────────────────────────┤ +│ │ 설명 (선택) │ +│ │ [ 변경사항을 저장하는 버튼 ] │ +│ │ │ +│ │ 사용 위치 메모 (선택) │ +│ │ [ 사용자 관리, 설정 화면 ] │ +│ │ │ +│ │ ───────────────────────────────────────────────────────── │ +│ │ 번역 텍스트 │ +│ │ │ +│ │ 한국어 (KR) * [ 저장하기 ] │ +│ │ English (US) [ Save Changes ] │ +│ │ 日本語 (JP) [ 保存する ] │ +│ └───────────────────────────────────────────────────────────────┤ +│ │ +├─────────────────────────────────────────────────────────────────┤ +│ [취소] [등록] │ +└─────────────────────────────────────────────────────────────────┘ +``` + +### 6.3 공통 키 편집 모달 (회사 관리자용) + +``` +┌─────────────────────────────────────────────────────────────────┐ +│ 다국어 키 상세 │ +│ button.action.save (공통) │ +├─────────────────────────────────────────────────────────────────┤ +│ │ +│ 카테고리: 버튼 > 액션 │ +│ 설명: 저장 버튼 │ +│ │ +│ ───────────────────────────────────────────────────────────── │ +│ 번역 텍스트 (읽기 전용) │ +│ │ +│ 한국어 (KR) 저장 │ +│ English (US) Save │ +│ 日本語 (JP) 保存 │ +│ │ +├─────────────────────────────────────────────────────────────────┤ +│ 공통 키는 수정할 수 없습니다. │ +│ 이 회사만의 번역이 필요하시면 아래 버튼을 클릭하세요. │ +│ │ +│ [이 회사 전용으로 복사] │ +├─────────────────────────────────────────────────────────────────┤ +│ [닫기] │ +└─────────────────────────────────────────────────────────────────┘ +``` + +### 6.4 회사 전용 키 생성 모달 (오버라이드) + +``` +┌─────────────────────────────────────────────────────────────────┐ +│ 회사 전용 키 생성 │ +├─────────────────────────────────────────────────────────────────┤ +│ │ +│ 원본 키: button.action.save (공통) │ +│ │ +│ 원본 번역: │ +│ ┌─────────────────────────────────────────────────────────────┐ │ +│ │ 한국어: 저장 │ │ +│ │ English: Save │ │ +│ │ 日本語: 保存 │ │ +│ └─────────────────────────────────────────────────────────────┘ │ +│ │ +│ ───────────────────────────────────────────────────────────── │ +│ │ +│ 이 회사 전용 번역 텍스트: │ +│ │ +│ 한국어 (KR) * [ 등록하기 ] │ +│ English (US) [ Register ] │ +│ 日本語 (JP) [ 登録 ] │ +│ │ +├─────────────────────────────────────────────────────────────────┤ +│ 회사 전용 키를 생성하면 공통 키 대신 사용됩니다. │ +│ 원본 키가 변경되어도 회사 전용 키는 영향받지 않습니다. │ +├─────────────────────────────────────────────────────────────────┤ +│ [취소] [생성] │ +└─────────────────────────────────────────────────────────────────┘ +``` + +--- + +## 7. 구현 계획 + +### 7.1 Phase 1: 데이터베이스 마이그레이션 + +**예상 소요 시간: 2시간** + +1. 카테고리 테이블 생성 +2. 기본 카테고리 데이터 삽입 (대분류 10개, 세부분류 약 20개) +3. multi_lang_key_master 스키마 변경 +4. 기존 174개 키 카테고리 자동 분류 (패턴 매칭) + +**마이그레이션 파일**: `db/migrations/075_multilang_category_system.sql` + +### 7.2 Phase 2: 백엔드 API 개발 + +**예상 소요 시간: 4시간** + +1. 카테고리 CRUD API +2. 키 조회 로직 수정 (우선순위 적용) +3. 권한 검사 미들웨어 +4. 오버라이드 API +5. 키 중복 체크 API +6. 키 자동 생성 미리보기 API + +**관련 파일**: +- `backend-node/src/controllers/multilangController.ts` +- `backend-node/src/services/multilangService.ts` +- `backend-node/src/routes/multilangRoutes.ts` + +### 7.3 Phase 3: 프론트엔드 UI 개발 + +**예상 소요 시간: 6시간** + +1. 카테고리 트리 컴포넌트 +2. 키 등록 모달 리뉴얼 (단계별 입력) +3. 키 편집 모달 (권한별 UI 분기) +4. 오버라이드 모달 +5. 카테고리 관리 탭 추가 + +**관련 파일**: +- `frontend/app/(main)/admin/systemMng/i18nList/page.tsx` +- `frontend/components/multilang/LangKeyModal.tsx` (리뉴얼) +- `frontend/components/multilang/CategoryTree.tsx` (신규) +- `frontend/components/multilang/OverrideModal.tsx` (신규) + +### 7.4 Phase 4: 테스트 및 마이그레이션 + +**예상 소요 시간: 2시간** + +1. API 테스트 +2. UI 테스트 +3. 기존 데이터 마이그레이션 검증 +4. 권한 테스트 (최고 관리자, 회사 관리자) + +--- + +## 8. 상세 구현 일정 + +| 단계 | 작업 | 예상 시간 | 의존성 | +|------|------|----------|--------| +| 1.1 | 마이그레이션 SQL 작성 | 30분 | - | +| 1.2 | 카테고리 기본 데이터 삽입 | 30분 | 1.1 | +| 1.3 | 기존 키 카테고리 자동 분류 | 30분 | 1.2 | +| 1.4 | 스키마 변경 검증 | 30분 | 1.3 | +| 2.1 | 카테고리 API 개발 | 1시간 | 1.4 | +| 2.2 | 키 조회 로직 수정 (우선순위) | 1시간 | 2.1 | +| 2.3 | 권한 검사 로직 추가 | 30분 | 2.2 | +| 2.4 | 오버라이드 API 개발 | 1시간 | 2.3 | +| 2.5 | 키 생성 API 개선 (자동 생성) | 30분 | 2.4 | +| 3.1 | 카테고리 트리 컴포넌트 | 1시간 | 2.5 | +| 3.2 | 키 등록 모달 리뉴얼 | 2시간 | 3.1 | +| 3.3 | 키 편집/상세 모달 | 1시간 | 3.2 | +| 3.4 | 오버라이드 모달 | 1시간 | 3.3 | +| 3.5 | 카테고리 관리 탭 | 1시간 | 3.4 | +| 4.1 | 통합 테스트 | 1시간 | 3.5 | +| 4.2 | 버그 수정 및 마무리 | 1시간 | 4.1 | + +**총 예상 시간: 약 14시간** + +--- + +## 9. 기대 효과 + +### 9.1 개선 전후 비교 + +| 항목 | 현재 | 개선 후 | +|------|------|---------| +| 키 명명 규칙 | 불규칙 (수동 입력) | 규칙화 (자동 생성) | +| 카테고리 분류 | 없음 | 2단계 계층 구조 | +| 회사별 다국어 | 미활용 | 오버라이드 지원 | +| 조회 우선순위 | 없음 | 회사 전용 > 공통 | +| 권한 관리 | 없음 | 역할별 접근 제어 | +| 중복 체크 | 저장 시에만 | 실시간 검증 | +| 검색/필터 | 키 이름만 | 카테고리 + 회사 + 키 | + +### 9.2 사용자 경험 개선 + +1. **일관된 키 명명**: 자동 생성으로 규칙 준수 +2. **빠른 검색**: 카테고리 기반 필터링 +3. **회사별 커스터마이징**: 브랜드에 맞는 번역 사용 +4. **안전한 수정**: 권한 기반 보호 + +### 9.3 유지보수 개선 + +1. **체계적 분류**: 어떤 텍스트가 어디에 사용되는지 명확 +2. **변경 영향 파악**: 오버라이드 추적으로 영향 범위 확인 +3. **권한 분리**: 공통 키 보호, 회사별 자율성 보장 + +--- + +## 10. 참고 자료 + +### 10.1 관련 파일 + +| 파일 | 설명 | +|------|------| +| `frontend/hooks/useMultiLang.ts` | 다국어 훅 | +| `frontend/lib/utils/multilang.ts` | 다국어 유틸리티 | +| `frontend/app/(main)/admin/systemMng/i18nList/page.tsx` | 다국어 관리 페이지 | +| `backend-node/src/controllers/multilangController.ts` | API 컨트롤러 | +| `backend-node/src/services/multilangService.ts` | 비즈니스 로직 | +| `docs/다국어_시스템_가이드.md` | 기존 시스템 가이드 | + +### 10.2 데이터베이스 테이블 + +| 테이블 | 설명 | +|--------|------| +| `language_master` | 언어 마스터 (KR, US, JP) | +| `multi_lang_key_master` | 다국어 키 마스터 | +| `multi_lang_text` | 다국어 번역 텍스트 | +| `multi_lang_category` | 다국어 카테고리 (신규) | + +--- + +## 11. 변경 이력 + +| 버전 | 날짜 | 작성자 | 변경 내용 | +|------|------|--------|----------| +| 1.0 | 2026-01-13 | AI | 최초 작성 | + + diff --git a/docs/메일발송_기능_사용_가이드.md b/docs/메일발송_기능_사용_가이드.md index 8bfe484e..ef62a60a 100644 --- a/docs/메일발송_기능_사용_가이드.md +++ b/docs/메일발송_기능_사용_가이드.md @@ -361,3 +361,4 @@ + diff --git a/docs/즉시저장_버튼_액션_구현_계획서.md b/docs/즉시저장_버튼_액션_구현_계획서.md index 8d8fb497..806e480d 100644 --- a/docs/즉시저장_버튼_액션_구현_계획서.md +++ b/docs/즉시저장_버튼_액션_구현_계획서.md @@ -347,3 +347,4 @@ const getComponentValue = (componentId: string) => { + diff --git a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx index 0327e122..723a8130 100644 --- a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx +++ b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx @@ -128,3 +128,4 @@ export default function ScreenManagementPage() { ); } + diff --git a/frontend/app/(main)/admin/systemMng/i18nList/page.tsx b/frontend/app/(main)/admin/systemMng/i18nList/page.tsx index 3acce6fb..22ca2ae9 100644 --- a/frontend/app/(main)/admin/systemMng/i18nList/page.tsx +++ b/frontend/app/(main)/admin/systemMng/i18nList/page.tsx @@ -7,13 +7,19 @@ import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Badge } from "@/components/ui/badge"; +import { ScrollArea } from "@/components/ui/scroll-area"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { Plus } from "lucide-react"; import { DataTable } from "@/components/common/DataTable"; import { LoadingSpinner } from "@/components/common/LoadingSpinner"; import { useAuth } from "@/hooks/useAuth"; import LangKeyModal from "@/components/admin/LangKeyModal"; import LanguageModal from "@/components/admin/LanguageModal"; +import { CategoryTree } from "@/components/admin/multilang/CategoryTree"; +import { KeyGenerateModal } from "@/components/admin/multilang/KeyGenerateModal"; import { apiClient } from "@/lib/api/client"; +import { LangCategory } from "@/lib/api/multilang"; interface Language { langCode: string; @@ -59,6 +65,10 @@ export default function I18nPage() { const [selectedLanguages, setSelectedLanguages] = useState>(new Set()); const [activeTab, setActiveTab] = useState<"keys" | "languages">("keys"); + // 카테고리 관련 상태 + const [selectedCategory, setSelectedCategory] = useState(null); + const [isGenerateModalOpen, setIsGenerateModalOpen] = useState(false); + const [companies, setCompanies] = useState>([]); // 회사 목록 조회 @@ -678,27 +688,70 @@ export default function I18nPage() { {/* 다국어 키 관리 탭 */} {activeTab === "keys" && ( -
- {/* 좌측: 언어 키 목록 (7/10) */} - - +
+ {/* 좌측: 카테고리 트리 (2/12) */} + +
- 언어 키 목록 + 카테고리 +
+ + + + setSelectedCategory(cat)} + onDoubleClickCategory={(cat) => { + setSelectedCategory(cat); + setIsGenerateModalOpen(true); + }} + /> + + + + + {/* 중앙: 언어 키 목록 (6/12) */} + + +
+ + 언어 키 목록 + {selectedCategory && ( + + {selectedCategory.categoryName} + + )} +
- - + +
- + {/* 검색 필터 영역 */}
- + setSearchText(e.target.value)} + className="h-8 text-xs" />
-
검색 결과: {getFilteredLangKeys().length}건
+
결과: {getFilteredLangKeys().length}건
{/* 테이블 영역 */}
-
전체: {getFilteredLangKeys().length}건
- {/* 우측: 선택된 키의 다국어 관리 (3/10) */} - + {/* 우측: 선택된 키의 다국어 관리 (4/12) */} + {selectedKey ? ( @@ -817,6 +870,18 @@ export default function I18nPage() { onSave={handleSaveLanguage} languageData={editingLanguage} /> + + {/* 키 자동 생성 모달 */} + setIsGenerateModalOpen(false)} + selectedCategory={selectedCategory} + companyCode={user?.companyCode || ""} + isSuperAdmin={user?.companyCode === "*"} + onSuccess={() => { + fetchLangKeys(); + }} + />
diff --git a/frontend/components/admin/multilang/CategoryTree.tsx b/frontend/components/admin/multilang/CategoryTree.tsx new file mode 100644 index 00000000..66d047a6 --- /dev/null +++ b/frontend/components/admin/multilang/CategoryTree.tsx @@ -0,0 +1,199 @@ +"use client"; + +import { useState, useEffect } from "react"; +import { ChevronRight, ChevronDown, Folder, FolderOpen, Tag } from "lucide-react"; +import { cn } from "@/lib/utils"; +import { LangCategory, getCategories } from "@/lib/api/multilang"; + +interface CategoryTreeProps { + selectedCategoryId: number | null; + onSelectCategory: (category: LangCategory | null) => void; + onDoubleClickCategory?: (category: LangCategory) => void; +} + +interface CategoryNodeProps { + category: LangCategory; + level: number; + selectedCategoryId: number | null; + onSelectCategory: (category: LangCategory) => void; + onDoubleClickCategory?: (category: LangCategory) => void; +} + +function CategoryNode({ + category, + level, + selectedCategoryId, + onSelectCategory, + onDoubleClickCategory, +}: CategoryNodeProps) { + const [isExpanded, setIsExpanded] = useState(true); + const hasChildren = category.children && category.children.length > 0; + const isSelected = selectedCategoryId === category.categoryId; + + return ( +
+
onSelectCategory(category)} + onDoubleClick={() => onDoubleClickCategory?.(category)} + > + {/* 확장/축소 아이콘 */} + {hasChildren ? ( + + ) : ( + + )} + + {/* 폴더/태그 아이콘 */} + {hasChildren || level === 0 ? ( + isExpanded ? ( + + ) : ( + + ) + ) : ( + + )} + + {/* 카테고리 이름 */} + {category.categoryName} + + {/* prefix 표시 */} + + {category.keyPrefix} + +
+ + {/* 자식 카테고리 */} + {hasChildren && isExpanded && ( +
+ {category.children!.map((child) => ( + + ))} +
+ )} +
+ ); +} + +export function CategoryTree({ + selectedCategoryId, + onSelectCategory, + onDoubleClickCategory, +}: CategoryTreeProps) { + const [categories, setCategories] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + loadCategories(); + }, []); + + const loadCategories = async () => { + try { + setLoading(true); + const response = await getCategories(); + if (response.success && response.data) { + setCategories(response.data); + } else { + setError(response.error?.details || "카테고리 로드 실패"); + } + } catch (err) { + setError("카테고리 로드 중 오류 발생"); + } finally { + setLoading(false); + } + }; + + if (loading) { + return ( +
+
+ 카테고리 로딩 중... +
+
+ ); + } + + if (error) { + return ( +
+
{error}
+
+ ); + } + + if (categories.length === 0) { + return ( +
+
+ 카테고리가 없습니다 +
+
+ ); + } + + return ( +
+ {/* 전체 선택 옵션 */} +
onSelectCategory(null)} + > + + 전체 +
+ + {/* 카테고리 트리 */} + {categories.map((category) => ( + + ))} +
+ ); +} + +export default CategoryTree; + + diff --git a/frontend/components/admin/multilang/KeyGenerateModal.tsx b/frontend/components/admin/multilang/KeyGenerateModal.tsx new file mode 100644 index 00000000..c595adbc --- /dev/null +++ b/frontend/components/admin/multilang/KeyGenerateModal.tsx @@ -0,0 +1,497 @@ +"use client"; + +import { useState, useEffect, useCallback } from "react"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogDescription, + DialogFooter, +} from "@/components/ui/dialog"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Textarea } from "@/components/ui/textarea"; +import { Badge } from "@/components/ui/badge"; +import { Alert, AlertDescription } from "@/components/ui/alert"; +import { Loader2, AlertCircle, CheckCircle2, Info, Check, ChevronsUpDown } from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, +} from "@/components/ui/command"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { + LangCategory, + Language, + generateKey, + previewKey, + createOverrideKey, + getLanguages, + getCategoryPath, + KeyPreview, +} from "@/lib/api/multilang"; +import { apiClient } from "@/lib/api/client"; + +interface Company { + companyCode: string; + companyName: string; +} + +interface KeyGenerateModalProps { + isOpen: boolean; + onClose: () => void; + selectedCategory: LangCategory | null; + companyCode: string; + isSuperAdmin: boolean; + onSuccess: () => void; +} + +export function KeyGenerateModal({ + isOpen, + onClose, + selectedCategory, + companyCode, + isSuperAdmin, + onSuccess, +}: KeyGenerateModalProps) { + // 상태 + const [keyMeaning, setKeyMeaning] = useState(""); + const [usageNote, setUsageNote] = useState(""); + const [targetCompanyCode, setTargetCompanyCode] = useState(companyCode); + const [languages, setLanguages] = useState([]); + const [texts, setTexts] = useState>({}); + const [categoryPath, setCategoryPath] = useState([]); + const [preview, setPreview] = useState(null); + const [loading, setLoading] = useState(false); + const [previewLoading, setPreviewLoading] = useState(false); + const [error, setError] = useState(null); + const [companies, setCompanies] = useState([]); + const [companySearchOpen, setCompanySearchOpen] = useState(false); + + // 초기화 + useEffect(() => { + if (isOpen) { + setKeyMeaning(""); + setUsageNote(""); + setTargetCompanyCode(isSuperAdmin ? "*" : companyCode); + setTexts({}); + setPreview(null); + setError(null); + loadLanguages(); + if (isSuperAdmin) { + loadCompanies(); + } + if (selectedCategory) { + loadCategoryPath(selectedCategory.categoryId); + } else { + setCategoryPath([]); + } + } + }, [isOpen, selectedCategory, companyCode, isSuperAdmin]); + + // 회사 목록 로드 (최고관리자 전용) + const loadCompanies = async () => { + try { + const response = await apiClient.get("/admin/companies"); + if (response.data.success && response.data.data) { + // snake_case를 camelCase로 변환하고 공통(*)은 제외 + const companyList = response.data.data + .filter((c: any) => c.company_code !== "*") + .map((c: any) => ({ + companyCode: c.company_code, + companyName: c.company_name, + })); + setCompanies(companyList); + } + } catch (err) { + console.error("회사 목록 로드 실패:", err); + } + }; + + // 언어 목록 로드 + const loadLanguages = async () => { + const response = await getLanguages(); + if (response.success && response.data) { + const activeLanguages = response.data.filter((l) => l.isActive === "Y"); + setLanguages(activeLanguages); + // 초기 텍스트 상태 설정 + const initialTexts: Record = {}; + activeLanguages.forEach((lang) => { + initialTexts[lang.langCode] = ""; + }); + setTexts(initialTexts); + } + }; + + // 카테고리 경로 로드 + const loadCategoryPath = async (categoryId: number) => { + const response = await getCategoryPath(categoryId); + if (response.success && response.data) { + setCategoryPath(response.data); + } + }; + + // 키 미리보기 (디바운스) + const loadPreview = useCallback(async () => { + if (!selectedCategory || !keyMeaning.trim()) { + setPreview(null); + return; + } + + setPreviewLoading(true); + try { + const response = await previewKey( + selectedCategory.categoryId, + keyMeaning.trim().toLowerCase().replace(/\s+/g, "_"), + targetCompanyCode + ); + if (response.success && response.data) { + setPreview(response.data); + } + } catch (err) { + console.error("키 미리보기 실패:", err); + } finally { + setPreviewLoading(false); + } + }, [selectedCategory, keyMeaning, targetCompanyCode]); + + // keyMeaning 변경 시 디바운스로 미리보기 로드 + useEffect(() => { + const timer = setTimeout(loadPreview, 500); + return () => clearTimeout(timer); + }, [loadPreview]); + + // 텍스트 변경 핸들러 + const handleTextChange = (langCode: string, value: string) => { + setTexts((prev) => ({ ...prev, [langCode]: value })); + }; + + // 저장 핸들러 + const handleSave = async () => { + if (!selectedCategory) { + setError("카테고리를 선택해주세요"); + return; + } + + if (!keyMeaning.trim()) { + setError("키 의미를 입력해주세요"); + return; + } + + // 최소 하나의 텍스트 입력 검증 + const hasText = Object.values(texts).some((t) => t.trim()); + if (!hasText) { + setError("최소 하나의 언어에 대한 텍스트를 입력해주세요"); + return; + } + + setLoading(true); + setError(null); + + try { + // 오버라이드 모드인지 확인 + if (preview?.isOverride && preview.baseKeyId) { + // 오버라이드 키 생성 + const response = await createOverrideKey({ + companyCode: targetCompanyCode, + baseKeyId: preview.baseKeyId, + texts: Object.entries(texts) + .filter(([_, text]) => text.trim()) + .map(([langCode, langText]) => ({ langCode, langText })), + }); + + if (response.success) { + onSuccess(); + onClose(); + } else { + setError(response.error?.details || "오버라이드 키 생성 실패"); + } + } else { + // 새 키 생성 + const response = await generateKey({ + companyCode: targetCompanyCode, + categoryId: selectedCategory.categoryId, + keyMeaning: keyMeaning.trim().toLowerCase().replace(/\s+/g, "_"), + usageNote: usageNote.trim() || undefined, + texts: Object.entries(texts) + .filter(([_, text]) => text.trim()) + .map(([langCode, langText]) => ({ langCode, langText })), + }); + + if (response.success) { + onSuccess(); + onClose(); + } else { + setError(response.error?.details || "키 생성 실패"); + } + } + } catch (err: any) { + setError(err.message || "키 생성 중 오류 발생"); + } finally { + setLoading(false); + } + }; + + // 생성될 키 미리보기 + const generatedKeyPreview = categoryPath.length > 0 && keyMeaning.trim() + ? [...categoryPath.map((c) => c.keyPrefix), keyMeaning.trim().toLowerCase().replace(/\s+/g, "_")].join(".") + : ""; + + return ( + !open && onClose()}> + + + + {preview?.isOverride ? "오버라이드 키 생성" : "다국어 키 생성"} + + + {preview?.isOverride + ? "공통 키에 대한 회사별 오버라이드를 생성합니다" + : "새로운 다국어 키를 자동으로 생성합니다"} + + + +
+ {/* 카테고리 경로 표시 */} +
+ +
+ {categoryPath.length > 0 ? ( + categoryPath.map((cat, idx) => ( + + + {cat.categoryName} + + {idx < categoryPath.length - 1 && ( + / + )} + + )) + ) : ( + + 카테고리를 선택해주세요 + + )} +
+
+ + {/* 키 의미 입력 */} +
+ + setKeyMeaning(e.target.value)} + placeholder="예: add_new_item, search_button, save_success" + className="h-8 text-xs sm:h-10 sm:text-sm" + /> +

+ 영문 소문자와 밑줄(_)을 사용하세요 +

+
+ + {/* 생성될 키 미리보기 */} + {generatedKeyPreview && ( +
+
+ {previewLoading ? ( + + ) : preview?.exists ? ( + + ) : preview?.isOverride ? ( + + ) : ( + + )} + + {generatedKeyPreview} + +
+ {preview?.exists && ( +

+ 이미 존재하는 키입니다 +

+ )} + {preview?.isOverride && !preview?.exists && ( +

+ 공통 키가 존재합니다. 회사별 오버라이드로 생성됩니다. +

+ )} +
+ )} + + {/* 대상 회사 선택 (최고 관리자만) */} + {isSuperAdmin && ( +
+ +
+ + + + + + + + + + 검색 결과가 없습니다 + + + { + setTargetCompanyCode("*"); + setCompanySearchOpen(false); + }} + className="text-xs sm:text-sm" + > + + 공통 (*) - 모든 회사 적용 + + {companies.map((company) => ( + { + setTargetCompanyCode(company.companyCode); + setCompanySearchOpen(false); + }} + className="text-xs sm:text-sm" + > + + {company.companyName} ({company.companyCode}) + + ))} + + + + + +
+
+ )} + + {/* 사용 메모 */} +
+ +