feat: 지붕재 적합성 pdf 기본기능 추가

src/app/api/suitable/details/route.ts

@@ -1,4 +1,5 @@
 import { NextResponse } from 'next/server'
+import { prisma } from '@/libs/prisma'
 
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url)

src/components/Suitable.tsx

@@ -9,6 +9,7 @@ export default function Suitable() {
   const router = useRouter()
   const queryClient = useQueryClient()
   const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
+
   const handleItemClick = (item: SuitableType) => {
     if (!item.id) return // 초기 데이터 import 때문에 Suitable.id가 optional 타입이라서 방어 처리 추가
     selectedItems.some((selected) => selected.id === item.id) ? removeSelectedItem(item.id) : addSelectedItem(item)
@@ -23,7 +24,7 @@ export default function Suitable() {
     enabled: false,
   })
 
-  if (isLoading || !suitableList) {
+  if (isLoading || !suitableList || suitableList.length === 0) {
     return <div>Loading...</div>
   }
 

src/components/SuitableDetails.tsx

@@ -1,23 +1,71 @@
 'use client'
 
-import { Suitable, suitableApi } from '@/api/suitable'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+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 }) {
-  console.log('🚀 ~ SuitableDetails ~ roofMaterial:', roofMaterial)
-  // const { data, error, isPending } = useQuery({
-  //   queryKey: ['suitable-details'],
-  //   queryFn: () => suitableApi.getDetails(roofMaterial),
-  //   staleTime: 0,
-  // })
-  const cache = useQueryClient()
-  const listData = cache.getQueryData(['suitable-list']) as Suitable[]
-  const data = listData.filter((item) => item.roof_material === roofMaterial)
+  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 (
     <>
-      <h1 className="text-4xl font-bold">Searched Roof Material: {roofMaterial}</h1>
-      {data && data.map((item) => <div key={item.id}>{item.product_name}</div>)}
+      <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>
     </>
   )
 }

src/components/SuitablePdf.tsx

@@ -0,0 +1,116 @@
+import { Suitable } from '@/api/suitable'
+
+interface StatusInfo {
+  statusIcon: string
+  statusText: string
+}
+
+interface FittingItem {
+  name: string
+  value: string
+  memo: string
+}
+
+function getStatusInfo(value: string): StatusInfo | null {
+  const val = value?.trim()?.replace(/ー|－/g, '-') || ''
+
+  if (['○', '〇'].includes(val)) {
+    return {
+      statusIcon: '✅',
+      statusText: '設置可',
+    }
+  }
+
+  if (['×', '✕'].includes(val)) {
+    return {
+      statusIcon: '❌',
+      statusText: '設置不可',
+    }
+  }
+
+  if (['-', '－', 'ー'].includes(val)) {
+    return {
+      statusIcon: '❓',
+      statusText: 'お問い合わせください',
+    }
+  }
+
+  if (val === '') return null
+
+  return {
+    statusIcon: '✅',
+    statusText: `${val} で設置可`,
+  }
+}
+
+function getFittingItems(item: Suitable): FittingItem[] {
+  return [
+    { name: '屋根瓦用支持金具', value: item.support_roof_tile, memo: item.support_roof_tile_memo },
+    { name: '屋根ブラケット用支持金具', value: item.support_roof_bracket, memo: item.support_roof_bracket_memo },
+    { name: 'YGアンカー', value: item.yg_anchor, memo: item.yg_anchor_memo },
+    { name: 'RG屋根瓦パーツ', value: item.rg_roof_tile_part, memo: item.rg_roof_tile_part_memo },
+    { name: 'DIDOハント支持瓦2', value: item.dido_hunt_support_tile_2, memo: item.dido_hunt_support_tile_2_memo },
+    { name: '高島パワーベース', value: item.takashima_power_base, memo: item.takashima_power_base_memo },
+    { name: '高島瓦ブラケット', value: item.takashima_tile_bracket, memo: item.takashima_tile_bracket_memo },
+    { name: 'スレートブラケット4', value: item.slate_bracket_4, memo: item.slate_bracket_4_memo },
+    { name: 'スレートシングルメタルブラケット', value: item.slate_single_metal_bracket, memo: item.slate_single_metal_bracket_memo },
+    { name: 'DIDOハントショートラック4', value: item.dido_hunt_short_rack_4, memo: item.dido_hunt_short_rack_4_memo },
+    {
+      name: '高島スレートブラケットスレートシングル',
+      value: item.takashima_slate_bracket_slate_single,
+      memo: item.takashima_slate_bracket_slate_single_memo,
+    },
+    { name: 'DFメタルブラケット', value: item.df_metal_bracket, memo: item.df_metal_bracket_memo },
+    { name: 'スレートメタルブラケット', value: item.slate_metal_bracket, memo: item.slate_metal_bracket_memo },
+    { name: '高島スレートブラケットメタル屋根', value: item.takashima_slate_bracket_metal_roof, memo: item.takashima_slate_bracket_metal_roof_memo },
+  ]
+}
+
+function FittingItem({ fitting }: { fitting: FittingItem }) {
+  const statusInfo = getStatusInfo(fitting.value)
+  if (!statusInfo) return null
+
+  return (
+    <li>
+      <span>{statusInfo.statusIcon}</span>
+      <span>
+        <strong>{fitting.name}</strong>：{statusInfo.statusText}
+      </span>
+      {fitting.memo && (
+        <span>
+          <strong>備考：</strong>
+          {fitting.memo}
+        </span>
+      )}
+    </li>
+  )
+}
+
+export default function PDFContent({ data }: { data: Suitable[] }) {
+  return (
+    <div className="pdf-content">
+      <style jsx global>{`
+        .pdf-content,
+        .pdf-content * {
+          color: black !important;
+          -webkit-print-color-adjust: exact !important;
+          print-color-adjust: exact !important;
+        }
+      `}</style>
+      <h1>適合結果 (적합결과)</h1>
+      {data.map((item) => (
+        <div key={item.id}>
+          <br />
+          <h2>
+            {item.product_name}（{item.manufacturer} / {item.roof_material} / {item.shape}）
+          </h2>
+          <ul>
+            {getFittingItems(item).map((fitting, index) => (
+              <FittingItem key={index} fitting={fitting} />
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  )
+}

src/components/SuitableSearch.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useQuery } from '@tanstack/react-query'
 import { useSuitable } from '@/hooks/useSuitable'
+import Link from 'next/link'
 
 export default function SuitableSearch() {
   const router = useRouter()
@@ -74,7 +75,9 @@ export default function SuitableSearch() {
             </option>
           ))}
         </select>
-        <button onClick={() => router.push(`/suitable/${selectedCategory}`)}> 지붕재 종류 상세보기 페이지 이동</button>
+        <Link href={`/suitable/${selectedCategory}`} className="inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+          지붕재 종류 상세보기 페이지 이동
+        </Link>
       </div>
       <div>
         <input type="text" placeholder="검색어를 입력하세요" onChange={(e) => setSearchValue(e.target.value)} />