qcast3/onsitesurvey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'feat: 지붕재적합성 선택데이터 상세팝업 및 pdf용 페이지 표출 연결' (#54) from feature/suitable into dev

Browse Source 
Reviewed-on: #54
This commit is contained in:
swyoo 2025-06-02 15:14:58 +09:00
commit cd077d6cea
12 changed files with 225 additions and 725 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
package-lock.json generated
View File

@ -13,6 +13,7 @@
"@tanstack/react-query-devtools": "^5.71.0", "@tanstack/react-query-devtools": "^5.71.0",
"@types/nodemailer": "^6.4.17", "@types/nodemailer": "^6.4.17",
"axios": "^1.8.4", "axios": "^1.8.4",
"crypto-js": "^4.2.0",
"env-cmd": "^10.1.0", "env-cmd": "^10.1.0",
"iron-session": "^8.0.4", "iron-session": "^8.0.4",
"lucide": "^0.503.0", "lucide": "^0.503.0",
@ -30,6 +31,7 @@
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4", "@tailwindcss/postcss": "^4",
"@types/crypto-js": "^4.2.2",
"@types/mysql": "^2.15.27", "@types/mysql": "^2.15.27",
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^19", "@types/react": "^19",
@ -1946,6 +1948,13 @@
"integrity": "sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ==", "integrity": "sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/crypto-js": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.2.tgz",
"integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/mysql": { "node_modules/@types/mysql": {
"version": "2.15.27", "version": "2.15.27",
"resolved": "https://registry.npmjs.org/@types/mysql/-/mysql-2.15.27.tgz", "resolved": "https://registry.npmjs.org/@types/mysql/-/mysql-2.15.27.tgz",
@ -2396,6 +2405,12 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/crypto-js": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
"license": "MIT"
},
"node_modules/css-line-break": { "node_modules/css-line-break": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz", "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",

2
package.json
View File

@ -20,6 +20,7 @@
"@tanstack/react-query-devtools": "^5.71.0", "@tanstack/react-query-devtools": "^5.71.0",
"@types/nodemailer": "^6.4.17", "@types/nodemailer": "^6.4.17",
"axios": "^1.8.4", "axios": "^1.8.4",
"crypto-js": "^4.2.0",
"env-cmd": "^10.1.0", "env-cmd": "^10.1.0",
"iron-session": "^8.0.4", "iron-session": "^8.0.4",
"lucide": "^0.503.0", "lucide": "^0.503.0",
@ -37,6 +38,7 @@
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4", "@tailwindcss/postcss": "^4",
"@types/crypto-js": "^4.2.2",
"@types/mysql": "^2.15.27", "@types/mysql": "^2.15.27",
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^19", "@types/react": "^19",

711
src/components/pdf/SuitableDownloadPdf.tsx
View File

@ -1,12 +1,21 @@
'use client' 'use client'
import { useRef } from 'react' import { useEffect, useRef, useState } from 'react'
import generatePDF, { Margin, Resolution } from 'react-to-pdf' import generatePDF, { Margin, Options, Resolution, usePDF } from 'react-to-pdf'
import { useSuitable } from '@/hooks/useSuitable'
import { useSuitableStore } from '@/store/useSuitableStore'
import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
export default function SuitableDownloadPdf() { export default function SuitableDownloadPdf() {
const [fileName, setFileName] = useState<string[]>([])
const [createTime, setCreateTime] = useState('')
const targetRef = useRef<HTMLDivElement>(null) const targetRef = useRef<HTMLDivElement>(null)
const { toCodeName, toSuitableDetail, selectedSuitables, isSelectedSuitablesLoading } = useSuitable()
const { selectedCategory, suitableCommCode, selectedItemsSearching, setSelectedItemsSearching } = useSuitableStore()
const handleDownPdf = () => { const handleDownPdf = () => {
const options = { const options: Options = {
filename: `${fileName.join('_')}.pdf`,
method: 'open' as const, method: 'open' as const,
resolution: Resolution.HIGH, resolution: Resolution.HIGH,
page: { page: {
@ -31,14 +40,41 @@ export default function SuitableDownloadPdf() {
generatePDF(targetRef, options) generatePDF(targetRef, options)
// generatePDF(targetRef, { filename: 'page.pdf' }) // generatePDF(targetRef, { filename: 'page.pdf' })
} }
const formatDateString = () => {
const now = new Date()
const year = now.getFullYear()
const month = now.getMonth() + 1
const day = now.getDate()
const hours = now.getHours()
const minutes = now.getMinutes()
return `${year}年${month}月${day}日 ${hours}:${minutes.toString().padStart(2, '0')}`
}
useEffect(() => {
setCreateTime(formatDateString())
setFileName([
`(${suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.find((category) => category.code === selectedCategory)?.codeJp})`,
'屋根材適合表',
])
if (!selectedItemsSearching) {
setSelectedItemsSearching(true)
}
}, [])
if (!selectedCategory) return <div>잘못된 접근입니다.</div>
if (isSelectedSuitablesLoading) return <div>Loading...</div>
return ( return (
<> <>
{/* <button onClick={() => handleDownPdf()}>PDFダウンロード</button> */}
<div className="pdf-table-wrap" ref={targetRef}> <div className="pdf-table-wrap" ref={targetRef}>
<div className="pdf-intro-page"> <div className="pdf-intro-page">
<div className="pdf-intro-tit-wrap"> <div className="pdf-intro-tit-wrap">
<div className="pdf-intro-tit mb20">ハンファジャパン株式会社</div> <div className="pdf-intro-tit mb20">ハンファジャパン株式会社</div>
<div className="pdf-intro-tit mb20">(瓦) 屋根材適合表</div> <div className="pdf-intro-tit mb20">{fileName.join(' ')}</div>
<div className="pdf-intro-date">2025年4月30日 10:40</div> <div className="pdf-intro-date">{createTime}</div>
</div> </div>
<div className="pdf-intro-cont-wrap"> <div className="pdf-intro-cont-wrap">
<p>本適合表は参考資料としてご使用下さい。</p> <p>本適合表は参考資料としてご使用下さい。</p>
@ -49,636 +85,43 @@ export default function SuitableDownloadPdf() {
</div> </div>
<div className="pdf-table-content"> <div className="pdf-table-content">
<div className="pdf-table-grid-wrap"> <div className="pdf-table-grid-wrap">
<div className="pdf-table-card"> {selectedSuitables?.map((item: Suitable) => (
<div className="pdf-table-tit-wrap"> <div className="pdf-table-card" key={item.id}>
<span>屋根材製品名</span> <div className="pdf-table-tit-wrap">
<span>メーカー名</span> <span>{item.productName}</span>
<span>屋根材の種類</span> <span>{toCodeName(SUITABLE_HEAD_CODE.MANU_FT_CD, item.manuFtCd)}</span>
<span>{toCodeName(SUITABLE_HEAD_CODE.ROOF_MT_CD, item.roofMtCd)}</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>
{toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
<tr key={subItem.id}>
<td>{toCodeName(SUITABLE_HEAD_CODE.ROOF_SH_CD, item.roofShCd)}</td>
<td>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</td>
<td>{subItem.trestleManufacturerProductName}</td>
<td>{subItem.memo}</td>
</tr>
))}
</tbody>
</table>
</div>
</div> </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> </div>
</div> </div>

100
src/components/popup/SuitableDetailPopup.tsx
View File

@ -2,17 +2,18 @@
import Image from 'next/image' import Image from 'next/image'
import { useCallback, useEffect, useState } from 'react' import { useCallback, useEffect, useState } from 'react'
import { usePopupController } from '@/store/popupController'
import SuitableDetailPopupButton from './SuitableDetailPopupButton' import SuitableDetailPopupButton from './SuitableDetailPopupButton'
import { useSuitable } from '@/hooks/useSuitable' import { useSuitable } from '@/hooks/useSuitable'
import { usePopupController } from '@/store/popupController'
import { useSuitableStore } from '@/store/useSuitableStore'
import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable' import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
export default function SuitableDetailPopup() { export default function SuitableDetailPopup() {
const popupController = usePopupController() const popupController = usePopupController()
const { getSelectedItemsData, toCodeName, toSuitableDetail, suitableCheckIcon, suitableCheckMemo } = useSuitable() const { toCodeName, toSuitableDetail, suitableCheckIcon, suitableCheckMemo, selectedSuitables, isSelectedSuitablesLoading } = useSuitable()
const { setSelectedItemsSearching } = useSuitableStore()
const [openItems, setOpenItems] = useState<Set<number>>(new Set()) const [openItems, setOpenItems] = useState<Set<number>>(new Set())
const [suitableDetails, setSuitableDetails] = useState<Suitable[]>([])
// 아이템 열기/닫기 // 아이템 열기/닫기
const toggleItemOpen = useCallback((itemId: number) => { const toggleItemOpen = useCallback((itemId: number) => {
@ -24,8 +25,7 @@ export default function SuitableDetailPopup() {
}, []) }, [])
useEffect(() => { useEffect(() => {
// TODO: 로딩 처리 필요 setSelectedItemsSearching(true)
getSelectedItemsData().then((data) => setSuitableDetails(data))
}, []) }, [])
return ( return (
@ -45,56 +45,60 @@ export default function SuitableDetailPopup() {
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="compliance-check-pop-wrap"> <div className="compliance-check-pop-wrap">
{suitableDetails.map((item: Suitable) => ( {isSelectedSuitablesLoading ? (
<div className={`compliance-check-bx ${openItems.has(item.id) ? 'act' : ''}`} key={item.id}> <div>Loading...</div>
<div className="check-name-wrap"> ) : (
<div className="check-name">{item.productName}</div> selectedSuitables?.map((item: Suitable) => (
<div className="check-name-btn"> <div className={`compliance-check-bx ${openItems.has(item.id) ? 'act' : ''}`} key={item.id}>
<button className="bx-btn" onClick={() => toggleItemOpen(item.id)}></button> <div className="check-name-wrap">
<div className="check-name">{item.productName}</div>
<div className="check-name-btn">
<button className="bx-btn" onClick={() => toggleItemOpen(item.id)}></button>
</div>
</div> </div>
</div> <div className="compliance-check-pop-contents">
<div className="compliance-check-pop-contents"> <div className="check-pop-data-wrap">
<div className="check-pop-data-wrap"> <div className="check-pop-data-tit">屋根技研 支持瓦</div>
<div className="check-pop-data-tit">屋根技研 支持瓦</div> <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.MANU_FT_CD, item.manuFtCd)}</div>
<div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.MANU_FT_CD, item.manuFtCd)}</div> </div>
</div> <div className="check-pop-data-wrap">
<div className="check-pop-data-wrap"> <div className="check-pop-data-tit">屋根材</div>
<div className="check-pop-data-tit">屋根材</div> <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_MT_CD, item.roofMtCd)}</div>
<div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_MT_CD, item.roofMtCd)}</div> </div>
</div> <div className="check-pop-data-wrap">
<div className="check-pop-data-wrap"> <div className="check-pop-data-tit">金具タイプ</div>
<div className="check-pop-data-tit">金具タイプ</div> <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_SH_CD, item.roofShCd)}</div>
<div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_SH_CD, item.roofShCd)}</div> </div>
</div> <div className="check-pop-data-table-wrap">
<div className="check-pop-data-table-wrap"> {toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
{toSuitableDetail(item.detail).map((subItem: SuitableDetail) => ( <div className="check-pop-data-table" key={subItem.id}>
<div className="check-pop-data-table" key={subItem.id}> <div className="pop-data-table-head">
<div className="pop-data-table-head"> <div className="pop-data-table-head-name">{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</div>
<div className="pop-data-table-head-name">{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</div> <div className="pop-data-table-head-icon">
<div className="pop-data-table-head-icon">
<div className="compliance-icon">
<Image src={suitableCheckIcon(subItem.trestleManufacturerProductName)} width={22} height={22} alt="" />
</div>
{subItem.memo && (
<div className="compliance-icon"> <div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image> <Image src={suitableCheckIcon(subItem.trestleManufacturerProductName)} width={22} height={22} alt="" />
</div> </div>
)} {subItem.memo && (
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
</div>
)}
</div>
</div> </div>
<div className="pop-data-table-body">{suitableCheckMemo(subItem.trestleManufacturerProductName)}</div>
{subItem.memo && (
<div className="pop-data-table-footer">
<div className="pop-data-table-footer-unit">備考</div>
<div className="pop-data-table-footer-data">{subItem.memo}</div>
</div>
)}
</div> </div>
<div className="pop-data-table-body">{suitableCheckMemo(subItem.trestleManufacturerProductName)}</div> ))}
{subItem.memo && ( </div>
<div className="pop-data-table-footer">
<div className="pop-data-table-footer-unit">備考</div>
<div className="pop-data-table-footer-data">{subItem.memo}</div>
</div>
)}
</div>
))}
</div> </div>
</div> </div>
</div> ))
))} )}
</div> </div>
<SuitableDetailPopupButton /> <SuitableDetailPopupButton />
</div> </div>

21
src/components/popup/SuitableDetailPopupButton.tsx
View File

@ -7,26 +7,29 @@ export default function SuitableDetailPopupButton() {
const popupController = usePopupController() const popupController = usePopupController()
const router = useRouter() const router = useRouter()
const handleClosePopup = () => {
popupController.setSuitableDetailPopup(false)
}
const handleRedirectPage = (path: string) => {
handleClosePopup()
router.push(path)
}
return ( return (
<div className="btn-flex-wrap com"> <div className="btn-flex-wrap com">
<div className="btn-bx"> <div className="btn-bx">
<button className="btn-frame n-blue icon" onClick={() => popupController.setSuitableDetailPopup(false)}> <button className="btn-frame n-blue icon" onClick={handleClosePopup}>
閉じる<i className="btn-arr"></i> 閉じる<i className="btn-arr"></i>
</button> </button>
</div> </div>
<div className="btn-bx"> <div className="btn-bx">
<button className="btn-frame red icon"> <button className="btn-frame red icon" onClick={() => handleRedirectPage('/pdf/suitable')}>
ウンロード<i className="btn-arr"></i> ウンロード<i className="btn-arr"></i>
</button> </button>
</div> </div>
<div className="btn-bx"> <div className="btn-bx">
<button <button className="btn-frame n-blue icon" onClick={() => handleRedirectPage('/inquiry/regist')}>
className="btn-frame n-blue icon"
onClick={async () => {
await popupController.setSuitableDetailPopup(false)
router.push('/inquiry/regist')
}}
>
1：1お問い合わせ<i className="btn-arr"></i> 1：1お問い合わせ<i className="btn-arr"></i>
</button> </button>
</div> </div>

12
src/components/suitable/Suitable.tsx
View File

@ -1,23 +1,13 @@
'use client' 'use client'
import Image from 'next/image' import Image from 'next/image'
import { useEffect, useState } from 'react' import { useState } from 'react'
import SuitableList from './SuitableList' import SuitableList from './SuitableList'
import SuitableSearch from './SuitableSearch' import SuitableSearch from './SuitableSearch'
import { useSuitable } from '@/hooks/useSuitable'
export default function Suitable() { export default function Suitable() {
const [reference, setReference] = useState(true) const [reference, setReference] = useState(true)
const { getSuitableCommCode, clearSuitableSearch } = useSuitable()
useEffect(() => {
getSuitableCommCode()
return () => {
clearSuitableSearch({ items: true, category: true, keyword: true })
}
}, [])
return ( return (
<div className="border-frame"> <div className="border-frame">
<SuitableSearch /> <SuitableSearch />

16
src/components/suitable/SuitableButton.tsx
View File

@ -1,12 +1,14 @@
'use client' 'use client'
import { useRouter } from 'next/navigation'
import { usePopupController } from '@/store/popupController' import { usePopupController } from '@/store/popupController'
import { useSuitable } from '@/hooks/useSuitable' import { useSuitable } from '@/hooks/useSuitable'
import { useSuitableStore } from '@/store/useSuitableStore' import { useSuitableStore } from '@/store/useSuitableStore'
export default function SuitableButton() { export default function SuitableButton() {
const popupController = usePopupController() const popupController = usePopupController()
const { getSuitableIds, clearSuitableSearch } = useSuitable() const router = useRouter()
const { getSuitableIds, clearSuitableStore } = useSuitable()
const { selectedItems, addAllSelectedItem } = useSuitableStore() const { selectedItems, addAllSelectedItem } = useSuitableStore()
const handleSelectAll = async () => { const handleSelectAll = async () => {
@ -21,6 +23,14 @@ export default function SuitableButton() {
popupController.setSuitableDetailPopup(true) popupController.setSuitableDetailPopup(true)
} }
const handleRedirectPdfDownload = () => {
if (selectedItems.size === 0) {
alert('屋根材を選択してください。')
return
}
router.push('/pdf/suitable')
}
return ( return (
<div className="float-btn-wrap"> <div className="float-btn-wrap">
<div className="btn-flex-wrap com"> <div className="btn-flex-wrap com">
@ -30,7 +40,7 @@ export default function SuitableButton() {
全選択<i className="btn-arr"></i> 全選択<i className="btn-arr"></i>
</button> </button>
) : ( ) : (
<button className="btn-frame n-blue icon" onClick={() => clearSuitableSearch({ items: true })}> <button className="btn-frame n-blue icon" onClick={() => clearSuitableStore({ items: true })}>
全て解除<i className="btn-arr"></i> 全て解除<i className="btn-arr"></i>
</button> </button>
)} )}
@ -41,7 +51,7 @@ export default function SuitableButton() {
</button> </button>
</div> </div>
<div className="btn-bx"> <div className="btn-bx">
<button className="btn-frame n-blue icon"> <button className="btn-frame n-blue icon" onClick={handleRedirectPdfDownload}>
選択ダウンロード<i className="btn-arr"></i> 選択ダウンロード<i className="btn-arr"></i>
</button> </button>
</div> </div>

3
src/components/suitable/SuitableList.tsx
View File

@ -20,7 +20,7 @@ export default function SuitableList() {
isLoading, isLoading,
suitableCheckIcon, suitableCheckIcon,
} = useSuitable() } = useSuitable()
const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore() const { selectedItems, addSelectedItem, removeSelectedItem, setSelectedItemsSearching } = useSuitableStore()
const [openItems, setOpenItems] = useState<Set<number>>(new Set()) const [openItems, setOpenItems] = useState<Set<number>>(new Set())
const observerTarget = useRef<HTMLDivElement>(null) const observerTarget = useRef<HTMLDivElement>(null)
@ -48,6 +48,7 @@ export default function SuitableList() {
// 아이템 클릭 // 아이템 클릭
const handleItemClick = useCallback( const handleItemClick = useCallback(
(mainId: number, detailId?: number, detailIds?: Set<number>): void => { (mainId: number, detailId?: number, detailIds?: Set<number>): void => {
setSelectedItemsSearching(false)
isItemSelected(mainId, detailId) ? removeSelectedItem(mainId, detailId) : addSelectedItem(mainId, detailId, detailIds) isItemSelected(mainId, detailId) ? removeSelectedItem(mainId, detailId) : addSelectedItem(mainId, detailId, detailIds)
}, },
[isItemSelected, addSelectedItem, removeSelectedItem], [isItemSelected, addSelectedItem, removeSelectedItem],

10
src/components/suitable/SuitableSearch.tsx
View File

@ -9,7 +9,7 @@ import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
export default function SuitableSearch() { export default function SuitableSearch() {
const [searchValue, setSearchValue] = useState('') const [searchValue, setSearchValue] = useState('')
const { getSuitableCommCode, clearSuitableSearch } = useSuitable() const { getSuitableCommCode, clearSuitableStore } = useSuitable()
const { suitableCommCode, selectedCategory, setSelectedCategory, setSearchKeyword } = useSuitableStore() const { suitableCommCode, selectedCategory, setSelectedCategory, setSearchKeyword } = useSuitableStore()
const handleInputChange = (value: string) => { const handleInputChange = (value: string) => {
@ -31,14 +31,12 @@ export default function SuitableSearch() {
const handleInputClear = () => { const handleInputClear = () => {
setSearchValue('') setSearchValue('')
clearSuitableSearch({ items: true, keyword: true }) clearSuitableStore({ items: true, keyword: true })
} }
useEffect(() => { useEffect(() => {
clearSuitableStore({ items: true, category: true, keyword: true })
getSuitableCommCode() getSuitableCommCode()
return () => {
clearSuitableSearch({ items: true, category: true, keyword: true })
}
}, []) }, [])
return ( return (
@ -46,7 +44,7 @@ export default function SuitableSearch() {
<div className="sale-form-bx"> <div className="sale-form-bx">
<select className="select-form" name="" id="" value={selectedCategory || ''} onChange={(e) => setSelectedCategory(e.target.value)}> <select className="select-form" name="" id="" value={selectedCategory || ''} onChange={(e) => setSelectedCategory(e.target.value)}>
<option value="">屋根材を選択してください.</option> <option value="">屋根材を選択してください.</option>
{suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATERIAL_GROUP)?.map((category: CommCode, index: number) => ( {suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.map((category: CommCode, index: number) => (
<option key={index} value={category.code}> <option key={index} value={category.code}>
{category.codeJp} {category.codeJp}
</option> </option>

48
src/hooks/useSuitable.ts
View File

@ -1,4 +1,5 @@
import { useInfiniteQuery } from '@tanstack/react-query' import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
import { SHA256 } from 'crypto-js'
import { transformObjectKeys } from '@/libs/axios' import { transformObjectKeys } from '@/libs/axios'
import { useSuitableStore } from '@/store/useSuitableStore' import { useSuitableStore } from '@/store/useSuitableStore'
import { useAxios } from './useAxios' import { useAxios } from './useAxios'
@ -18,6 +19,7 @@ export function useSuitable() {
clearSearchKeyword, clearSearchKeyword,
selectedItems, selectedItems,
clearSelectedItems, clearSelectedItems,
selectedItemsSearching,
} = useSuitableStore() } = useSuitableStore()
const getSuitables = async ({ const getSuitables = async ({
@ -85,6 +87,7 @@ export function useSuitable() {
} }
const toSuitableDetail = (suitableDetailString: string): SuitableDetail[] => { const toSuitableDetail = (suitableDetailString: string): SuitableDetail[] => {
if (!suitableDetailString) return []
try { try {
const suitableDetailArray = transformObjectKeys(JSON.parse(suitableDetailString)) as SuitableDetail[] const suitableDetailArray = transformObjectKeys(JSON.parse(suitableDetailString)) as SuitableDetail[]
if (!Array.isArray(suitableDetailArray)) { if (!Array.isArray(suitableDetailArray)) {
@ -118,7 +121,7 @@ export function useSuitable() {
queryKey: ['suitables', 'list', selectedCategory, searchKeyword], queryKey: ['suitables', 'list', selectedCategory, searchKeyword],
queryFn: async (context) => { queryFn: async (context) => {
const pageParam = context.pageParam as number const pageParam = context.pageParam as number
if (pageParam === 1) clearSuitableSearch({ items: true }) if (pageParam === 1) clearSuitableStore({ items: true })
return await getSuitables({ return await getSuitables({
pageNumber: pageParam, pageNumber: pageParam,
...(selectedCategory && { category: selectedCategory }), ...(selectedCategory && { category: selectedCategory }),
@ -144,32 +147,54 @@ export function useSuitable() {
return { ids: ids.join(','), detailIds: detailIds.length > 0 ? detailIds.join(',') : '' } return { ids: ids.join(','), detailIds: detailIds.length > 0 ? detailIds.join(',') : '' }
} }
const getSelectedItemsData = async (): Promise<Suitable[]> => { const getSelectedItemsHash = (): string => {
const { ids, detailIds } = serializeSelectedItems() const entries = Array.from(selectedItems.entries())
return await getSuitableDetails(ids, detailIds) .map(([key, value]) => `${key}:${Array.from(value).sort().join(',')}`)
.sort()
.join('|')
return SHA256(entries).toString()
} }
const clearSuitableSearch = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => { const {
data: selectedSuitables,
isLoading: isSelectedSuitablesLoading,
refetch: refetchSelectedSuitables,
} = useQuery<Suitable[]>({
queryKey: ['suitables', 'selectedItems', getSelectedItemsHash(), selectedItemsSearching],
queryFn: async () => {
const { ids, detailIds } = serializeSelectedItems()
return await getSuitableDetails(ids, detailIds)
},
staleTime: Infinity,
gcTime: Infinity,
enabled: selectedItemsSearching,
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
})
const clearSuitableStore = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => {
if (items) clearSelectedItems() if (items) clearSelectedItems()
if (category) clearSelectedCategory() if (category) clearSelectedCategory()
if (keyword) clearSearchKeyword() if (keyword) clearSearchKeyword()
} }
// TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요 // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, -, ー 데이터 관리 필요
const suitableCheckIcon = (value: string): string => { const suitableCheckIcon = (value: string): string => {
const iconMap: Record<string, string> = { const iconMap: Record<string, string> = {
'×': '/assets/images/sub/compliance_x_icon.svg', '×': '/assets/images/sub/compliance_x_icon.svg',
'-': '/assets/images/sub/compliance_quest_icon.svg',
'ー': '/assets/images/sub/compliance_quest_icon.svg', 'ー': '/assets/images/sub/compliance_quest_icon.svg',
default: '/assets/images/sub/compliance_check_icon.svg', default: '/assets/images/sub/compliance_check_icon.svg',
} }
return iconMap[value] || iconMap.default return iconMap[value] || iconMap.default
} }
// TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ○, ×, ー 데이터 관리 필요 // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ○, ×, -, ー 데이터 관리 필요
const suitableCheckMemo = (value: string): string => { const suitableCheckMemo = (value: string): string => {
if (value === '○') return '設置可' if (value === '○') return '設置可'
if (value === '×') return '設置不可' if (value === '×') return '設置不可'
if (value === 'ー') return 'お問い合わせください' if (value === '-' || value === 'ー') return 'お問い合わせください'
return `${value}で設置可` return `${value}で設置可`
} }
@ -186,8 +211,9 @@ export function useSuitable() {
hasNextPage, hasNextPage,
isFetchingNextPage, isFetchingNextPage,
isLoading, isLoading,
getSelectedItemsData, selectedSuitables,
clearSuitableSearch, isSelectedSuitablesLoading,
clearSuitableStore,
suitableCheckIcon, suitableCheckIcon,
suitableCheckMemo, suitableCheckMemo,
} }

10
src/store/useSuitableStore.ts
View File

@ -35,6 +35,10 @@ interface SuitableState {
removeSelectedItem: (mainId: number, detailId?: number) => void removeSelectedItem: (mainId: number, detailId?: number) => void
/* 선택된 아이템 모두 제거 */ /* 선택된 아이템 모두 제거 */
clearSelectedItems: () => void clearSelectedItems: () => void
/* 선택된 아이템 검색 상태 */
selectedItemsSearching: boolean
/* 선택된 아이템 검색 상태 설정 */
setSelectedItemsSearching: (value: boolean) => void
} }
export const useSuitableStore = create<SuitableState>((set) => ({ export const useSuitableStore = create<SuitableState>((set) => ({
@ -43,6 +47,7 @@ export const useSuitableStore = create<SuitableState>((set) => ({
selectedCategory: '' as string, selectedCategory: '' as string,
searchKeyword: '' as string, searchKeyword: '' as string,
selectedItems: new Map() as Map<number, Set<number>>, selectedItems: new Map() as Map<number, Set<number>>,
selectedItemsSearching: false as boolean,
/* 공통코드 설정 */ /* 공통코드 설정 */
setSuitableCommCode: (headCode: string, commCode: CommCode[]) => setSuitableCommCode: (headCode: string, commCode: CommCode[]) =>
@ -84,7 +89,7 @@ export const useSuitableStore = create<SuitableState>((set) => ({
set(() => { set(() => {
const newSelectedItems = new Map() const newSelectedItems = new Map()
suitableIds.forEach((suitableId) => { suitableIds.forEach((suitableId) => {
newSelectedItems.set(suitableId.id, new Set(suitableId.detailId.split(',').map(Number))) newSelectedItems.set(suitableId.id, new Set(suitableId.detailId?.split(',').map(Number)))
}) })
return { selectedItems: newSelectedItems } return { selectedItems: newSelectedItems }
}) })
@ -114,4 +119,7 @@ export const useSuitableStore = create<SuitableState>((set) => ({
/* 선택된 아이템 모두 제거 */ /* 선택된 아이템 모두 제거 */
clearSelectedItems: () => set({ selectedItems: new Map() as Map<number, Set<number>> }), clearSelectedItems: () => set({ selectedItems: new Map() as Map<number, Set<number>> }),
/* 선택된 아이템 검색 상태 설정 */
setSelectedItemsSearching: (value: boolean) => set({ selectedItemsSearching: value }),
})) }))

2
src/types/Suitable.ts
View File

@ -2,7 +2,7 @@ export enum SUITABLE_HEAD_CODE {
/* 지붕재 제조사명 */ /* 지붕재 제조사명 */
MANU_FT_CD = 'MANU_FT_CD', MANU_FT_CD = 'MANU_FT_CD',
/* 지붕재 그룹 종류 */ /* 지붕재 그룹 종류 */
ROOF_MATERIAL_GROUP = 'ROOF_MATL_GRP_CD', ROOF_MATL_GRP_CD = 'ROOF_MATL_GRP_CD',
/* 지붕재 종류 */ /* 지붕재 종류 */
ROOF_MT_CD = 'ROOF_MT_CD', ROOF_MT_CD = 'ROOF_MT_CD',
/* 마운팅 브래킷 종류 */ /* 마운팅 브래킷 종류 */