72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { suitableApi } from '@/api/suitable'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import generatePDF, { usePDF, Options } from 'react-to-pdf'
|
|
import PDFContent from './SuitablePdf'
|
|
|
|
const pdfOptions: Options = {
|
|
filename: 'page.pdf',
|
|
method: 'save',
|
|
page: { format: 'a4', margin: 10 },
|
|
overrides: {
|
|
pdf: {
|
|
compress: true,
|
|
},
|
|
},
|
|
}
|
|
|
|
export default function SuitableDetails({ roofMaterial }: { roofMaterial: string }) {
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ['suitable-details'],
|
|
queryFn: () => suitableApi.getDetails(roofMaterial),
|
|
staleTime: 0,
|
|
enabled: !!roofMaterial,
|
|
})
|
|
|
|
const { toPDF, targetRef } = usePDF({ ...pdfOptions, method: 'open' })
|
|
|
|
if (isLoading) {
|
|
return <div>Loading...</div>
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<button className="inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={() => toPDF()}>
|
|
OPEN PDF
|
|
</button>
|
|
<button
|
|
className="inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
|
|
onClick={() => generatePDF(targetRef, pdfOptions)}
|
|
>
|
|
SAVE PDF
|
|
</button>
|
|
{/* <button onClick={handleDownloadPDF}>Download PDF</button> */}
|
|
{/* <div ref={targetRef} className="pdf-content"> */}
|
|
<div>
|
|
<h1 className="text-4xl font-bold">Searched Roof Material: {decodeURIComponent(roofMaterial as string)}</h1>
|
|
{data &&
|
|
data.map((item) => (
|
|
<div key={item.id}>
|
|
<br />
|
|
<div>product_name: {item.product_name}</div>
|
|
<div>manufacturer: {item.manufacturer}</div>
|
|
<div>roof_material: {item.roof_material}</div>
|
|
<div>shape: {item.shape}</div>
|
|
<div>support_roof_tile: {item.support_roof_tile}</div>
|
|
<div>support_roof_bracket: {item.support_roof_bracket}</div>
|
|
<div>yg_anchor: {item.yg_anchor}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* <div style={{ display: 'none' }}> */}
|
|
<div>
|
|
<div ref={targetRef}>
|
|
<h1 className="text-4xl font-bold">PDF 내용 나와라</h1>
|
|
<PDFContent data={data ?? []} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|