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

feat: 지붕재 적합성 조회 raw query 방식으로 변경 및 테스트 코드 삭제

Browse Source
This commit is contained in:
Daseul Kim 2025-05-20 16:39:06 +09:00
parent 534e672ad5
commit 6ec1d3fa9f
11 changed files with 95 additions and 616 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/app/api/suitable/list/route.ts
View File

@ -1,82 +1,75 @@
import { NextRequest, NextResponse } from 'next/server'
import { prisma } from '@/libs/prisma'
import { SUITABLE_HEAD_CODE, type SuitableMain } from '@/types/Suitable'
import { type Suitable } from '@/types/Suitable'
export async function GET(request: NextRequest) {
try {
const searchParams = request.nextUrl.searchParams
const pageNumber = parseInt(searchParams.get('pageNumber') || '0')
const itemPerPage = parseInt(searchParams.get('itemPerPage') || '0')
if (pageNumber === 0 || itemPerPage === 0) {
return NextResponse.json({ error: '페이지 번호와 페이지당 아이템 수가 필요합니다' }, { status: 400 })
}
const ids = searchParams.get('ids')
const category = searchParams.get('category')
const keyword = searchParams.get('keyword')
let MainWhereCondition: any = {}
const whereCondition: string[] = []
const params: string[] = []
let query = `
SELECT
msm.id
, msm.product_name
, msm.manu_ft_cd
, msm.roof_mt_cd
, msm.roof_sh_cd
, details.detail
FROM ms_suitable_main msm
LEFT JOIN (
SELECT
msd.main_id
, (
SELECT
msd_json.id
, msd_json.trestle_mfpc_cd
, msd_json.trestle_manufacturer_product_name
, msd_json.memo
FROM ms_suitable_detail msd_json
WHERE msd.main_id = msd_json.main_id
FOR JSON PATH
) AS detail
FROM ms_suitable_detail msd
GROUP BY msd.main_id
) AS details
ON msm.id = details.main_id
--mainIds AND details.main_id IN (:mainIds)
WHERE 1=1
--mainIds AND msm.id IN (:mainIds)
--roofMtCd AND msm.roof_mt_cd = ':roofMtCd'
--productName AND msm.product_name LIKE '%:productName%'
ORDER BY msm.product_name
OFFSET (@P1 - 1) * @P2 ROWS
FETCH NEXT @P2 ROWS ONLY;
`
// 검색 조건 설정
if (ids) {
query = query.replaceAll('--mainIds ', '')
query = query.replaceAll(':mainIds', ids)
}
if (category) {
whereCondition.push(`${SUITABLE_HEAD_CODE.ROOF_MT_CD} = @P1`)
params.push(category)
MainWhereCondition[SUITABLE_HEAD_CODE.ROOF_MT_CD] = category
query = query.replace('--roofMtCd ', '')
query = query.replace(':roofMtCd', category)
}
if (keyword) {
whereCondition.push('PRODUCT_NAME LIKE @P2')
params.push(`%${keyword}%`)
MainWhereCondition['PRODUCT_NAME'] = {
contains: keyword,
}
query = query.replace('--productName ', '')
query = query.replace(':productName', keyword)
}
const startTime = performance.now()
console.log(`쿼리 (main table) 시작 시간: ${startTime}ms`)
// @ts-ignore
const suitable = await prisma.MS_SUITABLE_MAIN.findMany({
select: {
ID: true,
PRODUCT_NAME: true,
ROOF_MT_CD: true,
},
where: MainWhereCondition,
orderBy: {
PRODUCT_NAME: 'asc',
},
})
const suitable: Suitable[] = await prisma.$queryRawUnsafe(query, pageNumber, itemPerPage)
const endTime = performance.now()
console.log(`쿼리 (main table) 종료 시간: ${endTime - startTime}ms`)
const mainIds: number[] = suitable.map((item: SuitableMain) => item.id)
const startTime2 = performance.now()
console.log(`쿼리 (detail table) 시작 시간: ${startTime2}ms`)
let detailQuery = `
SELECT
msd.main_id
, (
SELECT
msd_json.id
, msd_json.trestle_mfpc_cd
, msd_json.trestle_manufacturer_product_name
, msd_json.memo
FROM ms_suitable_detail msd_json
WHERE msd.main_id = msd_json.main_id
FOR JSON PATH
) AS detail
FROM ms_suitable_detail msd
-- WHERE 1=1
GROUP BY msd.main_id
`
if (whereCondition.length > 0) {
detailQuery = detailQuery.replace('-- WHERE 1=1', `WHERE msd.main_id IN @P1`)
}
// @ts-ignore
const detail = await prisma.$queryRawUnsafe(detailQuery, ...mainIds)
const endTime2 = performance.now()
console.log(`쿼리 (detail table) 종료 시간: ${endTime2 - startTime2}ms`)
const endTime3 = performance.now()
console.log(`쿼리 총 실행 시간: ${endTime3 - startTime}ms`)
return NextResponse.json({ suitable, detail })
return NextResponse.json(suitable)
} catch (error) {
console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })

