pdf 생성 및 페이지 수정

This commit is contained in:
김창수 2025-05-28 16:42:38 +09:00
parent 9ca1d76fdf
commit 3fc2dd8664
11 changed files with 867 additions and 54 deletions

690
src/app/pdftable/page.tsx Normal file
View 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">2025430 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> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></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> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></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> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></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> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></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> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></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> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></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> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></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> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></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> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></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> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</>
)
}

View File

@ -18,7 +18,7 @@ export default function SaleDetailPage(){
<Footer/>
<button className="top-btn"></button>
</div>
<SaleSubmitPop/>
{/* <SaleSubmitPop/> */}
</>
)
}

View File

@ -17,7 +17,7 @@ export default function SaleEditPage() {
<button className="top-btn"></button>
</div>
{/* 주소 검색 팝업 */}
<SaleZipCodePop/>
{/* <SaleZipCodePop/> */}
</>
)
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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"> &gt; &gt; &gt; </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">

View File

@ -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"> &gt; &gt; &gt; </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">

View File

@ -1,5 +1,6 @@
@use "../abstracts" as *;
// 조사매물
.pdf-contents{
padding: 0 20px;
border-top: 1px solid #ececec;
@ -55,3 +56,83 @@
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;
}
}
}

View File

@ -113,3 +113,12 @@
@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;
}