Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into lhj
; Please enter a commit message to explain why this merge is necessary, ; especially if it merges an updated upstream into a topic branch. ; ; Lines starting with ';' will be ignored, and an empty message aborts ; the commit.
This commit is contained in:
leeheejin
commit
67471b2518
|
|
@ -12,6 +12,7 @@
|
|||
"@types/mssql": "^9.1.8",
|
||||
"axios": "^1.11.0",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"bwip-js": "^4.8.0",
|
||||
"compression": "^1.7.4",
|
||||
"cors": "^2.8.5",
|
||||
"docx": "^9.5.1",
|
||||
|
|
@ -4540,6 +4541,15 @@
|
|||
"node": ">=10.16.0"
|
||||
}
|
||||
},
|
||||
"node_modules/bwip-js": {
|
||||
"version": "4.8.0",
|
||||
"resolved": "https://registry.npmjs.org/bwip-js/-/bwip-js-4.8.0.tgz",
|
||||
"integrity": "sha512-gUDkDHSTv8/DJhomSIbO0fX/Dx0MO/sgllLxJyJfu4WixCQe9nfGJzmHm64ZCbxo+gUYQEsQcRmqcwcwPRwUkg==",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"bwip-js": "bin/bwip-js.js"
|
||||
}
|
||||
},
|
||||
"node_modules/bytes": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
"@types/mssql": "^9.1.8",
|
||||
"axios": "^1.11.0",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"bwip-js": "^4.8.0",
|
||||
"compression": "^1.7.4",
|
||||
"cors": "^2.8.5",
|
||||
"docx": "^9.5.1",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,12 @@ import {
|
|||
BorderStyle,
|
||||
PageOrientation,
|
||||
convertMillimetersToTwip,
|
||||
Header,
|
||||
Footer,
|
||||
HeadingLevel,
|
||||
} from "docx";
|
||||
import { WatermarkConfig } from "../types/report";
|
||||
import bwipjs from "bwip-js";
|
||||
|
||||
export class ReportController {
|
||||
/**
|
||||
|
|
@ -1326,6 +1331,82 @@ export class ReportController {
|
|||
);
|
||||
}
|
||||
|
||||
// Barcode 컴포넌트 (바코드 이미지가 미리 생성되어 전달된 경우)
|
||||
else if (component.type === "barcode" && component.barcodeImageBase64) {
|
||||
try {
|
||||
const base64Data =
|
||||
component.barcodeImageBase64.split(",")[1] || component.barcodeImageBase64;
|
||||
const imageBuffer = Buffer.from(base64Data, "base64");
|
||||
result.push(
|
||||
new ParagraphRef({
|
||||
children: [
|
||||
new ImageRunRef({
|
||||
data: imageBuffer,
|
||||
transformation: {
|
||||
width: Math.round(component.width * 0.75),
|
||||
height: Math.round(component.height * 0.75),
|
||||
},
|
||||
type: "png",
|
||||
}),
|
||||
],
|
||||
})
|
||||
);
|
||||
} catch (e) {
|
||||
// 바코드 이미지 생성 실패 시 텍스트로 대체
|
||||
const barcodeValue = component.barcodeValue || "BARCODE";
|
||||
result.push(
|
||||
new ParagraphRef({
|
||||
children: [
|
||||
new TextRunRef({
|
||||
text: `[${barcodeValue}]`,
|
||||
size: pxToHalfPtFn(12),
|
||||
font: "맑은 고딕",
|
||||
}),
|
||||
],
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox 컴포넌트
|
||||
else if (component.type === "checkbox") {
|
||||
// 체크 상태 결정 (쿼리 바인딩 또는 고정값)
|
||||
let isChecked = component.checkboxChecked === true;
|
||||
if (component.checkboxFieldName && component.queryId && queryResultsMapRef[component.queryId]) {
|
||||
const qResult = queryResultsMapRef[component.queryId];
|
||||
if (qResult.rows && qResult.rows.length > 0) {
|
||||
const row = qResult.rows[0];
|
||||
const val = row[component.checkboxFieldName];
|
||||
// truthy/falsy 값 판정
|
||||
if (val === true || val === "true" || val === "Y" || val === 1 || val === "1") {
|
||||
isChecked = true;
|
||||
} else {
|
||||
isChecked = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const checkboxSymbol = isChecked ? "☑" : "☐";
|
||||
const checkboxLabel = component.checkboxLabel || "";
|
||||
const labelPosition = component.checkboxLabelPosition || "right";
|
||||
const displayText = labelPosition === "left"
|
||||
? `${checkboxLabel} ${checkboxSymbol}`
|
||||
: `${checkboxSymbol} ${checkboxLabel}`;
|
||||
|
||||
result.push(
|
||||
new ParagraphRef({
|
||||
children: [
|
||||
new TextRunRef({
|
||||
text: displayText.trim(),
|
||||
size: pxToHalfPtFn(component.fontSize || 14),
|
||||
font: "맑은 고딕",
|
||||
color: (component.fontColor || "#374151").replace("#", ""),
|
||||
}),
|
||||
],
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// Divider - 테이블 셀로 감싸서 정확한 너비 적용
|
||||
else if (
|
||||
component.type === "divider" &&
|
||||
|
|
@ -1354,6 +1435,135 @@ export class ReportController {
|
|||
return result;
|
||||
};
|
||||
|
||||
// 바코드 이미지 생성 헬퍼 함수
|
||||
const generateBarcodeImage = async (
|
||||
component: any,
|
||||
queryResultsMapRef: Record<string, { fields: string[]; rows: Record<string, unknown>[] }>
|
||||
): Promise<string | null> => {
|
||||
try {
|
||||
const barcodeType = component.barcodeType || "CODE128";
|
||||
const barcodeColor = (component.barcodeColor || "#000000").replace("#", "");
|
||||
const barcodeBackground = (component.barcodeBackground || "#ffffff").replace("#", "");
|
||||
|
||||
// 바코드 값 결정 (쿼리 바인딩 또는 고정값)
|
||||
let barcodeValue = component.barcodeValue || "SAMPLE123";
|
||||
|
||||
// QR코드 다중 필드 모드
|
||||
if (
|
||||
barcodeType === "QR" &&
|
||||
component.qrUseMultiField &&
|
||||
component.qrDataFields &&
|
||||
component.qrDataFields.length > 0 &&
|
||||
component.queryId &&
|
||||
queryResultsMapRef[component.queryId]
|
||||
) {
|
||||
const qResult = queryResultsMapRef[component.queryId];
|
||||
if (qResult.rows && qResult.rows.length > 0) {
|
||||
// 모든 행 포함 모드
|
||||
if (component.qrIncludeAllRows) {
|
||||
const allRowsData: Record<string, string>[] = [];
|
||||
qResult.rows.forEach((row) => {
|
||||
const rowData: Record<string, string> = {};
|
||||
component.qrDataFields!.forEach((field: { fieldName: string; label: string }) => {
|
||||
if (field.fieldName && field.label) {
|
||||
const val = row[field.fieldName];
|
||||
rowData[field.label] = val !== null && val !== undefined ? String(val) : "";
|
||||
}
|
||||
});
|
||||
allRowsData.push(rowData);
|
||||
});
|
||||
barcodeValue = JSON.stringify(allRowsData);
|
||||
} else {
|
||||
// 단일 행 (첫 번째 행만)
|
||||
const row = qResult.rows[0];
|
||||
const jsonData: Record<string, string> = {};
|
||||
component.qrDataFields.forEach((field: { fieldName: string; label: string }) => {
|
||||
if (field.fieldName && field.label) {
|
||||
const val = row[field.fieldName];
|
||||
jsonData[field.label] = val !== null && val !== undefined ? String(val) : "";
|
||||
}
|
||||
});
|
||||
barcodeValue = JSON.stringify(jsonData);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 단일 필드 바인딩
|
||||
else if (component.barcodeFieldName && component.queryId && queryResultsMapRef[component.queryId]) {
|
||||
const qResult = queryResultsMapRef[component.queryId];
|
||||
if (qResult.rows && qResult.rows.length > 0) {
|
||||
// QR코드 + 모든 행 포함
|
||||
if (barcodeType === "QR" && component.qrIncludeAllRows) {
|
||||
const allValues = qResult.rows
|
||||
.map((row) => {
|
||||
const val = row[component.barcodeFieldName!];
|
||||
return val !== null && val !== undefined ? String(val) : "";
|
||||
})
|
||||
.filter((v) => v !== "");
|
||||
barcodeValue = JSON.stringify(allValues);
|
||||
} else {
|
||||
// 단일 행 (첫 번째 행만)
|
||||
const row = qResult.rows[0];
|
||||
const val = row[component.barcodeFieldName];
|
||||
if (val !== null && val !== undefined) {
|
||||
barcodeValue = String(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// bwip-js 바코드 타입 매핑
|
||||
const bcidMap: Record<string, string> = {
|
||||
"CODE128": "code128",
|
||||
"CODE39": "code39",
|
||||
"EAN13": "ean13",
|
||||
"EAN8": "ean8",
|
||||
"UPC": "upca",
|
||||
"QR": "qrcode",
|
||||
};
|
||||
|
||||
const bcid = bcidMap[barcodeType] || "code128";
|
||||
const isQR = barcodeType === "QR";
|
||||
|
||||
// 바코드 옵션 설정
|
||||
const options: any = {
|
||||
bcid: bcid,
|
||||
text: barcodeValue,
|
||||
scale: 3,
|
||||
includetext: !isQR && component.showBarcodeText !== false,
|
||||
textxalign: "center",
|
||||
barcolor: barcodeColor,
|
||||
backgroundcolor: barcodeBackground,
|
||||
};
|
||||
|
||||
// QR 코드 옵션
|
||||
if (isQR) {
|
||||
options.eclevel = component.qrErrorCorrectionLevel || "M";
|
||||
}
|
||||
|
||||
// 바코드 이미지 생성
|
||||
const png = await bwipjs.toBuffer(options);
|
||||
const base64 = png.toString("base64");
|
||||
return `data:image/png;base64,${base64}`;
|
||||
} catch (error) {
|
||||
console.error("바코드 생성 오류:", error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// 모든 페이지의 바코드 컴포넌트에 대해 이미지 생성
|
||||
for (const page of layoutConfig.pages) {
|
||||
if (page.components) {
|
||||
for (const component of page.components) {
|
||||
if (component.type === "barcode") {
|
||||
const barcodeImage = await generateBarcodeImage(component, queryResultsMap);
|
||||
if (barcodeImage) {
|
||||
component.barcodeImageBase64 = barcodeImage;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 섹션 생성 (페이지별)
|
||||
const sortedPages = layoutConfig.pages.sort(
|
||||
(a: any, b: any) => a.page_order - b.page_order
|
||||
|
|
@ -2624,6 +2834,129 @@ export class ReportController {
|
|||
lastBottomY = adjustedY + component.height;
|
||||
}
|
||||
|
||||
// Barcode 컴포넌트
|
||||
else if (component.type === "barcode") {
|
||||
if (component.barcodeImageBase64) {
|
||||
try {
|
||||
const base64Data =
|
||||
component.barcodeImageBase64.split(",")[1] || component.barcodeImageBase64;
|
||||
const imageBuffer = Buffer.from(base64Data, "base64");
|
||||
|
||||
// spacing을 위한 빈 paragraph
|
||||
if (spacingBefore > 0) {
|
||||
children.push(
|
||||
new Paragraph({
|
||||
spacing: { before: spacingBefore, after: 0 },
|
||||
children: [],
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
children.push(
|
||||
new Paragraph({
|
||||
indent: { left: indentLeft },
|
||||
children: [
|
||||
new ImageRun({
|
||||
data: imageBuffer,
|
||||
transformation: {
|
||||
width: Math.round(component.width * 0.75),
|
||||
height: Math.round(component.height * 0.75),
|
||||
},
|
||||
type: "png",
|
||||
}),
|
||||
],
|
||||
})
|
||||
);
|
||||
} catch (imgError) {
|
||||
console.error("바코드 이미지 오류:", imgError);
|
||||
// 바코드 이미지 생성 실패 시 텍스트로 대체
|
||||
const barcodeValue = component.barcodeValue || "BARCODE";
|
||||
children.push(
|
||||
new Paragraph({
|
||||
spacing: { before: spacingBefore, after: 0 },
|
||||
indent: { left: indentLeft },
|
||||
children: [
|
||||
new TextRun({
|
||||
text: `[${barcodeValue}]`,
|
||||
size: pxToHalfPt(12),
|
||||
font: "맑은 고딕",
|
||||
}),
|
||||
],
|
||||
})
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// 바코드 이미지가 없는 경우 텍스트로 대체
|
||||
const barcodeValue = component.barcodeValue || "BARCODE";
|
||||
children.push(
|
||||
new Paragraph({
|
||||
spacing: { before: spacingBefore, after: 0 },
|
||||
indent: { left: indentLeft },
|
||||
children: [
|
||||
new TextRun({
|
||||
text: `[${barcodeValue}]`,
|
||||
size: pxToHalfPt(12),
|
||||
font: "맑은 고딕",
|
||||
}),
|
||||
],
|
||||
})
|
||||
);
|
||||
}
|
||||
lastBottomY = adjustedY + component.height;
|
||||
}
|
||||
|
||||
// Checkbox 컴포넌트
|
||||
else if (component.type === "checkbox") {
|
||||
// 체크 상태 결정 (쿼리 바인딩 또는 고정값)
|
||||
let isChecked = component.checkboxChecked === true;
|
||||
if (component.checkboxFieldName && component.queryId && queryResultsMap[component.queryId]) {
|
||||
const qResult = queryResultsMap[component.queryId];
|
||||
if (qResult.rows && qResult.rows.length > 0) {
|
||||
const row = qResult.rows[0];
|
||||
const val = row[component.checkboxFieldName];
|
||||
// truthy/falsy 값 판정
|
||||
if (val === true || val === "true" || val === "Y" || val === 1 || val === "1") {
|
||||
isChecked = true;
|
||||
} else {
|
||||
isChecked = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const checkboxSymbol = isChecked ? "☑" : "☐";
|
||||
const checkboxLabel = component.checkboxLabel || "";
|
||||
const labelPosition = component.checkboxLabelPosition || "right";
|
||||
const displayText = labelPosition === "left"
|
||||
? `${checkboxLabel} ${checkboxSymbol}`
|
||||
: `${checkboxSymbol} ${checkboxLabel}`;
|
||||
|
||||
// spacing을 위한 빈 paragraph
|
||||
if (spacingBefore > 0) {
|
||||
children.push(
|
||||
new Paragraph({
|
||||
spacing: { before: spacingBefore, after: 0 },
|
||||
children: [],
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
children.push(
|
||||
new Paragraph({
|
||||
indent: { left: indentLeft },
|
||||
children: [
|
||||
new TextRun({
|
||||
text: displayText.trim(),
|
||||
size: pxToHalfPt(component.fontSize || 14),
|
||||
font: "맑은 고딕",
|
||||
color: (component.fontColor || "#374151").replace("#", ""),
|
||||
}),
|
||||
],
|
||||
})
|
||||
);
|
||||
|
||||
lastBottomY = adjustedY + component.height;
|
||||
}
|
||||
|
||||
// Table 컴포넌트
|
||||
else if (component.type === "table" && component.queryId) {
|
||||
const queryResult = queryResultsMap[component.queryId];
|
||||
|
|
@ -2734,6 +3067,36 @@ export class ReportController {
|
|||
children.push(new Paragraph({ children: [] }));
|
||||
}
|
||||
|
||||
// 워터마크 헤더 생성 (전체 페이지 공유 워터마크)
|
||||
const watermark: WatermarkConfig | undefined = layoutConfig.watermark;
|
||||
let headers: { default?: Header } | undefined;
|
||||
|
||||
if (watermark?.enabled && watermark.type === "text" && watermark.text) {
|
||||
// 워터마크 색상을 hex로 변환 (alpha 적용)
|
||||
const opacity = watermark.opacity ?? 0.3;
|
||||
const fontColor = watermark.fontColor || "#CCCCCC";
|
||||
// hex 색상에서 # 제거
|
||||
const cleanColor = fontColor.replace("#", "");
|
||||
|
||||
headers = {
|
||||
default: new Header({
|
||||
children: [
|
||||
new Paragraph({
|
||||
alignment: AlignmentType.CENTER,
|
||||
children: [
|
||||
new TextRun({
|
||||
text: watermark.text,
|
||||
size: (watermark.fontSize || 48) * 2, // Word는 half-point 사용
|
||||
color: cleanColor,
|
||||
bold: true,
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
properties: {
|
||||
page: {
|
||||
|
|
@ -2753,6 +3116,7 @@ export class ReportController {
|
|||
},
|
||||
},
|
||||
},
|
||||
headers,
|
||||
children,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -938,7 +938,9 @@ export class MenuCopyService {
|
|||
copiedCategoryMappings = await this.copyCategoryMappingsAndValues(
|
||||
menuObjids,
|
||||
menuIdMap,
|
||||
sourceCompanyCode,
|
||||
targetCompanyCode,
|
||||
Array.from(screenIds),
|
||||
userId,
|
||||
client
|
||||
);
|
||||
|
|
@ -2569,11 +2571,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 +2704,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 +2775,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 +2830,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;
|
||||
|
|
|
|||
|
|
@ -116,6 +116,22 @@ export interface UpdateReportRequest {
|
|||
useYn?: string;
|
||||
}
|
||||
|
||||
// 워터마크 설정
|
||||
export interface WatermarkConfig {
|
||||
enabled: boolean;
|
||||
type: "text" | "image";
|
||||
// 텍스트 워터마크
|
||||
text?: string;
|
||||
fontSize?: number;
|
||||
fontColor?: string;
|
||||
// 이미지 워터마크
|
||||
imageUrl?: string;
|
||||
// 공통 설정
|
||||
opacity: number; // 0~1
|
||||
style: "diagonal" | "center" | "tile";
|
||||
rotation?: number; // 대각선일 때 각도 (기본 -45)
|
||||
}
|
||||
|
||||
// 페이지 설정
|
||||
export interface PageConfig {
|
||||
page_id: string;
|
||||
|
|
@ -136,6 +152,7 @@ export interface PageConfig {
|
|||
// 레이아웃 설정
|
||||
export interface ReportLayoutConfig {
|
||||
pages: PageConfig[];
|
||||
watermark?: WatermarkConfig; // 전체 페이지 공유 워터마크
|
||||
}
|
||||
|
||||
// 레이아웃 저장 요청
|
||||
|
|
@ -166,3 +183,113 @@ export interface CreateTemplateRequest {
|
|||
layoutConfig?: any;
|
||||
defaultQueries?: any;
|
||||
}
|
||||
|
||||
// 컴포넌트 설정 (프론트엔드와 동기화)
|
||||
export interface ComponentConfig {
|
||||
id: string;
|
||||
type: string;
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
zIndex: number;
|
||||
fontSize?: number;
|
||||
fontFamily?: string;
|
||||
fontWeight?: string;
|
||||
fontColor?: string;
|
||||
backgroundColor?: string;
|
||||
borderWidth?: number;
|
||||
borderColor?: string;
|
||||
borderRadius?: number;
|
||||
textAlign?: string;
|
||||
padding?: number;
|
||||
queryId?: string;
|
||||
fieldName?: string;
|
||||
defaultValue?: string;
|
||||
format?: string;
|
||||
visible?: boolean;
|
||||
printable?: boolean;
|
||||
conditional?: string;
|
||||
locked?: boolean;
|
||||
groupId?: string;
|
||||
// 이미지 전용
|
||||
imageUrl?: string;
|
||||
objectFit?: "contain" | "cover" | "fill" | "none";
|
||||
// 구분선 전용
|
||||
orientation?: "horizontal" | "vertical";
|
||||
lineStyle?: "solid" | "dashed" | "dotted" | "double";
|
||||
lineWidth?: number;
|
||||
lineColor?: string;
|
||||
// 서명/도장 전용
|
||||
showLabel?: boolean;
|
||||
labelText?: string;
|
||||
labelPosition?: "top" | "left" | "bottom" | "right";
|
||||
showUnderline?: boolean;
|
||||
personName?: string;
|
||||
// 테이블 전용
|
||||
tableColumns?: Array<{
|
||||
field: string;
|
||||
header: string;
|
||||
width?: number;
|
||||
align?: "left" | "center" | "right";
|
||||
}>;
|
||||
headerBackgroundColor?: string;
|
||||
headerTextColor?: string;
|
||||
showBorder?: boolean;
|
||||
rowHeight?: number;
|
||||
// 페이지 번호 전용
|
||||
pageNumberFormat?: "number" | "numberTotal" | "koreanNumber";
|
||||
// 카드 컴포넌트 전용
|
||||
cardTitle?: string;
|
||||
cardItems?: Array<{
|
||||
label: string;
|
||||
value: string;
|
||||
fieldName?: string;
|
||||
}>;
|
||||
labelWidth?: number;
|
||||
showCardBorder?: boolean;
|
||||
showCardTitle?: boolean;
|
||||
titleFontSize?: number;
|
||||
labelFontSize?: number;
|
||||
valueFontSize?: number;
|
||||
titleColor?: string;
|
||||
labelColor?: string;
|
||||
valueColor?: string;
|
||||
// 계산 컴포넌트 전용
|
||||
calcItems?: Array<{
|
||||
label: string;
|
||||
value: number | string;
|
||||
operator: "+" | "-" | "x" | "÷";
|
||||
fieldName?: string;
|
||||
}>;
|
||||
resultLabel?: string;
|
||||
resultColor?: string;
|
||||
resultFontSize?: number;
|
||||
showCalcBorder?: boolean;
|
||||
numberFormat?: "none" | "comma" | "currency";
|
||||
currencySuffix?: string;
|
||||
// 바코드 컴포넌트 전용
|
||||
barcodeType?: "CODE128" | "CODE39" | "EAN13" | "EAN8" | "UPC" | "QR";
|
||||
barcodeValue?: string;
|
||||
barcodeFieldName?: string;
|
||||
showBarcodeText?: boolean;
|
||||
barcodeColor?: string;
|
||||
barcodeBackground?: string;
|
||||
barcodeMargin?: number;
|
||||
qrErrorCorrectionLevel?: "L" | "M" | "Q" | "H";
|
||||
// QR코드 다중 필드 (JSON 형식)
|
||||
qrDataFields?: Array<{
|
||||
fieldName: string;
|
||||
label: string;
|
||||
}>;
|
||||
qrUseMultiField?: boolean;
|
||||
qrIncludeAllRows?: boolean;
|
||||
// 체크박스 컴포넌트 전용
|
||||
checkboxChecked?: boolean; // 체크 상태 (고정값)
|
||||
checkboxFieldName?: string; // 쿼리 필드 바인딩 (truthy/falsy 값)
|
||||
checkboxLabel?: string; // 체크박스 옆 레이블 텍스트
|
||||
checkboxSize?: number; // 체크박스 크기 (px)
|
||||
checkboxColor?: string; // 체크 색상
|
||||
checkboxBorderColor?: string; // 테두리 색상
|
||||
checkboxLabelPosition?: "left" | "right"; // 레이블 위치
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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" && (
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* ===== 서명용 손글씨 폰트 ===== */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Allura&family=Dancing+Script:wght@700&family=Great+Vibes&family=Pacifico&family=Satisfy&family=Caveat:wght@700&family=Permanent+Marker&family=Shadows+Into+Light&family=Kalam:wght@700&family=Patrick+Hand&family=Indie+Flower&family=Amatic+SC:wght@700&family=Covered+By+Your+Grace&family=Nanum+Brush+Script&family=Nanum+Pen+Script&family=Gaegu:wght@700&family=Gugi&family=Single+Day&family=Stylish&family=Sunflower:wght@700&family=Dokdo&display=swap");
|
||||
/* ===== 서명용 손글씨 폰트 (완전한 한글 지원 폰트) ===== */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Allura&family=Dancing+Script:wght@700&family=Great+Vibes&family=Pacifico&family=Satisfy&family=Caveat:wght@700&family=Permanent+Marker&family=Shadows+Into+Light&family=Kalam:wght@700&family=Patrick+Hand&family=Indie+Flower&family=Amatic+SC:wght@700&family=Covered+By+Your+Grace&family=Nanum+Brush+Script&family=Nanum+Pen+Script&family=Gaegu:wght@700&family=Hi+Melody&family=Gamja+Flower&family=Poor+Story&family=Do+Hyeon&family=Jua&display=swap");
|
||||
|
||||
/* ===== Tailwind CSS & Animations ===== */
|
||||
@import "tailwindcss";
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
@ -4,6 +4,159 @@ import { useRef, useState, useEffect } from "react";
|
|||
import { ComponentConfig } from "@/types/report";
|
||||
import { useReportDesigner } from "@/contexts/ReportDesignerContext";
|
||||
import { getFullImageUrl } from "@/lib/api/client";
|
||||
import JsBarcode from "jsbarcode";
|
||||
import QRCode from "qrcode";
|
||||
|
||||
// 고정 스케일 팩터 (화면 해상도와 무관)
|
||||
const MM_TO_PX = 4;
|
||||
|
||||
// 1D 바코드 렌더러 컴포넌트
|
||||
interface BarcodeRendererProps {
|
||||
value: string;
|
||||
format: string;
|
||||
width: number;
|
||||
height: number;
|
||||
displayValue: boolean;
|
||||
lineColor: string;
|
||||
background: string;
|
||||
margin: number;
|
||||
}
|
||||
|
||||
function BarcodeRenderer({
|
||||
value,
|
||||
format,
|
||||
width,
|
||||
height,
|
||||
displayValue,
|
||||
lineColor,
|
||||
background,
|
||||
margin,
|
||||
}: BarcodeRendererProps) {
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!svgRef.current || !value) return;
|
||||
|
||||
// 매번 에러 상태 초기화 후 재검사
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// 바코드 형식에 따른 유효성 검사
|
||||
let isValid = true;
|
||||
let errorMsg = "";
|
||||
const trimmedValue = value.trim();
|
||||
|
||||
if (format === "EAN13" && !/^\d{12,13}$/.test(trimmedValue)) {
|
||||
isValid = false;
|
||||
errorMsg = "EAN-13: 12~13자리 숫자 필요";
|
||||
} else if (format === "EAN8" && !/^\d{7,8}$/.test(trimmedValue)) {
|
||||
isValid = false;
|
||||
errorMsg = "EAN-8: 7~8자리 숫자 필요";
|
||||
} else if (format === "UPC" && !/^\d{11,12}$/.test(trimmedValue)) {
|
||||
isValid = false;
|
||||
errorMsg = "UPC: 11~12자리 숫자 필요";
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
setError(errorMsg);
|
||||
return;
|
||||
}
|
||||
|
||||
// JsBarcode는 format을 소문자로 받음
|
||||
const barcodeFormat = format.toLowerCase();
|
||||
// transparent는 빈 문자열로 변환 (SVG 배경 없음)
|
||||
const bgColor = background === "transparent" ? "" : background;
|
||||
|
||||
JsBarcode(svgRef.current, trimmedValue, {
|
||||
format: barcodeFormat,
|
||||
width: 2,
|
||||
height: Math.max(30, height - (displayValue ? 30 : 10)),
|
||||
displayValue: displayValue,
|
||||
lineColor: lineColor,
|
||||
background: bgColor,
|
||||
margin: margin,
|
||||
fontSize: 12,
|
||||
textMargin: 2,
|
||||
});
|
||||
} catch (err: any) {
|
||||
// JsBarcode 체크섬 오류 등
|
||||
setError(err?.message || "바코드 생성 실패");
|
||||
}
|
||||
}, [value, format, width, height, displayValue, lineColor, background, margin]);
|
||||
|
||||
return (
|
||||
<div className="relative h-full w-full">
|
||||
{/* SVG는 항상 렌더링 (에러 시 숨김) */}
|
||||
<svg ref={svgRef} className={`max-h-full max-w-full ${error ? "hidden" : ""}`} />
|
||||
{/* 에러 메시지 오버레이 */}
|
||||
{error && (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center text-xs text-red-500">
|
||||
<span>{error}</span>
|
||||
<span className="mt-1 text-gray-400">{value}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// QR코드 렌더러 컴포넌트
|
||||
interface QRCodeRendererProps {
|
||||
value: string;
|
||||
size: number;
|
||||
fgColor: string;
|
||||
bgColor: string;
|
||||
level: "L" | "M" | "Q" | "H";
|
||||
}
|
||||
|
||||
function QRCodeRenderer({ value, size, fgColor, bgColor, level }: QRCodeRendererProps) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!canvasRef.current || !value) return;
|
||||
|
||||
// 매번 에러 상태 초기화 후 재시도
|
||||
setError(null);
|
||||
|
||||
// qrcode 라이브러리는 hex 색상만 지원, transparent는 흰색으로 대체
|
||||
const lightColor = bgColor === "transparent" ? "#ffffff" : bgColor;
|
||||
|
||||
QRCode.toCanvas(
|
||||
canvasRef.current,
|
||||
value,
|
||||
{
|
||||
width: Math.max(50, size),
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: fgColor,
|
||||
light: lightColor,
|
||||
},
|
||||
errorCorrectionLevel: level,
|
||||
},
|
||||
(err) => {
|
||||
if (err) {
|
||||
// 실제 에러 메시지 표시
|
||||
setError(err.message || "QR코드 생성 실패");
|
||||
}
|
||||
},
|
||||
);
|
||||
}, [value, size, fgColor, bgColor, level]);
|
||||
|
||||
return (
|
||||
<div className="relative h-full w-full">
|
||||
{/* Canvas는 항상 렌더링 (에러 시 숨김) */}
|
||||
<canvas ref={canvasRef} className={`max-h-full max-w-full ${error ? "hidden" : ""}`} />
|
||||
{/* 에러 메시지 오버레이 */}
|
||||
{error && (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center text-xs text-red-500">
|
||||
<span>{error}</span>
|
||||
<span className="mt-1 text-gray-400">{value}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface CanvasComponentProps {
|
||||
component: ComponentConfig;
|
||||
|
|
@ -102,15 +255,15 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
const newX = Math.max(0, e.clientX - dragStart.x);
|
||||
const newY = Math.max(0, e.clientY - dragStart.y);
|
||||
|
||||
// 여백을 px로 변환 (1mm ≈ 3.7795px)
|
||||
const marginTopPx = margins.top * 3.7795;
|
||||
const marginBottomPx = margins.bottom * 3.7795;
|
||||
const marginLeftPx = margins.left * 3.7795;
|
||||
const marginRightPx = margins.right * 3.7795;
|
||||
// 여백을 px로 변환
|
||||
const marginTopPx = margins.top * MM_TO_PX;
|
||||
const marginBottomPx = margins.bottom * MM_TO_PX;
|
||||
const marginLeftPx = margins.left * MM_TO_PX;
|
||||
const marginRightPx = margins.right * MM_TO_PX;
|
||||
|
||||
// 캔버스 경계 체크 (mm를 px로 변환)
|
||||
const canvasWidthPx = canvasWidth * 3.7795;
|
||||
const canvasHeightPx = canvasHeight * 3.7795;
|
||||
const canvasWidthPx = canvasWidth * MM_TO_PX;
|
||||
const canvasHeightPx = canvasHeight * MM_TO_PX;
|
||||
|
||||
// 컴포넌트가 여백 안에 있도록 제한
|
||||
const minX = marginLeftPx;
|
||||
|
|
@ -162,12 +315,12 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
const newHeight = Math.max(30, resizeStart.height + deltaY);
|
||||
|
||||
// 여백을 px로 변환
|
||||
const marginRightPx = margins.right * 3.7795;
|
||||
const marginBottomPx = margins.bottom * 3.7795;
|
||||
const marginRightPx = margins.right * MM_TO_PX;
|
||||
const marginBottomPx = margins.bottom * MM_TO_PX;
|
||||
|
||||
// 캔버스 경계 체크
|
||||
const canvasWidthPx = canvasWidth * 3.7795;
|
||||
const canvasHeightPx = canvasHeight * 3.7795;
|
||||
const canvasWidthPx = canvasWidth * MM_TO_PX;
|
||||
const canvasHeightPx = canvasHeight * MM_TO_PX;
|
||||
|
||||
// 컴포넌트가 여백을 벗어나지 않도록 최대 크기 제한
|
||||
const maxWidth = canvasWidthPx - marginRightPx - component.x;
|
||||
|
|
@ -176,11 +329,40 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
const boundedWidth = Math.min(newWidth, maxWidth);
|
||||
const boundedHeight = Math.min(newHeight, maxHeight);
|
||||
|
||||
// Grid Snap 적용
|
||||
updateComponent(component.id, {
|
||||
width: snapValueToGrid(boundedWidth),
|
||||
height: snapValueToGrid(boundedHeight),
|
||||
});
|
||||
// 구분선은 방향에 따라 한 축만 조절 가능
|
||||
if (component.type === "divider") {
|
||||
if (component.orientation === "vertical") {
|
||||
// 세로 구분선: 높이만 조절
|
||||
updateComponent(component.id, {
|
||||
height: snapValueToGrid(boundedHeight),
|
||||
});
|
||||
} else {
|
||||
// 가로 구분선: 너비만 조절
|
||||
updateComponent(component.id, {
|
||||
width: snapValueToGrid(boundedWidth),
|
||||
});
|
||||
}
|
||||
} else if (component.type === "barcode" && component.barcodeType === "QR") {
|
||||
// QR코드는 정사각형 유지: 더 큰 변화량 기준으로 동기화
|
||||
const maxDelta = Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY;
|
||||
const newSize = Math.max(50, resizeStart.width + maxDelta);
|
||||
const maxSize = Math.min(
|
||||
canvasWidthPx - marginRightPx - component.x,
|
||||
canvasHeightPx - marginBottomPx - component.y,
|
||||
);
|
||||
const boundedSize = Math.min(newSize, maxSize);
|
||||
const snappedSize = snapValueToGrid(boundedSize);
|
||||
updateComponent(component.id, {
|
||||
width: snappedSize,
|
||||
height: snappedSize,
|
||||
});
|
||||
} else {
|
||||
// Grid Snap 적용
|
||||
updateComponent(component.id, {
|
||||
width: snapValueToGrid(boundedWidth),
|
||||
height: snapValueToGrid(boundedHeight),
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -260,45 +442,19 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
|
||||
switch (component.type) {
|
||||
case "text":
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<div className="mb-1 flex items-center justify-between text-xs text-gray-500">
|
||||
<span>텍스트 필드</span>
|
||||
{hasBinding && <span className="text-blue-600">● 연결됨</span>}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: `${component.fontSize}px`,
|
||||
color: component.fontColor,
|
||||
fontWeight: component.fontWeight,
|
||||
textAlign: component.textAlign as "left" | "center" | "right",
|
||||
whiteSpace: "pre-wrap",
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
{displayValue}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "label":
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<div className="mb-1 flex items-center justify-between text-xs text-gray-500">
|
||||
<span>레이블</span>
|
||||
{hasBinding && <span className="text-blue-600">● 연결됨</span>}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: `${component.fontSize}px`,
|
||||
color: component.fontColor,
|
||||
fontWeight: component.fontWeight,
|
||||
textAlign: component.textAlign as "left" | "center" | "right",
|
||||
whiteSpace: "pre-wrap",
|
||||
}}
|
||||
>
|
||||
{displayValue}
|
||||
</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}
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -321,10 +477,6 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
|
||||
return (
|
||||
<div className="h-full w-full overflow-auto">
|
||||
<div className="mb-1 flex items-center justify-between text-xs text-gray-500">
|
||||
<span>테이블</span>
|
||||
<span className="text-blue-600">● 연결됨 ({queryResult.rows.length}행)</span>
|
||||
</div>
|
||||
<table
|
||||
className="w-full border-collapse text-xs"
|
||||
style={{
|
||||
|
|
@ -381,30 +533,26 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
|
||||
// 기본 테이블 (데이터 없을 때)
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<div className="mb-1 text-xs text-gray-500">테이블</div>
|
||||
<div className="flex h-[calc(100%-20px)] items-center justify-center border-2 border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
|
||||
쿼리를 연결하세요
|
||||
</div>
|
||||
<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>
|
||||
);
|
||||
|
||||
case "image":
|
||||
return (
|
||||
<div className="h-full w-full overflow-hidden">
|
||||
<div className="mb-1 text-xs text-gray-500">이미지</div>
|
||||
{component.imageUrl ? (
|
||||
<img
|
||||
src={getFullImageUrl(component.imageUrl)}
|
||||
alt="이미지"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "calc(100% - 20px)",
|
||||
height: "100%",
|
||||
objectFit: component.objectFit || "contain",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-[calc(100%-20px)] w-full items-center justify-center border border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
|
||||
<div className="flex h-full w-full items-center justify-center border border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
|
||||
이미지를 업로드하세요
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -412,21 +560,23 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
);
|
||||
|
||||
case "divider":
|
||||
const lineWidth = component.lineWidth || 1;
|
||||
const lineColor = component.lineColor || "#000000";
|
||||
// 구분선 (가로: 너비만 조절, 세로: 높이만 조절)
|
||||
const dividerLineWidth = component.lineWidth || 1;
|
||||
const dividerLineColor = component.lineColor || "#000000";
|
||||
const isHorizontal = component.orientation !== "vertical";
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className={`flex h-full w-full ${isHorizontal ? "items-center" : "justify-center"}`}>
|
||||
<div
|
||||
style={{
|
||||
width: component.orientation === "horizontal" ? "100%" : `${lineWidth}px`,
|
||||
height: component.orientation === "vertical" ? "100%" : `${lineWidth}px`,
|
||||
backgroundColor: lineColor,
|
||||
width: isHorizontal ? "100%" : `${dividerLineWidth}px`,
|
||||
height: isHorizontal ? `${dividerLineWidth}px` : "100%",
|
||||
backgroundColor: dividerLineColor,
|
||||
...(component.lineStyle === "dashed" && {
|
||||
backgroundImage: `repeating-linear-gradient(
|
||||
${component.orientation === "horizontal" ? "90deg" : "0deg"},
|
||||
${lineColor} 0px,
|
||||
${lineColor} 10px,
|
||||
${isHorizontal ? "90deg" : "0deg"},
|
||||
${dividerLineColor} 0px,
|
||||
${dividerLineColor} 10px,
|
||||
transparent 10px,
|
||||
transparent 20px
|
||||
)`,
|
||||
|
|
@ -434,19 +584,18 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
}),
|
||||
...(component.lineStyle === "dotted" && {
|
||||
backgroundImage: `repeating-linear-gradient(
|
||||
${component.orientation === "horizontal" ? "90deg" : "0deg"},
|
||||
${lineColor} 0px,
|
||||
${lineColor} 3px,
|
||||
${isHorizontal ? "90deg" : "0deg"},
|
||||
${dividerLineColor} 0px,
|
||||
${dividerLineColor} 3px,
|
||||
transparent 3px,
|
||||
transparent 10px
|
||||
)`,
|
||||
backgroundColor: "transparent",
|
||||
}),
|
||||
...(component.lineStyle === "double" && {
|
||||
boxShadow:
|
||||
component.orientation === "horizontal"
|
||||
? `0 ${lineWidth * 2}px 0 0 ${lineColor}`
|
||||
: `${lineWidth * 2}px 0 0 0 ${lineColor}`,
|
||||
boxShadow: isHorizontal
|
||||
? `0 ${dividerLineWidth * 2}px 0 0 ${dividerLineColor}`
|
||||
: `${dividerLineWidth * 2}px 0 0 0 ${dividerLineColor}`,
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
|
|
@ -461,9 +610,8 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<div className="mb-1 text-xs text-gray-500">서명란</div>
|
||||
<div
|
||||
className={`flex h-[calc(100%-20px)] gap-2 ${
|
||||
className={`flex h-full gap-2 ${
|
||||
sigLabelPos === "top"
|
||||
? "flex-col"
|
||||
: sigLabelPos === "bottom"
|
||||
|
|
@ -525,8 +673,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<div className="mb-1 text-xs text-gray-500">도장란</div>
|
||||
<div className="flex h-[calc(100%-20px)] gap-2">
|
||||
<div className="flex h-full gap-2">
|
||||
{stampPersonName && <div className="flex items-center text-xs font-medium">{stampPersonName}</div>}
|
||||
<div className="relative flex-1">
|
||||
{component.imageUrl ? (
|
||||
|
|
@ -700,7 +847,12 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
};
|
||||
|
||||
// 쿼리 바인딩된 값 가져오기
|
||||
const getCalcItemValue = (item: { label: string; value: number | string; operator: string; fieldName?: string }): number => {
|
||||
const getCalcItemValue = (item: {
|
||||
label: string;
|
||||
value: number | string;
|
||||
operator: string;
|
||||
fieldName?: string;
|
||||
}): number => {
|
||||
if (item.fieldName && component.queryId) {
|
||||
const queryResult = getQueryResult(component.queryId);
|
||||
if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
|
||||
|
|
@ -715,14 +867,18 @@ 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 });
|
||||
|
||||
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];
|
||||
const val = getCalcItemValue(item as { label: string; value: number | string; operator: string; fieldName?: string });
|
||||
const val = getCalcItemValue(
|
||||
item as { label: string; value: number | string; operator: string; fieldName?: string },
|
||||
);
|
||||
switch (item.operator) {
|
||||
case "+":
|
||||
result += val;
|
||||
|
|
@ -747,38 +903,40 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
<div className="flex h-full w-full flex-col overflow-hidden">
|
||||
{/* 항목 목록 */}
|
||||
<div className="flex-1 overflow-auto px-2 py-1">
|
||||
{calcItems.map((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>
|
||||
);
|
||||
})}
|
||||
{calcItems.map(
|
||||
(
|
||||
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>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
{/* 구분선 */}
|
||||
<div
|
||||
className="mx-1 flex-shrink-0 border-t"
|
||||
style={{ borderColor: component.borderColor || "#374151" }}
|
||||
/>
|
||||
<div className="mx-1 flex-shrink-0 border-t" style={{ borderColor: component.borderColor || "#374151" }} />
|
||||
{/* 결과 */}
|
||||
<div className="flex items-center justify-between px-2 py-2">
|
||||
<span
|
||||
|
|
@ -804,6 +962,204 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
</div>
|
||||
);
|
||||
|
||||
case "barcode":
|
||||
// 바코드/QR코드 컴포넌트 렌더링
|
||||
const barcodeType = component.barcodeType || "CODE128";
|
||||
const showBarcodeText = component.showBarcodeText !== false;
|
||||
const barcodeColor = component.barcodeColor || "#000000";
|
||||
const barcodeBackground = component.barcodeBackground || "transparent";
|
||||
const barcodeMargin = component.barcodeMargin ?? 10;
|
||||
const qrErrorLevel = component.qrErrorCorrectionLevel || "M";
|
||||
|
||||
// 바코드 값 결정 (쿼리 바인딩 또는 고정값)
|
||||
const getBarcodeValue = (): string => {
|
||||
// QR코드 다중 필드 모드
|
||||
if (
|
||||
barcodeType === "QR" &&
|
||||
component.qrUseMultiField &&
|
||||
component.qrDataFields &&
|
||||
component.qrDataFields.length > 0 &&
|
||||
component.queryId
|
||||
) {
|
||||
const queryResult = getQueryResult(component.queryId);
|
||||
if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
|
||||
// 모든 행 포함 모드
|
||||
if (component.qrIncludeAllRows) {
|
||||
const allRowsData: Record<string, string>[] = [];
|
||||
queryResult.rows.forEach((row) => {
|
||||
const rowData: Record<string, string> = {};
|
||||
component.qrDataFields!.forEach((field) => {
|
||||
if (field.fieldName && field.label) {
|
||||
const val = row[field.fieldName];
|
||||
rowData[field.label] = val !== null && val !== undefined ? String(val) : "";
|
||||
}
|
||||
});
|
||||
allRowsData.push(rowData);
|
||||
});
|
||||
return JSON.stringify(allRowsData);
|
||||
}
|
||||
|
||||
// 단일 행 (첫 번째 행만)
|
||||
const row = queryResult.rows[0];
|
||||
const jsonData: Record<string, string> = {};
|
||||
component.qrDataFields.forEach((field) => {
|
||||
if (field.fieldName && field.label) {
|
||||
const val = row[field.fieldName];
|
||||
jsonData[field.label] = val !== null && val !== undefined ? String(val) : "";
|
||||
}
|
||||
});
|
||||
return JSON.stringify(jsonData);
|
||||
}
|
||||
// 쿼리 결과가 없으면 플레이스홀더 표시
|
||||
const placeholderData: Record<string, string> = {};
|
||||
component.qrDataFields.forEach((field) => {
|
||||
if (field.label) {
|
||||
placeholderData[field.label] = `{${field.fieldName || "field"}}`;
|
||||
}
|
||||
});
|
||||
return component.qrIncludeAllRows
|
||||
? JSON.stringify([placeholderData, { "...": "..." }])
|
||||
: JSON.stringify(placeholderData);
|
||||
}
|
||||
|
||||
// 단일 필드 바인딩
|
||||
if (component.barcodeFieldName && component.queryId) {
|
||||
const queryResult = getQueryResult(component.queryId);
|
||||
if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
|
||||
// QR코드 + 모든 행 포함
|
||||
if (barcodeType === "QR" && component.qrIncludeAllRows) {
|
||||
const allValues = queryResult.rows
|
||||
.map((row) => {
|
||||
const val = row[component.barcodeFieldName!];
|
||||
return val !== null && val !== undefined ? String(val) : "";
|
||||
})
|
||||
.filter((v) => v !== "");
|
||||
return JSON.stringify(allValues);
|
||||
}
|
||||
|
||||
// 단일 행 (첫 번째 행만)
|
||||
const row = queryResult.rows[0];
|
||||
const val = row[component.barcodeFieldName];
|
||||
if (val !== null && val !== undefined) {
|
||||
return String(val);
|
||||
}
|
||||
}
|
||||
// 플레이스홀더
|
||||
if (barcodeType === "QR" && component.qrIncludeAllRows) {
|
||||
return JSON.stringify([`{${component.barcodeFieldName}}`, "..."]);
|
||||
}
|
||||
return `{${component.barcodeFieldName}}`;
|
||||
}
|
||||
return component.barcodeValue || "SAMPLE123";
|
||||
};
|
||||
|
||||
const barcodeValue = getBarcodeValue();
|
||||
const isQR = barcodeType === "QR";
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex h-full w-full items-center justify-center overflow-hidden"
|
||||
style={{ backgroundColor: barcodeBackground }}
|
||||
>
|
||||
{isQR ? (
|
||||
<QRCodeRenderer
|
||||
value={barcodeValue}
|
||||
size={Math.min(component.width, component.height) - 10}
|
||||
fgColor={barcodeColor}
|
||||
bgColor={barcodeBackground}
|
||||
level={qrErrorLevel}
|
||||
/>
|
||||
) : (
|
||||
<BarcodeRenderer
|
||||
value={barcodeValue}
|
||||
format={barcodeType}
|
||||
width={component.width}
|
||||
height={component.height}
|
||||
displayValue={showBarcodeText}
|
||||
lineColor={barcodeColor}
|
||||
background={barcodeBackground}
|
||||
margin={barcodeMargin}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case "checkbox":
|
||||
// 체크박스 컴포넌트 렌더링
|
||||
const checkboxSize = component.checkboxSize || 18;
|
||||
const checkboxColor = component.checkboxColor || "#2563eb";
|
||||
const checkboxBorderColor = component.checkboxBorderColor || "#6b7280";
|
||||
const checkboxLabelPosition = component.checkboxLabelPosition || "right";
|
||||
const checkboxLabel = component.checkboxLabel || "";
|
||||
|
||||
// 체크 상태 결정 (쿼리 바인딩 또는 고정값)
|
||||
const getCheckboxValue = (): boolean => {
|
||||
if (component.checkboxFieldName && component.queryId) {
|
||||
const queryResult = getQueryResult(component.queryId);
|
||||
if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
|
||||
const row = queryResult.rows[0];
|
||||
const val = row[component.checkboxFieldName];
|
||||
// truthy/falsy 값 판정
|
||||
if (val === true || val === "true" || val === "Y" || val === 1 || val === "1") {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return component.checkboxChecked === true;
|
||||
};
|
||||
|
||||
const isChecked = getCheckboxValue();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex h-full w-full items-center gap-2 ${
|
||||
checkboxLabelPosition === "left" ? "flex-row-reverse justify-end" : ""
|
||||
}`}
|
||||
>
|
||||
{/* 체크박스 */}
|
||||
<div
|
||||
className="flex items-center justify-center rounded-sm border-2 transition-colors"
|
||||
style={{
|
||||
width: `${checkboxSize}px`,
|
||||
height: `${checkboxSize}px`,
|
||||
borderColor: isChecked ? checkboxColor : checkboxBorderColor,
|
||||
backgroundColor: isChecked ? checkboxColor : "transparent",
|
||||
}}
|
||||
>
|
||||
{isChecked && (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="white"
|
||||
strokeWidth="3"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{
|
||||
width: `${checkboxSize * 0.7}px`,
|
||||
height: `${checkboxSize * 0.7}px`,
|
||||
}}
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
{/* 레이블 */}
|
||||
{/* 레이블 */}
|
||||
{checkboxLabel && (
|
||||
<span
|
||||
style={{
|
||||
fontSize: `${component.fontSize || 14}px`,
|
||||
color: component.fontColor || "#374151",
|
||||
}}
|
||||
>
|
||||
{checkboxLabel}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return <div>알 수 없는 컴포넌트</div>;
|
||||
}
|
||||
|
|
@ -812,7 +1168,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
return (
|
||||
<div
|
||||
ref={componentRef}
|
||||
className={`absolute p-2 shadow-sm ${isLocked ? "cursor-not-allowed opacity-80" : "cursor-move"} ${
|
||||
className={`absolute ${component.type === "divider" ? "p-0" : "p-2"} shadow-sm ${isLocked ? "cursor-not-allowed opacity-80" : "cursor-move"} ${
|
||||
isSelected
|
||||
? isLocked
|
||||
? "ring-2 ring-red-500"
|
||||
|
|
@ -851,8 +1207,21 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
{/* 리사이즈 핸들 (선택된 경우만, 잠금 안 된 경우만) */}
|
||||
{isSelected && !isLocked && (
|
||||
<div
|
||||
className="resize-handle absolute right-0 bottom-0 h-3 w-3 cursor-se-resize rounded-full bg-blue-500"
|
||||
style={{ transform: "translate(50%, 50%)" }}
|
||||
className={`resize-handle absolute h-3 w-3 rounded-full bg-blue-500 ${
|
||||
component.type === "divider"
|
||||
? component.orientation === "vertical"
|
||||
? "bottom-0 left-1/2 cursor-s-resize" // 세로 구분선: 하단 중앙
|
||||
: "top-1/2 right-0 cursor-e-resize" // 가로 구분선: 우측 중앙
|
||||
: "right-0 bottom-0 cursor-se-resize" // 일반 컴포넌트: 우하단
|
||||
}`}
|
||||
style={{
|
||||
transform:
|
||||
component.type === "divider"
|
||||
? component.orientation === "vertical"
|
||||
? "translate(-50%, 50%)" // 세로 구분선
|
||||
: "translate(50%, -50%)" // 가로 구분선
|
||||
: "translate(50%, 50%)", // 일반 컴포넌트
|
||||
}}
|
||||
onMouseDown={handleResizeStart}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useDrag } from "react-dnd";
|
||||
import { Type, Table, Image, Minus, PenLine, Stamp as StampIcon, Hash, CreditCard, Calculator } from "lucide-react";
|
||||
import { Type, Table, Image, Minus, PenLine, Stamp as StampIcon, Hash, CreditCard, Calculator, Barcode, CheckSquare } from "lucide-react";
|
||||
|
||||
interface ComponentItem {
|
||||
type: string;
|
||||
|
|
@ -19,6 +19,8 @@ const COMPONENTS: ComponentItem[] = [
|
|||
{ type: "pageNumber", label: "페이지번호", icon: <Hash className="h-4 w-4" /> },
|
||||
{ type: "card", label: "정보카드", icon: <CreditCard className="h-4 w-4" /> },
|
||||
{ type: "calculation", label: "계산", icon: <Calculator className="h-4 w-4" /> },
|
||||
{ type: "barcode", label: "바코드/QR", icon: <Barcode className="h-4 w-4" /> },
|
||||
{ type: "checkbox", label: "체크박스", icon: <CheckSquare className="h-4 w-4" /> },
|
||||
];
|
||||
|
||||
function DraggableComponentItem({ type, label, icon }: ComponentItem) {
|
||||
|
|
|
|||
|
|
@ -3,10 +3,191 @@
|
|||
import { useRef, useEffect } from "react";
|
||||
import { useDrop } from "react-dnd";
|
||||
import { useReportDesigner } from "@/contexts/ReportDesignerContext";
|
||||
import { ComponentConfig } from "@/types/report";
|
||||
import { ComponentConfig, WatermarkConfig } from "@/types/report";
|
||||
import { CanvasComponent } from "./CanvasComponent";
|
||||
import { Ruler } from "./Ruler";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { getFullImageUrl } from "@/lib/api/client";
|
||||
|
||||
// mm를 px로 변환하는 고정 스케일 팩터 (화면 해상도와 무관하게 일정)
|
||||
// A4 기준: 210mm x 297mm → 840px x 1188px
|
||||
export const MM_TO_PX = 4;
|
||||
|
||||
// 워터마크 레이어 컴포넌트
|
||||
interface WatermarkLayerProps {
|
||||
watermark: WatermarkConfig;
|
||||
canvasWidth: number;
|
||||
canvasHeight: number;
|
||||
}
|
||||
|
||||
function WatermarkLayer({ watermark, canvasWidth, canvasHeight }: WatermarkLayerProps) {
|
||||
// 공통 스타일
|
||||
const baseStyle: React.CSSProperties = {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
pointerEvents: "none",
|
||||
overflow: "hidden",
|
||||
zIndex: 1, // 컴포넌트보다 낮은 z-index
|
||||
};
|
||||
|
||||
// 대각선 스타일
|
||||
if (watermark.style === "diagonal") {
|
||||
const rotation = watermark.rotation ?? -45;
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
<div
|
||||
className="absolute flex items-center justify-center"
|
||||
style={{
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: `translate(-50%, -50%) rotate(${rotation}deg)`,
|
||||
opacity: watermark.opacity,
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{watermark.type === "text" ? (
|
||||
<span
|
||||
style={{
|
||||
fontSize: `${watermark.fontSize || 48}px`,
|
||||
color: watermark.fontColor || "#cccccc",
|
||||
fontWeight: "bold",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
{watermark.text || "WATERMARK"}
|
||||
</span>
|
||||
) : (
|
||||
watermark.imageUrl && (
|
||||
<img
|
||||
src={getFullImageUrl(watermark.imageUrl)}
|
||||
alt="watermark"
|
||||
style={{
|
||||
maxWidth: "50%",
|
||||
maxHeight: "50%",
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 중앙 스타일
|
||||
if (watermark.style === "center") {
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
<div
|
||||
className="absolute flex items-center justify-center"
|
||||
style={{
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
opacity: watermark.opacity,
|
||||
}}
|
||||
>
|
||||
{watermark.type === "text" ? (
|
||||
<span
|
||||
style={{
|
||||
fontSize: `${watermark.fontSize || 48}px`,
|
||||
color: watermark.fontColor || "#cccccc",
|
||||
fontWeight: "bold",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
{watermark.text || "WATERMARK"}
|
||||
</span>
|
||||
) : (
|
||||
watermark.imageUrl && (
|
||||
<img
|
||||
src={getFullImageUrl(watermark.imageUrl)}
|
||||
alt="watermark"
|
||||
style={{
|
||||
maxWidth: "50%",
|
||||
maxHeight: "50%",
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 타일 스타일
|
||||
if (watermark.style === "tile") {
|
||||
const rotation = watermark.rotation ?? -30;
|
||||
// 타일 간격 계산
|
||||
const tileSize = watermark.type === "text" ? (watermark.fontSize || 48) * 4 : 150;
|
||||
const cols = Math.ceil(canvasWidth / tileSize) + 2;
|
||||
const rows = Math.ceil(canvasHeight / tileSize) + 2;
|
||||
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-50%",
|
||||
left: "-50%",
|
||||
width: "200%",
|
||||
height: "200%",
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
alignContent: "flex-start",
|
||||
transform: `rotate(${rotation}deg)`,
|
||||
opacity: watermark.opacity,
|
||||
}}
|
||||
>
|
||||
{Array.from({ length: rows * cols }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
width: `${tileSize}px`,
|
||||
height: `${tileSize}px`,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{watermark.type === "text" ? (
|
||||
<span
|
||||
style={{
|
||||
fontSize: `${watermark.fontSize || 24}px`,
|
||||
color: watermark.fontColor || "#cccccc",
|
||||
fontWeight: "bold",
|
||||
userSelect: "none",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{watermark.text || "WATERMARK"}
|
||||
</span>
|
||||
) : (
|
||||
watermark.imageUrl && (
|
||||
<img
|
||||
src={getFullImageUrl(watermark.imageUrl)}
|
||||
alt="watermark"
|
||||
style={{
|
||||
width: `${tileSize * 0.6}px`,
|
||||
height: `${tileSize * 0.6}px`,
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export function ReportDesignerCanvas() {
|
||||
const canvasRef = useRef<HTMLDivElement>(null);
|
||||
|
|
@ -32,6 +213,7 @@ export function ReportDesignerCanvas() {
|
|||
undo,
|
||||
redo,
|
||||
showRuler,
|
||||
layoutConfig,
|
||||
} = useReportDesigner();
|
||||
|
||||
const [{ isOver }, drop] = useDrop(() => ({
|
||||
|
|
@ -58,7 +240,7 @@ export function ReportDesignerCanvas() {
|
|||
height = 150;
|
||||
} else if (item.componentType === "divider") {
|
||||
width = 300;
|
||||
height = 2;
|
||||
height = 10; // 선 두께 + 여백 (선택/드래그를 위한 최소 높이)
|
||||
} else if (item.componentType === "signature") {
|
||||
width = 120;
|
||||
height = 70;
|
||||
|
|
@ -68,17 +250,23 @@ export function ReportDesignerCanvas() {
|
|||
} else if (item.componentType === "pageNumber") {
|
||||
width = 100;
|
||||
height = 30;
|
||||
} else if (item.componentType === "barcode") {
|
||||
width = 200;
|
||||
height = 80;
|
||||
} else if (item.componentType === "checkbox") {
|
||||
width = 150;
|
||||
height = 30;
|
||||
}
|
||||
|
||||
// 여백을 px로 변환 (1mm ≈ 3.7795px)
|
||||
const marginTopPx = margins.top * 3.7795;
|
||||
const marginLeftPx = margins.left * 3.7795;
|
||||
const marginRightPx = margins.right * 3.7795;
|
||||
const marginBottomPx = margins.bottom * 3.7795;
|
||||
// 여백을 px로 변환
|
||||
const marginTopPx = margins.top * MM_TO_PX;
|
||||
const marginLeftPx = margins.left * MM_TO_PX;
|
||||
const marginRightPx = margins.right * MM_TO_PX;
|
||||
const marginBottomPx = margins.bottom * MM_TO_PX;
|
||||
|
||||
// 캔버스 경계 (px)
|
||||
const canvasWidthPx = canvasWidth * 3.7795;
|
||||
const canvasHeightPx = canvasHeight * 3.7795;
|
||||
const canvasWidthPx = canvasWidth * MM_TO_PX;
|
||||
const canvasHeightPx = canvasHeight * MM_TO_PX;
|
||||
|
||||
// 드롭 위치 계산 (여백 내부로 제한)
|
||||
const rawX = x - 100;
|
||||
|
|
@ -204,6 +392,26 @@ export function ReportDesignerCanvas() {
|
|||
showBorder: true,
|
||||
rowHeight: 32,
|
||||
}),
|
||||
// 바코드 컴포넌트 전용
|
||||
...(item.componentType === "barcode" && {
|
||||
barcodeType: "CODE128" as const,
|
||||
barcodeValue: "SAMPLE123",
|
||||
barcodeFieldName: "",
|
||||
showBarcodeText: true,
|
||||
barcodeColor: "#000000",
|
||||
barcodeBackground: "transparent",
|
||||
barcodeMargin: 10,
|
||||
qrErrorCorrectionLevel: "M" as const,
|
||||
}),
|
||||
// 체크박스 컴포넌트 전용
|
||||
...(item.componentType === "checkbox" && {
|
||||
checkboxChecked: false,
|
||||
checkboxLabel: "항목",
|
||||
checkboxSize: 18,
|
||||
checkboxColor: "#2563eb",
|
||||
checkboxBorderColor: "#6b7280",
|
||||
checkboxLabelPosition: "right" as const,
|
||||
}),
|
||||
};
|
||||
|
||||
addComponent(newComponent);
|
||||
|
|
@ -376,8 +584,8 @@ export function ReportDesignerCanvas() {
|
|||
}}
|
||||
className={`relative bg-white shadow-lg ${isOver ? "ring-2 ring-blue-500" : ""}`}
|
||||
style={{
|
||||
width: `${canvasWidth}mm`,
|
||||
minHeight: `${canvasHeight}mm`,
|
||||
width: `${canvasWidth * MM_TO_PX}px`,
|
||||
minHeight: `${canvasHeight * MM_TO_PX}px`,
|
||||
backgroundImage: showGrid
|
||||
? `
|
||||
linear-gradient(to right, #e5e7eb 1px, transparent 1px),
|
||||
|
|
@ -393,14 +601,23 @@ export function ReportDesignerCanvas() {
|
|||
<div
|
||||
className="pointer-events-none absolute border-2 border-dashed border-blue-300/50"
|
||||
style={{
|
||||
top: `${currentPage.margins.top}mm`,
|
||||
left: `${currentPage.margins.left}mm`,
|
||||
right: `${currentPage.margins.right}mm`,
|
||||
bottom: `${currentPage.margins.bottom}mm`,
|
||||
top: `${currentPage.margins.top * MM_TO_PX}px`,
|
||||
left: `${currentPage.margins.left * MM_TO_PX}px`,
|
||||
right: `${currentPage.margins.right * MM_TO_PX}px`,
|
||||
bottom: `${currentPage.margins.bottom * MM_TO_PX}px`,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 워터마크 렌더링 (전체 페이지 공유) */}
|
||||
{layoutConfig.watermark?.enabled && (
|
||||
<WatermarkLayer
|
||||
watermark={layoutConfig.watermark}
|
||||
canvasWidth={canvasWidth * MM_TO_PX}
|
||||
canvasHeight={canvasHeight * MM_TO_PX}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 정렬 가이드라인 렌더링 */}
|
||||
{alignmentGuides.vertical.map((x, index) => (
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@ import { Textarea } from "@/components/ui/textarea";
|
|||
import { Label } from "@/components/ui/label";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Trash2, Settings, Database, Link2, Upload, Loader2 } from "lucide-react";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
import { Trash2, Settings, Database, Link2, Upload, Loader2, X } from "lucide-react";
|
||||
import { useReportDesigner } from "@/contexts/ReportDesignerContext";
|
||||
import { QueryManager } from "./QueryManager";
|
||||
import { SignaturePad } from "./SignaturePad";
|
||||
|
|
@ -29,11 +31,15 @@ export function ReportDesignerRightPanel() {
|
|||
currentPageId,
|
||||
updatePageSettings,
|
||||
getQueryResult,
|
||||
layoutConfig,
|
||||
updateWatermark,
|
||||
} = context;
|
||||
const [activeTab, setActiveTab] = useState<string>("properties");
|
||||
const [uploadingImage, setUploadingImage] = useState(false);
|
||||
const [uploadingWatermarkImage, setUploadingWatermarkImage] = useState(false);
|
||||
const [signatureMethod, setSignatureMethod] = useState<"draw" | "upload" | "generate">("draw");
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const watermarkFileInputRef = useRef<HTMLInputElement>(null);
|
||||
const { toast } = useToast();
|
||||
|
||||
const selectedComponent = components.find((c) => c.id === selectedComponentId);
|
||||
|
|
@ -94,6 +100,63 @@ export function ReportDesignerRightPanel() {
|
|||
}
|
||||
};
|
||||
|
||||
// 워터마크 이미지 업로드 핸들러
|
||||
const handleWatermarkImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
// 파일 타입 체크
|
||||
if (!file.type.startsWith("image/")) {
|
||||
toast({
|
||||
title: "오류",
|
||||
description: "이미지 파일만 업로드 가능합니다.",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 파일 크기 체크 (5MB)
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
toast({
|
||||
title: "오류",
|
||||
description: "파일 크기는 5MB 이하여야 합니다.",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setUploadingWatermarkImage(true);
|
||||
|
||||
const result = await reportApi.uploadImage(file);
|
||||
|
||||
if (result.success) {
|
||||
// 업로드된 이미지 URL을 전체 워터마크에 설정
|
||||
updateWatermark({
|
||||
...layoutConfig.watermark!,
|
||||
imageUrl: result.data.fileUrl,
|
||||
});
|
||||
|
||||
toast({
|
||||
title: "성공",
|
||||
description: "워터마크 이미지가 업로드되었습니다.",
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
toast({
|
||||
title: "오류",
|
||||
description: "이미지 업로드 중 오류가 발생했습니다.",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setUploadingWatermarkImage(false);
|
||||
// input 초기화
|
||||
if (watermarkFileInputRef.current) {
|
||||
watermarkFileInputRef.current.value = "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 선택된 쿼리의 결과 필드 가져오기
|
||||
const getQueryFields = (queryId: string): string[] => {
|
||||
const result = context.getQueryResult(queryId);
|
||||
|
|
@ -562,11 +625,17 @@ export function ReportDesignerRightPanel() {
|
|||
<Label className="text-xs">방향</Label>
|
||||
<Select
|
||||
value={selectedComponent.orientation || "horizontal"}
|
||||
onValueChange={(value) =>
|
||||
onValueChange={(value) => {
|
||||
// 방향 변경 시 너비/높이 스왑
|
||||
const isToVertical = value === "vertical";
|
||||
const currentWidth = selectedComponent.width;
|
||||
const currentHeight = selectedComponent.height;
|
||||
updateComponent(selectedComponent.id, {
|
||||
orientation: value as "horizontal" | "vertical",
|
||||
})
|
||||
}
|
||||
width: isToVertical ? 10 : currentWidth > 50 ? currentWidth : 300,
|
||||
height: isToVertical ? currentWidth > 50 ? currentWidth : 300 : 10,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-8">
|
||||
<SelectValue />
|
||||
|
|
@ -1631,10 +1700,532 @@ export function ReportDesignerRightPanel() {
|
|||
</Card>
|
||||
)}
|
||||
|
||||
{/* 데이터 바인딩 (텍스트/라벨/테이블 컴포넌트) */}
|
||||
{/* 바코드 컴포넌트 설정 */}
|
||||
{selectedComponent.type === "barcode" && (
|
||||
<Card className="mt-4 border-cyan-200 bg-cyan-50">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm text-cyan-900">바코드 설정</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{/* 바코드 타입 */}
|
||||
<div>
|
||||
<Label className="text-xs">바코드 타입</Label>
|
||||
<Select
|
||||
value={selectedComponent.barcodeType || "CODE128"}
|
||||
onValueChange={(value) => {
|
||||
const newType = value as "CODE128" | "CODE39" | "EAN13" | "EAN8" | "UPC" | "QR";
|
||||
// QR코드는 정사각형으로 크기 조정
|
||||
if (newType === "QR") {
|
||||
const size = Math.max(selectedComponent.width, selectedComponent.height);
|
||||
updateComponent(selectedComponent.id, {
|
||||
barcodeType: newType,
|
||||
width: size,
|
||||
height: size,
|
||||
});
|
||||
} else {
|
||||
updateComponent(selectedComponent.id, {
|
||||
barcodeType: newType,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-8">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="CODE128">CODE128 (범용)</SelectItem>
|
||||
<SelectItem value="CODE39">CODE39 (산업용)</SelectItem>
|
||||
<SelectItem value="EAN13">EAN-13 (상품)</SelectItem>
|
||||
<SelectItem value="EAN8">EAN-8 (소형상품)</SelectItem>
|
||||
<SelectItem value="UPC">UPC (북미상품)</SelectItem>
|
||||
<SelectItem value="QR">QR코드</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 바코드 값 입력 (쿼리 연결 없을 때) */}
|
||||
{!selectedComponent.queryId && (
|
||||
<div>
|
||||
<Label className="text-xs">바코드 값</Label>
|
||||
<Input
|
||||
type="text"
|
||||
value={selectedComponent.barcodeValue || ""}
|
||||
onChange={(e) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
barcodeValue: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder={
|
||||
selectedComponent.barcodeType === "EAN13" ? "13자리 숫자" :
|
||||
selectedComponent.barcodeType === "EAN8" ? "8자리 숫자" :
|
||||
selectedComponent.barcodeType === "UPC" ? "12자리 숫자" :
|
||||
"바코드에 표시할 값"
|
||||
}
|
||||
className="h-8"
|
||||
/>
|
||||
{(selectedComponent.barcodeType === "EAN13" ||
|
||||
selectedComponent.barcodeType === "EAN8" ||
|
||||
selectedComponent.barcodeType === "UPC") && (
|
||||
<p className="mt-1 text-[10px] text-gray-500">
|
||||
{selectedComponent.barcodeType === "EAN13" && "EAN-13: 12~13자리 숫자 필요"}
|
||||
{selectedComponent.barcodeType === "EAN8" && "EAN-8: 7~8자리 숫자 필요"}
|
||||
{selectedComponent.barcodeType === "UPC" && "UPC: 11~12자리 숫자 필요"}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 쿼리 연결 시 필드 선택 */}
|
||||
{selectedComponent.queryId && (
|
||||
<>
|
||||
{/* QR코드: 다중 필드 모드 토글 */}
|
||||
{selectedComponent.barcodeType === "QR" && (
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="qrUseMultiField"
|
||||
checked={selectedComponent.qrUseMultiField === true}
|
||||
onChange={(e) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
qrUseMultiField: e.target.checked,
|
||||
// 다중 필드 모드 활성화 시 단일 필드 초기화
|
||||
...(e.target.checked && { barcodeFieldName: "" }),
|
||||
})
|
||||
}
|
||||
className="h-4 w-4 rounded border-gray-300"
|
||||
/>
|
||||
<Label htmlFor="qrUseMultiField" className="text-xs">
|
||||
다중 필드 (JSON 형식)
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 단일 필드 모드 (1D 바코드 또는 QR 단일 모드) */}
|
||||
{(selectedComponent.barcodeType !== "QR" || !selectedComponent.qrUseMultiField) && (
|
||||
<div>
|
||||
<Label className="text-xs">바인딩 필드</Label>
|
||||
<Select
|
||||
value={selectedComponent.barcodeFieldName || "none"}
|
||||
onValueChange={(value) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
barcodeFieldName: value === "none" ? "" : value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8">
|
||||
<SelectValue placeholder="필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">선택 안함</SelectItem>
|
||||
{(() => {
|
||||
const query = queries.find((q) => q.id === selectedComponent.queryId);
|
||||
const result = query ? getQueryResult(query.id) : null;
|
||||
if (result && result.fields) {
|
||||
return result.fields.map((field: string) => (
|
||||
<SelectItem key={field} value={field}>
|
||||
{field}
|
||||
</SelectItem>
|
||||
));
|
||||
}
|
||||
return null;
|
||||
})()}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* QR코드 다중 필드 모드 UI */}
|
||||
{selectedComponent.barcodeType === "QR" && selectedComponent.qrUseMultiField && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs">JSON 필드 매핑</Label>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-6 px-2 text-xs"
|
||||
onClick={() => {
|
||||
const currentFields = selectedComponent.qrDataFields || [];
|
||||
updateComponent(selectedComponent.id, {
|
||||
qrDataFields: [...currentFields, { fieldName: "", label: "" }],
|
||||
});
|
||||
}}
|
||||
>
|
||||
+ 필드 추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 필드 목록 */}
|
||||
<div className="max-h-[200px] space-y-2 overflow-y-auto">
|
||||
{(selectedComponent.qrDataFields || []).map((field, index) => (
|
||||
<div key={index} className="flex items-center gap-1 rounded border p-2">
|
||||
<div className="flex-1 space-y-1">
|
||||
<Select
|
||||
value={field.fieldName || "none"}
|
||||
onValueChange={(value) => {
|
||||
const newFields = [...(selectedComponent.qrDataFields || [])];
|
||||
newFields[index] = {
|
||||
...newFields[index],
|
||||
fieldName: value === "none" ? "" : value,
|
||||
// 라벨이 비어있으면 필드명으로 자동 설정
|
||||
label: newFields[index].label || (value === "none" ? "" : value),
|
||||
};
|
||||
updateComponent(selectedComponent.id, { qrDataFields: newFields });
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs">
|
||||
<SelectValue placeholder="필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">선택 안함</SelectItem>
|
||||
{(() => {
|
||||
const query = queries.find((q) => q.id === selectedComponent.queryId);
|
||||
const result = query ? getQueryResult(query.id) : null;
|
||||
if (result && result.fields) {
|
||||
return result.fields.map((f: string) => (
|
||||
<SelectItem key={f} value={f}>
|
||||
{f}
|
||||
</SelectItem>
|
||||
));
|
||||
}
|
||||
return null;
|
||||
})()}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input
|
||||
type="text"
|
||||
value={field.label || ""}
|
||||
onChange={(e) => {
|
||||
const newFields = [...(selectedComponent.qrDataFields || [])];
|
||||
newFields[index] = { ...newFields[index], label: e.target.value };
|
||||
updateComponent(selectedComponent.id, { qrDataFields: newFields });
|
||||
}}
|
||||
placeholder="JSON 키 이름"
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0 text-red-500 hover:text-red-700"
|
||||
onClick={() => {
|
||||
const newFields = (selectedComponent.qrDataFields || []).filter(
|
||||
(_, i) => i !== index
|
||||
);
|
||||
updateComponent(selectedComponent.id, { qrDataFields: newFields });
|
||||
}}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{(selectedComponent.qrDataFields || []).length === 0 && (
|
||||
<p className="text-center text-xs text-gray-400">
|
||||
필드를 추가하세요
|
||||
</p>
|
||||
)}
|
||||
|
||||
<p className="text-[10px] text-gray-500">
|
||||
결과: {selectedComponent.qrIncludeAllRows
|
||||
? `[{"${(selectedComponent.qrDataFields || []).map(f => f.label || "key").join('":"값","')}"}, ...]`
|
||||
: `{"${(selectedComponent.qrDataFields || []).map(f => f.label || "key").join('":"값","')}":"값"}`
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* QR코드 모든 행 포함 옵션 (다중 필드와 독립) */}
|
||||
{selectedComponent.barcodeType === "QR" && selectedComponent.queryId && (
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="qrIncludeAllRows"
|
||||
checked={selectedComponent.qrIncludeAllRows === true}
|
||||
onChange={(e) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
qrIncludeAllRows: e.target.checked,
|
||||
})
|
||||
}
|
||||
className="h-4 w-4 rounded border-gray-300"
|
||||
/>
|
||||
<Label htmlFor="qrIncludeAllRows" className="text-xs">
|
||||
모든 행 포함 (배열)
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 1D 바코드 전용 옵션 */}
|
||||
{selectedComponent.barcodeType !== "QR" && (
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="showBarcodeText"
|
||||
checked={selectedComponent.showBarcodeText !== false}
|
||||
onChange={(e) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
showBarcodeText: e.target.checked,
|
||||
})
|
||||
}
|
||||
className="h-4 w-4 rounded border-gray-300"
|
||||
/>
|
||||
<Label htmlFor="showBarcodeText" className="text-xs">
|
||||
바코드 아래 텍스트 표시
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* QR 오류 보정 수준 */}
|
||||
{selectedComponent.barcodeType === "QR" && (
|
||||
<div>
|
||||
<Label className="text-xs">오류 보정 수준</Label>
|
||||
<Select
|
||||
value={selectedComponent.qrErrorCorrectionLevel || "M"}
|
||||
onValueChange={(value) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
qrErrorCorrectionLevel: value as "L" | "M" | "Q" | "H",
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="L">L (7% 복구)</SelectItem>
|
||||
<SelectItem value="M">M (15% 복구)</SelectItem>
|
||||
<SelectItem value="Q">Q (25% 복구)</SelectItem>
|
||||
<SelectItem value="H">H (30% 복구)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="mt-1 text-[10px] text-gray-500">
|
||||
높을수록 손상에 강하지만 크기 증가
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 색상 설정 */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label className="text-xs">바코드 색상</Label>
|
||||
<Input
|
||||
type="color"
|
||||
value={selectedComponent.barcodeColor || "#000000"}
|
||||
onChange={(e) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
barcodeColor: e.target.value,
|
||||
})
|
||||
}
|
||||
className="h-8 w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs">배경 색상</Label>
|
||||
<Input
|
||||
type="color"
|
||||
value={selectedComponent.barcodeBackground || "#ffffff"}
|
||||
onChange={(e) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
barcodeBackground: e.target.value,
|
||||
})
|
||||
}
|
||||
className="h-8 w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 여백 */}
|
||||
<div>
|
||||
<Label className="text-xs">여백 (px)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={selectedComponent.barcodeMargin ?? 10}
|
||||
onChange={(e) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
barcodeMargin: Number(e.target.value),
|
||||
})
|
||||
}
|
||||
min={0}
|
||||
max={50}
|
||||
className="h-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 쿼리 연결 안내 */}
|
||||
{!selectedComponent.queryId && (
|
||||
<div className="rounded border border-cyan-200 bg-cyan-100 p-2 text-xs text-cyan-800">
|
||||
쿼리를 연결하면 데이터베이스 값으로 바코드를 생성할 수 있습니다.
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 체크박스 컴포넌트 전용 설정 */}
|
||||
{selectedComponent.type === "checkbox" && (
|
||||
<Card className="mt-4 border-purple-200 bg-purple-50">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm text-purple-900">체크박스 설정</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{/* 체크 상태 (쿼리 연결 없을 때) */}
|
||||
{!selectedComponent.queryId && (
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="checkboxChecked"
|
||||
checked={selectedComponent.checkboxChecked === true}
|
||||
onChange={(e) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
checkboxChecked: e.target.checked,
|
||||
})
|
||||
}
|
||||
className="h-4 w-4 rounded border-gray-300"
|
||||
/>
|
||||
<Label htmlFor="checkboxChecked" className="text-xs">
|
||||
체크됨
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 쿼리 연결 시 필드 선택 */}
|
||||
{selectedComponent.queryId && (
|
||||
<div>
|
||||
<Label className="text-xs">체크 상태 바인딩 필드</Label>
|
||||
<Select
|
||||
value={selectedComponent.checkboxFieldName || "none"}
|
||||
onValueChange={(value) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
checkboxFieldName: value === "none" ? "" : value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8">
|
||||
<SelectValue placeholder="필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">선택 안함</SelectItem>
|
||||
{(() => {
|
||||
const query = queries.find((q) => q.id === selectedComponent.queryId);
|
||||
const result = query ? getQueryResult(query.id) : null;
|
||||
if (result && result.fields) {
|
||||
return result.fields.map((field: string) => (
|
||||
<SelectItem key={field} value={field}>
|
||||
{field}
|
||||
</SelectItem>
|
||||
));
|
||||
}
|
||||
return null;
|
||||
})()}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="mt-1 text-[10px] text-gray-500">
|
||||
true, "Y", 1 등 truthy 값이면 체크됨
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 레이블 텍스트 */}
|
||||
<div>
|
||||
<Label className="text-xs">레이블 텍스트</Label>
|
||||
<Input
|
||||
type="text"
|
||||
value={selectedComponent.checkboxLabel || ""}
|
||||
onChange={(e) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
checkboxLabel: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="체크박스 옆 텍스트"
|
||||
className="h-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 레이블 위치 */}
|
||||
<div>
|
||||
<Label className="text-xs">레이블 위치</Label>
|
||||
<Select
|
||||
value={selectedComponent.checkboxLabelPosition || "right"}
|
||||
onValueChange={(value) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
checkboxLabelPosition: value as "left" | "right",
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="left">왼쪽</SelectItem>
|
||||
<SelectItem value="right">오른쪽</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 체크박스 크기 */}
|
||||
<div>
|
||||
<Label className="text-xs">체크박스 크기 (px)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={selectedComponent.checkboxSize || 18}
|
||||
onChange={(e) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
checkboxSize: Number(e.target.value),
|
||||
})
|
||||
}
|
||||
min={12}
|
||||
max={40}
|
||||
className="h-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 색상 설정 */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label className="text-xs">체크 색상</Label>
|
||||
<Input
|
||||
type="color"
|
||||
value={selectedComponent.checkboxColor || "#2563eb"}
|
||||
onChange={(e) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
checkboxColor: e.target.value,
|
||||
})
|
||||
}
|
||||
className="h-8 w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs">테두리 색상</Label>
|
||||
<Input
|
||||
type="color"
|
||||
value={selectedComponent.checkboxBorderColor || "#6b7280"}
|
||||
onChange={(e) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
checkboxBorderColor: e.target.value,
|
||||
})
|
||||
}
|
||||
className="h-8 w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 쿼리 연결 안내 */}
|
||||
{!selectedComponent.queryId && (
|
||||
<div className="rounded border border-purple-200 bg-purple-100 p-2 text-xs text-purple-800">
|
||||
쿼리를 연결하면 데이터베이스 값으로 체크 상태를 결정할 수 있습니다.
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 데이터 바인딩 (텍스트/라벨/테이블/바코드/체크박스 컴포넌트) */}
|
||||
{(selectedComponent.type === "text" ||
|
||||
selectedComponent.type === "label" ||
|
||||
selectedComponent.type === "table") && (
|
||||
selectedComponent.type === "table" ||
|
||||
selectedComponent.type === "barcode" ||
|
||||
selectedComponent.type === "checkbox") && (
|
||||
<Card className="mt-4 border-blue-200 bg-blue-50">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
|
|
@ -2098,6 +2689,324 @@ export function ReportDesignerRightPanel() {
|
|||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 워터마크 설정 (전체 페이지 공유) */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm">워터마크 (전체 페이지)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{/* 워터마크 활성화 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs">워터마크 사용</Label>
|
||||
<Switch
|
||||
checked={layoutConfig.watermark?.enabled ?? false}
|
||||
onCheckedChange={(checked) =>
|
||||
updateWatermark({
|
||||
...layoutConfig.watermark,
|
||||
enabled: checked,
|
||||
type: layoutConfig.watermark?.type ?? "text",
|
||||
opacity: layoutConfig.watermark?.opacity ?? 0.3,
|
||||
style: layoutConfig.watermark?.style ?? "diagonal",
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{layoutConfig.watermark?.enabled && (
|
||||
<>
|
||||
{/* 워터마크 타입 */}
|
||||
<div>
|
||||
<Label className="text-xs">타입</Label>
|
||||
<Select
|
||||
value={layoutConfig.watermark?.type ?? "text"}
|
||||
onValueChange={(value: "text" | "image") =>
|
||||
updateWatermark({
|
||||
...layoutConfig.watermark!,
|
||||
type: value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="text">텍스트</SelectItem>
|
||||
<SelectItem value="image">이미지</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 텍스트 워터마크 설정 */}
|
||||
{layoutConfig.watermark?.type === "text" && (
|
||||
<>
|
||||
<div>
|
||||
<Label className="text-xs">텍스트</Label>
|
||||
<Input
|
||||
value={layoutConfig.watermark?.text ?? ""}
|
||||
onChange={(e) =>
|
||||
updateWatermark({
|
||||
...layoutConfig.watermark!,
|
||||
text: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="DRAFT, 대외비 등"
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label className="text-xs">폰트 크기</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={layoutConfig.watermark?.fontSize ?? 48}
|
||||
onChange={(e) =>
|
||||
updateWatermark({
|
||||
...layoutConfig.watermark!,
|
||||
fontSize: Number(e.target.value),
|
||||
})
|
||||
}
|
||||
className="mt-1"
|
||||
min={12}
|
||||
max={200}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs">색상</Label>
|
||||
<div className="mt-1 flex gap-1">
|
||||
<Input
|
||||
type="color"
|
||||
value={layoutConfig.watermark?.fontColor ?? "#cccccc"}
|
||||
onChange={(e) =>
|
||||
updateWatermark({
|
||||
...layoutConfig.watermark!,
|
||||
fontColor: e.target.value,
|
||||
})
|
||||
}
|
||||
className="h-9 w-12 cursor-pointer p-1"
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
value={layoutConfig.watermark?.fontColor ?? "#cccccc"}
|
||||
onChange={(e) =>
|
||||
updateWatermark({
|
||||
...layoutConfig.watermark!,
|
||||
fontColor: e.target.value,
|
||||
})
|
||||
}
|
||||
className="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 이미지 워터마크 설정 */}
|
||||
{layoutConfig.watermark?.type === "image" && (
|
||||
<div>
|
||||
<Label className="text-xs">워터마크 이미지</Label>
|
||||
<div className="mt-1 flex gap-2">
|
||||
<input
|
||||
ref={watermarkFileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleWatermarkImageUpload}
|
||||
className="hidden"
|
||||
disabled={uploadingWatermarkImage}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => watermarkFileInputRef.current?.click()}
|
||||
disabled={uploadingWatermarkImage}
|
||||
className="flex-1"
|
||||
>
|
||||
{uploadingWatermarkImage ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
업로드 중...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
{layoutConfig.watermark?.imageUrl ? "이미지 변경" : "이미지 선택"}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{layoutConfig.watermark?.imageUrl && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
updateWatermark({
|
||||
...layoutConfig.watermark!,
|
||||
imageUrl: "",
|
||||
})
|
||||
}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-red-500" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-muted-foreground mt-1 text-[10px]">
|
||||
JPG, PNG, GIF, WEBP (최대 5MB)
|
||||
</p>
|
||||
{layoutConfig.watermark?.imageUrl && (
|
||||
<p className="mt-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs text-indigo-600">
|
||||
현재: ...{layoutConfig.watermark.imageUrl.slice(-30)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 공통 설정 */}
|
||||
<div>
|
||||
<Label className="text-xs">배치 스타일</Label>
|
||||
<Select
|
||||
value={layoutConfig.watermark?.style ?? "diagonal"}
|
||||
onValueChange={(value: "diagonal" | "center" | "tile") =>
|
||||
updateWatermark({
|
||||
...layoutConfig.watermark!,
|
||||
style: value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="diagonal">대각선</SelectItem>
|
||||
<SelectItem value="center">중앙</SelectItem>
|
||||
<SelectItem value="tile">타일 (반복)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 대각선/타일 회전 각도 */}
|
||||
{(layoutConfig.watermark?.style === "diagonal" ||
|
||||
layoutConfig.watermark?.style === "tile") && (
|
||||
<div>
|
||||
<Label className="text-xs">회전 각도</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={layoutConfig.watermark?.rotation ?? -45}
|
||||
onChange={(e) =>
|
||||
updateWatermark({
|
||||
...layoutConfig.watermark!,
|
||||
rotation: Number(e.target.value),
|
||||
})
|
||||
}
|
||||
className="mt-1"
|
||||
min={-180}
|
||||
max={180}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 투명도 */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs">투명도</Label>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
{Math.round((layoutConfig.watermark?.opacity ?? 0.3) * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
value={[(layoutConfig.watermark?.opacity ?? 0.3) * 100]}
|
||||
onValueChange={(value) =>
|
||||
updateWatermark({
|
||||
...layoutConfig.watermark!,
|
||||
opacity: value[0] / 100,
|
||||
})
|
||||
}
|
||||
min={5}
|
||||
max={100}
|
||||
step={5}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 프리셋 버튼 */}
|
||||
<div className="grid grid-cols-2 gap-2 pt-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() =>
|
||||
updateWatermark({
|
||||
...layoutConfig.watermark!,
|
||||
type: "text",
|
||||
text: "DRAFT",
|
||||
fontSize: 64,
|
||||
fontColor: "#cccccc",
|
||||
style: "diagonal",
|
||||
opacity: 0.2,
|
||||
rotation: -45,
|
||||
})
|
||||
}
|
||||
>
|
||||
초안
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() =>
|
||||
updateWatermark({
|
||||
...layoutConfig.watermark!,
|
||||
type: "text",
|
||||
text: "대외비",
|
||||
fontSize: 64,
|
||||
fontColor: "#ff0000",
|
||||
style: "diagonal",
|
||||
opacity: 0.15,
|
||||
rotation: -45,
|
||||
})
|
||||
}
|
||||
>
|
||||
대외비
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() =>
|
||||
updateWatermark({
|
||||
...layoutConfig.watermark!,
|
||||
type: "text",
|
||||
text: "SAMPLE",
|
||||
fontSize: 48,
|
||||
fontColor: "#888888",
|
||||
style: "tile",
|
||||
opacity: 0.1,
|
||||
rotation: -30,
|
||||
})
|
||||
}
|
||||
>
|
||||
샘플
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() =>
|
||||
updateWatermark({
|
||||
...layoutConfig.watermark!,
|
||||
type: "text",
|
||||
text: "COPY",
|
||||
fontSize: 56,
|
||||
fontColor: "#aaaaaa",
|
||||
style: "center",
|
||||
opacity: 0.25,
|
||||
})
|
||||
}
|
||||
>
|
||||
사본
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
|
|
|
|||
|
|
@ -11,15 +11,358 @@ import {
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Printer, FileDown, FileText } from "lucide-react";
|
||||
import { useReportDesigner } from "@/contexts/ReportDesignerContext";
|
||||
import { useState } from "react";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { getFullImageUrl } from "@/lib/api/client";
|
||||
import JsBarcode from "jsbarcode";
|
||||
import QRCode from "qrcode";
|
||||
|
||||
interface ReportPreviewModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
// 미리보기용 워터마크 레이어 컴포넌트
|
||||
interface PreviewWatermarkLayerProps {
|
||||
watermark: {
|
||||
enabled: boolean;
|
||||
type: "text" | "image";
|
||||
text?: string;
|
||||
fontSize?: number;
|
||||
fontColor?: string;
|
||||
imageUrl?: string;
|
||||
opacity: number;
|
||||
style: "diagonal" | "center" | "tile";
|
||||
rotation?: number;
|
||||
};
|
||||
pageWidth: number;
|
||||
pageHeight: number;
|
||||
}
|
||||
|
||||
function PreviewWatermarkLayer({ watermark, pageWidth, pageHeight }: PreviewWatermarkLayerProps) {
|
||||
const baseStyle: React.CSSProperties = {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
pointerEvents: "none",
|
||||
overflow: "hidden",
|
||||
zIndex: 0,
|
||||
};
|
||||
|
||||
const rotation = watermark.rotation ?? -45;
|
||||
|
||||
// 대각선 스타일
|
||||
if (watermark.style === "diagonal") {
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
<div
|
||||
className="absolute flex items-center justify-center"
|
||||
style={{
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: `translate(-50%, -50%) rotate(${rotation}deg)`,
|
||||
opacity: watermark.opacity,
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{watermark.type === "text" ? (
|
||||
<span
|
||||
style={{
|
||||
fontSize: `${watermark.fontSize || 48}px`,
|
||||
color: watermark.fontColor || "#cccccc",
|
||||
fontWeight: "bold",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
{watermark.text || "WATERMARK"}
|
||||
</span>
|
||||
) : (
|
||||
watermark.imageUrl && (
|
||||
<img
|
||||
src={
|
||||
watermark.imageUrl.startsWith("data:")
|
||||
? watermark.imageUrl
|
||||
: getFullImageUrl(watermark.imageUrl)
|
||||
}
|
||||
alt="watermark"
|
||||
style={{
|
||||
maxWidth: "50%",
|
||||
maxHeight: "50%",
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 중앙 스타일
|
||||
if (watermark.style === "center") {
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
<div
|
||||
className="absolute flex items-center justify-center"
|
||||
style={{
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
opacity: watermark.opacity,
|
||||
}}
|
||||
>
|
||||
{watermark.type === "text" ? (
|
||||
<span
|
||||
style={{
|
||||
fontSize: `${watermark.fontSize || 48}px`,
|
||||
color: watermark.fontColor || "#cccccc",
|
||||
fontWeight: "bold",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
{watermark.text || "WATERMARK"}
|
||||
</span>
|
||||
) : (
|
||||
watermark.imageUrl && (
|
||||
<img
|
||||
src={
|
||||
watermark.imageUrl.startsWith("data:")
|
||||
? watermark.imageUrl
|
||||
: getFullImageUrl(watermark.imageUrl)
|
||||
}
|
||||
alt="watermark"
|
||||
style={{
|
||||
maxWidth: "50%",
|
||||
maxHeight: "50%",
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 타일 스타일
|
||||
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;
|
||||
|
||||
return (
|
||||
<div style={baseStyle}>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-50%",
|
||||
left: "-50%",
|
||||
width: "200%",
|
||||
height: "200%",
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
alignContent: "flex-start",
|
||||
transform: `rotate(${rotation}deg)`,
|
||||
opacity: watermark.opacity,
|
||||
}}
|
||||
>
|
||||
{Array.from({ length: rows * cols }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
width: `${tileSize}px`,
|
||||
height: `${tileSize}px`,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{watermark.type === "text" ? (
|
||||
<span
|
||||
style={{
|
||||
fontSize: `${watermark.fontSize || 24}px`,
|
||||
color: watermark.fontColor || "#cccccc",
|
||||
fontWeight: "bold",
|
||||
userSelect: "none",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{watermark.text || "WATERMARK"}
|
||||
</span>
|
||||
) : (
|
||||
watermark.imageUrl && (
|
||||
<img
|
||||
src={
|
||||
watermark.imageUrl.startsWith("data:")
|
||||
? watermark.imageUrl
|
||||
: getFullImageUrl(watermark.imageUrl)
|
||||
}
|
||||
alt="watermark"
|
||||
style={{
|
||||
width: `${tileSize * 0.6}px`,
|
||||
height: `${tileSize * 0.6}px`,
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// 바코드/QR코드 미리보기 컴포넌트
|
||||
function BarcodePreview({
|
||||
component,
|
||||
getQueryResult,
|
||||
}: {
|
||||
component: any;
|
||||
getQueryResult: (queryId: string) => { fields: string[]; rows: Record<string, unknown>[] } | null;
|
||||
}) {
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const barcodeType = component.barcodeType || "CODE128";
|
||||
const isQR = barcodeType === "QR";
|
||||
|
||||
// 바코드 값 결정
|
||||
const getBarcodeValue = (): string => {
|
||||
// QR코드 다중 필드 모드
|
||||
if (
|
||||
isQR &&
|
||||
component.qrUseMultiField &&
|
||||
component.qrDataFields &&
|
||||
component.qrDataFields.length > 0 &&
|
||||
component.queryId
|
||||
) {
|
||||
const queryResult = getQueryResult(component.queryId);
|
||||
if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
|
||||
if (component.qrIncludeAllRows) {
|
||||
const allRowsData: Record<string, string>[] = [];
|
||||
queryResult.rows.forEach((row) => {
|
||||
const rowData: Record<string, string> = {};
|
||||
component.qrDataFields.forEach((field: { fieldName: string; label: string }) => {
|
||||
if (field.fieldName && field.label) {
|
||||
const val = row[field.fieldName];
|
||||
rowData[field.label] = val !== null && val !== undefined ? String(val) : "";
|
||||
}
|
||||
});
|
||||
allRowsData.push(rowData);
|
||||
});
|
||||
return JSON.stringify(allRowsData);
|
||||
}
|
||||
const row = queryResult.rows[0];
|
||||
const jsonData: Record<string, string> = {};
|
||||
component.qrDataFields.forEach((field: { fieldName: string; label: string }) => {
|
||||
if (field.fieldName && field.label) {
|
||||
const val = row[field.fieldName];
|
||||
jsonData[field.label] = val !== null && val !== undefined ? String(val) : "";
|
||||
}
|
||||
});
|
||||
return JSON.stringify(jsonData);
|
||||
}
|
||||
}
|
||||
|
||||
// 단일 필드 바인딩
|
||||
if (component.barcodeFieldName && component.queryId) {
|
||||
const queryResult = getQueryResult(component.queryId);
|
||||
if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
|
||||
if (isQR && component.qrIncludeAllRows) {
|
||||
const allValues = queryResult.rows
|
||||
.map((row) => {
|
||||
const val = row[component.barcodeFieldName];
|
||||
return val !== null && val !== undefined ? String(val) : "";
|
||||
})
|
||||
.filter((v) => v !== "");
|
||||
return JSON.stringify(allValues);
|
||||
}
|
||||
const row = queryResult.rows[0];
|
||||
const val = row[component.barcodeFieldName];
|
||||
if (val !== null && val !== undefined) {
|
||||
return String(val);
|
||||
}
|
||||
}
|
||||
return `{${component.barcodeFieldName}}`;
|
||||
}
|
||||
return component.barcodeValue || "SAMPLE123";
|
||||
};
|
||||
|
||||
const barcodeValue = getBarcodeValue();
|
||||
|
||||
useEffect(() => {
|
||||
setError(null);
|
||||
|
||||
if (isQR) {
|
||||
// QR코드 렌더링
|
||||
if (canvasRef.current && barcodeValue) {
|
||||
const bgColor = component.barcodeBackground === "transparent" ? "#ffffff" : (component.barcodeBackground || "#ffffff");
|
||||
QRCode.toCanvas(
|
||||
canvasRef.current,
|
||||
barcodeValue,
|
||||
{
|
||||
width: Math.min(component.width, component.height) - 20,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: component.barcodeColor || "#000000",
|
||||
light: bgColor,
|
||||
},
|
||||
errorCorrectionLevel: component.qrErrorCorrectionLevel || "M",
|
||||
},
|
||||
(err) => {
|
||||
if (err) setError(err.message || "QR코드 생성 실패");
|
||||
}
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// 1D 바코드 렌더링
|
||||
if (svgRef.current && barcodeValue) {
|
||||
try {
|
||||
const bgColor = component.barcodeBackground === "transparent" ? "" : (component.barcodeBackground || "#ffffff");
|
||||
JsBarcode(svgRef.current, barcodeValue.trim(), {
|
||||
format: barcodeType.toLowerCase(),
|
||||
width: 2,
|
||||
height: Math.max(30, component.height - 40),
|
||||
displayValue: component.showBarcodeText !== false,
|
||||
lineColor: component.barcodeColor || "#000000",
|
||||
background: bgColor,
|
||||
margin: component.barcodeMargin ?? 10,
|
||||
fontSize: 12,
|
||||
textMargin: 2,
|
||||
});
|
||||
} catch (err: any) {
|
||||
setError(err?.message || "바코드 생성 실패");
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [barcodeValue, barcodeType, isQR, component]);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: "#ef4444", fontSize: "12px" }}>
|
||||
{error}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", backgroundColor: component.barcodeBackground || "transparent" }}>
|
||||
{isQR ? (
|
||||
<canvas ref={canvasRef} style={{ maxWidth: "100%", maxHeight: "100%" }} />
|
||||
) : (
|
||||
<svg ref={svgRef} style={{ maxWidth: "100%", maxHeight: "100%" }} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps) {
|
||||
const { layoutConfig, getQueryResult, reportDetail } = useReportDesigner();
|
||||
const [isExporting, setIsExporting] = useState(false);
|
||||
|
|
@ -40,9 +383,131 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
return component.defaultValue || "텍스트";
|
||||
};
|
||||
|
||||
const handlePrint = () => {
|
||||
// 바코드/QR코드를 base64 이미지로 변환
|
||||
const generateBarcodeImage = async (component: any): Promise<string | null> => {
|
||||
const barcodeType = component.barcodeType || "CODE128";
|
||||
const isQR = barcodeType === "QR";
|
||||
|
||||
// 바코드 값 결정
|
||||
const getBarcodeValue = (): string => {
|
||||
if (
|
||||
isQR &&
|
||||
component.qrUseMultiField &&
|
||||
component.qrDataFields &&
|
||||
component.qrDataFields.length > 0 &&
|
||||
component.queryId
|
||||
) {
|
||||
const queryResult = getQueryResult(component.queryId);
|
||||
if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
|
||||
if (component.qrIncludeAllRows) {
|
||||
const allRowsData: Record<string, string>[] = [];
|
||||
queryResult.rows.forEach((row) => {
|
||||
const rowData: Record<string, string> = {};
|
||||
component.qrDataFields.forEach((field: { fieldName: string; label: string }) => {
|
||||
if (field.fieldName && field.label) {
|
||||
const val = row[field.fieldName];
|
||||
rowData[field.label] = val !== null && val !== undefined ? String(val) : "";
|
||||
}
|
||||
});
|
||||
allRowsData.push(rowData);
|
||||
});
|
||||
return JSON.stringify(allRowsData);
|
||||
}
|
||||
const row = queryResult.rows[0];
|
||||
const jsonData: Record<string, string> = {};
|
||||
component.qrDataFields.forEach((field: { fieldName: string; label: string }) => {
|
||||
if (field.fieldName && field.label) {
|
||||
const val = row[field.fieldName];
|
||||
jsonData[field.label] = val !== null && val !== undefined ? String(val) : "";
|
||||
}
|
||||
});
|
||||
return JSON.stringify(jsonData);
|
||||
}
|
||||
}
|
||||
|
||||
if (component.barcodeFieldName && component.queryId) {
|
||||
const queryResult = getQueryResult(component.queryId);
|
||||
if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
|
||||
if (isQR && component.qrIncludeAllRows) {
|
||||
const allValues = queryResult.rows
|
||||
.map((row) => {
|
||||
const val = row[component.barcodeFieldName];
|
||||
return val !== null && val !== undefined ? String(val) : "";
|
||||
})
|
||||
.filter((v) => v !== "");
|
||||
return JSON.stringify(allValues);
|
||||
}
|
||||
const row = queryResult.rows[0];
|
||||
const val = row[component.barcodeFieldName];
|
||||
if (val !== null && val !== undefined) {
|
||||
return String(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
return component.barcodeValue || "SAMPLE123";
|
||||
};
|
||||
|
||||
const barcodeValue = getBarcodeValue();
|
||||
|
||||
try {
|
||||
if (isQR) {
|
||||
// QR코드를 canvas에 렌더링 후 base64로 변환
|
||||
const canvas = document.createElement("canvas");
|
||||
const bgColor = component.barcodeBackground === "transparent" ? "#ffffff" : (component.barcodeBackground || "#ffffff");
|
||||
await QRCode.toCanvas(canvas, barcodeValue, {
|
||||
width: Math.min(component.width, component.height) - 10,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: component.barcodeColor || "#000000",
|
||||
light: bgColor,
|
||||
},
|
||||
errorCorrectionLevel: component.qrErrorCorrectionLevel || "M",
|
||||
});
|
||||
return canvas.toDataURL("image/png");
|
||||
} else {
|
||||
// 1D 바코드를 SVG로 렌더링 후 base64로 변환
|
||||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
const bgColor = component.barcodeBackground === "transparent" ? "" : (component.barcodeBackground || "#ffffff");
|
||||
JsBarcode(svg, barcodeValue.trim(), {
|
||||
format: barcodeType.toLowerCase(),
|
||||
width: 2,
|
||||
height: Math.max(30, component.height - 40),
|
||||
displayValue: component.showBarcodeText !== false,
|
||||
lineColor: component.barcodeColor || "#000000",
|
||||
background: bgColor,
|
||||
margin: component.barcodeMargin ?? 10,
|
||||
fontSize: 12,
|
||||
textMargin: 2,
|
||||
});
|
||||
const svgData = new XMLSerializer().serializeToString(svg);
|
||||
const svgBase64 = btoa(unescape(encodeURIComponent(svgData)));
|
||||
return `data:image/svg+xml;base64,${svgBase64}`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("바코드 생성 오류:", error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const handlePrint = async () => {
|
||||
// 바코드 이미지 미리 생성
|
||||
const pagesWithBarcodes = await Promise.all(
|
||||
layoutConfig.pages.map(async (page) => {
|
||||
const componentsWithBarcodes = await Promise.all(
|
||||
(Array.isArray(page.components) ? page.components : []).map(async (component) => {
|
||||
if (component.type === "barcode") {
|
||||
const barcodeImage = await generateBarcodeImage(component);
|
||||
return { ...component, barcodeImageBase64: barcodeImage };
|
||||
}
|
||||
return component;
|
||||
})
|
||||
);
|
||||
return { ...page, components: componentsWithBarcodes };
|
||||
})
|
||||
);
|
||||
|
||||
// HTML 생성하여 인쇄
|
||||
const printHtml = generatePrintHTML();
|
||||
const printHtml = generatePrintHTML(pagesWithBarcodes);
|
||||
|
||||
const printWindow = window.open("", "_blank");
|
||||
if (!printWindow) return;
|
||||
|
|
@ -52,6 +517,60 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
printWindow.print();
|
||||
};
|
||||
|
||||
// 워터마크 HTML 생성 헬퍼 함수
|
||||
const generateWatermarkHTML = (watermark: any, pageWidth: number, pageHeight: number): string => {
|
||||
if (!watermark?.enabled) return "";
|
||||
|
||||
const opacity = watermark.opacity ?? 0.3;
|
||||
const rotation = watermark.rotation ?? -45;
|
||||
|
||||
// 공통 래퍼 스타일
|
||||
const wrapperStyle = `position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0;`;
|
||||
|
||||
// 텍스트 컨텐츠 생성
|
||||
const textContent = watermark.type === "text"
|
||||
? `<span style="font-size: ${watermark.fontSize || 48}px; color: ${watermark.fontColor || "#cccccc"}; font-weight: bold; white-space: nowrap;">${watermark.text || "WATERMARK"}</span>`
|
||||
: watermark.imageUrl
|
||||
? `<img src="${watermark.imageUrl.startsWith("data:") ? watermark.imageUrl : getFullImageUrl(watermark.imageUrl)}" style="max-width: 50%; max-height: 50%; object-fit: contain;" />`
|
||||
: "";
|
||||
|
||||
if (watermark.style === "diagonal") {
|
||||
return `
|
||||
<div style="${wrapperStyle}">
|
||||
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(${rotation}deg); opacity: ${opacity};">
|
||||
${textContent}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
if (watermark.style === "center") {
|
||||
return `
|
||||
<div style="${wrapperStyle}">
|
||||
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: ${opacity};">
|
||||
${textContent}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
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 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("");
|
||||
|
||||
return `
|
||||
<div style="${wrapperStyle}">
|
||||
<div style="position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; display: flex; flex-wrap: wrap; align-content: flex-start; transform: rotate(${rotation}deg); opacity: ${opacity};">
|
||||
${tileItems}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
// 페이지별 컴포넌트 HTML 생성
|
||||
const generatePageHTML = (
|
||||
pageComponents: any[],
|
||||
|
|
@ -60,6 +579,7 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
backgroundColor: string,
|
||||
pageIndex: number = 0,
|
||||
totalPages: number = 1,
|
||||
watermark?: any,
|
||||
): string => {
|
||||
const componentsHTML = pageComponents
|
||||
.map((component) => {
|
||||
|
|
@ -298,6 +818,46 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
</div>`;
|
||||
}
|
||||
|
||||
// 바코드/QR코드 컴포넌트 (인쇄용 - base64 이미지 사용)
|
||||
else if (component.type === "barcode") {
|
||||
// 바코드 이미지는 미리 생성된 base64 사용 (handlePrint에서 생성)
|
||||
const barcodeImage = (component as any).barcodeImageBase64;
|
||||
if (barcodeImage) {
|
||||
content = `<img src="${barcodeImage}" style="max-width: 100%; max-height: 100%; object-fit: contain;" />`;
|
||||
} else {
|
||||
content = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #666; font-size: 12px;">바코드</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// 체크박스 컴포넌트 (인쇄용)
|
||||
else if (component.type === "checkbox") {
|
||||
const checkboxSize = component.checkboxSize || 18;
|
||||
const checkboxColor = component.checkboxColor || "#2563eb";
|
||||
const checkboxBorderColor = component.checkboxBorderColor || "#6b7280";
|
||||
const checkboxLabel = component.checkboxLabel || "";
|
||||
const checkboxLabelPosition = component.checkboxLabelPosition || "right";
|
||||
|
||||
// 체크 상태 결정
|
||||
let isChecked = component.checkboxChecked === true;
|
||||
if (component.checkboxFieldName && queryResult && queryResult.rows && queryResult.rows.length > 0) {
|
||||
const val = queryResult.rows[0][component.checkboxFieldName];
|
||||
isChecked = val === true || val === "Y" || val === "1" || val === 1 || val === "true";
|
||||
}
|
||||
|
||||
const checkboxHTML = `
|
||||
<div style="width: ${checkboxSize}px; height: ${checkboxSize}px; border: 2px solid ${isChecked ? checkboxColor : checkboxBorderColor}; border-radius: 2px; background-color: ${isChecked ? checkboxColor : "transparent"}; display: flex; align-items: center; justify-content: center;">
|
||||
${isChecked ? `<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="width: ${checkboxSize * 0.7}px; height: ${checkboxSize * 0.7}px;"><polyline points="20 6 9 17 4 12" /></svg>` : ""}
|
||||
</div>
|
||||
`;
|
||||
|
||||
content = `
|
||||
<div style="display: flex; align-items: center; gap: 8px; height: 100%; flex-direction: ${checkboxLabelPosition === "left" ? "row-reverse" : "row"}; ${checkboxLabelPosition === "left" ? "justify-content: flex-end;" : ""}">
|
||||
${checkboxHTML}
|
||||
${checkboxLabel ? `<span style="font-size: 12px;">${checkboxLabel}</span>` : ""}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Table 컴포넌트
|
||||
else if (component.type === "table" && queryResult && queryResult.rows.length > 0) {
|
||||
const columns =
|
||||
|
|
@ -340,15 +900,19 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
})
|
||||
.join("");
|
||||
|
||||
const watermarkHTML = generateWatermarkHTML(watermark, pageWidth, pageHeight);
|
||||
|
||||
return `
|
||||
<div style="position: relative; width: ${pageWidth}mm; min-height: ${pageHeight}mm; background-color: ${backgroundColor}; margin: 0 auto;">
|
||||
${watermarkHTML}
|
||||
${componentsHTML}
|
||||
</div>`;
|
||||
};
|
||||
|
||||
// 모든 페이지 HTML 생성 (인쇄/PDF용)
|
||||
const generatePrintHTML = (): string => {
|
||||
const sortedPages = layoutConfig.pages.sort((a, b) => a.page_order - b.page_order);
|
||||
const generatePrintHTML = (pagesWithBarcodes?: any[]): string => {
|
||||
const pages = pagesWithBarcodes || layoutConfig.pages;
|
||||
const sortedPages = pages.sort((a, b) => a.page_order - b.page_order);
|
||||
const totalPages = sortedPages.length;
|
||||
|
||||
const pagesHTML = sortedPages
|
||||
|
|
@ -360,6 +924,7 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
page.background_color,
|
||||
pageIndex,
|
||||
totalPages,
|
||||
layoutConfig.watermark, // 전체 페이지 공유 워터마크
|
||||
),
|
||||
)
|
||||
.join('<div style="page-break-after: always;"></div>');
|
||||
|
|
@ -422,8 +987,24 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
};
|
||||
|
||||
// PDF 다운로드 (브라우저 인쇄 기능 이용)
|
||||
const handleDownloadPDF = () => {
|
||||
const printHtml = generatePrintHTML();
|
||||
const handleDownloadPDF = async () => {
|
||||
// 바코드 이미지 미리 생성
|
||||
const pagesWithBarcodes = await Promise.all(
|
||||
layoutConfig.pages.map(async (page) => {
|
||||
const componentsWithBarcodes = await Promise.all(
|
||||
(Array.isArray(page.components) ? page.components : []).map(async (component) => {
|
||||
if (component.type === "barcode") {
|
||||
const barcodeImage = await generateBarcodeImage(component);
|
||||
return { ...component, barcodeImageBase64: barcodeImage };
|
||||
}
|
||||
return component;
|
||||
})
|
||||
);
|
||||
return { ...page, components: componentsWithBarcodes };
|
||||
})
|
||||
);
|
||||
|
||||
const printHtml = generatePrintHTML(pagesWithBarcodes);
|
||||
|
||||
const printWindow = window.open("", "_blank");
|
||||
if (!printWindow) return;
|
||||
|
|
@ -568,13 +1149,21 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
<div key={page.page_id} className="relative">
|
||||
{/* 페이지 컨텐츠 */}
|
||||
<div
|
||||
className="relative mx-auto shadow-lg"
|
||||
className="relative mx-auto overflow-hidden shadow-lg"
|
||||
style={{
|
||||
width: `${page.width}mm`,
|
||||
minHeight: `${page.height}mm`,
|
||||
width: `${page.width * 4}px`,
|
||||
minHeight: `${page.height * 4}px`,
|
||||
backgroundColor: page.background_color,
|
||||
}}
|
||||
>
|
||||
{/* 워터마크 렌더링 (전체 페이지 공유) */}
|
||||
{layoutConfig.watermark?.enabled && (
|
||||
<PreviewWatermarkLayer
|
||||
watermark={layoutConfig.watermark}
|
||||
pageWidth={page.width}
|
||||
pageHeight={page.height}
|
||||
/>
|
||||
)}
|
||||
{(Array.isArray(page.components) ? page.components : []).map((component) => {
|
||||
const displayValue = getComponentValue(component);
|
||||
const queryResult = component.queryId ? getQueryResult(component.queryId) : null;
|
||||
|
|
@ -1113,6 +1702,76 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* 바코드/QR코드 컴포넌트 */}
|
||||
{component.type === "barcode" && (
|
||||
<BarcodePreview component={component} getQueryResult={getQueryResult} />
|
||||
)}
|
||||
|
||||
{/* 체크박스 컴포넌트 */}
|
||||
{component.type === "checkbox" && (() => {
|
||||
const checkboxSize = component.checkboxSize || 18;
|
||||
const checkboxColor = component.checkboxColor || "#2563eb";
|
||||
const checkboxBorderColor = component.checkboxBorderColor || "#6b7280";
|
||||
const checkboxLabel = component.checkboxLabel || "";
|
||||
const checkboxLabelPosition = component.checkboxLabelPosition || "right";
|
||||
|
||||
// 체크 상태 결정
|
||||
let isChecked = component.checkboxChecked === true;
|
||||
if (component.checkboxFieldName && component.queryId) {
|
||||
const qResult = getQueryResult(component.queryId);
|
||||
if (qResult && qResult.rows && qResult.rows.length > 0) {
|
||||
const val = qResult.rows[0][component.checkboxFieldName];
|
||||
isChecked = val === true || val === "Y" || val === "1" || val === 1 || val === "true";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
height: "100%",
|
||||
flexDirection: checkboxLabelPosition === "left" ? "row-reverse" : "row",
|
||||
justifyContent: checkboxLabelPosition === "left" ? "flex-end" : "flex-start",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: `${checkboxSize}px`,
|
||||
height: `${checkboxSize}px`,
|
||||
borderRadius: "2px",
|
||||
border: `2px solid ${isChecked ? checkboxColor : checkboxBorderColor}`,
|
||||
backgroundColor: isChecked ? checkboxColor : "transparent",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{isChecked && (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="white"
|
||||
strokeWidth="3"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{
|
||||
width: `${checkboxSize * 0.7}px`,
|
||||
height: `${checkboxSize * 0.7}px`,
|
||||
}}
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
{checkboxLabel && (
|
||||
<span style={{ fontSize: "12px" }}>{checkboxLabel}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,12 @@ interface RulerProps {
|
|||
offset?: number; // 스크롤 오프셋 (px)
|
||||
}
|
||||
|
||||
// 고정 스케일 팩터 (화면 해상도와 무관)
|
||||
const MM_TO_PX = 4;
|
||||
|
||||
export function Ruler({ orientation, length, offset = 0 }: RulerProps) {
|
||||
// mm를 px로 변환 (1mm = 3.7795px, 96dpi 기준)
|
||||
const mmToPx = (mm: number) => mm * 3.7795;
|
||||
// mm를 px로 변환
|
||||
const mmToPx = (mm: number) => mm * MM_TO_PX;
|
||||
|
||||
const lengthPx = mmToPx(length);
|
||||
const isHorizontal = orientation === "horizontal";
|
||||
|
|
|
|||
|
|
@ -13,17 +13,17 @@ interface SignatureGeneratorProps {
|
|||
onSignatureSelect: (dataUrl: string) => void;
|
||||
}
|
||||
|
||||
// 서명용 손글씨 폰트 목록 (스타일이 확실히 구분되는 폰트들)
|
||||
// 서명용 손글씨 폰트 목록 (완전한 한글 지원 폰트만 사용)
|
||||
const SIGNATURE_FONTS = {
|
||||
korean: [
|
||||
{ name: "나눔손글씨 붓", style: "'Nanum Brush Script', cursive", weight: 400 },
|
||||
{ name: "나눔손글씨 펜", style: "'Nanum Pen Script', cursive", weight: 400 },
|
||||
{ name: "배달의민족 도현", style: "Dokdo, cursive", weight: 400 },
|
||||
{ name: "귀여운", style: "Gugi, cursive", weight: 400 },
|
||||
{ name: "싱글데이", style: "'Single Day', cursive", weight: 400 },
|
||||
{ name: "스타일리시", style: "Stylish, cursive", weight: 400 },
|
||||
{ name: "해바라기", style: "Sunflower, sans-serif", weight: 700 },
|
||||
{ name: "손글씨", style: "Gaegu, cursive", weight: 700 },
|
||||
{ name: "손글씨 (Gaegu)", style: "Gaegu, cursive", weight: 700 },
|
||||
{ name: "하이멜로디", style: "'Hi Melody', cursive", weight: 400 },
|
||||
{ name: "감자꽃", style: "'Gamja Flower', cursive", weight: 400 },
|
||||
{ name: "푸어스토리", style: "'Poor Story', cursive", weight: 400 },
|
||||
{ name: "도현", style: "'Do Hyeon', sans-serif", weight: 400 },
|
||||
{ name: "주아", style: "Jua, sans-serif", weight: 400 },
|
||||
],
|
||||
english: [
|
||||
{ name: "Allura (우아한)", style: "Allura, cursive", weight: 400 },
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { createContext, useContext, useState, useCallback, ReactNode, useEffect, useRef } from "react";
|
||||
import { ComponentConfig, ReportDetail, ReportLayout, ReportPage, ReportLayoutConfig } from "@/types/report";
|
||||
import { ComponentConfig, ReportDetail, ReportLayout, ReportPage, ReportLayoutConfig, WatermarkConfig } from "@/types/report";
|
||||
import { reportApi } from "@/lib/api/reportApi";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
|
|
@ -40,6 +40,7 @@ interface ReportDesignerContextType {
|
|||
reorderPages: (sourceIndex: number, targetIndex: number) => void;
|
||||
selectPage: (pageId: string) => void;
|
||||
updatePageSettings: (pageId: string, settings: Partial<ReportPage>) => void;
|
||||
updateWatermark: (watermark: WatermarkConfig | undefined) => void; // 전체 페이지 공유 워터마크
|
||||
|
||||
// 컴포넌트 (현재 페이지)
|
||||
components: ComponentConfig[]; // currentPage의 components (읽기 전용)
|
||||
|
|
@ -803,9 +804,10 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
|
|||
const horizontalLines: number[] = [];
|
||||
const threshold = 5; // 5px 오차 허용
|
||||
|
||||
// 캔버스를 픽셀로 변환 (1mm = 3.7795px)
|
||||
const canvasWidthPx = canvasWidth * 3.7795;
|
||||
const canvasHeightPx = canvasHeight * 3.7795;
|
||||
// 캔버스를 픽셀로 변환 (고정 스케일 팩터: 1mm = 4px)
|
||||
const MM_TO_PX = 4;
|
||||
const canvasWidthPx = canvasWidth * MM_TO_PX;
|
||||
const canvasHeightPx = canvasHeight * MM_TO_PX;
|
||||
const canvasCenterX = canvasWidthPx / 2;
|
||||
const canvasCenterY = canvasHeightPx / 2;
|
||||
|
||||
|
|
@ -987,10 +989,19 @@ 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)),
|
||||
}));
|
||||
}, []);
|
||||
|
||||
// 전체 페이지 공유 워터마크 업데이트
|
||||
const updateWatermark = useCallback((watermark: WatermarkConfig | undefined) => {
|
||||
setLayoutConfig((prev) => ({
|
||||
...prev,
|
||||
watermark,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
// 리포트 및 레이아웃 로드
|
||||
const loadLayout = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
|
|
@ -1470,6 +1481,7 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
|
|||
reorderPages,
|
||||
selectPage,
|
||||
updatePageSettings,
|
||||
updateWatermark,
|
||||
|
||||
// 컴포넌트 (현재 페이지)
|
||||
components,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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"; // 표시 모드: 목록 또는 테이블
|
||||
|
|
|
|||
|
|
@ -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(), // 계층구조: 부모 코드값 (선택)
|
||||
});
|
||||
|
||||
// 코드 생성 스키마
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@
|
|||
"@turf/union": "^7.2.0",
|
||||
"@types/d3": "^7.4.3",
|
||||
"@types/leaflet": "^1.9.21",
|
||||
"@types/qrcode": "^1.5.6",
|
||||
"@types/react-window": "^1.8.8",
|
||||
"@types/three": "^0.180.0",
|
||||
"@xyflow/react": "^12.8.4",
|
||||
|
|
@ -61,11 +62,13 @@
|
|||
"html-to-image": "^1.11.13",
|
||||
"html2canvas": "^1.4.1",
|
||||
"isomorphic-dompurify": "^2.28.0",
|
||||
"jsbarcode": "^3.12.1",
|
||||
"jspdf": "^3.0.3",
|
||||
"leaflet": "^1.9.4",
|
||||
"lucide-react": "^0.525.0",
|
||||
"mammoth": "^1.11.0",
|
||||
"next": "^15.4.8",
|
||||
"qrcode": "^1.5.4",
|
||||
"react": "19.1.0",
|
||||
"react-day-picker": "^9.11.1",
|
||||
"react-dnd": "^16.0.1",
|
||||
|
|
@ -91,6 +94,7 @@
|
|||
"@eslint/eslintrc": "^3",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@tanstack/react-query-devtools": "^5.86.0",
|
||||
"@types/jsbarcode": "^3.11.4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19.1.13",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
|
|
@ -6022,6 +6026,16 @@
|
|||
"integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/jsbarcode": {
|
||||
"version": "3.11.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/jsbarcode/-/jsbarcode-3.11.4.tgz",
|
||||
"integrity": "sha512-VBcpTAnEMH0Gbh8JpV14CgOtJjCYjsvR2FoDRyoYPE0gUxtApf8N4c+HKEOyz/iiIZkMzqrzBA3XX7+KgKxxsA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
"version": "7.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
||||
|
|
@ -6071,7 +6085,6 @@
|
|||
"version": "20.19.24",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.24.tgz",
|
||||
"integrity": "sha512-FE5u0ezmi6y9OZEzlJfg37mqqf6ZDSF2V/NLjUyGrR9uTZ7Sb9F7bLNZ03S4XVUNRWGA7Ck4c1kK+YnuWjl+DA==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"undici-types": "~6.21.0"
|
||||
|
|
@ -6089,6 +6102,15 @@
|
|||
"integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/qrcode": {
|
||||
"version": "1.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
|
||||
"integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/raf": {
|
||||
"version": "3.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
|
||||
|
|
@ -6917,11 +6939,19 @@
|
|||
"url": "https://github.com/sponsors/epoberezkin"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1"
|
||||
|
|
@ -7387,6 +7417,15 @@
|
|||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/camelcase": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
|
||||
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/camera-controls": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-3.1.0.tgz",
|
||||
|
|
@ -7529,6 +7568,17 @@
|
|||
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cliui": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
|
||||
"integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"string-width": "^4.2.0",
|
||||
"strip-ansi": "^6.0.0",
|
||||
"wrap-ansi": "^6.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
|
|
@ -7580,7 +7630,6 @@
|
|||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-name": "~1.1.4"
|
||||
|
|
@ -7593,7 +7642,6 @@
|
|||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
|
|
@ -8292,6 +8340,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/decamelize": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
|
||||
"integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/decimal.js": {
|
||||
"version": "10.6.0",
|
||||
"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
|
||||
|
|
@ -8420,6 +8477,12 @@
|
|||
"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dijkstrajs": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
|
||||
"integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dingbat-to-unicode": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dingbat-to-unicode/-/dingbat-to-unicode-1.0.1.tgz",
|
||||
|
|
@ -9606,6 +9669,15 @@
|
|||
"quickselect": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/get-caller-file": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
|
||||
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": "6.* || 8.* || >= 10.*"
|
||||
}
|
||||
},
|
||||
"node_modules/get-intrinsic": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
|
||||
|
|
@ -10256,6 +10328,15 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/is-fullwidth-code-point": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
|
||||
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/is-generator-function": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
|
||||
|
|
@ -10593,6 +10674,12 @@
|
|||
"js-yaml": "bin/js-yaml.js"
|
||||
}
|
||||
},
|
||||
"node_modules/jsbarcode": {
|
||||
"version": "3.12.1",
|
||||
"resolved": "https://registry.npmjs.org/jsbarcode/-/jsbarcode-3.12.1.tgz",
|
||||
"integrity": "sha512-QZQSqIknC2Rr/YOUyOkCBqsoiBAOTYK+7yNN3JsqfoUtJtkazxNw1dmPpxuv7VVvqW13kA3/mKiLq+s/e3o9hQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/jsdom": {
|
||||
"version": "27.1.0",
|
||||
"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-27.1.0.tgz",
|
||||
|
|
@ -11700,6 +11787,15 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/p-try": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
|
||||
"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/pako": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
|
||||
|
|
@ -11735,7 +11831,6 @@
|
|||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
|
||||
"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
|
|
@ -11818,6 +11913,15 @@
|
|||
"pathe": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/pngjs": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
|
||||
"integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/point-in-polygon": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz",
|
||||
|
|
@ -12348,6 +12452,23 @@
|
|||
],
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/qrcode": {
|
||||
"version": "1.5.4",
|
||||
"resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
|
||||
"integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"dijkstrajs": "^1.0.1",
|
||||
"pngjs": "^5.0.0",
|
||||
"yargs": "^15.3.1"
|
||||
},
|
||||
"bin": {
|
||||
"qrcode": "bin/qrcode"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/queue-microtask": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
||||
|
|
@ -12873,6 +12994,15 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/require-directory": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
|
||||
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/require-from-string": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
|
||||
|
|
@ -12882,6 +13012,12 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/require-main-filename": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
|
||||
"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/reselect": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
|
||||
|
|
@ -13110,6 +13246,12 @@
|
|||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/set-blocking": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
|
||||
"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/set-function-length": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
|
||||
|
|
@ -13451,6 +13593,26 @@
|
|||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/string-width": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
|
||||
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"emoji-regex": "^8.0.0",
|
||||
"is-fullwidth-code-point": "^3.0.0",
|
||||
"strip-ansi": "^6.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/string-width/node_modules/emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/string.prototype.includes": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
|
||||
|
|
@ -13564,6 +13726,18 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/strip-ansi": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
||||
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ansi-regex": "^5.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/strip-bom": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
|
||||
|
|
@ -14191,7 +14365,6 @@
|
|||
"version": "6.21.0",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
|
||||
"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
|
||||
"devOptional": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/unrs-resolver": {
|
||||
|
|
@ -14511,6 +14684,12 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/which-module": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
|
||||
"integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/which-typed-array": {
|
||||
"version": "1.1.19",
|
||||
"resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
|
||||
|
|
@ -14561,6 +14740,20 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/wrap-ansi": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
|
||||
"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.0.0",
|
||||
"string-width": "^4.1.0",
|
||||
"strip-ansi": "^6.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.18.3",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
|
||||
|
|
@ -14675,6 +14868,99 @@
|
|||
"integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/y18n": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
|
||||
"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/yargs": {
|
||||
"version": "15.4.1",
|
||||
"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
|
||||
"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cliui": "^6.0.0",
|
||||
"decamelize": "^1.2.0",
|
||||
"find-up": "^4.1.0",
|
||||
"get-caller-file": "^2.0.1",
|
||||
"require-directory": "^2.1.1",
|
||||
"require-main-filename": "^2.0.0",
|
||||
"set-blocking": "^2.0.0",
|
||||
"string-width": "^4.2.0",
|
||||
"which-module": "^2.0.0",
|
||||
"y18n": "^4.0.0",
|
||||
"yargs-parser": "^18.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/yargs-parser": {
|
||||
"version": "18.1.3",
|
||||
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
|
||||
"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"camelcase": "^5.0.0",
|
||||
"decamelize": "^1.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/yargs/node_modules/find-up": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
|
||||
"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"locate-path": "^5.0.0",
|
||||
"path-exists": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/yargs/node_modules/locate-path": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
|
||||
"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"p-locate": "^4.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/yargs/node_modules/p-limit": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
|
||||
"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"p-try": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/yargs/node_modules/p-locate": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
|
||||
"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"p-limit": "^2.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/yocto-queue": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@
|
|||
"@turf/union": "^7.2.0",
|
||||
"@types/d3": "^7.4.3",
|
||||
"@types/leaflet": "^1.9.21",
|
||||
"@types/qrcode": "^1.5.6",
|
||||
"@types/react-window": "^1.8.8",
|
||||
"@types/three": "^0.180.0",
|
||||
"@xyflow/react": "^12.8.4",
|
||||
|
|
@ -69,11 +70,13 @@
|
|||
"html-to-image": "^1.11.13",
|
||||
"html2canvas": "^1.4.1",
|
||||
"isomorphic-dompurify": "^2.28.0",
|
||||
"jsbarcode": "^3.12.1",
|
||||
"jspdf": "^3.0.3",
|
||||
"leaflet": "^1.9.4",
|
||||
"lucide-react": "^0.525.0",
|
||||
"mammoth": "^1.11.0",
|
||||
"next": "^15.4.8",
|
||||
"qrcode": "^1.5.4",
|
||||
"react": "19.1.0",
|
||||
"react-day-picker": "^9.11.1",
|
||||
"react-dnd": "^16.0.1",
|
||||
|
|
@ -99,6 +102,7 @@
|
|||
"@eslint/eslintrc": "^3",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@tanstack/react-query-devtools": "^5.86.0",
|
||||
"@types/jsbarcode": "^3.11.4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19.1.13",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -81,6 +81,22 @@ export interface ExternalConnection {
|
|||
is_active: string;
|
||||
}
|
||||
|
||||
// 워터마크 설정
|
||||
export interface WatermarkConfig {
|
||||
enabled: boolean;
|
||||
type: "text" | "image";
|
||||
// 텍스트 워터마크
|
||||
text?: string;
|
||||
fontSize?: number;
|
||||
fontColor?: string;
|
||||
// 이미지 워터마크
|
||||
imageUrl?: string;
|
||||
// 공통 설정
|
||||
opacity: number; // 0~1
|
||||
style: "diagonal" | "center" | "tile";
|
||||
rotation?: number; // 대각선일 때 각도 (기본 -45)
|
||||
}
|
||||
|
||||
// 페이지 설정
|
||||
export interface ReportPage {
|
||||
page_id: string;
|
||||
|
|
@ -102,6 +118,7 @@ export interface ReportPage {
|
|||
// 레이아웃 설정 (페이지 기반)
|
||||
export interface ReportLayoutConfig {
|
||||
pages: ReportPage[];
|
||||
watermark?: WatermarkConfig; // 전체 페이지 공유 워터마크
|
||||
}
|
||||
|
||||
// 컴포넌트 설정
|
||||
|
|
@ -189,6 +206,30 @@ export interface ComponentConfig {
|
|||
showCalcBorder?: boolean; // 테두리 표시 여부
|
||||
numberFormat?: "none" | "comma" | "currency"; // 숫자 포맷 (없음, 천단위, 원화)
|
||||
currencySuffix?: string; // 통화 접미사 (예: "원")
|
||||
// 바코드 컴포넌트 전용
|
||||
barcodeType?: "CODE128" | "CODE39" | "EAN13" | "EAN8" | "UPC" | "QR"; // 바코드 타입
|
||||
barcodeValue?: string; // 고정값
|
||||
barcodeFieldName?: string; // 쿼리 필드 바인딩
|
||||
showBarcodeText?: boolean; // 바코드 아래 텍스트 표시 (1D만)
|
||||
barcodeColor?: string; // 바코드 색상
|
||||
barcodeBackground?: string; // 배경 색상
|
||||
barcodeMargin?: number; // 여백
|
||||
qrErrorCorrectionLevel?: "L" | "M" | "Q" | "H"; // QR 오류 보정 수준
|
||||
// QR코드 다중 필드 (JSON 형식)
|
||||
qrDataFields?: Array<{
|
||||
fieldName: string; // 쿼리 필드명
|
||||
label: string; // JSON 키 이름
|
||||
}>;
|
||||
qrUseMultiField?: boolean; // 다중 필드 사용 여부
|
||||
qrIncludeAllRows?: boolean; // 모든 행 포함 (배열 JSON)
|
||||
// 체크박스 컴포넌트 전용
|
||||
checkboxChecked?: boolean; // 체크 상태 (고정값)
|
||||
checkboxFieldName?: string; // 쿼리 필드 바인딩 (truthy/falsy 값)
|
||||
checkboxLabel?: string; // 체크박스 옆 레이블 텍스트
|
||||
checkboxSize?: number; // 체크박스 크기 (px)
|
||||
checkboxColor?: string; // 체크 색상
|
||||
checkboxBorderColor?: string; // 테두리 색상
|
||||
checkboxLabelPosition?: "left" | "right"; // 레이블 위치
|
||||
}
|
||||
|
||||
// 리포트 상세
|
||||
|
|
|
|||
|
|
@ -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