71
src/app/api/suitable/list/test/route.ts
View File

@ -1,71 +0,0 @@
import { NextRequest, NextResponse } from 'next/server'
import { prisma } from '@/libs/prisma'
import { SUITABLE_HEAD_CODE, type Suitable } from '@/types/Suitable'
export async function GET(request: NextRequest) {
try {
const searchParams = request.nextUrl.searchParams
const category = searchParams.get('category')
const keyword = searchParams.get('keyword')
const whereCondition: string[] = []
const params: string[] = []
if (category) {
whereCondition.push(`${SUITABLE_HEAD_CODE.ROOF_MT_CD} = @P1`)
params.push(category)
}
if (keyword) {
whereCondition.push('PRODUCT_NAME LIKE @P2')
params.push(`%${keyword}%`)
}
const startTime = performance.now()
console.log(`쿼리 시작 시간: ${startTime}ms`)
let query = `
SELECT
msm.id
, msm.product_name
, msm.manu_ft_cd
, msm.roof_mt_cd
, msm.roof_sh_cd
, details.detail
FROM ms_suitable_main msm
LEFT JOIN (
SELECT
msd.main_id
, (
SELECT
msd_json.id
, msd_json.trestle_mfpc_cd
, msd_json.trestle_manufacturer_product_name
, msd_json.memo
FROM ms_suitable_detail msd_json
WHERE msd.main_id = msd_json.main_id
FOR JSON PATH
) AS detail
FROM ms_suitable_detail msd
GROUP BY msd.main_id
) AS details
ON msm.id = details.main_id
-- AND details.main_id IN (#mainIds)
-- WHERE 1=1
ORDER BY msm.product_name`
// 검색 조건 추가
if (whereCondition.length > 0) {
query = query.replace('-- WHERE 1=1', `WHERE ${whereCondition.join(' AND ')}`)
}
// @ts-ignore
const suitable: Suitable[] = await prisma.$queryRawUnsafe(query, ...params)
const endTime = performance.now()
console.log(`쿼리 실행 시간: ${endTime - startTime}ms`)
return NextResponse.json(suitable)
} catch (error) {
console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
}
}

24
src/app/suitable-test/layout.tsx
View File

@ -1,24 +0,0 @@
import type { ReactNode } from 'react'
interface SuitableLayoutProps {
children: ReactNode
}
export default function layout({ children }: SuitableLayoutProps) {
return (
<>
<div className="container">
<div className="sale-contents">
<div className="border-frame">
<div className="pw-guide">
<div className="pw-guide-txt">この適合表は参考資料として使用してください.</div>
<div className="pw-guide-txt">詳細やお問い合わせは1：1お問い合わせをご利用ください.</div>
<div className="pw-guide-txt">屋根材の選択or屋根材名を直接入力してください.</div>
</div>
</div>
{children}
</div>
</div>
</>
)
}

9
src/app/suitable-test/page.tsx
View File

@ -1,9 +0,0 @@
import SuitableRaw from '@/components/suitable/SuitableRaw'
export default function page() {
return (
<>
<SuitableRaw />
</>
)
}

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

