Merge branch 'main' into add/kubernetes
This commit is contained in:
Johngreen
commit
03cccb685e
|
|
@ -94,7 +94,9 @@ export class CommonCodeController {
|
|||
sortOrder: code.sort_order,
|
||||
isActive: code.is_active,
|
||||
useYn: code.is_active,
|
||||
companyCode: code.company_code, // 추가
|
||||
companyCode: code.company_code,
|
||||
parentCodeValue: code.parent_code_value, // 계층구조: 부모 코드값
|
||||
depth: code.depth, // 계층구조: 깊이
|
||||
|
||||
// 기존 필드명도 유지 (하위 호환성)
|
||||
code_category: code.code_category,
|
||||
|
|
@ -103,7 +105,9 @@ export class CommonCodeController {
|
|||
code_name_eng: code.code_name_eng,
|
||||
sort_order: code.sort_order,
|
||||
is_active: code.is_active,
|
||||
company_code: code.company_code, // 추가
|
||||
company_code: code.company_code,
|
||||
parent_code_value: code.parent_code_value, // 계층구조: 부모 코드값
|
||||
// depth는 위에서 이미 정의됨 (snake_case와 camelCase 동일)
|
||||
created_date: code.created_date,
|
||||
created_by: code.created_by,
|
||||
updated_date: code.updated_date,
|
||||
|
|
@ -286,19 +290,17 @@ export class CommonCodeController {
|
|||
});
|
||||
}
|
||||
|
||||
if (!menuObjid) {
|
||||
return res.status(400).json({
|
||||
success: false,
|
||||
message: "메뉴 OBJID는 필수입니다.",
|
||||
});
|
||||
}
|
||||
// menuObjid가 없으면 공통코드관리 메뉴의 기본 OBJID 사용 (전역 코드)
|
||||
// 공통코드관리 메뉴 OBJID: 1757401858940
|
||||
const DEFAULT_CODE_MANAGEMENT_MENU_OBJID = 1757401858940;
|
||||
const effectiveMenuObjid = menuObjid ? Number(menuObjid) : DEFAULT_CODE_MANAGEMENT_MENU_OBJID;
|
||||
|
||||
const code = await this.commonCodeService.createCode(
|
||||
categoryCode,
|
||||
codeData,
|
||||
userId,
|
||||
companyCode,
|
||||
Number(menuObjid)
|
||||
effectiveMenuObjid
|
||||
);
|
||||
|
||||
return res.status(201).json({
|
||||
|
|
@ -588,4 +590,129 @@ export class CommonCodeController {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 계층구조 코드 조회
|
||||
* GET /api/common-codes/categories/:categoryCode/hierarchy
|
||||
* Query: parentCodeValue (optional), depth (optional), menuObjid (optional)
|
||||
*/
|
||||
async getHierarchicalCodes(req: AuthenticatedRequest, res: Response) {
|
||||
try {
|
||||
const { categoryCode } = req.params;
|
||||
const { parentCodeValue, depth, menuObjid } = req.query;
|
||||
const userCompanyCode = req.user?.companyCode;
|
||||
const menuObjidNum = menuObjid ? Number(menuObjid) : undefined;
|
||||
|
||||
// parentCodeValue가 빈 문자열이면 최상위 코드 조회
|
||||
const parentValue = parentCodeValue === '' || parentCodeValue === undefined
|
||||
? null
|
||||
: parentCodeValue as string;
|
||||
|
||||
const codes = await this.commonCodeService.getHierarchicalCodes(
|
||||
categoryCode,
|
||||
parentValue,
|
||||
depth ? parseInt(depth as string) : undefined,
|
||||
userCompanyCode,
|
||||
menuObjidNum
|
||||
);
|
||||
|
||||
// 프론트엔드 형식으로 변환
|
||||
const transformedData = codes.map((code: any) => ({
|
||||
codeValue: code.code_value,
|
||||
codeName: code.code_name,
|
||||
codeNameEng: code.code_name_eng,
|
||||
description: code.description,
|
||||
sortOrder: code.sort_order,
|
||||
isActive: code.is_active,
|
||||
parentCodeValue: code.parent_code_value,
|
||||
depth: code.depth,
|
||||
// 기존 필드도 유지
|
||||
code_category: code.code_category,
|
||||
code_value: code.code_value,
|
||||
code_name: code.code_name,
|
||||
code_name_eng: code.code_name_eng,
|
||||
sort_order: code.sort_order,
|
||||
is_active: code.is_active,
|
||||
parent_code_value: code.parent_code_value,
|
||||
}));
|
||||
|
||||
return res.json({
|
||||
success: true,
|
||||
data: transformedData,
|
||||
message: `계층구조 코드 조회 성공 (${categoryCode})`,
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error(`계층구조 코드 조회 실패 (${req.params.categoryCode}):`, error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "계층구조 코드 조회 중 오류가 발생했습니다.",
|
||||
error: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 코드 트리 조회
|
||||
* GET /api/common-codes/categories/:categoryCode/tree
|
||||
*/
|
||||
async getCodeTree(req: AuthenticatedRequest, res: Response) {
|
||||
try {
|
||||
const { categoryCode } = req.params;
|
||||
const { menuObjid } = req.query;
|
||||
const userCompanyCode = req.user?.companyCode;
|
||||
const menuObjidNum = menuObjid ? Number(menuObjid) : undefined;
|
||||
|
||||
const result = await this.commonCodeService.getCodeTree(
|
||||
categoryCode,
|
||||
userCompanyCode,
|
||||
menuObjidNum
|
||||
);
|
||||
|
||||
return res.json({
|
||||
success: true,
|
||||
data: result,
|
||||
message: `코드 트리 조회 성공 (${categoryCode})`,
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error(`코드 트리 조회 실패 (${req.params.categoryCode}):`, error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "코드 트리 조회 중 오류가 발생했습니다.",
|
||||
error: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 자식 코드 존재 여부 확인
|
||||
* GET /api/common-codes/categories/:categoryCode/codes/:codeValue/has-children
|
||||
*/
|
||||
async hasChildren(req: AuthenticatedRequest, res: Response) {
|
||||
try {
|
||||
const { categoryCode, codeValue } = req.params;
|
||||
const companyCode = req.user?.companyCode;
|
||||
|
||||
const hasChildren = await this.commonCodeService.hasChildren(
|
||||
categoryCode,
|
||||
codeValue,
|
||||
companyCode
|
||||
);
|
||||
|
||||
return res.json({
|
||||
success: true,
|
||||
data: { hasChildren },
|
||||
message: "자식 코드 확인 완료",
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
`자식 코드 확인 실패 (${req.params.categoryCode}.${req.params.codeValue}):`,
|
||||
error
|
||||
);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: "자식 코드 확인 중 오류가 발생했습니다.",
|
||||
error: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ import {
|
|||
Header,
|
||||
Footer,
|
||||
HeadingLevel,
|
||||
TableLayoutType,
|
||||
} from "docx";
|
||||
import { WatermarkConfig } from "../types/report";
|
||||
import bwipjs from "bwip-js";
|
||||
|
|
@ -592,8 +593,12 @@ export class ReportController {
|
|||
|
||||
// mm를 twip으로 변환
|
||||
const mmToTwip = (mm: number) => convertMillimetersToTwip(mm);
|
||||
// px를 twip으로 변환 (1px = 15twip at 96DPI)
|
||||
const pxToTwip = (px: number) => Math.round(px * 15);
|
||||
|
||||
// 프론트엔드와 동일한 MM_TO_PX 상수 (캔버스에서 mm를 px로 변환할 때 사용하는 값)
|
||||
const MM_TO_PX = 4;
|
||||
// 1mm = 56.692913386 twip (docx 라이브러리 기준)
|
||||
// px를 twip으로 변환: px -> mm -> twip
|
||||
const pxToTwip = (px: number) => Math.round((px / MM_TO_PX) * 56.692913386);
|
||||
|
||||
// 쿼리 결과 맵
|
||||
const queryResultsMap: Record<
|
||||
|
|
@ -726,6 +731,9 @@ export class ReportController {
|
|||
const base64Data =
|
||||
component.imageBase64.split(",")[1] || component.imageBase64;
|
||||
const imageBuffer = Buffer.from(base64Data, "base64");
|
||||
// 서명 이미지 크기: 라벨 옆에 인라인으로 표시될 수 있도록 적절한 크기로 조정
|
||||
const sigImageHeight = 30; // 고정 높이 (약 40px)
|
||||
const sigImageWidth = Math.round((component.width / component.height) * sigImageHeight) || 80;
|
||||
result.push(
|
||||
new ParagraphRef({
|
||||
children: [
|
||||
|
|
@ -733,8 +741,8 @@ export class ReportController {
|
|||
new ImageRunRef({
|
||||
data: imageBuffer,
|
||||
transformation: {
|
||||
width: Math.round(component.width * 0.75),
|
||||
height: Math.round(component.height * 0.75),
|
||||
width: sigImageWidth,
|
||||
height: sigImageHeight,
|
||||
},
|
||||
type: "png",
|
||||
}),
|
||||
|
|
@ -1443,7 +1451,11 @@ export class ReportController {
|
|||
try {
|
||||
const barcodeType = component.barcodeType || "CODE128";
|
||||
const barcodeColor = (component.barcodeColor || "#000000").replace("#", "");
|
||||
const barcodeBackground = (component.barcodeBackground || "#ffffff").replace("#", "");
|
||||
// transparent는 bwip-js에서 지원하지 않으므로 흰색으로 변환
|
||||
let barcodeBackground = (component.barcodeBackground || "#ffffff").replace("#", "");
|
||||
if (barcodeBackground === "transparent" || barcodeBackground === "") {
|
||||
barcodeBackground = "ffffff";
|
||||
}
|
||||
|
||||
// 바코드 값 결정 (쿼리 바인딩 또는 고정값)
|
||||
let barcodeValue = component.barcodeValue || "SAMPLE123";
|
||||
|
|
@ -1739,6 +1751,7 @@ export class ReportController {
|
|||
const rowTable = new Table({
|
||||
rows: [new TableRow({ children: cells })],
|
||||
width: { size: 100, type: WidthType.PERCENTAGE },
|
||||
layout: TableLayoutType.FIXED, // 셀 너비 고정
|
||||
borders: {
|
||||
top: { style: BorderStyle.NONE, size: 0, color: "FFFFFF" },
|
||||
bottom: { style: BorderStyle.NONE, size: 0, color: "FFFFFF" },
|
||||
|
|
@ -1821,6 +1834,7 @@ export class ReportController {
|
|||
const textTable = new Table({
|
||||
rows: [new TableRow({ children: [textCell] })],
|
||||
width: { size: pxToTwip(component.width), type: WidthType.DXA },
|
||||
layout: TableLayoutType.FIXED, // 셀 너비 고정
|
||||
indent: { size: indentLeft, type: WidthType.DXA },
|
||||
borders: {
|
||||
top: { style: BorderStyle.NONE, size: 0, color: "FFFFFF" },
|
||||
|
|
@ -1970,6 +1984,10 @@ export class ReportController {
|
|||
component.imageBase64.split(",")[1] || component.imageBase64;
|
||||
const imageBuffer = Buffer.from(base64Data, "base64");
|
||||
|
||||
// 서명 이미지 크기: 라벨 옆에 인라인으로 표시될 수 있도록 적절한 크기로 조정
|
||||
const sigImageHeight = 30; // 고정 높이
|
||||
const sigImageWidth = Math.round((component.width / component.height) * sigImageHeight) || 80;
|
||||
|
||||
const paragraph = new Paragraph({
|
||||
spacing: { before: spacingBefore, after: 0 },
|
||||
indent: { left: indentLeft },
|
||||
|
|
@ -1978,8 +1996,8 @@ export class ReportController {
|
|||
new ImageRun({
|
||||
data: imageBuffer,
|
||||
transformation: {
|
||||
width: Math.round(component.width * 0.75),
|
||||
height: Math.round(component.height * 0.75),
|
||||
width: sigImageWidth,
|
||||
height: sigImageHeight,
|
||||
},
|
||||
type: "png",
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -54,3 +54,4 @@ export default router;
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -50,3 +50,4 @@ export default router;
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -66,3 +66,4 @@ export default router;
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -54,3 +54,4 @@ export default router;
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,21 @@ router.put("/categories/:categoryCode/codes/reorder", (req, res) =>
|
|||
commonCodeController.reorderCodes(req, res)
|
||||
);
|
||||
|
||||
// 계층구조 코드 조회 (구체적인 경로를 먼저 배치)
|
||||
router.get("/categories/:categoryCode/hierarchy", (req, res) =>
|
||||
commonCodeController.getHierarchicalCodes(req, res)
|
||||
);
|
||||
|
||||
// 코드 트리 조회
|
||||
router.get("/categories/:categoryCode/tree", (req, res) =>
|
||||
commonCodeController.getCodeTree(req, res)
|
||||
);
|
||||
|
||||
// 자식 코드 존재 여부 확인
|
||||
router.get("/categories/:categoryCode/codes/:codeValue/has-children", (req, res) =>
|
||||
commonCodeController.hasChildren(req, res)
|
||||
);
|
||||
|
||||
router.put("/categories/:categoryCode/codes/:codeValue", (req, res) =>
|
||||
commonCodeController.updateCode(req, res)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ export interface CodeInfo {
|
|||
is_active: string;
|
||||
company_code: string;
|
||||
menu_objid?: number | null; // 메뉴 기반 코드 관리용
|
||||
parent_code_value?: string | null; // 계층구조: 부모 코드값
|
||||
depth?: number; // 계층구조: 깊이 (1, 2, 3단계)
|
||||
created_date?: Date | null;
|
||||
created_by?: string | null;
|
||||
updated_date?: Date | null;
|
||||
|
|
@ -61,6 +63,8 @@ export interface CreateCodeData {
|
|||
description?: string;
|
||||
sortOrder?: number;
|
||||
isActive?: string;
|
||||
parentCodeValue?: string; // 계층구조: 부모 코드값
|
||||
depth?: number; // 계층구조: 깊이 (1, 2, 3단계)
|
||||
}
|
||||
|
||||
export class CommonCodeService {
|
||||
|
|
@ -405,11 +409,22 @@ export class CommonCodeService {
|
|||
menuObjid: number
|
||||
) {
|
||||
try {
|
||||
// 계층구조: depth 계산 (부모가 있으면 부모의 depth + 1, 없으면 1)
|
||||
let depth = 1;
|
||||
if (data.parentCodeValue) {
|
||||
const parentCode = await queryOne<CodeInfo>(
|
||||
`SELECT depth FROM code_info
|
||||
WHERE code_category = $1 AND code_value = $2 AND company_code = $3`,
|
||||
[categoryCode, data.parentCodeValue, companyCode]
|
||||
);
|
||||
depth = parentCode ? (parentCode.depth || 1) + 1 : 1;
|
||||
}
|
||||
|
||||
const code = await queryOne<CodeInfo>(
|
||||
`INSERT INTO code_info
|
||||
(code_category, code_value, code_name, code_name_eng, description, sort_order,
|
||||
is_active, menu_objid, company_code, created_by, updated_by, created_date, updated_date)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, 'Y', $7, $8, $9, $10, NOW(), NOW())
|
||||
is_active, menu_objid, company_code, parent_code_value, depth, created_by, updated_by, created_date, updated_date)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, 'Y', $7, $8, $9, $10, $11, $12, NOW(), NOW())
|
||||
RETURNING *`,
|
||||
[
|
||||
categoryCode,
|
||||
|
|
@ -420,13 +435,15 @@ export class CommonCodeService {
|
|||
data.sortOrder || 0,
|
||||
menuObjid,
|
||||
companyCode,
|
||||
data.parentCodeValue || null,
|
||||
depth,
|
||||
createdBy,
|
||||
createdBy,
|
||||
]
|
||||
);
|
||||
|
||||
logger.info(
|
||||
`코드 생성 완료: ${categoryCode}.${data.codeValue} (메뉴: ${menuObjid}, 회사: ${companyCode})`
|
||||
`코드 생성 완료: ${categoryCode}.${data.codeValue} (메뉴: ${menuObjid}, 회사: ${companyCode}, 부모: ${data.parentCodeValue || '없음'}, 깊이: ${depth})`
|
||||
);
|
||||
return code;
|
||||
} catch (error) {
|
||||
|
|
@ -491,6 +508,24 @@ export class CommonCodeService {
|
|||
updateFields.push(`is_active = $${paramIndex++}`);
|
||||
values.push(activeValue);
|
||||
}
|
||||
// 계층구조: 부모 코드값 수정
|
||||
if (data.parentCodeValue !== undefined) {
|
||||
updateFields.push(`parent_code_value = $${paramIndex++}`);
|
||||
values.push(data.parentCodeValue || null);
|
||||
|
||||
// depth도 함께 업데이트
|
||||
let newDepth = 1;
|
||||
if (data.parentCodeValue) {
|
||||
const parentCode = await queryOne<CodeInfo>(
|
||||
`SELECT depth FROM code_info
|
||||
WHERE code_category = $1 AND code_value = $2`,
|
||||
[categoryCode, data.parentCodeValue]
|
||||
);
|
||||
newDepth = parentCode ? (parentCode.depth || 1) + 1 : 1;
|
||||
}
|
||||
updateFields.push(`depth = $${paramIndex++}`);
|
||||
values.push(newDepth);
|
||||
}
|
||||
|
||||
// WHERE 절 구성
|
||||
let whereClause = `WHERE code_category = $${paramIndex++} AND code_value = $${paramIndex}`;
|
||||
|
|
@ -847,4 +882,170 @@ export class CommonCodeService {
|
|||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 계층구조 코드 조회 (특정 depth 또는 부모코드 기준)
|
||||
* @param categoryCode 카테고리 코드
|
||||
* @param parentCodeValue 부모 코드값 (없으면 최상위 코드만 조회)
|
||||
* @param depth 특정 깊이만 조회 (선택)
|
||||
*/
|
||||
async getHierarchicalCodes(
|
||||
categoryCode: string,
|
||||
parentCodeValue?: string | null,
|
||||
depth?: number,
|
||||
userCompanyCode?: string,
|
||||
menuObjid?: number
|
||||
) {
|
||||
try {
|
||||
const whereConditions: string[] = ["code_category = $1", "is_active = 'Y'"];
|
||||
const values: any[] = [categoryCode];
|
||||
let paramIndex = 2;
|
||||
|
||||
// 부모 코드값 필터링
|
||||
if (parentCodeValue === null || parentCodeValue === undefined) {
|
||||
// 최상위 코드 (부모가 없는 코드)
|
||||
whereConditions.push("(parent_code_value IS NULL OR parent_code_value = '')");
|
||||
} else if (parentCodeValue !== '') {
|
||||
whereConditions.push(`parent_code_value = $${paramIndex}`);
|
||||
values.push(parentCodeValue);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
// 특정 깊이 필터링
|
||||
if (depth !== undefined) {
|
||||
whereConditions.push(`depth = $${paramIndex}`);
|
||||
values.push(depth);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
// 메뉴별 필터링 (형제 메뉴 포함)
|
||||
if (menuObjid) {
|
||||
const { getSiblingMenuObjids } = await import('./menuService');
|
||||
const siblingMenuObjids = await getSiblingMenuObjids(menuObjid);
|
||||
whereConditions.push(`menu_objid = ANY($${paramIndex})`);
|
||||
values.push(siblingMenuObjids);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
// 회사별 필터링
|
||||
if (userCompanyCode && userCompanyCode !== "*") {
|
||||
whereConditions.push(`company_code = $${paramIndex}`);
|
||||
values.push(userCompanyCode);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
const whereClause = `WHERE ${whereConditions.join(" AND ")}`;
|
||||
|
||||
const codes = await query<CodeInfo>(
|
||||
`SELECT * FROM code_info
|
||||
${whereClause}
|
||||
ORDER BY sort_order ASC, code_value ASC`,
|
||||
values
|
||||
);
|
||||
|
||||
logger.info(
|
||||
`계층구조 코드 조회: ${categoryCode}, 부모: ${parentCodeValue || '최상위'}, 깊이: ${depth || '전체'} - ${codes.length}개`
|
||||
);
|
||||
|
||||
return codes;
|
||||
} catch (error) {
|
||||
logger.error(`계층구조 코드 조회 중 오류 (${categoryCode}):`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 계층구조 코드 트리 전체 조회 (카테고리 기준)
|
||||
*/
|
||||
async getCodeTree(
|
||||
categoryCode: string,
|
||||
userCompanyCode?: string,
|
||||
menuObjid?: number
|
||||
) {
|
||||
try {
|
||||
const whereConditions: string[] = ["code_category = $1", "is_active = 'Y'"];
|
||||
const values: any[] = [categoryCode];
|
||||
let paramIndex = 2;
|
||||
|
||||
// 메뉴별 필터링 (형제 메뉴 포함)
|
||||
if (menuObjid) {
|
||||
const { getSiblingMenuObjids } = await import('./menuService');
|
||||
const siblingMenuObjids = await getSiblingMenuObjids(menuObjid);
|
||||
whereConditions.push(`menu_objid = ANY($${paramIndex})`);
|
||||
values.push(siblingMenuObjids);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
// 회사별 필터링
|
||||
if (userCompanyCode && userCompanyCode !== "*") {
|
||||
whereConditions.push(`company_code = $${paramIndex}`);
|
||||
values.push(userCompanyCode);
|
||||
paramIndex++;
|
||||
}
|
||||
|
||||
const whereClause = `WHERE ${whereConditions.join(" AND ")}`;
|
||||
|
||||
const allCodes = await query<CodeInfo>(
|
||||
`SELECT * FROM code_info
|
||||
${whereClause}
|
||||
ORDER BY depth ASC, sort_order ASC, code_value ASC`,
|
||||
values
|
||||
);
|
||||
|
||||
// 트리 구조로 변환
|
||||
const buildTree = (codes: CodeInfo[], parentValue: string | null = null): any[] => {
|
||||
return codes
|
||||
.filter(code => {
|
||||
const codeParent = code.parent_code_value || null;
|
||||
return codeParent === parentValue;
|
||||
})
|
||||
.map(code => ({
|
||||
...code,
|
||||
children: buildTree(codes, code.code_value)
|
||||
}));
|
||||
};
|
||||
|
||||
const tree = buildTree(allCodes);
|
||||
|
||||
logger.info(
|
||||
`코드 트리 조회 완료: ${categoryCode} - 전체 ${allCodes.length}개`
|
||||
);
|
||||
|
||||
return {
|
||||
flat: allCodes,
|
||||
tree
|
||||
};
|
||||
} catch (error) {
|
||||
logger.error(`코드 트리 조회 중 오류 (${categoryCode}):`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 자식 코드가 있는지 확인
|
||||
*/
|
||||
async hasChildren(
|
||||
categoryCode: string,
|
||||
codeValue: string,
|
||||
companyCode?: string
|
||||
): Promise<boolean> {
|
||||
try {
|
||||
let sql = `SELECT COUNT(*) as count FROM code_info
|
||||
WHERE code_category = $1 AND parent_code_value = $2`;
|
||||
const values: any[] = [categoryCode, codeValue];
|
||||
|
||||
if (companyCode && companyCode !== "*") {
|
||||
sql += ` AND company_code = $3`;
|
||||
values.push(companyCode);
|
||||
}
|
||||
|
||||
const result = await queryOne<{ count: string }>(sql, values);
|
||||
const count = parseInt(result?.count || "0");
|
||||
|
||||
return count > 0;
|
||||
} catch (error) {
|
||||
logger.error(`자식 코드 확인 중 오류 (${categoryCode}.${codeValue}):`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -279,11 +279,90 @@ export class MenuCopyService {
|
|||
logger.debug(` 📐 분할 패널 우측 화면 참조 발견: ${numId}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 5) 모달 화면 ID (addModalScreenId, editModalScreenId, modalScreenId)
|
||||
if (props?.componentConfig?.addModalScreenId) {
|
||||
const addModalScreenId = props.componentConfig.addModalScreenId;
|
||||
const numId =
|
||||
typeof addModalScreenId === "number"
|
||||
? addModalScreenId
|
||||
: parseInt(addModalScreenId);
|
||||
if (!isNaN(numId) && numId > 0) {
|
||||
referenced.push(numId);
|
||||
logger.debug(` 📋 추가 모달 화면 참조 발견: ${numId}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (props?.componentConfig?.editModalScreenId) {
|
||||
const editModalScreenId = props.componentConfig.editModalScreenId;
|
||||
const numId =
|
||||
typeof editModalScreenId === "number"
|
||||
? editModalScreenId
|
||||
: parseInt(editModalScreenId);
|
||||
if (!isNaN(numId) && numId > 0) {
|
||||
referenced.push(numId);
|
||||
logger.debug(` 📝 수정 모달 화면 참조 발견: ${numId}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (props?.componentConfig?.modalScreenId) {
|
||||
const modalScreenId = props.componentConfig.modalScreenId;
|
||||
const numId =
|
||||
typeof modalScreenId === "number"
|
||||
? modalScreenId
|
||||
: parseInt(modalScreenId);
|
||||
if (!isNaN(numId) && numId > 0) {
|
||||
referenced.push(numId);
|
||||
logger.debug(` 🔲 모달 화면 참조 발견: ${numId}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 6) 재귀적으로 모든 properties에서 화면 ID 추출 (깊은 탐색)
|
||||
this.extractScreenIdsFromObject(props, referenced);
|
||||
}
|
||||
|
||||
return referenced;
|
||||
}
|
||||
|
||||
/**
|
||||
* 객체 내부에서 화면 ID를 재귀적으로 추출
|
||||
*/
|
||||
private extractScreenIdsFromObject(obj: any, referenced: number[]): void {
|
||||
if (!obj || typeof obj !== "object") return;
|
||||
|
||||
if (Array.isArray(obj)) {
|
||||
for (const item of obj) {
|
||||
this.extractScreenIdsFromObject(item, referenced);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
for (const key of Object.keys(obj)) {
|
||||
const value = obj[key];
|
||||
|
||||
// 화면 ID 키 패턴 확인
|
||||
if (
|
||||
key === "screenId" ||
|
||||
key === "targetScreenId" ||
|
||||
key === "leftScreenId" ||
|
||||
key === "rightScreenId" ||
|
||||
key === "addModalScreenId" ||
|
||||
key === "editModalScreenId" ||
|
||||
key === "modalScreenId"
|
||||
) {
|
||||
const numId = typeof value === "number" ? value : parseInt(value);
|
||||
if (!isNaN(numId) && numId > 0 && !referenced.includes(numId)) {
|
||||
referenced.push(numId);
|
||||
}
|
||||
}
|
||||
|
||||
// 재귀 탐색
|
||||
if (typeof value === "object" && value !== null) {
|
||||
this.extractScreenIdsFromObject(value, referenced);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 화면 수집 (중복 제거, 재귀적 참조 추적)
|
||||
*/
|
||||
|
|
@ -483,7 +562,8 @@ export class MenuCopyService {
|
|||
properties: any,
|
||||
screenIdMap: Map<number, number>,
|
||||
flowIdMap: Map<number, number>,
|
||||
numberingRuleIdMap?: Map<string, string>
|
||||
numberingRuleIdMap?: Map<string, string>,
|
||||
menuIdMap?: Map<number, number>
|
||||
): any {
|
||||
if (!properties) return properties;
|
||||
|
||||
|
|
@ -496,7 +576,8 @@ export class MenuCopyService {
|
|||
screenIdMap,
|
||||
flowIdMap,
|
||||
"",
|
||||
numberingRuleIdMap
|
||||
numberingRuleIdMap,
|
||||
menuIdMap
|
||||
);
|
||||
|
||||
return updated;
|
||||
|
|
@ -510,7 +591,8 @@ export class MenuCopyService {
|
|||
screenIdMap: Map<number, number>,
|
||||
flowIdMap: Map<number, number>,
|
||||
path: string = "",
|
||||
numberingRuleIdMap?: Map<string, string>
|
||||
numberingRuleIdMap?: Map<string, string>,
|
||||
menuIdMap?: Map<number, number>
|
||||
): void {
|
||||
if (!obj || typeof obj !== "object") return;
|
||||
|
||||
|
|
@ -522,7 +604,8 @@ export class MenuCopyService {
|
|||
screenIdMap,
|
||||
flowIdMap,
|
||||
`${path}[${index}]`,
|
||||
numberingRuleIdMap
|
||||
numberingRuleIdMap,
|
||||
menuIdMap
|
||||
);
|
||||
});
|
||||
return;
|
||||
|
|
@ -533,13 +616,16 @@ export class MenuCopyService {
|
|||
const value = obj[key];
|
||||
const currentPath = path ? `${path}.${key}` : key;
|
||||
|
||||
// screen_id, screenId, targetScreenId, leftScreenId, rightScreenId 매핑 (숫자 또는 숫자 문자열)
|
||||
// screen_id, screenId, targetScreenId, leftScreenId, rightScreenId, addModalScreenId, editModalScreenId, modalScreenId 매핑 (숫자 또는 숫자 문자열)
|
||||
if (
|
||||
key === "screen_id" ||
|
||||
key === "screenId" ||
|
||||
key === "targetScreenId" ||
|
||||
key === "leftScreenId" ||
|
||||
key === "rightScreenId"
|
||||
key === "rightScreenId" ||
|
||||
key === "addModalScreenId" ||
|
||||
key === "editModalScreenId" ||
|
||||
key === "modalScreenId"
|
||||
) {
|
||||
const numValue = typeof value === "number" ? value : parseInt(value);
|
||||
if (!isNaN(numValue) && numValue > 0) {
|
||||
|
|
@ -549,6 +635,11 @@ export class MenuCopyService {
|
|||
logger.info(
|
||||
` 🔗 화면 참조 업데이트 (${currentPath}): ${value} → ${newId}`
|
||||
);
|
||||
} else {
|
||||
// 매핑이 없으면 경고 로그 (복사되지 않은 화면 참조)
|
||||
logger.warn(
|
||||
` ⚠️ 화면 매핑 없음 (${currentPath}): ${value} - 원본 화면이 복사되지 않았을 수 있음`
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -573,9 +664,9 @@ export class MenuCopyService {
|
|||
}
|
||||
}
|
||||
|
||||
// numberingRuleId 매핑 (문자열)
|
||||
// numberingRuleId, ruleId 매핑 (문자열) - 채번규칙 참조
|
||||
if (
|
||||
key === "numberingRuleId" &&
|
||||
(key === "numberingRuleId" || key === "ruleId") &&
|
||||
numberingRuleIdMap &&
|
||||
typeof value === "string" &&
|
||||
value
|
||||
|
|
@ -595,6 +686,25 @@ export class MenuCopyService {
|
|||
}
|
||||
}
|
||||
|
||||
// selectedMenuObjid 매핑 (메뉴 objid 참조)
|
||||
if (key === "selectedMenuObjid" && menuIdMap) {
|
||||
const numValue = typeof value === "number" ? value : parseInt(value);
|
||||
if (!isNaN(numValue) && numValue > 0) {
|
||||
const newId = menuIdMap.get(numValue);
|
||||
if (newId) {
|
||||
obj[key] = typeof value === "number" ? newId : String(newId);
|
||||
logger.info(
|
||||
` 🔗 메뉴 참조 업데이트 (${currentPath}): ${value} → ${newId}`
|
||||
);
|
||||
} else {
|
||||
// 매핑이 없으면 경고 로그 (복사되지 않은 메뉴 참조)
|
||||
logger.warn(
|
||||
` ⚠️ 메뉴 매핑 없음 (${currentPath}): ${value} - 원본 메뉴가 복사되지 않았을 수 있음`
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 재귀 호출
|
||||
if (typeof value === "object" && value !== null) {
|
||||
this.recursiveUpdateReferences(
|
||||
|
|
@ -602,7 +712,8 @@ export class MenuCopyService {
|
|||
screenIdMap,
|
||||
flowIdMap,
|
||||
currentPath,
|
||||
numberingRuleIdMap
|
||||
numberingRuleIdMap,
|
||||
menuIdMap
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -938,7 +1049,9 @@ export class MenuCopyService {
|
|||
copiedCategoryMappings = await this.copyCategoryMappingsAndValues(
|
||||
menuObjids,
|
||||
menuIdMap,
|
||||
sourceCompanyCode,
|
||||
targetCompanyCode,
|
||||
Array.from(screenIds),
|
||||
userId,
|
||||
client
|
||||
);
|
||||
|
|
@ -979,7 +1092,8 @@ export class MenuCopyService {
|
|||
userId,
|
||||
client,
|
||||
screenNameConfig,
|
||||
numberingRuleIdMap
|
||||
numberingRuleIdMap,
|
||||
menuIdMap
|
||||
);
|
||||
|
||||
// === 6단계: 화면-메뉴 할당 ===
|
||||
|
|
@ -1313,7 +1427,8 @@ export class MenuCopyService {
|
|||
removeText?: string;
|
||||
addPrefix?: string;
|
||||
},
|
||||
numberingRuleIdMap?: Map<string, string>
|
||||
numberingRuleIdMap?: Map<string, string>,
|
||||
menuIdMap?: Map<number, number>
|
||||
): Promise<Map<number, number>> {
|
||||
const screenIdMap = new Map<number, number>();
|
||||
|
||||
|
|
@ -1599,7 +1714,8 @@ export class MenuCopyService {
|
|||
layout.properties,
|
||||
screenIdMap,
|
||||
flowIdMap,
|
||||
numberingRuleIdMap
|
||||
numberingRuleIdMap,
|
||||
menuIdMap
|
||||
);
|
||||
|
||||
layoutValues.push(
|
||||
|
|
@ -2085,15 +2201,20 @@ export class MenuCopyService {
|
|||
"system",
|
||||
]);
|
||||
|
||||
await client.query(
|
||||
const result = await client.query(
|
||||
`INSERT INTO screen_menu_assignments (
|
||||
screen_id, menu_objid, company_code, display_order, is_active, created_by
|
||||
) VALUES ${assignmentValues}`,
|
||||
) VALUES ${assignmentValues}
|
||||
ON CONFLICT (screen_id, menu_objid, company_code) DO NOTHING`,
|
||||
assignmentParams
|
||||
);
|
||||
}
|
||||
|
||||
logger.info(`✅ 화면-메뉴 할당 완료: ${validAssignments.length}개`);
|
||||
logger.info(
|
||||
`✅ 화면-메뉴 할당 완료: ${result.rowCount}개 삽입 (${validAssignments.length - (result.rowCount || 0)}개 중복 무시)`
|
||||
);
|
||||
} else {
|
||||
logger.info(`📭 화면-메뉴 할당할 항목 없음`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -2569,11 +2690,16 @@ export class MenuCopyService {
|
|||
|
||||
/**
|
||||
* 카테고리 매핑 + 값 복사 (최적화: 배치 조회)
|
||||
*
|
||||
* 화면에서 사용하는 table_name + column_name 조합을 기준으로 카테고리 값 복사
|
||||
* menu_objid 기준이 아닌 화면 컴포넌트 기준으로 복사하여 누락 방지
|
||||
*/
|
||||
private async copyCategoryMappingsAndValues(
|
||||
menuObjids: number[],
|
||||
menuIdMap: Map<number, number>,
|
||||
sourceCompanyCode: string,
|
||||
targetCompanyCode: string,
|
||||
screenIds: number[],
|
||||
userId: string,
|
||||
client: PoolClient
|
||||
): Promise<number> {
|
||||
|
|
@ -2697,12 +2823,70 @@ export class MenuCopyService {
|
|||
);
|
||||
}
|
||||
|
||||
// 4. 모든 원본 카테고리 값 한 번에 조회
|
||||
// 4. 화면에서 사용하는 카테고리 컬럼 조합 수집
|
||||
// 복사된 화면의 레이아웃에서 webType='category'인 컴포넌트의 tableName, columnName 추출
|
||||
const categoryColumnsResult = await client.query(
|
||||
`SELECT DISTINCT
|
||||
sl.properties->>'tableName' as table_name,
|
||||
sl.properties->>'columnName' as column_name
|
||||
FROM screen_layouts sl
|
||||
JOIN screen_definitions sd ON sl.screen_id = sd.screen_id
|
||||
WHERE sd.screen_id = ANY($1)
|
||||
AND sl.properties->'componentConfig'->>'webType' = 'category'
|
||||
AND sl.properties->>'tableName' IS NOT NULL
|
||||
AND sl.properties->>'columnName' IS NOT NULL`,
|
||||
[screenIds]
|
||||
);
|
||||
|
||||
// 카테고리 매핑에서 사용하는 table_name, column_name도 추가
|
||||
const mappingColumnsResult = await client.query(
|
||||
`SELECT DISTINCT table_name, logical_column_name as column_name
|
||||
FROM category_column_mapping
|
||||
WHERE menu_objid = ANY($1)`,
|
||||
[menuObjids]
|
||||
);
|
||||
|
||||
// 두 결과 합치기
|
||||
const categoryColumns = new Set<string>();
|
||||
for (const row of categoryColumnsResult.rows) {
|
||||
if (row.table_name && row.column_name) {
|
||||
categoryColumns.add(`${row.table_name}|${row.column_name}`);
|
||||
}
|
||||
}
|
||||
for (const row of mappingColumnsResult.rows) {
|
||||
if (row.table_name && row.column_name) {
|
||||
categoryColumns.add(`${row.table_name}|${row.column_name}`);
|
||||
}
|
||||
}
|
||||
|
||||
logger.info(
|
||||
` 📋 화면에서 사용하는 카테고리 컬럼: ${categoryColumns.size}개`
|
||||
);
|
||||
|
||||
if (categoryColumns.size === 0) {
|
||||
logger.info(`✅ 카테고리 매핑 + 값 복사 완료: ${copiedCount}개`);
|
||||
return copiedCount;
|
||||
}
|
||||
|
||||
// 5. 원본 회사의 카테고리 값 조회 (table_name + column_name 기준)
|
||||
// menu_objid 조건 대신 table_name + column_name + 원본 회사 코드로 조회
|
||||
const columnConditions = Array.from(categoryColumns).map((col, i) => {
|
||||
const [tableName, columnName] = col.split("|");
|
||||
return `(table_name = $${i * 2 + 2} AND column_name = $${i * 2 + 3})`;
|
||||
});
|
||||
|
||||
const columnParams: string[] = [];
|
||||
for (const col of categoryColumns) {
|
||||
const [tableName, columnName] = col.split("|");
|
||||
columnParams.push(tableName, columnName);
|
||||
}
|
||||
|
||||
const allValuesResult = await client.query(
|
||||
`SELECT * FROM table_column_category_values
|
||||
WHERE menu_objid = ANY($1)
|
||||
WHERE company_code = $1
|
||||
AND (${columnConditions.join(" OR ")})
|
||||
ORDER BY depth NULLS FIRST, parent_value_id NULLS FIRST, value_order`,
|
||||
[menuObjids]
|
||||
[sourceCompanyCode, ...columnParams]
|
||||
);
|
||||
|
||||
if (allValuesResult.rows.length === 0) {
|
||||
|
|
@ -2710,6 +2894,8 @@ export class MenuCopyService {
|
|||
return copiedCount;
|
||||
}
|
||||
|
||||
logger.info(` 📋 원본 카테고리 값: ${allValuesResult.rows.length}개 발견`);
|
||||
|
||||
// 5. 대상 회사에 이미 존재하는 값 한 번에 조회
|
||||
const existingValuesResult = await client.query(
|
||||
`SELECT value_id, table_name, column_name, value_code
|
||||
|
|
@ -2763,8 +2949,12 @@ export class MenuCopyService {
|
|||
)
|
||||
.join(", ");
|
||||
|
||||
// 기본 menu_objid: 매핑이 없을 경우 첫 번째 복사된 메뉴 사용
|
||||
const defaultMenuObjid = menuIdMap.values().next().value || 0;
|
||||
|
||||
const valueParams = values.flatMap((v) => {
|
||||
const newMenuObjid = menuIdMap.get(v.menu_objid);
|
||||
// 원본 menu_objid가 매핑에 있으면 사용, 없으면 기본값 사용
|
||||
const newMenuObjid = menuIdMap.get(v.menu_objid) ?? defaultMenuObjid;
|
||||
const newParentId = v.parent_value_id
|
||||
? valueIdMap.get(v.parent_value_id) || null
|
||||
: null;
|
||||
|
|
|
|||
|
|
@ -234,10 +234,23 @@ export class ReportService {
|
|||
`;
|
||||
const queries = await query<ReportQuery>(queriesQuery, [reportId]);
|
||||
|
||||
// 메뉴 매핑 조회
|
||||
const menuMappingQuery = `
|
||||
SELECT menu_objid
|
||||
FROM report_menu_mapping
|
||||
WHERE report_id = $1
|
||||
ORDER BY created_at
|
||||
`;
|
||||
const menuMappings = await query<{ menu_objid: number }>(menuMappingQuery, [
|
||||
reportId,
|
||||
]);
|
||||
const menuObjids = menuMappings?.map((m) => Number(m.menu_objid)) || [];
|
||||
|
||||
return {
|
||||
report,
|
||||
layout,
|
||||
queries: queries || [],
|
||||
menuObjids,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -696,6 +709,43 @@ export class ReportService {
|
|||
}
|
||||
}
|
||||
|
||||
// 3. 메뉴 매핑 저장 (있는 경우)
|
||||
if (data.menuObjids !== undefined) {
|
||||
// 기존 메뉴 매핑 모두 삭제
|
||||
await client.query(
|
||||
`DELETE FROM report_menu_mapping WHERE report_id = $1`,
|
||||
[reportId]
|
||||
);
|
||||
|
||||
// 새 메뉴 매핑 삽입
|
||||
if (data.menuObjids.length > 0) {
|
||||
// 리포트의 company_code 조회
|
||||
const reportResult = await client.query(
|
||||
`SELECT company_code FROM report_master WHERE report_id = $1`,
|
||||
[reportId]
|
||||
);
|
||||
const companyCode = reportResult.rows[0]?.company_code || "*";
|
||||
|
||||
const insertMappingSql = `
|
||||
INSERT INTO report_menu_mapping (
|
||||
report_id,
|
||||
menu_objid,
|
||||
company_code,
|
||||
created_by
|
||||
) VALUES ($1, $2, $3, $4)
|
||||
`;
|
||||
|
||||
for (const menuObjid of data.menuObjids) {
|
||||
await client.query(insertMappingSql, [
|
||||
reportId,
|
||||
menuObjid,
|
||||
companyCode,
|
||||
userId,
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,11 +71,12 @@ export interface ReportQuery {
|
|||
updated_by: string | null;
|
||||
}
|
||||
|
||||
// 리포트 상세 (마스터 + 레이아웃 + 쿼리)
|
||||
// 리포트 상세 (마스터 + 레이아웃 + 쿼리 + 연결된 메뉴)
|
||||
export interface ReportDetail {
|
||||
report: ReportMaster;
|
||||
layout: ReportLayout | null;
|
||||
queries: ReportQuery[];
|
||||
menuObjids?: number[]; // 연결된 메뉴 ID 목록
|
||||
}
|
||||
|
||||
// 리포트 목록 조회 파라미터
|
||||
|
|
@ -166,6 +167,17 @@ export interface SaveLayoutRequest {
|
|||
parameters: string[];
|
||||
externalConnectionId?: number;
|
||||
}>;
|
||||
menuObjids?: number[]; // 연결할 메뉴 ID 목록
|
||||
}
|
||||
|
||||
// 리포트-메뉴 매핑
|
||||
export interface ReportMenuMapping {
|
||||
mapping_id: number;
|
||||
report_id: string;
|
||||
menu_objid: number;
|
||||
company_code: string;
|
||||
created_at: Date;
|
||||
created_by: string | null;
|
||||
}
|
||||
|
||||
// 템플릿 목록 응답
|
||||
|
|
|
|||
|
|
@ -586,3 +586,4 @@ const result = await executeNodeFlow(flowId, {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -359,3 +359,4 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -345,3 +345,4 @@ const getComponentValue = (componentId: string) => {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { useSearchParams, useRouter } from "next/navigation";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Link2, Layers, Filter, FormInput, Ban, Tags } from "lucide-react";
|
||||
import { Link2, Layers, Filter, FormInput, Ban, Tags, Columns } from "lucide-react";
|
||||
|
||||
// 탭별 컴포넌트
|
||||
import CascadingRelationsTab from "./tabs/CascadingRelationsTab";
|
||||
|
|
@ -12,6 +12,7 @@ import HierarchyTab from "./tabs/HierarchyTab";
|
|||
import ConditionTab from "./tabs/ConditionTab";
|
||||
import MutualExclusionTab from "./tabs/MutualExclusionTab";
|
||||
import CategoryValueCascadingTab from "./tabs/CategoryValueCascadingTab";
|
||||
import HierarchyColumnTab from "./tabs/HierarchyColumnTab";
|
||||
|
||||
export default function CascadingManagementPage() {
|
||||
const searchParams = useSearchParams();
|
||||
|
|
@ -21,7 +22,7 @@ export default function CascadingManagementPage() {
|
|||
// URL 쿼리 파라미터에서 탭 설정
|
||||
useEffect(() => {
|
||||
const tab = searchParams.get("tab");
|
||||
if (tab && ["relations", "hierarchy", "condition", "autofill", "exclusion", "category-value"].includes(tab)) {
|
||||
if (tab && ["relations", "hierarchy", "condition", "autofill", "exclusion", "category-value", "hierarchy-column"].includes(tab)) {
|
||||
setActiveTab(tab);
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,626 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Plus, Pencil, Trash2, Database, RefreshCw, Layers } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { LoadingSpinner } from "@/components/common/LoadingSpinner";
|
||||
import {
|
||||
hierarchyColumnApi,
|
||||
HierarchyColumnGroup,
|
||||
CreateHierarchyGroupRequest,
|
||||
} from "@/lib/api/hierarchyColumn";
|
||||
import { commonCodeApi } from "@/lib/api/commonCode";
|
||||
import apiClient from "@/lib/api/client";
|
||||
|
||||
interface TableInfo {
|
||||
tableName: string;
|
||||
displayName?: string;
|
||||
}
|
||||
|
||||
interface ColumnInfo {
|
||||
columnName: string;
|
||||
displayName?: string;
|
||||
dataType?: string;
|
||||
}
|
||||
|
||||
interface CategoryInfo {
|
||||
categoryCode: string;
|
||||
categoryName: string;
|
||||
}
|
||||
|
||||
export default function HierarchyColumnTab() {
|
||||
// 상태
|
||||
const [groups, setGroups] = useState<HierarchyColumnGroup[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [selectedGroup, setSelectedGroup] = useState<HierarchyColumnGroup | null>(null);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
// 폼 상태
|
||||
const [formData, setFormData] = useState({
|
||||
groupCode: "",
|
||||
groupName: "",
|
||||
description: "",
|
||||
codeCategory: "",
|
||||
tableName: "",
|
||||
maxDepth: 3,
|
||||
mappings: [
|
||||
{ depth: 1, levelLabel: "대분류", columnName: "", placeholder: "대분류 선택", isRequired: true },
|
||||
{ depth: 2, levelLabel: "중분류", columnName: "", placeholder: "중분류 선택", isRequired: false },
|
||||
{ depth: 3, levelLabel: "소분류", columnName: "", placeholder: "소분류 선택", isRequired: false },
|
||||
],
|
||||
});
|
||||
|
||||
// 참조 데이터
|
||||
const [tables, setTables] = useState<TableInfo[]>([]);
|
||||
const [columns, setColumns] = useState<ColumnInfo[]>([]);
|
||||
const [categories, setCategories] = useState<CategoryInfo[]>([]);
|
||||
const [loadingTables, setLoadingTables] = useState(false);
|
||||
const [loadingColumns, setLoadingColumns] = useState(false);
|
||||
const [loadingCategories, setLoadingCategories] = useState(false);
|
||||
|
||||
// 그룹 목록 로드
|
||||
const loadGroups = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await hierarchyColumnApi.getAll();
|
||||
if (response.success && response.data) {
|
||||
setGroups(response.data);
|
||||
} else {
|
||||
toast.error(response.error || "계층구조 그룹 로드 실패");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("계층구조 그룹 로드 에러:", error);
|
||||
toast.error("계층구조 그룹을 로드하는 중 오류가 발생했습니다.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 테이블 목록 로드
|
||||
const loadTables = useCallback(async () => {
|
||||
setLoadingTables(true);
|
||||
try {
|
||||
const response = await apiClient.get("/table-management/tables");
|
||||
if (response.data?.success && response.data?.data) {
|
||||
setTables(response.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("테이블 로드 에러:", error);
|
||||
} finally {
|
||||
setLoadingTables(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 카테고리 목록 로드
|
||||
const loadCategories = useCallback(async () => {
|
||||
setLoadingCategories(true);
|
||||
try {
|
||||
const response = await commonCodeApi.categories.getList();
|
||||
if (response.success && response.data) {
|
||||
setCategories(
|
||||
response.data.map((cat: any) => ({
|
||||
categoryCode: cat.categoryCode || cat.category_code,
|
||||
categoryName: cat.categoryName || cat.category_name,
|
||||
}))
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("카테고리 로드 에러:", error);
|
||||
} finally {
|
||||
setLoadingCategories(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 테이블 선택 시 컬럼 로드
|
||||
const loadColumns = useCallback(async (tableName: string) => {
|
||||
if (!tableName) {
|
||||
setColumns([]);
|
||||
return;
|
||||
}
|
||||
setLoadingColumns(true);
|
||||
try {
|
||||
const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
|
||||
if (response.data?.success && response.data?.data) {
|
||||
setColumns(response.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("컬럼 로드 에러:", error);
|
||||
} finally {
|
||||
setLoadingColumns(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 초기 로드
|
||||
useEffect(() => {
|
||||
loadGroups();
|
||||
loadTables();
|
||||
loadCategories();
|
||||
}, [loadGroups, loadTables, loadCategories]);
|
||||
|
||||
// 테이블 선택 변경 시 컬럼 로드
|
||||
useEffect(() => {
|
||||
if (formData.tableName) {
|
||||
loadColumns(formData.tableName);
|
||||
}
|
||||
}, [formData.tableName, loadColumns]);
|
||||
|
||||
// 폼 초기화
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
groupCode: "",
|
||||
groupName: "",
|
||||
description: "",
|
||||
codeCategory: "",
|
||||
tableName: "",
|
||||
maxDepth: 3,
|
||||
mappings: [
|
||||
{ depth: 1, levelLabel: "대분류", columnName: "", placeholder: "대분류 선택", isRequired: true },
|
||||
{ depth: 2, levelLabel: "중분류", columnName: "", placeholder: "중분류 선택", isRequired: false },
|
||||
{ depth: 3, levelLabel: "소분류", columnName: "", placeholder: "소분류 선택", isRequired: false },
|
||||
],
|
||||
});
|
||||
setSelectedGroup(null);
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
// 모달 열기 (신규)
|
||||
const openCreateModal = () => {
|
||||
resetForm();
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
// 모달 열기 (수정)
|
||||
const openEditModal = (group: HierarchyColumnGroup) => {
|
||||
setSelectedGroup(group);
|
||||
setIsEditing(true);
|
||||
|
||||
// 매핑 데이터 변환
|
||||
const mappings = [1, 2, 3].map((depth) => {
|
||||
const existing = group.mappings?.find((m) => m.depth === depth);
|
||||
return {
|
||||
depth,
|
||||
levelLabel: existing?.level_label || (depth === 1 ? "대분류" : depth === 2 ? "중분류" : "소분류"),
|
||||
columnName: existing?.column_name || "",
|
||||
placeholder: existing?.placeholder || `${depth === 1 ? "대분류" : depth === 2 ? "중분류" : "소분류"} 선택`,
|
||||
isRequired: existing?.is_required === "Y",
|
||||
};
|
||||
});
|
||||
|
||||
setFormData({
|
||||
groupCode: group.group_code,
|
||||
groupName: group.group_name,
|
||||
description: group.description || "",
|
||||
codeCategory: group.code_category,
|
||||
tableName: group.table_name,
|
||||
maxDepth: group.max_depth,
|
||||
mappings,
|
||||
});
|
||||
|
||||
// 컬럼 로드
|
||||
loadColumns(group.table_name);
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
// 삭제 확인 열기
|
||||
const openDeleteDialog = (group: HierarchyColumnGroup) => {
|
||||
setSelectedGroup(group);
|
||||
setDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
// 저장
|
||||
const handleSave = async () => {
|
||||
// 필수 필드 검증
|
||||
if (!formData.groupCode || !formData.groupName || !formData.codeCategory || !formData.tableName) {
|
||||
toast.error("필수 필드를 모두 입력해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
// 최소 1개 컬럼 매핑 검증
|
||||
const validMappings = formData.mappings
|
||||
.filter((m) => m.depth <= formData.maxDepth && m.columnName)
|
||||
.map((m) => ({
|
||||
depth: m.depth,
|
||||
levelLabel: m.levelLabel,
|
||||
columnName: m.columnName,
|
||||
placeholder: m.placeholder,
|
||||
isRequired: m.isRequired,
|
||||
}));
|
||||
|
||||
if (validMappings.length === 0) {
|
||||
toast.error("최소 하나의 컬럼 매핑이 필요합니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (isEditing && selectedGroup) {
|
||||
// 수정
|
||||
const response = await hierarchyColumnApi.update(selectedGroup.group_id, {
|
||||
groupName: formData.groupName,
|
||||
description: formData.description,
|
||||
maxDepth: formData.maxDepth,
|
||||
mappings: validMappings,
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
toast.success("계층구조 그룹이 수정되었습니다.");
|
||||
setModalOpen(false);
|
||||
loadGroups();
|
||||
} else {
|
||||
toast.error(response.error || "수정 실패");
|
||||
}
|
||||
} else {
|
||||
// 생성
|
||||
const request: CreateHierarchyGroupRequest = {
|
||||
groupCode: formData.groupCode,
|
||||
groupName: formData.groupName,
|
||||
description: formData.description,
|
||||
codeCategory: formData.codeCategory,
|
||||
tableName: formData.tableName,
|
||||
maxDepth: formData.maxDepth,
|
||||
mappings: validMappings,
|
||||
};
|
||||
|
||||
const response = await hierarchyColumnApi.create(request);
|
||||
|
||||
if (response.success) {
|
||||
toast.success("계층구조 그룹이 생성되었습니다.");
|
||||
setModalOpen(false);
|
||||
loadGroups();
|
||||
} else {
|
||||
toast.error(response.error || "생성 실패");
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("저장 에러:", error);
|
||||
toast.error("저장 중 오류가 발생했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
// 삭제
|
||||
const handleDelete = async () => {
|
||||
if (!selectedGroup) return;
|
||||
|
||||
try {
|
||||
const response = await hierarchyColumnApi.delete(selectedGroup.group_id);
|
||||
if (response.success) {
|
||||
toast.success("계층구조 그룹이 삭제되었습니다.");
|
||||
setDeleteDialogOpen(false);
|
||||
loadGroups();
|
||||
} else {
|
||||
toast.error(response.error || "삭제 실패");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("삭제 에러:", error);
|
||||
toast.error("삭제 중 오류가 발생했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
// 매핑 컬럼 변경
|
||||
const handleMappingChange = (depth: number, field: string, value: any) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
mappings: prev.mappings.map((m) =>
|
||||
m.depth === depth ? { ...m, [field]: value } : m
|
||||
),
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold">계층구조 컬럼 그룹</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
공통코드 계층구조를 테이블 컬럼에 매핑하여 대분류/중분류/소분류를 각각 별도 컬럼에 저장합니다.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={loadGroups} disabled={loading}>
|
||||
<RefreshCw className={`mr-2 h-4 w-4 ${loading ? "animate-spin" : ""}`} />
|
||||
새로고침
|
||||
</Button>
|
||||
<Button size="sm" onClick={openCreateModal}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
새 그룹 추가
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 그룹 목록 */}
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<LoadingSpinner />
|
||||
<span className="ml-2 text-muted-foreground">로딩 중...</span>
|
||||
</div>
|
||||
) : groups.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<Layers className="h-12 w-12 text-muted-foreground" />
|
||||
<p className="mt-4 text-muted-foreground">계층구조 컬럼 그룹이 없습니다.</p>
|
||||
<Button className="mt-4" onClick={openCreateModal}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
첫 번째 그룹 만들기
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{groups.map((group) => (
|
||||
<Card key={group.group_id} className="hover:shadow-md transition-shadow">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base">{group.group_name}</CardTitle>
|
||||
<CardDescription className="text-xs">{group.group_code}</CardDescription>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEditModal(group)}>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-destructive" onClick={() => openDeleteDialog(group)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Database className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-medium">{group.table_name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline">{group.code_category}</Badge>
|
||||
<Badge variant="secondary">{group.max_depth}단계</Badge>
|
||||
</div>
|
||||
{group.mappings && group.mappings.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
{group.mappings.map((mapping) => (
|
||||
<div key={mapping.depth} className="flex items-center gap-2 text-xs">
|
||||
<Badge variant="outline" className="w-14 justify-center">
|
||||
{mapping.level_label}
|
||||
</Badge>
|
||||
<span className="font-mono text-muted-foreground">{mapping.column_name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 생성/수정 모달 */}
|
||||
<Dialog open={modalOpen} onOpenChange={setModalOpen}>
|
||||
<DialogContent className="max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isEditing ? "계층구조 그룹 수정" : "계층구조 그룹 생성"}</DialogTitle>
|
||||
<DialogDescription>
|
||||
공통코드 계층구조를 테이블 컬럼에 매핑합니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
{/* 기본 정보 */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>그룹 코드 *</Label>
|
||||
<Input
|
||||
value={formData.groupCode}
|
||||
onChange={(e) => setFormData({ ...formData, groupCode: e.target.value.toUpperCase() })}
|
||||
placeholder="예: ITEM_CAT_HIERARCHY"
|
||||
disabled={isEditing}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>그룹명 *</Label>
|
||||
<Input
|
||||
value={formData.groupName}
|
||||
onChange={(e) => setFormData({ ...formData, groupName: e.target.value })}
|
||||
placeholder="예: 품목분류 계층"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>설명</Label>
|
||||
<Input
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
placeholder="계층구조에 대한 설명"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>공통코드 카테고리 *</Label>
|
||||
<Select
|
||||
value={formData.codeCategory}
|
||||
onValueChange={(value) => setFormData({ ...formData, codeCategory: value })}
|
||||
disabled={isEditing}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="카테고리 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{loadingCategories ? (
|
||||
<SelectItem value="_loading" disabled>로딩 중...</SelectItem>
|
||||
) : (
|
||||
categories.map((cat) => (
|
||||
<SelectItem key={cat.categoryCode} value={cat.categoryCode}>
|
||||
{cat.categoryName} ({cat.categoryCode})
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>적용 테이블 *</Label>
|
||||
<Select
|
||||
value={formData.tableName}
|
||||
onValueChange={(value) => setFormData({ ...formData, tableName: value })}
|
||||
disabled={isEditing}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="테이블 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{loadingTables ? (
|
||||
<SelectItem value="_loading" disabled>로딩 중...</SelectItem>
|
||||
) : (
|
||||
tables.map((table) => (
|
||||
<SelectItem key={table.tableName} value={table.tableName}>
|
||||
{table.displayName || table.tableName}
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>최대 깊이</Label>
|
||||
<Select
|
||||
value={String(formData.maxDepth)}
|
||||
onValueChange={(value) => setFormData({ ...formData, maxDepth: Number(value) })}
|
||||
>
|
||||
<SelectTrigger className="w-40">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">1단계 (대분류만)</SelectItem>
|
||||
<SelectItem value="2">2단계 (대/중분류)</SelectItem>
|
||||
<SelectItem value="3">3단계 (대/중/소분류)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 컬럼 매핑 */}
|
||||
<div className="space-y-3 border-t pt-4">
|
||||
<Label className="text-base font-medium">컬럼 매핑</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
각 계층 레벨에 저장할 컬럼을 선택합니다.
|
||||
</p>
|
||||
|
||||
{formData.mappings
|
||||
.filter((m) => m.depth <= formData.maxDepth)
|
||||
.map((mapping) => (
|
||||
<div key={mapping.depth} className="grid grid-cols-4 gap-2 items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={mapping.depth === 1 ? "default" : "outline"}>
|
||||
{mapping.depth}단계
|
||||
</Badge>
|
||||
<Input
|
||||
value={mapping.levelLabel}
|
||||
onChange={(e) => handleMappingChange(mapping.depth, "levelLabel", e.target.value)}
|
||||
className="h-8 text-xs"
|
||||
placeholder="라벨"
|
||||
/>
|
||||
</div>
|
||||
<Select
|
||||
value={mapping.columnName || "_none"}
|
||||
onValueChange={(value) => handleMappingChange(mapping.depth, "columnName", value === "_none" ? "" : value)}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="컬럼 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="_none">컬럼 선택</SelectItem>
|
||||
{loadingColumns ? (
|
||||
<SelectItem value="_loading" disabled>로딩 중...</SelectItem>
|
||||
) : (
|
||||
columns.map((col) => (
|
||||
<SelectItem key={col.columnName} value={col.columnName}>
|
||||
{col.displayName || col.columnName}
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input
|
||||
value={mapping.placeholder}
|
||||
onChange={(e) => handleMappingChange(mapping.depth, "placeholder", e.target.value)}
|
||||
className="h-8 text-xs"
|
||||
placeholder="플레이스홀더"
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapping.isRequired}
|
||||
onChange={(e) => handleMappingChange(mapping.depth, "isRequired", e.target.checked)}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">필수</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setModalOpen(false)}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSave}>
|
||||
{isEditing ? "수정" : "생성"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 삭제 확인 다이얼로그 */}
|
||||
<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>계층구조 그룹 삭제</DialogTitle>
|
||||
<DialogDescription>
|
||||
"{selectedGroup?.group_name}" 그룹을 삭제하시겠습니까?
|
||||
<br />
|
||||
이 작업은 되돌릴 수 없습니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
|
||||
취소
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleDelete}>
|
||||
삭제
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -56,6 +56,7 @@ interface ColumnTypeInfo {
|
|||
referenceColumn?: string;
|
||||
displayColumn?: string; // 🎯 Entity 조인에서 표시할 컬럼명
|
||||
categoryMenus?: number[]; // 🆕 Category 타입: 선택된 2레벨 메뉴 OBJID 배열
|
||||
hierarchyRole?: "large" | "medium" | "small"; // 🆕 계층구조 역할
|
||||
}
|
||||
|
||||
interface SecondLevelMenu {
|
||||
|
|
@ -292,11 +293,27 @@ export default function TableManagementPage() {
|
|||
});
|
||||
|
||||
// 컬럼 데이터에 기본값 설정
|
||||
const processedColumns = (data.columns || data).map((col: any) => ({
|
||||
...col,
|
||||
inputType: col.inputType || "text", // 기본값: text
|
||||
categoryMenus: col.categoryMenus || [], // 카테고리 메뉴 매핑 정보
|
||||
}));
|
||||
const processedColumns = (data.columns || data).map((col: any) => {
|
||||
// detailSettings에서 hierarchyRole 추출
|
||||
let hierarchyRole: "large" | "medium" | "small" | undefined = undefined;
|
||||
if (col.detailSettings && typeof col.detailSettings === "string") {
|
||||
try {
|
||||
const parsed = JSON.parse(col.detailSettings);
|
||||
if (parsed.hierarchyRole === "large" || parsed.hierarchyRole === "medium" || parsed.hierarchyRole === "small") {
|
||||
hierarchyRole = parsed.hierarchyRole;
|
||||
}
|
||||
} catch {
|
||||
// JSON 파싱 실패 시 무시
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...col,
|
||||
inputType: col.inputType || "text", // 기본값: text
|
||||
categoryMenus: col.categoryMenus || [], // 카테고리 메뉴 매핑 정보
|
||||
hierarchyRole, // 계층구조 역할
|
||||
};
|
||||
});
|
||||
|
||||
if (page === 1) {
|
||||
setColumns(processedColumns);
|
||||
|
|
@ -367,18 +384,40 @@ export default function TableManagementPage() {
|
|||
let referenceTable = col.referenceTable;
|
||||
let referenceColumn = col.referenceColumn;
|
||||
let displayColumn = col.displayColumn;
|
||||
let hierarchyRole = col.hierarchyRole;
|
||||
|
||||
if (settingType === "code") {
|
||||
if (value === "none") {
|
||||
newDetailSettings = "";
|
||||
codeCategory = undefined;
|
||||
codeValue = undefined;
|
||||
hierarchyRole = undefined; // 코드 선택 해제 시 계층 역할도 초기화
|
||||
} else {
|
||||
const codeOption = commonCodeOptions.find((option) => option.value === value);
|
||||
newDetailSettings = codeOption ? `공통코드: ${codeOption.label}` : "";
|
||||
// 기존 hierarchyRole 유지하면서 JSON 형식으로 저장
|
||||
const existingHierarchyRole = hierarchyRole;
|
||||
newDetailSettings = JSON.stringify({
|
||||
codeCategory: value,
|
||||
hierarchyRole: existingHierarchyRole
|
||||
});
|
||||
codeCategory = value;
|
||||
codeValue = value;
|
||||
}
|
||||
} else if (settingType === "hierarchy_role") {
|
||||
// 계층구조 역할 변경 - JSON 형식으로 저장
|
||||
hierarchyRole = value === "none" ? undefined : (value as "large" | "medium" | "small");
|
||||
// detailSettings를 JSON으로 업데이트
|
||||
let existingSettings: Record<string, any> = {};
|
||||
if (typeof col.detailSettings === "string" && col.detailSettings.trim().startsWith("{")) {
|
||||
try {
|
||||
existingSettings = JSON.parse(col.detailSettings);
|
||||
} catch {
|
||||
existingSettings = {};
|
||||
}
|
||||
}
|
||||
newDetailSettings = JSON.stringify({
|
||||
...existingSettings,
|
||||
hierarchyRole: hierarchyRole,
|
||||
});
|
||||
} else if (settingType === "entity") {
|
||||
if (value === "none") {
|
||||
newDetailSettings = "";
|
||||
|
|
@ -415,6 +454,7 @@ export default function TableManagementPage() {
|
|||
referenceTable,
|
||||
referenceColumn,
|
||||
displayColumn,
|
||||
hierarchyRole,
|
||||
};
|
||||
}
|
||||
return col;
|
||||
|
|
@ -487,6 +527,26 @@ export default function TableManagementPage() {
|
|||
console.log("🔧 Entity 설정 JSON 생성:", entitySettings);
|
||||
}
|
||||
|
||||
// 🎯 Code 타입인 경우 hierarchyRole을 detailSettings에 포함
|
||||
if (column.inputType === "code" && column.hierarchyRole) {
|
||||
let existingSettings: Record<string, unknown> = {};
|
||||
if (typeof finalDetailSettings === "string" && finalDetailSettings.trim().startsWith("{")) {
|
||||
try {
|
||||
existingSettings = JSON.parse(finalDetailSettings);
|
||||
} catch {
|
||||
existingSettings = {};
|
||||
}
|
||||
}
|
||||
|
||||
const codeSettings = {
|
||||
...existingSettings,
|
||||
hierarchyRole: column.hierarchyRole,
|
||||
};
|
||||
|
||||
finalDetailSettings = JSON.stringify(codeSettings);
|
||||
console.log("🔧 Code 계층 역할 설정 JSON 생성:", codeSettings);
|
||||
}
|
||||
|
||||
const columnSetting = {
|
||||
columnName: column.columnName, // 실제 DB 컬럼명 (변경 불가)
|
||||
columnLabel: column.displayName, // 사용자가 입력한 표시명
|
||||
|
|
@ -1229,23 +1289,44 @@ export default function TableManagementPage() {
|
|||
</Select>
|
||||
{/* 입력 타입이 'code'인 경우 공통코드 선택 */}
|
||||
{column.inputType === "code" && (
|
||||
<Select
|
||||
value={column.codeCategory || "none"}
|
||||
onValueChange={(value) =>
|
||||
handleDetailSettingsChange(column.columnName, "code", value)
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="공통코드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{commonCodeOptions.map((option, index) => (
|
||||
<SelectItem key={`code-${option.value}-${index}`} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<>
|
||||
<Select
|
||||
value={column.codeCategory || "none"}
|
||||
onValueChange={(value) =>
|
||||
handleDetailSettingsChange(column.columnName, "code", value)
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="공통코드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{commonCodeOptions.map((option, index) => (
|
||||
<SelectItem key={`code-${option.value}-${index}`} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{/* 계층구조 역할 선택 */}
|
||||
{column.codeCategory && column.codeCategory !== "none" && (
|
||||
<Select
|
||||
value={column.hierarchyRole || "none"}
|
||||
onValueChange={(value) =>
|
||||
handleDetailSettingsChange(column.columnName, "hierarchy_role", value)
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="계층 역할" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">일반</SelectItem>
|
||||
<SelectItem value="large">대분류</SelectItem>
|
||||
<SelectItem value="medium">중분류</SelectItem>
|
||||
<SelectItem value="small">소분류</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{/* 입력 타입이 'category'인 경우 2레벨 메뉴 다중 선택 */}
|
||||
{column.inputType === "category" && (
|
||||
|
|
|
|||
|
|
@ -317,12 +317,16 @@ export default function MultiLangPage() {
|
|||
|
||||
<div>
|
||||
<Label htmlFor="menu">메뉴</Label>
|
||||
<Select value={selectedMenu} onValueChange={setSelectedMenu}>
|
||||
{/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__all__" 사용 */}
|
||||
<Select
|
||||
value={selectedMenu || "__all__"}
|
||||
onValueChange={(value) => setSelectedMenu(value === "__all__" ? "" : value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="전체 메뉴" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">전체 메뉴</SelectItem>
|
||||
<SelectItem value="__all__">전체 메뉴</SelectItem>
|
||||
{menus.map((menu) => (
|
||||
<SelectItem key={menu.code} value={menu.code}>
|
||||
{menu.name}
|
||||
|
|
@ -334,12 +338,16 @@ export default function MultiLangPage() {
|
|||
|
||||
<div>
|
||||
<Label htmlFor="keyType">키 타입</Label>
|
||||
<Select value={selectedKeyType} onValueChange={setSelectedKeyType}>
|
||||
{/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__all__" 사용 */}
|
||||
<Select
|
||||
value={selectedKeyType || "__all__"}
|
||||
onValueChange={(value) => setSelectedKeyType(value === "__all__" ? "" : value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="전체 타입" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">전체 타입</SelectItem>
|
||||
<SelectItem value="__all__">전체 타입</SelectItem>
|
||||
{keyTypes.map((type) => (
|
||||
<SelectItem key={type.code} value={type.code}>
|
||||
{type.name}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
|
@ -45,15 +45,124 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
const reorderCodesMutation = useReorderCodes();
|
||||
|
||||
// 드래그앤드롭을 위해 필터링된 코드 목록 사용
|
||||
const { filteredItems: filteredCodes } = useSearchAndFilter(codes, {
|
||||
const { filteredItems: filteredCodesRaw } = useSearchAndFilter(codes, {
|
||||
searchFields: ["code_name", "code_value"],
|
||||
});
|
||||
|
||||
// 계층 구조로 정렬 (부모 → 자식 순서)
|
||||
const filteredCodes = useMemo(() => {
|
||||
if (!filteredCodesRaw || filteredCodesRaw.length === 0) return [];
|
||||
|
||||
// 코드를 계층 순서로 정렬하는 함수
|
||||
const sortHierarchically = (codes: CodeInfo[]): CodeInfo[] => {
|
||||
const result: CodeInfo[] = [];
|
||||
const codeMap = new Map<string, CodeInfo>();
|
||||
const childrenMap = new Map<string, CodeInfo[]>();
|
||||
|
||||
// 코드 맵 생성
|
||||
codes.forEach((code) => {
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
const parentValue = code.parentCodeValue || code.parent_code_value;
|
||||
codeMap.set(codeValue, code);
|
||||
|
||||
if (parentValue) {
|
||||
if (!childrenMap.has(parentValue)) {
|
||||
childrenMap.set(parentValue, []);
|
||||
}
|
||||
childrenMap.get(parentValue)!.push(code);
|
||||
}
|
||||
});
|
||||
|
||||
// 재귀적으로 트리 구조 순회
|
||||
const traverse = (parentValue: string | null, depth: number) => {
|
||||
const children = parentValue
|
||||
? childrenMap.get(parentValue) || []
|
||||
: codes.filter((c) => !c.parentCodeValue && !c.parent_code_value);
|
||||
|
||||
// 정렬 순서로 정렬
|
||||
children
|
||||
.sort((a, b) => (a.sortOrder || a.sort_order || 0) - (b.sortOrder || b.sort_order || 0))
|
||||
.forEach((code) => {
|
||||
result.push(code);
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
traverse(codeValue, depth + 1);
|
||||
});
|
||||
};
|
||||
|
||||
traverse(null, 1);
|
||||
|
||||
// 트리에 포함되지 않은 코드들도 추가 (orphan 코드)
|
||||
codes.forEach((code) => {
|
||||
if (!result.includes(code)) {
|
||||
result.push(code);
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
return sortHierarchically(filteredCodesRaw);
|
||||
}, [filteredCodesRaw]);
|
||||
|
||||
// 모달 상태
|
||||
const [showFormModal, setShowFormModal] = useState(false);
|
||||
const [editingCode, setEditingCode] = useState<CodeInfo | null>(null);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [deletingCode, setDeletingCode] = useState<CodeInfo | null>(null);
|
||||
const [defaultParentCode, setDefaultParentCode] = useState<string | undefined>(undefined);
|
||||
|
||||
// 트리 접기/펼치기 상태 (코드값 Set)
|
||||
const [collapsedCodes, setCollapsedCodes] = useState<Set<string>>(new Set());
|
||||
|
||||
// 자식 정보 계산
|
||||
const childrenMap = useMemo(() => {
|
||||
const map = new Map<string, CodeInfo[]>();
|
||||
codes.forEach((code) => {
|
||||
const parentValue = code.parentCodeValue || code.parent_code_value;
|
||||
if (parentValue) {
|
||||
if (!map.has(parentValue)) {
|
||||
map.set(parentValue, []);
|
||||
}
|
||||
map.get(parentValue)!.push(code);
|
||||
}
|
||||
});
|
||||
return map;
|
||||
}, [codes]);
|
||||
|
||||
// 접기/펼치기 토글
|
||||
const toggleExpand = (codeValue: string) => {
|
||||
setCollapsedCodes((prev) => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(codeValue)) {
|
||||
newSet.delete(codeValue);
|
||||
} else {
|
||||
newSet.add(codeValue);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
// 특정 코드가 표시되어야 하는지 확인 (부모가 접혀있으면 숨김)
|
||||
const isCodeVisible = (code: CodeInfo): boolean => {
|
||||
const parentValue = code.parentCodeValue || code.parent_code_value;
|
||||
if (!parentValue) return true; // 최상위 코드는 항상 표시
|
||||
|
||||
// 부모가 접혀있으면 숨김
|
||||
if (collapsedCodes.has(parentValue)) return false;
|
||||
|
||||
// 부모의 부모도 확인 (재귀적으로)
|
||||
const parentCode = codes.find((c) => (c.codeValue || c.code_value) === parentValue);
|
||||
if (parentCode) {
|
||||
return isCodeVisible(parentCode);
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// 표시할 코드 목록 (접힌 상태 반영)
|
||||
const visibleCodes = useMemo(() => {
|
||||
return filteredCodes.filter(isCodeVisible);
|
||||
}, [filteredCodes, collapsedCodes, codes]);
|
||||
|
||||
// 드래그 앤 드롭 훅 사용
|
||||
const dragAndDrop = useDragAndDrop<CodeInfo>({
|
||||
|
|
@ -73,12 +182,21 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
// 새 코드 생성
|
||||
const handleNewCode = () => {
|
||||
setEditingCode(null);
|
||||
setDefaultParentCode(undefined);
|
||||
setShowFormModal(true);
|
||||
};
|
||||
|
||||
// 코드 수정
|
||||
const handleEditCode = (code: CodeInfo) => {
|
||||
setEditingCode(code);
|
||||
setDefaultParentCode(undefined);
|
||||
setShowFormModal(true);
|
||||
};
|
||||
|
||||
// 하위 코드 추가
|
||||
const handleAddChild = (parentCode: CodeInfo) => {
|
||||
setEditingCode(null);
|
||||
setDefaultParentCode(parentCode.codeValue || parentCode.code_value || "");
|
||||
setShowFormModal(true);
|
||||
};
|
||||
|
||||
|
|
@ -110,7 +228,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
if (!categoryCode) {
|
||||
return (
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<p className="text-sm text-muted-foreground">카테고리를 선택하세요</p>
|
||||
<p className="text-muted-foreground text-sm">카테고리를 선택하세요</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -119,7 +237,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
return (
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<div className="text-center">
|
||||
<p className="text-sm font-semibold text-destructive">코드를 불러오는 중 오류가 발생했습니다.</p>
|
||||
<p className="text-destructive text-sm font-semibold">코드를 불러오는 중 오류가 발생했습니다.</p>
|
||||
<Button variant="outline" onClick={() => window.location.reload()} className="mt-4 h-10 text-sm font-medium">
|
||||
다시 시도
|
||||
</Button>
|
||||
|
|
@ -135,7 +253,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
{/* 검색 + 버튼 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative w-full sm:w-[300px]">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
||||
<Input
|
||||
placeholder="코드 검색..."
|
||||
value={searchTerm}
|
||||
|
|
@ -156,9 +274,9 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
id="activeOnlyCodes"
|
||||
checked={showActiveOnly}
|
||||
onChange={(e) => setShowActiveOnly(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-input"
|
||||
className="border-input h-4 w-4 rounded"
|
||||
/>
|
||||
<label htmlFor="activeOnlyCodes" className="text-sm text-muted-foreground">
|
||||
<label htmlFor="activeOnlyCodes" className="text-muted-foreground text-sm">
|
||||
활성만 표시
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -170,9 +288,9 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
<div className="flex h-32 items-center justify-center">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
) : filteredCodes.length === 0 ? (
|
||||
) : visibleCodes.length === 0 ? (
|
||||
<div className="flex h-32 items-center justify-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{codes.length === 0 ? "코드가 없습니다." : "검색 결과가 없습니다."}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -180,23 +298,35 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
<>
|
||||
<DndContext {...dragAndDrop.dndContextProps}>
|
||||
<SortableContext
|
||||
items={filteredCodes.map((code) => code.codeValue || code.code_value)}
|
||||
items={visibleCodes.map((code) => code.codeValue || code.code_value)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
{filteredCodes.map((code, index) => (
|
||||
<SortableCodeItem
|
||||
key={`${code.codeValue || code.code_value}-${index}`}
|
||||
code={code}
|
||||
categoryCode={categoryCode}
|
||||
onEdit={() => handleEditCode(code)}
|
||||
onDelete={() => handleDeleteCode(code)}
|
||||
/>
|
||||
))}
|
||||
{visibleCodes.map((code, index) => {
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
const children = childrenMap.get(codeValue) || [];
|
||||
const hasChildren = children.length > 0;
|
||||
const isExpanded = !collapsedCodes.has(codeValue);
|
||||
|
||||
return (
|
||||
<SortableCodeItem
|
||||
key={`${codeValue}-${index}`}
|
||||
code={code}
|
||||
categoryCode={categoryCode}
|
||||
onEdit={() => handleEditCode(code)}
|
||||
onDelete={() => handleDeleteCode(code)}
|
||||
onAddChild={() => handleAddChild(code)}
|
||||
hasChildren={hasChildren}
|
||||
childCount={children.length}
|
||||
isExpanded={isExpanded}
|
||||
onToggleExpand={() => toggleExpand(codeValue)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</SortableContext>
|
||||
|
||||
<DragOverlay dropAnimation={null}>
|
||||
{dragAndDrop.activeItem ? (
|
||||
<div className="cursor-grabbing rounded-lg border bg-card p-4 shadow-lg">
|
||||
<div className="bg-card cursor-grabbing rounded-lg border p-4 shadow-lg">
|
||||
{(() => {
|
||||
const activeCode = dragAndDrop.activeItem;
|
||||
if (!activeCode) return null;
|
||||
|
|
@ -204,24 +334,20 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
<div className="flex items-start justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="text-sm font-semibold">
|
||||
{activeCode.codeName || activeCode.code_name}
|
||||
</h4>
|
||||
<h4 className="text-sm font-semibold">{activeCode.codeName || activeCode.code_name}</h4>
|
||||
<Badge
|
||||
variant={
|
||||
activeCode.isActive === "Y" || activeCode.is_active === "Y"
|
||||
? "default"
|
||||
: "secondary"
|
||||
activeCode.isActive === "Y" || activeCode.is_active === "Y" ? "default" : "secondary"
|
||||
}
|
||||
>
|
||||
{activeCode.isActive === "Y" || activeCode.is_active === "Y" ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
<p className="text-muted-foreground mt-1 text-xs">
|
||||
{activeCode.codeValue || activeCode.code_value}
|
||||
</p>
|
||||
{activeCode.description && (
|
||||
<p className="mt-1 text-xs text-muted-foreground">{activeCode.description}</p>
|
||||
<p className="text-muted-foreground mt-1 text-xs">{activeCode.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -236,13 +362,13 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
{isFetchingNextPage && (
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<LoadingSpinner size="sm" />
|
||||
<span className="ml-2 text-sm text-muted-foreground">코드를 더 불러오는 중...</span>
|
||||
<span className="text-muted-foreground ml-2 text-sm">코드를 더 불러오는 중...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 모든 코드 로드 완료 메시지 */}
|
||||
{!hasNextPage && codes.length > 0 && (
|
||||
<div className="py-4 text-center text-sm text-muted-foreground">모든 코드를 불러왔습니다.</div>
|
||||
<div className="text-muted-foreground py-4 text-center text-sm">모든 코드를 불러왔습니다.</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
|
@ -255,10 +381,12 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
|
|||
onClose={() => {
|
||||
setShowFormModal(false);
|
||||
setEditingCode(null);
|
||||
setDefaultParentCode(undefined);
|
||||
}}
|
||||
categoryCode={categoryCode}
|
||||
editingCode={editingCode}
|
||||
codes={codes}
|
||||
defaultParentCode={defaultParentCode}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ interface CodeFormModalProps {
|
|||
categoryCode: string;
|
||||
editingCode?: CodeInfo | null;
|
||||
codes: CodeInfo[];
|
||||
defaultParentCode?: string; // 하위 코드 추가 시 기본 부모 코드
|
||||
}
|
||||
|
||||
// 에러 메시지를 안전하게 문자열로 변환하는 헬퍼 함수
|
||||
|
|
@ -33,28 +34,32 @@ const getErrorMessage = (error: FieldError | undefined): string => {
|
|||
return error.message || "";
|
||||
};
|
||||
|
||||
export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, codes }: CodeFormModalProps) {
|
||||
// 코드값 자동 생성 함수 (UUID 기반 짧은 코드)
|
||||
const generateCodeValue = (): string => {
|
||||
const timestamp = Date.now().toString(36).toUpperCase();
|
||||
const random = Math.random().toString(36).substring(2, 6).toUpperCase();
|
||||
return `${timestamp}${random}`;
|
||||
};
|
||||
|
||||
export function CodeFormModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
categoryCode,
|
||||
editingCode,
|
||||
codes,
|
||||
defaultParentCode,
|
||||
}: CodeFormModalProps) {
|
||||
const createCodeMutation = useCreateCode();
|
||||
const updateCodeMutation = useUpdateCode();
|
||||
|
||||
const isEditing = !!editingCode;
|
||||
|
||||
// 검증 상태 관리
|
||||
// 검증 상태 관리 (코드명만 중복 검사)
|
||||
const [validationStates, setValidationStates] = useState({
|
||||
codeValue: { enabled: false, value: "" },
|
||||
codeName: { enabled: false, value: "" },
|
||||
codeNameEng: { enabled: false, value: "" },
|
||||
});
|
||||
|
||||
// 중복 검사 훅들
|
||||
const codeValueCheck = useCheckCodeDuplicate(
|
||||
categoryCode,
|
||||
"codeValue",
|
||||
validationStates.codeValue.value,
|
||||
isEditing ? editingCode?.codeValue || editingCode?.code_value : undefined,
|
||||
validationStates.codeValue.enabled,
|
||||
);
|
||||
|
||||
// 코드명 중복 검사
|
||||
const codeNameCheck = useCheckCodeDuplicate(
|
||||
categoryCode,
|
||||
"codeName",
|
||||
|
|
@ -63,22 +68,11 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
|
|||
validationStates.codeName.enabled,
|
||||
);
|
||||
|
||||
const codeNameEngCheck = useCheckCodeDuplicate(
|
||||
categoryCode,
|
||||
"codeNameEng",
|
||||
validationStates.codeNameEng.value,
|
||||
isEditing ? editingCode?.codeValue || editingCode?.code_value : undefined,
|
||||
validationStates.codeNameEng.enabled,
|
||||
);
|
||||
|
||||
// 중복 검사 결과 확인
|
||||
const hasDuplicateErrors =
|
||||
(codeValueCheck.data?.isDuplicate && validationStates.codeValue.enabled) ||
|
||||
(codeNameCheck.data?.isDuplicate && validationStates.codeName.enabled) ||
|
||||
(codeNameEngCheck.data?.isDuplicate && validationStates.codeNameEng.enabled);
|
||||
const hasDuplicateErrors = codeNameCheck.data?.isDuplicate && validationStates.codeName.enabled;
|
||||
|
||||
// 중복 검사 로딩 중인지 확인
|
||||
const isDuplicateChecking = codeValueCheck.isLoading || codeNameCheck.isLoading || codeNameEngCheck.isLoading;
|
||||
const isDuplicateChecking = codeNameCheck.isLoading;
|
||||
|
||||
// 폼 스키마 선택 (생성/수정에 따라)
|
||||
const schema = isEditing ? updateCodeSchema : createCodeSchema;
|
||||
|
|
@ -92,6 +86,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
|
|||
codeNameEng: "",
|
||||
description: "",
|
||||
sortOrder: 1,
|
||||
parentCodeValue: "" as string | undefined,
|
||||
...(isEditing && { isActive: "Y" as const }),
|
||||
},
|
||||
});
|
||||
|
|
@ -101,30 +96,40 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
|
|||
if (isOpen) {
|
||||
if (isEditing && editingCode) {
|
||||
// 수정 모드: 기존 데이터 로드 (codeValue는 표시용으로만 설정)
|
||||
const parentValue = editingCode.parentCodeValue || editingCode.parent_code_value || "";
|
||||
|
||||
form.reset({
|
||||
codeName: editingCode.codeName || editingCode.code_name,
|
||||
codeNameEng: editingCode.codeNameEng || editingCode.code_name_eng || "",
|
||||
description: editingCode.description || "",
|
||||
sortOrder: editingCode.sortOrder || editingCode.sort_order,
|
||||
isActive: (editingCode.isActive || editingCode.is_active) as "Y" | "N", // 타입 캐스팅
|
||||
isActive: (editingCode.isActive || editingCode.is_active) as "Y" | "N",
|
||||
parentCodeValue: parentValue,
|
||||
});
|
||||
|
||||
// codeValue는 별도로 설정 (표시용)
|
||||
form.setValue("codeValue" as any, editingCode.codeValue || editingCode.code_value);
|
||||
} else {
|
||||
// 새 코드 모드: 자동 순서 계산
|
||||
const maxSortOrder = codes.length > 0 ? Math.max(...codes.map((c) => c.sortOrder || c.sort_order)) : 0;
|
||||
const maxSortOrder = codes.length > 0 ? Math.max(...codes.map((c) => c.sortOrder || c.sort_order || 0)) : 0;
|
||||
|
||||
// 기본 부모 코드가 있으면 설정 (하위 코드 추가 시)
|
||||
const parentValue = defaultParentCode || "";
|
||||
|
||||
// 코드값 자동 생성
|
||||
const autoCodeValue = generateCodeValue();
|
||||
|
||||
form.reset({
|
||||
codeValue: "",
|
||||
codeValue: autoCodeValue,
|
||||
codeName: "",
|
||||
codeNameEng: "",
|
||||
description: "",
|
||||
sortOrder: maxSortOrder + 1,
|
||||
parentCodeValue: parentValue,
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [isOpen, isEditing, editingCode, codes]);
|
||||
}, [isOpen, isEditing, editingCode, codes, defaultParentCode]);
|
||||
|
||||
const handleSubmit = form.handleSubmit(async (data) => {
|
||||
try {
|
||||
|
|
@ -132,7 +137,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
|
|||
// 수정
|
||||
await updateCodeMutation.mutateAsync({
|
||||
categoryCode,
|
||||
codeValue: editingCode.codeValue || editingCode.code_value,
|
||||
codeValue: editingCode.codeValue || editingCode.code_value || "",
|
||||
data: data as UpdateCodeData,
|
||||
});
|
||||
} else {
|
||||
|
|
@ -156,50 +161,38 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
|
|||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base sm:text-lg">{isEditing ? "코드 수정" : "새 코드"}</DialogTitle>
|
||||
<DialogTitle className="text-base sm:text-lg">
|
||||
{isEditing ? "코드 수정" : defaultParentCode ? "하위 코드 추가" : "새 코드"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-3 sm:space-y-4">
|
||||
{/* 코드값 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="codeValue" className="text-xs sm:text-sm">코드값 *</Label>
|
||||
<Input
|
||||
id="codeValue"
|
||||
{...form.register("codeValue")}
|
||||
disabled={isLoading || isEditing}
|
||||
placeholder="코드값을 입력하세요"
|
||||
className={(form.formState.errors as any)?.codeValue ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
|
||||
onBlur={(e) => {
|
||||
const value = e.target.value.trim();
|
||||
if (value && !isEditing) {
|
||||
setValidationStates((prev) => ({
|
||||
...prev,
|
||||
codeValue: { enabled: true, value },
|
||||
}));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{(form.formState.errors as any)?.codeValue && (
|
||||
<p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage((form.formState.errors as any)?.codeValue)}</p>
|
||||
)}
|
||||
{!isEditing && !(form.formState.errors as any)?.codeValue && (
|
||||
<ValidationMessage
|
||||
message={codeValueCheck.data?.message}
|
||||
isValid={!codeValueCheck.data?.isDuplicate}
|
||||
isLoading={codeValueCheck.isLoading}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{/* 코드값 (자동 생성, 수정 시에만 표시) */}
|
||||
{isEditing && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs sm:text-sm">코드값</Label>
|
||||
<div className="bg-muted h-8 rounded-md border px-3 py-1.5 text-xs sm:h-10 sm:py-2 sm:text-sm">
|
||||
{form.watch("codeValue")}
|
||||
</div>
|
||||
<p className="text-muted-foreground text-[10px] sm:text-xs">코드값은 변경할 수 없습니다</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 코드명 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="codeName" className="text-xs sm:text-sm">코드명 *</Label>
|
||||
<Label htmlFor="codeName" className="text-xs sm:text-sm">
|
||||
코드명 *
|
||||
</Label>
|
||||
<Input
|
||||
id="codeName"
|
||||
{...form.register("codeName")}
|
||||
disabled={isLoading}
|
||||
placeholder="코드명을 입력하세요"
|
||||
className={form.formState.errors.codeName ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
|
||||
className={
|
||||
form.formState.errors.codeName
|
||||
? "border-destructive h-8 text-xs sm:h-10 sm:text-sm"
|
||||
: "h-8 text-xs sm:h-10 sm:text-sm"
|
||||
}
|
||||
onBlur={(e) => {
|
||||
const value = e.target.value.trim();
|
||||
if (value) {
|
||||
|
|
@ -211,7 +204,9 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
|
|||
}}
|
||||
/>
|
||||
{form.formState.errors.codeName && (
|
||||
<p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.codeName)}</p>
|
||||
<p className="text-destructive text-[10px] sm:text-xs">
|
||||
{getErrorMessage(form.formState.errors.codeName)}
|
||||
</p>
|
||||
)}
|
||||
{!form.formState.errors.codeName && (
|
||||
<ValidationMessage
|
||||
|
|
@ -222,66 +217,72 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* 영문명 */}
|
||||
{/* 영문명 (선택) */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="codeNameEng" className="text-xs sm:text-sm">코드 영문명 *</Label>
|
||||
<Label htmlFor="codeNameEng" className="text-xs sm:text-sm">
|
||||
코드 영문명
|
||||
</Label>
|
||||
<Input
|
||||
id="codeNameEng"
|
||||
{...form.register("codeNameEng")}
|
||||
disabled={isLoading}
|
||||
placeholder="코드 영문명을 입력하세요"
|
||||
className={form.formState.errors.codeNameEng ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
|
||||
onBlur={(e) => {
|
||||
const value = e.target.value.trim();
|
||||
if (value) {
|
||||
setValidationStates((prev) => ({
|
||||
...prev,
|
||||
codeNameEng: { enabled: true, value },
|
||||
}));
|
||||
}
|
||||
}}
|
||||
placeholder="코드 영문명을 입력하세요 (선택사항)"
|
||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
{form.formState.errors.codeNameEng && (
|
||||
<p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.codeNameEng)}</p>
|
||||
)}
|
||||
{!form.formState.errors.codeNameEng && (
|
||||
<ValidationMessage
|
||||
message={codeNameEngCheck.data?.message}
|
||||
isValid={!codeNameEngCheck.data?.isDuplicate}
|
||||
isLoading={codeNameEngCheck.isLoading}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 설명 */}
|
||||
{/* 설명 (선택) */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description" className="text-xs sm:text-sm">설명 *</Label>
|
||||
<Label htmlFor="description" className="text-xs sm:text-sm">
|
||||
설명
|
||||
</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
{...form.register("description")}
|
||||
disabled={isLoading}
|
||||
placeholder="설명을 입력하세요"
|
||||
rows={3}
|
||||
className={form.formState.errors.description ? "text-xs sm:text-sm border-destructive" : "text-xs sm:text-sm"}
|
||||
placeholder="설명을 입력하세요 (선택사항)"
|
||||
rows={2}
|
||||
className="text-xs sm:text-sm"
|
||||
/>
|
||||
{form.formState.errors.description && (
|
||||
<p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.description)}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 부모 코드 표시 (하위 코드 추가 시에만 표시, 읽기 전용) */}
|
||||
{defaultParentCode && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs sm:text-sm">상위 코드</Label>
|
||||
<div className="bg-muted h-8 rounded-md border px-3 py-1.5 text-xs sm:h-10 sm:py-2 sm:text-sm">
|
||||
{(() => {
|
||||
const parentCode = codes.find((c) => (c.codeValue || c.code_value) === defaultParentCode);
|
||||
return parentCode
|
||||
? `${parentCode.codeName || parentCode.code_name} (${defaultParentCode})`
|
||||
: defaultParentCode;
|
||||
})()}
|
||||
</div>
|
||||
<p className="text-muted-foreground text-[10px] sm:text-xs">이 코드는 위 코드의 하위로 추가됩니다</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 정렬 순서 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="sortOrder" className="text-xs sm:text-sm">정렬 순서</Label>
|
||||
<Label htmlFor="sortOrder" className="text-xs sm:text-sm">
|
||||
정렬 순서
|
||||
</Label>
|
||||
<Input
|
||||
id="sortOrder"
|
||||
type="number"
|
||||
{...form.register("sortOrder", { valueAsNumber: true })}
|
||||
disabled={isLoading}
|
||||
min={1}
|
||||
className={form.formState.errors.sortOrder ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
|
||||
className={
|
||||
form.formState.errors.sortOrder
|
||||
? "border-destructive h-8 text-xs sm:h-10 sm:text-sm"
|
||||
: "h-8 text-xs sm:h-10 sm:text-sm"
|
||||
}
|
||||
/>
|
||||
{form.formState.errors.sortOrder && (
|
||||
<p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.sortOrder)}</p>
|
||||
<p className="text-destructive text-[10px] sm:text-xs">
|
||||
{getErrorMessage(form.formState.errors.sortOrder)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -295,16 +296,18 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
|
|||
disabled={isLoading}
|
||||
aria-label="활성 상태"
|
||||
/>
|
||||
<Label htmlFor="isActive" className="text-xs sm:text-sm">{form.watch("isActive") === "Y" ? "활성" : "비활성"}</Label>
|
||||
<Label htmlFor="isActive" className="text-xs sm:text-sm">
|
||||
{form.watch("isActive") === "Y" ? "활성" : "비활성"}
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 버튼 */}
|
||||
<div className="flex gap-2 pt-4 sm:justify-end sm:gap-0">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
disabled={isLoading}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -172,8 +172,9 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
|
|||
// });
|
||||
|
||||
if (!menuList || menuList.length === 0) {
|
||||
// Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__placeholder__" 사용
|
||||
return [
|
||||
<SelectItem key="no-menu" value="" disabled>
|
||||
<SelectItem key="no-menu" value="__placeholder__" disabled>
|
||||
메뉴가 없습니다
|
||||
</SelectItem>,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { useSortable } from "@dnd-kit/sortable";
|
|||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Edit, Trash2 } from "lucide-react";
|
||||
import { Edit, Trash2, CornerDownRight, Plus, ChevronRight, ChevronDown } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useUpdateCode } from "@/hooks/queries/useCodes";
|
||||
import type { CodeInfo } from "@/types/commonCode";
|
||||
|
|
@ -15,7 +15,13 @@ interface SortableCodeItemProps {
|
|||
categoryCode: string;
|
||||
onEdit: () => void;
|
||||
onDelete: () => void;
|
||||
onAddChild: () => void; // 하위 코드 추가
|
||||
isDragOverlay?: boolean;
|
||||
maxDepth?: number; // 최대 깊이 (기본값 3)
|
||||
hasChildren?: boolean; // 자식이 있는지 여부
|
||||
childCount?: number; // 자식 개수
|
||||
isExpanded?: boolean; // 펼쳐진 상태
|
||||
onToggleExpand?: () => void; // 접기/펼치기 토글
|
||||
}
|
||||
|
||||
export function SortableCodeItem({
|
||||
|
|
@ -23,10 +29,16 @@ export function SortableCodeItem({
|
|||
categoryCode,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onAddChild,
|
||||
isDragOverlay = false,
|
||||
maxDepth = 3,
|
||||
hasChildren = false,
|
||||
childCount = 0,
|
||||
isExpanded = true,
|
||||
onToggleExpand,
|
||||
}: SortableCodeItemProps) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: code.codeValue || code.code_value,
|
||||
id: code.codeValue || code.code_value || "",
|
||||
disabled: isDragOverlay,
|
||||
});
|
||||
const updateCodeMutation = useUpdateCode();
|
||||
|
|
@ -39,7 +51,6 @@ export function SortableCodeItem({
|
|||
// 활성/비활성 토글 핸들러
|
||||
const handleToggleActive = async (checked: boolean) => {
|
||||
try {
|
||||
// codeValue 또는 code_value가 없으면 에러 처리
|
||||
const codeValue = code.codeValue || code.code_value;
|
||||
if (!codeValue) {
|
||||
return;
|
||||
|
|
@ -61,73 +72,158 @@ export function SortableCodeItem({
|
|||
}
|
||||
};
|
||||
|
||||
// 계층구조 깊이에 따른 들여쓰기
|
||||
const depth = code.depth || 1;
|
||||
const indentLevel = (depth - 1) * 28; // 28px per level
|
||||
const hasParent = !!(code.parentCodeValue || code.parent_code_value);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className={cn(
|
||||
"group cursor-grab rounded-lg border bg-card p-4 shadow-sm transition-all hover:shadow-md",
|
||||
isDragging && "cursor-grabbing opacity-50",
|
||||
<div className="flex items-stretch">
|
||||
{/* 계층구조 들여쓰기 영역 */}
|
||||
{depth > 1 && (
|
||||
<div
|
||||
className="flex items-center justify-end pr-2"
|
||||
style={{ width: `${indentLevel}px`, minWidth: `${indentLevel}px` }}
|
||||
>
|
||||
<CornerDownRight className="text-muted-foreground/50 h-4 w-4" />
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="text-sm font-semibold">{code.codeName || code.code_name}</h4>
|
||||
<Badge
|
||||
variant={code.isActive === "Y" || code.is_active === "Y" ? "default" : "secondary"}
|
||||
className={cn(
|
||||
"cursor-pointer text-xs transition-colors",
|
||||
updateCodeMutation.isPending && "cursor-not-allowed opacity-50",
|
||||
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className={cn(
|
||||
"group bg-card flex-1 cursor-grab rounded-lg border p-4 shadow-sm transition-all hover:shadow-md",
|
||||
isDragging && "cursor-grabbing opacity-50",
|
||||
depth === 1 && "border-l-primary border-l-4",
|
||||
depth === 2 && "border-l-4 border-l-blue-400",
|
||||
depth === 3 && "border-l-4 border-l-green-400",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{/* 접기/펼치기 버튼 (자식이 있을 때만 표시) */}
|
||||
{hasChildren && onToggleExpand && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onToggleExpand();
|
||||
}}
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
className="text-muted-foreground hover:text-foreground -ml-1 flex h-5 w-5 items-center justify-center rounded transition-colors hover:bg-gray-100"
|
||||
title={isExpanded ? "접기" : "펼치기"}
|
||||
>
|
||||
{isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
</button>
|
||||
)}
|
||||
<h4 className="text-sm font-semibold">{code.codeName || code.code_name}</h4>
|
||||
{/* 접힌 상태에서 자식 개수 표시 */}
|
||||
{hasChildren && !isExpanded && <span className="text-muted-foreground text-[10px]">({childCount})</span>}
|
||||
{/* 깊이 표시 배지 */}
|
||||
{depth === 1 && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-primary/30 bg-primary/10 text-primary px-1.5 py-0 text-[10px]"
|
||||
>
|
||||
대분류
|
||||
</Badge>
|
||||
)}
|
||||
{depth === 2 && (
|
||||
<Badge variant="outline" className="bg-blue-50 px-1.5 py-0 text-[10px] text-blue-600">
|
||||
중분류
|
||||
</Badge>
|
||||
)}
|
||||
{depth === 3 && (
|
||||
<Badge variant="outline" className="bg-green-50 px-1.5 py-0 text-[10px] text-green-600">
|
||||
소분류
|
||||
</Badge>
|
||||
)}
|
||||
{depth > 3 && (
|
||||
<Badge variant="outline" className="bg-muted px-1.5 py-0 text-[10px]">
|
||||
{depth}단계
|
||||
</Badge>
|
||||
)}
|
||||
<Badge
|
||||
variant={code.isActive === "Y" || code.is_active === "Y" ? "default" : "secondary"}
|
||||
className={cn(
|
||||
"cursor-pointer text-xs transition-colors",
|
||||
updateCodeMutation.isPending && "cursor-not-allowed opacity-50",
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!updateCodeMutation.isPending) {
|
||||
const isActive = code.isActive === "Y" || code.is_active === "Y";
|
||||
handleToggleActive(!isActive);
|
||||
}
|
||||
}}
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
{code.isActive === "Y" || code.is_active === "Y" ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-muted-foreground mt-1 text-xs">{code.codeValue || code.code_value}</p>
|
||||
{/* 부모 코드 표시 */}
|
||||
{hasParent && (
|
||||
<p className="text-muted-foreground mt-0.5 text-[10px]">
|
||||
상위: {code.parentCodeValue || code.parent_code_value}
|
||||
</p>
|
||||
)}
|
||||
{code.description && <p className="text-muted-foreground mt-1 text-xs">{code.description}</p>}
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<div
|
||||
className="flex items-center gap-1"
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* 하위 코드 추가 버튼 (최대 깊이 미만일 때만 표시) */}
|
||||
{depth < maxDepth && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onAddChild();
|
||||
}}
|
||||
title="하위 코드 추가"
|
||||
className="text-blue-600 hover:bg-blue-50 hover:text-blue-700"
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!updateCodeMutation.isPending) {
|
||||
const isActive = code.isActive === "Y" || code.is_active === "Y";
|
||||
handleToggleActive(!isActive);
|
||||
}
|
||||
onEdit();
|
||||
}}
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
{code.isActive === "Y" || code.is_active === "Y" ? "활성" : "비활성"}
|
||||
</Badge>
|
||||
<Edit className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onDelete();
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-muted-foreground">{code.codeValue || code.code_value}</p>
|
||||
{code.description && <p className="mt-1 text-xs text-muted-foreground">{code.description}</p>}
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<div
|
||||
className="flex items-center gap-1"
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onEdit();
|
||||
}}
|
||||
>
|
||||
<Edit className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onDelete();
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -151,12 +151,16 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
|
|||
<div className="grid grid-cols-2 gap-3 md:grid-cols-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-sm text-gray-600">작업 유형</label>
|
||||
<Select value={operationType} onValueChange={setOperationType}>
|
||||
{/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__all__" 사용 */}
|
||||
<Select
|
||||
value={operationType || "__all__"}
|
||||
onValueChange={(value) => setOperationType(value === "__all__" ? "" : value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="전체" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">전체</SelectItem>
|
||||
<SelectItem value="__all__">전체</SelectItem>
|
||||
<SelectItem value="INSERT">추가</SelectItem>
|
||||
<SelectItem value="UPDATE">수정</SelectItem>
|
||||
<SelectItem value="DELETE">삭제</SelectItem>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,457 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* 계층구조 코드 선택 컴포넌트 (1단계, 2단계, 3단계 셀렉트박스)
|
||||
*
|
||||
* @example
|
||||
* // 기본 사용
|
||||
* <HierarchicalCodeSelect
|
||||
* categoryCode="PRODUCT_CATEGORY"
|
||||
* maxDepth={3}
|
||||
* value={selectedCode}
|
||||
* onChange={(code) => setSelectedCode(code)}
|
||||
* />
|
||||
*
|
||||
* @example
|
||||
* // 특정 depth까지만 선택
|
||||
* <HierarchicalCodeSelect
|
||||
* categoryCode="LOCATION"
|
||||
* maxDepth={2}
|
||||
* value={selectedCode}
|
||||
* onChange={(code) => setSelectedCode(code)}
|
||||
* />
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { commonCodeApi } from "@/lib/api/commonCode";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import type { CodeInfo } from "@/types/commonCode";
|
||||
|
||||
export interface HierarchicalCodeSelectProps {
|
||||
/** 코드 카테고리 */
|
||||
categoryCode: string;
|
||||
|
||||
/** 최대 깊이 (1, 2, 3) */
|
||||
maxDepth?: 1 | 2 | 3;
|
||||
|
||||
/** 현재 선택된 값 (최종 선택된 코드값) */
|
||||
value?: string;
|
||||
|
||||
/** 값 변경 핸들러 */
|
||||
onChange?: (codeValue: string, codeInfo?: CodeInfo, fullPath?: CodeInfo[]) => void;
|
||||
|
||||
/** 각 단계별 라벨 */
|
||||
labels?: [string, string?, string?];
|
||||
|
||||
/** 각 단계별 placeholder */
|
||||
placeholders?: [string, string?, string?];
|
||||
|
||||
/** 비활성화 */
|
||||
disabled?: boolean;
|
||||
|
||||
/** 필수 입력 */
|
||||
required?: boolean;
|
||||
|
||||
/** 메뉴 OBJID (메뉴 기반 필터링) */
|
||||
menuObjid?: number;
|
||||
|
||||
/** 추가 클래스 */
|
||||
className?: string;
|
||||
|
||||
/** 인라인 표시 (가로 배열) */
|
||||
inline?: boolean;
|
||||
}
|
||||
|
||||
interface LoadingState {
|
||||
level1: boolean;
|
||||
level2: boolean;
|
||||
level3: boolean;
|
||||
}
|
||||
|
||||
export function HierarchicalCodeSelect({
|
||||
categoryCode,
|
||||
maxDepth = 3,
|
||||
value,
|
||||
onChange,
|
||||
labels = ["1단계", "2단계", "3단계"],
|
||||
placeholders = ["선택하세요", "선택하세요", "선택하세요"],
|
||||
disabled = false,
|
||||
required = false,
|
||||
menuObjid,
|
||||
className = "",
|
||||
inline = false,
|
||||
}: HierarchicalCodeSelectProps) {
|
||||
// 각 단계별 옵션
|
||||
const [level1Options, setLevel1Options] = useState<CodeInfo[]>([]);
|
||||
const [level2Options, setLevel2Options] = useState<CodeInfo[]>([]);
|
||||
const [level3Options, setLevel3Options] = useState<CodeInfo[]>([]);
|
||||
|
||||
// 각 단계별 선택값
|
||||
const [selectedLevel1, setSelectedLevel1] = useState<string>("");
|
||||
const [selectedLevel2, setSelectedLevel2] = useState<string>("");
|
||||
const [selectedLevel3, setSelectedLevel3] = useState<string>("");
|
||||
|
||||
// 로딩 상태
|
||||
const [loading, setLoading] = useState<LoadingState>({
|
||||
level1: false,
|
||||
level2: false,
|
||||
level3: false,
|
||||
});
|
||||
|
||||
// 모든 코드 데이터 (경로 추적용)
|
||||
const [allCodes, setAllCodes] = useState<CodeInfo[]>([]);
|
||||
|
||||
// 1단계 코드 로드 (최상위)
|
||||
const loadLevel1Codes = useCallback(async () => {
|
||||
if (!categoryCode) return;
|
||||
|
||||
setLoading(prev => ({ ...prev, level1: true }));
|
||||
try {
|
||||
const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
|
||||
categoryCode,
|
||||
null, // 부모 없음 (최상위)
|
||||
1, // depth = 1
|
||||
menuObjid
|
||||
);
|
||||
|
||||
if (response.success && response.data) {
|
||||
setLevel1Options(response.data);
|
||||
setAllCodes(prev => {
|
||||
const filtered = prev.filter(c => c.depth !== 1);
|
||||
return [...filtered, ...response.data];
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("1단계 코드 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(prev => ({ ...prev, level1: false }));
|
||||
}
|
||||
}, [categoryCode, menuObjid]);
|
||||
|
||||
// 2단계 코드 로드 (1단계 선택값 기준)
|
||||
const loadLevel2Codes = useCallback(async (parentCodeValue: string) => {
|
||||
if (!categoryCode || !parentCodeValue) {
|
||||
setLevel2Options([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(prev => ({ ...prev, level2: true }));
|
||||
try {
|
||||
const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
|
||||
categoryCode,
|
||||
parentCodeValue,
|
||||
undefined,
|
||||
menuObjid
|
||||
);
|
||||
|
||||
if (response.success && response.data) {
|
||||
setLevel2Options(response.data);
|
||||
setAllCodes(prev => {
|
||||
const filtered = prev.filter(c => c.depth !== 2 || (c.parentCodeValue || c.parent_code_value) !== parentCodeValue);
|
||||
return [...filtered, ...response.data];
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("2단계 코드 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(prev => ({ ...prev, level2: false }));
|
||||
}
|
||||
}, [categoryCode, menuObjid]);
|
||||
|
||||
// 3단계 코드 로드 (2단계 선택값 기준)
|
||||
const loadLevel3Codes = useCallback(async (parentCodeValue: string) => {
|
||||
if (!categoryCode || !parentCodeValue) {
|
||||
setLevel3Options([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(prev => ({ ...prev, level3: true }));
|
||||
try {
|
||||
const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
|
||||
categoryCode,
|
||||
parentCodeValue,
|
||||
undefined,
|
||||
menuObjid
|
||||
);
|
||||
|
||||
if (response.success && response.data) {
|
||||
setLevel3Options(response.data);
|
||||
setAllCodes(prev => {
|
||||
const filtered = prev.filter(c => c.depth !== 3 || (c.parentCodeValue || c.parent_code_value) !== parentCodeValue);
|
||||
return [...filtered, ...response.data];
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("3단계 코드 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(prev => ({ ...prev, level3: false }));
|
||||
}
|
||||
}, [categoryCode, menuObjid]);
|
||||
|
||||
// 초기 로드 및 카테고리 변경 시
|
||||
useEffect(() => {
|
||||
loadLevel1Codes();
|
||||
setSelectedLevel1("");
|
||||
setSelectedLevel2("");
|
||||
setSelectedLevel3("");
|
||||
setLevel2Options([]);
|
||||
setLevel3Options([]);
|
||||
}, [loadLevel1Codes]);
|
||||
|
||||
// value prop 변경 시 역추적 (외부에서 값이 설정된 경우)
|
||||
useEffect(() => {
|
||||
if (!value || allCodes.length === 0) return;
|
||||
|
||||
// 선택된 코드 찾기
|
||||
const selectedCode = allCodes.find(c =>
|
||||
(c.codeValue || c.code_value) === value
|
||||
);
|
||||
|
||||
if (!selectedCode) return;
|
||||
|
||||
const depth = selectedCode.depth || 1;
|
||||
|
||||
if (depth === 1) {
|
||||
setSelectedLevel1(value);
|
||||
setSelectedLevel2("");
|
||||
setSelectedLevel3("");
|
||||
} else if (depth === 2) {
|
||||
const parentValue = selectedCode.parentCodeValue || selectedCode.parent_code_value || "";
|
||||
setSelectedLevel1(parentValue);
|
||||
setSelectedLevel2(value);
|
||||
setSelectedLevel3("");
|
||||
loadLevel2Codes(parentValue);
|
||||
} else if (depth === 3) {
|
||||
const parentValue = selectedCode.parentCodeValue || selectedCode.parent_code_value || "";
|
||||
|
||||
// 2단계 부모 찾기
|
||||
const level2Code = allCodes.find(c => (c.codeValue || c.code_value) === parentValue);
|
||||
const level1Value = level2Code?.parentCodeValue || level2Code?.parent_code_value || "";
|
||||
|
||||
setSelectedLevel1(level1Value);
|
||||
setSelectedLevel2(parentValue);
|
||||
setSelectedLevel3(value);
|
||||
|
||||
loadLevel2Codes(level1Value);
|
||||
loadLevel3Codes(parentValue);
|
||||
}
|
||||
}, [value, allCodes]);
|
||||
|
||||
// 1단계 선택 변경
|
||||
const handleLevel1Change = (codeValue: string) => {
|
||||
setSelectedLevel1(codeValue);
|
||||
setSelectedLevel2("");
|
||||
setSelectedLevel3("");
|
||||
setLevel2Options([]);
|
||||
setLevel3Options([]);
|
||||
|
||||
if (codeValue && maxDepth > 1) {
|
||||
loadLevel2Codes(codeValue);
|
||||
}
|
||||
|
||||
// 최대 깊이가 1이면 즉시 onChange 호출
|
||||
if (maxDepth === 1 && onChange) {
|
||||
const selectedCodeInfo = level1Options.find(c => (c.codeValue || c.code_value) === codeValue);
|
||||
onChange(codeValue, selectedCodeInfo, selectedCodeInfo ? [selectedCodeInfo] : []);
|
||||
}
|
||||
};
|
||||
|
||||
// 2단계 선택 변경
|
||||
const handleLevel2Change = (codeValue: string) => {
|
||||
setSelectedLevel2(codeValue);
|
||||
setSelectedLevel3("");
|
||||
setLevel3Options([]);
|
||||
|
||||
if (codeValue && maxDepth > 2) {
|
||||
loadLevel3Codes(codeValue);
|
||||
}
|
||||
|
||||
// 최대 깊이가 2이면 onChange 호출
|
||||
if (maxDepth === 2 && onChange) {
|
||||
const level1Code = level1Options.find(c => (c.codeValue || c.code_value) === selectedLevel1);
|
||||
const level2Code = level2Options.find(c => (c.codeValue || c.code_value) === codeValue);
|
||||
const fullPath = [level1Code, level2Code].filter(Boolean) as CodeInfo[];
|
||||
onChange(codeValue, level2Code, fullPath);
|
||||
}
|
||||
};
|
||||
|
||||
// 3단계 선택 변경
|
||||
const handleLevel3Change = (codeValue: string) => {
|
||||
setSelectedLevel3(codeValue);
|
||||
|
||||
if (onChange) {
|
||||
const level1Code = level1Options.find(c => (c.codeValue || c.code_value) === selectedLevel1);
|
||||
const level2Code = level2Options.find(c => (c.codeValue || c.code_value) === selectedLevel2);
|
||||
const level3Code = level3Options.find(c => (c.codeValue || c.code_value) === codeValue);
|
||||
const fullPath = [level1Code, level2Code, level3Code].filter(Boolean) as CodeInfo[];
|
||||
onChange(codeValue, level3Code, fullPath);
|
||||
}
|
||||
};
|
||||
|
||||
// 최종 선택값 계산
|
||||
const finalValue = useMemo(() => {
|
||||
if (maxDepth >= 3 && selectedLevel3) return selectedLevel3;
|
||||
if (maxDepth >= 2 && selectedLevel2) return selectedLevel2;
|
||||
if (selectedLevel1) return selectedLevel1;
|
||||
return "";
|
||||
}, [maxDepth, selectedLevel1, selectedLevel2, selectedLevel3]);
|
||||
|
||||
// 최종 선택값이 변경되면 onChange 호출 (maxDepth 제한 없이)
|
||||
useEffect(() => {
|
||||
if (!onChange) return;
|
||||
|
||||
// 현재 선택된 깊이 확인
|
||||
if (selectedLevel3 && maxDepth >= 3) {
|
||||
// 3단계까지 선택됨
|
||||
return; // handleLevel3Change에서 처리
|
||||
}
|
||||
if (selectedLevel2 && maxDepth >= 2 && !selectedLevel3 && level3Options.length === 0) {
|
||||
// 2단계까지 선택되고 3단계 옵션이 없음
|
||||
const level1Code = level1Options.find(c => (c.codeValue || c.code_value) === selectedLevel1);
|
||||
const level2Code = level2Options.find(c => (c.codeValue || c.code_value) === selectedLevel2);
|
||||
const fullPath = [level1Code, level2Code].filter(Boolean) as CodeInfo[];
|
||||
onChange(selectedLevel2, level2Code, fullPath);
|
||||
} else if (selectedLevel1 && maxDepth >= 1 && !selectedLevel2 && level2Options.length === 0) {
|
||||
// 1단계까지 선택되고 2단계 옵션이 없음
|
||||
const level1Code = level1Options.find(c => (c.codeValue || c.code_value) === selectedLevel1);
|
||||
onChange(selectedLevel1, level1Code, level1Code ? [level1Code] : []);
|
||||
}
|
||||
}, [level2Options, level3Options]);
|
||||
|
||||
const containerClass = inline
|
||||
? "flex flex-wrap gap-4 items-end"
|
||||
: "space-y-4";
|
||||
|
||||
const selectItemClass = inline
|
||||
? "flex-1 min-w-[150px] space-y-1"
|
||||
: "space-y-1";
|
||||
|
||||
return (
|
||||
<div className={`${containerClass} ${className}`}>
|
||||
{/* 1단계 선택 */}
|
||||
<div className={selectItemClass}>
|
||||
<Label className="text-xs font-medium">
|
||||
{labels[0]}
|
||||
{required && <span className="ml-1 text-destructive">*</span>}
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedLevel1}
|
||||
onValueChange={handleLevel1Change}
|
||||
disabled={disabled || loading.level1}
|
||||
>
|
||||
<SelectTrigger className="h-9 text-sm">
|
||||
{loading.level1 ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
<span className="text-muted-foreground">로딩 중...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder={placeholders[0]} />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{level1Options.map((code) => {
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
const codeName = code.codeName || code.code_name || "";
|
||||
return (
|
||||
<SelectItem key={codeValue} value={codeValue}>
|
||||
{codeName}
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 2단계 선택 */}
|
||||
{maxDepth >= 2 && (
|
||||
<div className={selectItemClass}>
|
||||
<Label className="text-xs font-medium">
|
||||
{labels[1] || "2단계"}
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedLevel2}
|
||||
onValueChange={handleLevel2Change}
|
||||
disabled={disabled || loading.level2 || !selectedLevel1}
|
||||
>
|
||||
<SelectTrigger className="h-9 text-sm">
|
||||
{loading.level2 ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
<span className="text-muted-foreground">로딩 중...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder={selectedLevel1 ? (placeholders[1] || "선택하세요") : "1단계를 먼저 선택하세요"} />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{level2Options.length === 0 && selectedLevel1 && !loading.level2 ? (
|
||||
<div className="px-2 py-1.5 text-sm text-muted-foreground">
|
||||
하위 항목이 없습니다
|
||||
</div>
|
||||
) : (
|
||||
level2Options.map((code) => {
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
const codeName = code.codeName || code.code_name || "";
|
||||
return (
|
||||
<SelectItem key={codeValue} value={codeValue}>
|
||||
{codeName}
|
||||
</SelectItem>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 3단계 선택 */}
|
||||
{maxDepth >= 3 && (
|
||||
<div className={selectItemClass}>
|
||||
<Label className="text-xs font-medium">
|
||||
{labels[2] || "3단계"}
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedLevel3}
|
||||
onValueChange={handleLevel3Change}
|
||||
disabled={disabled || loading.level3 || !selectedLevel2}
|
||||
>
|
||||
<SelectTrigger className="h-9 text-sm">
|
||||
{loading.level3 ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
<span className="text-muted-foreground">로딩 중...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder={selectedLevel2 ? (placeholders[2] || "선택하세요") : "2단계를 먼저 선택하세요"} />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{level3Options.length === 0 && selectedLevel2 && !loading.level3 ? (
|
||||
<div className="px-2 py-1.5 text-sm text-muted-foreground">
|
||||
하위 항목이 없습니다
|
||||
</div>
|
||||
) : (
|
||||
level3Options.map((code) => {
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
const codeName = code.codeName || code.code_name || "";
|
||||
return (
|
||||
<SelectItem key={codeValue} value={codeValue}>
|
||||
{codeName}
|
||||
</SelectItem>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HierarchicalCodeSelect;
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,389 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* 멀티 컬럼 계층구조 선택 컴포넌트
|
||||
*
|
||||
* 대분류, 중분류, 소분류를 각각 다른 컬럼에 저장하는 계층구조 선택 컴포넌트
|
||||
*
|
||||
* @example
|
||||
* <MultiColumnHierarchySelect
|
||||
* categoryCode="PRODUCT_CATEGORY"
|
||||
* columns={{
|
||||
* large: { columnName: "category_large", label: "대분류" },
|
||||
* medium: { columnName: "category_medium", label: "중분류" },
|
||||
* small: { columnName: "category_small", label: "소분류" },
|
||||
* }}
|
||||
* values={{
|
||||
* large: formData.category_large,
|
||||
* medium: formData.category_medium,
|
||||
* small: formData.category_small,
|
||||
* }}
|
||||
* onChange={(role, columnName, value) => {
|
||||
* setFormData(prev => ({ ...prev, [columnName]: value }));
|
||||
* }}
|
||||
* />
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { commonCodeApi } from "@/lib/api/commonCode";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import type { CodeInfo } from "@/types/commonCode";
|
||||
|
||||
export type HierarchyRole = "large" | "medium" | "small";
|
||||
|
||||
export interface HierarchyColumnConfig {
|
||||
columnName: string;
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export interface MultiColumnHierarchySelectProps {
|
||||
/** 코드 카테고리 */
|
||||
categoryCode: string;
|
||||
|
||||
/** 각 계층별 컬럼 설정 */
|
||||
columns: {
|
||||
large?: HierarchyColumnConfig;
|
||||
medium?: HierarchyColumnConfig;
|
||||
small?: HierarchyColumnConfig;
|
||||
};
|
||||
|
||||
/** 현재 값들 */
|
||||
values?: {
|
||||
large?: string;
|
||||
medium?: string;
|
||||
small?: string;
|
||||
};
|
||||
|
||||
/** 값 변경 핸들러 (역할, 컬럼명, 값) */
|
||||
onChange?: (role: HierarchyRole, columnName: string, value: string) => void;
|
||||
|
||||
/** 비활성화 */
|
||||
disabled?: boolean;
|
||||
|
||||
/** 메뉴 OBJID */
|
||||
menuObjid?: number;
|
||||
|
||||
/** 추가 클래스 */
|
||||
className?: string;
|
||||
|
||||
/** 인라인 표시 (가로 배열) */
|
||||
inline?: boolean;
|
||||
}
|
||||
|
||||
interface LoadingState {
|
||||
large: boolean;
|
||||
medium: boolean;
|
||||
small: boolean;
|
||||
}
|
||||
|
||||
export function MultiColumnHierarchySelect({
|
||||
categoryCode,
|
||||
columns,
|
||||
values = {},
|
||||
onChange,
|
||||
disabled = false,
|
||||
menuObjid,
|
||||
className = "",
|
||||
inline = false,
|
||||
}: MultiColumnHierarchySelectProps) {
|
||||
// 각 단계별 옵션
|
||||
const [largeOptions, setLargeOptions] = useState<CodeInfo[]>([]);
|
||||
const [mediumOptions, setMediumOptions] = useState<CodeInfo[]>([]);
|
||||
const [smallOptions, setSmallOptions] = useState<CodeInfo[]>([]);
|
||||
|
||||
// 로딩 상태
|
||||
const [loading, setLoading] = useState<LoadingState>({
|
||||
large: false,
|
||||
medium: false,
|
||||
small: false,
|
||||
});
|
||||
|
||||
// 대분류 로드 (depth = 1)
|
||||
const loadLargeOptions = useCallback(async () => {
|
||||
if (!categoryCode) return;
|
||||
|
||||
setLoading(prev => ({ ...prev, large: true }));
|
||||
try {
|
||||
const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
|
||||
categoryCode,
|
||||
null, // 부모 없음
|
||||
1, // depth = 1
|
||||
menuObjid
|
||||
);
|
||||
|
||||
if (response.success && response.data) {
|
||||
setLargeOptions(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("대분류 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(prev => ({ ...prev, large: false }));
|
||||
}
|
||||
}, [categoryCode, menuObjid]);
|
||||
|
||||
// 중분류 로드 (대분류 선택 기준)
|
||||
const loadMediumOptions = useCallback(async (parentCodeValue: string) => {
|
||||
if (!categoryCode || !parentCodeValue) {
|
||||
setMediumOptions([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(prev => ({ ...prev, medium: true }));
|
||||
try {
|
||||
const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
|
||||
categoryCode,
|
||||
parentCodeValue,
|
||||
undefined,
|
||||
menuObjid
|
||||
);
|
||||
|
||||
if (response.success && response.data) {
|
||||
setMediumOptions(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("중분류 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(prev => ({ ...prev, medium: false }));
|
||||
}
|
||||
}, [categoryCode, menuObjid]);
|
||||
|
||||
// 소분류 로드 (중분류 선택 기준)
|
||||
const loadSmallOptions = useCallback(async (parentCodeValue: string) => {
|
||||
if (!categoryCode || !parentCodeValue) {
|
||||
setSmallOptions([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(prev => ({ ...prev, small: true }));
|
||||
try {
|
||||
const response = await commonCodeApi.hierarchy.getHierarchicalCodes(
|
||||
categoryCode,
|
||||
parentCodeValue,
|
||||
undefined,
|
||||
menuObjid
|
||||
);
|
||||
|
||||
if (response.success && response.data) {
|
||||
setSmallOptions(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("소분류 로드 실패:", error);
|
||||
} finally {
|
||||
setLoading(prev => ({ ...prev, small: false }));
|
||||
}
|
||||
}, [categoryCode, menuObjid]);
|
||||
|
||||
// 초기 로드
|
||||
useEffect(() => {
|
||||
loadLargeOptions();
|
||||
}, [loadLargeOptions]);
|
||||
|
||||
// 대분류 값이 있으면 중분류 로드
|
||||
useEffect(() => {
|
||||
if (values.large) {
|
||||
loadMediumOptions(values.large);
|
||||
} else {
|
||||
setMediumOptions([]);
|
||||
setSmallOptions([]);
|
||||
}
|
||||
}, [values.large, loadMediumOptions]);
|
||||
|
||||
// 중분류 값이 있으면 소분류 로드
|
||||
useEffect(() => {
|
||||
if (values.medium) {
|
||||
loadSmallOptions(values.medium);
|
||||
} else {
|
||||
setSmallOptions([]);
|
||||
}
|
||||
}, [values.medium, loadSmallOptions]);
|
||||
|
||||
// 대분류 변경
|
||||
const handleLargeChange = (codeValue: string) => {
|
||||
const columnName = columns.large?.columnName || "";
|
||||
if (onChange && columnName) {
|
||||
onChange("large", columnName, codeValue);
|
||||
}
|
||||
|
||||
// 하위 값 초기화
|
||||
if (columns.medium?.columnName && onChange) {
|
||||
onChange("medium", columns.medium.columnName, "");
|
||||
}
|
||||
if (columns.small?.columnName && onChange) {
|
||||
onChange("small", columns.small.columnName, "");
|
||||
}
|
||||
};
|
||||
|
||||
// 중분류 변경
|
||||
const handleMediumChange = (codeValue: string) => {
|
||||
const columnName = columns.medium?.columnName || "";
|
||||
if (onChange && columnName) {
|
||||
onChange("medium", columnName, codeValue);
|
||||
}
|
||||
|
||||
// 하위 값 초기화
|
||||
if (columns.small?.columnName && onChange) {
|
||||
onChange("small", columns.small.columnName, "");
|
||||
}
|
||||
};
|
||||
|
||||
// 소분류 변경
|
||||
const handleSmallChange = (codeValue: string) => {
|
||||
const columnName = columns.small?.columnName || "";
|
||||
if (onChange && columnName) {
|
||||
onChange("small", columnName, codeValue);
|
||||
}
|
||||
};
|
||||
|
||||
const containerClass = inline
|
||||
? "flex flex-wrap gap-4 items-end"
|
||||
: "space-y-4";
|
||||
|
||||
const selectItemClass = inline
|
||||
? "flex-1 min-w-[150px] space-y-1"
|
||||
: "space-y-1";
|
||||
|
||||
// 설정된 컬럼만 렌더링
|
||||
const hasLarge = !!columns.large;
|
||||
const hasMedium = !!columns.medium;
|
||||
const hasSmall = !!columns.small;
|
||||
|
||||
return (
|
||||
<div className={`${containerClass} ${className}`}>
|
||||
{/* 대분류 */}
|
||||
{hasLarge && (
|
||||
<div className={selectItemClass}>
|
||||
<Label className="text-xs font-medium">
|
||||
{columns.large?.label || "대분류"}
|
||||
</Label>
|
||||
<Select
|
||||
value={values.large || ""}
|
||||
onValueChange={handleLargeChange}
|
||||
disabled={disabled || loading.large}
|
||||
>
|
||||
<SelectTrigger className="h-9 text-sm">
|
||||
{loading.large ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
<span className="text-muted-foreground">로딩 중...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder={columns.large?.placeholder || "대분류 선택"} />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{largeOptions.map((code) => {
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
const codeName = code.codeName || code.code_name || "";
|
||||
return (
|
||||
<SelectItem key={codeValue} value={codeValue}>
|
||||
{codeName}
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 중분류 */}
|
||||
{hasMedium && (
|
||||
<div className={selectItemClass}>
|
||||
<Label className="text-xs font-medium">
|
||||
{columns.medium?.label || "중분류"}
|
||||
</Label>
|
||||
<Select
|
||||
value={values.medium || ""}
|
||||
onValueChange={handleMediumChange}
|
||||
disabled={disabled || loading.medium || !values.large}
|
||||
>
|
||||
<SelectTrigger className="h-9 text-sm">
|
||||
{loading.medium ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
<span className="text-muted-foreground">로딩 중...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue
|
||||
placeholder={values.large
|
||||
? (columns.medium?.placeholder || "중분류 선택")
|
||||
: "대분류를 먼저 선택하세요"
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{mediumOptions.length === 0 && values.large && !loading.medium ? (
|
||||
<div className="px-2 py-1.5 text-sm text-muted-foreground">
|
||||
하위 항목이 없습니다
|
||||
</div>
|
||||
) : (
|
||||
mediumOptions.map((code) => {
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
const codeName = code.codeName || code.code_name || "";
|
||||
return (
|
||||
<SelectItem key={codeValue} value={codeValue}>
|
||||
{codeName}
|
||||
</SelectItem>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 소분류 */}
|
||||
{hasSmall && (
|
||||
<div className={selectItemClass}>
|
||||
<Label className="text-xs font-medium">
|
||||
{columns.small?.label || "소분류"}
|
||||
</Label>
|
||||
<Select
|
||||
value={values.small || ""}
|
||||
onValueChange={handleSmallChange}
|
||||
disabled={disabled || loading.small || !values.medium}
|
||||
>
|
||||
<SelectTrigger className="h-9 text-sm">
|
||||
{loading.small ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
<span className="text-muted-foreground">로딩 중...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue
|
||||
placeholder={values.medium
|
||||
? (columns.small?.placeholder || "소분류 선택")
|
||||
: "중분류를 먼저 선택하세요"
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{smallOptions.length === 0 && values.medium && !loading.small ? (
|
||||
<div className="px-2 py-1.5 text-sm text-muted-foreground">
|
||||
하위 항목이 없습니다
|
||||
</div>
|
||||
) : (
|
||||
smallOptions.map((code) => {
|
||||
const codeValue = code.codeValue || code.code_value || "";
|
||||
const codeName = code.codeName || code.code_name || "";
|
||||
return (
|
||||
<SelectItem key={codeValue} value={codeValue}>
|
||||
{codeName}
|
||||
</SelectItem>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MultiColumnHierarchySelect;
|
||||
|
||||
|
|
@ -236,12 +236,13 @@ export const DataMappingSettings: React.FC<DataMappingSettingsProps> = ({
|
|||
<SelectValue placeholder={tablesLoading ? "테이블 목록 로딩 중..." : "저장할 테이블을 선택하세요"} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__placeholder__" 사용 */}
|
||||
{tablesLoading ? (
|
||||
<SelectItem value="" disabled>
|
||||
<SelectItem value="__placeholder__" disabled>
|
||||
테이블 목록 로딩 중...
|
||||
</SelectItem>
|
||||
) : availableTables.length === 0 ? (
|
||||
<SelectItem value="" disabled>
|
||||
<SelectItem value="__placeholder__" disabled>
|
||||
사용 가능한 테이블이 없습니다
|
||||
</SelectItem>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -1173,7 +1173,8 @@ export function FlowStepPanel({
|
|||
기본 REST API 연결
|
||||
</SelectItem>
|
||||
) : (
|
||||
<SelectItem value="" disabled>
|
||||
// Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__placeholder__" 사용
|
||||
<SelectItem value="__placeholder__" disabled>
|
||||
연결된 REST API가 없습니다
|
||||
</SelectItem>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -357,11 +357,11 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
height: snappedSize,
|
||||
});
|
||||
} else {
|
||||
// Grid Snap 적용
|
||||
updateComponent(component.id, {
|
||||
width: snapValueToGrid(boundedWidth),
|
||||
height: snapValueToGrid(boundedHeight),
|
||||
});
|
||||
// Grid Snap 적용
|
||||
updateComponent(component.id, {
|
||||
width: snapValueToGrid(boundedWidth),
|
||||
height: snapValueToGrid(boundedHeight),
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -444,17 +444,17 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
case "text":
|
||||
case "label":
|
||||
return (
|
||||
<div
|
||||
<div
|
||||
className="h-full w-full"
|
||||
style={{
|
||||
fontSize: `${component.fontSize}px`,
|
||||
color: component.fontColor,
|
||||
fontWeight: component.fontWeight,
|
||||
textAlign: component.textAlign as "left" | "center" | "right",
|
||||
whiteSpace: "pre-wrap",
|
||||
}}
|
||||
>
|
||||
{displayValue}
|
||||
style={{
|
||||
fontSize: `${component.fontSize}px`,
|
||||
color: component.fontColor,
|
||||
fontWeight: component.fontWeight,
|
||||
textAlign: component.textAlign as "left" | "center" | "right",
|
||||
whiteSpace: "pre-wrap",
|
||||
}}
|
||||
>
|
||||
{displayValue}
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -534,7 +534,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
// 기본 테이블 (데이터 없을 때)
|
||||
return (
|
||||
<div className="flex h-full w-full items-center justify-center border-2 border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
|
||||
쿼리를 연결하세요
|
||||
쿼리를 연결하세요
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -606,7 +606,6 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
const sigLabelPos = component.labelPosition || "left";
|
||||
const sigShowLabel = component.showLabel !== false;
|
||||
const sigLabelText = component.labelText || "서명:";
|
||||
const sigShowUnderline = component.showUnderline !== false;
|
||||
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
|
|
@ -653,14 +652,6 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
서명 이미지
|
||||
</div>
|
||||
)}
|
||||
{sigShowUnderline && (
|
||||
<div
|
||||
className="absolute right-0 bottom-0 left-0"
|
||||
style={{
|
||||
borderBottom: "2px solid #000000",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -867,12 +858,12 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
// 계산 결과 (첫 번째 항목은 기준값, 두 번째부터 연산자 적용)
|
||||
const calculateResult = (): number => {
|
||||
if (calcItems.length === 0) return 0;
|
||||
|
||||
|
||||
// 첫 번째 항목은 기준값
|
||||
let result = getCalcItemValue(
|
||||
calcItems[0] as { label: string; value: number | string; operator: string; fieldName?: string },
|
||||
);
|
||||
|
||||
|
||||
// 두 번째 항목부터 연산자 적용
|
||||
for (let i = 1; i < calcItems.length; i++) {
|
||||
const item = calcItems[i];
|
||||
|
|
@ -908,30 +899,30 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
item: { label: string; value: number | string; operator: string; fieldName?: string },
|
||||
index: number,
|
||||
) => {
|
||||
const itemValue = getCalcItemValue(item);
|
||||
return (
|
||||
<div key={index} className="flex items-center justify-between py-1">
|
||||
<span
|
||||
className="flex-shrink-0"
|
||||
style={{
|
||||
width: `${calcLabelWidth}px`,
|
||||
fontSize: `${calcLabelFontSize}px`,
|
||||
color: calcLabelColor,
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
<span
|
||||
className="text-right"
|
||||
style={{
|
||||
fontSize: `${calcValueFontSize}px`,
|
||||
color: calcValueColor,
|
||||
}}
|
||||
>
|
||||
{formatNumber(itemValue)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
const itemValue = getCalcItemValue(item);
|
||||
return (
|
||||
<div key={index} className="flex items-center justify-between py-1">
|
||||
<span
|
||||
className="flex-shrink-0"
|
||||
style={{
|
||||
width: `${calcLabelWidth}px`,
|
||||
fontSize: `${calcLabelFontSize}px`,
|
||||
color: calcLabelColor,
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
<span
|
||||
className="text-right"
|
||||
style={{
|
||||
fontSize: `${calcValueFontSize}px`,
|
||||
color: calcValueColor,
|
||||
}}
|
||||
>
|
||||
{formatNumber(itemValue)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,320 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Loader2, Search, ChevronRight, ChevronDown, FolderOpen, FileText } from "lucide-react";
|
||||
import { menuApi } from "@/lib/api/menu";
|
||||
import { MenuItem } from "@/types/menu";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface MenuSelectModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: (menuObjids: number[]) => void;
|
||||
selectedMenuObjids?: number[];
|
||||
}
|
||||
|
||||
// 트리 구조의 메뉴 노드
|
||||
interface MenuTreeNode {
|
||||
objid: string;
|
||||
menuNameKor: string;
|
||||
menuUrl: string;
|
||||
level: number;
|
||||
children: MenuTreeNode[];
|
||||
parentObjId: string;
|
||||
}
|
||||
|
||||
export function MenuSelectModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onConfirm,
|
||||
selectedMenuObjids = [],
|
||||
}: MenuSelectModalProps) {
|
||||
const [menus, setMenus] = useState<MenuItem[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set(selectedMenuObjids));
|
||||
const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
|
||||
|
||||
// 초기 선택 상태 동기화
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setSelectedIds(new Set(selectedMenuObjids));
|
||||
}
|
||||
}, [isOpen, selectedMenuObjids]);
|
||||
|
||||
// 메뉴 목록 로드
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
fetchMenus();
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const fetchMenus = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const response = await menuApi.getUserMenus();
|
||||
if (response.success && response.data) {
|
||||
setMenus(response.data);
|
||||
// 처음 2레벨까지 자동 확장
|
||||
const initialExpanded = new Set<string>();
|
||||
response.data.forEach((menu) => {
|
||||
const level = menu.lev || menu.LEV || 1;
|
||||
if (level <= 2) {
|
||||
initialExpanded.add(menu.objid || menu.OBJID || "");
|
||||
}
|
||||
});
|
||||
setExpandedIds(initialExpanded);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("메뉴 로드 오류:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 메뉴 트리 구조 생성
|
||||
const menuTree = useMemo(() => {
|
||||
const menuMap = new Map<string, MenuTreeNode>();
|
||||
const rootMenus: MenuTreeNode[] = [];
|
||||
|
||||
// 모든 메뉴를 노드로 변환
|
||||
menus.forEach((menu) => {
|
||||
const objid = menu.objid || menu.OBJID || "";
|
||||
const parentObjId = menu.parentObjId || menu.PARENT_OBJ_ID || "";
|
||||
const menuNameKor = menu.menuNameKor || menu.MENU_NAME_KOR || menu.translated_name || menu.TRANSLATED_NAME || "";
|
||||
const menuUrl = menu.menuUrl || menu.MENU_URL || "";
|
||||
const level = menu.lev || menu.LEV || 1;
|
||||
|
||||
menuMap.set(objid, {
|
||||
objid,
|
||||
menuNameKor,
|
||||
menuUrl,
|
||||
level,
|
||||
children: [],
|
||||
parentObjId,
|
||||
});
|
||||
});
|
||||
|
||||
// 부모-자식 관계 설정
|
||||
menus.forEach((menu) => {
|
||||
const objid = menu.objid || menu.OBJID || "";
|
||||
const parentObjId = menu.parentObjId || menu.PARENT_OBJ_ID || "";
|
||||
const node = menuMap.get(objid);
|
||||
|
||||
if (!node) return;
|
||||
|
||||
// 최상위 메뉴인지 확인 (parent가 없거나, 특정 루트 ID)
|
||||
const parent = menuMap.get(parentObjId);
|
||||
if (parent) {
|
||||
parent.children.push(node);
|
||||
} else {
|
||||
rootMenus.push(node);
|
||||
}
|
||||
});
|
||||
|
||||
// 자식 메뉴 정렬
|
||||
const sortChildren = (nodes: MenuTreeNode[]) => {
|
||||
nodes.sort((a, b) => a.menuNameKor.localeCompare(b.menuNameKor, "ko"));
|
||||
nodes.forEach((node) => sortChildren(node.children));
|
||||
};
|
||||
sortChildren(rootMenus);
|
||||
|
||||
return rootMenus;
|
||||
}, [menus]);
|
||||
|
||||
// 검색 필터링
|
||||
const filteredTree = useMemo(() => {
|
||||
if (!searchText.trim()) return menuTree;
|
||||
|
||||
const searchLower = searchText.toLowerCase();
|
||||
|
||||
// 검색어에 맞는 노드와 그 조상 노드를 포함
|
||||
const filterNodes = (nodes: MenuTreeNode[]): MenuTreeNode[] => {
|
||||
return nodes
|
||||
.map((node) => {
|
||||
const filteredChildren = filterNodes(node.children);
|
||||
const matches = node.menuNameKor.toLowerCase().includes(searchLower);
|
||||
|
||||
if (matches || filteredChildren.length > 0) {
|
||||
return {
|
||||
...node,
|
||||
children: filteredChildren,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter((node): node is MenuTreeNode => node !== null);
|
||||
};
|
||||
|
||||
return filterNodes(menuTree);
|
||||
}, [menuTree, searchText]);
|
||||
|
||||
// 체크박스 토글
|
||||
const toggleSelect = useCallback((objid: string) => {
|
||||
const numericId = Number(objid);
|
||||
setSelectedIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(numericId)) {
|
||||
next.delete(numericId);
|
||||
} else {
|
||||
next.add(numericId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 확장/축소 토글
|
||||
const toggleExpand = useCallback((objid: string) => {
|
||||
setExpandedIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(objid)) {
|
||||
next.delete(objid);
|
||||
} else {
|
||||
next.add(objid);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 확인 버튼 클릭
|
||||
const handleConfirm = () => {
|
||||
onConfirm(Array.from(selectedIds));
|
||||
onClose();
|
||||
};
|
||||
|
||||
// 메뉴 노드 렌더링
|
||||
const renderMenuNode = (node: MenuTreeNode, depth: number = 0) => {
|
||||
const hasChildren = node.children.length > 0;
|
||||
const isExpanded = expandedIds.has(node.objid);
|
||||
const isSelected = selectedIds.has(Number(node.objid));
|
||||
|
||||
return (
|
||||
<div key={node.objid}>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-muted/50 cursor-pointer",
|
||||
isSelected && "bg-primary/10",
|
||||
)}
|
||||
style={{ paddingLeft: `${depth * 20 + 8}px` }}
|
||||
onClick={() => toggleSelect(node.objid)}
|
||||
>
|
||||
{/* 확장/축소 버튼 */}
|
||||
{hasChildren ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleExpand(node.objid);
|
||||
}}
|
||||
className="p-0.5 hover:bg-muted rounded"
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<div className="w-5" />
|
||||
)}
|
||||
|
||||
{/* 체크박스 - 모든 메뉴에서 선택 가능 */}
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onCheckedChange={() => toggleSelect(node.objid)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
|
||||
{/* 아이콘 */}
|
||||
{hasChildren ? (
|
||||
<FolderOpen className="h-4 w-4 text-amber-500" />
|
||||
) : (
|
||||
<FileText className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
|
||||
{/* 메뉴명 */}
|
||||
<span
|
||||
className={cn(
|
||||
"text-sm flex-1 truncate",
|
||||
isSelected && "font-medium text-primary",
|
||||
)}
|
||||
>
|
||||
{node.menuNameKor}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 자식 메뉴 */}
|
||||
{hasChildren && isExpanded && (
|
||||
<div>{node.children.map((child) => renderMenuNode(child, depth + 1))}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-[600px] max-h-[80vh] flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>사용 메뉴 선택</DialogTitle>
|
||||
<DialogDescription>
|
||||
이 리포트를 사용할 메뉴를 선택하세요. 선택한 메뉴에서 이 리포트를 사용할 수 있습니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{/* 검색 */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="메뉴 검색..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 선택된 메뉴 수 */}
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{selectedIds.size}개 메뉴 선택됨
|
||||
</div>
|
||||
|
||||
{/* 메뉴 트리 */}
|
||||
<ScrollArea className="flex-1 border rounded-md">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
<span className="ml-2 text-sm text-muted-foreground">메뉴 로드 중...</span>
|
||||
</div>
|
||||
) : filteredTree.length === 0 ? (
|
||||
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
|
||||
{searchText ? "검색 결과가 없습니다." : "표시할 메뉴가 없습니다."}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-2">{filteredTree.map((node) => renderMenuNode(node))}</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onClose}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleConfirm}>
|
||||
확인 ({selectedIds.size}개 선택)
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -319,7 +319,6 @@ export function ReportDesignerCanvas() {
|
|||
showLabel: true,
|
||||
labelText: "서명:",
|
||||
labelPosition: "left" as const,
|
||||
showUnderline: true,
|
||||
borderWidth: 0,
|
||||
borderColor: "#cccccc",
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -947,26 +947,6 @@ export function ReportDesignerRightPanel() {
|
|||
</>
|
||||
)}
|
||||
|
||||
{/* 밑줄 표시 (서명란만) */}
|
||||
{selectedComponent.type === "signature" && (
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="showUnderline"
|
||||
checked={selectedComponent.showUnderline !== false}
|
||||
onChange={(e) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
showUnderline: e.target.checked,
|
||||
})
|
||||
}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<Label htmlFor="showUnderline" className="text-xs">
|
||||
밑줄 표시
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 이름 입력 (도장란만) */}
|
||||
{selectedComponent.type === "stamp" && (
|
||||
<div>
|
||||
|
|
@ -2502,10 +2482,11 @@ export function ReportDesignerRightPanel() {
|
|||
<Label className="text-xs">너비 (mm)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
value={currentPage.width}
|
||||
onChange={(e) =>
|
||||
updatePageSettings(currentPageId, {
|
||||
width: Number(e.target.value),
|
||||
width: Math.max(1, Number(e.target.value)),
|
||||
})
|
||||
}
|
||||
className="mt-1"
|
||||
|
|
@ -2515,10 +2496,11 @@ export function ReportDesignerRightPanel() {
|
|||
<Label className="text-xs">높이 (mm)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
value={currentPage.height}
|
||||
onChange={(e) =>
|
||||
updatePageSettings(currentPageId, {
|
||||
height: Number(e.target.value),
|
||||
height: Math.max(1, Number(e.target.value)),
|
||||
})
|
||||
}
|
||||
className="mt-1"
|
||||
|
|
@ -2589,12 +2571,13 @@ export function ReportDesignerRightPanel() {
|
|||
<Label className="text-xs">상단</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
value={currentPage.margins.top}
|
||||
onChange={(e) =>
|
||||
updatePageSettings(currentPageId, {
|
||||
margins: {
|
||||
...currentPage.margins,
|
||||
top: Number(e.target.value),
|
||||
top: Math.max(0, Number(e.target.value)),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -2605,12 +2588,13 @@ export function ReportDesignerRightPanel() {
|
|||
<Label className="text-xs">하단</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
value={currentPage.margins.bottom}
|
||||
onChange={(e) =>
|
||||
updatePageSettings(currentPageId, {
|
||||
margins: {
|
||||
...currentPage.margins,
|
||||
bottom: Number(e.target.value),
|
||||
bottom: Math.max(0, Number(e.target.value)),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -2621,12 +2605,13 @@ export function ReportDesignerRightPanel() {
|
|||
<Label className="text-xs">좌측</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
value={currentPage.margins.left}
|
||||
onChange={(e) =>
|
||||
updatePageSettings(currentPageId, {
|
||||
margins: {
|
||||
...currentPage.margins,
|
||||
left: Number(e.target.value),
|
||||
left: Math.max(0, Number(e.target.value)),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -2637,12 +2622,13 @@ export function ReportDesignerRightPanel() {
|
|||
<Label className="text-xs">우측</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
value={currentPage.margins.right}
|
||||
onChange={(e) =>
|
||||
updatePageSettings(currentPageId, {
|
||||
margins: {
|
||||
...currentPage.margins,
|
||||
right: Number(e.target.value),
|
||||
right: Math.max(0, Number(e.target.value)),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,8 +42,19 @@ import {
|
|||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
|
||||
import { SaveAsTemplateModal } from "./SaveAsTemplateModal";
|
||||
import { MenuSelectModal } from "./MenuSelectModal";
|
||||
import { reportApi } from "@/lib/api/reportApi";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { ReportPreviewModal } from "./ReportPreviewModal";
|
||||
|
|
@ -52,7 +63,7 @@ export function ReportDesignerToolbar() {
|
|||
const router = useRouter();
|
||||
const {
|
||||
reportDetail,
|
||||
saveLayout,
|
||||
saveLayoutWithMenus,
|
||||
isSaving,
|
||||
loadLayout,
|
||||
components,
|
||||
|
|
@ -90,9 +101,14 @@ export function ReportDesignerToolbar() {
|
|||
setShowRuler,
|
||||
groupComponents,
|
||||
ungroupComponents,
|
||||
menuObjids,
|
||||
} = useReportDesigner();
|
||||
const [showPreview, setShowPreview] = useState(false);
|
||||
const [showSaveAsTemplate, setShowSaveAsTemplate] = useState(false);
|
||||
const [showBackConfirm, setShowBackConfirm] = useState(false);
|
||||
const [showResetConfirm, setShowResetConfirm] = useState(false);
|
||||
const [showMenuSelect, setShowMenuSelect] = useState(false);
|
||||
const [pendingSaveAndClose, setPendingSaveAndClose] = useState(false);
|
||||
const { toast } = useToast();
|
||||
|
||||
// 버튼 활성화 조건
|
||||
|
|
@ -111,27 +127,33 @@ export function ReportDesignerToolbar() {
|
|||
setShowGrid(newValue);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
await saveLayout();
|
||||
const handleSave = () => {
|
||||
setPendingSaveAndClose(false);
|
||||
setShowMenuSelect(true);
|
||||
};
|
||||
|
||||
const handleSaveAndClose = async () => {
|
||||
await saveLayout();
|
||||
router.push("/admin/report");
|
||||
const handleSaveAndClose = () => {
|
||||
setPendingSaveAndClose(true);
|
||||
setShowMenuSelect(true);
|
||||
};
|
||||
|
||||
const handleReset = async () => {
|
||||
if (confirm("현재 변경사항을 모두 취소하고 마지막 저장 상태로 되돌리시겠습니까?")) {
|
||||
await loadLayout();
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (confirm("저장하지 않은 변경사항이 있을 수 있습니다. 목록으로 돌아가시겠습니까?")) {
|
||||
const handleMenuSelectConfirm = async (selectedMenuObjids: number[]) => {
|
||||
await saveLayoutWithMenus(selectedMenuObjids);
|
||||
if (pendingSaveAndClose) {
|
||||
router.push("/admin/report");
|
||||
}
|
||||
};
|
||||
|
||||
const handleResetConfirm = async () => {
|
||||
setShowResetConfirm(false);
|
||||
await loadLayout();
|
||||
};
|
||||
|
||||
const handleBackConfirm = () => {
|
||||
setShowBackConfirm(false);
|
||||
router.push("/admin/report");
|
||||
};
|
||||
|
||||
const handleSaveAsTemplate = async (data: {
|
||||
templateNameKor: string;
|
||||
templateNameEng?: string;
|
||||
|
|
@ -193,7 +215,7 @@ export function ReportDesignerToolbar() {
|
|||
<>
|
||||
<div className="flex items-center justify-between border-b bg-white px-4 py-3 shadow-sm">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="sm" onClick={handleBack} className="gap-2">
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowBackConfirm(true)} className="gap-2">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
목록으로
|
||||
</Button>
|
||||
|
|
@ -437,7 +459,7 @@ export function ReportDesignerToolbar() {
|
|||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<Button variant="outline" size="sm" onClick={handleReset} className="gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => setShowResetConfirm(true)} className="gap-2">
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
초기화
|
||||
</Button>
|
||||
|
|
@ -491,6 +513,46 @@ export function ReportDesignerToolbar() {
|
|||
onClose={() => setShowSaveAsTemplate(false)}
|
||||
onSave={handleSaveAsTemplate}
|
||||
/>
|
||||
<MenuSelectModal
|
||||
isOpen={showMenuSelect}
|
||||
onClose={() => setShowMenuSelect(false)}
|
||||
onConfirm={handleMenuSelectConfirm}
|
||||
selectedMenuObjids={menuObjids}
|
||||
/>
|
||||
|
||||
{/* 목록으로 돌아가기 확인 모달 */}
|
||||
<AlertDialog open={showBackConfirm} onOpenChange={setShowBackConfirm}>
|
||||
<AlertDialogContent className="max-w-[400px]">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>목록으로 돌아가기</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
저장하지 않은 변경사항이 있을 수 있습니다.
|
||||
<br />
|
||||
목록으로 돌아가시겠습니까?
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleBackConfirm}>확인</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* 초기화 확인 모달 */}
|
||||
<AlertDialog open={showResetConfirm} onOpenChange={setShowResetConfirm}>
|
||||
<AlertDialogContent className="max-w-[400px]">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>초기화</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
현재 변경사항을 모두 취소하고 마지막 저장 상태로 되돌리시겠습니까?
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleResetConfirm}>확인</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,9 @@ import { getFullImageUrl } from "@/lib/api/client";
|
|||
import JsBarcode from "jsbarcode";
|
||||
import QRCode from "qrcode";
|
||||
|
||||
// mm -> px 변환 상수
|
||||
const MM_TO_PX = 4;
|
||||
|
||||
interface ReportPreviewModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
|
|
@ -149,8 +152,8 @@ function PreviewWatermarkLayer({ watermark, pageWidth, pageHeight }: PreviewWate
|
|||
// 타일 스타일
|
||||
if (watermark.style === "tile") {
|
||||
const tileSize = watermark.type === "text" ? (watermark.fontSize || 48) * 4 : 150;
|
||||
const cols = Math.ceil((pageWidth * 3.7795) / tileSize) + 2;
|
||||
const rows = Math.ceil((pageHeight * 3.7795) / tileSize) + 2;
|
||||
const cols = Math.ceil((pageWidth * MM_TO_PX) / tileSize) + 2;
|
||||
const rows = Math.ceil((pageHeight * MM_TO_PX) / tileSize) + 2;
|
||||
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
|
|
@ -514,7 +517,7 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
|
||||
printWindow.document.write(printHtml);
|
||||
printWindow.document.close();
|
||||
printWindow.print();
|
||||
// print()는 HTML 내 스크립트에서 이미지 로드 완료 후 자동 호출됨
|
||||
};
|
||||
|
||||
// 워터마크 HTML 생성 헬퍼 함수
|
||||
|
|
@ -554,8 +557,8 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
|
||||
if (watermark.style === "tile") {
|
||||
const tileSize = watermark.type === "text" ? (watermark.fontSize || 48) * 4 : 150;
|
||||
const cols = Math.ceil((pageWidth * 3.7795) / tileSize) + 2;
|
||||
const rows = Math.ceil((pageHeight * 3.7795) / tileSize) + 2;
|
||||
const cols = Math.ceil((pageWidth * MM_TO_PX) / tileSize) + 2;
|
||||
const rows = Math.ceil((pageHeight * MM_TO_PX) / tileSize) + 2;
|
||||
const tileItems = Array.from({ length: rows * cols })
|
||||
.map(() => `<div style="width: ${tileSize}px; height: ${tileSize}px; display: flex; align-items: center; justify-content: center;">${textContent}</div>`)
|
||||
.join("");
|
||||
|
|
@ -624,7 +627,6 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
${showLabel ? `<div style="font-size: 12px; white-space: nowrap;">${labelText}</div>` : ""}
|
||||
<div style="flex: 1; position: relative;">
|
||||
${imageUrl ? `<img src="${imageUrl}" style="width: 100%; height: 100%; object-fit: ${component.objectFit || "contain"};" />` : ""}
|
||||
${component.showUnderline ? '<div style="position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: #000000;"></div>' : ""}
|
||||
</div>
|
||||
</div>`;
|
||||
} else {
|
||||
|
|
@ -633,7 +635,6 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
${showLabel && labelPosition === "top" ? `<div style="font-size: 12px;">${labelText}</div>` : ""}
|
||||
<div style="flex: 1; width: 100%; position: relative;">
|
||||
${imageUrl ? `<img src="${imageUrl}" style="width: 100%; height: 100%; object-fit: ${component.objectFit || "contain"};" />` : ""}
|
||||
${component.showUnderline ? '<div style="position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: #000000;"></div>' : ""}
|
||||
</div>
|
||||
${showLabel && labelPosition === "bottom" ? `<div style="font-size: 12px;">${labelText}</div>` : ""}
|
||||
</div>`;
|
||||
|
|
@ -652,9 +653,9 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
: "";
|
||||
|
||||
content = `
|
||||
<div style="display: flex; align-items: center; gap: 8px; height: 100%;">
|
||||
${personName ? `<div style="font-size: 12px;">${personName}</div>` : ""}
|
||||
<div style="position: relative; width: ${component.width}px; height: ${component.height}px;">
|
||||
<div style="display: flex; align-items: center; gap: 8px; width: 100%; height: 100%;">
|
||||
${personName ? `<div style="font-size: 12px; white-space: nowrap;">${personName}</div>` : ""}
|
||||
<div style="position: relative; flex: 1; height: 100%;">
|
||||
${imageUrl ? `<img src="${imageUrl}" style="width: 100%; height: 100%; object-fit: ${component.objectFit || "contain"}; border-radius: 50%;" />` : ""}
|
||||
${showLabel ? `<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: bold; color: #dc2626;">${labelText}</div>` : ""}
|
||||
</div>
|
||||
|
|
@ -893,8 +894,15 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
</table>`;
|
||||
}
|
||||
|
||||
// 컴포넌트 값은 px로 저장됨 (캔버스는 pageWidth * MM_TO_PX px)
|
||||
// 인쇄용 mm 단위로 변환: px / MM_TO_PX = mm
|
||||
const xMm = component.x / MM_TO_PX;
|
||||
const yMm = component.y / MM_TO_PX;
|
||||
const widthMm = component.width / MM_TO_PX;
|
||||
const heightMm = component.height / MM_TO_PX;
|
||||
|
||||
return `
|
||||
<div style="position: absolute; left: ${component.x}px; top: ${component.y}px; width: ${component.width}px; height: ${component.height}px; background-color: ${component.backgroundColor || "transparent"}; border: ${component.borderWidth ? `${component.borderWidth}px solid ${component.borderColor}` : "none"}; padding: 8px; box-sizing: border-box;">
|
||||
<div style="position: absolute; left: ${xMm}mm; top: ${yMm}mm; width: ${widthMm}mm; height: ${heightMm}mm; background-color: ${component.backgroundColor || "transparent"}; border: ${component.borderWidth ? `${component.borderWidth}px solid ${component.borderColor}` : "none"}; box-sizing: border-box; overflow: hidden;">
|
||||
${content}
|
||||
</div>`;
|
||||
})
|
||||
|
|
@ -903,7 +911,7 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
const watermarkHTML = generateWatermarkHTML(watermark, pageWidth, pageHeight);
|
||||
|
||||
return `
|
||||
<div style="position: relative; width: ${pageWidth}mm; min-height: ${pageHeight}mm; background-color: ${backgroundColor}; margin: 0 auto;">
|
||||
<div class="print-page" style="position: relative; width: ${pageWidth}mm; min-height: ${pageHeight}mm; background-color: ${backgroundColor};">
|
||||
${watermarkHTML}
|
||||
${componentsHTML}
|
||||
</div>`;
|
||||
|
|
@ -935,20 +943,18 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
<meta charset="UTF-8">
|
||||
<title>리포트 인쇄</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 10mm;
|
||||
margin: 0;
|
||||
}
|
||||
@media print {
|
||||
body { margin: 0; padding: 0; }
|
||||
html, body { width: 210mm; height: 297mm; }
|
||||
.print-page { page-break-after: always; page-break-inside: avoid; }
|
||||
.print-page:last-child { page-break-after: auto; }
|
||||
}
|
||||
body {
|
||||
font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
|
@ -1052,7 +1058,7 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
description: "WORD 파일을 생성하고 있습니다...",
|
||||
});
|
||||
|
||||
// 이미지를 Base64로 변환하여 컴포넌트 데이터에 포함
|
||||
// 이미지 및 바코드를 Base64로 변환하여 컴포넌트 데이터에 포함
|
||||
const pagesWithBase64 = await Promise.all(
|
||||
layoutConfig.pages.map(async (page) => {
|
||||
const componentsWithBase64 = await Promise.all(
|
||||
|
|
@ -1066,11 +1072,20 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
return component;
|
||||
}
|
||||
}
|
||||
// 바코드/QR코드 컴포넌트는 이미지로 변환
|
||||
if (component.type === "barcode") {
|
||||
try {
|
||||
const barcodeImage = await generateBarcodeImage(component);
|
||||
return { ...component, barcodeImageBase64: barcodeImage };
|
||||
} catch {
|
||||
return component;
|
||||
}),
|
||||
}
|
||||
}
|
||||
return component;
|
||||
})
|
||||
);
|
||||
return { ...page, components: componentsWithBase64 };
|
||||
}),
|
||||
})
|
||||
);
|
||||
|
||||
// 쿼리 결과 수집
|
||||
|
|
@ -1377,17 +1392,6 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
}}
|
||||
/>
|
||||
)}
|
||||
{component.showUnderline !== false && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: "0",
|
||||
left: "0",
|
||||
right: "0",
|
||||
borderBottom: "2px solid #000000",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -109,6 +109,22 @@ export function SignatureGenerator({ onSignatureSelect }: SignatureGeneratorProp
|
|||
});
|
||||
}
|
||||
|
||||
// 사용자가 입력한 텍스트로 각 폰트의 글리프를 미리 로드
|
||||
const preloadCanvas = document.createElement("canvas");
|
||||
preloadCanvas.width = 500;
|
||||
preloadCanvas.height = 200;
|
||||
const preloadCtx = preloadCanvas.getContext("2d");
|
||||
|
||||
if (preloadCtx) {
|
||||
for (const font of fonts) {
|
||||
preloadCtx.font = `${font.weight} 124px ${font.style}`;
|
||||
preloadCtx.fillText(name, 0, 100);
|
||||
}
|
||||
}
|
||||
|
||||
// 글리프 로드 대기 (중요: 첫 렌더링 후 폰트가 완전히 로드되도록)
|
||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
|
||||
const newSignatures: string[] = [];
|
||||
|
||||
// 동기적으로 하나씩 생성
|
||||
|
|
|
|||
|
|
@ -3,6 +3,16 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Trash2, Loader2, RefreshCw } from "lucide-react";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { useReportDesigner } from "@/contexts/ReportDesignerContext";
|
||||
import { reportApi } from "@/lib/api/reportApi";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
|
@ -19,6 +29,7 @@ export function TemplatePalette() {
|
|||
const [customTemplates, setCustomTemplates] = useState<Template[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
const [deleteTarget, setDeleteTarget] = useState<{ id: string; name: string } | null>(null);
|
||||
const { toast } = useToast();
|
||||
|
||||
const fetchTemplates = async () => {
|
||||
|
|
@ -49,14 +60,18 @@ export function TemplatePalette() {
|
|||
await applyTemplate(templateId);
|
||||
};
|
||||
|
||||
const handleDeleteTemplate = async (templateId: string, templateName: string) => {
|
||||
if (!confirm(`"${templateName}" 템플릿을 삭제하시겠습니까?`)) {
|
||||
return;
|
||||
}
|
||||
const handleDeleteClick = (templateId: string, templateName: string) => {
|
||||
setDeleteTarget({ id: templateId, name: templateName });
|
||||
};
|
||||
|
||||
const handleDeleteConfirm = async () => {
|
||||
if (!deleteTarget) return;
|
||||
|
||||
setDeletingId(deleteTarget.id);
|
||||
setDeleteTarget(null);
|
||||
|
||||
setDeletingId(templateId);
|
||||
try {
|
||||
const response = await reportApi.deleteTemplate(templateId);
|
||||
const response = await reportApi.deleteTemplate(deleteTarget.id);
|
||||
if (response.success) {
|
||||
toast({
|
||||
title: "성공",
|
||||
|
|
@ -108,7 +123,7 @@ export function TemplatePalette() {
|
|||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteTemplate(template.template_id, template.template_name_kor);
|
||||
handleDeleteClick(template.template_id, template.template_name_kor);
|
||||
}}
|
||||
disabled={deletingId === template.template_id}
|
||||
className="absolute top-1/2 right-1 h-6 w-6 -translate-y-1/2 p-0 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
|
|
@ -123,6 +138,29 @@ export function TemplatePalette() {
|
|||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 삭제 확인 모달 */}
|
||||
<AlertDialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
|
||||
<AlertDialogContent className="max-w-[400px]">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>템플릿 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
"{deleteTarget?.name}" 템플릿을 삭제하시겠습니까?
|
||||
<br />
|
||||
삭제된 템플릿은 복구할 수 없습니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleDeleteConfirm}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
삭제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,488 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* UnifiedDate
|
||||
*
|
||||
* 통합 날짜/시간 컴포넌트
|
||||
* - date: 날짜 선택
|
||||
* - time: 시간 선택
|
||||
* - datetime: 날짜+시간 선택
|
||||
* - range 옵션: 범위 선택 (시작~종료)
|
||||
*/
|
||||
|
||||
import React, { forwardRef, useCallback, useMemo, useState } from "react";
|
||||
import { format, parse, isValid } from "date-fns";
|
||||
import { ko } from "date-fns/locale";
|
||||
import { Calendar as CalendarIcon, Clock } from "lucide-react";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { UnifiedDateProps, UnifiedDateType } from "@/types/unified-components";
|
||||
|
||||
// 날짜 형식 매핑
|
||||
const DATE_FORMATS: Record<string, string> = {
|
||||
"YYYY-MM-DD": "yyyy-MM-dd",
|
||||
"YYYY/MM/DD": "yyyy/MM/dd",
|
||||
"DD-MM-YYYY": "dd-MM-yyyy",
|
||||
"DD/MM/YYYY": "dd/MM/yyyy",
|
||||
"MM-DD-YYYY": "MM-dd-yyyy",
|
||||
"MM/DD/YYYY": "MM/dd/yyyy",
|
||||
"YYYY-MM-DD HH:mm": "yyyy-MM-dd HH:mm",
|
||||
"YYYY-MM-DD HH:mm:ss": "yyyy-MM-dd HH:mm:ss",
|
||||
};
|
||||
|
||||
// 날짜 문자열 → Date 객체
|
||||
function parseDate(value: string | undefined, formatStr: string): Date | undefined {
|
||||
if (!value) return undefined;
|
||||
|
||||
const dateFnsFormat = DATE_FORMATS[formatStr] || formatStr;
|
||||
|
||||
try {
|
||||
// ISO 형식 먼저 시도
|
||||
const isoDate = new Date(value);
|
||||
if (isValid(isoDate)) return isoDate;
|
||||
|
||||
// 포맷에 맞게 파싱
|
||||
const parsed = parse(value, dateFnsFormat, new Date());
|
||||
return isValid(parsed) ? parsed : undefined;
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// Date 객체 → 날짜 문자열
|
||||
function formatDate(date: Date | undefined, formatStr: string): string {
|
||||
if (!date || !isValid(date)) return "";
|
||||
const dateFnsFormat = DATE_FORMATS[formatStr] || formatStr;
|
||||
return format(date, dateFnsFormat);
|
||||
}
|
||||
|
||||
/**
|
||||
* 단일 날짜 선택 컴포넌트
|
||||
*/
|
||||
const SingleDatePicker = forwardRef<
|
||||
HTMLButtonElement,
|
||||
{
|
||||
value?: string;
|
||||
onChange?: (value: string) => void;
|
||||
dateFormat: string;
|
||||
showToday?: boolean;
|
||||
minDate?: string;
|
||||
maxDate?: string;
|
||||
disabled?: boolean;
|
||||
readonly?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
>(
|
||||
(
|
||||
{ value, onChange, dateFormat = "YYYY-MM-DD", showToday = true, minDate, maxDate, disabled, readonly, className },
|
||||
ref,
|
||||
) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const date = useMemo(() => parseDate(value, dateFormat), [value, dateFormat]);
|
||||
const minDateObj = useMemo(() => parseDate(minDate, dateFormat), [minDate, dateFormat]);
|
||||
const maxDateObj = useMemo(() => parseDate(maxDate, dateFormat), [maxDate, dateFormat]);
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(selectedDate: Date | undefined) => {
|
||||
if (selectedDate) {
|
||||
onChange?.(formatDate(selectedDate, dateFormat));
|
||||
setOpen(false);
|
||||
}
|
||||
},
|
||||
[dateFormat, onChange],
|
||||
);
|
||||
|
||||
const handleToday = useCallback(() => {
|
||||
onChange?.(formatDate(new Date(), dateFormat));
|
||||
setOpen(false);
|
||||
}, [dateFormat, onChange]);
|
||||
|
||||
const handleClear = useCallback(() => {
|
||||
onChange?.("");
|
||||
setOpen(false);
|
||||
}, [onChange]);
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
ref={ref}
|
||||
variant="outline"
|
||||
disabled={disabled || readonly}
|
||||
className={cn(
|
||||
"h-10 w-full justify-start text-left font-normal",
|
||||
!value && "text-muted-foreground",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{value || "날짜 선택"}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={date}
|
||||
onSelect={handleSelect}
|
||||
initialFocus
|
||||
locale={ko}
|
||||
disabled={(date) => {
|
||||
if (minDateObj && date < minDateObj) return true;
|
||||
if (maxDateObj && date > maxDateObj) return true;
|
||||
return false;
|
||||
}}
|
||||
/>
|
||||
<div className="flex gap-2 p-3 pt-0">
|
||||
{showToday && (
|
||||
<Button variant="outline" size="sm" onClick={handleToday}>
|
||||
오늘
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="ghost" size="sm" onClick={handleClear}>
|
||||
초기화
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
},
|
||||
);
|
||||
SingleDatePicker.displayName = "SingleDatePicker";
|
||||
|
||||
/**
|
||||
* 날짜 범위 선택 컴포넌트
|
||||
*/
|
||||
const RangeDatePicker = forwardRef<
|
||||
HTMLDivElement,
|
||||
{
|
||||
value?: [string, string];
|
||||
onChange?: (value: [string, string]) => void;
|
||||
dateFormat: string;
|
||||
minDate?: string;
|
||||
maxDate?: string;
|
||||
disabled?: boolean;
|
||||
readonly?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
>(({ value = ["", ""], onChange, dateFormat = "YYYY-MM-DD", minDate, maxDate, disabled, readonly, className }, ref) => {
|
||||
const [openStart, setOpenStart] = useState(false);
|
||||
const [openEnd, setOpenEnd] = useState(false);
|
||||
|
||||
const startDate = useMemo(() => parseDate(value[0], dateFormat), [value, dateFormat]);
|
||||
const endDate = useMemo(() => parseDate(value[1], dateFormat), [value, dateFormat]);
|
||||
const minDateObj = useMemo(() => parseDate(minDate, dateFormat), [minDate, dateFormat]);
|
||||
const maxDateObj = useMemo(() => parseDate(maxDate, dateFormat), [maxDate, dateFormat]);
|
||||
|
||||
const handleStartSelect = useCallback(
|
||||
(date: Date | undefined) => {
|
||||
if (date) {
|
||||
const newStart = formatDate(date, dateFormat);
|
||||
// 시작일이 종료일보다 크면 종료일도 같이 변경
|
||||
if (endDate && date > endDate) {
|
||||
onChange?.([newStart, newStart]);
|
||||
} else {
|
||||
onChange?.([newStart, value[1]]);
|
||||
}
|
||||
setOpenStart(false);
|
||||
}
|
||||
},
|
||||
[value, dateFormat, endDate, onChange],
|
||||
);
|
||||
|
||||
const handleEndSelect = useCallback(
|
||||
(date: Date | undefined) => {
|
||||
if (date) {
|
||||
const newEnd = formatDate(date, dateFormat);
|
||||
// 종료일이 시작일보다 작으면 시작일도 같이 변경
|
||||
if (startDate && date < startDate) {
|
||||
onChange?.([newEnd, newEnd]);
|
||||
} else {
|
||||
onChange?.([value[0], newEnd]);
|
||||
}
|
||||
setOpenEnd(false);
|
||||
}
|
||||
},
|
||||
[value, dateFormat, startDate, onChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={ref} className={cn("flex items-center gap-2", className)}>
|
||||
{/* 시작 날짜 */}
|
||||
<Popover open={openStart} onOpenChange={setOpenStart}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={disabled || readonly}
|
||||
className={cn("h-10 flex-1 justify-start text-left font-normal", !value[0] && "text-muted-foreground")}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{value[0] || "시작일"}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={startDate}
|
||||
onSelect={handleStartSelect}
|
||||
initialFocus
|
||||
locale={ko}
|
||||
disabled={(date) => {
|
||||
if (minDateObj && date < minDateObj) return true;
|
||||
if (maxDateObj && date > maxDateObj) return true;
|
||||
return false;
|
||||
}}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<span className="text-muted-foreground">~</span>
|
||||
|
||||
{/* 종료 날짜 */}
|
||||
<Popover open={openEnd} onOpenChange={setOpenEnd}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={disabled || readonly}
|
||||
className={cn("h-10 flex-1 justify-start text-left font-normal", !value[1] && "text-muted-foreground")}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{value[1] || "종료일"}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={endDate}
|
||||
onSelect={handleEndSelect}
|
||||
initialFocus
|
||||
locale={ko}
|
||||
disabled={(date) => {
|
||||
if (minDateObj && date < minDateObj) return true;
|
||||
if (maxDateObj && date > maxDateObj) return true;
|
||||
// 시작일보다 이전 날짜는 선택 불가
|
||||
if (startDate && date < startDate) return true;
|
||||
return false;
|
||||
}}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
RangeDatePicker.displayName = "RangeDatePicker";
|
||||
|
||||
/**
|
||||
* 시간 선택 컴포넌트
|
||||
*/
|
||||
const TimePicker = forwardRef<
|
||||
HTMLInputElement,
|
||||
{
|
||||
value?: string;
|
||||
onChange?: (value: string) => void;
|
||||
disabled?: boolean;
|
||||
readonly?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
>(({ value, onChange, disabled, readonly, className }, ref) => {
|
||||
return (
|
||||
<div className={cn("relative", className)}>
|
||||
<Clock className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
||||
<Input
|
||||
ref={ref}
|
||||
type="time"
|
||||
value={value || ""}
|
||||
onChange={(e) => onChange?.(e.target.value)}
|
||||
disabled={disabled}
|
||||
readOnly={readonly}
|
||||
className="h-10 pl-10"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
TimePicker.displayName = "TimePicker";
|
||||
|
||||
/**
|
||||
* 날짜+시간 선택 컴포넌트
|
||||
*/
|
||||
const DateTimePicker = forwardRef<
|
||||
HTMLDivElement,
|
||||
{
|
||||
value?: string;
|
||||
onChange?: (value: string) => void;
|
||||
dateFormat: string;
|
||||
minDate?: string;
|
||||
maxDate?: string;
|
||||
disabled?: boolean;
|
||||
readonly?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
>(({ value, onChange, dateFormat = "YYYY-MM-DD HH:mm", minDate, maxDate, disabled, readonly, className }, ref) => {
|
||||
// 날짜와 시간 분리
|
||||
const [datePart, timePart] = useMemo(() => {
|
||||
if (!value) return ["", ""];
|
||||
const parts = value.split(" ");
|
||||
return [parts[0] || "", parts[1] || ""];
|
||||
}, [value]);
|
||||
|
||||
const handleDateChange = useCallback(
|
||||
(newDate: string) => {
|
||||
const newValue = `${newDate} ${timePart || "00:00"}`;
|
||||
onChange?.(newValue.trim());
|
||||
},
|
||||
[timePart, onChange],
|
||||
);
|
||||
|
||||
const handleTimeChange = useCallback(
|
||||
(newTime: string) => {
|
||||
const newValue = `${datePart || format(new Date(), "yyyy-MM-dd")} ${newTime}`;
|
||||
onChange?.(newValue.trim());
|
||||
},
|
||||
[datePart, onChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={ref} className={cn("flex gap-2", className)}>
|
||||
<div className="flex-1">
|
||||
<SingleDatePicker
|
||||
value={datePart}
|
||||
onChange={handleDateChange}
|
||||
dateFormat="YYYY-MM-DD"
|
||||
minDate={minDate}
|
||||
maxDate={maxDate}
|
||||
disabled={disabled}
|
||||
readonly={readonly}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-32">
|
||||
<TimePicker value={timePart} onChange={handleTimeChange} disabled={disabled} readonly={readonly} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
DateTimePicker.displayName = "DateTimePicker";
|
||||
|
||||
/**
|
||||
* 메인 UnifiedDate 컴포넌트
|
||||
*/
|
||||
export const UnifiedDate = forwardRef<HTMLDivElement, UnifiedDateProps>((props, ref) => {
|
||||
const { id, label, required, readonly, disabled, style, size, config: configProp, value, onChange } = props;
|
||||
|
||||
// config가 없으면 기본값 사용
|
||||
const config = configProp || { type: "date" as const };
|
||||
|
||||
const dateFormat = config.format || "YYYY-MM-DD";
|
||||
|
||||
// 타입별 컴포넌트 렌더링
|
||||
const renderDatePicker = () => {
|
||||
const isDisabled = disabled || readonly;
|
||||
|
||||
// 범위 선택
|
||||
if (config.range) {
|
||||
return (
|
||||
<RangeDatePicker
|
||||
value={Array.isArray(value) ? (value as [string, string]) : ["", ""]}
|
||||
onChange={onChange as (value: [string, string]) => void}
|
||||
dateFormat={dateFormat}
|
||||
minDate={config.minDate}
|
||||
maxDate={config.maxDate}
|
||||
disabled={isDisabled}
|
||||
readonly={readonly}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// 타입별 렌더링
|
||||
switch (config.type) {
|
||||
case "date":
|
||||
return (
|
||||
<SingleDatePicker
|
||||
value={typeof value === "string" ? value : ""}
|
||||
onChange={(v) => onChange?.(v)}
|
||||
dateFormat={dateFormat}
|
||||
showToday={config.showToday}
|
||||
minDate={config.minDate}
|
||||
maxDate={config.maxDate}
|
||||
disabled={isDisabled}
|
||||
readonly={readonly}
|
||||
/>
|
||||
);
|
||||
|
||||
case "time":
|
||||
return (
|
||||
<TimePicker
|
||||
value={typeof value === "string" ? value : ""}
|
||||
onChange={(v) => onChange?.(v)}
|
||||
disabled={isDisabled}
|
||||
readonly={readonly}
|
||||
/>
|
||||
);
|
||||
|
||||
case "datetime":
|
||||
return (
|
||||
<DateTimePicker
|
||||
value={typeof value === "string" ? value : ""}
|
||||
onChange={(v) => onChange?.(v)}
|
||||
dateFormat={dateFormat}
|
||||
minDate={config.minDate}
|
||||
maxDate={config.maxDate}
|
||||
disabled={isDisabled}
|
||||
readonly={readonly}
|
||||
/>
|
||||
);
|
||||
|
||||
default:
|
||||
return (
|
||||
<SingleDatePicker
|
||||
value={typeof value === "string" ? value : ""}
|
||||
onChange={(v) => onChange?.(v)}
|
||||
dateFormat={dateFormat}
|
||||
showToday={config.showToday}
|
||||
disabled={isDisabled}
|
||||
readonly={readonly}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const showLabel = label && style?.labelDisplay !== false;
|
||||
const componentWidth = size?.width || style?.width;
|
||||
const componentHeight = size?.height || style?.height;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
id={id}
|
||||
className="flex flex-col"
|
||||
style={{
|
||||
width: componentWidth,
|
||||
height: componentHeight,
|
||||
}}
|
||||
>
|
||||
{showLabel && (
|
||||
<Label
|
||||
htmlFor={id}
|
||||
style={{
|
||||
fontSize: style?.labelFontSize,
|
||||
color: style?.labelColor,
|
||||
fontWeight: style?.labelFontWeight,
|
||||
marginBottom: style?.labelMarginBottom,
|
||||
}}
|
||||
className="flex-shrink-0 text-sm font-medium"
|
||||
>
|
||||
{label}
|
||||
{required && <span className="ml-0.5 text-orange-500">*</span>}
|
||||
</Label>
|
||||
)}
|
||||
<div className="min-h-0 flex-1">{renderDatePicker()}</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
UnifiedDate.displayName = "UnifiedDate";
|
||||
|
||||
export default UnifiedDate;
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* UnifiedInput 설정 패널
|
||||
* 통합 입력 컴포넌트의 세부 설정을 관리합니다.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
interface UnifiedInputConfigPanelProps {
|
||||
config: Record<string, any>;
|
||||
onChange: (config: Record<string, any>) => void;
|
||||
}
|
||||
|
||||
export const UnifiedInputConfigPanel: React.FC<UnifiedInputConfigPanelProps> = ({ config, onChange }) => {
|
||||
// 설정 업데이트 핸들러
|
||||
const updateConfig = (field: string, value: any) => {
|
||||
onChange({ ...config, [field]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 입력 타입 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium">입력 타입</Label>
|
||||
<Select
|
||||
value={config.inputType || config.type || "text"}
|
||||
onValueChange={(value) => updateConfig("inputType", value)}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="입력 타입 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="text">텍스트</SelectItem>
|
||||
<SelectItem value="number">숫자</SelectItem>
|
||||
<SelectItem value="password">비밀번호</SelectItem>
|
||||
<SelectItem value="textarea">여러 줄 텍스트</SelectItem>
|
||||
<SelectItem value="slider">슬라이더</SelectItem>
|
||||
<SelectItem value="color">색상 선택</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 형식 (텍스트/숫자용) */}
|
||||
{(config.inputType === "text" || !config.inputType) && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium">입력 형식</Label>
|
||||
<Select value={config.format || "none"} onValueChange={(value) => updateConfig("format", value)}>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="형식 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">제한 없음</SelectItem>
|
||||
<SelectItem value="email">이메일</SelectItem>
|
||||
<SelectItem value="tel">전화번호</SelectItem>
|
||||
<SelectItem value="url">URL</SelectItem>
|
||||
<SelectItem value="currency">통화</SelectItem>
|
||||
<SelectItem value="biz_no">사업자번호</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 플레이스홀더 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium">플레이스홀더</Label>
|
||||
<Input
|
||||
value={config.placeholder || ""}
|
||||
onChange={(e) => updateConfig("placeholder", e.target.value)}
|
||||
placeholder="입력 안내 텍스트"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 숫자/슬라이더 전용 설정 */}
|
||||
{(config.inputType === "number" || config.inputType === "slider") && (
|
||||
<>
|
||||
<Separator />
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium">최소값</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={config.min ?? ""}
|
||||
onChange={(e) => updateConfig("min", e.target.value ? Number(e.target.value) : undefined)}
|
||||
placeholder="0"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium">최대값</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={config.max ?? ""}
|
||||
onChange={(e) => updateConfig("max", e.target.value ? Number(e.target.value) : undefined)}
|
||||
placeholder="100"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium">단계</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={config.step ?? ""}
|
||||
onChange={(e) => updateConfig("step", e.target.value ? Number(e.target.value) : undefined)}
|
||||
placeholder="1"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 여러 줄 텍스트 전용 설정 */}
|
||||
{config.inputType === "textarea" && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium">줄 수</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={config.rows || 3}
|
||||
onChange={(e) => updateConfig("rows", parseInt(e.target.value) || 3)}
|
||||
min={2}
|
||||
max={20}
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 마스크 입력 (선택) */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium">입력 마스크 (선택)</Label>
|
||||
<Input
|
||||
value={config.mask || ""}
|
||||
onChange={(e) => updateConfig("mask", e.target.value)}
|
||||
placeholder="예: ###-####-####"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
<p className="text-muted-foreground text-[10px]"># = 숫자, A = 문자, * = 모든 문자</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
UnifiedInputConfigPanel.displayName = "UnifiedInputConfigPanel";
|
||||
|
||||
export default UnifiedInputConfigPanel;
|
||||
|
|
@ -139,3 +139,4 @@ export const useActiveTabOptional = () => {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -138,10 +138,49 @@ interface ReportDesignerContextType {
|
|||
// 그룹화
|
||||
groupComponents: () => void;
|
||||
ungroupComponents: () => void;
|
||||
|
||||
// 메뉴 연결
|
||||
menuObjids: number[];
|
||||
setMenuObjids: (menuObjids: number[]) => void;
|
||||
saveLayoutWithMenus: (menuObjids: number[]) => Promise<void>;
|
||||
}
|
||||
|
||||
const ReportDesignerContext = createContext<ReportDesignerContextType | undefined>(undefined);
|
||||
|
||||
// 페이지 사이즈 변경 시 컴포넌트 위치 및 크기 재계산 유틸리티 함수
|
||||
const recalculateComponentPositions = (
|
||||
components: ComponentConfig[],
|
||||
oldWidth: number,
|
||||
oldHeight: number,
|
||||
newWidth: number,
|
||||
newHeight: number
|
||||
): ComponentConfig[] => {
|
||||
// 사이즈가 동일하면 그대로 반환
|
||||
if (oldWidth === newWidth && oldHeight === newHeight) {
|
||||
return components;
|
||||
}
|
||||
|
||||
const widthRatio = newWidth / oldWidth;
|
||||
const heightRatio = newHeight / oldHeight;
|
||||
|
||||
return components.map((comp) => {
|
||||
// 위치와 크기 모두 비율대로 재계산
|
||||
// 소수점 2자리까지만 유지
|
||||
const newX = Math.round(comp.x * widthRatio * 100) / 100;
|
||||
const newY = Math.round(comp.y * heightRatio * 100) / 100;
|
||||
const newCompWidth = Math.round(comp.width * widthRatio * 100) / 100;
|
||||
const newCompHeight = Math.round(comp.height * heightRatio * 100) / 100;
|
||||
|
||||
return {
|
||||
...comp,
|
||||
x: newX,
|
||||
y: newY,
|
||||
width: newCompWidth,
|
||||
height: newCompHeight,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export function ReportDesignerProvider({ reportId, children }: { reportId: string; children: ReactNode }) {
|
||||
const [reportDetail, setReportDetail] = useState<ReportDetail | null>(null);
|
||||
const [layout, setLayout] = useState<ReportLayout | null>(null);
|
||||
|
|
@ -158,6 +197,7 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
|
|||
const [selectedComponentIds, setSelectedComponentIds] = useState<string[]>([]); // 다중 선택
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [menuObjids, setMenuObjids] = useState<number[]>([]); // 연결된 메뉴 ID 목록
|
||||
const { toast } = useToast();
|
||||
|
||||
// 현재 페이지 계산
|
||||
|
|
@ -988,10 +1028,42 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
|
|||
}, []);
|
||||
|
||||
const updatePageSettings = useCallback((pageId: string, settings: Partial<ReportPage>) => {
|
||||
setLayoutConfig((prev) => ({
|
||||
...prev,
|
||||
pages: prev.pages.map((page) => (page.page_id === pageId ? { ...page, ...settings } : page)),
|
||||
}));
|
||||
setLayoutConfig((prev) => {
|
||||
const targetPage = prev.pages.find((p) => p.page_id === pageId);
|
||||
if (!targetPage) {
|
||||
return prev;
|
||||
}
|
||||
|
||||
// 페이지 사이즈 변경 감지
|
||||
const isWidthChanging = settings.width !== undefined && settings.width !== targetPage.width;
|
||||
const isHeightChanging = settings.height !== undefined && settings.height !== targetPage.height;
|
||||
|
||||
// 사이즈 변경 시 컴포넌트 위치 재계산
|
||||
let updatedComponents = targetPage.components;
|
||||
if (isWidthChanging || isHeightChanging) {
|
||||
const oldWidth = targetPage.width;
|
||||
const oldHeight = targetPage.height;
|
||||
const newWidth = settings.width ?? targetPage.width;
|
||||
const newHeight = settings.height ?? targetPage.height;
|
||||
|
||||
updatedComponents = recalculateComponentPositions(
|
||||
targetPage.components,
|
||||
oldWidth,
|
||||
oldHeight,
|
||||
newWidth,
|
||||
newHeight
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
...prev,
|
||||
pages: prev.pages.map((page) =>
|
||||
page.page_id === pageId
|
||||
? { ...page, ...settings, components: updatedComponents }
|
||||
: page
|
||||
),
|
||||
};
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 전체 페이지 공유 워터마크 업데이트
|
||||
|
|
@ -1043,6 +1115,13 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
|
|||
}));
|
||||
setQueries(loadedQueries);
|
||||
}
|
||||
|
||||
// 연결된 메뉴 로드
|
||||
if (detailResponse.data.menuObjids && detailResponse.data.menuObjids.length > 0) {
|
||||
setMenuObjids(detailResponse.data.menuObjids);
|
||||
} else {
|
||||
setMenuObjids([]);
|
||||
}
|
||||
}
|
||||
|
||||
// 레이아웃 조회
|
||||
|
|
@ -1331,6 +1410,7 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
|
|||
...q,
|
||||
externalConnectionId: q.externalConnectionId || undefined,
|
||||
})),
|
||||
menuObjids, // 연결된 메뉴 목록
|
||||
});
|
||||
|
||||
toast({
|
||||
|
|
@ -1352,7 +1432,68 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
|
|||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
}, [reportId, layoutConfig, queries, toast, loadLayout]);
|
||||
}, [reportId, layoutConfig, queries, menuObjids, toast, loadLayout]);
|
||||
|
||||
// 메뉴를 선택하고 저장하는 함수
|
||||
const saveLayoutWithMenus = useCallback(
|
||||
async (selectedMenuObjids: number[]) => {
|
||||
// 먼저 메뉴 상태 업데이트
|
||||
setMenuObjids(selectedMenuObjids);
|
||||
|
||||
setIsSaving(true);
|
||||
try {
|
||||
let actualReportId = reportId;
|
||||
|
||||
// 새 리포트인 경우 먼저 리포트 생성
|
||||
if (reportId === "new") {
|
||||
const createResponse = await reportApi.createReport({
|
||||
reportNameKor: "새 리포트",
|
||||
reportType: "BASIC",
|
||||
description: "새로 생성된 리포트입니다.",
|
||||
});
|
||||
|
||||
if (!createResponse.success || !createResponse.data) {
|
||||
throw new Error("리포트 생성에 실패했습니다.");
|
||||
}
|
||||
|
||||
actualReportId = createResponse.data.reportId;
|
||||
|
||||
// URL 업데이트 (페이지 리로드 없이)
|
||||
window.history.replaceState({}, "", `/admin/report/designer/${actualReportId}`);
|
||||
}
|
||||
|
||||
// 레이아웃 저장 (선택된 메뉴와 함께)
|
||||
await reportApi.saveLayout(actualReportId, {
|
||||
layoutConfig,
|
||||
queries: queries.map((q) => ({
|
||||
...q,
|
||||
externalConnectionId: q.externalConnectionId || undefined,
|
||||
})),
|
||||
menuObjids: selectedMenuObjids,
|
||||
});
|
||||
|
||||
toast({
|
||||
title: "성공",
|
||||
description: reportId === "new" ? "리포트가 생성되었습니다." : "레이아웃이 저장되었습니다.",
|
||||
});
|
||||
|
||||
// 새 리포트였다면 데이터 다시 로드
|
||||
if (reportId === "new") {
|
||||
await loadLayout();
|
||||
}
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : "저장에 실패했습니다.";
|
||||
toast({
|
||||
title: "오류",
|
||||
description: errorMessage,
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
},
|
||||
[reportId, layoutConfig, queries, toast, loadLayout],
|
||||
);
|
||||
|
||||
// 템플릿 적용
|
||||
const applyTemplate = useCallback(
|
||||
|
|
@ -1553,6 +1694,10 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
|
|||
// 그룹화
|
||||
groupComponents,
|
||||
ungroupComponents,
|
||||
// 메뉴 연결
|
||||
menuObjids,
|
||||
setMenuObjids,
|
||||
saveLayoutWithMenus,
|
||||
};
|
||||
|
||||
return <ReportDesignerContext.Provider value={value}>{children}</ReportDesignerContext.Provider>;
|
||||
|
|
|
|||
|
|
@ -9,16 +9,13 @@ export const queryKeys = {
|
|||
all: ["codes"] as const,
|
||||
list: (categoryCode: string) => ["codes", "list", categoryCode] as const,
|
||||
options: (categoryCode: string) => ["codes", "options", categoryCode] as const,
|
||||
detail: (categoryCode: string, codeValue: string) =>
|
||||
["codes", "detail", categoryCode, codeValue] as const,
|
||||
infiniteList: (categoryCode: string, filters?: any) =>
|
||||
["codes", "infiniteList", categoryCode, filters] as const,
|
||||
detail: (categoryCode: string, codeValue: string) => ["codes", "detail", categoryCode, codeValue] as const,
|
||||
infiniteList: (categoryCode: string, filters?: any) => ["codes", "infiniteList", categoryCode, filters] as const,
|
||||
},
|
||||
tables: {
|
||||
all: ["tables"] as const,
|
||||
columns: (tableName: string) => ["tables", "columns", tableName] as const,
|
||||
codeCategory: (tableName: string, columnName: string) =>
|
||||
["tables", "codeCategory", tableName, columnName] as const,
|
||||
codeCategory: (tableName: string, columnName: string) => ["tables", "codeCategory", tableName, columnName] as const,
|
||||
},
|
||||
categories: {
|
||||
all: ["categories"] as const,
|
||||
|
|
@ -36,9 +33,8 @@ export function useTableCodeCategory(tableName?: string, columnName?: string) {
|
|||
const columns = await tableTypeApi.getColumns(tableName);
|
||||
const targetColumn = columns.find((col) => col.columnName === columnName);
|
||||
|
||||
const codeCategory = targetColumn?.codeCategory && targetColumn.codeCategory !== "none"
|
||||
? targetColumn.codeCategory
|
||||
: null;
|
||||
const codeCategory =
|
||||
targetColumn?.codeCategory && targetColumn.codeCategory !== "none" ? targetColumn.codeCategory : null;
|
||||
|
||||
return codeCategory;
|
||||
},
|
||||
|
|
@ -48,27 +44,112 @@ export function useTableCodeCategory(tableName?: string, columnName?: string) {
|
|||
});
|
||||
}
|
||||
|
||||
// 🆕 테이블 컬럼의 계층구조 설정 조회 (대분류/중분류/소분류)
|
||||
interface ColumnHierarchyInfo {
|
||||
hierarchyRole?: "large" | "medium" | "small";
|
||||
hierarchyParentField?: string;
|
||||
codeCategory?: string;
|
||||
}
|
||||
|
||||
export function useTableColumnHierarchy(tableName?: string, columnName?: string) {
|
||||
return useQuery<ColumnHierarchyInfo | null>({
|
||||
queryKey: ["tables", "hierarchy", tableName || "", columnName || ""],
|
||||
queryFn: async () => {
|
||||
if (!tableName || !columnName) return null;
|
||||
|
||||
const columns = await tableTypeApi.getColumns(tableName);
|
||||
const targetColumn = columns.find((col) => col.columnName === columnName);
|
||||
|
||||
if (!targetColumn) return null;
|
||||
|
||||
// detailSettings에서 hierarchyRole 추출
|
||||
let hierarchyRole: ColumnHierarchyInfo["hierarchyRole"];
|
||||
let hierarchyParentField: string | undefined;
|
||||
|
||||
console.log("🔍 [useTableColumnHierarchy] 컬럼 정보:", {
|
||||
columnName,
|
||||
detailSettings: targetColumn.detailSettings,
|
||||
detailSettingsType: typeof targetColumn.detailSettings,
|
||||
codeCategory: targetColumn.codeCategory,
|
||||
});
|
||||
|
||||
if (targetColumn.detailSettings) {
|
||||
try {
|
||||
const settings =
|
||||
typeof targetColumn.detailSettings === "string"
|
||||
? JSON.parse(targetColumn.detailSettings)
|
||||
: targetColumn.detailSettings;
|
||||
|
||||
console.log("🔍 [useTableColumnHierarchy] 파싱된 settings:", settings);
|
||||
|
||||
hierarchyRole = settings.hierarchyRole;
|
||||
hierarchyParentField = settings.hierarchyParentField;
|
||||
} catch (e) {
|
||||
console.log("🔍 [useTableColumnHierarchy] JSON 파싱 실패:", e);
|
||||
// JSON 파싱 실패 시 무시
|
||||
}
|
||||
}
|
||||
|
||||
// hierarchyParentField가 없으면 같은 codeCategory를 가진 상위 역할 컬럼을 자동으로 찾음
|
||||
if (hierarchyRole && !hierarchyParentField && targetColumn.codeCategory) {
|
||||
const roleOrder = { large: 0, medium: 1, small: 2 };
|
||||
const currentOrder = roleOrder[hierarchyRole];
|
||||
|
||||
if (currentOrder > 0) {
|
||||
// 같은 codeCategory를 가진 컬럼들 중에서 상위 역할을 찾음
|
||||
const parentRole = currentOrder === 1 ? "large" : "medium";
|
||||
|
||||
const parentColumn = columns.find((col) => {
|
||||
if (col.codeCategory !== targetColumn.codeCategory) return false;
|
||||
|
||||
try {
|
||||
const colSettings =
|
||||
typeof col.detailSettings === "string" ? JSON.parse(col.detailSettings) : col.detailSettings;
|
||||
return colSettings?.hierarchyRole === parentRole;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
if (parentColumn) {
|
||||
hierarchyParentField = parentColumn.columnName;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
hierarchyRole,
|
||||
hierarchyParentField,
|
||||
codeCategory: targetColumn.codeCategory,
|
||||
};
|
||||
},
|
||||
enabled: !!(tableName && columnName),
|
||||
staleTime: 10 * 60 * 1000,
|
||||
gcTime: 30 * 60 * 1000,
|
||||
});
|
||||
}
|
||||
|
||||
// 코드 옵션 조회 (select용)
|
||||
export function useCodeOptions(codeCategory?: string, enabled: boolean = true, menuObjid?: number) {
|
||||
const query = useQuery({
|
||||
queryKey: menuObjid
|
||||
? [...queryKeys.codes.options(codeCategory || ""), 'menu', menuObjid]
|
||||
queryKey: menuObjid
|
||||
? [...queryKeys.codes.options(codeCategory || ""), "menu", menuObjid]
|
||||
: queryKeys.codes.options(codeCategory || ""),
|
||||
queryFn: async () => {
|
||||
if (!codeCategory || codeCategory === "none") return [];
|
||||
|
||||
console.log(`🔍 [useCodeOptions] 코드 옵션 조회 시작:`, {
|
||||
console.log("🔍 [useCodeOptions] 코드 옵션 조회 시작:", {
|
||||
codeCategory,
|
||||
menuObjid,
|
||||
hasMenuObjid: !!menuObjid,
|
||||
});
|
||||
|
||||
const response = await commonCodeApi.codes.getList(codeCategory, {
|
||||
const response = await commonCodeApi.codes.getList(codeCategory, {
|
||||
isActive: true,
|
||||
menuObjid
|
||||
menuObjid,
|
||||
});
|
||||
|
||||
console.log(`📦 [useCodeOptions] API 응답:`, {
|
||||
console.log("📦 [useCodeOptions] API 응답:", {
|
||||
codeCategory,
|
||||
menuObjid,
|
||||
success: response.success,
|
||||
|
|
@ -79,17 +160,32 @@ export function useCodeOptions(codeCategory?: string, enabled: boolean = true, m
|
|||
if (response.success && response.data) {
|
||||
const options = response.data.map((code: any) => {
|
||||
const actualValue = code.code || code.CODE || code.value || code.code_value || code.codeValue;
|
||||
const actualLabel = code.codeName || code.code_name || code.name || code.CODE_NAME ||
|
||||
code.NAME || code.label || code.LABEL || code.text || code.title ||
|
||||
code.description || actualValue;
|
||||
const actualLabel =
|
||||
code.codeName ||
|
||||
code.code_name ||
|
||||
code.name ||
|
||||
code.CODE_NAME ||
|
||||
code.NAME ||
|
||||
code.label ||
|
||||
code.LABEL ||
|
||||
code.text ||
|
||||
code.title ||
|
||||
code.description ||
|
||||
actualValue;
|
||||
|
||||
// 계층구조 정보 포함
|
||||
const depth = code.depth ?? 1;
|
||||
const parentCodeValue = code.parentCodeValue || code.parent_code_value || null;
|
||||
|
||||
return {
|
||||
value: actualValue,
|
||||
label: actualLabel,
|
||||
depth,
|
||||
parentCodeValue,
|
||||
};
|
||||
});
|
||||
|
||||
console.log(`✅ [useCodeOptions] 옵션 변환 완료:`, {
|
||||
console.log("✅ [useCodeOptions] 옵션 변환 완료:", {
|
||||
codeCategory,
|
||||
menuObjid,
|
||||
optionsCount: options.length,
|
||||
|
|
@ -140,15 +236,8 @@ export function useUpdateCode() {
|
|||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: ({
|
||||
categoryCode,
|
||||
codeValue,
|
||||
data,
|
||||
}: {
|
||||
categoryCode: string;
|
||||
codeValue: string;
|
||||
data: any;
|
||||
}) => commonCodeApi.codes.update(categoryCode, codeValue, data),
|
||||
mutationFn: ({ categoryCode, codeValue, data }: { categoryCode: string; codeValue: string; data: any }) =>
|
||||
commonCodeApi.codes.update(categoryCode, codeValue, data),
|
||||
onSuccess: (_, variables) => {
|
||||
// 해당 코드 상세 쿼리 무효화
|
||||
queryClient.invalidateQueries({
|
||||
|
|
@ -247,4 +336,4 @@ export function useReorderCodes() {
|
|||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -196,3 +196,4 @@ export function applyAutoFillToFormData(
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -166,4 +166,62 @@ export const commonCodeApi = {
|
|||
return response.data;
|
||||
},
|
||||
},
|
||||
|
||||
// 계층구조 코드 API
|
||||
hierarchy: {
|
||||
/**
|
||||
* 계층구조 코드 조회
|
||||
* @param categoryCode 카테고리 코드
|
||||
* @param parentCodeValue 부모 코드값 (빈 문자열이면 최상위 코드)
|
||||
* @param depth 특정 깊이만 조회 (선택)
|
||||
* @param menuObjid 메뉴 OBJID (선택)
|
||||
*/
|
||||
async getHierarchicalCodes(
|
||||
categoryCode: string,
|
||||
parentCodeValue?: string | null,
|
||||
depth?: number,
|
||||
menuObjid?: number
|
||||
): Promise<ApiResponse<CodeInfo[]>> {
|
||||
const searchParams = new URLSearchParams();
|
||||
|
||||
if (parentCodeValue !== undefined && parentCodeValue !== null) {
|
||||
searchParams.append("parentCodeValue", parentCodeValue);
|
||||
}
|
||||
if (depth !== undefined) searchParams.append("depth", depth.toString());
|
||||
if (menuObjid !== undefined) searchParams.append("menuObjid", menuObjid.toString());
|
||||
|
||||
const queryString = searchParams.toString();
|
||||
const url = `/common-codes/categories/${categoryCode}/hierarchy${queryString ? `?${queryString}` : ""}`;
|
||||
|
||||
const response = await apiClient.get(url);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* 코드 트리 조회 (전체 계층구조)
|
||||
*/
|
||||
async getCodeTree(
|
||||
categoryCode: string,
|
||||
menuObjid?: number
|
||||
): Promise<ApiResponse<{ flat: CodeInfo[]; tree: CodeInfo[] }>> {
|
||||
const searchParams = new URLSearchParams();
|
||||
if (menuObjid !== undefined) searchParams.append("menuObjid", menuObjid.toString());
|
||||
|
||||
const queryString = searchParams.toString();
|
||||
const url = `/common-codes/categories/${categoryCode}/tree${queryString ? `?${queryString}` : ""}`;
|
||||
|
||||
const response = await apiClient.get(url);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* 자식 코드 존재 여부 확인
|
||||
*/
|
||||
async hasChildren(categoryCode: string, codeValue: string): Promise<ApiResponse<{ hasChildren: boolean }>> {
|
||||
const response = await apiClient.get(
|
||||
`/common-codes/categories/${categoryCode}/codes/${codeValue}/has-children`
|
||||
);
|
||||
return response.data;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -413,8 +413,9 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
|
|||
groupedData: props.groupedData, // ✅ 언더스코어 제거하여 직접 전달
|
||||
_groupedData: props.groupedData, // 하위 호환성 유지
|
||||
// 🆕 UniversalFormModal용 initialData 전달
|
||||
// originalData를 사용 (최초 전달된 값, formData는 계속 변경되므로 사용하면 안됨)
|
||||
_initialData: originalData || formData,
|
||||
// originalData가 비어있지 않으면 originalData 사용, 아니면 formData 사용
|
||||
// 생성 모드에서는 originalData가 빈 객체이므로 formData를 사용해야 함
|
||||
_initialData: (originalData && Object.keys(originalData).length > 0) ? originalData : formData,
|
||||
_originalData: originalData,
|
||||
// 🆕 탭 관련 정보 전달 (탭 내부의 테이블 컴포넌트에서 사용)
|
||||
parentTabId: props.parentTabId,
|
||||
|
|
|
|||
|
|
@ -315,16 +315,17 @@ export default function MapConfigPanel({ config, onChange }: MapConfigPanelProps
|
|||
{/* 라벨 컬럼 (선택) */}
|
||||
<div className="space-y-2 mb-3">
|
||||
<Label>라벨 컬럼 (선택사항)</Label>
|
||||
{/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__none__" 사용 */}
|
||||
<Select
|
||||
value={config.dataSource?.labelColumn || ""}
|
||||
onValueChange={(value) => updateConfig("dataSource.labelColumn", value)}
|
||||
value={config.dataSource?.labelColumn || "__none__"}
|
||||
onValueChange={(value) => updateConfig("dataSource.labelColumn", value === "__none__" ? "" : value)}
|
||||
disabled={isLoadingColumns || !config.dataSource?.tableName}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="라벨 컬럼 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">선택 안 함</SelectItem>
|
||||
<SelectItem value="__none__">선택 안 함</SelectItem>
|
||||
{columns.map((col) => (
|
||||
<SelectItem key={col.column_name} value={col.column_name}>
|
||||
{col.column_name} ({col.data_type})
|
||||
|
|
@ -337,16 +338,17 @@ export default function MapConfigPanel({ config, onChange }: MapConfigPanelProps
|
|||
{/* 상태 컬럼 (선택) */}
|
||||
<div className="space-y-2 mb-3">
|
||||
<Label>상태 컬럼 (선택사항)</Label>
|
||||
{/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__none__" 사용 */}
|
||||
<Select
|
||||
value={config.dataSource?.statusColumn || ""}
|
||||
onValueChange={(value) => updateConfig("dataSource.statusColumn", value)}
|
||||
value={config.dataSource?.statusColumn || "__none__"}
|
||||
onValueChange={(value) => updateConfig("dataSource.statusColumn", value === "__none__" ? "" : value)}
|
||||
disabled={isLoadingColumns || !config.dataSource?.tableName}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="상태 컬럼 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">선택 안 함</SelectItem>
|
||||
<SelectItem value="__none__">선택 안 함</SelectItem>
|
||||
{columns.map((col) => (
|
||||
<SelectItem key={col.column_name} value={col.column_name}>
|
||||
{col.column_name} ({col.data_type})
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import React, { useState, useEffect, useRef, useMemo } from "react";
|
||||
import { filterDOMProps } from "@/lib/utils/domPropsFilter";
|
||||
import { useCodeOptions, useTableCodeCategory } from "@/hooks/queries/useCodes";
|
||||
import { useCodeOptions, useTableCodeCategory, useTableColumnHierarchy } from "@/hooks/queries/useCodes";
|
||||
import { cn } from "@/lib/registry/components/common/inputStyles";
|
||||
import { useScreenContextOptional } from "@/contexts/ScreenContext";
|
||||
import type { DataProvidable } from "@/types/data-transfer";
|
||||
import { useCascadingDropdown } from "@/hooks/useCascadingDropdown";
|
||||
import { HierarchicalCodeSelect } from "@/components/common/HierarchicalCodeSelect";
|
||||
|
||||
interface Option {
|
||||
value: string;
|
||||
|
|
@ -58,7 +59,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
// 🆕 읽기전용/비활성화 상태 확인
|
||||
const isReadonly = (component as any).readonly || (props as any).readonly || componentConfig?.readonly || false;
|
||||
const isDisabled = (component as any).disabled || (props as any).disabled || componentConfig?.disabled || false;
|
||||
const isFieldDisabled = isDesignMode || isReadonly || isDisabled;
|
||||
const isFieldDisabledBase = isDesignMode || isReadonly || isDisabled;
|
||||
// 화면 컨텍스트 (데이터 제공자로 등록)
|
||||
const screenContext = useScreenContextOptional();
|
||||
|
||||
|
|
@ -94,7 +95,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
console.log(" componentConfig 전체:", componentConfig);
|
||||
console.log(" component.componentConfig 전체:", component.componentConfig);
|
||||
console.log(" =======================================");
|
||||
|
||||
|
||||
// 다중선택이 활성화되었는지 알림
|
||||
if (isMultiple) {
|
||||
console.log("✅ 다중선택 모드 활성화됨!");
|
||||
|
|
@ -114,7 +115,10 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
const [selectedValues, setSelectedValues] = useState<string[]>(() => {
|
||||
const initialValue = externalValue || config?.value || "";
|
||||
if (isMultiple && typeof initialValue === "string" && initialValue) {
|
||||
return initialValue.split(",").map(v => v.trim()).filter(v => v);
|
||||
return initialValue
|
||||
.split(",")
|
||||
.map((v) => v.trim())
|
||||
.filter((v) => v);
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
|
@ -122,7 +126,6 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
// autocomplete의 경우 검색어 관리
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
|
||||
const selectRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 안정적인 쿼리 키를 위한 메모이제이션
|
||||
|
|
@ -133,6 +136,9 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
// 🚀 React Query: 테이블 코드 카테고리 조회
|
||||
const { data: dynamicCodeCategory } = useTableCodeCategory(stableTableName, stableColumnName);
|
||||
|
||||
// 🆕 React Query: 테이블 컬럼의 계층구조 설정 조회
|
||||
const { data: columnHierarchy } = useTableColumnHierarchy(stableTableName, stableColumnName);
|
||||
|
||||
// 코드 카테고리 결정: 동적 카테고리 > 설정 카테고리 (메모이제이션)
|
||||
const codeCategory = useMemo(() => {
|
||||
const category = dynamicCodeCategory || staticCodeCategory;
|
||||
|
|
@ -150,6 +156,11 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
isFetching,
|
||||
} = useCodeOptions(codeCategory, isCodeCategoryValid, menuObjid);
|
||||
|
||||
// 🆕 계층구조 코드 자동 감지: 비활성화 (테이블 타입관리에서 hierarchyRole 설정 방식 사용)
|
||||
// 기존: depth > 1인 코드가 있으면 자동으로 HierarchicalCodeSelect 사용
|
||||
// 변경: 항상 false 반환하여 자동 감지 비활성화
|
||||
const hasHierarchicalCodes = false;
|
||||
|
||||
// 🆕 카테고리 타입 (category webType)을 위한 옵션 로딩
|
||||
const [categoryOptions, setCategoryOptions] = useState<Option[]>([]);
|
||||
const [isLoadingCategories, setIsLoadingCategories] = useState(false);
|
||||
|
|
@ -160,42 +171,125 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
const categoryRelationCode = config?.categoryRelationCode || componentConfig?.categoryRelationCode;
|
||||
const cascadingRole = config?.cascadingRole || componentConfig?.cascadingRole || "child";
|
||||
const cascadingParentField = config?.cascadingParentField || componentConfig?.cascadingParentField;
|
||||
|
||||
|
||||
// 🆕 계층구조 역할 설정 (대분류/중분류/소분류)
|
||||
// 1순위: 동적으로 조회된 값 (테이블 타입관리에서 설정)
|
||||
// 2순위: config에서 전달된 값
|
||||
const hierarchyRole = columnHierarchy?.hierarchyRole || config?.hierarchyRole || componentConfig?.hierarchyRole;
|
||||
const hierarchyParentField = columnHierarchy?.hierarchyParentField || config?.hierarchyParentField || componentConfig?.hierarchyParentField;
|
||||
|
||||
// 디버깅 로그
|
||||
console.log("🔍 [SelectBasic] 계층구조 설정:", {
|
||||
columnName: component.columnName,
|
||||
tableName: component.tableName,
|
||||
columnHierarchy,
|
||||
hierarchyRole,
|
||||
hierarchyParentField,
|
||||
codeCategory,
|
||||
});
|
||||
|
||||
// 🆕 자식 역할일 때 부모 값 추출 (단일 또는 다중)
|
||||
const rawParentValue = cascadingRole === "child" && cascadingParentField && formData
|
||||
? formData[cascadingParentField]
|
||||
: undefined;
|
||||
|
||||
const rawParentValue =
|
||||
cascadingRole === "child" && cascadingParentField && formData ? formData[cascadingParentField] : undefined;
|
||||
|
||||
// 🆕 계층구조 역할에 따른 부모 값 추출
|
||||
const hierarchyParentValue = useMemo(() => {
|
||||
if (!hierarchyRole || hierarchyRole === "large" || !hierarchyParentField || !formData) {
|
||||
return undefined;
|
||||
}
|
||||
return formData[hierarchyParentField] as string | undefined;
|
||||
}, [hierarchyRole, hierarchyParentField, formData]);
|
||||
|
||||
// 🆕 계층구조에서 상위 항목 미선택 시 비활성화
|
||||
const isHierarchyDisabled = (hierarchyRole === "medium" || hierarchyRole === "small") && !hierarchyParentValue;
|
||||
|
||||
// 최종 비활성화 상태
|
||||
const isFieldDisabled = isFieldDisabledBase || isHierarchyDisabled;
|
||||
|
||||
console.log("🔍 [SelectBasic] 비활성화 상태:", {
|
||||
columnName: component.columnName,
|
||||
hierarchyRole,
|
||||
hierarchyParentValue,
|
||||
isHierarchyDisabled,
|
||||
isFieldDisabled,
|
||||
});
|
||||
|
||||
// 🆕 계층구조 역할에 따라 옵션 필터링
|
||||
const filteredCodeOptions = useMemo(() => {
|
||||
console.log("🔍 [SelectBasic] 옵션 필터링:", {
|
||||
columnName: component.columnName,
|
||||
hierarchyRole,
|
||||
hierarchyParentField,
|
||||
hierarchyParentValue,
|
||||
codeOptionsCount: codeOptions?.length || 0,
|
||||
sampleOptions: codeOptions?.slice(0, 3),
|
||||
});
|
||||
|
||||
if (!hierarchyRole || !codeOptions || codeOptions.length === 0) {
|
||||
console.log("🔍 [SelectBasic] 필터링 스킵 - hierarchyRole 없음 또는 옵션 없음");
|
||||
return codeOptions;
|
||||
}
|
||||
|
||||
// 대분류: depth = 1 (최상위)
|
||||
if (hierarchyRole === "large") {
|
||||
const filtered = codeOptions.filter((opt: any) => {
|
||||
const depth = opt.depth || 1;
|
||||
const parentCodeValue = opt.parentCodeValue || opt.parent_code_value;
|
||||
return depth === 1 || !parentCodeValue;
|
||||
});
|
||||
console.log("🔍 [SelectBasic] 대분류 필터링 결과:", filtered.length, "개");
|
||||
return filtered;
|
||||
}
|
||||
|
||||
// 중분류/소분류: 부모 값이 있어야 함
|
||||
if ((hierarchyRole === "medium" || hierarchyRole === "small") && hierarchyParentValue) {
|
||||
const filtered = codeOptions.filter((opt: any) => {
|
||||
const parentCodeValue = opt.parentCodeValue || opt.parent_code_value;
|
||||
return parentCodeValue === hierarchyParentValue;
|
||||
});
|
||||
console.log("🔍 [SelectBasic] 중/소분류 필터링 결과:", filtered.length, "개");
|
||||
return filtered;
|
||||
}
|
||||
|
||||
// 부모 값이 없으면 빈 배열 반환 (선택 불가 상태)
|
||||
if (hierarchyRole === "medium" || hierarchyRole === "small") {
|
||||
console.log("🔍 [SelectBasic] 중/소분류 - 부모값 없음, 빈 배열 반환");
|
||||
return [];
|
||||
}
|
||||
|
||||
return codeOptions;
|
||||
}, [codeOptions, hierarchyRole, hierarchyParentValue, hierarchyParentField, component.columnName]);
|
||||
|
||||
// 🆕 부모값이 콤마로 구분된 문자열이면 배열로 변환 (다중 선택 지원)
|
||||
const parentValues: string[] | undefined = useMemo(() => {
|
||||
if (!rawParentValue) return undefined;
|
||||
|
||||
|
||||
// 이미 배열인 경우
|
||||
if (Array.isArray(rawParentValue)) {
|
||||
return rawParentValue.map(v => String(v)).filter(v => v);
|
||||
return rawParentValue.map((v) => String(v)).filter((v) => v);
|
||||
}
|
||||
|
||||
|
||||
// 콤마로 구분된 문자열인 경우
|
||||
const strValue = String(rawParentValue);
|
||||
if (strValue.includes(',')) {
|
||||
return strValue.split(',').map(v => v.trim()).filter(v => v);
|
||||
if (strValue.includes(",")) {
|
||||
return strValue
|
||||
.split(",")
|
||||
.map((v) => v.trim())
|
||||
.filter((v) => v);
|
||||
}
|
||||
|
||||
|
||||
// 단일 값
|
||||
return [strValue];
|
||||
}, [rawParentValue]);
|
||||
|
||||
|
||||
// 🆕 연쇄 드롭다운 훅 사용 (역할에 따라 다른 옵션 로드) - 다중 부모값 지원
|
||||
const {
|
||||
options: cascadingOptions,
|
||||
loading: isLoadingCascading,
|
||||
} = useCascadingDropdown({
|
||||
const { options: cascadingOptions, loading: isLoadingCascading } = useCascadingDropdown({
|
||||
relationCode: cascadingRelationCode,
|
||||
categoryRelationCode: categoryRelationCode, // 🆕 카테고리 값 연쇄관계 지원
|
||||
role: cascadingRole, // 부모/자식 역할 전달
|
||||
parentValues: parentValues, // 다중 부모값
|
||||
});
|
||||
|
||||
|
||||
// 🆕 카테고리 값 연쇄관계가 활성화되었는지 확인
|
||||
const hasCategoryRelation = !!categoryRelationCode;
|
||||
|
||||
|
|
@ -206,32 +300,32 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
columnName: component.columnName,
|
||||
webType,
|
||||
});
|
||||
|
||||
|
||||
setIsLoadingCategories(true);
|
||||
|
||||
|
||||
import("@/lib/api/tableCategoryValue").then(({ getCategoryValues }) => {
|
||||
getCategoryValues(component.tableName!, component.columnName!)
|
||||
.then((response) => {
|
||||
console.log("🔍 [SelectBasic] 카테고리 API 응답:", response);
|
||||
|
||||
|
||||
if (response.success && response.data) {
|
||||
console.log("🔍 [SelectBasic] 원본 데이터 샘플:", {
|
||||
firstItem: response.data[0],
|
||||
keys: response.data[0] ? Object.keys(response.data[0]) : [],
|
||||
});
|
||||
|
||||
|
||||
const activeValues = response.data.filter((v) => v.isActive !== false);
|
||||
const options = activeValues.map((v) => ({
|
||||
value: v.valueCode,
|
||||
label: v.valueLabel || v.valueCode,
|
||||
}));
|
||||
|
||||
|
||||
console.log("✅ [SelectBasic] 카테고리 옵션 설정:", {
|
||||
activeValuesCount: activeValues.length,
|
||||
options,
|
||||
sampleOption: options[0],
|
||||
});
|
||||
|
||||
|
||||
setCategoryOptions(options);
|
||||
} else {
|
||||
console.error("❌ [SelectBasic] 카테고리 응답 실패:", response);
|
||||
|
|
@ -264,7 +358,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
// 외부 value prop 변경 시 selectedValue 업데이트
|
||||
useEffect(() => {
|
||||
const newValue = externalValue || config?.value || "";
|
||||
|
||||
|
||||
console.log("🔍 [SelectBasic] 외부 값 변경 감지:", {
|
||||
componentId: component.id,
|
||||
columnName: (component as any).columnName,
|
||||
|
|
@ -275,13 +369,16 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
externalValue,
|
||||
"config.value": config?.value,
|
||||
});
|
||||
|
||||
|
||||
// 다중선택 모드인 경우
|
||||
if (isMultiple) {
|
||||
if (typeof newValue === "string" && newValue) {
|
||||
const values = newValue.split(",").map(v => v.trim()).filter(v => v);
|
||||
const values = newValue
|
||||
.split(",")
|
||||
.map((v) => v.trim())
|
||||
.filter((v) => v);
|
||||
const currentValuesStr = selectedValues.join(",");
|
||||
|
||||
|
||||
if (newValue !== currentValuesStr) {
|
||||
console.log("✅ [SelectBasic] 다중선택 값 업데이트:", {
|
||||
from: selectedValues,
|
||||
|
|
@ -310,23 +407,25 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
const dataProvider: DataProvidable = {
|
||||
componentId: component.id,
|
||||
componentType: "select",
|
||||
|
||||
|
||||
getSelectedData: () => {
|
||||
// 현재 선택된 값을 배열로 반환
|
||||
const fieldName = component.columnName || "selectedValue";
|
||||
return [{
|
||||
[fieldName]: selectedValue,
|
||||
value: selectedValue,
|
||||
label: selectedLabel,
|
||||
}];
|
||||
return [
|
||||
{
|
||||
[fieldName]: selectedValue,
|
||||
value: selectedValue,
|
||||
label: selectedLabel,
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
|
||||
getAllData: () => {
|
||||
// 모든 옵션 반환
|
||||
const configOptions = config.options || [];
|
||||
return [...codeOptions, ...categoryOptions, ...configOptions];
|
||||
},
|
||||
|
||||
|
||||
clearSelection: () => {
|
||||
setSelectedValue("");
|
||||
setSelectedLabel("");
|
||||
|
|
@ -340,7 +439,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
useEffect(() => {
|
||||
if (screenContext && component.id) {
|
||||
screenContext.registerDataProvider(component.id, dataProvider);
|
||||
|
||||
|
||||
return () => {
|
||||
screenContext.unregisterDataProvider(component.id);
|
||||
};
|
||||
|
|
@ -442,9 +541,18 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
if (cascadingRelationCode) {
|
||||
return cascadingOptions;
|
||||
}
|
||||
|
||||
|
||||
const configOptions = config.options || [];
|
||||
return [...codeOptions, ...categoryOptions, ...configOptions];
|
||||
// 🆕 계층구조 역할이 설정된 경우 필터링된 옵션 사용
|
||||
console.log("🔍 [SelectBasic] getAllOptions 호출:", {
|
||||
columnName: component.columnName,
|
||||
hierarchyRole,
|
||||
codeOptionsCount: codeOptions?.length || 0,
|
||||
filteredCodeOptionsCount: filteredCodeOptions?.length || 0,
|
||||
categoryOptionsCount: categoryOptions?.length || 0,
|
||||
configOptionsCount: configOptions?.length || 0,
|
||||
});
|
||||
return [...filteredCodeOptions, ...categoryOptions, ...configOptions];
|
||||
};
|
||||
|
||||
const allOptions = getAllOptions();
|
||||
|
|
@ -482,6 +590,45 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
|
||||
// 세부 타입별 렌더링
|
||||
const renderSelectByWebType = () => {
|
||||
// 🆕 계층구조 코드: 자동 감지 또는 수동 설정 시 1,2,3단계 셀렉트박스로 렌더링
|
||||
// 단, hierarchyRole이 설정된 경우(개별 컬럼별 계층구조)는 일반 셀렉트 사용
|
||||
const shouldUseHierarchical = !hierarchyRole && (config?.useHierarchicalCode || hasHierarchicalCodes);
|
||||
|
||||
if (shouldUseHierarchical && codeCategory) {
|
||||
const maxDepth = config?.hierarchicalMaxDepth || 3;
|
||||
const labels = config?.hierarchicalLabels || ["대분류", "중분류", "소분류"];
|
||||
const placeholders = config?.hierarchicalPlaceholders || ["선택하세요", "선택하세요", "선택하세요"];
|
||||
const isInline = config?.hierarchicalInline || false;
|
||||
|
||||
return (
|
||||
<HierarchicalCodeSelect
|
||||
categoryCode={codeCategory}
|
||||
menuObjid={menuObjid}
|
||||
maxDepth={maxDepth}
|
||||
value={selectedValue}
|
||||
onChange={(codeValue: string) => {
|
||||
setSelectedValue(codeValue);
|
||||
// 라벨 업데이트 - 선택된 값을 라벨로도 설정 (계층구조에서는 값=라벨인 경우가 많음)
|
||||
setSelectedLabel(codeValue);
|
||||
|
||||
// 디자인 모드에서의 컴포넌트 속성 업데이트
|
||||
if (onUpdate) {
|
||||
onUpdate("value", codeValue);
|
||||
}
|
||||
|
||||
// 인터랙티브 모드에서 폼 데이터 업데이트
|
||||
if (isInteractive && onFormDataChange && component.columnName) {
|
||||
onFormDataChange(component.columnName, codeValue);
|
||||
}
|
||||
}}
|
||||
labels={labels as [string, string?, string?]}
|
||||
placeholders={placeholders as [string, string?, string?]}
|
||||
className={isInline ? "flex-row gap-2" : "flex-col gap-2"}
|
||||
disabled={isFieldDisabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// code-radio: 라디오 버튼으로 코드 선택
|
||||
if (webType === "code-radio") {
|
||||
return (
|
||||
|
|
@ -527,7 +674,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
"h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 transition-all outline-none",
|
||||
!isFieldDisabled && "hover:border-orange-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200",
|
||||
isSelected && "ring-2 ring-orange-500",
|
||||
isFieldDisabled && "bg-gray-100 cursor-not-allowed",
|
||||
isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
|
||||
)}
|
||||
readOnly={isFieldDisabled}
|
||||
disabled={isFieldDisabled}
|
||||
|
|
@ -565,7 +712,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
!isFieldDisabled && "cursor-pointer hover:border-orange-400",
|
||||
isSelected && "ring-2 ring-orange-500",
|
||||
isOpen && "border-orange-500",
|
||||
isFieldDisabled && "bg-gray-100 cursor-not-allowed",
|
||||
isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
|
||||
)}
|
||||
onClick={handleToggle}
|
||||
style={{ pointerEvents: isFieldDisabled ? "none" : "auto" }}
|
||||
|
|
@ -612,7 +759,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
"box-border flex h-full w-full flex-wrap gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2",
|
||||
!isFieldDisabled && "hover:border-orange-400",
|
||||
isSelected && "ring-2 ring-orange-500",
|
||||
isFieldDisabled && "bg-gray-100 cursor-not-allowed",
|
||||
isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
|
||||
)}
|
||||
>
|
||||
{selectedValues.map((val, idx) => {
|
||||
|
|
@ -673,7 +820,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
"h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 transition-all outline-none",
|
||||
!isFieldDisabled && "hover:border-orange-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200",
|
||||
isSelected && "ring-2 ring-orange-500",
|
||||
isFieldDisabled && "bg-gray-100 cursor-not-allowed",
|
||||
isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
|
||||
)}
|
||||
readOnly={isFieldDisabled}
|
||||
disabled={isFieldDisabled}
|
||||
|
|
@ -713,7 +860,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
!isFieldDisabled && "cursor-pointer hover:border-orange-400",
|
||||
isSelected && "ring-2 ring-orange-500",
|
||||
isOpen && "border-orange-500",
|
||||
isFieldDisabled && "bg-gray-100 cursor-not-allowed",
|
||||
isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
|
||||
)}
|
||||
onClick={handleToggle}
|
||||
style={{ pointerEvents: isFieldDisabled ? "none" : "auto" }}
|
||||
|
|
@ -770,12 +917,12 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
"box-border flex w-full flex-wrap items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2",
|
||||
!isFieldDisabled && "hover:border-orange-400",
|
||||
isSelected && "ring-2 ring-orange-500",
|
||||
isFieldDisabled && "bg-gray-100 cursor-not-allowed",
|
||||
isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
|
||||
)}
|
||||
onClick={() => !isFieldDisabled && setIsOpen(true)}
|
||||
style={{
|
||||
style={{
|
||||
pointerEvents: isFieldDisabled ? "none" : "auto",
|
||||
height: "100%"
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{selectedValues.map((val, idx) => {
|
||||
|
|
@ -801,19 +948,17 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
</span>
|
||||
);
|
||||
})}
|
||||
{selectedValues.length === 0 && (
|
||||
<span className="text-gray-500">{placeholder}</span>
|
||||
)}
|
||||
{selectedValues.length === 0 && <span className="text-gray-500">{placeholder}</span>}
|
||||
</div>
|
||||
{isOpen && !isFieldDisabled && (
|
||||
<div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
|
||||
{(isLoadingCodes || isLoadingCategories) ? (
|
||||
{isLoadingCodes || isLoadingCategories ? (
|
||||
<div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
|
||||
) : allOptions.length > 0 ? (
|
||||
(() => {
|
||||
// 부모별 그룹핑 (카테고리 연쇄관계인 경우)
|
||||
const hasParentInfo = allOptions.some((opt: any) => opt.parent_label);
|
||||
|
||||
|
||||
if (hasParentInfo) {
|
||||
// 부모별로 그룹핑
|
||||
const groupedOptions: Record<string, { parentLabel: string; options: typeof allOptions }> = {};
|
||||
|
|
@ -825,11 +970,11 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
}
|
||||
groupedOptions[parentKey].options.push(opt);
|
||||
});
|
||||
|
||||
|
||||
return Object.entries(groupedOptions).map(([parentKey, group]) => (
|
||||
<div key={parentKey}>
|
||||
{/* 그룹 헤더 */}
|
||||
<div className="sticky top-0 bg-gray-100 px-3 py-1.5 text-xs font-semibold text-gray-600 border-b">
|
||||
<div className="sticky top-0 border-b bg-gray-100 px-3 py-1.5 text-xs font-semibold text-gray-600">
|
||||
{group.parentLabel}
|
||||
</div>
|
||||
{/* 그룹 옵션들 */}
|
||||
|
|
@ -840,7 +985,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
key={`${option.value}-${index}`}
|
||||
className={cn(
|
||||
"cursor-pointer px-3 py-2 text-gray-900 hover:bg-gray-100",
|
||||
isOptionSelected && "bg-blue-50 font-medium"
|
||||
isOptionSelected && "bg-blue-50 font-medium",
|
||||
)}
|
||||
onClick={() => {
|
||||
const newVals = isOptionSelected
|
||||
|
|
@ -869,7 +1014,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
onFormDataChange(component.columnName, newValue);
|
||||
}
|
||||
}}
|
||||
className="h-4 w-4 pointer-events-auto"
|
||||
className="pointer-events-auto h-4 w-4"
|
||||
/>
|
||||
<span>{option.label || option.value}</span>
|
||||
</div>
|
||||
|
|
@ -879,7 +1024,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
</div>
|
||||
));
|
||||
}
|
||||
|
||||
|
||||
// 부모 정보가 없으면 기존 방식
|
||||
return allOptions.map((option, index) => {
|
||||
const isOptionSelected = selectedValues.includes(option.value);
|
||||
|
|
@ -888,7 +1033,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
key={`${option.value}-${index}`}
|
||||
className={cn(
|
||||
"cursor-pointer px-3 py-2 text-gray-900 hover:bg-gray-100",
|
||||
isOptionSelected && "bg-blue-50 font-medium"
|
||||
isOptionSelected && "bg-blue-50 font-medium",
|
||||
)}
|
||||
onClick={() => {
|
||||
const newVals = isOptionSelected
|
||||
|
|
@ -917,7 +1062,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
onFormDataChange(component.columnName, newValue);
|
||||
}
|
||||
}}
|
||||
className="h-4 w-4 pointer-events-auto"
|
||||
className="pointer-events-auto h-4 w-4"
|
||||
/>
|
||||
<span>{option.label || option.value}</span>
|
||||
</div>
|
||||
|
|
@ -933,7 +1078,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// 단일선택 모드
|
||||
return (
|
||||
<div className="w-full">
|
||||
|
|
@ -943,7 +1088,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
!isFieldDisabled && "cursor-pointer hover:border-orange-400",
|
||||
isSelected && "ring-2 ring-orange-500",
|
||||
isOpen && "border-orange-500",
|
||||
isFieldDisabled && "bg-gray-100 cursor-not-allowed",
|
||||
isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
|
||||
)}
|
||||
onClick={handleToggle}
|
||||
style={{ pointerEvents: isFieldDisabled ? "none" : "auto" }}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
const [cascadingEnabled, setCascadingEnabled] = useState(!!config.cascadingRelationCode);
|
||||
const [relationList, setRelationList] = useState<CascadingRelation[]>([]);
|
||||
const [loadingRelations, setLoadingRelations] = useState(false);
|
||||
|
||||
|
||||
// 🆕 카테고리 값 연쇄관계 상태
|
||||
const [categoryRelationEnabled, setCategoryRelationEnabled] = useState(!!(config as any).categoryRelationCode);
|
||||
const [categoryRelationList, setCategoryRelationList] = useState<CategoryValueCascadingGroup[]>([]);
|
||||
|
|
@ -102,8 +102,8 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
setCascadingEnabled(enabled);
|
||||
if (!enabled) {
|
||||
// 비활성화 시 관계 설정 제거
|
||||
const newConfig = {
|
||||
...config,
|
||||
const newConfig = {
|
||||
...config,
|
||||
cascadingRelationCode: undefined,
|
||||
cascadingRole: undefined,
|
||||
cascadingParentField: undefined,
|
||||
|
|
@ -124,8 +124,8 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
setCategoryRelationEnabled(enabled);
|
||||
if (!enabled) {
|
||||
// 비활성화 시 관계 설정 제거
|
||||
const newConfig = {
|
||||
...config,
|
||||
const newConfig = {
|
||||
...config,
|
||||
categoryRelationCode: undefined,
|
||||
cascadingRole: undefined,
|
||||
cascadingParentField: undefined,
|
||||
|
|
@ -140,7 +140,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 🆕 같은 연쇄 관계의 부모 역할 컴포넌트 찾기
|
||||
const findParentComponent = (relationCode: string) => {
|
||||
console.log("🔍 findParentComponent 호출:", {
|
||||
|
|
@ -148,12 +148,12 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
allComponentsLength: allComponents?.length,
|
||||
currentComponentId: currentComponent?.id,
|
||||
});
|
||||
|
||||
|
||||
if (!allComponents || allComponents.length === 0) {
|
||||
console.log("❌ allComponents가 비어있음");
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
// 모든 컴포넌트의 cascading 설정 확인
|
||||
allComponents.forEach((comp: any) => {
|
||||
const compConfig = comp.componentConfig || {};
|
||||
|
|
@ -166,7 +166,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const found = allComponents.find((comp: any) => {
|
||||
const compConfig = comp.componentConfig || {};
|
||||
return (
|
||||
|
|
@ -175,7 +175,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
compConfig.cascadingRole === "parent"
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
console.log("🔍 찾은 부모 컴포넌트:", found);
|
||||
return found;
|
||||
};
|
||||
|
|
@ -183,7 +183,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
// 역할 변경 시 부모 필드 자동 감지
|
||||
const handleRoleChange = (role: "parent" | "child") => {
|
||||
let parentField = config.cascadingParentField;
|
||||
|
||||
|
||||
// 자식 역할 선택 시 부모 필드 자동 감지
|
||||
if (role === "child" && config.cascadingRelationCode) {
|
||||
const parentComp = findParentComponent(config.cascadingRelationCode);
|
||||
|
|
@ -192,9 +192,9 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
console.log("🔗 부모 필드 자동 감지:", parentField);
|
||||
}
|
||||
}
|
||||
|
||||
const newConfig = {
|
||||
...config,
|
||||
|
||||
const newConfig = {
|
||||
...config,
|
||||
cascadingRole: role,
|
||||
// 부모 역할일 때는 부모 필드 불필요, 자식일 때는 자동 감지된 값 또는 기존 값
|
||||
cascadingParentField: role === "parent" ? undefined : parentField,
|
||||
|
|
@ -203,13 +203,11 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
};
|
||||
|
||||
// 선택된 관계 정보
|
||||
const selectedRelation = relationList.find(r => r.relation_code === config.cascadingRelationCode);
|
||||
const selectedRelation = relationList.find((r) => r.relation_code === config.cascadingRelationCode);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="text-sm font-medium">
|
||||
select-basic 설정
|
||||
</div>
|
||||
<div className="text-sm font-medium">select-basic 설정</div>
|
||||
|
||||
{/* select 관련 설정 */}
|
||||
<div className="space-y-2">
|
||||
|
|
@ -259,23 +257,18 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
</div>
|
||||
|
||||
{/* 연쇄 드롭다운 설정 */}
|
||||
<div className="border-t pt-4 mt-4 space-y-3">
|
||||
<div className="mt-4 space-y-3 border-t pt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link2 className="h-4 w-4" />
|
||||
<Label className="text-sm font-medium">연쇄 드롭다운</Label>
|
||||
</div>
|
||||
<Switch
|
||||
checked={cascadingEnabled}
|
||||
onCheckedChange={handleCascadingToggle}
|
||||
/>
|
||||
<Switch checked={cascadingEnabled} onCheckedChange={handleCascadingToggle} />
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
다른 필드의 값에 따라 옵션이 동적으로 변경됩니다.
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs">다른 필드의 값에 따라 옵션이 동적으로 변경됩니다.</p>
|
||||
|
||||
{cascadingEnabled && (
|
||||
<div className="space-y-3 rounded-md border p-3 bg-muted/30">
|
||||
<div className="bg-muted/30 space-y-3 rounded-md border p-3">
|
||||
{/* 관계 선택 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">연쇄 관계 선택</Label>
|
||||
|
|
@ -326,66 +319,66 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
</Button>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
{config.cascadingRole === "parent"
|
||||
{config.cascadingRole === "parent"
|
||||
? "이 필드가 상위 선택 역할을 합니다. (예: 창고 선택)"
|
||||
: config.cascadingRole === "child"
|
||||
? "이 필드는 상위 필드 값에 따라 옵션이 변경됩니다. (예: 위치 선택)"
|
||||
: "이 필드의 역할을 선택하세요."}
|
||||
? "이 필드는 상위 필드 값에 따라 옵션이 변경됩니다. (예: 위치 선택)"
|
||||
: "이 필드의 역할을 선택하세요."}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 부모 필드 설정 (자식 역할일 때만) */}
|
||||
{config.cascadingRelationCode && config.cascadingRole === "child" && (() => {
|
||||
// 선택된 관계에서 부모 값 컬럼 가져오기
|
||||
const expectedParentColumn = selectedRelation?.parent_value_column;
|
||||
|
||||
// 부모 역할에 맞는 컴포넌트만 필터링
|
||||
const parentFieldCandidates = allComponents.filter((comp) => {
|
||||
// 현재 컴포넌트 제외
|
||||
if (currentComponent && comp.id === currentComponent.id) return false;
|
||||
// 관계에서 지정한 부모 컬럼명과 일치하는 컴포넌트만
|
||||
if (expectedParentColumn && comp.columnName !== expectedParentColumn) return false;
|
||||
// columnName이 있어야 함
|
||||
return !!comp.columnName;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">부모 필드 선택</Label>
|
||||
{expectedParentColumn && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
관계에서 지정된 부모 컬럼: <strong>{expectedParentColumn}</strong>
|
||||
</p>
|
||||
)}
|
||||
<Select
|
||||
value={config.cascadingParentField || ""}
|
||||
onValueChange={(value) => handleChange("cascadingParentField", value || undefined)}
|
||||
>
|
||||
<SelectTrigger className="text-xs">
|
||||
<SelectValue placeholder="부모 필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{parentFieldCandidates.map((comp) => (
|
||||
<SelectItem key={comp.id} value={comp.columnName}>
|
||||
{comp.label || comp.columnName} ({comp.columnName})
|
||||
</SelectItem>
|
||||
))}
|
||||
{parentFieldCandidates.length === 0 && (
|
||||
<div className="px-2 py-1.5 text-xs text-muted-foreground">
|
||||
{expectedParentColumn
|
||||
? `'${expectedParentColumn}' 컬럼을 가진 컴포넌트가 화면에 없습니다`
|
||||
: "선택 가능한 부모 필드가 없습니다"}
|
||||
</div>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
상위 값을 제공할 필드를 선택하세요.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
{config.cascadingRelationCode &&
|
||||
config.cascadingRole === "child" &&
|
||||
(() => {
|
||||
// 선택된 관계에서 부모 값 컬럼 가져오기
|
||||
const expectedParentColumn = selectedRelation?.parent_value_column;
|
||||
|
||||
// 부모 역할에 맞는 컴포넌트만 필터링
|
||||
const parentFieldCandidates = allComponents.filter((comp) => {
|
||||
// 현재 컴포넌트 제외
|
||||
if (currentComponent && comp.id === currentComponent.id) return false;
|
||||
// 관계에서 지정한 부모 컬럼명과 일치하는 컴포넌트만
|
||||
if (expectedParentColumn && comp.columnName !== expectedParentColumn) return false;
|
||||
// columnName이 있어야 함
|
||||
return !!comp.columnName;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">부모 필드 선택</Label>
|
||||
{expectedParentColumn && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
관계에서 지정된 부모 컬럼: <strong>{expectedParentColumn}</strong>
|
||||
</p>
|
||||
)}
|
||||
<Select
|
||||
value={config.cascadingParentField || ""}
|
||||
onValueChange={(value) => handleChange("cascadingParentField", value || undefined)}
|
||||
>
|
||||
<SelectTrigger className="text-xs">
|
||||
<SelectValue placeholder="부모 필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{parentFieldCandidates.map((comp) => (
|
||||
<SelectItem key={comp.id} value={comp.columnName}>
|
||||
{comp.label || comp.columnName} ({comp.columnName})
|
||||
</SelectItem>
|
||||
))}
|
||||
{parentFieldCandidates.length === 0 && (
|
||||
<div className="text-muted-foreground px-2 py-1.5 text-xs">
|
||||
{expectedParentColumn
|
||||
? `'${expectedParentColumn}' 컬럼을 가진 컴포넌트가 화면에 없습니다`
|
||||
: "선택 가능한 부모 필드가 없습니다"}
|
||||
</div>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-muted-foreground text-xs">상위 값을 제공할 필드를 선택하세요.</p>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* 선택된 관계 정보 표시 */}
|
||||
{selectedRelation && config.cascadingRole && (
|
||||
|
|
@ -436,24 +429,22 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
</div>
|
||||
|
||||
{/* 🆕 카테고리 값 연쇄관계 설정 */}
|
||||
<div className="border-t pt-4 mt-4 space-y-3">
|
||||
<div className="mt-4 space-y-3 border-t pt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link2 className="h-4 w-4" />
|
||||
<Label className="text-sm font-medium">카테고리 값 연쇄</Label>
|
||||
</div>
|
||||
<Switch
|
||||
checked={categoryRelationEnabled}
|
||||
onCheckedChange={handleCategoryRelationToggle}
|
||||
/>
|
||||
<Switch checked={categoryRelationEnabled} onCheckedChange={handleCategoryRelationToggle} />
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
부모 카테고리 값 선택에 따라 자식 카테고리 옵션이 변경됩니다.
|
||||
<br />예: 검사유형 선택 시 해당 유형에 맞는 적용대상만 표시
|
||||
<br />
|
||||
예: 검사유형 선택 시 해당 유형에 맞는 적용대상만 표시
|
||||
</p>
|
||||
|
||||
{categoryRelationEnabled && (
|
||||
<div className="space-y-3 rounded-md border p-3 bg-muted/30">
|
||||
<div className="bg-muted/30 space-y-3 rounded-md border p-3">
|
||||
{/* 관계 선택 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">카테고리 값 연쇄 관계 선택</Label>
|
||||
|
|
@ -470,7 +461,8 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
<div className="flex flex-col">
|
||||
<span>{relation.relation_name}</span>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
{relation.parent_table_name}.{relation.parent_column_name} → {relation.child_table_name}.{relation.child_column_name}
|
||||
{relation.parent_table_name}.{relation.parent_column_name} → {relation.child_table_name}.
|
||||
{relation.child_column_name}
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
|
|
@ -504,69 +496,69 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
</Button>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
{config.cascadingRole === "parent"
|
||||
{config.cascadingRole === "parent"
|
||||
? "이 필드가 상위 카테고리 선택 역할을 합니다. (예: 검사유형)"
|
||||
: config.cascadingRole === "child"
|
||||
? "이 필드는 상위 카테고리 값에 따라 옵션이 변경됩니다. (예: 적용대상)"
|
||||
: "이 필드의 역할을 선택하세요."}
|
||||
? "이 필드는 상위 카테고리 값에 따라 옵션이 변경됩니다. (예: 적용대상)"
|
||||
: "이 필드의 역할을 선택하세요."}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 부모 필드 설정 (자식 역할일 때만) */}
|
||||
{(config as any).categoryRelationCode && config.cascadingRole === "child" && (() => {
|
||||
// 선택된 관계 정보 가져오기
|
||||
const selectedRelation = categoryRelationList.find(
|
||||
(r) => r.relation_code === (config as any).categoryRelationCode
|
||||
);
|
||||
const expectedParentColumn = selectedRelation?.parent_column_name;
|
||||
|
||||
// 부모 역할에 맞는 컴포넌트만 필터링
|
||||
const parentFieldCandidates = allComponents.filter((comp) => {
|
||||
// 현재 컴포넌트 제외
|
||||
if (currentComponent && comp.id === currentComponent.id) return false;
|
||||
// 관계에서 지정한 부모 컬럼명과 일치하는 컴포넌트만
|
||||
if (expectedParentColumn && comp.columnName !== expectedParentColumn) return false;
|
||||
// columnName이 있어야 함
|
||||
return !!comp.columnName;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">부모 필드 선택</Label>
|
||||
{expectedParentColumn && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
관계에서 지정된 부모 컬럼: <strong>{expectedParentColumn}</strong>
|
||||
</p>
|
||||
)}
|
||||
<Select
|
||||
value={config.cascadingParentField || ""}
|
||||
onValueChange={(value) => handleChange("cascadingParentField", value || undefined)}
|
||||
>
|
||||
<SelectTrigger className="text-xs">
|
||||
<SelectValue placeholder="부모 필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{parentFieldCandidates.map((comp) => (
|
||||
<SelectItem key={comp.id} value={comp.columnName}>
|
||||
{comp.label || comp.columnName} ({comp.columnName})
|
||||
</SelectItem>
|
||||
))}
|
||||
{parentFieldCandidates.length === 0 && (
|
||||
<div className="px-2 py-1.5 text-xs text-muted-foreground">
|
||||
{expectedParentColumn
|
||||
? `'${expectedParentColumn}' 컬럼을 가진 컴포넌트가 화면에 없습니다`
|
||||
: "선택 가능한 부모 필드가 없습니다"}
|
||||
</div>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
상위 카테고리 값을 제공할 필드를 선택하세요.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
{(config as any).categoryRelationCode &&
|
||||
config.cascadingRole === "child" &&
|
||||
(() => {
|
||||
// 선택된 관계 정보 가져오기
|
||||
const selectedRelation = categoryRelationList.find(
|
||||
(r) => r.relation_code === (config as any).categoryRelationCode,
|
||||
);
|
||||
const expectedParentColumn = selectedRelation?.parent_column_name;
|
||||
|
||||
// 부모 역할에 맞는 컴포넌트만 필터링
|
||||
const parentFieldCandidates = allComponents.filter((comp) => {
|
||||
// 현재 컴포넌트 제외
|
||||
if (currentComponent && comp.id === currentComponent.id) return false;
|
||||
// 관계에서 지정한 부모 컬럼명과 일치하는 컴포넌트만
|
||||
if (expectedParentColumn && comp.columnName !== expectedParentColumn) return false;
|
||||
// columnName이 있어야 함
|
||||
return !!comp.columnName;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">부모 필드 선택</Label>
|
||||
{expectedParentColumn && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
관계에서 지정된 부모 컬럼: <strong>{expectedParentColumn}</strong>
|
||||
</p>
|
||||
)}
|
||||
<Select
|
||||
value={config.cascadingParentField || ""}
|
||||
onValueChange={(value) => handleChange("cascadingParentField", value || undefined)}
|
||||
>
|
||||
<SelectTrigger className="text-xs">
|
||||
<SelectValue placeholder="부모 필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{parentFieldCandidates.map((comp) => (
|
||||
<SelectItem key={comp.id} value={comp.columnName}>
|
||||
{comp.label || comp.columnName} ({comp.columnName})
|
||||
</SelectItem>
|
||||
))}
|
||||
{parentFieldCandidates.length === 0 && (
|
||||
<div className="text-muted-foreground px-2 py-1.5 text-xs">
|
||||
{expectedParentColumn
|
||||
? `'${expectedParentColumn}' 컬럼을 가진 컴포넌트가 화면에 없습니다`
|
||||
: "선택 가능한 부모 필드가 없습니다"}
|
||||
</div>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-muted-foreground text-xs">상위 카테고리 값을 제공할 필드를 선택하세요.</p>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* 관계 관리 페이지 링크 */}
|
||||
<div className="flex justify-end">
|
||||
|
|
@ -580,6 +572,118 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 계층구조 코드 설정 */}
|
||||
<div className="mt-4 space-y-3 border-t pt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M12 2v4m0 12v4m-6-10H2m20 0h-4m-1.5-6.5L18 4m-12 0 1.5 1.5M6 18l-1.5 1.5M18 18l1.5 1.5" />
|
||||
</svg>
|
||||
<Label className="text-sm font-medium">계층구조 코드 설정</Label>
|
||||
</div>
|
||||
<div className="rounded border border-blue-200 bg-blue-50 p-2 text-xs text-blue-800">
|
||||
공통코드에 계층구조(depth 2 이상)가 있으면 자동으로 대분류 → 중분류 → 소분류 셀렉트박스로 표시됩니다.
|
||||
</div>
|
||||
|
||||
{/* 상세 설정 (항상 표시, 계층구조가 있을 때 적용됨) */}
|
||||
<div className="bg-muted/30 space-y-3 rounded-md border p-3">
|
||||
<p className="text-muted-foreground text-xs">계층구조 코드가 감지되면 아래 설정이 적용됩니다.</p>
|
||||
|
||||
{/* 코드 카테고리 선택 안내 */}
|
||||
{!config.codeCategory && (
|
||||
<div className="rounded border border-yellow-200 bg-yellow-50 p-2 text-xs text-yellow-800">
|
||||
먼저 상단에서 코드 카테고리를 선택해주세요.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 최대 깊이 선택 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">최대 깊이</Label>
|
||||
<Select
|
||||
value={String(config.hierarchicalMaxDepth || 3)}
|
||||
onValueChange={(value) => handleChange("hierarchicalMaxDepth", Number(value) as 1 | 2 | 3)}
|
||||
>
|
||||
<SelectTrigger className="text-xs">
|
||||
<SelectValue placeholder="깊이 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">1단계만</SelectItem>
|
||||
<SelectItem value="2">2단계까지</SelectItem>
|
||||
<SelectItem value="3">3단계까지</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-muted-foreground text-xs">표시할 계층의 최대 깊이를 선택하세요.</p>
|
||||
</div>
|
||||
|
||||
{/* 1단계 라벨 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">1단계 라벨</Label>
|
||||
<Input
|
||||
value={config.hierarchicalLabels?.[0] || ""}
|
||||
onChange={(e) => {
|
||||
const newLabels: [string, string?, string?] = [
|
||||
e.target.value,
|
||||
config.hierarchicalLabels?.[1],
|
||||
config.hierarchicalLabels?.[2],
|
||||
];
|
||||
handleChange("hierarchicalLabels", newLabels);
|
||||
}}
|
||||
placeholder="예: 대분류"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 2단계 라벨 */}
|
||||
{(config.hierarchicalMaxDepth || 3) >= 2 && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">2단계 라벨</Label>
|
||||
<Input
|
||||
value={config.hierarchicalLabels?.[1] || ""}
|
||||
onChange={(e) => {
|
||||
const newLabels: [string, string?, string?] = [
|
||||
config.hierarchicalLabels?.[0] || "대분류",
|
||||
e.target.value,
|
||||
config.hierarchicalLabels?.[2],
|
||||
];
|
||||
handleChange("hierarchicalLabels", newLabels);
|
||||
}}
|
||||
placeholder="예: 중분류"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 3단계 라벨 */}
|
||||
{(config.hierarchicalMaxDepth || 3) >= 3 && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">3단계 라벨</Label>
|
||||
<Input
|
||||
value={config.hierarchicalLabels?.[2] || ""}
|
||||
onChange={(e) => {
|
||||
const newLabels: [string, string?, string?] = [
|
||||
config.hierarchicalLabels?.[0] || "대분류",
|
||||
config.hierarchicalLabels?.[1] || "중분류",
|
||||
e.target.value,
|
||||
];
|
||||
handleChange("hierarchicalLabels", newLabels);
|
||||
}}
|
||||
placeholder="예: 소분류"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 인라인 표시 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs">가로 배치</Label>
|
||||
<Switch
|
||||
checked={config.hierarchicalInline || false}
|
||||
onCheckedChange={(checked) => handleChange("hierarchicalInline", checked)}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">셀렉트박스를 가로로 나란히 표시합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,6 +21,24 @@ export interface SelectBasicConfig extends ComponentConfig {
|
|||
cascadingRole?: "parent" | "child";
|
||||
/** 부모 필드명 (자식 역할일 때, 화면 내 부모 필드의 columnName) */
|
||||
cascadingParentField?: string;
|
||||
|
||||
// 🆕 계층구조 코드 설정
|
||||
/** 계층구조 코드 사용 여부 */
|
||||
useHierarchicalCode?: boolean;
|
||||
/** 계층구조 최대 깊이 (1, 2, 3) */
|
||||
hierarchicalMaxDepth?: 1 | 2 | 3;
|
||||
/** 각 단계별 라벨 */
|
||||
hierarchicalLabels?: [string, string?, string?];
|
||||
/** 각 단계별 placeholder */
|
||||
hierarchicalPlaceholders?: [string, string?, string?];
|
||||
/** 가로 배열 여부 */
|
||||
hierarchicalInline?: boolean;
|
||||
|
||||
// 🆕 다중 컬럼 계층구조 설정 (테이블 타입관리에서 설정)
|
||||
/** 계층 역할: 대분류(large), 중분류(medium), 소분류(small) */
|
||||
hierarchyRole?: "large" | "medium" | "small";
|
||||
/** 상위 계층 필드명 (중분류는 대분류 필드명, 소분류는 중분류 필드명) */
|
||||
hierarchyParentField?: string;
|
||||
|
||||
// 공통 설정
|
||||
disabled?: boolean;
|
||||
|
|
|
|||
|
|
@ -2030,8 +2030,17 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
className="border-border flex flex-shrink-0 flex-col border-r"
|
||||
>
|
||||
<Card className="flex flex-col border-0 shadow-none" style={{ height: "100%" }}>
|
||||
<CardHeader className="border-b pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardHeader
|
||||
className="flex-shrink-0 border-b"
|
||||
style={{
|
||||
height: componentConfig.leftPanel?.panelHeaderHeight || 48,
|
||||
minHeight: componentConfig.leftPanel?.panelHeaderHeight || 48,
|
||||
padding: '0 1rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold">
|
||||
{componentConfig.leftPanel?.title || "좌측 패널"}
|
||||
</CardTitle>
|
||||
|
|
@ -2042,8 +2051,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{componentConfig.leftPanel?.showSearch && (
|
||||
<div className="relative mt-2">
|
||||
</CardHeader>
|
||||
{componentConfig.leftPanel?.showSearch && (
|
||||
<div className="flex-shrink-0 border-b p-2">
|
||||
<div className="relative">
|
||||
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
||||
<Input
|
||||
placeholder="검색..."
|
||||
|
|
@ -2052,8 +2063,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
</div>
|
||||
)}
|
||||
<CardContent className="flex-1 overflow-auto p-4">
|
||||
{/* 좌측 데이터 목록/테이블 */}
|
||||
{componentConfig.leftPanel?.displayMode === "table" ? (
|
||||
|
|
@ -2510,8 +2521,17 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
className="flex flex-shrink-0 flex-col"
|
||||
>
|
||||
<Card className="flex flex-col border-0 shadow-none" style={{ height: "100%" }}>
|
||||
<CardHeader className="border-b pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardHeader
|
||||
className="flex-shrink-0 border-b"
|
||||
style={{
|
||||
height: componentConfig.rightPanel?.panelHeaderHeight || 48,
|
||||
minHeight: componentConfig.rightPanel?.panelHeaderHeight || 48,
|
||||
padding: '0 1rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold">
|
||||
{componentConfig.rightPanel?.title || "우측 패널"}
|
||||
</CardTitle>
|
||||
|
|
@ -2527,8 +2547,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
{componentConfig.rightPanel?.showSearch && (
|
||||
<div className="relative mt-2">
|
||||
</CardHeader>
|
||||
{componentConfig.rightPanel?.showSearch && (
|
||||
<div className="flex-shrink-0 border-b p-2">
|
||||
<div className="relative">
|
||||
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
||||
<Input
|
||||
placeholder="검색..."
|
||||
|
|
@ -2537,8 +2559,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
</div>
|
||||
)}
|
||||
<CardContent className="flex-1 overflow-auto p-4">
|
||||
{/* 우측 데이터 */}
|
||||
{isLoadingRight ? (
|
||||
|
|
|
|||
|
|
@ -602,6 +602,19 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>헤더 높이 (px)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={config.leftPanel?.panelHeaderHeight || 48}
|
||||
onChange={(e) => updateLeftPanel({ panelHeaderHeight: parseInt(e.target.value) || 48 })}
|
||||
placeholder="48"
|
||||
min={32}
|
||||
max={120}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">패널 상단 헤더의 높이 (기본: 48px)</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>테이블 (현재 화면 고정)</Label>
|
||||
<div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
|
||||
|
|
@ -1486,6 +1499,19 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>헤더 높이 (px)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={config.rightPanel?.panelHeaderHeight || 48}
|
||||
onChange={(e) => updateRightPanel({ panelHeaderHeight: parseInt(e.target.value) || 48 })}
|
||||
placeholder="48"
|
||||
min={32}
|
||||
max={120}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">패널 상단 헤더의 높이 (기본: 48px)</p>
|
||||
</div>
|
||||
|
||||
{/* 관계 타입에 따라 테이블 선택 UI 변경 */}
|
||||
{relationshipType === "detail" ? (
|
||||
// 상세 모드: 좌측과 동일한 테이블 (자동 설정)
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ export interface SplitPanelLayoutConfig {
|
|||
// 좌측 패널 설정
|
||||
leftPanel: {
|
||||
title: string;
|
||||
panelHeaderHeight?: number; // 패널 상단 헤더 높이 (px)
|
||||
tableName?: string; // 데이터베이스 테이블명
|
||||
dataSource?: string; // API 엔드포인트
|
||||
displayMode?: "list" | "table"; // 표시 모드: 목록 또는 테이블
|
||||
|
|
@ -70,6 +71,7 @@ export interface SplitPanelLayoutConfig {
|
|||
// 우측 패널 설정
|
||||
rightPanel: {
|
||||
title: string;
|
||||
panelHeaderHeight?: number; // 패널 상단 헤더 높이 (px)
|
||||
tableName?: string;
|
||||
dataSource?: string;
|
||||
displayMode?: "list" | "table"; // 표시 모드: 목록 또는 테이블
|
||||
|
|
|
|||
|
|
@ -0,0 +1,674 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
type DragEndEvent,
|
||||
} from "@dnd-kit/core";
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
verticalListSortingStrategy,
|
||||
useSortable,
|
||||
} from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { Plus, GripVertical, Settings, X, Check, ChevronsUpDown } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import type { ActionButtonConfig, ModalParamMapping, ColumnConfig } from "./types";
|
||||
|
||||
interface ScreenInfo {
|
||||
screen_id: number;
|
||||
screen_name: string;
|
||||
screen_code: string;
|
||||
}
|
||||
|
||||
// 정렬 가능한 버튼 아이템
|
||||
const SortableButtonItem: React.FC<{
|
||||
id: string;
|
||||
button: ActionButtonConfig;
|
||||
index: number;
|
||||
onSettingsClick: () => void;
|
||||
onRemove: () => void;
|
||||
}> = ({ id, button, index, onSettingsClick, onRemove }) => {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
};
|
||||
|
||||
const getVariantColor = (variant?: string) => {
|
||||
switch (variant) {
|
||||
case "destructive":
|
||||
return "bg-destructive/10 text-destructive";
|
||||
case "outline":
|
||||
return "bg-background border";
|
||||
case "ghost":
|
||||
return "bg-muted/50";
|
||||
case "secondary":
|
||||
return "bg-secondary text-secondary-foreground";
|
||||
default:
|
||||
return "bg-primary/10 text-primary";
|
||||
}
|
||||
};
|
||||
|
||||
const getActionLabel = (action?: string) => {
|
||||
switch (action) {
|
||||
case "add":
|
||||
return "추가";
|
||||
case "edit":
|
||||
return "수정";
|
||||
case "delete":
|
||||
return "삭제";
|
||||
case "bulk-delete":
|
||||
return "일괄삭제";
|
||||
case "api":
|
||||
return "API";
|
||||
case "custom":
|
||||
return "커스텀";
|
||||
default:
|
||||
return "추가";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={cn("flex items-center gap-2 rounded-md border bg-card p-3", isDragging && "opacity-50 shadow-lg")}
|
||||
>
|
||||
{/* 드래그 핸들 */}
|
||||
<div {...attributes} {...listeners} className="cursor-grab touch-none text-muted-foreground hover:text-foreground">
|
||||
<GripVertical className="h-4 w-4" />
|
||||
</div>
|
||||
|
||||
{/* 버튼 정보 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={cn("px-2 py-0.5 rounded text-xs font-medium", getVariantColor(button.variant))}>
|
||||
{button.label || `버튼 ${index + 1}`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
<Badge variant="outline" className="text-[10px] h-4">
|
||||
{getActionLabel(button.action)}
|
||||
</Badge>
|
||||
{button.icon && (
|
||||
<Badge variant="secondary" className="text-[10px] h-4">
|
||||
{button.icon}
|
||||
</Badge>
|
||||
)}
|
||||
{button.showCondition && button.showCondition !== "always" && (
|
||||
<Badge variant="secondary" className="text-[10px] h-4">
|
||||
{button.showCondition === "selected" ? "선택시만" : "미선택시만"}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼들 */}
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<Button size="sm" variant="ghost" className="h-7 w-7 p-0" onClick={onSettingsClick} title="세부설정">
|
||||
<Settings className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-7 w-7 p-0 text-destructive hover:text-destructive"
|
||||
onClick={onRemove}
|
||||
title="삭제"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface ActionButtonConfigModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
actionButtons: ActionButtonConfig[];
|
||||
displayColumns?: ColumnConfig[]; // 모달 파라미터 매핑용
|
||||
onSave: (buttons: ActionButtonConfig[]) => void;
|
||||
side: "left" | "right";
|
||||
}
|
||||
|
||||
export const ActionButtonConfigModal: React.FC<ActionButtonConfigModalProps> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
actionButtons: initialButtons,
|
||||
displayColumns = [],
|
||||
onSave,
|
||||
side,
|
||||
}) => {
|
||||
// 로컬 상태
|
||||
const [buttons, setButtons] = useState<ActionButtonConfig[]>([]);
|
||||
|
||||
// 버튼 세부설정 모달
|
||||
const [detailModalOpen, setDetailModalOpen] = useState(false);
|
||||
const [editingButtonIndex, setEditingButtonIndex] = useState<number | null>(null);
|
||||
const [editingButton, setEditingButton] = useState<ActionButtonConfig | null>(null);
|
||||
|
||||
// 화면 목록
|
||||
const [screens, setScreens] = useState<ScreenInfo[]>([]);
|
||||
const [screensLoading, setScreensLoading] = useState(false);
|
||||
const [screenSelectOpen, setScreenSelectOpen] = useState(false);
|
||||
|
||||
// 드래그 센서
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: {
|
||||
distance: 8,
|
||||
},
|
||||
}),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
})
|
||||
);
|
||||
|
||||
// 초기값 설정
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setButtons(initialButtons || []);
|
||||
}
|
||||
}, [open, initialButtons]);
|
||||
|
||||
// 화면 목록 로드
|
||||
const loadScreens = useCallback(async () => {
|
||||
setScreensLoading(true);
|
||||
try {
|
||||
const response = await apiClient.get("/screen-management/screens?size=1000");
|
||||
|
||||
let screenList: any[] = [];
|
||||
if (response.data?.success && Array.isArray(response.data?.data)) {
|
||||
screenList = response.data.data;
|
||||
} else if (Array.isArray(response.data?.data)) {
|
||||
screenList = response.data.data;
|
||||
}
|
||||
|
||||
const transformedScreens = screenList.map((s: any) => ({
|
||||
screen_id: s.screenId ?? s.screen_id ?? s.id,
|
||||
screen_name: s.screenName ?? s.screen_name ?? s.name ?? `화면 ${s.screenId || s.screen_id || s.id}`,
|
||||
screen_code: s.screenCode ?? s.screen_code ?? s.code ?? "",
|
||||
}));
|
||||
|
||||
setScreens(transformedScreens);
|
||||
} catch (error) {
|
||||
console.error("화면 목록 로드 실패:", error);
|
||||
setScreens([]);
|
||||
} finally {
|
||||
setScreensLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
loadScreens();
|
||||
}
|
||||
}, [open, loadScreens]);
|
||||
|
||||
// 드래그 종료 핸들러
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
|
||||
if (over && active.id !== over.id) {
|
||||
const oldIndex = buttons.findIndex((btn) => btn.id === active.id);
|
||||
const newIndex = buttons.findIndex((btn) => btn.id === over.id);
|
||||
|
||||
if (oldIndex !== -1 && newIndex !== -1) {
|
||||
setButtons(arrayMove(buttons, oldIndex, newIndex));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 버튼 추가
|
||||
const handleAddButton = () => {
|
||||
const newButton: ActionButtonConfig = {
|
||||
id: `btn-${Date.now()}`,
|
||||
label: "새 버튼",
|
||||
variant: "default",
|
||||
action: "add",
|
||||
showCondition: "always",
|
||||
};
|
||||
setButtons([...buttons, newButton]);
|
||||
};
|
||||
|
||||
// 버튼 삭제
|
||||
const handleRemoveButton = (index: number) => {
|
||||
setButtons(buttons.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
// 버튼 업데이트
|
||||
const handleUpdateButton = (index: number, updates: Partial<ActionButtonConfig>) => {
|
||||
const newButtons = [...buttons];
|
||||
newButtons[index] = { ...newButtons[index], ...updates };
|
||||
setButtons(newButtons);
|
||||
};
|
||||
|
||||
// 버튼 세부설정 열기
|
||||
const handleOpenDetailSettings = (index: number) => {
|
||||
setEditingButtonIndex(index);
|
||||
setEditingButton({ ...buttons[index] });
|
||||
setDetailModalOpen(true);
|
||||
};
|
||||
|
||||
// 버튼 세부설정 저장
|
||||
const handleSaveDetailSettings = () => {
|
||||
if (editingButtonIndex !== null && editingButton) {
|
||||
handleUpdateButton(editingButtonIndex, editingButton);
|
||||
}
|
||||
setDetailModalOpen(false);
|
||||
setEditingButtonIndex(null);
|
||||
setEditingButton(null);
|
||||
};
|
||||
|
||||
// 저장
|
||||
const handleSave = () => {
|
||||
onSave(buttons);
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
// 선택된 화면 정보
|
||||
const getScreenInfo = (screenId?: number) => {
|
||||
return screens.find((s) => s.screen_id === screenId);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[90vh] flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{side === "left" ? "좌측" : "우측"} 패널 액션 버튼 설정
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
버튼을 추가하고 순서를 드래그로 변경할 수 있습니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex-1 overflow-hidden flex flex-col">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<Label className="text-sm font-medium">
|
||||
액션 버튼 ({buttons.length}개)
|
||||
</Label>
|
||||
<Button size="sm" variant="outline" onClick={handleAddButton}>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
버튼 추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="flex-1 pr-4">
|
||||
{buttons.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<p className="text-muted-foreground text-sm mb-2">
|
||||
액션 버튼이 없습니다
|
||||
</p>
|
||||
<Button size="sm" variant="outline" onClick={handleAddButton}>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
첫 번째 버튼 추가
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext
|
||||
items={buttons.map((btn) => btn.id)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
{buttons.map((btn, index) => (
|
||||
<SortableButtonItem
|
||||
key={btn.id}
|
||||
id={btn.id}
|
||||
button={btn}
|
||||
index={index}
|
||||
onSettingsClick={() => handleOpenDetailSettings(index)}
|
||||
onRemove={() => handleRemoveButton(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="mt-4">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSave}>저장</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 버튼 세부설정 모달 */}
|
||||
<Dialog open={detailModalOpen} onOpenChange={setDetailModalOpen}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[500px] max-h-[85vh]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>버튼 세부설정</DialogTitle>
|
||||
<DialogDescription>
|
||||
{editingButton?.label || "버튼"}의 동작을 설정합니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{editingButton && (
|
||||
<ScrollArea className="max-h-[60vh]">
|
||||
<div className="space-y-4 pr-4">
|
||||
{/* 기본 설정 */}
|
||||
<div className="space-y-3 p-3 border rounded-lg">
|
||||
<h4 className="text-sm font-medium">기본 설정</h4>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">버튼 라벨</Label>
|
||||
<Input
|
||||
value={editingButton.label}
|
||||
onChange={(e) =>
|
||||
setEditingButton({ ...editingButton, label: e.target.value })
|
||||
}
|
||||
placeholder="버튼 라벨"
|
||||
className="mt-1 h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">버튼 스타일</Label>
|
||||
<Select
|
||||
value={editingButton.variant || "default"}
|
||||
onValueChange={(value) =>
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
variant: value as ActionButtonConfig["variant"],
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="default">기본 (Primary)</SelectItem>
|
||||
<SelectItem value="secondary">보조 (Secondary)</SelectItem>
|
||||
<SelectItem value="outline">외곽선</SelectItem>
|
||||
<SelectItem value="ghost">투명</SelectItem>
|
||||
<SelectItem value="destructive">삭제 (빨간색)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">아이콘</Label>
|
||||
<Select
|
||||
value={editingButton.icon || "none"}
|
||||
onValueChange={(value) =>
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
icon: value === "none" ? undefined : value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">없음</SelectItem>
|
||||
<SelectItem value="Plus">+ (추가)</SelectItem>
|
||||
<SelectItem value="Edit">수정</SelectItem>
|
||||
<SelectItem value="Trash2">삭제</SelectItem>
|
||||
<SelectItem value="Download">다운로드</SelectItem>
|
||||
<SelectItem value="Upload">업로드</SelectItem>
|
||||
<SelectItem value="RefreshCw">새로고침</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">표시 조건</Label>
|
||||
<Select
|
||||
value={editingButton.showCondition || "always"}
|
||||
onValueChange={(value) =>
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
showCondition: value as ActionButtonConfig["showCondition"],
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="always">항상 표시</SelectItem>
|
||||
<SelectItem value="selected">선택 시만 표시</SelectItem>
|
||||
<SelectItem value="notSelected">미선택 시만 표시</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 동작 설정 */}
|
||||
<div className="space-y-3 p-3 border rounded-lg">
|
||||
<h4 className="text-sm font-medium">동작 설정</h4>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">동작 유형</Label>
|
||||
<Select
|
||||
value={editingButton.action || "add"}
|
||||
onValueChange={(value) =>
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
action: value as ActionButtonConfig["action"],
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="add">추가 (모달 열기)</SelectItem>
|
||||
<SelectItem value="edit">수정 (선택 항목)</SelectItem>
|
||||
<SelectItem value="delete">삭제 (선택 항목)</SelectItem>
|
||||
<SelectItem value="bulk-delete">일괄 삭제 (체크된 항목)</SelectItem>
|
||||
<SelectItem value="api">API 호출</SelectItem>
|
||||
<SelectItem value="custom">커스텀 액션</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 모달 설정 (add, edit 액션) */}
|
||||
{(editingButton.action === "add" || editingButton.action === "edit") && (
|
||||
<div>
|
||||
<Label className="text-xs">모달 화면</Label>
|
||||
<Popover open={screenSelectOpen} onOpenChange={setScreenSelectOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className="mt-1 h-9 w-full justify-between"
|
||||
disabled={screensLoading}
|
||||
>
|
||||
{screensLoading
|
||||
? "로딩 중..."
|
||||
: editingButton.modalScreenId
|
||||
? getScreenInfo(editingButton.modalScreenId)?.screen_name ||
|
||||
`화면 ${editingButton.modalScreenId}`
|
||||
: "화면 선택"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="화면 검색..." className="h-9" />
|
||||
<CommandList>
|
||||
<CommandEmpty>검색 결과가 없습니다</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{screens.map((screen) => (
|
||||
<CommandItem
|
||||
key={screen.screen_id}
|
||||
value={`${screen.screen_id}-${screen.screen_name}`}
|
||||
onSelect={() => {
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
modalScreenId: screen.screen_id,
|
||||
});
|
||||
setScreenSelectOpen(false);
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
editingButton.modalScreenId === screen.screen_id
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<span className="flex flex-col">
|
||||
<span>{screen.screen_name}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{screen.screen_code}
|
||||
</span>
|
||||
</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* API 설정 */}
|
||||
{editingButton.action === "api" && (
|
||||
<>
|
||||
<div>
|
||||
<Label className="text-xs">API 엔드포인트</Label>
|
||||
<Input
|
||||
value={editingButton.apiEndpoint || ""}
|
||||
onChange={(e) =>
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
apiEndpoint: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="/api/example"
|
||||
className="mt-1 h-9"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs">HTTP 메서드</Label>
|
||||
<Select
|
||||
value={editingButton.apiMethod || "POST"}
|
||||
onValueChange={(value) =>
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
apiMethod: value as ActionButtonConfig["apiMethod"],
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="GET">GET</SelectItem>
|
||||
<SelectItem value="POST">POST</SelectItem>
|
||||
<SelectItem value="PUT">PUT</SelectItem>
|
||||
<SelectItem value="DELETE">DELETE</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 확인 메시지 (삭제 계열) */}
|
||||
{(editingButton.action === "delete" ||
|
||||
editingButton.action === "bulk-delete" ||
|
||||
(editingButton.action === "api" && editingButton.apiMethod === "DELETE")) && (
|
||||
<div>
|
||||
<Label className="text-xs">확인 메시지</Label>
|
||||
<Input
|
||||
value={editingButton.confirmMessage || ""}
|
||||
onChange={(e) =>
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
confirmMessage: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="정말 삭제하시겠습니까?"
|
||||
className="mt-1 h-9"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 커스텀 액션 ID */}
|
||||
{editingButton.action === "custom" && (
|
||||
<div>
|
||||
<Label className="text-xs">커스텀 액션 ID</Label>
|
||||
<Input
|
||||
value={editingButton.customActionId || ""}
|
||||
onChange={(e) =>
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
customActionId: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="customAction1"
|
||||
className="mt-1 h-9"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
커스텀 이벤트 핸들러에서 이 ID로 버튼을 구분합니다
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDetailModalOpen(false)}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSaveDetailSettings}>적용</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActionButtonConfigModal;
|
||||
|
||||
|
|
@ -0,0 +1,805 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
type DragEndEvent,
|
||||
} from "@dnd-kit/core";
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
verticalListSortingStrategy,
|
||||
} from "@dnd-kit/sortable";
|
||||
import { Plus, Settings2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { entityJoinApi } from "@/lib/api/entityJoin";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import type { ColumnConfig, SearchColumnConfig, GroupingConfig, ColumnDisplayConfig, EntityReferenceConfig } from "./types";
|
||||
import { SortableColumnItem } from "./components/SortableColumnItem";
|
||||
import { SearchableColumnSelect } from "./components/SearchableColumnSelect";
|
||||
|
||||
interface ColumnInfo {
|
||||
column_name: string;
|
||||
data_type: string;
|
||||
column_comment?: string;
|
||||
input_type?: string;
|
||||
web_type?: string;
|
||||
reference_table?: string;
|
||||
reference_column?: string;
|
||||
}
|
||||
|
||||
// 참조 테이블 컬럼 정보
|
||||
interface ReferenceColumnInfo {
|
||||
columnName: string;
|
||||
displayName: string;
|
||||
dataType: string;
|
||||
}
|
||||
|
||||
interface ColumnConfigModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
tableName: string;
|
||||
displayColumns: ColumnConfig[];
|
||||
searchColumns?: SearchColumnConfig[];
|
||||
grouping?: GroupingConfig;
|
||||
showSearch?: boolean;
|
||||
onSave: (config: {
|
||||
displayColumns: ColumnConfig[];
|
||||
searchColumns: SearchColumnConfig[];
|
||||
grouping: GroupingConfig;
|
||||
showSearch: boolean;
|
||||
}) => void;
|
||||
side: "left" | "right"; // 좌측/우측 패널 구분
|
||||
}
|
||||
|
||||
export const ColumnConfigModal: React.FC<ColumnConfigModalProps> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
tableName,
|
||||
displayColumns: initialDisplayColumns,
|
||||
searchColumns: initialSearchColumns,
|
||||
grouping: initialGrouping,
|
||||
showSearch: initialShowSearch,
|
||||
onSave,
|
||||
side,
|
||||
}) => {
|
||||
// 로컬 상태 (모달 내에서만 사용, 저장 시 부모로 전달)
|
||||
const [displayColumns, setDisplayColumns] = useState<ColumnConfig[]>([]);
|
||||
const [searchColumns, setSearchColumns] = useState<SearchColumnConfig[]>([]);
|
||||
const [grouping, setGrouping] = useState<GroupingConfig>({ enabled: false, groupByColumn: "" });
|
||||
const [showSearch, setShowSearch] = useState(false);
|
||||
|
||||
// 컬럼 세부설정 모달
|
||||
const [detailModalOpen, setDetailModalOpen] = useState(false);
|
||||
const [editingColumnIndex, setEditingColumnIndex] = useState<number | null>(null);
|
||||
const [editingColumn, setEditingColumn] = useState<ColumnConfig | null>(null);
|
||||
|
||||
// 테이블 컬럼 목록
|
||||
const [columns, setColumns] = useState<ColumnInfo[]>([]);
|
||||
const [columnsLoading, setColumnsLoading] = useState(false);
|
||||
|
||||
// 엔티티 참조 관련 상태
|
||||
const [entityReferenceColumns, setEntityReferenceColumns] = useState<Map<string, ReferenceColumnInfo[]>>(new Map());
|
||||
const [loadingEntityColumns, setLoadingEntityColumns] = useState<Set<string>>(new Set());
|
||||
|
||||
// 드래그 센서
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: {
|
||||
distance: 8,
|
||||
},
|
||||
}),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
})
|
||||
);
|
||||
|
||||
// 초기값 설정
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setDisplayColumns(initialDisplayColumns || []);
|
||||
setSearchColumns(initialSearchColumns || []);
|
||||
setGrouping(initialGrouping || { enabled: false, groupByColumn: "" });
|
||||
setShowSearch(initialShowSearch || false);
|
||||
}
|
||||
}, [open, initialDisplayColumns, initialSearchColumns, initialGrouping, initialShowSearch]);
|
||||
|
||||
// 테이블 컬럼 로드 (entity 타입 정보 포함)
|
||||
const loadColumns = useCallback(async () => {
|
||||
if (!tableName) {
|
||||
setColumns([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setColumnsLoading(true);
|
||||
try {
|
||||
const response = await apiClient.get(`/table-management/tables/${tableName}/columns?size=200`);
|
||||
|
||||
let columnList: any[] = [];
|
||||
if (response.data?.success && response.data?.data?.columns) {
|
||||
columnList = response.data.data.columns;
|
||||
} else if (Array.isArray(response.data?.data?.columns)) {
|
||||
columnList = response.data.data.columns;
|
||||
} else if (Array.isArray(response.data?.data)) {
|
||||
columnList = response.data.data;
|
||||
}
|
||||
|
||||
// entity 타입 정보를 포함하여 변환
|
||||
const transformedColumns = columnList.map((c: any) => ({
|
||||
column_name: c.columnName ?? c.column_name ?? c.name ?? "",
|
||||
data_type: c.dataType ?? c.data_type ?? c.type ?? "",
|
||||
column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
|
||||
input_type: c.inputType ?? c.input_type ?? "",
|
||||
web_type: c.webType ?? c.web_type ?? "",
|
||||
reference_table: c.referenceTable ?? c.reference_table ?? "",
|
||||
reference_column: c.referenceColumn ?? c.reference_column ?? "",
|
||||
}));
|
||||
|
||||
setColumns(transformedColumns);
|
||||
} catch (error) {
|
||||
console.error("컬럼 목록 로드 실패:", error);
|
||||
setColumns([]);
|
||||
} finally {
|
||||
setColumnsLoading(false);
|
||||
}
|
||||
}, [tableName]);
|
||||
|
||||
// 엔티티 참조 테이블의 컬럼 목록 로드
|
||||
const loadEntityReferenceColumns = useCallback(async (columnName: string, referenceTable: string) => {
|
||||
if (!referenceTable || entityReferenceColumns.has(columnName)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoadingEntityColumns(prev => new Set(prev).add(columnName));
|
||||
try {
|
||||
const result = await entityJoinApi.getReferenceTableColumns(referenceTable);
|
||||
if (result?.columns) {
|
||||
setEntityReferenceColumns(prev => {
|
||||
const newMap = new Map(prev);
|
||||
newMap.set(columnName, result.columns);
|
||||
return newMap;
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`엔티티 참조 컬럼 로드 실패 (${referenceTable}):`, error);
|
||||
} finally {
|
||||
setLoadingEntityColumns(prev => {
|
||||
const newSet = new Set(prev);
|
||||
newSet.delete(columnName);
|
||||
return newSet;
|
||||
});
|
||||
}
|
||||
}, [entityReferenceColumns]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && tableName) {
|
||||
loadColumns();
|
||||
}
|
||||
}, [open, tableName, loadColumns]);
|
||||
|
||||
// 드래그 종료 핸들러
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
|
||||
if (over && active.id !== over.id) {
|
||||
const oldIndex = displayColumns.findIndex((col, idx) => `col-${idx}` === active.id);
|
||||
const newIndex = displayColumns.findIndex((col, idx) => `col-${idx}` === over.id);
|
||||
|
||||
if (oldIndex !== -1 && newIndex !== -1) {
|
||||
setDisplayColumns(arrayMove(displayColumns, oldIndex, newIndex));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 컬럼 추가
|
||||
const handleAddColumn = () => {
|
||||
setDisplayColumns([
|
||||
...displayColumns,
|
||||
{
|
||||
name: "",
|
||||
label: "",
|
||||
displayRow: side === "left" ? "name" : "info",
|
||||
sourceTable: tableName,
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
// 컬럼 삭제
|
||||
const handleRemoveColumn = (index: number) => {
|
||||
setDisplayColumns(displayColumns.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
// 컬럼 업데이트 (entity 타입이면 참조 테이블 컬럼도 로드)
|
||||
const handleUpdateColumn = (index: number, updates: Partial<ColumnConfig>) => {
|
||||
const newColumns = [...displayColumns];
|
||||
newColumns[index] = { ...newColumns[index], ...updates };
|
||||
setDisplayColumns(newColumns);
|
||||
|
||||
// 컬럼명이 변경된 경우 entity 타입인지 확인하고 참조 테이블 컬럼 로드
|
||||
if (updates.name) {
|
||||
const columnInfo = columns.find(c => c.column_name === updates.name);
|
||||
if (columnInfo && (columnInfo.input_type === 'entity' || columnInfo.web_type === 'entity')) {
|
||||
if (columnInfo.reference_table) {
|
||||
loadEntityReferenceColumns(updates.name, columnInfo.reference_table);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 컬럼 세부설정 열기 (entity 타입이면 참조 테이블 컬럼도 로드)
|
||||
const handleOpenDetailSettings = (index: number) => {
|
||||
const column = displayColumns[index];
|
||||
setEditingColumnIndex(index);
|
||||
setEditingColumn({ ...column });
|
||||
setDetailModalOpen(true);
|
||||
|
||||
// entity 타입인지 확인하고 참조 테이블 컬럼 로드
|
||||
if (column.name) {
|
||||
const columnInfo = columns.find(c => c.column_name === column.name);
|
||||
if (columnInfo && (columnInfo.input_type === 'entity' || columnInfo.web_type === 'entity')) {
|
||||
if (columnInfo.reference_table) {
|
||||
loadEntityReferenceColumns(column.name, columnInfo.reference_table);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 컬럼 세부설정 저장
|
||||
const handleSaveDetailSettings = () => {
|
||||
if (editingColumnIndex !== null && editingColumn) {
|
||||
handleUpdateColumn(editingColumnIndex, editingColumn);
|
||||
}
|
||||
setDetailModalOpen(false);
|
||||
setEditingColumnIndex(null);
|
||||
setEditingColumn(null);
|
||||
};
|
||||
|
||||
// 검색 컬럼 추가
|
||||
const handleAddSearchColumn = () => {
|
||||
setSearchColumns([...searchColumns, { columnName: "", label: "" }]);
|
||||
};
|
||||
|
||||
// 검색 컬럼 삭제
|
||||
const handleRemoveSearchColumn = (index: number) => {
|
||||
setSearchColumns(searchColumns.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
// 검색 컬럼 업데이트
|
||||
const handleUpdateSearchColumn = (index: number, columnName: string) => {
|
||||
const newColumns = [...searchColumns];
|
||||
newColumns[index] = { ...newColumns[index], columnName };
|
||||
setSearchColumns(newColumns);
|
||||
};
|
||||
|
||||
// 저장
|
||||
const handleSave = () => {
|
||||
onSave({
|
||||
displayColumns,
|
||||
searchColumns,
|
||||
grouping,
|
||||
showSearch,
|
||||
});
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
// 엔티티 표시 컬럼 토글
|
||||
const toggleEntityDisplayColumn = (selectedColumn: string) => {
|
||||
if (!editingColumn) return;
|
||||
|
||||
const currentDisplayColumns = editingColumn.entityReference?.displayColumns || [];
|
||||
const newDisplayColumns = currentDisplayColumns.includes(selectedColumn)
|
||||
? currentDisplayColumns.filter(col => col !== selectedColumn)
|
||||
: [...currentDisplayColumns, selectedColumn];
|
||||
|
||||
setEditingColumn({
|
||||
...editingColumn,
|
||||
entityReference: {
|
||||
...editingColumn.entityReference,
|
||||
displayColumns: newDisplayColumns,
|
||||
} as EntityReferenceConfig,
|
||||
});
|
||||
};
|
||||
|
||||
// 현재 편집 중인 컬럼이 entity 타입인지 확인
|
||||
const getEditingColumnEntityInfo = useCallback(() => {
|
||||
if (!editingColumn?.name) return null;
|
||||
const columnInfo = columns.find(c => c.column_name === editingColumn.name);
|
||||
if (!columnInfo) return null;
|
||||
if (columnInfo.input_type !== 'entity' && columnInfo.web_type !== 'entity') return null;
|
||||
return {
|
||||
referenceTable: columnInfo.reference_table || '',
|
||||
referenceColumns: entityReferenceColumns.get(editingColumn.name) || [],
|
||||
isLoading: loadingEntityColumns.has(editingColumn.name),
|
||||
};
|
||||
}, [editingColumn, columns, entityReferenceColumns, loadingEntityColumns]);
|
||||
|
||||
// 이미 선택된 컬럼명 목록 (중복 선택 방지용)
|
||||
const selectedColumnNames = displayColumns.map((col) => col.name).filter(Boolean);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="flex h-[80vh] max-w-[95vw] flex-col overflow-hidden sm:max-w-[700px]">
|
||||
<DialogHeader className="shrink-0">
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Settings2 className="h-5 w-5" />
|
||||
{side === "left" ? "좌측" : "우측"} 패널 컬럼 설정
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
표시할 컬럼을 추가하고 순서를 드래그로 변경할 수 있습니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Tabs defaultValue="columns" className="flex min-h-0 flex-1 flex-col overflow-hidden">
|
||||
<TabsList className="grid w-full shrink-0 grid-cols-3">
|
||||
<TabsTrigger value="columns">표시 컬럼</TabsTrigger>
|
||||
<TabsTrigger value="grouping" disabled={side === "right"}>
|
||||
그룹핑
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="search">검색</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* 표시 컬럼 탭 */}
|
||||
<TabsContent value="columns" className="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden">
|
||||
<div className="flex shrink-0 items-center justify-between mb-3">
|
||||
<Label className="text-sm font-medium">
|
||||
표시할 컬럼 ({displayColumns.length}개)
|
||||
</Label>
|
||||
<Button size="sm" variant="outline" onClick={handleAddColumn}>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
컬럼 추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="min-h-0 flex-1">
|
||||
<div className="pr-4">
|
||||
{displayColumns.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<p className="text-muted-foreground text-sm mb-2">
|
||||
표시할 컬럼이 없습니다
|
||||
</p>
|
||||
<Button size="sm" variant="outline" onClick={handleAddColumn}>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
첫 번째 컬럼 추가
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext
|
||||
items={displayColumns.map((_, idx) => `col-${idx}`)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
{displayColumns.map((col, index) => (
|
||||
<div key={`col-${index}`} className="space-y-2">
|
||||
<SortableColumnItem
|
||||
id={`col-${index}`}
|
||||
column={col}
|
||||
index={index}
|
||||
onSettingsClick={() => handleOpenDetailSettings(index)}
|
||||
onRemove={() => handleRemoveColumn(index)}
|
||||
showGroupingSettings={grouping.enabled}
|
||||
/>
|
||||
{/* 컬럼 빠른 선택 (인라인) */}
|
||||
{!col.name && (
|
||||
<div className="ml-6 pl-2 border-l-2 border-muted">
|
||||
<SearchableColumnSelect
|
||||
tableName={tableName}
|
||||
value={col.name}
|
||||
onValueChange={(value) => {
|
||||
const colInfo = columns.find((c) => c.column_name === value);
|
||||
handleUpdateColumn(index, {
|
||||
name: value,
|
||||
label: colInfo?.column_comment || "",
|
||||
});
|
||||
}}
|
||||
excludeColumns={selectedColumnNames}
|
||||
placeholder="컬럼을 선택하세요"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
|
||||
{/* 그룹핑 탭 (좌측 패널만) */}
|
||||
<TabsContent value="grouping" className="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden">
|
||||
<ScrollArea className="min-h-0 flex-1">
|
||||
<div className="space-y-4 pr-4">
|
||||
<div className="flex items-center justify-between rounded-lg border p-4">
|
||||
<div>
|
||||
<Label className="text-sm font-medium">그룹핑 사용</Label>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
동일한 값을 가진 행들을 하나로 그룹화합니다
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={grouping.enabled}
|
||||
onCheckedChange={(checked) =>
|
||||
setGrouping({ ...grouping, enabled: checked })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{grouping.enabled && (
|
||||
<div className="space-y-3 p-4 border rounded-lg bg-muted/30">
|
||||
<div>
|
||||
<Label className="text-sm">그룹 기준 컬럼</Label>
|
||||
<SearchableColumnSelect
|
||||
tableName={tableName}
|
||||
value={grouping.groupByColumn}
|
||||
onValueChange={(value) =>
|
||||
setGrouping({ ...grouping, groupByColumn: value })
|
||||
}
|
||||
placeholder="그룹 기준 컬럼 선택"
|
||||
className="mt-1"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
예: item_id로 그룹핑하면 같은 품목의 데이터를 하나로 표시합니다
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
|
||||
{/* 검색 탭 */}
|
||||
<TabsContent value="search" className="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden">
|
||||
<ScrollArea className="min-h-0 flex-1">
|
||||
<div className="space-y-4 pr-4">
|
||||
<div className="flex items-center justify-between rounded-lg border p-4">
|
||||
<div>
|
||||
<Label className="text-sm font-medium">검색 표시</Label>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
검색 입력창을 표시합니다
|
||||
</p>
|
||||
</div>
|
||||
<Switch checked={showSearch} onCheckedChange={setShowSearch} />
|
||||
</div>
|
||||
|
||||
{showSearch && (
|
||||
<div className="space-y-3 p-4 border rounded-lg bg-muted/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-sm">검색 대상 컬럼</Label>
|
||||
<Button size="sm" variant="ghost" onClick={handleAddSearchColumn}>
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{searchColumns.length === 0 ? (
|
||||
<div className="text-center py-4 text-muted-foreground text-sm border rounded-md">
|
||||
검색할 컬럼을 추가하세요
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{searchColumns.map((searchCol, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<SearchableColumnSelect
|
||||
tableName={tableName}
|
||||
value={searchCol.columnName}
|
||||
onValueChange={(value) => handleUpdateSearchColumn(index, value)}
|
||||
placeholder="검색 컬럼 선택"
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-9 w-9 p-0 text-destructive"
|
||||
onClick={() => handleRemoveSearchColumn(index)}
|
||||
>
|
||||
×
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<DialogFooter className="mt-4 shrink-0">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSave}>저장</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 컬럼 세부설정 모달 */}
|
||||
<Dialog open={detailModalOpen} onOpenChange={setDetailModalOpen}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>컬럼 세부설정</DialogTitle>
|
||||
<DialogDescription>
|
||||
{editingColumn?.label || editingColumn?.name || "컬럼"}의 표시 설정을 변경합니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{editingColumn && (
|
||||
<div className="space-y-4">
|
||||
{/* 기본 설정 */}
|
||||
<div className="space-y-3 p-3 border rounded-lg">
|
||||
<h4 className="text-sm font-medium">기본 설정</h4>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">컬럼 선택</Label>
|
||||
<SearchableColumnSelect
|
||||
tableName={tableName}
|
||||
value={editingColumn.name}
|
||||
onValueChange={(value) => {
|
||||
const colInfo = columns.find((c) => c.column_name === value);
|
||||
setEditingColumn({
|
||||
...editingColumn,
|
||||
name: value,
|
||||
label: colInfo?.column_comment || editingColumn.label,
|
||||
});
|
||||
}}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">표시 라벨</Label>
|
||||
<Input
|
||||
value={editingColumn.label || ""}
|
||||
onChange={(e) =>
|
||||
setEditingColumn({ ...editingColumn, label: e.target.value })
|
||||
}
|
||||
placeholder="라벨명 (미입력 시 컬럼명 사용)"
|
||||
className="mt-1 h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">표시 위치</Label>
|
||||
<Select
|
||||
value={editingColumn.displayRow || "name"}
|
||||
onValueChange={(value: "name" | "info") =>
|
||||
setEditingColumn({ ...editingColumn, displayRow: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="name">이름 행 (Name Row)</SelectItem>
|
||||
<SelectItem value="info">정보 행 (Info Row)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">컬럼 너비 (px)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={editingColumn.width || ""}
|
||||
onChange={(e) =>
|
||||
setEditingColumn({
|
||||
...editingColumn,
|
||||
width: e.target.value ? parseInt(e.target.value) : undefined,
|
||||
})
|
||||
}
|
||||
placeholder="자동"
|
||||
className="mt-1 h-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 그룹핑/집계 설정 (그룹핑 활성화 시만) */}
|
||||
{grouping.enabled && (
|
||||
<div className="space-y-3 p-3 border rounded-lg">
|
||||
<h4 className="text-sm font-medium">그룹핑/집계 설정</h4>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">표시 방식</Label>
|
||||
<Select
|
||||
value={editingColumn.displayConfig?.displayType || "text"}
|
||||
onValueChange={(value: "text" | "badge") =>
|
||||
setEditingColumn({
|
||||
...editingColumn,
|
||||
displayConfig: {
|
||||
...editingColumn.displayConfig,
|
||||
displayType: value,
|
||||
} as ColumnDisplayConfig,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="text">텍스트 (기본)</SelectItem>
|
||||
<SelectItem value="badge">배지 (태그 형태)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
배지는 여러 값을 태그 형태로 나란히 표시합니다
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label className="text-xs">집계 사용</Label>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
그룹핑 시 값을 집계합니다
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={editingColumn.displayConfig?.aggregate?.enabled || false}
|
||||
onCheckedChange={(checked) =>
|
||||
setEditingColumn({
|
||||
...editingColumn,
|
||||
displayConfig: {
|
||||
displayType: editingColumn.displayConfig?.displayType || "text",
|
||||
aggregate: {
|
||||
enabled: checked,
|
||||
function: editingColumn.displayConfig?.aggregate?.function || "DISTINCT",
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{editingColumn.displayConfig?.aggregate?.enabled && (
|
||||
<div>
|
||||
<Label className="text-xs">집계 방식</Label>
|
||||
<Select
|
||||
value={editingColumn.displayConfig?.aggregate?.function || "DISTINCT"}
|
||||
onValueChange={(value: "DISTINCT" | "COUNT") =>
|
||||
setEditingColumn({
|
||||
...editingColumn,
|
||||
displayConfig: {
|
||||
displayType: editingColumn.displayConfig?.displayType || "text",
|
||||
aggregate: {
|
||||
enabled: true,
|
||||
function: value,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="DISTINCT">중복제거 (고유값만)</SelectItem>
|
||||
<SelectItem value="COUNT">개수</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 엔티티 참조 설정 (entity 타입 컬럼일 때만 표시) */}
|
||||
{(() => {
|
||||
const entityInfo = getEditingColumnEntityInfo();
|
||||
if (!entityInfo) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-3 p-3 border rounded-lg">
|
||||
<h4 className="text-sm font-medium">엔티티 표시 컬럼</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
참조 테이블: <span className="font-medium">{entityInfo.referenceTable}</span>
|
||||
</p>
|
||||
|
||||
{entityInfo.isLoading ? (
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<span className="text-sm text-muted-foreground">컬럼 정보 로딩 중...</span>
|
||||
</div>
|
||||
) : entityInfo.referenceColumns.length === 0 ? (
|
||||
<div className="text-center py-4 text-muted-foreground text-sm border rounded-md">
|
||||
참조 테이블의 컬럼 정보를 불러올 수 없습니다
|
||||
</div>
|
||||
) : (
|
||||
<ScrollArea className="max-h-40">
|
||||
<div className="space-y-2 pr-4">
|
||||
{entityInfo.referenceColumns.map((col) => {
|
||||
const isSelected = (editingColumn.entityReference?.displayColumns || []).includes(col.columnName);
|
||||
return (
|
||||
<div
|
||||
key={col.columnName}
|
||||
className={cn(
|
||||
"flex items-center gap-2 p-2 rounded-md cursor-pointer hover:bg-muted/50 transition-colors",
|
||||
isSelected && "bg-muted"
|
||||
)}
|
||||
onClick={() => toggleEntityDisplayColumn(col.columnName)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onCheckedChange={() => toggleEntityDisplayColumn(col.columnName)}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="text-sm font-medium truncate block">
|
||||
{col.displayName || col.columnName}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground truncate block">
|
||||
{col.columnName} ({col.dataType})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
|
||||
{(editingColumn.entityReference?.displayColumns || []).length > 0 && (
|
||||
<div className="mt-2 pt-2 border-t">
|
||||
<p className="text-xs text-muted-foreground mb-1">
|
||||
선택됨: {(editingColumn.entityReference?.displayColumns || []).length}개
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{(editingColumn.entityReference?.displayColumns || []).map((colName) => {
|
||||
const colInfo = entityInfo.referenceColumns.find(c => c.columnName === colName);
|
||||
return (
|
||||
<span
|
||||
key={colName}
|
||||
className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-primary/10 text-primary"
|
||||
>
|
||||
{colInfo?.displayName || colName}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDetailModalOpen(false)}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSaveDetailSettings}>적용</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ColumnConfigModal;
|
||||
|
||||
|
|
@ -0,0 +1,423 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Plus, X, Settings, ArrowRight } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import type { DataTransferField } from "./types";
|
||||
|
||||
interface ColumnInfo {
|
||||
column_name: string;
|
||||
column_comment?: string;
|
||||
data_type?: string;
|
||||
}
|
||||
|
||||
interface DataTransferConfigModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
dataTransferFields: DataTransferField[];
|
||||
onChange: (fields: DataTransferField[]) => void;
|
||||
leftColumns: ColumnInfo[];
|
||||
rightColumns: ColumnInfo[];
|
||||
leftTableName?: string;
|
||||
rightTableName?: string;
|
||||
}
|
||||
|
||||
// 컬럼 선택 컴포넌트
|
||||
const ColumnSelect: React.FC<{
|
||||
columns: ColumnInfo[];
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
placeholder: string;
|
||||
disabled?: boolean;
|
||||
}> = ({ columns, value, onValueChange, placeholder, disabled = false }) => {
|
||||
return (
|
||||
<Select value={value} onValueChange={onValueChange} disabled={disabled}>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder={placeholder} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{columns.map((col) => (
|
||||
<SelectItem key={col.column_name} value={col.column_name}>
|
||||
{col.column_comment || col.column_name}
|
||||
<span className="text-muted-foreground ml-1 text-[10px]">({col.column_name})</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
};
|
||||
|
||||
// 개별 필드 편집 모달
|
||||
const FieldEditModal: React.FC<{
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
field: DataTransferField | null;
|
||||
onSave: (field: DataTransferField) => void;
|
||||
leftColumns: ColumnInfo[];
|
||||
rightColumns: ColumnInfo[];
|
||||
leftTableName?: string;
|
||||
rightTableName?: string;
|
||||
isNew?: boolean;
|
||||
}> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
field,
|
||||
onSave,
|
||||
leftColumns,
|
||||
rightColumns,
|
||||
leftTableName,
|
||||
rightTableName,
|
||||
isNew = false,
|
||||
}) => {
|
||||
const [editingField, setEditingField] = useState<DataTransferField>({
|
||||
id: "",
|
||||
panel: "left",
|
||||
sourceColumn: "",
|
||||
targetColumn: "",
|
||||
label: "",
|
||||
description: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (field) {
|
||||
setEditingField({ ...field });
|
||||
} else {
|
||||
setEditingField({
|
||||
id: `field_${Date.now()}`,
|
||||
panel: "left",
|
||||
sourceColumn: "",
|
||||
targetColumn: "",
|
||||
label: "",
|
||||
description: "",
|
||||
});
|
||||
}
|
||||
}, [field, open]);
|
||||
|
||||
const handleSave = () => {
|
||||
if (!editingField.sourceColumn || !editingField.targetColumn) {
|
||||
return;
|
||||
}
|
||||
onSave(editingField);
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
const currentColumns = editingField.panel === "left" ? leftColumns : rightColumns;
|
||||
const currentTableName = editingField.panel === "left" ? leftTableName : rightTableName;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[450px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base">{isNew ? "데이터 전달 필드 추가" : "데이터 전달 필드 편집"}</DialogTitle>
|
||||
<DialogDescription className="text-xs">
|
||||
선택한 항목의 데이터를 모달에 자동으로 전달합니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-2">
|
||||
{/* 패널 선택 */}
|
||||
<div>
|
||||
<Label className="text-xs">소스 패널</Label>
|
||||
<Select
|
||||
value={editingField.panel}
|
||||
onValueChange={(value: "left" | "right") => {
|
||||
setEditingField({ ...editingField, panel: value, sourceColumn: "" });
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="left">
|
||||
좌측 패널 {leftTableName && <span className="text-muted-foreground">({leftTableName})</span>}
|
||||
</SelectItem>
|
||||
<SelectItem value="right">
|
||||
우측 패널 {rightTableName && <span className="text-muted-foreground">({rightTableName})</span>}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-muted-foreground mt-1 text-[10px]">데이터를 가져올 패널을 선택합니다.</p>
|
||||
</div>
|
||||
|
||||
{/* 소스 컬럼 */}
|
||||
<div>
|
||||
<Label className="text-xs">
|
||||
소스 컬럼 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<div className="mt-1">
|
||||
<ColumnSelect
|
||||
columns={currentColumns}
|
||||
value={editingField.sourceColumn}
|
||||
onValueChange={(value) => {
|
||||
const col = currentColumns.find((c) => c.column_name === value);
|
||||
setEditingField({
|
||||
...editingField,
|
||||
sourceColumn: value,
|
||||
// 타겟 컬럼이 비어있으면 소스와 동일하게 설정
|
||||
targetColumn: editingField.targetColumn || value,
|
||||
// 라벨이 비어있으면 컬럼 코멘트 사용
|
||||
label: editingField.label || col?.column_comment || "",
|
||||
});
|
||||
}}
|
||||
placeholder="컬럼 선택..."
|
||||
disabled={currentColumns.length === 0}
|
||||
/>
|
||||
</div>
|
||||
{currentColumns.length === 0 && (
|
||||
<p className="text-destructive mt-1 text-[10px]">
|
||||
{currentTableName ? "테이블에 컬럼이 없습니다." : "테이블을 먼저 선택해주세요."}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 타겟 컬럼 */}
|
||||
<div>
|
||||
<Label className="text-xs">
|
||||
타겟 컬럼 (모달 필드명) <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
value={editingField.targetColumn}
|
||||
onChange={(e) => setEditingField({ ...editingField, targetColumn: e.target.value })}
|
||||
placeholder="모달에서 사용할 필드명"
|
||||
className="mt-1 h-9 text-sm"
|
||||
/>
|
||||
<p className="text-muted-foreground mt-1 text-[10px]">모달 폼에서 이 값을 받을 필드명입니다.</p>
|
||||
</div>
|
||||
|
||||
{/* 라벨 (선택) */}
|
||||
<div>
|
||||
<Label className="text-xs">표시 라벨 (선택)</Label>
|
||||
<Input
|
||||
value={editingField.label || ""}
|
||||
onChange={(e) => setEditingField({ ...editingField, label: e.target.value })}
|
||||
placeholder="표시용 이름"
|
||||
className="mt-1 h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 설명 (선택) */}
|
||||
<div>
|
||||
<Label className="text-xs">설명 (선택)</Label>
|
||||
<Input
|
||||
value={editingField.description || ""}
|
||||
onChange={(e) => setEditingField({ ...editingField, description: e.target.value })}
|
||||
placeholder="이 필드에 대한 설명"
|
||||
className="mt-1 h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 미리보기 */}
|
||||
{editingField.sourceColumn && editingField.targetColumn && (
|
||||
<div className="bg-muted/50 rounded-md p-3">
|
||||
<p className="mb-2 text-xs font-medium">미리보기</p>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<Badge variant="outline" className="text-[10px]">
|
||||
{editingField.panel === "left" ? "좌측" : "우측"}
|
||||
</Badge>
|
||||
<span className="font-mono">{editingField.sourceColumn}</span>
|
||||
<ArrowRight className="h-3 w-3" />
|
||||
<span className="font-mono">{editingField.targetColumn}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)} className="h-9 text-sm">
|
||||
취소
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={!editingField.sourceColumn || !editingField.targetColumn}
|
||||
className="h-9 text-sm"
|
||||
>
|
||||
{isNew ? "추가" : "저장"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
// 메인 모달 컴포넌트
|
||||
const DataTransferConfigModal: React.FC<DataTransferConfigModalProps> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
dataTransferFields,
|
||||
onChange,
|
||||
leftColumns,
|
||||
rightColumns,
|
||||
leftTableName,
|
||||
rightTableName,
|
||||
}) => {
|
||||
const [fields, setFields] = useState<DataTransferField[]>([]);
|
||||
const [editModalOpen, setEditModalOpen] = useState(false);
|
||||
const [editingField, setEditingField] = useState<DataTransferField | null>(null);
|
||||
const [isNewField, setIsNewField] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
// 기존 필드에 panel이 없으면 left로 기본 설정 (하위 호환성)
|
||||
const normalizedFields = (dataTransferFields || []).map((field, idx) => ({
|
||||
...field,
|
||||
id: field.id || `field_${idx}`,
|
||||
panel: field.panel || ("left" as const),
|
||||
}));
|
||||
setFields(normalizedFields);
|
||||
}
|
||||
}, [open, dataTransferFields]);
|
||||
|
||||
const handleAddField = () => {
|
||||
setEditingField(null);
|
||||
setIsNewField(true);
|
||||
setEditModalOpen(true);
|
||||
};
|
||||
|
||||
const handleEditField = (field: DataTransferField) => {
|
||||
setEditingField(field);
|
||||
setIsNewField(false);
|
||||
setEditModalOpen(true);
|
||||
};
|
||||
|
||||
const handleSaveField = (field: DataTransferField) => {
|
||||
if (isNewField) {
|
||||
setFields([...fields, field]);
|
||||
} else {
|
||||
setFields(fields.map((f) => (f.id === field.id ? field : f)));
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveField = (id: string) => {
|
||||
setFields(fields.filter((f) => f.id !== id));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
onChange(fields);
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
const getColumnLabel = (panel: "left" | "right", columnName: string) => {
|
||||
const columns = panel === "left" ? leftColumns : rightColumns;
|
||||
const col = columns.find((c) => c.column_name === columnName);
|
||||
return col?.column_comment || columnName;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="flex max-h-[85vh] max-w-[95vw] flex-col sm:max-w-[550px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base">데이터 전달 설정</DialogTitle>
|
||||
<DialogDescription className="text-xs">
|
||||
버튼 클릭 시 모달에 자동으로 전달할 데이터를 설정합니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="min-h-0 flex-1 overflow-hidden">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<span className="text-muted-foreground text-xs">전달 필드 ({fields.length}개)</span>
|
||||
<Button size="sm" variant="outline" className="h-7 text-xs" onClick={handleAddField}>
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="h-[300px]">
|
||||
<div className="space-y-2 pr-2">
|
||||
{fields.length === 0 ? (
|
||||
<div className="text-muted-foreground rounded-md border py-8 text-center text-xs">
|
||||
<p className="mb-2">전달할 필드가 없습니다</p>
|
||||
<Button size="sm" variant="ghost" className="h-7 text-xs" onClick={handleAddField}>
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
필드 추가
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
fields.map((field) => (
|
||||
<div
|
||||
key={field.id}
|
||||
className="hover:bg-muted/50 flex items-center gap-2 rounded-md border p-2 transition-colors"
|
||||
>
|
||||
<Badge variant={field.panel === "left" ? "default" : "secondary"} className="shrink-0 text-[10px]">
|
||||
{field.panel === "left" ? "좌측" : "우측"}
|
||||
</Badge>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
<span className="font-mono">{getColumnLabel(field.panel, field.sourceColumn)}</span>
|
||||
<ArrowRight className="text-muted-foreground h-3 w-3 shrink-0" />
|
||||
<span className="font-mono truncate">{field.targetColumn}</span>
|
||||
</div>
|
||||
{field.description && (
|
||||
<p className="text-muted-foreground mt-0.5 truncate text-[10px]">{field.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-6 w-6 p-0"
|
||||
onClick={() => handleEditField(field)}
|
||||
>
|
||||
<Settings className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="text-destructive hover:text-destructive h-6 w-6 p-0"
|
||||
onClick={() => handleRemoveField(field.id || "")}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<div className="bg-muted/50 text-muted-foreground rounded-md p-2 text-[10px]">
|
||||
<p>버튼별로 개별 데이터 전달 설정이 있으면 해당 설정이 우선 적용됩니다.</p>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)} className="h-9 text-sm">
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSave} className="h-9 text-sm">
|
||||
저장
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 필드 편집 모달 */}
|
||||
<FieldEditModal
|
||||
open={editModalOpen}
|
||||
onOpenChange={setEditModalOpen}
|
||||
field={editingField}
|
||||
onSave={handleSaveField}
|
||||
leftColumns={leftColumns}
|
||||
rightColumns={rightColumns}
|
||||
leftTableName={leftTableName}
|
||||
rightTableName={rightTableName}
|
||||
isNew={isNewField}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DataTransferConfigModal;
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,163 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { Check, ChevronsUpDown, Search } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
|
||||
export interface ColumnInfo {
|
||||
column_name: string;
|
||||
data_type: string;
|
||||
column_comment?: string;
|
||||
}
|
||||
|
||||
interface SearchableColumnSelectProps {
|
||||
tableName: string;
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
excludeColumns?: string[]; // 이미 선택된 컬럼 제외
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const SearchableColumnSelect: React.FC<SearchableColumnSelectProps> = ({
|
||||
tableName,
|
||||
value,
|
||||
onValueChange,
|
||||
placeholder = "컬럼 선택",
|
||||
disabled = false,
|
||||
excludeColumns = [],
|
||||
className,
|
||||
}) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [columns, setColumns] = useState<ColumnInfo[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 컬럼 목록 로드
|
||||
const loadColumns = useCallback(async () => {
|
||||
if (!tableName) {
|
||||
setColumns([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await apiClient.get(`/table-management/tables/${tableName}/columns?size=200`);
|
||||
|
||||
let columnList: any[] = [];
|
||||
if (response.data?.success && response.data?.data?.columns) {
|
||||
columnList = response.data.data.columns;
|
||||
} else if (Array.isArray(response.data?.data?.columns)) {
|
||||
columnList = response.data.data.columns;
|
||||
} else if (Array.isArray(response.data?.data)) {
|
||||
columnList = response.data.data;
|
||||
} else if (Array.isArray(response.data)) {
|
||||
columnList = response.data;
|
||||
}
|
||||
|
||||
const transformedColumns = columnList.map((c: any) => ({
|
||||
column_name: c.columnName ?? c.column_name ?? c.name ?? "",
|
||||
data_type: c.dataType ?? c.data_type ?? c.type ?? "",
|
||||
column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
|
||||
}));
|
||||
|
||||
setColumns(transformedColumns);
|
||||
} catch (error) {
|
||||
console.error("컬럼 목록 로드 실패:", error);
|
||||
setColumns([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [tableName]);
|
||||
|
||||
useEffect(() => {
|
||||
loadColumns();
|
||||
}, [loadColumns]);
|
||||
|
||||
// 선택된 컬럼 정보 가져오기
|
||||
const selectedColumn = columns.find((col) => col.column_name === value);
|
||||
const displayValue = selectedColumn
|
||||
? selectedColumn.column_comment || selectedColumn.column_name
|
||||
: value || "";
|
||||
|
||||
// 필터링된 컬럼 목록 (이미 선택된 컬럼 제외)
|
||||
const filteredColumns = columns.filter(
|
||||
(col) => !excludeColumns.includes(col.column_name) || col.column_name === value
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
disabled={disabled || loading || !tableName}
|
||||
className={cn("w-full justify-between h-9 text-sm", className)}
|
||||
>
|
||||
{loading ? (
|
||||
"로딩 중..."
|
||||
) : !tableName ? (
|
||||
"테이블을 먼저 선택하세요"
|
||||
) : (
|
||||
<span className="truncate">
|
||||
{displayValue || placeholder}
|
||||
</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
|
||||
<Command>
|
||||
<CommandInput placeholder="컬럼명 또는 라벨 검색..." className="h-9" />
|
||||
<CommandList>
|
||||
<CommandEmpty>
|
||||
{filteredColumns.length === 0 ? "선택 가능한 컬럼이 없습니다" : "검색 결과가 없습니다"}
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{filteredColumns.map((col) => (
|
||||
<CommandItem
|
||||
key={col.column_name}
|
||||
value={`${col.column_name} ${col.column_comment || ""}`}
|
||||
onSelect={() => {
|
||||
onValueChange(col.column_name);
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4 shrink-0",
|
||||
value === col.column_name ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col min-w-0">
|
||||
<span className="truncate font-medium">
|
||||
{col.column_comment || col.column_name}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground truncate">
|
||||
{col.column_name} ({col.data_type})
|
||||
</span>
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchableColumnSelect;
|
||||
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { useSortable } from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { GripVertical, Settings, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ColumnConfig } from "../types";
|
||||
|
||||
interface SortableColumnItemProps {
|
||||
id: string;
|
||||
column: ColumnConfig;
|
||||
index: number;
|
||||
onSettingsClick: () => void;
|
||||
onRemove: () => void;
|
||||
showGroupingSettings?: boolean;
|
||||
}
|
||||
|
||||
export const SortableColumnItem: React.FC<SortableColumnItemProps> = ({
|
||||
id,
|
||||
column,
|
||||
index,
|
||||
onSettingsClick,
|
||||
onRemove,
|
||||
showGroupingSettings = false,
|
||||
}) => {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md border bg-card p-2",
|
||||
isDragging && "opacity-50 shadow-lg"
|
||||
)}
|
||||
>
|
||||
{/* 드래그 핸들 */}
|
||||
<div
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className="cursor-grab touch-none text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<GripVertical className="h-4 w-4" />
|
||||
</div>
|
||||
|
||||
{/* 컬럼 정보 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium truncate">
|
||||
{column.label || column.name || `컬럼 ${index + 1}`}
|
||||
</span>
|
||||
{column.name && column.label && (
|
||||
<span className="text-xs text-muted-foreground truncate">
|
||||
({column.name})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 설정 요약 뱃지 */}
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{column.displayRow && (
|
||||
<Badge variant="outline" className="text-[10px] h-4">
|
||||
{column.displayRow === "name" ? "이름행" : "정보행"}
|
||||
</Badge>
|
||||
)}
|
||||
{showGroupingSettings && column.displayConfig?.displayType === "badge" && (
|
||||
<Badge variant="secondary" className="text-[10px] h-4">
|
||||
배지
|
||||
</Badge>
|
||||
)}
|
||||
{showGroupingSettings && column.displayConfig?.aggregate?.enabled && (
|
||||
<Badge variant="secondary" className="text-[10px] h-4">
|
||||
{column.displayConfig.aggregate.function === "DISTINCT" ? "중복제거" : "개수"}
|
||||
</Badge>
|
||||
)}
|
||||
{column.sourceTable && (
|
||||
<Badge variant="outline" className="text-[10px] h-4">
|
||||
{column.sourceTable}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼들 */}
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-7 w-7 p-0"
|
||||
onClick={onSettingsClick}
|
||||
title="세부설정"
|
||||
>
|
||||
<Settings className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-7 w-7 p-0 text-destructive hover:text-destructive"
|
||||
onClick={onRemove}
|
||||
title="삭제"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SortableColumnItem;
|
||||
|
||||
|
|
@ -37,5 +37,13 @@ export type {
|
|||
JoinConfig,
|
||||
DataTransferField,
|
||||
ColumnConfig,
|
||||
ActionButtonConfig,
|
||||
ValueSourceConfig,
|
||||
EntityReferenceConfig,
|
||||
ModalParamMapping,
|
||||
} from "./types";
|
||||
|
||||
// 모달 컴포넌트 내보내기 (별도 사용 필요시)
|
||||
export { ColumnConfigModal } from "./ColumnConfigModal";
|
||||
export { ActionButtonConfigModal } from "./ActionButtonConfigModal";
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,65 @@
|
|||
* 마스터-디테일 패턴의 좌우 분할 레이아웃 (개선 버전)
|
||||
*/
|
||||
|
||||
// =============================================================================
|
||||
// 값 소스 및 연동 설정
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* 값 소스 설정 (화면 내 필드/폼에서 값 가져오기)
|
||||
*/
|
||||
export interface ValueSourceConfig {
|
||||
type: "none" | "field" | "dataForm" | "component"; // 소스 유형
|
||||
fieldId?: string; // 필드 컴포넌트 ID
|
||||
formId?: string; // 데이터폼 ID
|
||||
formFieldName?: string; // 데이터폼 내 필드명
|
||||
componentId?: string; // 다른 컴포넌트 ID
|
||||
componentColumn?: string; // 컴포넌트에서 참조할 컬럼
|
||||
}
|
||||
|
||||
/**
|
||||
* 엔티티 참조 설정 (엔티티에서 표시할 값 선택)
|
||||
*/
|
||||
export interface EntityReferenceConfig {
|
||||
entityId?: string; // 연결된 엔티티 ID
|
||||
displayColumns?: string[]; // 표시할 엔티티 컬럼들 (체크박스 선택)
|
||||
primaryDisplayColumn?: string; // 주 표시 컬럼
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// 컬럼 표시 설정
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* 컬럼별 표시 설정 (그룹핑 시 사용)
|
||||
*/
|
||||
export interface ColumnDisplayConfig {
|
||||
displayType: "text" | "badge"; // 표시 방식 (텍스트 또는 배지)
|
||||
aggregate?: {
|
||||
enabled: boolean; // 집계 사용 여부
|
||||
function: "DISTINCT" | "COUNT"; // 집계 방식 (중복제거 또는 개수)
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 그룹핑 설정 (왼쪽 패널용)
|
||||
*/
|
||||
export interface GroupingConfig {
|
||||
enabled: boolean; // 그룹핑 사용 여부
|
||||
groupByColumn: string; // 그룹 기준 컬럼 (예: item_id)
|
||||
}
|
||||
|
||||
/**
|
||||
* 탭 설정
|
||||
*/
|
||||
export interface TabConfig {
|
||||
enabled: boolean; // 탭 사용 여부
|
||||
mode?: "auto" | "manual"; // 하위 호환성용 (실제로는 manual만 사용)
|
||||
tabSourceColumn?: string; // 탭 생성 기준 컬럼
|
||||
showCount?: boolean; // 탭에 항목 개수 표시 여부
|
||||
defaultTab?: string; // 기본 선택 탭 (값 또는 ID)
|
||||
}
|
||||
|
||||
/**
|
||||
* 컬럼 설정
|
||||
*/
|
||||
|
|
@ -13,6 +72,9 @@ export interface ColumnConfig {
|
|||
displayRow?: "name" | "info"; // 표시 위치 (name: 이름 행, info: 정보 행)
|
||||
width?: number; // 너비 (px)
|
||||
bold?: boolean; // 굵게 표시
|
||||
displayConfig?: ColumnDisplayConfig; // 컬럼별 표시 설정 (그룹핑 시)
|
||||
entityReference?: EntityReferenceConfig; // 엔티티 참조 설정
|
||||
valueSource?: ValueSourceConfig; // 값 소스 설정 (화면 내 연동)
|
||||
format?: {
|
||||
type?: "text" | "number" | "currency" | "date";
|
||||
thousandSeparator?: boolean;
|
||||
|
|
@ -23,27 +85,58 @@ export interface ColumnConfig {
|
|||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 모달 파라미터 매핑 설정
|
||||
*/
|
||||
export interface ModalParamMapping {
|
||||
sourceColumn: string; // 선택된 항목에서 가져올 컬럼
|
||||
targetParam: string; // 모달에 전달할 파라미터명
|
||||
}
|
||||
|
||||
/**
|
||||
* 액션 버튼 설정
|
||||
*/
|
||||
export interface ActionButtonConfig {
|
||||
id: string; // 고유 ID
|
||||
label: string; // 버튼 라벨
|
||||
variant?: "default" | "outline" | "destructive" | "ghost"; // 버튼 스타일
|
||||
variant?: "default" | "secondary" | "outline" | "destructive" | "ghost"; // 버튼 스타일
|
||||
icon?: string; // lucide 아이콘명 (예: "Plus", "Edit", "Trash2")
|
||||
showCondition?: "always" | "selected" | "notSelected"; // 표시 조건
|
||||
action?: "add" | "edit" | "delete" | "bulk-delete" | "api" | "custom"; // 버튼 동작 유형
|
||||
|
||||
// 모달 관련
|
||||
modalScreenId?: number; // 연결할 모달 화면 ID
|
||||
action?: "add" | "edit" | "delete" | "bulk-delete" | "custom"; // 버튼 동작 유형
|
||||
modalParams?: ModalParamMapping[]; // 모달에 전달할 파라미터 매핑
|
||||
|
||||
// API 호출 관련
|
||||
apiEndpoint?: string; // API 엔드포인트
|
||||
apiMethod?: "GET" | "POST" | "PUT" | "DELETE"; // HTTP 메서드
|
||||
confirmMessage?: string; // 확인 메시지 (삭제 등)
|
||||
|
||||
// 커스텀 액션
|
||||
customActionId?: string; // 커스텀 액션 식별자
|
||||
}
|
||||
|
||||
/**
|
||||
* 데이터 전달 필드 설정
|
||||
*/
|
||||
export interface DataTransferField {
|
||||
sourceColumn: string; // 좌측 패널의 컬럼명
|
||||
sourceColumn: string; // 소스 패널의 컬럼명
|
||||
targetColumn: string; // 모달로 전달할 컬럼명
|
||||
label?: string; // 표시용 라벨
|
||||
}
|
||||
|
||||
/**
|
||||
* 버튼별 데이터 전달 설정
|
||||
* 특정 패널의 특정 버튼에 어떤 데이터를 전달할지 설정
|
||||
*/
|
||||
export interface ButtonDataTransferConfig {
|
||||
id: string; // 고유 ID
|
||||
targetPanel: "left" | "right"; // 대상 패널
|
||||
targetButtonId: string; // 대상 버튼 ID
|
||||
fields: DataTransferField[]; // 전달할 필드 목록
|
||||
}
|
||||
|
||||
/**
|
||||
* 검색 컬럼 설정
|
||||
*/
|
||||
|
|
@ -62,15 +155,27 @@ export interface LeftPanelConfig {
|
|||
searchColumn?: string; // 검색 대상 컬럼 (단일, 하위 호환성)
|
||||
searchColumns?: SearchColumnConfig[]; // 검색 대상 컬럼들 (복수)
|
||||
showSearch?: boolean; // 검색 표시 여부
|
||||
showAddButton?: boolean; // 추가 버튼 표시
|
||||
addButtonLabel?: string; // 추가 버튼 라벨
|
||||
addModalScreenId?: number; // 추가 모달 화면 ID
|
||||
showAddButton?: boolean; // 추가 버튼 표시 (하위 호환성)
|
||||
addButtonLabel?: string; // 추가 버튼 라벨 (하위 호환성)
|
||||
addModalScreenId?: number; // 추가 모달 화면 ID (하위 호환성)
|
||||
showEditButton?: boolean; // 수정 버튼 표시
|
||||
showDeleteButton?: boolean; // 삭제 버튼 표시
|
||||
editModalScreenId?: number; // 수정 모달 화면 ID
|
||||
actionButtons?: ActionButtonConfig[]; // 복수 액션 버튼 배열
|
||||
displayMode?: "card" | "table"; // 표시 모드 (card: 카드형, table: 테이블형)
|
||||
primaryKeyColumn?: string; // 기본키 컬럼명 (선택용, 기본: id)
|
||||
// 계층 구조 설정
|
||||
hierarchyConfig?: {
|
||||
enabled: boolean;
|
||||
parentColumn: string; // 부모 참조 컬럼 (예: parent_dept_code)
|
||||
idColumn: string; // ID 컬럼 (예: dept_code)
|
||||
};
|
||||
// 그룹핑 설정
|
||||
grouping?: GroupingConfig;
|
||||
// 탭 설정
|
||||
tabConfig?: TabConfig;
|
||||
// 추가 조인 테이블 설정 (다른 테이블 참조하여 컬럼 추가 표시)
|
||||
joinTables?: JoinTableConfig[];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -106,6 +211,8 @@ export interface RightPanelConfig {
|
|||
* - 결과: 부서별 사원 목록에 이메일, 전화번호 등 개인정보 함께 표시
|
||||
*/
|
||||
joinTables?: JoinTableConfig[];
|
||||
// 탭 설정
|
||||
tabConfig?: TabConfig;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -157,9 +264,12 @@ export interface SplitPanelLayout2Config {
|
|||
// 조인 설정
|
||||
joinConfig: JoinConfig;
|
||||
|
||||
// 데이터 전달 설정 (모달로 전달할 필드)
|
||||
// 데이터 전달 설정 (하위 호환성 - 기본 설정)
|
||||
dataTransferFields?: DataTransferField[];
|
||||
|
||||
// 버튼별 데이터 전달 설정 (신규)
|
||||
buttonDataTransfers?: ButtonDataTransferConfig[];
|
||||
|
||||
// 레이아웃 설정
|
||||
splitRatio?: number; // 좌우 비율 (0-100, 기본 30)
|
||||
resizable?: boolean; // 크기 조절 가능 여부
|
||||
|
|
|
|||
|
|
@ -621,6 +621,14 @@ export function TableSectionRenderer({
|
|||
if (col.defaultValue !== undefined && newItem[col.field] === undefined) {
|
||||
newItem[col.field] = col.defaultValue;
|
||||
}
|
||||
|
||||
// 부모에서 값 받기 (receiveFromParent)
|
||||
if (col.receiveFromParent) {
|
||||
const parentField = col.parentFieldName || col.field;
|
||||
if (formData[parentField] !== undefined) {
|
||||
newItem[col.field] = formData[parentField];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return newItem;
|
||||
|
|
|
|||
|
|
@ -1223,12 +1223,11 @@ export function UniversalFormModalComponent({
|
|||
if (subTableConfig.options?.saveMainAsFirst) {
|
||||
mainFieldMappings = [];
|
||||
|
||||
// 메인 섹션(비반복)의 필드들을 서브 테이블에 매핑
|
||||
// 서브 테이블의 fieldMappings에서 targetColumn을 찾아서 매핑
|
||||
// fieldMappings에 정의된 targetColumn만 매핑 (서브 테이블에 존재하는 컬럼만)
|
||||
for (const mapping of subTableConfig.fieldMappings || []) {
|
||||
if (mapping.targetColumn) {
|
||||
// 메인 데이터에서 동일한 컬럼명이 있으면 매핑
|
||||
if (mainData[mapping.targetColumn] !== undefined) {
|
||||
if (mainData[mapping.targetColumn] !== undefined && mainData[mapping.targetColumn] !== null && mainData[mapping.targetColumn] !== "") {
|
||||
mainFieldMappings.push({
|
||||
formField: mapping.targetColumn,
|
||||
targetColumn: mapping.targetColumn,
|
||||
|
|
@ -1239,7 +1238,7 @@ export function UniversalFormModalComponent({
|
|||
config.sections.forEach((section) => {
|
||||
if (section.repeatable || section.type === "table") return;
|
||||
const matchingField = (section.fields || []).find((f) => f.columnName === mapping.targetColumn);
|
||||
if (matchingField && mainData[matchingField.columnName] !== undefined) {
|
||||
if (matchingField && mainData[matchingField.columnName] !== undefined && mainData[matchingField.columnName] !== null && mainData[matchingField.columnName] !== "") {
|
||||
mainFieldMappings!.push({
|
||||
formField: matchingField.columnName,
|
||||
targetColumn: mapping.targetColumn,
|
||||
|
|
@ -1374,6 +1373,11 @@ export function UniversalFormModalComponent({
|
|||
if (onSave) {
|
||||
onSave({ ...formData, _saveCompleted: true });
|
||||
}
|
||||
|
||||
// 저장 완료 후 모달 닫기 이벤트 발생
|
||||
if (config.saveConfig.afterSave?.closeModal !== false) {
|
||||
window.dispatchEvent(new CustomEvent("closeEditModal"));
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("저장 실패:", error);
|
||||
// axios 에러의 경우 서버 응답 메시지 추출
|
||||
|
|
@ -1492,6 +1496,22 @@ export function UniversalFormModalComponent({
|
|||
return `${valueVal} - ${displayVal}`;
|
||||
case "name_code":
|
||||
return `${displayVal} (${valueVal})`;
|
||||
case "custom":
|
||||
// 커스텀 형식: {컬럼명}을 실제 값으로 치환
|
||||
if (lfg.customDisplayFormat) {
|
||||
let result = lfg.customDisplayFormat;
|
||||
// {컬럼명} 패턴을 찾아서 실제 값으로 치환
|
||||
const matches = result.match(/\{([^}]+)\}/g);
|
||||
if (matches) {
|
||||
matches.forEach((match) => {
|
||||
const columnName = match.slice(1, -1); // { } 제거
|
||||
const columnValue = row[columnName];
|
||||
result = result.replace(match, columnValue !== undefined && columnValue !== null ? String(columnValue) : "");
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}
|
||||
return String(displayVal);
|
||||
case "name_only":
|
||||
default:
|
||||
return String(displayVal);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import React, { useState, useEffect, useCallback } from "react";
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
|
@ -47,13 +48,24 @@ const HelpText = ({ children }: { children: React.ReactNode }) => (
|
|||
<p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
|
||||
);
|
||||
|
||||
export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFormModalConfigPanelProps) {
|
||||
// 부모 화면에서 전달 가능한 필드 타입
|
||||
interface AvailableParentField {
|
||||
name: string; // 필드명 (columnName)
|
||||
label: string; // 표시 라벨
|
||||
sourceComponent?: string; // 출처 컴포넌트 (예: "TableList", "SplitPanelLayout2")
|
||||
sourceTable?: string; // 출처 테이블명
|
||||
}
|
||||
|
||||
export function UniversalFormModalConfigPanel({ config, onChange, allComponents = [] }: UniversalFormModalConfigPanelProps) {
|
||||
// 테이블 목록
|
||||
const [tables, setTables] = useState<{ name: string; label: string }[]>([]);
|
||||
const [tableColumns, setTableColumns] = useState<{
|
||||
[tableName: string]: { name: string; type: string; label: string }[];
|
||||
}>({});
|
||||
|
||||
// 부모 화면에서 전달 가능한 필드 목록
|
||||
const [availableParentFields, setAvailableParentFields] = useState<AvailableParentField[]>([]);
|
||||
|
||||
// 채번규칙 목록
|
||||
const [numberingRules, setNumberingRules] = useState<{ id: string; name: string }[]>([]);
|
||||
|
||||
|
|
@ -71,6 +83,186 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
|
|||
loadNumberingRules();
|
||||
}, []);
|
||||
|
||||
// allComponents에서 부모 화면에서 전달 가능한 필드 추출
|
||||
useEffect(() => {
|
||||
const extractParentFields = async () => {
|
||||
if (!allComponents || allComponents.length === 0) {
|
||||
setAvailableParentFields([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const fields: AvailableParentField[] = [];
|
||||
|
||||
for (const comp of allComponents) {
|
||||
// 컴포넌트 타입 추출 (여러 위치에서 확인)
|
||||
const compType = comp.componentId || comp.componentConfig?.type || comp.componentConfig?.id || comp.type;
|
||||
const compConfig = comp.componentConfig || {};
|
||||
|
||||
// 1. TableList / InteractiveDataTable - 테이블 컬럼 추출
|
||||
if (compType === "table-list" || compType === "interactive-data-table") {
|
||||
const tableName = compConfig.selectedTable || compConfig.tableName;
|
||||
if (tableName) {
|
||||
// 테이블 컬럼 로드
|
||||
try {
|
||||
const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
|
||||
const columns = response.data?.data?.columns;
|
||||
if (response.data?.success && Array.isArray(columns)) {
|
||||
columns.forEach((col: any) => {
|
||||
const colName = col.columnName || col.column_name;
|
||||
const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
|
||||
fields.push({
|
||||
name: colName,
|
||||
label: colLabel,
|
||||
sourceComponent: "TableList",
|
||||
sourceTable: tableName,
|
||||
});
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`테이블 컬럼 로드 실패 (${tableName}):`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 2. SplitPanelLayout2 - 데이터 전달 필드 및 소스 테이블 컬럼 추출
|
||||
if (compType === "split-panel-layout2") {
|
||||
// dataTransferFields 추출
|
||||
const transferFields = compConfig.dataTransferFields;
|
||||
if (transferFields && Array.isArray(transferFields)) {
|
||||
transferFields.forEach((field: any) => {
|
||||
if (field.targetColumn) {
|
||||
fields.push({
|
||||
name: field.targetColumn,
|
||||
label: field.targetColumn,
|
||||
sourceComponent: "SplitPanelLayout2",
|
||||
sourceTable: compConfig.leftPanel?.tableName,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 좌측 패널 테이블 컬럼도 추출
|
||||
const leftTableName = compConfig.leftPanel?.tableName;
|
||||
if (leftTableName) {
|
||||
try {
|
||||
const response = await apiClient.get(`/table-management/tables/${leftTableName}/columns`);
|
||||
const columns = response.data?.data?.columns;
|
||||
if (response.data?.success && Array.isArray(columns)) {
|
||||
columns.forEach((col: any) => {
|
||||
const colName = col.columnName || col.column_name;
|
||||
const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
|
||||
// 중복 방지
|
||||
if (!fields.some(f => f.name === colName && f.sourceTable === leftTableName)) {
|
||||
fields.push({
|
||||
name: colName,
|
||||
label: colLabel,
|
||||
sourceComponent: "SplitPanelLayout2 (좌측)",
|
||||
sourceTable: leftTableName,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`테이블 컬럼 로드 실패 (${leftTableName}):`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 기타 테이블 관련 컴포넌트
|
||||
if (compType === "card-display" || compType === "simple-repeater-table") {
|
||||
const tableName = compConfig.tableName || compConfig.initialDataConfig?.sourceTable;
|
||||
if (tableName) {
|
||||
try {
|
||||
const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
|
||||
const columns = response.data?.data?.columns;
|
||||
if (response.data?.success && Array.isArray(columns)) {
|
||||
columns.forEach((col: any) => {
|
||||
const colName = col.columnName || col.column_name;
|
||||
const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
|
||||
if (!fields.some(f => f.name === colName && f.sourceTable === tableName)) {
|
||||
fields.push({
|
||||
name: colName,
|
||||
label: colLabel,
|
||||
sourceComponent: compType,
|
||||
sourceTable: tableName,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`테이블 컬럼 로드 실패 (${tableName}):`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 4. 버튼 컴포넌트 - openModalWithData의 fieldMappings/dataMapping에서 소스 컬럼 추출
|
||||
if (compType === "button-primary" || compType === "button" || compType === "button-secondary") {
|
||||
const action = compConfig.action || {};
|
||||
|
||||
// fieldMappings에서 소스 컬럼 추출
|
||||
const fieldMappings = action.fieldMappings || [];
|
||||
fieldMappings.forEach((mapping: any) => {
|
||||
if (mapping.sourceColumn && !fields.some(f => f.name === mapping.sourceColumn)) {
|
||||
fields.push({
|
||||
name: mapping.sourceColumn,
|
||||
label: mapping.sourceColumn,
|
||||
sourceComponent: "Button (fieldMappings)",
|
||||
sourceTable: action.sourceTableName,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// dataMapping에서 소스 컬럼 추출
|
||||
const dataMapping = action.dataMapping || [];
|
||||
dataMapping.forEach((mapping: any) => {
|
||||
if (mapping.sourceColumn && !fields.some(f => f.name === mapping.sourceColumn)) {
|
||||
fields.push({
|
||||
name: mapping.sourceColumn,
|
||||
label: mapping.sourceColumn,
|
||||
sourceComponent: "Button (dataMapping)",
|
||||
sourceTable: action.sourceTableName,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 5. 현재 모달의 저장 테이블 컬럼도 추가 (부모에서 전달받을 수 있는 값들)
|
||||
const currentTableName = config.saveConfig?.tableName;
|
||||
if (currentTableName) {
|
||||
try {
|
||||
const response = await apiClient.get(`/table-management/tables/${currentTableName}/columns`);
|
||||
const columns = response.data?.data?.columns;
|
||||
if (response.data?.success && Array.isArray(columns)) {
|
||||
columns.forEach((col: any) => {
|
||||
const colName = col.columnName || col.column_name;
|
||||
const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
|
||||
if (!fields.some(f => f.name === colName)) {
|
||||
fields.push({
|
||||
name: colName,
|
||||
label: colLabel,
|
||||
sourceComponent: "현재 폼 테이블",
|
||||
sourceTable: currentTableName,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`현재 테이블 컬럼 로드 실패 (${currentTableName}):`, error);
|
||||
}
|
||||
}
|
||||
|
||||
// 중복 제거 (같은 name이면 첫 번째만 유지)
|
||||
const uniqueFields = fields.filter((field, index, self) =>
|
||||
index === self.findIndex(f => f.name === field.name)
|
||||
);
|
||||
|
||||
setAvailableParentFields(uniqueFields);
|
||||
};
|
||||
|
||||
extractParentFields();
|
||||
}, [allComponents, config.saveConfig?.tableName]);
|
||||
|
||||
// 저장 테이블 변경 시 컬럼 로드
|
||||
useEffect(() => {
|
||||
if (config.saveConfig.tableName) {
|
||||
|
|
@ -84,9 +276,10 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
|
|||
const data = response.data?.data;
|
||||
if (response.data?.success && Array.isArray(data)) {
|
||||
setTables(
|
||||
data.map((t: { tableName?: string; table_name?: string; tableLabel?: string; table_label?: string }) => ({
|
||||
data.map((t: { tableName?: string; table_name?: string; displayName?: string; tableLabel?: string; table_label?: string }) => ({
|
||||
name: t.tableName || t.table_name || "",
|
||||
label: t.tableLabel || t.table_label || t.tableName || t.table_name || "",
|
||||
// displayName 우선, 없으면 tableLabel, 그것도 없으면 테이블명
|
||||
label: t.displayName || t.tableLabel || t.table_label || "",
|
||||
})),
|
||||
);
|
||||
}
|
||||
|
|
@ -334,6 +527,21 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
|
|||
<HelpText>모달 창의 크기를 선택하세요</HelpText>
|
||||
</div>
|
||||
|
||||
{/* 저장 버튼 표시 설정 */}
|
||||
<div className="w-full min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="show-save-button"
|
||||
checked={config.modal.showSaveButton !== false}
|
||||
onCheckedChange={(checked) => updateModalConfig({ showSaveButton: checked === true })}
|
||||
/>
|
||||
<Label htmlFor="show-save-button" className="text-xs font-medium cursor-pointer">
|
||||
저장 버튼 표시
|
||||
</Label>
|
||||
</div>
|
||||
<HelpText>체크 해제 시 모달 하단의 저장 버튼이 숨겨집니다</HelpText>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 w-full min-w-0">
|
||||
<div className="w-full min-w-0">
|
||||
<Label className="text-xs font-medium mb-1.5 block">저장 버튼 텍스트</Label>
|
||||
|
|
@ -604,6 +812,12 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
|
|||
setSelectedField(field);
|
||||
setFieldDetailModalOpen(true);
|
||||
}}
|
||||
tableName={config.saveConfig.tableName}
|
||||
tableColumns={tableColumns[config.saveConfig.tableName || ""]?.map(col => ({
|
||||
name: col.name,
|
||||
type: col.type,
|
||||
label: col.label || col.name
|
||||
})) || []}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -650,6 +864,9 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
|
|||
tableColumns={tableColumns}
|
||||
numberingRules={numberingRules}
|
||||
onLoadTableColumns={loadTableColumns}
|
||||
availableParentFields={availableParentFields}
|
||||
targetTableName={config.saveConfig?.tableName}
|
||||
targetTableColumns={config.saveConfig?.tableName ? tableColumns[config.saveConfig.tableName] || [] : []}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -690,6 +907,7 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
|
|||
)}
|
||||
onLoadTableColumns={loadTableColumns}
|
||||
allSections={config.sections as FormSectionConfig[]}
|
||||
availableParentFields={availableParentFields}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,16 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Di
|
|||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Plus, Trash2, Settings as SettingsIcon } from "lucide-react";
|
||||
import { Plus, Trash2, Settings as SettingsIcon, Check, ChevronsUpDown } from "lucide-react";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
FormFieldConfig,
|
||||
|
|
@ -36,6 +45,17 @@ const HelpText = ({ children }: { children: React.ReactNode }) => (
|
|||
<p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
|
||||
);
|
||||
|
||||
/**
|
||||
* 부모 화면에서 전달 가능한 필드 타입
|
||||
* 유니버셜 폼 모달에서 "부모에서 값 받기" 설정 시 선택 가능한 필드 목록
|
||||
*/
|
||||
export interface AvailableParentField {
|
||||
name: string; // 필드명 (columnName)
|
||||
label: string; // 표시 라벨
|
||||
sourceComponent?: string; // 출처 컴포넌트 (예: "TableList", "SplitPanelLayout2")
|
||||
sourceTable?: string; // 출처 테이블명
|
||||
}
|
||||
|
||||
interface FieldDetailSettingsModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
|
|
@ -45,6 +65,11 @@ interface FieldDetailSettingsModalProps {
|
|||
tableColumns: { [tableName: string]: { name: string; type: string; label: string }[] };
|
||||
numberingRules: { id: string; name: string }[];
|
||||
onLoadTableColumns: (tableName: string) => void;
|
||||
// 부모 화면에서 전달 가능한 필드 목록 (선택사항)
|
||||
availableParentFields?: AvailableParentField[];
|
||||
// 저장 테이블 정보 (타겟 컬럼 선택용)
|
||||
targetTableName?: string;
|
||||
targetTableColumns?: { name: string; type: string; label: string }[];
|
||||
}
|
||||
|
||||
export function FieldDetailSettingsModal({
|
||||
|
|
@ -56,13 +81,23 @@ export function FieldDetailSettingsModal({
|
|||
tableColumns,
|
||||
numberingRules,
|
||||
onLoadTableColumns,
|
||||
availableParentFields = [],
|
||||
// targetTableName은 타겟 컬럼 선택 시 참고용으로 전달됨 (현재 targetTableColumns만 사용)
|
||||
targetTableName: _targetTableName,
|
||||
targetTableColumns = [],
|
||||
}: FieldDetailSettingsModalProps) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
void _targetTableName; // 향후 사용 가능성을 위해 유지
|
||||
// 로컬 상태로 필드 설정 관리
|
||||
const [localField, setLocalField] = useState<FormFieldConfig>(field);
|
||||
|
||||
// 전체 카테고리 컬럼 목록 상태
|
||||
const [categoryColumns, setCategoryColumns] = useState<CategoryColumnOption[]>([]);
|
||||
const [loadingCategoryColumns, setLoadingCategoryColumns] = useState(false);
|
||||
|
||||
// Combobox 열림 상태
|
||||
const [sourceTableOpen, setSourceTableOpen] = useState(false);
|
||||
const [targetColumnOpenMap, setTargetColumnOpenMap] = useState<Record<number, boolean>>({});
|
||||
|
||||
// open이 변경될 때마다 필드 데이터 동기화
|
||||
useEffect(() => {
|
||||
|
|
@ -293,6 +328,49 @@ export function FieldDetailSettingsModal({
|
|||
/>
|
||||
</div>
|
||||
<HelpText>부모 화면에서 전달받은 값으로 자동 채워집니다</HelpText>
|
||||
|
||||
{/* 부모에서 값 받기 활성화 시 필드 선택 */}
|
||||
{localField.receiveFromParent && (
|
||||
<div className="mt-3 space-y-2 p-3 rounded-md bg-blue-50 border border-blue-200">
|
||||
<Label className="text-xs font-medium text-blue-700">부모 필드명 선택</Label>
|
||||
{availableParentFields.length > 0 ? (
|
||||
<Select
|
||||
value={localField.parentFieldName || localField.columnName}
|
||||
onValueChange={(value) => updateField({ parentFieldName: value })}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs">
|
||||
<SelectValue placeholder="필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableParentFields.map((pf) => (
|
||||
<SelectItem key={pf.name} value={pf.name}>
|
||||
<div className="flex flex-col">
|
||||
<span>{pf.label || pf.name}</span>
|
||||
{pf.sourceComponent && (
|
||||
<span className="text-[9px] text-muted-foreground">
|
||||
{pf.sourceComponent}{pf.sourceTable && ` (${pf.sourceTable})`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
<Input
|
||||
value={localField.parentFieldName || ""}
|
||||
onChange={(e) => updateField({ parentFieldName: e.target.value })}
|
||||
placeholder={`예: ${localField.columnName || "parent_field_name"}`}
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
부모 화면에서 전달받을 필드명을 입력하세요. 비워두면 "{localField.columnName}"을 사용합니다.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Accordion으로 고급 설정 */}
|
||||
|
|
@ -472,12 +550,12 @@ export function FieldDetailSettingsModal({
|
|||
<Label className="text-[10px]">저장할 컬럼</Label>
|
||||
{selectTableColumns.length > 0 ? (
|
||||
<Select
|
||||
value={localField.selectOptions?.saveColumn || ""}
|
||||
value={localField.selectOptions?.saveColumn || "__default__"}
|
||||
onValueChange={(value) =>
|
||||
updateField({
|
||||
selectOptions: {
|
||||
...localField.selectOptions,
|
||||
saveColumn: value,
|
||||
saveColumn: value === "__default__" ? "" : value,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -486,7 +564,7 @@ export function FieldDetailSettingsModal({
|
|||
<SelectValue placeholder="컬럼 선택 (미선택 시 조인 컬럼 저장)" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">조인 컬럼 사용 (기본)</SelectItem>
|
||||
<SelectItem value="__default__">조인 컬럼 사용 (기본)</SelectItem>
|
||||
{selectTableColumns.map((col) => (
|
||||
<SelectItem key={col.name} value={col.name}>
|
||||
{col.name}
|
||||
|
|
@ -592,29 +670,68 @@ export function FieldDetailSettingsModal({
|
|||
<div className="space-y-3 pt-2 border-t">
|
||||
<div>
|
||||
<Label className="text-[10px]">소스 테이블</Label>
|
||||
<Select
|
||||
value={localField.linkedFieldGroup?.sourceTable || ""}
|
||||
onValueChange={(value) => {
|
||||
updateField({
|
||||
linkedFieldGroup: {
|
||||
...localField.linkedFieldGroup,
|
||||
sourceTable: value,
|
||||
},
|
||||
});
|
||||
onLoadTableColumns(value);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs mt-1">
|
||||
<SelectValue placeholder="테이블 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{tables.map((t) => (
|
||||
<SelectItem key={t.name} value={t.name}>
|
||||
{t.label || t.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Popover open={sourceTableOpen} onOpenChange={setSourceTableOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={sourceTableOpen}
|
||||
className="h-7 w-full justify-between text-xs mt-1 font-normal"
|
||||
>
|
||||
{localField.linkedFieldGroup?.sourceTable
|
||||
? (() => {
|
||||
const selectedTable = tables.find(
|
||||
(t) => t.name === localField.linkedFieldGroup?.sourceTable
|
||||
);
|
||||
return selectedTable
|
||||
? `${selectedTable.label || selectedTable.name} (${selectedTable.name})`
|
||||
: localField.linkedFieldGroup?.sourceTable;
|
||||
})()
|
||||
: "테이블 선택..."}
|
||||
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[300px] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="py-2 text-xs text-center">
|
||||
테이블을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{tables.map((t) => (
|
||||
<CommandItem
|
||||
key={t.name}
|
||||
value={`${t.name} ${t.label || ""}`}
|
||||
onSelect={() => {
|
||||
updateField({
|
||||
linkedFieldGroup: {
|
||||
...localField.linkedFieldGroup,
|
||||
sourceTable: t.name,
|
||||
},
|
||||
});
|
||||
onLoadTableColumns(t.name);
|
||||
setSourceTableOpen(false);
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
localField.linkedFieldGroup?.sourceTable === t.name
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<span className="font-medium">{t.label || t.name}</span>
|
||||
<span className="ml-1 text-muted-foreground">({t.name})</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<HelpText>값을 가져올 소스 테이블 (예: customer_mng)</HelpText>
|
||||
</div>
|
||||
|
||||
|
|
@ -763,14 +880,78 @@ export function FieldDetailSettingsModal({
|
|||
|
||||
<div>
|
||||
<Label className="text-[9px]">타겟 컬럼 (저장할 위치)</Label>
|
||||
<Input
|
||||
value={mapping.targetColumn || ""}
|
||||
onChange={(e) =>
|
||||
updateLinkedFieldMapping(index, { targetColumn: e.target.value })
|
||||
}
|
||||
placeholder="partner_id"
|
||||
className="h-6 text-[9px] mt-0.5"
|
||||
/>
|
||||
{targetTableColumns.length > 0 ? (
|
||||
<Popover
|
||||
open={targetColumnOpenMap[index] || false}
|
||||
onOpenChange={(open) =>
|
||||
setTargetColumnOpenMap((prev) => ({ ...prev, [index]: open }))
|
||||
}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={targetColumnOpenMap[index] || false}
|
||||
className="h-6 w-full justify-between text-[9px] mt-0.5 font-normal"
|
||||
>
|
||||
{mapping.targetColumn
|
||||
? (() => {
|
||||
const selectedCol = targetTableColumns.find(
|
||||
(c) => c.name === mapping.targetColumn
|
||||
);
|
||||
return selectedCol
|
||||
? `${selectedCol.name} (${selectedCol.label})`
|
||||
: mapping.targetColumn;
|
||||
})()
|
||||
: "컬럼 선택..."}
|
||||
<ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[250px] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="컬럼 검색..." className="h-7 text-[9px]" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="py-2 text-[9px] text-center">
|
||||
컬럼을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{targetTableColumns.map((col) => (
|
||||
<CommandItem
|
||||
key={col.name}
|
||||
value={`${col.name} ${col.label}`}
|
||||
onSelect={() => {
|
||||
updateLinkedFieldMapping(index, { targetColumn: col.name });
|
||||
setTargetColumnOpenMap((prev) => ({ ...prev, [index]: false }));
|
||||
}}
|
||||
className="text-[9px]"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
mapping.targetColumn === col.name
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<span className="font-medium">{col.name}</span>
|
||||
<span className="ml-1 text-muted-foreground">({col.label})</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
) : (
|
||||
<Input
|
||||
value={mapping.targetColumn || ""}
|
||||
onChange={(e) =>
|
||||
updateLinkedFieldMapping(index, { targetColumn: e.target.value })
|
||||
}
|
||||
placeholder="partner_id"
|
||||
className="h-6 text-[9px] mt-0.5"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -909,3 +1090,4 @@ export function FieldDetailSettingsModal({
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Di
|
|||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Plus, Trash2, Database, Layers, Info } from "lucide-react";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||||
import { Plus, Trash2, Database, Layers, Info, Check, ChevronsUpDown } from "lucide-react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { SaveConfig, SubTableSaveConfig, SubTableFieldMapping, FormSectionConfig, FormFieldConfig, SectionSaveMode } from "../types";
|
||||
|
|
@ -50,6 +52,11 @@ export function SaveSettingsModal({
|
|||
saveConfig.customApiSave?.enabled && saveConfig.customApiSave?.multiTable?.enabled ? "multi" : "single"
|
||||
);
|
||||
|
||||
// 테이블 검색 Popover 상태
|
||||
const [singleTableSearchOpen, setSingleTableSearchOpen] = useState(false);
|
||||
const [mainTableSearchOpen, setMainTableSearchOpen] = useState(false);
|
||||
const [subTableSearchOpen, setSubTableSearchOpen] = useState<Record<number, boolean>>({});
|
||||
|
||||
// open이 변경될 때마다 데이터 동기화
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
|
|
@ -217,8 +224,8 @@ export function SaveSettingsModal({
|
|||
const repeatSections = sections.filter((s) => s.repeatable);
|
||||
|
||||
// 모든 필드 목록 (반복 섹션 포함)
|
||||
const getAllFields = (): { columnName: string; label: string; sectionTitle: string }[] => {
|
||||
const fields: { columnName: string; label: string; sectionTitle: string }[] = [];
|
||||
const getAllFields = (): { columnName: string; label: string; sectionTitle: string; sectionId: string }[] => {
|
||||
const fields: { columnName: string; label: string; sectionTitle: string; sectionId: string }[] = [];
|
||||
sections.forEach((section) => {
|
||||
// 필드 타입 섹션만 처리 (테이블 타입은 fields가 undefined)
|
||||
if (section.fields && Array.isArray(section.fields)) {
|
||||
|
|
@ -227,6 +234,7 @@ export function SaveSettingsModal({
|
|||
columnName: field.columnName,
|
||||
label: field.label,
|
||||
sectionTitle: section.title,
|
||||
sectionId: section.id,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -375,24 +383,68 @@ export function SaveSettingsModal({
|
|||
|
||||
<div>
|
||||
<Label className="text-[10px]">저장 테이블</Label>
|
||||
<Select
|
||||
value={localSaveConfig.tableName || ""}
|
||||
onValueChange={(value) => {
|
||||
updateSaveConfig({ tableName: value });
|
||||
onLoadTableColumns(value);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs mt-1">
|
||||
<SelectValue placeholder="테이블 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{tables.map((t) => (
|
||||
<SelectItem key={t.name} value={t.name}>
|
||||
{t.label || t.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Popover open={singleTableSearchOpen} onOpenChange={setSingleTableSearchOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={singleTableSearchOpen}
|
||||
className="h-8 w-full justify-between text-xs mt-1 font-normal"
|
||||
>
|
||||
{localSaveConfig.tableName ? (
|
||||
<div className="flex flex-col items-start text-left">
|
||||
<span className="font-medium">{localSaveConfig.tableName}</span>
|
||||
{(() => {
|
||||
const tableLabel = tables.find(t => t.name === localSaveConfig.tableName)?.label;
|
||||
return tableLabel && tableLabel !== localSaveConfig.tableName ? (
|
||||
<span className="text-[10px] text-muted-foreground">{tableLabel}</span>
|
||||
) : null;
|
||||
})()}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground">테이블 선택...</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0 w-[300px]" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="테이블 검색..." className="text-xs" />
|
||||
<CommandList className="max-h-[250px]">
|
||||
<CommandEmpty className="text-xs py-4 text-center">
|
||||
테이블을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{tables.map((t) => (
|
||||
<CommandItem
|
||||
key={t.name}
|
||||
value={`${t.name} ${t.label}`}
|
||||
onSelect={() => {
|
||||
updateSaveConfig({ tableName: t.name });
|
||||
onLoadTableColumns(t.name);
|
||||
setSingleTableSearchOpen(false);
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
localSaveConfig.tableName === t.name ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{t.name}</span>
|
||||
{t.label && (
|
||||
<span className="text-[10px] text-muted-foreground">{t.label}</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<HelpText>폼 데이터를 저장할 테이블을 선택하세요</HelpText>
|
||||
</div>
|
||||
|
||||
|
|
@ -425,37 +477,81 @@ export function SaveSettingsModal({
|
|||
|
||||
<div>
|
||||
<Label className="text-[10px]">메인 테이블명</Label>
|
||||
<Select
|
||||
value={localSaveConfig.customApiSave?.multiTable?.mainTable?.tableName || ""}
|
||||
onValueChange={(value) => {
|
||||
updateSaveConfig({
|
||||
customApiSave: {
|
||||
...localSaveConfig.customApiSave,
|
||||
apiType: "multi-table",
|
||||
multiTable: {
|
||||
...localSaveConfig.customApiSave?.multiTable,
|
||||
enabled: true,
|
||||
mainTable: {
|
||||
...localSaveConfig.customApiSave?.multiTable?.mainTable,
|
||||
tableName: value,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
onLoadTableColumns(value);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs mt-1">
|
||||
<SelectValue placeholder="테이블 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{tables.map((t) => (
|
||||
<SelectItem key={t.name} value={t.name}>
|
||||
{t.label || t.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Popover open={mainTableSearchOpen} onOpenChange={setMainTableSearchOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={mainTableSearchOpen}
|
||||
className="h-8 w-full justify-between text-xs mt-1 font-normal"
|
||||
>
|
||||
{localSaveConfig.customApiSave?.multiTable?.mainTable?.tableName ? (
|
||||
<div className="flex flex-col items-start text-left">
|
||||
<span className="font-medium">{localSaveConfig.customApiSave.multiTable.mainTable.tableName}</span>
|
||||
{(() => {
|
||||
const tableLabel = tables.find(t => t.name === localSaveConfig.customApiSave?.multiTable?.mainTable?.tableName)?.label;
|
||||
return tableLabel && tableLabel !== localSaveConfig.customApiSave?.multiTable?.mainTable?.tableName ? (
|
||||
<span className="text-[10px] text-muted-foreground">{tableLabel}</span>
|
||||
) : null;
|
||||
})()}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground">테이블 선택...</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0 w-[300px]" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="테이블 검색..." className="text-xs" />
|
||||
<CommandList className="max-h-[250px]">
|
||||
<CommandEmpty className="text-xs py-4 text-center">
|
||||
테이블을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{tables.map((t) => (
|
||||
<CommandItem
|
||||
key={t.name}
|
||||
value={`${t.name} ${t.label}`}
|
||||
onSelect={() => {
|
||||
updateSaveConfig({
|
||||
customApiSave: {
|
||||
...localSaveConfig.customApiSave,
|
||||
apiType: "multi-table",
|
||||
multiTable: {
|
||||
...localSaveConfig.customApiSave?.multiTable,
|
||||
enabled: true,
|
||||
mainTable: {
|
||||
...localSaveConfig.customApiSave?.multiTable?.mainTable,
|
||||
tableName: t.name,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
onLoadTableColumns(t.name);
|
||||
setMainTableSearchOpen(false);
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
localSaveConfig.customApiSave?.multiTable?.mainTable?.tableName === t.name ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{t.name}</span>
|
||||
{t.label && (
|
||||
<span className="text-[10px] text-muted-foreground">{t.label}</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<HelpText>주요 데이터를 저장할 메인 테이블 (예: orders, user_info)</HelpText>
|
||||
</div>
|
||||
|
||||
|
|
@ -550,8 +646,8 @@ export function SaveSettingsModal({
|
|||
return (
|
||||
<Accordion key={subIndex} type="single" collapsible>
|
||||
<AccordionItem value={`sub-${subIndex}`} className="border rounded-lg bg-orange-50/30">
|
||||
<AccordionTrigger className="px-3 py-2 text-xs hover:no-underline">
|
||||
<div className="flex items-center justify-between flex-1">
|
||||
<div className="flex items-center justify-between px-3 py-2">
|
||||
<AccordionTrigger className="flex-1 text-xs hover:no-underline p-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">
|
||||
서브 테이블 {subIndex + 1}: {subTable.tableName || "(미설정)"}
|
||||
|
|
@ -560,40 +656,86 @@ export function SaveSettingsModal({
|
|||
({subTable.fieldMappings?.length || 0}개 매핑)
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeSubTable(subIndex);
|
||||
}}
|
||||
className="h-5 w-5 p-0 text-destructive hover:text-destructive mr-2"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
</AccordionTrigger>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeSubTable(subIndex);
|
||||
}}
|
||||
className="h-5 w-5 p-0 text-destructive hover:text-destructive/80 ml-2 inline-flex items-center justify-center"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
<AccordionContent className="px-3 pb-3 space-y-3">
|
||||
<div>
|
||||
<Label className="text-[10px]">서브 테이블명</Label>
|
||||
<Select
|
||||
value={subTable.tableName || ""}
|
||||
onValueChange={(value) => {
|
||||
updateSubTable(subIndex, { tableName: value });
|
||||
onLoadTableColumns(value);
|
||||
}}
|
||||
<Popover
|
||||
open={subTableSearchOpen[subIndex] || false}
|
||||
onOpenChange={(open) => setSubTableSearchOpen(prev => ({ ...prev, [subIndex]: open }))}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs mt-1">
|
||||
<SelectValue placeholder="테이블 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{tables.map((t) => (
|
||||
<SelectItem key={t.name} value={t.name}>
|
||||
{t.label || t.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={subTableSearchOpen[subIndex] || false}
|
||||
className="h-8 w-full justify-between text-xs mt-1 font-normal"
|
||||
>
|
||||
{subTable.tableName ? (
|
||||
<div className="flex flex-col items-start text-left">
|
||||
<span className="font-medium">{subTable.tableName}</span>
|
||||
{(() => {
|
||||
const tableLabel = tables.find(t => t.name === subTable.tableName)?.label;
|
||||
return tableLabel && tableLabel !== subTable.tableName ? (
|
||||
<span className="text-[10px] text-muted-foreground">{tableLabel}</span>
|
||||
) : null;
|
||||
})()}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground">테이블 선택...</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0 w-[280px]" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="테이블 검색..." className="text-xs" />
|
||||
<CommandList className="max-h-[200px]">
|
||||
<CommandEmpty className="text-xs py-4 text-center">
|
||||
테이블을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{tables.map((t) => (
|
||||
<CommandItem
|
||||
key={t.name}
|
||||
value={`${t.name} ${t.label}`}
|
||||
onSelect={() => {
|
||||
updateSubTable(subIndex, { tableName: t.name });
|
||||
onLoadTableColumns(t.name);
|
||||
setSubTableSearchOpen(prev => ({ ...prev, [subIndex]: false }));
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
subTable.tableName === t.name ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{t.name}</span>
|
||||
{t.label && (
|
||||
<span className="text-[10px] text-muted-foreground">{t.label}</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<HelpText>반복 데이터를 저장할 서브 테이블</HelpText>
|
||||
</div>
|
||||
|
||||
|
|
@ -755,8 +897,8 @@ export function SaveSettingsModal({
|
|||
<SelectValue placeholder="필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{allFields.map((field) => (
|
||||
<SelectItem key={field.columnName} value={field.columnName}>
|
||||
{allFields.map((field, fieldIndex) => (
|
||||
<SelectItem key={`${field.sectionId}-${field.columnName}-${fieldIndex}`} value={field.columnName}>
|
||||
{field.label} ({field.sectionTitle})
|
||||
</SelectItem>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Di
|
|||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Plus, Trash2, GripVertical, ChevronUp, ChevronDown, Settings as SettingsIcon } from "lucide-react";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||||
import { Plus, Trash2, GripVertical, ChevronUp, ChevronDown, Settings as SettingsIcon, Check, ChevronsUpDown } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { FormSectionConfig, FormFieldConfig, OptionalFieldGroupConfig, FIELD_TYPE_OPTIONS } from "../types";
|
||||
import { defaultFieldConfig, generateFieldId, generateUniqueId } from "../config";
|
||||
|
|
@ -21,12 +23,22 @@ const HelpText = ({ children }: { children: React.ReactNode }) => (
|
|||
<p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
|
||||
);
|
||||
|
||||
// 테이블 컬럼 정보 타입
|
||||
interface TableColumnInfo {
|
||||
name: string;
|
||||
type: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface SectionLayoutModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
section: FormSectionConfig;
|
||||
onSave: (updates: Partial<FormSectionConfig>) => void;
|
||||
onOpenFieldDetail: (field: FormFieldConfig) => void;
|
||||
// 저장 테이블의 컬럼 정보
|
||||
tableName?: string;
|
||||
tableColumns?: TableColumnInfo[];
|
||||
}
|
||||
|
||||
export function SectionLayoutModal({
|
||||
|
|
@ -35,8 +47,13 @@ export function SectionLayoutModal({
|
|||
section,
|
||||
onSave,
|
||||
onOpenFieldDetail,
|
||||
tableName = "",
|
||||
tableColumns = [],
|
||||
}: SectionLayoutModalProps) {
|
||||
|
||||
// 컬럼 선택 Popover 상태 (필드별)
|
||||
const [columnSearchOpen, setColumnSearchOpen] = useState<Record<string, boolean>>({});
|
||||
|
||||
// 로컬 상태로 섹션 관리 (fields가 없으면 빈 배열로 초기화)
|
||||
const [localSection, setLocalSection] = useState<FormSectionConfig>(() => ({
|
||||
...section,
|
||||
|
|
@ -443,11 +460,90 @@ export function SectionLayoutModal({
|
|||
</div>
|
||||
<div>
|
||||
<Label className="text-[9px]">컬럼명</Label>
|
||||
<Input
|
||||
value={field.columnName}
|
||||
onChange={(e) => updateField(field.id, { columnName: e.target.value })}
|
||||
className="h-6 text-[9px] mt-0.5"
|
||||
/>
|
||||
{tableColumns.length > 0 ? (
|
||||
<Popover
|
||||
open={columnSearchOpen[field.id] || false}
|
||||
onOpenChange={(open) => setColumnSearchOpen(prev => ({ ...prev, [field.id]: open }))}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={columnSearchOpen[field.id] || false}
|
||||
className="h-6 w-full justify-between text-[9px] mt-0.5 font-normal"
|
||||
>
|
||||
{field.columnName ? (
|
||||
<div className="flex flex-col items-start text-left truncate">
|
||||
<span className="font-medium truncate">{field.columnName}</span>
|
||||
{(() => {
|
||||
const col = tableColumns.find(c => c.name === field.columnName);
|
||||
return col?.label && col.label !== field.columnName ? (
|
||||
<span className="text-[8px] text-muted-foreground truncate">({col.label})</span>
|
||||
) : null;
|
||||
})()}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground">컬럼 선택...</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0 w-[280px]" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="컬럼 검색..." className="text-xs" />
|
||||
<CommandList className="max-h-[200px]">
|
||||
<CommandEmpty className="text-xs py-3 text-center">
|
||||
컬럼을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{tableColumns.map((col) => (
|
||||
<CommandItem
|
||||
key={col.name}
|
||||
value={`${col.name} ${col.label}`}
|
||||
onSelect={() => {
|
||||
updateField(field.id, {
|
||||
columnName: col.name,
|
||||
// 라벨이 기본값이면 컬럼 라벨로 자동 설정
|
||||
...(field.label.startsWith("새 필드") || field.label.startsWith("field_")
|
||||
? { label: col.label || col.name }
|
||||
: {})
|
||||
});
|
||||
setColumnSearchOpen(prev => ({ ...prev, [field.id]: false }));
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
field.columnName === col.name ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="font-medium">{col.name}</span>
|
||||
{col.label && col.label !== col.name && (
|
||||
<span className="text-muted-foreground">({col.label})</span>
|
||||
)}
|
||||
</div>
|
||||
{tableName && (
|
||||
<span className="text-[9px] text-muted-foreground">{tableName}</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
) : (
|
||||
<Input
|
||||
value={field.columnName}
|
||||
onChange={(e) => updateField(field.id, { columnName: e.target.value })}
|
||||
className="h-6 text-[9px] mt-0.5"
|
||||
placeholder="저장 테이블을 먼저 설정하세요"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -821,24 +917,106 @@ export function SectionLayoutModal({
|
|||
className="h-5 text-[8px]"
|
||||
placeholder="라벨"
|
||||
/>
|
||||
<Input
|
||||
value={field.columnName}
|
||||
onChange={(e) => {
|
||||
const newGroups = localSection.optionalFieldGroups?.map((g) =>
|
||||
g.id === group.id
|
||||
? {
|
||||
...g,
|
||||
fields: g.fields.map((f) =>
|
||||
f.id === field.id ? { ...f, columnName: e.target.value } : f
|
||||
),
|
||||
}
|
||||
: g
|
||||
);
|
||||
updateSection({ optionalFieldGroups: newGroups });
|
||||
}}
|
||||
className="h-5 text-[8px]"
|
||||
placeholder="컬럼명"
|
||||
/>
|
||||
{tableColumns.length > 0 ? (
|
||||
<Popover
|
||||
open={columnSearchOpen[`opt-${field.id}`] || false}
|
||||
onOpenChange={(open) => setColumnSearchOpen(prev => ({ ...prev, [`opt-${field.id}`]: open }))}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className="h-6 w-full justify-between text-[8px] font-normal px-1"
|
||||
>
|
||||
{field.columnName ? (
|
||||
<div className="flex flex-col items-start text-left truncate">
|
||||
<span className="font-medium truncate">{field.columnName}</span>
|
||||
{(() => {
|
||||
const col = tableColumns.find(c => c.name === field.columnName);
|
||||
return col?.label && col.label !== field.columnName ? (
|
||||
<span className="text-[7px] text-muted-foreground truncate">({col.label})</span>
|
||||
) : null;
|
||||
})()}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground">컬럼...</span>
|
||||
)}
|
||||
<ChevronsUpDown className="h-2.5 w-2.5 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0 w-[250px]" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="컬럼 검색..." className="text-xs" />
|
||||
<CommandList className="max-h-[180px]">
|
||||
<CommandEmpty className="text-xs py-2 text-center">
|
||||
컬럼을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{tableColumns.map((col) => (
|
||||
<CommandItem
|
||||
key={col.name}
|
||||
value={`${col.name} ${col.label}`}
|
||||
onSelect={() => {
|
||||
const newGroups = localSection.optionalFieldGroups?.map((g) =>
|
||||
g.id === group.id
|
||||
? {
|
||||
...g,
|
||||
fields: g.fields.map((f) =>
|
||||
f.id === field.id
|
||||
? {
|
||||
...f,
|
||||
columnName: col.name,
|
||||
...(f.label.startsWith("필드 ") ? { label: col.label || col.name } : {})
|
||||
}
|
||||
: f
|
||||
),
|
||||
}
|
||||
: g
|
||||
);
|
||||
updateSection({ optionalFieldGroups: newGroups });
|
||||
setColumnSearchOpen(prev => ({ ...prev, [`opt-${field.id}`]: false }));
|
||||
}}
|
||||
className="text-[9px]"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-1 h-2.5 w-2.5",
|
||||
field.columnName === col.name ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{col.name}</span>
|
||||
{col.label && col.label !== col.name && (
|
||||
<span className="text-[8px] text-muted-foreground">({col.label})</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
) : (
|
||||
<Input
|
||||
value={field.columnName}
|
||||
onChange={(e) => {
|
||||
const newGroups = localSection.optionalFieldGroups?.map((g) =>
|
||||
g.id === group.id
|
||||
? {
|
||||
...g,
|
||||
fields: g.fields.map((f) =>
|
||||
f.id === field.id ? { ...f, columnName: e.target.value } : f
|
||||
),
|
||||
}
|
||||
: g
|
||||
);
|
||||
updateSection({ optionalFieldGroups: newGroups });
|
||||
}}
|
||||
className="h-5 text-[8px]"
|
||||
placeholder="컬럼명"
|
||||
/>
|
||||
)}
|
||||
<Select
|
||||
value={field.fieldType}
|
||||
onValueChange={(value) => {
|
||||
|
|
|
|||
|
|
@ -48,6 +48,14 @@ const HelpText = ({ children }: { children: React.ReactNode }) => (
|
|||
<p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
|
||||
);
|
||||
|
||||
// 부모 화면에서 전달 가능한 필드 타입
|
||||
interface AvailableParentField {
|
||||
name: string; // 필드명 (columnName)
|
||||
label: string; // 표시 라벨
|
||||
sourceComponent?: string; // 출처 컴포넌트
|
||||
sourceTable?: string; // 출처 테이블명
|
||||
}
|
||||
|
||||
// 컬럼 설정 아이템 컴포넌트
|
||||
interface ColumnSettingItemProps {
|
||||
col: TableColumnConfig;
|
||||
|
|
@ -62,6 +70,7 @@ interface ColumnSettingItemProps {
|
|||
sections: { id: string; title: string }[]; // 섹션 목록
|
||||
formFields: { columnName: string; label: string; sectionId?: string }[]; // 폼 필드 목록
|
||||
tableConfig: TableSectionConfig; // 현재 행 필드 목록 표시용
|
||||
availableParentFields?: AvailableParentField[]; // 부모 화면에서 전달 가능한 필드 목록
|
||||
onLoadTableColumns: (tableName: string) => void;
|
||||
onUpdate: (updates: Partial<TableColumnConfig>) => void;
|
||||
onMoveUp: () => void;
|
||||
|
|
@ -82,6 +91,7 @@ function ColumnSettingItem({
|
|||
sections,
|
||||
formFields,
|
||||
tableConfig,
|
||||
availableParentFields = [],
|
||||
onLoadTableColumns,
|
||||
onUpdate,
|
||||
onMoveUp,
|
||||
|
|
@ -90,6 +100,7 @@ function ColumnSettingItem({
|
|||
}: ColumnSettingItemProps) {
|
||||
const [fieldSearchOpen, setFieldSearchOpen] = useState(false);
|
||||
const [sourceFieldSearchOpen, setSourceFieldSearchOpen] = useState(false);
|
||||
const [parentFieldSearchOpen, setParentFieldSearchOpen] = useState(false);
|
||||
const [lookupTableOpenMap, setLookupTableOpenMap] = useState<Record<string, boolean>>({});
|
||||
|
||||
// 조회 옵션 추가
|
||||
|
|
@ -402,6 +413,14 @@ function ColumnSettingItem({
|
|||
/>
|
||||
<span>필수</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-xs cursor-pointer" title="부모 화면에서 전달받은 값을 모든 행에 적용">
|
||||
<Switch
|
||||
checked={col.receiveFromParent ?? false}
|
||||
onCheckedChange={(checked) => onUpdate({ receiveFromParent: checked })}
|
||||
className="scale-75"
|
||||
/>
|
||||
<span className="text-blue-600">부모값</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-xs cursor-pointer">
|
||||
<Switch
|
||||
checked={col.lookup?.enabled ?? false}
|
||||
|
|
@ -432,6 +451,103 @@ function ColumnSettingItem({
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* 부모에서 값 받기 설정 (부모값 ON일 때만 표시) */}
|
||||
{col.receiveFromParent && (
|
||||
<div className="border-t pt-3 mt-3 space-y-2">
|
||||
<Label className="text-xs font-medium text-blue-600">부모 필드 선택</Label>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
부모 화면에서 전달받을 필드를 선택하세요. 모든 행에 동일한 값이 적용됩니다.
|
||||
</p>
|
||||
{availableParentFields.length > 0 ? (
|
||||
<Popover open={parentFieldSearchOpen} onOpenChange={setParentFieldSearchOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={parentFieldSearchOpen}
|
||||
className="h-8 w-full justify-between text-xs"
|
||||
>
|
||||
<span className="truncate">
|
||||
{col.parentFieldName
|
||||
? availableParentFields.find(f => f.name === col.parentFieldName)?.label || col.parentFieldName
|
||||
: `(기본: ${col.field})`}
|
||||
</span>
|
||||
<ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0 w-[300px]" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="부모 필드 검색..." className="text-xs" />
|
||||
<CommandList className="max-h-[250px]">
|
||||
<CommandEmpty className="text-xs py-4 text-center">
|
||||
사용 가능한 부모 필드가 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{/* 기본값 (필드명과 동일) */}
|
||||
<CommandItem
|
||||
value="__same_as_field__"
|
||||
onSelect={() => {
|
||||
onUpdate({ parentFieldName: undefined });
|
||||
setParentFieldSearchOpen(false);
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
!col.parentFieldName ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<span className="text-muted-foreground">(기본: {col.field})</span>
|
||||
</CommandItem>
|
||||
{/* 부모 필드 목록 */}
|
||||
{availableParentFields.map((pf) => (
|
||||
<CommandItem
|
||||
key={pf.name}
|
||||
value={`${pf.name} ${pf.label}`}
|
||||
onSelect={() => {
|
||||
onUpdate({ parentFieldName: pf.name });
|
||||
setParentFieldSearchOpen(false);
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
col.parentFieldName === pf.name ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<span className="font-medium truncate">{pf.label || pf.name}</span>
|
||||
{pf.sourceComponent && (
|
||||
<span className="text-[10px] text-muted-foreground truncate">
|
||||
{pf.sourceComponent}{pf.sourceTable && ` (${pf.sourceTable})`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
<Input
|
||||
value={col.parentFieldName || ""}
|
||||
onChange={(e) => onUpdate({ parentFieldName: e.target.value })}
|
||||
placeholder={col.field}
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
비워두면 "{col.field}"를 사용합니다.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 조회 설정 (조회 ON일 때만 표시) */}
|
||||
{col.lookup?.enabled && (
|
||||
<div className="border-t pt-3 mt-3 space-y-3">
|
||||
|
|
@ -1119,6 +1235,8 @@ interface TableSectionSettingsModalProps {
|
|||
onLoadCategoryList?: () => void;
|
||||
// 전체 섹션 목록 (다른 섹션 필드 참조용)
|
||||
allSections?: FormSectionConfig[];
|
||||
// 부모 화면에서 전달 가능한 필드 목록
|
||||
availableParentFields?: AvailableParentField[];
|
||||
}
|
||||
|
||||
export function TableSectionSettingsModal({
|
||||
|
|
@ -1132,6 +1250,7 @@ export function TableSectionSettingsModal({
|
|||
categoryList = [],
|
||||
onLoadCategoryList,
|
||||
allSections = [],
|
||||
availableParentFields = [],
|
||||
}: TableSectionSettingsModalProps) {
|
||||
// 로컬 상태
|
||||
const [title, setTitle] = useState(section.title);
|
||||
|
|
@ -1693,6 +1812,7 @@ export function TableSectionSettingsModal({
|
|||
sections={otherSections}
|
||||
formFields={otherSectionFields}
|
||||
tableConfig={tableConfig}
|
||||
availableParentFields={availableParentFields}
|
||||
onLoadTableColumns={onLoadTableColumns}
|
||||
onUpdate={(updates) => updateColumn(index, updates)}
|
||||
onMoveUp={() => moveColumn(index, "up")}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,10 @@ export interface FormFieldConfig {
|
|||
enabled?: boolean; // 사용 여부
|
||||
sourceTable?: string; // 소스 테이블 (예: dept_info)
|
||||
displayColumn?: string; // 표시할 컬럼 (예: dept_name) - 드롭다운에 보여줄 텍스트
|
||||
displayFormat?: "name_only" | "code_name" | "name_code"; // 표시 형식
|
||||
displayFormat?: "name_only" | "code_name" | "name_code" | "custom"; // 표시 형식
|
||||
// 커스텀 표시 형식 (displayFormat이 "custom"일 때 사용)
|
||||
// 형식: {컬럼명} 으로 치환됨 (예: "{item_name} ({item_number})" → "철판 (ITEM-001)")
|
||||
customDisplayFormat?: string;
|
||||
mappings?: LinkedFieldMapping[]; // 저장할 컬럼 매핑 (첫 번째 매핑의 sourceColumn이 드롭다운 값으로 사용됨)
|
||||
};
|
||||
|
||||
|
|
@ -254,6 +257,53 @@ export interface TableSectionConfig {
|
|||
multiSelect?: boolean; // 다중 선택 허용 (기본: true)
|
||||
maxHeight?: string; // 테이블 최대 높이 (기본: "400px")
|
||||
};
|
||||
|
||||
// 7. 조건부 테이블 설정 (고급)
|
||||
conditionalTable?: ConditionalTableConfig;
|
||||
}
|
||||
|
||||
/**
|
||||
* 조건부 테이블 설정
|
||||
* 조건(검사유형 등)에 따라 다른 데이터를 표시하고 저장합니다.
|
||||
*
|
||||
* 사용 예시:
|
||||
* - 품목검사정보: 검사유형(입고/공정/출고/재고/최종)별로 검사항목 관리
|
||||
* - BOM 관리: 품목유형별 자재 구성
|
||||
* - 공정 관리: 공정유형별 작업 항목
|
||||
*/
|
||||
export interface ConditionalTableConfig {
|
||||
enabled: boolean;
|
||||
|
||||
// 트리거 UI 타입
|
||||
// - checkbox: 체크박스로 다중 선택 (선택된 조건들을 탭으로 표시)
|
||||
// - dropdown: 드롭다운으로 단일 선택
|
||||
// - tabs: 모든 옵션을 탭으로 표시
|
||||
triggerType: "checkbox" | "dropdown" | "tabs";
|
||||
|
||||
// 조건 값을 저장할 컬럼 (예: inspection_type)
|
||||
// 저장 시 각 행에 이 컬럼으로 조건 값이 자동 저장됨
|
||||
conditionColumn: string;
|
||||
|
||||
// 조건 옵션 목록
|
||||
options: ConditionalTableOption[];
|
||||
|
||||
// 옵션을 테이블에서 동적으로 로드할 경우
|
||||
optionSource?: {
|
||||
enabled: boolean;
|
||||
tableName: string; // 예: inspection_type_code
|
||||
valueColumn: string; // 예: type_code
|
||||
labelColumn: string; // 예: type_name
|
||||
filterCondition?: string; // 예: is_active = 'Y'
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 조건부 테이블 옵션
|
||||
*/
|
||||
export interface ConditionalTableOption {
|
||||
id: string;
|
||||
value: string; // 저장될 값 (예: "입고검사")
|
||||
label: string; // 표시 라벨 (예: "입고검사")
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -335,6 +385,10 @@ export interface TableColumnConfig {
|
|||
// 날짜 일괄 적용 (type이 "date"일 때만 사용)
|
||||
// 활성화 시 첫 번째 날짜 입력 시 모든 행에 동일한 날짜가 자동 적용됨
|
||||
batchApply?: boolean;
|
||||
|
||||
// 부모에서 값 받기 (모든 행에 동일한 값 적용)
|
||||
receiveFromParent?: boolean; // 부모에서 값 받기 활성화
|
||||
parentFieldName?: string; // 부모 필드명 (미지정 시 field와 동일)
|
||||
}
|
||||
|
||||
// ============================================
|
||||
|
|
@ -646,6 +700,7 @@ export interface ModalConfig {
|
|||
showCloseButton?: boolean;
|
||||
|
||||
// 버튼 설정
|
||||
showSaveButton?: boolean; // 저장 버튼 표시 (기본: true)
|
||||
saveButtonText?: string; // 저장 버튼 텍스트 (기본: "저장")
|
||||
cancelButtonText?: string; // 취소 버튼 텍스트 (기본: "취소")
|
||||
showResetButton?: boolean; // 초기화 버튼 표시
|
||||
|
|
@ -705,6 +760,8 @@ export interface UniversalFormModalComponentProps {
|
|||
export interface UniversalFormModalConfigPanelProps {
|
||||
config: UniversalFormModalConfig;
|
||||
onChange: (config: UniversalFormModalConfig) => void;
|
||||
// 화면 설계 시 같은 화면의 다른 컴포넌트들 (부모 데이터 필드 추출용)
|
||||
allComponents?: any[];
|
||||
}
|
||||
|
||||
// 필드 타입 옵션
|
||||
|
|
@ -742,6 +799,7 @@ export const LINKED_FIELD_DISPLAY_FORMAT_OPTIONS = [
|
|||
{ value: "name_only", label: "이름만 (예: 영업부)" },
|
||||
{ value: "code_name", label: "코드 - 이름 (예: SALES - 영업부)" },
|
||||
{ value: "name_code", label: "이름 (코드) (예: 영업부 (SALES))" },
|
||||
{ value: "custom", label: "커스텀 형식 (직접 입력)" },
|
||||
] as const;
|
||||
|
||||
// ============================================
|
||||
|
|
@ -809,3 +867,10 @@ export const LOOKUP_CONDITION_SOURCE_OPTIONS = [
|
|||
{ value: "sectionField", label: "다른 섹션" },
|
||||
{ value: "externalTable", label: "외부 테이블" },
|
||||
] as const;
|
||||
|
||||
// 조건부 테이블 트리거 타입 옵션
|
||||
export const CONDITIONAL_TABLE_TRIGGER_OPTIONS = [
|
||||
{ value: "checkbox", label: "체크박스 (다중 선택)" },
|
||||
{ value: "dropdown", label: "드롭다운 (단일 선택)" },
|
||||
{ value: "tabs", label: "탭 (전체 표시)" },
|
||||
] as const;
|
||||
|
|
|
|||
|
|
@ -30,15 +30,12 @@ export const updateCategorySchema = categorySchema.omit({ categoryCode: true }).
|
|||
|
||||
// 코드 스키마
|
||||
export const codeSchema = z.object({
|
||||
codeValue: z
|
||||
.string()
|
||||
.min(1, "코드값은 필수입니다")
|
||||
.max(50, "코드값은 50자 이하여야 합니다")
|
||||
.regex(/^[A-Z0-9_]+$/, "대문자, 숫자, 언더스코어(_)만 사용 가능합니다"),
|
||||
codeValue: z.string().min(1, "코드값은 필수입니다").max(50, "코드값은 50자 이하여야 합니다"),
|
||||
codeName: z.string().min(1, "코드명은 필수입니다").max(100, "코드명은 100자 이하여야 합니다"),
|
||||
codeNameEng: z.string().min(1, "영문 코드명은 필수입니다").max(100, "영문 코드명은 100자 이하여야 합니다"),
|
||||
description: z.string().min(1, "설명은 필수입니다").max(500, "설명은 500자 이하여야 합니다"),
|
||||
codeNameEng: z.string().max(100, "영문 코드명은 100자 이하여야 합니다").optional().or(z.literal("")),
|
||||
description: z.string().max(500, "설명은 500자 이하여야 합니다").optional().or(z.literal("")),
|
||||
sortOrder: z.number().min(1, "정렬 순서는 1 이상이어야 합니다").max(9999, "정렬 순서는 9999 이하여야 합니다"),
|
||||
parentCodeValue: z.string().optional().nullable(), // 계층구조: 부모 코드값 (선택)
|
||||
});
|
||||
|
||||
// 코드 생성 스키마
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ export interface CodeInfo {
|
|||
sortOrder?: number;
|
||||
isActive?: string | boolean;
|
||||
useYn?: string;
|
||||
parentCodeValue?: string | null; // 계층구조: 부모 코드값
|
||||
depth?: number; // 계층구조: 깊이 (1, 2, 3단계)
|
||||
|
||||
// 기존 필드 (하위 호환성을 위해 유지)
|
||||
code_category?: string;
|
||||
|
|
@ -33,10 +35,14 @@ export interface CodeInfo {
|
|||
code_name_eng?: string | null;
|
||||
sort_order?: number;
|
||||
is_active?: string;
|
||||
parent_code_value?: string | null; // 계층구조: 부모 코드값
|
||||
created_date?: string | null;
|
||||
created_by?: string | null;
|
||||
updated_date?: string | null;
|
||||
updated_by?: string | null;
|
||||
|
||||
// 트리 구조용
|
||||
children?: CodeInfo[];
|
||||
}
|
||||
|
||||
export interface CreateCategoryRequest {
|
||||
|
|
@ -61,6 +67,7 @@ export interface CreateCodeRequest {
|
|||
codeNameEng?: string;
|
||||
description?: string;
|
||||
sortOrder?: number;
|
||||
parentCodeValue?: string; // 계층구조: 부모 코드값
|
||||
}
|
||||
|
||||
export interface UpdateCodeRequest {
|
||||
|
|
@ -69,6 +76,7 @@ export interface UpdateCodeRequest {
|
|||
description?: string;
|
||||
sortOrder?: number;
|
||||
isActive?: "Y" | "N"; // 백엔드에서 기대하는 문자열 타입
|
||||
parentCodeValue?: string; // 계층구조: 부모 코드값
|
||||
}
|
||||
|
||||
export interface CodeOption {
|
||||
|
|
|
|||
|
|
@ -162,7 +162,6 @@ export interface ComponentConfig {
|
|||
showLabel?: boolean; // 레이블 표시 여부 ("서명:", "(인)")
|
||||
labelText?: string; // 커스텀 레이블 텍스트
|
||||
labelPosition?: "top" | "left" | "bottom" | "right"; // 레이블 위치
|
||||
showUnderline?: boolean; // 서명란 밑줄 표시 여부
|
||||
personName?: string; // 도장란 이름 (예: "홍길동")
|
||||
// 테이블 전용
|
||||
tableColumns?: Array<{
|
||||
|
|
@ -237,6 +236,7 @@ export interface ReportDetail {
|
|||
report: ReportMaster;
|
||||
layout: ReportLayout | null;
|
||||
queries: ReportQuery[];
|
||||
menuObjids?: number[]; // 연결된 메뉴 ID 목록
|
||||
}
|
||||
|
||||
// 리포트 목록 응답
|
||||
|
|
@ -288,6 +288,7 @@ export interface SaveLayoutRequest {
|
|||
parameters: string[];
|
||||
externalConnectionId?: number;
|
||||
}>;
|
||||
menuObjids?: number[]; // 연결할 메뉴 ID 목록
|
||||
|
||||
// 하위 호환성 (deprecated)
|
||||
canvasWidth?: number;
|
||||
|
|
|
|||
|
|
@ -1688,3 +1688,4 @@ const 출고등록_설정: ScreenSplitPanel = {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -535,3 +535,4 @@ const { data: config } = await getScreenSplitPanel(screenId);
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -522,3 +522,4 @@ function ScreenViewPage() {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue