"use client"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { Button } from "@/components/ui/button"; import { Printer, FileDown } from "lucide-react"; import { useReportDesigner } from "@/contexts/ReportDesignerContext"; interface ReportPreviewModalProps { isOpen: boolean; onClose: () => void; } export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps) { 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 = () => { // 현재 미리보기 영역만 인쇄 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 = () => { alert("PDF 다운로드 기능은 추후 구현 예정입니다."); }; const handleDownloadWord = () => { alert("WORD 다운로드 기능은 추후 구현 예정입니다."); }; return ( 미리보기 현재 레이아웃의 미리보기입니다. 인쇄하거나 파일로 다운로드할 수 있습니다. {/* 미리보기 영역 */}
{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}
{String(row[field] ?? "")}
) : component.type === "table" ? (
쿼리를 실행해주세요
) : null}
); })}
); }