다국어 관리 시스템 개선: 카테고리 및 키 자동 생성 기능 추가
This commit is contained in:
parent
989b7e53a7
commit
b576837f18
|
|
@ -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<void> => {
|
||||
try {
|
||||
logger.info("카테고리 목록 조회 요청", { user: req.user });
|
||||
|
||||
const multiLangService = new MultiLangService();
|
||||
const categories = await multiLangService.getCategories();
|
||||
|
||||
const response: ApiResponse<LangCategory[]> = {
|
||||
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<void> => {
|
||||
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<LangCategory> = {
|
||||
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<void> => {
|
||||
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<LangCategory[]> = {
|
||||
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<void> => {
|
||||
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<number> = {
|
||||
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<void> => {
|
||||
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<void> => {
|
||||
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<number> = {
|
||||
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<void> => {
|
||||
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<any[]> = {
|
||||
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
|
||||
|
|
|
|||
|
|
@ -56,3 +56,4 @@ export default router;
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -52,3 +52,4 @@ export default router;
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -68,3 +68,4 @@ export default router;
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -56,3 +56,4 @@ export default router;
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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<LangCategory[]> {
|
||||
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<number, LangCategory>();
|
||||
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<LangCategory | null> {
|
||||
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<LangCategory[]> {
|
||||
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<number> {
|
||||
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<number> {
|
||||
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<LangKey[]> {
|
||||
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<string>();
|
||||
|
||||
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,
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -588,3 +588,4 @@ const result = await executeNodeFlow(flowId, {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 | 최초 작성 |
|
||||
|
||||
|
||||
|
|
@ -361,3 +361,4 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -347,3 +347,4 @@ const getComponentValue = (componentId: string) => {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -128,3 +128,4 @@ export default function ScreenManagementPage() {
|
|||
);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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<Set<string>>(new Set());
|
||||
const [activeTab, setActiveTab] = useState<"keys" | "languages">("keys");
|
||||
|
||||
// 카테고리 관련 상태
|
||||
const [selectedCategory, setSelectedCategory] = useState<LangCategory | null>(null);
|
||||
const [isGenerateModalOpen, setIsGenerateModalOpen] = useState(false);
|
||||
|
||||
const [companies, setCompanies] = useState<Array<{ code: string; name: string }>>([]);
|
||||
|
||||
// 회사 목록 조회
|
||||
|
|
@ -678,27 +688,70 @@ export default function I18nPage() {
|
|||
|
||||
{/* 다국어 키 관리 탭 */}
|
||||
{activeTab === "keys" && (
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-10">
|
||||
{/* 좌측: 언어 키 목록 (7/10) */}
|
||||
<Card className="lg:col-span-7">
|
||||
<CardHeader>
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-12">
|
||||
{/* 좌측: 카테고리 트리 (2/12) */}
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader className="py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>언어 키 목록</CardTitle>
|
||||
<CardTitle className="text-sm">카테고리</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-2">
|
||||
<ScrollArea className="h-[500px]">
|
||||
<CategoryTree
|
||||
selectedCategoryId={selectedCategory?.categoryId || null}
|
||||
onSelectCategory={(cat) => setSelectedCategory(cat)}
|
||||
onDoubleClickCategory={(cat) => {
|
||||
setSelectedCategory(cat);
|
||||
setIsGenerateModalOpen(true);
|
||||
}}
|
||||
/>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 중앙: 언어 키 목록 (6/12) */}
|
||||
<Card className="lg:col-span-6">
|
||||
<CardHeader className="py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-sm">
|
||||
언어 키 목록
|
||||
{selectedCategory && (
|
||||
<Badge variant="secondary" className="ml-2">
|
||||
{selectedCategory.categoryName}
|
||||
</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
<div className="flex space-x-2">
|
||||
<Button variant="destructive" onClick={handleDeleteSelectedKeys} disabled={selectedKeys.size === 0}>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={handleDeleteSelectedKeys}
|
||||
disabled={selectedKeys.size === 0}
|
||||
>
|
||||
선택 삭제 ({selectedKeys.size})
|
||||
</Button>
|
||||
<Button onClick={handleAddKey}>새 키 추가</Button>
|
||||
<Button size="sm" variant="outline" onClick={handleAddKey}>
|
||||
수동 추가
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => setIsGenerateModalOpen(true)}
|
||||
disabled={!selectedCategory}
|
||||
>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
자동 생성
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="pt-0">
|
||||
{/* 검색 필터 영역 */}
|
||||
<div className="mb-2 grid grid-cols-1 gap-2 md:grid-cols-3">
|
||||
<div>
|
||||
<Label htmlFor="company">회사</Label>
|
||||
<Label htmlFor="company" className="text-xs">회사</Label>
|
||||
<Select value={selectedCompany} onValueChange={setSelectedCompany}>
|
||||
<SelectTrigger>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="전체 회사" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
|
|
@ -713,22 +766,22 @@ export default function I18nPage() {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="search">검색</Label>
|
||||
<Label htmlFor="search" className="text-xs">검색</Label>
|
||||
<Input
|
||||
placeholder="키명, 설명, 메뉴, 회사로 검색..."
|
||||
placeholder="키명, 설명으로 검색..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-end">
|
||||
<div className="text-sm text-muted-foreground">검색 결과: {getFilteredLangKeys().length}건</div>
|
||||
<div className="text-xs text-muted-foreground">결과: {getFilteredLangKeys().length}건</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 테이블 영역 */}
|
||||
<div>
|
||||
<div className="mb-2 text-sm text-muted-foreground">전체: {getFilteredLangKeys().length}건</div>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={getFilteredLangKeys()}
|
||||
|
|
@ -739,8 +792,8 @@ export default function I18nPage() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 우측: 선택된 키의 다국어 관리 (3/10) */}
|
||||
<Card className="lg:col-span-3">
|
||||
{/* 우측: 선택된 키의 다국어 관리 (4/12) */}
|
||||
<Card className="lg:col-span-4">
|
||||
<CardHeader>
|
||||
<CardTitle>
|
||||
{selectedKey ? (
|
||||
|
|
@ -817,6 +870,18 @@ export default function I18nPage() {
|
|||
onSave={handleSaveLanguage}
|
||||
languageData={editingLanguage}
|
||||
/>
|
||||
|
||||
{/* 키 자동 생성 모달 */}
|
||||
<KeyGenerateModal
|
||||
isOpen={isGenerateModalOpen}
|
||||
onClose={() => setIsGenerateModalOpen(false)}
|
||||
selectedCategory={selectedCategory}
|
||||
companyCode={user?.companyCode || ""}
|
||||
isSuperAdmin={user?.companyCode === "*"}
|
||||
onSuccess={() => {
|
||||
fetchLangKeys();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div>
|
||||
<div
|
||||
className={cn(
|
||||
"flex cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-sm transition-colors",
|
||||
isSelected
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "hover:bg-muted"
|
||||
)}
|
||||
style={{ paddingLeft: `${level * 16 + 8}px` }}
|
||||
onClick={() => onSelectCategory(category)}
|
||||
onDoubleClick={() => onDoubleClickCategory?.(category)}
|
||||
>
|
||||
{/* 확장/축소 아이콘 */}
|
||||
{hasChildren ? (
|
||||
<button
|
||||
className="shrink-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsExpanded(!isExpanded);
|
||||
}}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<span className="w-4" />
|
||||
)}
|
||||
|
||||
{/* 폴더/태그 아이콘 */}
|
||||
{hasChildren || level === 0 ? (
|
||||
isExpanded ? (
|
||||
<FolderOpen className="h-4 w-4 shrink-0 text-amber-500" />
|
||||
) : (
|
||||
<Folder className="h-4 w-4 shrink-0 text-amber-500" />
|
||||
)
|
||||
) : (
|
||||
<Tag className="h-4 w-4 shrink-0 text-blue-500" />
|
||||
)}
|
||||
|
||||
{/* 카테고리 이름 */}
|
||||
<span className="truncate">{category.categoryName}</span>
|
||||
|
||||
{/* prefix 표시 */}
|
||||
<span
|
||||
className={cn(
|
||||
"ml-auto text-xs",
|
||||
isSelected ? "text-primary-foreground/70" : "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{category.keyPrefix}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 자식 카테고리 */}
|
||||
{hasChildren && isExpanded && (
|
||||
<div>
|
||||
{category.children!.map((child) => (
|
||||
<CategoryNode
|
||||
key={child.categoryId}
|
||||
category={child}
|
||||
level={level + 1}
|
||||
selectedCategoryId={selectedCategoryId}
|
||||
onSelectCategory={onSelectCategory}
|
||||
onDoubleClickCategory={onDoubleClickCategory}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CategoryTree({
|
||||
selectedCategoryId,
|
||||
onSelectCategory,
|
||||
onDoubleClickCategory,
|
||||
}: CategoryTreeProps) {
|
||||
const [categories, setCategories] = useState<LangCategory[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(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 (
|
||||
<div className="flex h-32 items-center justify-center">
|
||||
<div className="animate-pulse text-sm text-muted-foreground">
|
||||
카테고리 로딩 중...
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex h-32 items-center justify-center">
|
||||
<div className="text-sm text-destructive">{error}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (categories.length === 0) {
|
||||
return (
|
||||
<div className="flex h-32 items-center justify-center">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
카테고리가 없습니다
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-0.5">
|
||||
{/* 전체 선택 옵션 */}
|
||||
<div
|
||||
className={cn(
|
||||
"flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
|
||||
selectedCategoryId === null
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "hover:bg-muted"
|
||||
)}
|
||||
onClick={() => onSelectCategory(null)}
|
||||
>
|
||||
<Folder className="h-4 w-4 shrink-0" />
|
||||
<span>전체</span>
|
||||
</div>
|
||||
|
||||
{/* 카테고리 트리 */}
|
||||
{categories.map((category) => (
|
||||
<CategoryNode
|
||||
key={category.categoryId}
|
||||
category={category}
|
||||
level={0}
|
||||
selectedCategoryId={selectedCategoryId}
|
||||
onSelectCategory={onSelectCategory}
|
||||
onDoubleClickCategory={onDoubleClickCategory}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CategoryTree;
|
||||
|
||||
|
||||
|
|
@ -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<Language[]>([]);
|
||||
const [texts, setTexts] = useState<Record<string, string>>({});
|
||||
const [categoryPath, setCategoryPath] = useState<LangCategory[]>([]);
|
||||
const [preview, setPreview] = useState<KeyPreview | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [previewLoading, setPreviewLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [companies, setCompanies] = useState<Company[]>([]);
|
||||
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<string, string> = {};
|
||||
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 (
|
||||
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base sm:text-lg">
|
||||
{preview?.isOverride ? "오버라이드 키 생성" : "다국어 키 생성"}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-xs sm:text-sm">
|
||||
{preview?.isOverride
|
||||
? "공통 키에 대한 회사별 오버라이드를 생성합니다"
|
||||
: "새로운 다국어 키를 자동으로 생성합니다"}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-2">
|
||||
{/* 카테고리 경로 표시 */}
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">카테고리</Label>
|
||||
<div className="mt-1 flex flex-wrap gap-1">
|
||||
{categoryPath.length > 0 ? (
|
||||
categoryPath.map((cat, idx) => (
|
||||
<span key={cat.categoryId} className="flex items-center">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{cat.categoryName}
|
||||
</Badge>
|
||||
{idx < categoryPath.length - 1 && (
|
||||
<span className="mx-1 text-muted-foreground">/</span>
|
||||
)}
|
||||
</span>
|
||||
))
|
||||
) : (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
카테고리를 선택해주세요
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 키 의미 입력 */}
|
||||
<div>
|
||||
<Label htmlFor="keyMeaning" className="text-xs sm:text-sm">
|
||||
키 의미 *
|
||||
</Label>
|
||||
<Input
|
||||
id="keyMeaning"
|
||||
value={keyMeaning}
|
||||
onChange={(e) => setKeyMeaning(e.target.value)}
|
||||
placeholder="예: add_new_item, search_button, save_success"
|
||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
<p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
|
||||
영문 소문자와 밑줄(_)을 사용하세요
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 생성될 키 미리보기 */}
|
||||
{generatedKeyPreview && (
|
||||
<div className={cn(
|
||||
"rounded-md border p-3",
|
||||
preview?.exists
|
||||
? "border-destructive bg-destructive/10"
|
||||
: preview?.isOverride
|
||||
? "border-blue-500 bg-blue-500/10"
|
||||
: "border-green-500 bg-green-500/10"
|
||||
)}>
|
||||
<div className="flex items-center gap-2">
|
||||
{previewLoading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : preview?.exists ? (
|
||||
<AlertCircle className="h-4 w-4 text-destructive" />
|
||||
) : preview?.isOverride ? (
|
||||
<Info className="h-4 w-4 text-blue-500" />
|
||||
) : (
|
||||
<CheckCircle2 className="h-4 w-4 text-green-500" />
|
||||
)}
|
||||
<code className="text-xs font-mono sm:text-sm">
|
||||
{generatedKeyPreview}
|
||||
</code>
|
||||
</div>
|
||||
{preview?.exists && (
|
||||
<p className="mt-1 text-xs text-destructive">
|
||||
이미 존재하는 키입니다
|
||||
</p>
|
||||
)}
|
||||
{preview?.isOverride && !preview?.exists && (
|
||||
<p className="mt-1 text-xs text-blue-600">
|
||||
공통 키가 존재합니다. 회사별 오버라이드로 생성됩니다.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 대상 회사 선택 (최고 관리자만) */}
|
||||
{isSuperAdmin && (
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">대상</Label>
|
||||
<div className="mt-1">
|
||||
<Popover open={companySearchOpen} onOpenChange={setCompanySearchOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={companySearchOpen}
|
||||
className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||||
>
|
||||
{targetCompanyCode === "*"
|
||||
? "공통 (*) - 모든 회사 적용"
|
||||
: companies.find((c) => c.companyCode === targetCompanyCode)
|
||||
? `${companies.find((c) => c.companyCode === targetCompanyCode)?.companyName} (${targetCompanyCode})`
|
||||
: "대상 선택"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="p-0"
|
||||
style={{ width: "var(--radix-popover-trigger-width)" }}
|
||||
align="start"
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="회사 검색..." className="text-xs sm:text-sm" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="py-2 text-center text-xs sm:text-sm">
|
||||
검색 결과가 없습니다
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
<CommandItem
|
||||
value="공통"
|
||||
onSelect={() => {
|
||||
setTargetCompanyCode("*");
|
||||
setCompanySearchOpen(false);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
targetCompanyCode === "*" ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
공통 (*) - 모든 회사 적용
|
||||
</CommandItem>
|
||||
{companies.map((company) => (
|
||||
<CommandItem
|
||||
key={company.companyCode}
|
||||
value={`${company.companyName} ${company.companyCode}`}
|
||||
onSelect={() => {
|
||||
setTargetCompanyCode(company.companyCode);
|
||||
setCompanySearchOpen(false);
|
||||
}}
|
||||
className="text-xs sm:text-sm"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
targetCompanyCode === company.companyCode ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{company.companyName} ({company.companyCode})
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 사용 메모 */}
|
||||
<div>
|
||||
<Label htmlFor="usageNote" className="text-xs sm:text-sm">
|
||||
사용 메모 (선택)
|
||||
</Label>
|
||||
<Textarea
|
||||
id="usageNote"
|
||||
value={usageNote}
|
||||
onChange={(e) => setUsageNote(e.target.value)}
|
||||
placeholder="이 키가 어디서 사용되는지 메모"
|
||||
className="h-16 resize-none text-xs sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 번역 텍스트 입력 */}
|
||||
<div>
|
||||
<Label className="text-xs sm:text-sm">번역 텍스트 *</Label>
|
||||
<div className="mt-2 space-y-2">
|
||||
{languages.map((lang) => (
|
||||
<div key={lang.langCode} className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="w-12 justify-center text-xs">
|
||||
{lang.langCode}
|
||||
</Badge>
|
||||
<Input
|
||||
value={texts[lang.langCode] || ""}
|
||||
onChange={(e) => handleTextChange(lang.langCode, e.target.value)}
|
||||
placeholder={`${lang.langName} 텍스트`}
|
||||
className="h-8 flex-1 text-xs sm:h-9 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 에러 메시지 */}
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription className="text-xs sm:text-sm">
|
||||
{error}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
취소
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={loading || !selectedCategory || !keyMeaning.trim() || preview?.exists}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
생성 중...
|
||||
</>
|
||||
) : preview?.isOverride ? (
|
||||
"오버라이드 생성"
|
||||
) : (
|
||||
"키 생성"
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default KeyGenerateModal;
|
||||
|
||||
|
||||
|
|
@ -141,3 +141,4 @@ export const useActiveTabOptional = () => {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -198,3 +198,4 @@ export function applyAutoFillToFormData(
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,362 @@
|
|||
/**
|
||||
* 다국어 관리 API 클라이언트
|
||||
* 카테고리, 키 자동 생성, 오버라이드 등 확장 기능 포함
|
||||
*/
|
||||
|
||||
import { apiClient } from "./client";
|
||||
|
||||
// =====================================================
|
||||
// 타입 정의
|
||||
// =====================================================
|
||||
|
||||
export interface Language {
|
||||
langCode: string;
|
||||
langName: string;
|
||||
langNative: string;
|
||||
isActive: string;
|
||||
sortOrder?: number;
|
||||
}
|
||||
|
||||
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 LangKey {
|
||||
keyId?: number;
|
||||
companyCode: string;
|
||||
menuName?: string;
|
||||
langKey: string;
|
||||
description?: string;
|
||||
isActive: string;
|
||||
categoryId?: number;
|
||||
keyMeaning?: string;
|
||||
usageNote?: string;
|
||||
baseKeyId?: number;
|
||||
createdDate?: Date;
|
||||
}
|
||||
|
||||
export interface LangText {
|
||||
textId?: number;
|
||||
keyId: number;
|
||||
langCode: string;
|
||||
langText: string;
|
||||
isActive: string;
|
||||
}
|
||||
|
||||
export interface GenerateKeyRequest {
|
||||
companyCode: string;
|
||||
categoryId: number;
|
||||
keyMeaning: string;
|
||||
usageNote?: string;
|
||||
texts: Array<{
|
||||
langCode: string;
|
||||
langText: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface CreateOverrideKeyRequest {
|
||||
companyCode: string;
|
||||
baseKeyId: number;
|
||||
texts: Array<{
|
||||
langCode: string;
|
||||
langText: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface KeyPreview {
|
||||
langKey: string;
|
||||
exists: boolean;
|
||||
isOverride: boolean;
|
||||
baseKeyId?: number;
|
||||
}
|
||||
|
||||
export interface ApiResponse<T> {
|
||||
success: boolean;
|
||||
message?: string;
|
||||
data?: T;
|
||||
error?: {
|
||||
code: string;
|
||||
details?: any;
|
||||
};
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// 카테고리 관련 API
|
||||
// =====================================================
|
||||
|
||||
/**
|
||||
* 카테고리 트리 조회
|
||||
*/
|
||||
export async function getCategories(): Promise<ApiResponse<LangCategory[]>> {
|
||||
try {
|
||||
const response = await apiClient.get("/multilang/categories");
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "CATEGORY_FETCH_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 카테고리 상세 조회
|
||||
*/
|
||||
export async function getCategoryById(categoryId: number): Promise<ApiResponse<LangCategory>> {
|
||||
try {
|
||||
const response = await apiClient.get(`/multilang/categories/${categoryId}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "CATEGORY_FETCH_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 카테고리 경로 조회 (부모 포함)
|
||||
*/
|
||||
export async function getCategoryPath(categoryId: number): Promise<ApiResponse<LangCategory[]>> {
|
||||
try {
|
||||
const response = await apiClient.get(`/multilang/categories/${categoryId}/path`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "CATEGORY_PATH_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// 언어 관련 API
|
||||
// =====================================================
|
||||
|
||||
/**
|
||||
* 언어 목록 조회
|
||||
*/
|
||||
export async function getLanguages(): Promise<ApiResponse<Language[]>> {
|
||||
try {
|
||||
const response = await apiClient.get("/multilang/languages");
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "LANGUAGE_FETCH_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// 키 관련 API
|
||||
// =====================================================
|
||||
|
||||
/**
|
||||
* 다국어 키 목록 조회
|
||||
*/
|
||||
export async function getLangKeys(params?: {
|
||||
companyCode?: string;
|
||||
menuCode?: string;
|
||||
categoryId?: number;
|
||||
searchText?: string;
|
||||
}): Promise<ApiResponse<LangKey[]>> {
|
||||
try {
|
||||
const queryParams = new URLSearchParams();
|
||||
if (params?.companyCode) queryParams.append("companyCode", params.companyCode);
|
||||
if (params?.menuCode) queryParams.append("menuCode", params.menuCode);
|
||||
if (params?.categoryId) queryParams.append("categoryId", params.categoryId.toString());
|
||||
if (params?.searchText) queryParams.append("searchText", params.searchText);
|
||||
|
||||
const url = `/multilang/keys${queryParams.toString() ? `?${queryParams.toString()}` : ""}`;
|
||||
const response = await apiClient.get(url);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "KEYS_FETCH_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 키의 텍스트 조회
|
||||
*/
|
||||
export async function getLangTexts(keyId: number): Promise<ApiResponse<LangText[]>> {
|
||||
try {
|
||||
const response = await apiClient.get(`/multilang/keys/${keyId}/texts`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "TEXTS_FETCH_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 키 자동 생성
|
||||
*/
|
||||
export async function generateKey(data: GenerateKeyRequest): Promise<ApiResponse<number>> {
|
||||
try {
|
||||
const response = await apiClient.post("/multilang/keys/generate", data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "KEY_GENERATE_ERROR",
|
||||
details: error.response?.data?.error?.details || error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 키 미리보기
|
||||
*/
|
||||
export async function previewKey(
|
||||
categoryId: number,
|
||||
keyMeaning: string,
|
||||
companyCode: string
|
||||
): Promise<ApiResponse<KeyPreview>> {
|
||||
try {
|
||||
const response = await apiClient.post("/multilang/keys/preview", {
|
||||
categoryId,
|
||||
keyMeaning,
|
||||
companyCode,
|
||||
});
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "KEY_PREVIEW_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 오버라이드 키 생성
|
||||
*/
|
||||
export async function createOverrideKey(
|
||||
data: CreateOverrideKeyRequest
|
||||
): Promise<ApiResponse<number>> {
|
||||
try {
|
||||
const response = await apiClient.post("/multilang/keys/override", data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "OVERRIDE_CREATE_ERROR",
|
||||
details: error.response?.data?.error?.details || error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 회사별 오버라이드 키 목록 조회
|
||||
*/
|
||||
export async function getOverrideKeys(companyCode: string): Promise<ApiResponse<LangKey[]>> {
|
||||
try {
|
||||
const response = await apiClient.get(`/multilang/keys/overrides/${companyCode}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "OVERRIDE_KEYS_FETCH_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 키 텍스트 저장
|
||||
*/
|
||||
export async function saveLangTexts(
|
||||
keyId: number,
|
||||
texts: Array<{ langCode: string; langText: string }>
|
||||
): Promise<ApiResponse<string>> {
|
||||
try {
|
||||
const response = await apiClient.post(`/multilang/keys/${keyId}/texts`, { texts });
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "TEXTS_SAVE_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 키 삭제
|
||||
*/
|
||||
export async function deleteLangKey(keyId: number): Promise<ApiResponse<string>> {
|
||||
try {
|
||||
const response = await apiClient.delete(`/multilang/keys/${keyId}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "KEY_DELETE_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 키 상태 토글
|
||||
*/
|
||||
export async function toggleLangKey(keyId: number): Promise<ApiResponse<string>> {
|
||||
try {
|
||||
const response = await apiClient.put(`/multilang/keys/${keyId}/toggle`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "KEY_TOGGLE_ERROR",
|
||||
details: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -5,21 +5,8 @@ import { Plus, X, Save, FolderOpen, RefreshCw, Eye, AlertCircle } from "lucide-r
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
|
@ -113,10 +100,7 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
|
|||
<div className="flex items-center justify-between rounded-t-lg bg-blue-600 px-4 py-2 text-white">
|
||||
<span className="font-medium">조건 {index + 1}</span>
|
||||
{!readonly && (
|
||||
<button
|
||||
onClick={() => onRemove(condition.id)}
|
||||
className="rounded p-1 transition-colors hover:bg-blue-700"
|
||||
>
|
||||
<button onClick={() => onRemove(condition.id)} className="rounded p-1 transition-colors hover:bg-blue-700">
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
|
|
@ -198,9 +182,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
tableName,
|
||||
}) => {
|
||||
// 조건 목록
|
||||
const [conditions, setConditions] = useState<RackLineCondition[]>(
|
||||
config.initialConditions || []
|
||||
);
|
||||
const [conditions, setConditions] = useState<RackLineCondition[]>(config.initialConditions || []);
|
||||
|
||||
// 템플릿 관련 상태
|
||||
const [templates, setTemplates] = useState<RackStructureTemplate[]>([]);
|
||||
|
|
@ -270,13 +252,16 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
}, [formData, fieldMapping]);
|
||||
|
||||
// 카테고리 코드를 라벨로 변환하는 헬퍼 함수
|
||||
const getCategoryLabel = useCallback((value: string | undefined): string | undefined => {
|
||||
if (!value) return undefined;
|
||||
if (isCategoryCode(value)) {
|
||||
return categoryLabels[value] || value;
|
||||
}
|
||||
return value;
|
||||
}, [categoryLabels]);
|
||||
const getCategoryLabel = useCallback(
|
||||
(value: string | undefined): string | undefined => {
|
||||
if (!value) return undefined;
|
||||
if (isCategoryCode(value)) {
|
||||
return categoryLabels[value] || value;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
[categoryLabels],
|
||||
);
|
||||
|
||||
// 필드 매핑을 통해 formData에서 컨텍스트 추출
|
||||
const context: RackStructureContext = useMemo(() => {
|
||||
|
|
@ -292,22 +277,13 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
const rawStatus = fieldMapping.statusField ? formData[fieldMapping.statusField] : undefined;
|
||||
|
||||
const ctx = {
|
||||
warehouseCode: fieldMapping.warehouseCodeField
|
||||
? formData[fieldMapping.warehouseCodeField]
|
||||
: undefined,
|
||||
warehouseName: fieldMapping.warehouseNameField
|
||||
? formData[fieldMapping.warehouseNameField]
|
||||
: undefined,
|
||||
// 카테고리 값은 라벨로 변환 (화면 표시용)
|
||||
warehouseCode: fieldMapping.warehouseCodeField ? formData[fieldMapping.warehouseCodeField] : undefined,
|
||||
warehouseName: fieldMapping.warehouseNameField ? formData[fieldMapping.warehouseNameField] : undefined,
|
||||
// 카테고리 값은 라벨로 변환
|
||||
floor: getCategoryLabel(rawFloor?.toString()),
|
||||
zone: getCategoryLabel(rawZone),
|
||||
locationType: getCategoryLabel(rawLocationType),
|
||||
status: getCategoryLabel(rawStatus),
|
||||
// 카테고리 코드 원본값 (DB 쿼리/저장용)
|
||||
floorCode: rawFloor?.toString(),
|
||||
zoneCode: rawZone?.toString(),
|
||||
locationTypeCode: rawLocationType?.toString(),
|
||||
statusCode: rawStatus?.toString(),
|
||||
};
|
||||
|
||||
console.log("🏗️ [RackStructure] context 생성:", {
|
||||
|
|
@ -354,9 +330,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
|
||||
// 조건 업데이트
|
||||
const updateCondition = useCallback((id: string, updates: Partial<RackLineCondition>) => {
|
||||
setConditions((prev) =>
|
||||
prev.map((cond) => (cond.id === id ? { ...cond, ...updates } : cond))
|
||||
);
|
||||
setConditions((prev) => prev.map((cond) => (cond.id === id ? { ...cond, ...updates } : cond)));
|
||||
}, []);
|
||||
|
||||
// 조건 삭제
|
||||
|
|
@ -404,12 +378,8 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
|
||||
// 기존 데이터 조회를 위한 값 추출 (useMemo 객체 참조 문제 방지)
|
||||
const warehouseCodeForQuery = context.warehouseCode;
|
||||
// DB 쿼리 시에는 카테고리 코드 사용 (코드로 통일)
|
||||
const floorForQuery = (context as any).floorCode || context.floor;
|
||||
const zoneForQuery = (context as any).zoneCode || context.zone;
|
||||
// 화면 표시용 라벨
|
||||
const floorLabel = context.floor;
|
||||
const zoneLabel = context.zone;
|
||||
const floorForQuery = context.floor; // 라벨 값 (예: "1층")
|
||||
const zoneForQuery = context.zone; // 라벨 값 (예: "A구역")
|
||||
|
||||
// 기존 데이터 조회 (창고/층/구역이 변경될 때마다)
|
||||
useEffect(() => {
|
||||
|
|
@ -443,19 +413,19 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
|
||||
// 직접 apiClient 사용하여 정확한 형식으로 요청
|
||||
// 백엔드는 search를 객체로 받아서 각 필드를 WHERE 조건으로 처리
|
||||
const response = await apiClient.post(`/table-management/tables/warehouse_location/data`, {
|
||||
// autoFilter: true로 회사별 데이터 필터링 적용
|
||||
const response = await apiClient.post("/table-management/tables/warehouse_location/data", {
|
||||
page: 1,
|
||||
size: 1000, // 충분히 큰 값
|
||||
search: searchParams, // 백엔드가 기대하는 형식 (equals 연산자로 정확한 일치)
|
||||
search: searchParams, // 백엔드가 기대하는 형식 (equals 연산자로 정확한 일치)
|
||||
autoFilter: true, // 회사별 데이터 필터링 (멀티테넌시)
|
||||
});
|
||||
|
||||
console.log("🔍 기존 위치 데이터 응답:", response.data);
|
||||
|
||||
// API 응답 구조: { success: true, data: { data: [...], total, ... } }
|
||||
const responseData = response.data?.data || response.data;
|
||||
const dataArray = Array.isArray(responseData)
|
||||
? responseData
|
||||
: (responseData?.data || []);
|
||||
const dataArray = Array.isArray(responseData) ? responseData : responseData?.data || [];
|
||||
|
||||
if (dataArray.length > 0) {
|
||||
const existing = dataArray.map((item: any) => ({
|
||||
|
|
@ -504,9 +474,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
// 기존 데이터와 중복 체크
|
||||
const errors: { row: number; existingLevels: number[] }[] = [];
|
||||
plannedRows.forEach((levels, row) => {
|
||||
const existingForRow = existingLocations.filter(
|
||||
(loc) => parseInt(loc.row_num) === row
|
||||
);
|
||||
const existingForRow = existingLocations.filter((loc) => parseInt(loc.row_num) === row);
|
||||
if (existingForRow.length > 0) {
|
||||
const existingLevels = existingForRow.map((loc) => parseInt(loc.level_num));
|
||||
const duplicateLevels = levels.filter((l) => existingLevels.includes(l));
|
||||
|
|
@ -560,7 +528,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
|
||||
return { code, name };
|
||||
},
|
||||
[context]
|
||||
[context],
|
||||
);
|
||||
|
||||
// 미리보기 생성
|
||||
|
|
@ -581,20 +549,26 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
|
||||
// 열 범위 중복 검증
|
||||
if (hasRowOverlap) {
|
||||
const overlapInfo = rowOverlapErrors.map((err) => {
|
||||
const rows = err.overlappingRows.join(", ");
|
||||
return `조건 ${err.conditionIndex + 1}과 조건 ${err.overlappingWith + 1}의 ${rows}열`;
|
||||
}).join("\n");
|
||||
const overlapInfo = rowOverlapErrors
|
||||
.map((err) => {
|
||||
const rows = err.overlappingRows.join(", ");
|
||||
return `조건 ${err.conditionIndex + 1}과 조건 ${err.overlappingWith + 1}의 ${rows}열`;
|
||||
})
|
||||
.join("\n");
|
||||
alert(`열 범위가 중복됩니다:\n${overlapInfo}\n\n중복된 열을 수정해주세요.`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 기존 데이터와 중복 검증 - duplicateErrors 직접 체크
|
||||
if (duplicateErrors.length > 0) {
|
||||
const duplicateInfo = duplicateErrors.map((err) => {
|
||||
return `${err.row}열 ${err.existingLevels.join(", ")}단`;
|
||||
}).join(", ");
|
||||
alert(`이미 등록된 위치가 있습니다:\n${duplicateInfo}\n\n해당 열/단을 제외하고 등록하거나, 기존 데이터를 삭제해주세요.`);
|
||||
const duplicateInfo = duplicateErrors
|
||||
.map((err) => {
|
||||
return `${err.row}열 ${err.existingLevels.join(", ")}단`;
|
||||
})
|
||||
.join(", ");
|
||||
alert(
|
||||
`이미 등록된 위치가 있습니다:\n${duplicateInfo}\n\n해당 열/단을 제외하고 등록하거나, 기존 데이터를 삭제해주세요.`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -606,20 +580,18 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
for (let level = 1; level <= cond.levels; level++) {
|
||||
const { code, name } = generateLocationCode(row, level);
|
||||
// 테이블 컬럼명과 동일하게 생성
|
||||
// DB 저장 시에는 카테고리 코드 사용 (코드로 통일)
|
||||
const ctxAny = context as any;
|
||||
locations.push({
|
||||
row_num: String(row),
|
||||
level_num: String(level),
|
||||
location_code: code,
|
||||
location_name: name,
|
||||
location_type: ctxAny?.locationTypeCode || context?.locationType || "선반",
|
||||
status: ctxAny?.statusCode || context?.status || "사용",
|
||||
// 추가 필드 (테이블 컬럼명과 동일) - 카테고리 코드 사용
|
||||
location_type: context?.locationType || "선반",
|
||||
status: context?.status || "사용",
|
||||
// 추가 필드 (테이블 컬럼명과 동일)
|
||||
warehouse_code: context?.warehouseCode,
|
||||
warehouse_name: context?.warehouseName,
|
||||
floor: ctxAny?.floorCode || context?.floor,
|
||||
zone: ctxAny?.zoneCode || context?.zone,
|
||||
floor: context?.floor,
|
||||
zone: context?.zone,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -647,7 +619,17 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
});
|
||||
|
||||
onChange?.(locations);
|
||||
}, [conditions, context, generateLocationCode, onChange, missingFields, hasRowOverlap, duplicateErrors, existingLocations, rowOverlapErrors]);
|
||||
}, [
|
||||
conditions,
|
||||
context,
|
||||
generateLocationCode,
|
||||
onChange,
|
||||
missingFields,
|
||||
hasRowOverlap,
|
||||
duplicateErrors,
|
||||
existingLocations,
|
||||
rowOverlapErrors,
|
||||
]);
|
||||
|
||||
// 템플릿 저장
|
||||
const saveTemplate = useCallback(() => {
|
||||
|
|
@ -682,8 +664,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-blue-500" />
|
||||
렉 라인 구조 설정
|
||||
<div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-blue-500" />렉 라인 구조 설정
|
||||
</CardTitle>
|
||||
{!readonly && (
|
||||
<div className="flex items-center gap-2">
|
||||
|
|
@ -724,9 +705,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
<AlertDescription>
|
||||
다음 필드를 먼저 입력해주세요: <strong>{missingFields.join(", ")}</strong>
|
||||
<br />
|
||||
<span className="text-xs">
|
||||
(설정 패널에서 필드 매핑을 확인하세요)
|
||||
</span>
|
||||
<span className="text-xs">(설정 패널에서 필드 매핑을 확인하세요)</span>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
|
@ -740,13 +719,12 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
<ul className="mt-1 list-inside list-disc text-xs">
|
||||
{rowOverlapErrors.map((err, idx) => (
|
||||
<li key={idx}>
|
||||
조건 {err.conditionIndex + 1}과 조건 {err.overlappingWith + 1}: {err.overlappingRows.join(", ")}열 중복
|
||||
조건 {err.conditionIndex + 1}과 조건 {err.overlappingWith + 1}: {err.overlappingRows.join(", ")}열
|
||||
중복
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<span className="mt-1 block text-xs">
|
||||
중복된 열 범위를 수정해주세요.
|
||||
</span>
|
||||
<span className="mt-1 block text-xs">중복된 열 범위를 수정해주세요.</span>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
|
@ -764,9 +742,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<span className="mt-1 block text-xs">
|
||||
해당 열/단을 제외하거나 기존 데이터를 삭제해주세요.
|
||||
</span>
|
||||
<span className="mt-1 block text-xs">해당 열/단을 제외하거나 기존 데이터를 삭제해주세요.</span>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
|
@ -775,9 +751,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
{isCheckingDuplicates && (
|
||||
<Alert className="mb-4">
|
||||
<AlertCircle className="h-4 w-4 animate-spin" />
|
||||
<AlertDescription>
|
||||
기존 위치 데이터를 확인하는 중...
|
||||
</AlertDescription>
|
||||
<AlertDescription>기존 위치 데이터를 확인하는 중...</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
|
|
@ -801,14 +775,10 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
</span>
|
||||
)}
|
||||
{context.floor && (
|
||||
<span className="rounded bg-green-100 px-2 py-1 text-xs text-green-800">
|
||||
층: {context.floor}
|
||||
</span>
|
||||
<span className="rounded bg-green-100 px-2 py-1 text-xs text-green-800">층: {context.floor}</span>
|
||||
)}
|
||||
{context.zone && (
|
||||
<span className="rounded bg-purple-100 px-2 py-1 text-xs text-purple-800">
|
||||
구역: {context.zone}
|
||||
</span>
|
||||
<span className="rounded bg-purple-100 px-2 py-1 text-xs text-purple-800">구역: {context.zone}</span>
|
||||
)}
|
||||
{context.locationType && (
|
||||
<span className="rounded bg-orange-100 px-2 py-1 text-xs text-orange-800">
|
||||
|
|
@ -816,9 +786,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
</span>
|
||||
)}
|
||||
{context.status && (
|
||||
<span className="rounded bg-gray-200 px-2 py-1 text-xs text-gray-800">
|
||||
상태: {context.status}
|
||||
</span>
|
||||
<span className="rounded bg-gray-200 px-2 py-1 text-xs text-gray-800">상태: {context.status}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -854,8 +822,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
<p className="mb-4 text-gray-500">조건을 추가하여 렉 구조를 설정하세요</p>
|
||||
{!readonly && (
|
||||
<Button onClick={addCondition} className="gap-1">
|
||||
<Plus className="h-4 w-4" />
|
||||
첫 번째 조건 추가
|
||||
<Plus className="h-4 w-4" />첫 번째 조건 추가
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -941,14 +908,11 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
<TableCell className="text-center">{idx + 1}</TableCell>
|
||||
<TableCell className="font-mono">{loc.location_code}</TableCell>
|
||||
<TableCell>{loc.location_name}</TableCell>
|
||||
{/* 미리보기에서는 카테고리 코드를 라벨로 변환하여 표시 */}
|
||||
<TableCell className="text-center">{getCategoryLabel(loc.floor) || context?.floor || "1"}</TableCell>
|
||||
<TableCell className="text-center">{getCategoryLabel(loc.zone) || context?.zone || "A"}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{loc.row_num.padStart(2, "0")}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">{loc.floor || context?.floor || "1"}</TableCell>
|
||||
<TableCell className="text-center">{loc.zone || context?.zone || "A"}</TableCell>
|
||||
<TableCell className="text-center">{loc.row_num.padStart(2, "0")}</TableCell>
|
||||
<TableCell className="text-center">{loc.level_num}</TableCell>
|
||||
<TableCell className="text-center">{getCategoryLabel(loc.location_type) || loc.location_type}</TableCell>
|
||||
<TableCell className="text-center">{loc.location_type}</TableCell>
|
||||
<TableCell className="text-center">-</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
|
|
@ -970,9 +934,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
<Dialog open={isTemplateDialogOpen} onOpenChange={setIsTemplateDialogOpen}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{isSaveMode ? "템플릿 저장" : "템플릿 관리"}
|
||||
</DialogTitle>
|
||||
<DialogTitle>{isSaveMode ? "템플릿 저장" : "템플릿 관리"}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{isSaveMode ? (
|
||||
|
|
@ -998,11 +960,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
<div className="space-y-4">
|
||||
{/* 저장 버튼 */}
|
||||
{conditions.length > 0 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full gap-2"
|
||||
onClick={() => setIsSaveMode(true)}
|
||||
>
|
||||
<Button variant="outline" className="w-full gap-2" onClick={() => setIsSaveMode(true)}>
|
||||
<Save className="h-4 w-4" />
|
||||
현재 조건을 템플릿으로 저장
|
||||
</Button>
|
||||
|
|
@ -1020,23 +978,13 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
>
|
||||
<div>
|
||||
<div className="font-medium">{template.name}</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
{template.conditions.length}개 조건
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">{template.conditions.length}개 조건</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => loadTemplate(template)}
|
||||
>
|
||||
<Button variant="outline" size="sm" onClick={() => loadTemplate(template)}>
|
||||
불러오기
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => deleteTemplate(template.id)}
|
||||
>
|
||||
<Button variant="ghost" size="sm" onClick={() => deleteTemplate(template.id)}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -1045,9 +993,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
|
|||
</ScrollArea>
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-8 text-center text-gray-500">
|
||||
저장된 템플릿이 없습니다
|
||||
</div>
|
||||
<div className="py-8 text-center text-gray-500">저장된 템플릿이 없습니다</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -1065,5 +1011,3 @@ export const RackStructureWrapper: React.FC<RackStructureComponentProps> = (prop
|
|||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1690,3 +1690,4 @@ const 출고등록_설정: ScreenSplitPanel = {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -537,3 +537,4 @@ const { data: config } = await getScreenSplitPanel(screenId);
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -524,3 +524,4 @@ function ScreenViewPage() {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue