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

feat: 지붕재 적합성 범례 default 열기, 지붕재 적합성 버튼 추가

Browse Source
This commit is contained in:
Daseul Kim 2025-05-15 17:56:56 +09:00
parent b8ec659ea2
commit 519e2ec195
3 changed files with 61 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@ import type { CommCode } from '@/types/CommCode'
import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
export default function Suitable() {
const [reference, setReference] = useState(false)
const [reference, setReference] = useState(true)
const { getSuitableCommCode, refetchBySearch } = useSuitable()
const { suitableCommCode, selectedCategory, setSelectedCategory, searchValue, setSearchValue, setIsSearch, clearSelectedItems } = useSuitableStore()

25
src/components/suitable/SuitableButton.tsx Normal file
View File

@ -0,0 +1,25 @@
'use client'
export default function SuitableButton() {
return (
<div className="float-btn-wrap">
<div className="btn-flex-wrap com">
<div className="btn-bx">
<button className="btn-frame n-blue icon">
全選択<i className="btn-arr"></i>
</button>
</div>
<div className="btn-bx">
<button className="btn-frame red icon">
詳細を見る<i className="btn-arr"></i>
</button>
</div>
<div className="btn-bx">
<button className="btn-frame n-blue icon">
選択ダウンロード<i className="btn-arr"></i>
</button>
</div>
</div>
</div>
)
}

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

@ -2,6 +2,7 @@
import Image from 'next/image'
import { useState } from 'react'
import SuitableButton from './SuitableButton'
import SuitableNoData from './SuitableNoData'
import { useSuitable } from '@/hooks/useSuitable'
import { useSuitableStore } from '@/store/useSuitableStore'
@ -52,39 +53,42 @@ export default function SuitableList() {
{isSearchLoading ? (
<div>Loading...</div>
) : suitableSearchResults && suitableSearchResults.suitable.length > 0 ? (
suitableSearchResults.suitable.map((item: SuitableMain) => (
<div className={`compliance-check-bx ${openItems.has(item.ID) ? 'act' : ''}`} key={item.ID}>
<div className="check-name-wrap">
<div className="check-form-box ">
<input type="checkbox" id={`ch${item.ID}`} onClick={() => handleItemClick(item.ID)} />
<label htmlFor={`ch${item.ID}`}>{item.PRODUCT_NAME}</label>
</div>
<div className="check-name-btn">
<button className="bx-btn" onClick={() => toggleItemOpen(item.ID)}></button>
<>
{suitableSearchResults.suitable.map((item: SuitableMain) => (
<div className={`compliance-check-bx ${openItems.has(item.ID) ? 'act' : ''}`} key={item.ID}>
<div className="check-name-wrap">
<div className="check-form-box ">
<input type="checkbox" id={`ch${item.ID}`} onClick={() => handleItemClick(item.ID)} />
<label htmlFor={`ch${item.ID}`}>{item.PRODUCT_NAME}</label>
</div>
<div className="check-name-btn">
<button className="bx-btn" onClick={() => toggleItemOpen(item.ID)}></button>
</div>
</div>
<ul className="reference-list check">
{filterSuitableDetail(item.ID)?.map((subItem: SuitableDetail) => (
<li className="reference-item" key={subItem.ID}>
<div className="check-item-wrap">
<div className="check-form-box light">
<input type="checkbox" id={`ch${subItem.ID}`} />
<label htmlFor={`ch${subItem.ID}`}>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.TRESTLE_MFPC_CD)}</label>
</div>
<div className="compliance-icon-wrap">
{suitableCheck(subItem.TRESTLE_MANUFACTURER_PRODUCT_NAME)}
{subItem.MEMO && (
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
</div>
)}
</div>
</div>
</li>
))}
</ul>
</div>
<ul className="reference-list check">
{filterSuitableDetail(item.ID)?.map((subItem: SuitableDetail) => (
<li className="reference-item" key={subItem.ID}>
<div className="check-item-wrap">
<div className="check-form-box light">
<input type="checkbox" id={`ch${subItem.ID}`} />
<label htmlFor={`ch${subItem.ID}`}>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.TRESTLE_MFPC_CD)}</label>
</div>
<div className="compliance-icon-wrap">
{suitableCheck(subItem.TRESTLE_MANUFACTURER_PRODUCT_NAME)}
{subItem.MEMO && (
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
</div>
)}
</div>
</div>
</li>
))}
</ul>
</div>
))
))}
<SuitableButton />
</>
) : (
<SuitableNoData />
)}