@ -2,13 +2,13 @@
import Image from 'next/image'
import { useEffect, useState } from 'react'
import SuitableList from './SuitableList'
import SuitableListRaw from './SuitableList'
import { useSuitable } from '@/hooks/useSuitable'
import { useSuitableStore } from '@/store/useSuitableStore'
import type { CommCode } from '@/types/CommCode'
import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
export default function Suitable() {
export default function SuitableRaw() {
const [reference, setReference] = useState(true)
const { getSuitableCommCode, refetchBySearch } = useSuitable()
@ -110,7 +110,7 @@ export default function Suitable() {
</li>
</ul>
</div>
<SuitableList />
<SuitableListRaw />
</div>
</div>
)

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

@ -6,7 +6,7 @@ import SuitableButton from './SuitableButton'
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'
import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
// 한 번에 로드할 아이템 수
const ITEMS_PER_PAGE = 100
@ -14,9 +14,8 @@ const ITEMS_PER_PAGE = 100
export default function SuitableList() {
const { toCodeName, suitableSearchResults, isSearchLoading, toSuitableDetail } = useSuitable()
const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
const [openItems, setOpenItems] = useState<Set<number>>(new Set())
const [visibleItems, setVisibleItems] = useState<SuitableMain[]>([])
const [visibleItems, setVisibleItems] = useState<Suitable[]>([])
const [page, setPage] = useState(1)
const [isLoadingMore, setIsLoadingMore] = useState(false)
const observerTarget = useRef<HTMLDivElement>(null)
@ -32,7 +31,7 @@ export default function SuitableList() {
// 초기 데이터 로드
useEffect(() => {
if (suitableSearchResults) {
const initialItems = suitableSearchResults.suitable.slice(0, ITEMS_PER_PAGE)
const initialItems = suitableSearchResults.slice(0, ITEMS_PER_PAGE)
setVisibleItems(initialItems)
setPage(1)
}
@ -46,7 +45,7 @@ export default function SuitableList() {
const nextPage = page + 1
const startIndex = (nextPage - 1) * ITEMS_PER_PAGE
const endIndex = startIndex + ITEMS_PER_PAGE
const nextItems = suitableSearchResults.suitable.slice(startIndex, endIndex)
const nextItems = suitableSearchResults.slice(startIndex, endIndex)
if (nextItems.length > 0) {
setIsLoadingMore(true)
@ -108,7 +107,7 @@ export default function SuitableList() {
// 메모이제이션된 아이템 렌더링
const renderItem = useCallback(
(item: SuitableMain) => {
(item: Suitable) => {
const isSelected = isItemSelected(item.id)
const isOpen = openItems.has(item.id)
@ -124,7 +123,7 @@ export default function SuitableList() {
</div>
</div>
<ul className="reference-list check">
{toSuitableDetail(item.id).map((subItem: SuitableDetail) => (
{toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
<li className="reference-item" key={subItem.id}>
<div className="check-item-wrap">
<div className="check-form-box light">
@ -158,7 +157,7 @@ export default function SuitableList() {
return <div>Loading...</div>
}
if (!suitableSearchResults?.suitable.length) {
if (!suitableSearchResults?.length) {
return <SuitableNoData />
}

173
src/components/suitable/SuitableListRaw.tsx
View File

@ -1,173 +0,0 @@
'use client'
import Image from 'next/image'
import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
import SuitableButton from './SuitableButton'
import SuitableNoData from './SuitableNoData'
import { useSuitableRaw, type Suitable } from '@/hooks/useSuitableRaw'
import { useSuitableStore } from '@/store/useSuitableStore'
import { SUITABLE_HEAD_CODE, type SuitableDetail } from '@/types/Suitable'
// 한 번에 로드할 아이템 수
const ITEMS_PER_PAGE = 100
export default function SuitableListRaw() {
const { toCodeName, suitableSearchResults, isSearchLoading, toSuitableDetail } = useSuitableRaw()
const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
const [openItems, setOpenItems] = useState<Set<number>>(new Set())
const [visibleItems, setVisibleItems] = useState<Suitable[]>([])
const [page, setPage] = useState(1)
const [isLoadingMore, setIsLoadingMore] = useState(false)
const observerTarget = useRef<HTMLDivElement>(null)
// 선택된 아이템 확인 함수 메모이제이션
const isItemSelected = useCallback(
(itemId: number) => {
return selectedItems.some((selected) => selected === itemId)
},
[selectedItems],
)
// 초기 데이터 로드
useEffect(() => {
if (suitableSearchResults) {
const initialItems = suitableSearchResults.slice(0, ITEMS_PER_PAGE)
setVisibleItems(initialItems)
setPage(1)
}
}, [suitableSearchResults])
// Intersection Observer 설정
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting && suitableSearchResults && !isLoadingMore) {
const nextPage = page + 1
const startIndex = (nextPage - 1) * ITEMS_PER_PAGE
const endIndex = startIndex + ITEMS_PER_PAGE
const nextItems = suitableSearchResults.slice(startIndex, endIndex)
if (nextItems.length > 0) {
setIsLoadingMore(true)
setVisibleItems((prev) => [...prev, ...nextItems])
setPage(nextPage)
setIsLoadingMore(false)
}
}
},
{
threshold: 0.2,
},
)
if (observerTarget.current) {
observer.observe(observerTarget.current)
}
return () => observer.disconnect()
}, [page, suitableSearchResults, isLoadingMore])
const handleItemClick = useCallback(
(itemId: number) => {
isItemSelected(itemId) ? removeSelectedItem(itemId) : addSelectedItem(itemId)
},
[isItemSelected, addSelectedItem, removeSelectedItem],
)
const toggleItemOpen = useCallback((itemId: number) => {
setOpenItems((prev) => {
const newOpenItems = new Set(prev)
newOpenItems.has(itemId) ? newOpenItems.delete(itemId) : newOpenItems.add(itemId)
return newOpenItems
})
}, [])
// TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
const suitableCheck = useCallback((value: string) => {
if (value === '×') {
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 (
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
</div>
)
} else {
return (
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
</div>
)
}
}, [])
// 메모이제이션된 아이템 렌더링
const renderItem = useCallback(
(item: Suitable) => {
const isSelected = isItemSelected(item.id)
const isOpen = openItems.has(item.id)
return (
<div className={`compliance-check-bx ${isOpen ? 'act' : ''}`} key={item.id}>
<div className="check-name-wrap">
<div className="check-form-box ">
<input type="checkbox" id={`ch${item.id}`} checked={isSelected} onChange={() => handleItemClick(item.id)} />
<label htmlFor={`ch${item.id}`}>{item.productName}</label>
</div>
<div className="check-name-btn">
<button className="bx-btn" onClick={() => toggleItemOpen(item.id)}></button>
</div>
</div>
<ul className="reference-list check">
{toSuitableDetail(item.detail).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.trestleMfpcCd)}</label>
</div>
<div className="compliance-icon-wrap">
{suitableCheck(subItem.trestleManufacturerProductName)}
{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>
)
},
[isItemSelected, openItems, handleItemClick, toggleItemOpen, suitableCheck, toCodeName, toSuitableDetail],
)
// 메모이제이션된 아이템 리스트
const renderedItems = useMemo(() => {
return visibleItems.map(renderItem)
}, [visibleItems, renderItem])
if (isSearchLoading) {
return <div>Loading...</div>
}
if (!suitableSearchResults?.length) {
return <SuitableNoData />
}
return (
<>
{renderedItems}
<div ref={observerTarget} className="loading-indicator">
{isLoadingMore && <div className="loading-more">데이터를 불러오는 중...</div>}
</div>
<SuitableButton />
</>
)
}

118
src/components/suitable/SuitableRaw.tsx
View File

@ -1,118 +0,0 @@
'use client'
import Image from 'next/image'
import { useEffect, useState } from 'react'
import SuitableListRaw from './SuitableListRaw'
import { useSuitableRaw } from '@/hooks/useSuitableRaw'
import { useSuitableStore } from '@/store/useSuitableStore'
import type { CommCode } from '@/types/CommCode'
import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
export default function SuitableRaw() {
const [reference, setReference] = useState(true)
const { getSuitableCommCode, refetchBySearch } = useSuitableRaw()
const { suitableCommCode, selectedCategory, setSelectedCategory, searchValue, setSearchValue, setIsSearch, clearSelectedItems } = useSuitableStore()
const handleInputSearch = async () => {
if (!searchValue.trim()) {
alert('屋根材の製品名を入力してください。')
return
}
setIsSearch(true)
refetchBySearch()
}
const handleInputClear = () => {
setSearchValue('')
setIsSearch(false)
refetchBySearch()
}
useEffect(() => {
refetchBySearch()
}, [selectedCategory])
useEffect(() => {
getSuitableCommCode()
return () => {
setSelectedCategory('')
setSearchValue('')
clearSelectedItems()
}
}, [])
return (
<div className="border-frame">
<span>테스트1 페이지</span>
<div className="sale-form-bx">
<select className="select-form" name="" id="" value={selectedCategory || ''} onChange={(e) => setSelectedCategory(e.target.value)}>
<option value="">屋根材を選択してください.</option>
{suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MT_CD)?.map((category: CommCode, index: number) => (
<option key={index} value={category.code}>
{category.codeJp}
</option>
))}
</select>
</div>
<div className="sale-form-bx">
<div className="search-input">
<input
type="text"
className="search-frame"
placeholder="屋根材 製品名を入力してください."
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
/>
{searchValue && <button className="del-icon" onClick={handleInputClear} />}
<button className="search-icon" onClick={handleInputSearch} />
</div>
</div>
<div className="compliance-check-wrap">
<div className={`compliance-check-bx ${reference ? 'act' : ''}`}>
<div className="check-name-wrap">
<div className="check-name">凡例</div>
<div className="check-name-btn">
<button className="bx-btn" onClick={() => setReference(!reference)}></button>
</div>
</div>
<ul className="reference-list">
<li className="reference-item">
<div className="reference-item-bx">
<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">
<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">
<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">
<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>
</div>
<SuitableListRaw />
</div>
</div>
)
}

46
src/hooks/useSuitable.ts
View File

@ -2,19 +2,27 @@ import { useQuery } from '@tanstack/react-query'
import { axiosInstance, transformObjectKeys } from '@/libs/axios'
import { useSuitableStore } from '@/store/useSuitableStore'
import { useCommCode } from './useCommCode'
import { SUITABLE_HEAD_CODE, type SuitableDetailGroup, type SuitableMain, type Suitable, type SuitableDetail } from '@/types/Suitable'
import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
export function useSuitable() {
const { getCommCode } = useCommCode()
const { selectedCategory, searchValue, suitableCommCode, setSuitableCommCode, isSearch } = useSuitableStore()
const getSuitables = async (): Promise<Suitable> => {
const getSuitables = async (): Promise<Suitable[]> => {
try {
const response = await axiosInstance(null).get<Suitable>('/api/suitable/list')
const response = await axiosInstance(null).get<Suitable[]>('/api/suitable/list', {
params: {
pageNumber: 1,
itemPerPage: 1000,
ids: '',
category: '',
keyword: '',
},
})
return response.data
} catch (error) {
console.error('지붕재 데이터 로드 실패:', error)
return { suitable: [], detail: [] }
return []
}
}
@ -42,12 +50,8 @@ export function useSuitable() {
return commCode?.find((item) => item.code === code)?.codeJp || ''
}
const toSuitableDetail = (mainId: number): SuitableDetail[] => {
const toSuitableDetail = (suitableDetailString: string): SuitableDetail[] => {
try {
const suitableDetailString = suitableList?.detail.find((item) => item.mainId === mainId)?.detail
if (!suitableDetailString) {
return []
}
const suitableDetailArray = transformObjectKeys(JSON.parse(suitableDetailString)) as SuitableDetail[]
if (!Array.isArray(suitableDetailArray)) {
throw new Error('suitableDetailArray is not an array')
@ -59,7 +63,7 @@ export function useSuitable() {
}
}
const { data: suitableList, isLoading: isInitialLoading } = useQuery<Suitable>({
const { data: suitableList, isLoading: isInitialLoading } = useQuery<Suitable[]>({
queryKey: ['suitables', 'list'],
queryFn: async () => await getSuitables(),
staleTime: 1000 * 60 * 10, // 10분
@ -70,23 +74,19 @@ export function useSuitable() {
data: suitableSearchResults,
refetch: refetchBySearch,
isLoading: isSearchLoading,
} = useQuery<Suitable>({
} = useQuery<Suitable[]>({
queryKey: ['suitables', 'search', selectedCategory, isSearch],
queryFn: async () => {
if (!isSearch && !selectedCategory) {
// 검색 상태가 아니면 초기 데이터 반환 임시처리
return isInitialLoading ? await getSuitables() : suitableList ?? { suitable: [], detail: [] }
return isInitialLoading ? await getSuitables() : suitableList ?? [] // 검색 상태가 아니면 초기 데이터 반환 임시처리
} else {
const filteredSuitable = suitableList?.suitable.filter((item: SuitableMain) => {
const categoryMatch = !selectedCategory || item.roofMtCd === selectedCategory
const searchMatch = !searchValue || item.productName.includes(searchValue)
return categoryMatch && searchMatch
}) ?? []
const mainIds = filteredSuitable.map((item: SuitableMain) => item.id)
const filteredDetail = suitableList?.detail.filter((item: SuitableDetailGroup) => {
return mainIds.includes(item.mainId)
}) ?? []
return { suitable: filteredSuitable, detail: filteredDetail }
return (
suitableList?.filter((item: Suitable) => {
const categoryMatch = !selectedCategory || item.roofMtCd === selectedCategory
const searchMatch = !searchValue || item.productName.includes(searchValue)
return categoryMatch && searchMatch
}) ?? []
)
}
},
staleTime: 1000 * 60 * 10,

109
src/hooks/useSuitableRaw.ts
View File

@ -1,109 +0,0 @@
import { useQuery } from '@tanstack/react-query'
import { axiosInstance, transformObjectKeys } from '@/libs/axios'
import { useSuitableStore } from '@/store/useSuitableStore'
import { useCommCode } from './useCommCode'
import { SUITABLE_HEAD_CODE, type SuitableDetail } from '@/types/Suitable'
export type Suitable = {
id: number
productName: string
manuFtCd: string
roofMtCd: string
roofShCd: string
detail: string
}
export function useSuitableRaw() {
const { getCommCode } = useCommCode()
const { selectedCategory, searchValue, suitableCommCode, setSuitableCommCode, isSearch } = useSuitableStore()
const getSuitables = async (): Promise<Suitable[]> => {
try {
const response = await axiosInstance(null).get<Suitable[]>('/api/suitable/list/test')
return response.data
} catch (error) {
console.error('지붕재 데이터 로드 실패:', error)
return []
}
}
// const updateSearchResults = async (selectedCategory: string | undefined, searchValue: string | undefined): Promise<SuitableData[]> => {
// try {
// const response = await axiosInstance(null).get<SuitableData[]>('/api/suitable/list', { params: { selectedCategory, searchValue } })
// return response.data
// } catch (error) {
// console.error('지붕재 데이터 검색 실패:', error)
// return []
// }
// }
const getSuitableCommCode = () => {
const headCodes = Object.values(SUITABLE_HEAD_CODE) as SUITABLE_HEAD_CODE[]
for (const code of headCodes) {
getCommCode(code).then((res) => {
setSuitableCommCode(code, res)
})
}
}
const toCodeName = (headCode: string, code: string): string => {
const commCode = suitableCommCode.get(headCode)
return commCode?.find((item) => item.code === code)?.codeJp || ''
}
const toSuitableDetail = (suitableDetailString: string): SuitableDetail[] => {
try {
const suitableDetailArray = transformObjectKeys(JSON.parse(suitableDetailString)) as SuitableDetail[]
if (!Array.isArray(suitableDetailArray)) {
throw new Error('suitableDetailArray is not an array')
}
return suitableDetailArray
} catch (error) {
console.error('지붕재 데이터 파싱 실패:', error)
return []
}
}
const { data: suitableList, isLoading: isInitialLoading } = useQuery<Suitable[]>({
queryKey: ['suitables', 'list'],
queryFn: async () => await getSuitables(),
staleTime: 1000 * 60 * 10, // 10분
gcTime: 1000 * 60 * 10, // 10분
})
const {
data: suitableSearchResults,
refetch: refetchBySearch,
isLoading: isSearchLoading,
// } = useQuery<SuitableData>({
} = useQuery<Suitable[]>({
queryKey: ['suitables', 'search', selectedCategory, isSearch],
queryFn: async () => {
if (!isSearch && !selectedCategory) {
return isInitialLoading ? await getSuitables() : suitableList ?? [] // 검색 상태가 아니면 초기 데이터 반환 임시처리
} else {
return (
suitableList?.filter((item: Suitable) => {
const categoryMatch = !selectedCategory || item.roofMtCd === selectedCategory
const searchMatch = !searchValue || item.productName.includes(searchValue)
return categoryMatch && searchMatch
}) ?? []
)
}
},
staleTime: 1000 * 60 * 10,
gcTime: 1000 * 60 * 10,
enabled: true,
})
return {
getSuitables,
getSuitableCommCode,
toCodeName,
toSuitableDetail,
suitableList,
suitableSearchResults,
refetchBySearch,
isSearchLoading,
}
}

21
src/types/Suitable.ts
View File

@ -25,20 +25,11 @@ export type SuitableDetail = {
memo: string
}
// export type Suitable = {
// id: number
// productName: string
// manuFtCd: string
// roofMtCd: string
// roofShCd: string
// detail: string
// }
export type SuitableDetailGroup = {
mainId: number
export type Suitable = {
id: number
productName: string
manuFtCd: string
roofMtCd: string
roofShCd: string
detail: string
}
export type Suitable = {
suitable: SuitableMain[]
detail: SuitableDetailGroup[]
}