From 7a588b47f6ccd21463edbf22647d53d444c8e0ec Mon Sep 17 00:00:00 2001 From: dohyeons Date: Wed, 1 Oct 2025 13:58:55 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../report/designer/ReportPreviewModal.tsx | 148 ++++++++++++------ 1 file changed, 103 insertions(+), 45 deletions(-) diff --git a/frontend/components/report/designer/ReportPreviewModal.tsx b/frontend/components/report/designer/ReportPreviewModal.tsx index c6fb2604..f64daaea 100644 --- a/frontend/components/report/designer/ReportPreviewModal.tsx +++ b/frontend/components/report/designer/ReportPreviewModal.tsx @@ -18,10 +18,49 @@ interface ReportPreviewModalProps { } export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps) { - const { components, canvasWidth, canvasHeight } = useReportDesigner(); + const { components, canvasWidth, canvasHeight, getQueryResult } = useReportDesigner(); + + // 컴포넌트의 실제 표시 값 가져오기 + const getComponentValue = (component: any): string => { + if (component.queryId && component.fieldName) { + const queryResult = getQueryResult(component.queryId); + if (queryResult && queryResult.rows.length > 0) { + const value = queryResult.rows[0][component.fieldName]; + if (value !== null && value !== undefined) { + return String(value); + } + } + return `{${component.fieldName}}`; + } + return component.defaultValue || "텍스트"; + }; const handlePrint = () => { - window.print(); + // 현재 미리보기 영역만 인쇄 + const printContent = document.getElementById("preview-content"); + if (!printContent) return; + + const printWindow = window.open("", "_blank"); + if (!printWindow) return; + + printWindow.document.write(` + + + 리포트 인쇄 + + + + ${printContent.innerHTML} + + + `); + printWindow.document.close(); + printWindow.print(); }; const handleDownloadPDF = () => { @@ -45,63 +84,82 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps) {/* 미리보기 영역 */}
- {components.map((component) => ( -
- {component.type === "text" && ( -
-
텍스트 필드
-
샘플 텍스트
-
- )} - {component.type === "label" && ( -
-
레이블
-
레이블 텍스트
-
- )} - {component.type === "table" && ( -
-
테이블
+ {components.map((component) => { + const displayValue = getComponentValue(component); + const queryResult = component.queryId ? getQueryResult(component.queryId) : null; + + return ( +
+ {component.type === "text" && ( +
+ {displayValue} +
+ )} + + {component.type === "label" && ( +
+ {displayValue} +
+ )} + + {component.type === "table" && queryResult && queryResult.rows.length > 0 ? ( - - - + {queryResult.fields.map((field) => ( + + ))} - - - - - + {queryResult.rows.map((row, idx) => ( + + {queryResult.fields.map((field) => ( + + ))} + + ))}
품목명수량단가 + {field} +
샘플11050,000
+ {String(row[field] ?? "")} +
-
- )} -
- ))} + ) : component.type === "table" ? ( +
쿼리를 실행해주세요
+ ) : null} +
+ ); + })}