+
{item.productName}
+
+
-
+
+
+
屋根技研 支持瓦
+
{toCodeName(SUITABLE_HEAD_CODE.MANU_FT_CD, item.manuFtCd)}
-
-
-
お問い合わせください
-
+
+
屋根材
+
{toCodeName(SUITABLE_HEAD_CODE.ROOF_MT_CD, item.roofMtCd)}
-
-
-
ダイドーハント支持瓦Ⅱ
-
-
-
+
+
金具タイプ
+
{toCodeName(SUITABLE_HEAD_CODE.ROOF_SH_CD, item.roofShCd)}
+
+
+ {toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
+
+
+
{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}
+
+
+
+
+ {subItem.memo && (
+
+
+
+ )}
+
+
{suitableCheckMemo(subItem.trestleManufacturerProductName)}
+ {subItem.memo && (
+
+ )}
-
-
Ⅳ (Ｄ) で設置可
-
+ ))}
-
+ ))}
diff --git a/src/components/popup/SuitableDetailPopupButton.tsx b/src/components/popup/SuitableDetailPopupButton.tsx
index 52e1bae..01f88ce 100644
--- a/src/components/popup/SuitableDetailPopupButton.tsx
+++ b/src/components/popup/SuitableDetailPopupButton.tsx
@@ -1,10 +1,16 @@
'use client'
+import { useRouter } from 'next/navigation'
+import { usePopupController } from '@/store/popupController'
+
export default function SuitableDetailPopupButton() {
+ const popupController = usePopupController()
+ const router = useRouter()
+
return (
-
@@ -14,7 +20,13 @@ export default function SuitableDetailPopupButton() {
-
diff --git a/src/components/suitable/SuitableList.tsx b/src/components/suitable/SuitableList.tsx
index 9936494..7aaeb5e 100644
--- a/src/components/suitable/SuitableList.tsx
+++ b/src/components/suitable/SuitableList.tsx
@@ -9,7 +9,17 @@ import { useSuitableStore } from '@/store/useSuitableStore'
import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
export default function SuitableList() {
- const { toCodeName, toSuitableDetail, toSuitableDetailIds, suitables, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useSuitable()
+ const {
+ toCodeName,
+ toSuitableDetail,
+ toSuitableDetailIds,
+ suitables,
+ fetchNextPage,
+ hasNextPage,
+ isFetchingNextPage,
+ isLoading,
+ suitableCheckIcon,
+ } = useSuitable()
const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
const [openItems, setOpenItems] = useState
>(new Set())
const observerTarget = useRef(null)
@@ -52,20 +62,6 @@ export default function SuitableList() {
})
}, [])
- // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
- const suitableCheck = useCallback((value: string) => {
- const iconMap: Record = {
- '×': '/assets/images/sub/compliance_x_icon.svg',
- ー: '/assets/images/sub/compliance_quest_icon.svg',
- default: '/assets/images/sub/compliance_check_icon.svg',
- }
- return (
-
-
-
- )
- }, [])
-
// 아이템 렌더링
const renderItem = useCallback(
(item: Suitable) => {
@@ -99,7 +95,9 @@ export default function SuitableList() {
- {suitableCheck(subItem.trestleManufacturerProductName)}
+
+
+
{subItem.memo && (
@@ -113,7 +111,7 @@ export default function SuitableList() {
)
},
- [isItemSelected, openItems, handleItemClick, toggleItemOpen, suitableCheck, toCodeName, toSuitableDetail],
+ [isItemSelected, openItems, handleItemClick, toggleItemOpen, toCodeName, toSuitableDetail],
)
// 아이템 리스트
diff --git a/src/hooks/useSuitable.ts b/src/hooks/useSuitable.ts
index 5acad45..23b89b5 100644
--- a/src/hooks/useSuitable.ts
+++ b/src/hooks/useSuitable.ts
@@ -62,7 +62,7 @@ export function useSuitable() {
try {
const params: Record
= { ids: ids }
if (detailIds) params.detailIds = detailIds
- const response = await axiosInstance(null).get('/api/suitable', { params })
+ const response = await axiosInstance(null).post('/api/suitable', params)
return response.data
} catch (error) {
console.error('지붕재 상세 데이터 로드 실패:', error)
@@ -134,17 +134,19 @@ export function useSuitable() {
enabled: selectedCategory !== '' || searchKeyword !== '',
})
- const serializeSelectedItems = (): Map => {
+ const serializeSelectedItems = (): { ids: string; detailIds: string } => {
const ids: string[] = []
const detailIds: string[] = []
for (const [key, value] of selectedItems) {
ids.push(String(key))
for (const id of value) detailIds.push(String(id))
}
- return new Map([
- ['ids', ids.join(',')],
- ['detailIds', detailIds.join(',')],
- ])
+ return { ids: ids.join(','), detailIds: detailIds.length > 0 ? detailIds.join(',') : '' }
+ }
+
+ const getSelectedItemsData = async (): Promise => {
+ const { ids, detailIds } = serializeSelectedItems()
+ return await getSuitableDetails(ids, detailIds)
}
const clearSuitableSearch = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => {
@@ -153,6 +155,24 @@ export function useSuitable() {
if (keyword) clearSearchKeyword()
}
+ // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
+ const suitableCheckIcon = (value: string): string => {
+ const iconMap: Record = {
+ '×': '/assets/images/sub/compliance_x_icon.svg',
+ 'ー': '/assets/images/sub/compliance_quest_icon.svg',
+ default: '/assets/images/sub/compliance_check_icon.svg',
+ }
+ return iconMap[value] || iconMap.default
+ }
+
+ // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ○, ×, ー 데이터 관리 필요
+ const suitableCheckMemo = (value: string): string => {
+ if (value === '○') return '設置可'
+ if (value === '×') return '設置不可'
+ if (value === 'ー') return 'お問い合わせください'
+ return `${value}で設置可`
+ }
+
return {
getSuitables,
getSuitableIds,
@@ -166,7 +186,9 @@ export function useSuitable() {
hasNextPage,
isFetchingNextPage,
isLoading,
- serializeSelectedItems,
+ getSelectedItemsData,
clearSuitableSearch,
+ suitableCheckIcon,
+ suitableCheckMemo,
}
}