feat: 지붕재 적합성 데이터 아코디언 처리 추가, 적합성 아이콘 수정
This commit is contained in:
parent
84771ad742
commit
4392802298
@ -1,5 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import Image from 'next/image'
|
||||
import { useEffect, useState } from 'react'
|
||||
import SuitableList from './SuitableList'
|
||||
import { useSuitable } from '@/hooks/useSuitable'
|
||||
@ -77,22 +78,34 @@ export default function Suitable() {
|
||||
<ul className="reference-list">
|
||||
<li className="reference-item">
|
||||
<div className="reference-item-bx">
|
||||
<i className="compliance-icon check"></i>設置可能
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
<span>設置可能</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className="reference-item">
|
||||
<div className="reference-item-bx">
|
||||
<i className="compliance-icon x"></i>設置可能
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
<span>設置不可</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className="reference-item">
|
||||
<div className="reference-item-bx">
|
||||
<i className="compliance-icon quest"></i>設置可能
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
<span>お問い合わせ</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className="reference-item">
|
||||
<div className="reference-item-bx">
|
||||
<i className="compliance-icon tip"></i>設置可能
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
<span>備考</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -1,71 +1,87 @@
|
||||
'use client'
|
||||
|
||||
import Image from 'next/image'
|
||||
import { useState } from 'react'
|
||||
import SuitableNoData from './SuitableNoData'
|
||||
import { useSuitable } from '@/hooks/useSuitable'
|
||||
import { useSuitableStore } from '@/store/useSuitableStore'
|
||||
import { SUITABLE_HEAD_CODE, type SuitableMain, type SuitableDetail } from '@/types/Suitable'
|
||||
|
||||
export default function SuitableList() {
|
||||
const { toCodeName, suitableSearchResults, isSearchLoading } = useSuitable()
|
||||
const { toCodeName, suitableSearchResults, isSearchLoading, filterSuitableDetail } = useSuitable()
|
||||
const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
|
||||
const [openItems, setOpenItems] = useState<Set<number>>(new Set())
|
||||
|
||||
const handleItemClick = (itemId: number) => {
|
||||
selectedItems.some((selected) => selected === itemId) ? removeSelectedItem(itemId) : addSelectedItem(itemId)
|
||||
}
|
||||
|
||||
const toggleItemOpen = (itemId: number) => {
|
||||
setOpenItems((prev) => {
|
||||
const newOpenItems = new Set(prev)
|
||||
newOpenItems.has(itemId) ? newOpenItems.delete(itemId) : newOpenItems.add(itemId)
|
||||
return newOpenItems
|
||||
})
|
||||
}
|
||||
|
||||
// TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
|
||||
const suitableCheck = (value: string) => {
|
||||
if (value === '×') {
|
||||
return <i className="compliance-icon x" />
|
||||
return (
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
)
|
||||
} else if (value === 'ー') {
|
||||
return <i className="compliance-icon quest" />
|
||||
return (
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return <i className="compliance-icon check" />
|
||||
return (
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const filterSuitableDetail = (mainId: number): SuitableDetail[] | undefined => {
|
||||
const result: SuitableDetail[] = []
|
||||
for (const subItem of suitableSearchResults?.suitableDetail ?? []) {
|
||||
if (subItem.MAIN_ID > mainId) break
|
||||
if (subItem.MAIN_ID === mainId) {
|
||||
result.push(subItem)
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{isSearchLoading ? (
|
||||
<div>Loading...</div>
|
||||
) : suitableSearchResults && suitableSearchResults.suitable.length > 0 ? (
|
||||
suitableSearchResults.suitable.map((item: SuitableMain) => (
|
||||
<div className={`compliance-check-bx act`} key={item.ID}>
|
||||
<div className={`compliance-check-bx ${openItems.has(item.ID) ? 'act' : ''}`} key={item.ID}>
|
||||
<div className="check-name-wrap">
|
||||
<div className="check-form-box com-tit">
|
||||
<input type="checkbox" id={`ch${item.ID}`} />
|
||||
<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={() => handleItemClick(item.ID)}></button>
|
||||
<button className="bx-btn" onClick={() => toggleItemOpen(item.ID)}></button>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="reference-list check">
|
||||
<li className="reference-item">
|
||||
{filterSuitableDetail(item.ID)?.map((subItem: SuitableDetail) => (
|
||||
<div className="check-item-wrap" key={subItem.ID}>
|
||||
<div className="check-form-box com-txt">
|
||||
{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 && <i className="compliance-icon tip"></i>}
|
||||
{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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))
|
||||
|
||||
@ -82,6 +82,17 @@ export function useSuitable() {
|
||||
enabled: true,
|
||||
})
|
||||
|
||||
const filterSuitableDetail = (mainId: number): SuitableDetail[] | undefined => {
|
||||
const result: SuitableDetail[] = []
|
||||
for (const subItem of suitableSearchResults?.suitableDetail ?? []) {
|
||||
if (subItem.MAIN_ID > mainId) break
|
||||
if (subItem.MAIN_ID === mainId) {
|
||||
result.push(subItem)
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
return {
|
||||
getSuitables,
|
||||
getSuitableCommCode,
|
||||
@ -91,5 +102,6 @@ export function useSuitable() {
|
||||
suitableSearchResults,
|
||||
refetchBySearch,
|
||||
isSearchLoading,
|
||||
filterSuitableDetail,
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user