pdf 생성 및 페이지 수정
This commit is contained in:
parent
9ca1d76fdf
commit
3fc2dd8664
690
src/app/pdftable/page.tsx
Normal file
690
src/app/pdftable/page.tsx
Normal file
@ -0,0 +1,690 @@
|
||||
"use client";
|
||||
|
||||
import { useRef } from "react";
|
||||
import generatePDF, { Margin, Resolution } from "react-to-pdf";
|
||||
|
||||
export default function PDFTablePage(){
|
||||
const targetRef = useRef<HTMLDivElement>(null);
|
||||
const handleDownPdf = () => {
|
||||
const options = {
|
||||
method: "open" as const,
|
||||
resolution: Resolution.HIGH,
|
||||
page: {
|
||||
margin: Margin.SMALL,
|
||||
format: "A4",
|
||||
orientation: "landscape" as const, // 'portrait' 세로 | 'landscape' 가로
|
||||
},
|
||||
canvas: {
|
||||
mimeType: "image/png" as const,
|
||||
qualityRatio: 1,
|
||||
},
|
||||
overrides: {
|
||||
pdf: {
|
||||
compress: true,
|
||||
},
|
||||
canvas: {
|
||||
useCORS: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
generatePDF(targetRef, options);
|
||||
// generatePDF(targetRef, { filename: 'page.pdf' })
|
||||
};
|
||||
return(
|
||||
<>
|
||||
<button className="btn-frame n-blue min" onClick={handleDownPdf}>
|
||||
PDF Download
|
||||
</button>
|
||||
<div className="pdf-table-wrap" ref={targetRef}>
|
||||
<div className="pdf-intro-page">
|
||||
<div className="pdf-intro-tit-wrap">
|
||||
<div className="pdf-intro-tit mb20">ハンファジャパン株式会社</div>
|
||||
<div className="pdf-intro-tit mb20">(瓦) 屋根材適合表</div>
|
||||
<div className="pdf-intro-date">2025年4月30日 10:40</div>
|
||||
</div>
|
||||
<div className="pdf-intro-cont-wrap">
|
||||
<p>本適合表は参考資料としてご使用下さい。</p>
|
||||
<p>屋根材製品の形状・仕様はメーカーより変更される場合が御座います。</p>
|
||||
<p>又、現場環境(働き、勾配、瓦桟木条件等)により本適合表と異なる適合結果となる場合が御座います。予めご了承下さい。</p>
|
||||
<p>屋根材以外の設置条件(垂木、野地板等の設置基準)も必ずご確認下さい。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pdf-table-content">
|
||||
<div className="pdf-table-grid-wrap">
|
||||
<div className="pdf-table-card">
|
||||
<div className="pdf-table-tit-wrap">
|
||||
<span>屋根材製品名</span>
|
||||
<span>メーカー名</span>
|
||||
<span>屋根材の種類</span>
|
||||
</div>
|
||||
<div className="pdf-roof-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width={'18%'} />
|
||||
<col width={'23%'}/>
|
||||
<col width={'18%'}/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>金具タイプ</th>
|
||||
<th>金具名</th>
|
||||
<th>設置可否</th>
|
||||
<th>備考</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pdf-table-card">
|
||||
<div className="pdf-table-tit-wrap">
|
||||
<span>屋根材製品名</span>
|
||||
<span>メーカー名</span>
|
||||
<span>屋根材の種類</span>
|
||||
</div>
|
||||
<div className="pdf-roof-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width={'18%'} />
|
||||
<col width={'23%'}/>
|
||||
<col width={'18%'}/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>金具タイプ</th>
|
||||
<th>金具名</th>
|
||||
<th>設置可否</th>
|
||||
<th>備考</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pdf-table-card">
|
||||
<div className="pdf-table-tit-wrap">
|
||||
<span>屋根材製品名</span>
|
||||
<span>メーカー名</span>
|
||||
<span>屋根材の種類</span>
|
||||
</div>
|
||||
<div className="pdf-roof-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width={'18%'} />
|
||||
<col width={'23%'}/>
|
||||
<col width={'18%'}/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>金具タイプ</th>
|
||||
<th>金具名</th>
|
||||
<th>設置可否</th>
|
||||
<th>備考</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pdf-table-card">
|
||||
<div className="pdf-table-tit-wrap">
|
||||
<span>屋根材製品名</span>
|
||||
<span>メーカー名</span>
|
||||
<span>屋根材の種類</span>
|
||||
</div>
|
||||
<div className="pdf-roof-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width={'18%'} />
|
||||
<col width={'23%'}/>
|
||||
<col width={'18%'}/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>金具タイプ</th>
|
||||
<th>金具名</th>
|
||||
<th>設置可否</th>
|
||||
<th>備考</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pdf-table-card">
|
||||
<div className="pdf-table-tit-wrap">
|
||||
<span>屋根材製品名</span>
|
||||
<span>メーカー名</span>
|
||||
<span>屋根材の種類</span>
|
||||
</div>
|
||||
<div className="pdf-roof-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width={'18%'} />
|
||||
<col width={'23%'}/>
|
||||
<col width={'18%'}/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>金具タイプ</th>
|
||||
<th>金具名</th>
|
||||
<th>設置可否</th>
|
||||
<th>備考</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pdf-table-card">
|
||||
<div className="pdf-table-tit-wrap">
|
||||
<span>屋根材製品名</span>
|
||||
<span>メーカー名</span>
|
||||
<span>屋根材の種類</span>
|
||||
</div>
|
||||
<div className="pdf-roof-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width={'18%'} />
|
||||
<col width={'23%'}/>
|
||||
<col width={'18%'}/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>金具タイプ</th>
|
||||
<th>金具名</th>
|
||||
<th>設置可否</th>
|
||||
<th>備考</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pdf-table-card">
|
||||
<div className="pdf-table-tit-wrap">
|
||||
<span>屋根材製品名</span>
|
||||
<span>メーカー名</span>
|
||||
<span>屋根材の種類</span>
|
||||
</div>
|
||||
<div className="pdf-roof-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width={'18%'} />
|
||||
<col width={'23%'}/>
|
||||
<col width={'18%'}/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>金具タイプ</th>
|
||||
<th>金具名</th>
|
||||
<th>設置可否</th>
|
||||
<th>備考</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pdf-table-card">
|
||||
<div className="pdf-table-tit-wrap">
|
||||
<span>屋根材製品名</span>
|
||||
<span>メーカー名</span>
|
||||
<span>屋根材の種類</span>
|
||||
</div>
|
||||
<div className="pdf-roof-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width={'18%'} />
|
||||
<col width={'23%'}/>
|
||||
<col width={'18%'}/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>金具タイプ</th>
|
||||
<th>金具名</th>
|
||||
<th>設置可否</th>
|
||||
<th>備考</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pdf-table-card">
|
||||
<div className="pdf-table-tit-wrap">
|
||||
<span>屋根材製品名</span>
|
||||
<span>メーカー名</span>
|
||||
<span>屋根材の種類</span>
|
||||
</div>
|
||||
<div className="pdf-roof-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width={'18%'} />
|
||||
<col width={'23%'}/>
|
||||
<col width={'18%'}/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>金具タイプ</th>
|
||||
<th>金具名</th>
|
||||
<th>設置可否</th>
|
||||
<th>備考</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pdf-table-card">
|
||||
<div className="pdf-table-tit-wrap">
|
||||
<span>屋根材製品名</span>
|
||||
<span>メーカー名</span>
|
||||
<span>屋根材の種類</span>
|
||||
</div>
|
||||
<div className="pdf-roof-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width={'18%'} />
|
||||
<col width={'23%'}/>
|
||||
<col width={'18%'}/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>金具タイプ</th>
|
||||
<th>金具名</th>
|
||||
<th>設置可否</th>
|
||||
<th>備考</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>木ねじ打ち込み式</td>
|
||||
<td>屋根技研支持瓦</td>
|
||||
<td>C で設置可</td>
|
||||
<td>支持瓦はアンダーラップの先端を削って納める(Try-U40はこの瓦の前身)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -18,7 +18,7 @@ export default function SaleDetailPage(){
|
||||
<Footer/>
|
||||
<button className="top-btn"></button>
|
||||
</div>
|
||||
<SaleSubmitPop/>
|
||||
{/* <SaleSubmitPop/> */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -17,7 +17,7 @@ export default function SaleEditPage() {
|
||||
<button className="top-btn"></button>
|
||||
</div>
|
||||
{/* 주소 검색 팝업 */}
|
||||
<SaleZipCodePop/>
|
||||
{/* <SaleZipCodePop/> */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -119,9 +119,15 @@ export default function PublishList (){
|
||||
<li>2025/05/23</li>
|
||||
<li>* 제출 팝업 요소 변경</li>
|
||||
</ul> */}
|
||||
<ul>
|
||||
{/* <ul>
|
||||
<li>2025/05/27</li>
|
||||
<li>* 제출 팝업 상단 select 영역 추가</li>
|
||||
</ul> */}
|
||||
<ul>
|
||||
<li>2025/05/28</li>
|
||||
<li>* 제출 팝업 발송자 영역 최상단 위치 조정</li>
|
||||
<li>* 제출 팝업 내용 영역 수정</li>
|
||||
<li>* 지붕 구조의 순서 영역 수정</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className='c red'>2025/04/29</td>
|
||||
@ -145,6 +151,7 @@ export default function PublishList (){
|
||||
<ul>
|
||||
<li>2025/05/28</li>
|
||||
<li>* 주소 검색 팝업 하단 버튼 제거</li>
|
||||
<li>* 지붕 구조의 순서 영역 수정</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className='c red'>2025/05/15</td>
|
||||
@ -189,9 +196,13 @@ export default function PublishList (){
|
||||
<td className='c'>
|
||||
</td>
|
||||
<td className='c red'>
|
||||
<ul>
|
||||
{/* <ul>
|
||||
<li>2025/05/13</li>
|
||||
<li>* 이름, 연락처, 문의 유형 추가, 제목 변경</li>
|
||||
</ul> */}
|
||||
<ul>
|
||||
<li>2025/05/28</li>
|
||||
<li>* 상세 인적 정보 위치 변경</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className='c red'>2025/04/30</td>
|
||||
@ -204,9 +215,13 @@ export default function PublishList (){
|
||||
<td className='c'>
|
||||
</td>
|
||||
<td className='c red'>
|
||||
<ul>
|
||||
{/* <ul>
|
||||
<li>2025/05/13</li>
|
||||
<li>* 이름, 연락처, 문의 유형 추가, 제목 변경</li>
|
||||
</ul> */}
|
||||
<ul>
|
||||
<li>2025/05/28</li>
|
||||
<li>* 상세 인적 정보 위치 변경</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className='c red'>2025/04/30</td>
|
||||
@ -246,8 +261,8 @@ export default function PublishList (){
|
||||
<td className='c red'>2025/05/08</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PDF 뷰어</td>
|
||||
<td>PDF 뷰어 페이지</td>
|
||||
<td rowSpan={2}>PDF 뷰어</td>
|
||||
<td>조사매물 pdf</td>
|
||||
<td>
|
||||
<Link href={'pdfview'}>PDFView.tsx</Link>
|
||||
</td>
|
||||
@ -257,6 +272,17 @@ export default function PublishList (){
|
||||
</td>
|
||||
<td className='c red'>2025/05/19</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>지붕재 적합성 pdf</td>
|
||||
<td>
|
||||
<Link href={'pdftable'}>PDFTablePage.tsx</Link>
|
||||
</td>
|
||||
<td className='c'>
|
||||
</td>
|
||||
<td className='c red'>
|
||||
</td>
|
||||
<td className='c red'>2025/05/28</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -17,29 +17,25 @@ export default function InquiryAnswerData() {
|
||||
<td>2025.04.10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>作者</th>
|
||||
<td>Hong gi</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>名前</th>
|
||||
<td>Kim</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>番号</th>
|
||||
<td>070-1234-5678</td>
|
||||
<th>顧客名</th>
|
||||
<td>Hong gi [시공점명]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>販売店</th>
|
||||
<td>interplug</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>施工店</th>
|
||||
<td>interplugs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>E-mail</th>
|
||||
<td>Hong@interplug.co.kr</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>名前</th>
|
||||
<td>Kim</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>お問い合わせ</th>
|
||||
<td>070-1234-5678</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -17,29 +17,25 @@ export default function InquiryDetailData() {
|
||||
<td>2025.04.10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>作者</th>
|
||||
<td>Hong gi</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>名前</th>
|
||||
<td>Kim</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>番号</th>
|
||||
<td>070-1234-5678</td>
|
||||
<th>顧客名</th>
|
||||
<td>Hong gi [시공점명]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>販売店</th>
|
||||
<td>interplug</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>施工店</th>
|
||||
<td>interplugs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>E-mail</th>
|
||||
<td>Hong@interplug.co.kr</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>名前</th>
|
||||
<td>Kim</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>お問い合わせ</th>
|
||||
<td>070-1234-5678</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -18,6 +18,12 @@ export default function SaleSubmitPop() {
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="data-form-wrap">
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">発送者 <i className="import">*</i></div>
|
||||
<div className="data-input">
|
||||
<input className="input-frame" type="text" defaultValue={'HG@interplug2.co.kr'} disabled/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">提出地点選択 <i className="import">*</i></div>
|
||||
<div className="data-input">
|
||||
@ -36,12 +42,6 @@ export default function SaleSubmitPop() {
|
||||
<input className="input-frame" type="text" defaultValue={'Interplug'} disabled/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">発送者 <i className="import">*</i></div>
|
||||
<div className="data-input">
|
||||
<input className="input-frame" type="text" defaultValue={'HG@interplug2.co.kr'} disabled/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">受信者 <i className="import">*</i></div>
|
||||
<div className="data-input">
|
||||
@ -63,7 +63,14 @@ export default function SaleSubmitPop() {
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">内容 <i className="import">*</i></div>
|
||||
<div className="data-input">
|
||||
<textarea className="textarea-form" name="" id="" defaultValue={'漏れの兆候があるため、正確な点検が必要です.'} disabled></textarea>
|
||||
<div className="submit-content">
|
||||
<p style={{fontSize: "13px", fontWeight: "400", color: "#2e3a59", marginBottom: "15px"}}>HANASYS現地調査アプリを使用した現地調査結果が送信されました。</p>
|
||||
<p style={{fontSize: "13px", fontWeight: "400", color: "#2e3a59", marginBottom: '3px'}}>-担当者名: <span style={{color: "#417DDC"}}>KimHG</span></p>
|
||||
<p style={{fontSize: "13px", fontWeight: "400", color: "#2e3a59", marginBottom: '3px'}}>-販売店名:<span style={{color: "#417DDC"}}>Interplug (Iner01)</span></p>
|
||||
<p style={{fontSize: "13px", fontWeight: "400", color: "#2e3a59", marginBottom: "15px"}}>-施工店名: <span style={{color: "#417DDC"}}>Interplug2</span></p>
|
||||
<p><button style={{fontSize: "13px", fontWeight: "400", color: "#1259CB", marginBottom: "5px", textDecoration: "underline"}}>現地調査結果PDFダウンロード</button></p>
|
||||
<p style={{fontSize: "13px", fontWeight: "400", color: "#2e3a59"}}>※リンクをクリックしてローカル調査結果PDFをダウンロードできます。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -179,15 +179,22 @@ export default function SaleRoofDetailForm02(){
|
||||
<label htmlFor="ra13">なし</label>
|
||||
</div>
|
||||
</div>
|
||||
{/* 2025-05-28 st */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">路地板の種類</div>
|
||||
<div className="data-input mb5">
|
||||
<input type="text" className="input-frame" defaultValue={'材/防水材/屋根基礎/垂木'} disabled/>
|
||||
<div className="radio-form-box mb10">
|
||||
<input type="radio" name="radio07" id="ra14" defaultChecked disabled/>
|
||||
<label htmlFor="ra14">屋根材 > ルーフィング > 野地板 > 垂木</label>
|
||||
</div>
|
||||
<div className="radio-form-box mb10">
|
||||
<input type="radio" name="radio07" id="ra15" disabled/>
|
||||
<label htmlFor="ra15">その他 (直接入力)</label>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<input type="text" className="input-frame" defaultValue={''} disabled/>
|
||||
<input type="text" className="input-frame" disabled defaultValue={''}/>
|
||||
</div>
|
||||
</div>
|
||||
{/* 2025-05-28 ed */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">屋根製品名 設置可否確認</div>
|
||||
<div className="data-input mb5">
|
||||
|
||||
@ -209,21 +209,22 @@ export default function SaleRoofForm02(){
|
||||
<label htmlFor="ra13">なし</label>
|
||||
</div>
|
||||
</div>
|
||||
{/* 2025-05-28 st */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit red-f">路地板の種類</div>
|
||||
<div className="data-input mb5">
|
||||
<select className="select-form" name="" id="">
|
||||
<option value="">材/防水材/屋根基礎/垂木</option>
|
||||
<option value="">材/防水材/屋根基礎/垂木</option>
|
||||
<option value="">材/防水材/屋根基礎/垂木</option>
|
||||
<option value="">材/防水材/屋根基礎/垂木</option>
|
||||
<option value="">材/防水材/屋根基礎/垂木</option>
|
||||
</select>
|
||||
<div className="radio-form-box mb10">
|
||||
<input type="radio" name="radio07" id="ra14" />
|
||||
<label htmlFor="ra14">屋根材 > ルーフィング > 野地板 > 垂木</label>
|
||||
</div>
|
||||
<div className="radio-form-box mb10">
|
||||
<input type="radio" name="radio07" id="ra15" />
|
||||
<label htmlFor="ra15">その他 (直接入力)</label>
|
||||
</div>
|
||||
<div className="data-input">
|
||||
<input type="text" className="input-frame" defaultValue={''} disabled/>
|
||||
<input type="text" className="input-frame" disabled defaultValue={''}/>
|
||||
</div>
|
||||
</div>
|
||||
{/* 2025-05-28 ed */}
|
||||
<div className="data-input-form-bx">
|
||||
<div className="data-input-form-tit">屋根製品名 設置可否確認</div>
|
||||
<div className="data-input mb5">
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
@use "../abstracts" as *;
|
||||
|
||||
// 조사매물
|
||||
.pdf-contents{
|
||||
padding: 0 20px;
|
||||
border-top: 1px solid #ececec;
|
||||
@ -54,4 +55,84 @@
|
||||
@include defaultFont($font-s-11, $font-w-400, #FF5656);
|
||||
border: 1px solid $black-1010;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
// 지붕재 적합성
|
||||
.pdf-intro-page{
|
||||
height: 1080px;
|
||||
padding: 80px 40px ;
|
||||
background-color: #fff;
|
||||
}
|
||||
.pdf-intro-tit-wrap{
|
||||
text-align: center;
|
||||
.pdf-intro-tit{
|
||||
@include defaultFont($font-s-24, $font-w-500, #101010);
|
||||
}
|
||||
.pdf-intro-date{
|
||||
@include defaultFont($font-s-22, $font-w-400, #101010);
|
||||
}
|
||||
}
|
||||
.pdf-intro-cont-wrap{
|
||||
margin-top: 70px;
|
||||
p{
|
||||
@include defaultFont($font-s-18, $font-w-400, #101010);
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-table-content{
|
||||
padding: 20px;
|
||||
}
|
||||
.pdf-table-grid-wrap{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px 20px;
|
||||
}
|
||||
.pdf-table-card{
|
||||
.pdf-table-tit-wrap{
|
||||
margin-bottom: 5px;
|
||||
span{
|
||||
position: relative;
|
||||
@include defaultFont($font-s-13, $font-w-500, #101010);
|
||||
padding: 0 10px;
|
||||
&:first-child{
|
||||
padding-left: 0;
|
||||
}
|
||||
&:last-child{
|
||||
padding-right: 0;
|
||||
&::before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background-color: #101010;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pdf-roof-table{
|
||||
table{
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
th{
|
||||
padding: 0px 5px;
|
||||
text-align: center;
|
||||
@include defaultFont($font-s-11, $font-w-500, #fff);
|
||||
background-color: #18B490;
|
||||
border: 1px solid #18B490;
|
||||
}
|
||||
td{
|
||||
padding: 0px 5px;
|
||||
@include defaultFont($font-s-11, $font-w-300, #101010);
|
||||
border: 1px solid #CBCBCB;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -112,4 +112,13 @@
|
||||
padding: 10px;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
}
|
||||
}
|
||||
|
||||
// 제출팝업
|
||||
.submit-content{
|
||||
padding: 15px 10px;
|
||||
border: 1px solid #D5DEE8;
|
||||
border-radius: 4px;
|
||||
background-color: #f5f6fa;
|
||||
cursor: default;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user