*/}
+
)
}
diff --git a/src/components/SuitablePdf.tsx b/src/components/SuitablePdf.tsx
new file mode 100644
index 0000000..f059744
--- /dev/null
+++ b/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 (
+
+ {statusInfo.statusIcon}
+
+ {fitting.name}：{statusInfo.statusText}
+
+ {fitting.memo && (
+
+ 備考：
+ {fitting.memo}
+
+ )}
+
+ )
+}
+
+export default function PDFContent({ data }: { data: Suitable[] }) {
+ return (
+
+
+
適合結果 (적합결과)
+ {data.map((item) => (
+
+
+
+ {item.product_name}（{item.manufacturer} / {item.roof_material} / {item.shape}）
+
+
+ {getFittingItems(item).map((fitting, index) => (
+
+ ))}
+
+
+ ))}
+
+ )
+}
diff --git a/src/components/SuitableSearch.tsx b/src/components/SuitableSearch.tsx
index e339f80..4e3aa13 100644
--- a/src/components/SuitableSearch.tsx
+++ b/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() {
))}
-
+
+ 지붕재 종류 상세보기 페이지 이동
+