feat: 지붕재적합성 조회 페이징&인피니티쿼리 적용, 체크박스 선택 처리 추가

src/app/api/suitable/list/route.ts

@@ -12,7 +12,6 @@ export async function GET(request: NextRequest) {
       return NextResponse.json({ error: '페이지 번호와 페이지당 아이템 수가 필요합니다' }, { status: 400 })
     }
 
-    const ids = searchParams.get('ids')
     const category = searchParams.get('category')
     const keyword = searchParams.get('keyword')
 
@@ -20,14 +19,13 @@ export async function GET(request: NextRequest) {
     SELECT 
       msm.id
       , msm.product_name
-      , msm.manu_ft_cd
+      , details.detail_cnt
-      , msm.roof_mt_cd
-      , msm.roof_sh_cd
       , details.detail
     FROM ms_suitable_main msm
     LEFT JOIN (
       SELECT
         msd.main_id
+        , COUNT(msd.id) AS detail_cnt
         , (
           SELECT
             msd_json.id
@@ -42,9 +40,7 @@ export async function GET(request: NextRequest) {
       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
@@ -53,10 +49,6 @@ export async function GET(request: NextRequest) {
     `
 
     // 검색 조건 설정
-    if (ids) {
-      query = query.replaceAll('--mainIds ', '')
-      query = query.replaceAll(':mainIds', ids)
-    }
     if (category) {
       query = query.replace('--roofMtCd ', '')
       query = query.replace(':roofMtCd', category)
@@ -66,7 +58,6 @@ export async function GET(request: NextRequest) {
       query = query.replace(':productName', keyword)
     }
 
-    // @ts-ignore
     const suitable: Suitable[] = await prisma.$queryRawUnsafe(query, pageNumber, itemPerPage)
 
     return NextResponse.json(suitable)

src/components/suitable/Suitable.tsx

@@ -2,16 +2,16 @@
 
 import Image from 'next/image'
 import { useEffect, useState } from 'react'
-import SuitableListRaw from './SuitableList'
+import SuitableList 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 SuitableRaw() {
+export default function Suitable() {
   const [reference, setReference] = useState(true)
 
-  const { getSuitableCommCode, refetchBySearch } = useSuitable()
+  const { getSuitableCommCode } = useSuitable()
   const { suitableCommCode, selectedCategory, setSelectedCategory, searchValue, setSearchValue, setIsSearch, clearSelectedItems } = useSuitableStore()
 
   const handleInputSearch = async () => {
@@ -20,19 +20,13 @@ export default function SuitableRaw() {
       return
     }
     setIsSearch(true)
-    refetchBySearch()
   }
 
   const handleInputClear = () => {
     setSearchValue('')
     setIsSearch(false)
-    refetchBySearch()
   }
 
-  useEffect(() => {
-    refetchBySearch()
-  }, [selectedCategory])
-
   useEffect(() => {
     getSuitableCommCode()
     return () => {
@@ -62,6 +56,11 @@ export default function SuitableRaw() {
             placeholder="屋根材 製品名を入力してください."
             value={searchValue}
             onChange={(e) => setSearchValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleInputSearch()
+              }
+            }}
           />
           {searchValue && <button className="del-icon" onClick={handleInputClear} />}
           <button className="search-icon" onClick={handleInputSearch} />
@@ -110,7 +109,7 @@ export default function SuitableRaw() {
             </li>
           </ul>
         </div>
-        <SuitableListRaw />
+        <SuitableList />
       </div>
     </div>
   )

src/components/suitable/SuitableList.tsx

@@ -1,79 +1,49 @@
 'use client'
 
 import Image from 'next/image'
-import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
 import SuitableButton from './SuitableButton'
 import SuitableNoData from './SuitableNoData'
 import { useSuitable } from '@/hooks/useSuitable'
 import { useSuitableStore } from '@/store/useSuitableStore'
 import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
 
-// 한 번에 로드할 아이템 수
-const ITEMS_PER_PAGE = 100
-
 export default function SuitableList() {
-  const { toCodeName, suitableSearchResults, isSearchLoading, toSuitableDetail } = useSuitable()
+  const { toCodeName, toSuitableDetail, suitables, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useSuitable()
   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)
 
-  // 선택된 아이템 확인 함수 메모이제이션
+  // 선택된 아이템 확인 - 메인 하위 아이템 indeterminate 확인
-  const isItemSelected = useCallback(
+  const isMainIndeterminate = useMemo(
-    (itemId: number) => {
+    () => (mainId: number, detailCnt: number) => {
-      return selectedItems.some((selected) => selected === itemId)
+      const mainItem = selectedItems.get(mainId)
+      if (!mainItem) return false
+      return mainItem.size > 0 && mainItem.size < detailCnt
     },
     [selectedItems],
   )
 
-  // 초기 데이터 로드
+  // 선택된 아이템 확인
-  useEffect(() => {
+  const isItemSelected = useCallback(
-    if (suitableSearchResults) {
+    (mainId: number, detailId?: number): boolean => {
-      const initialItems = suitableSearchResults.slice(0, ITEMS_PER_PAGE)
+      const mainItem = selectedItems.get(mainId)
-      setVisibleItems(initialItems)
+      if (!mainItem) return false
-      setPage(1)
+      if (!detailId) return true
-    }
+      return mainItem.has(detailId)
-  }, [suitableSearchResults])
+    },
-
+    [selectedItems],
-  // 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) => {
+    (mainId: number, detailId?: number): void => {
-      isItemSelected(itemId) ? removeSelectedItem(itemId) : addSelectedItem(itemId)
+      isItemSelected(mainId, detailId) ? removeSelectedItem(mainId, detailId) : addSelectedItem(mainId, detailId)
     },
     [isItemSelected, addSelectedItem, removeSelectedItem],
   )
 
+  // 아이템 열기/닫기
   const toggleItemOpen = useCallback((itemId: number) => {
     setOpenItems((prev) => {
       const newOpenItems = new Set(prev)
@@ -84,38 +54,26 @@ export default function SuitableList() {
 
   // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
   const suitableCheck = useCallback((value: string) => {
-    if (value === '×') {
+    const iconMap: Record<string, string> = {
-      return (
+      '×': '/assets/images/sub/compliance_x_icon.svg',
-        <div className="compliance-icon">
+      ー: '/assets/images/sub/compliance_quest_icon.svg',
-          <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
+      default: '/assets/images/sub/compliance_check_icon.svg',
-        </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>
-      )
     }
+    return (
+      <div className="compliance-icon">
+        <Image src={iconMap[value] || iconMap.default} width={22} height={22} alt="" />
+      </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={`compliance-check-bx ${openItems.has(item.id) ? 'act' : ''}`} key={item.id}>
           <div className="check-name-wrap">
-            <div className="check-form-box ">
+            <div className={`check-form-box ${isMainIndeterminate(item.id, item.detailCnt) ? 'space' : ''}`}>
-              <input type="checkbox" id={`ch${item.id}`} checked={isSelected} onChange={() => handleItemClick(item.id)} />
+              <input type="checkbox" id={`ch${item.id}`} checked={isItemSelected(item.id)} onChange={() => handleItemClick(item.id)} />
               <label htmlFor={`ch${item.id}`}>{item.productName}</label>
             </div>
             <div className="check-name-btn">
@@ -127,7 +85,12 @@ export default function SuitableList() {
               <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}`} />
+                    <input
+                      type="checkbox"
+                      id={`ch${subItem.id}`}
+                      checked={isItemSelected(item.id, subItem.id)}
+                      onChange={() => handleItemClick(item.id, subItem.id)}
+                    />
                     <label htmlFor={`ch${subItem.id}`}>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</label>
                   </div>
                   <div className="compliance-icon-wrap">
@@ -148,24 +111,38 @@ export default function SuitableList() {
     [isItemSelected, openItems, handleItemClick, toggleItemOpen, suitableCheck, toCodeName, toSuitableDetail],
   )
 
-  // 메모이제이션된 아이템 리스트
+  // 아이템 리스트
-  const renderedItems = useMemo(() => {
+  const suitableList = suitables?.pages.flat() ?? []
-    return visibleItems.map(renderItem)
-  }, [visibleItems, renderItem])
 
-  if (isSearchLoading) {
+  // Intersection Observer 설정
-    return <div>Loading...</div>
+  useEffect(() => {
-  }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage()
+        }
+      },
+      {
+        threshold: 0,
+        rootMargin: '100px',
+      },
+    )
 
-  if (!suitableSearchResults?.length) {
+    if (observerTarget.current) {
-    return <SuitableNoData />
+      observer.observe(observerTarget.current)
-  }
+    }
+
+    return () => observer.disconnect()
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage])
+
+  if (isLoading) return <div>Loading...</div>
+  if (!suitableList.length) return <SuitableNoData />
 
   return (
     <>
-      {renderedItems}
+      {suitableList.map(renderItem)}
       <div ref={observerTarget} className="loading-indicator">
-        {isLoadingMore && <div className="loading-more">데이터를 불러오는 중...</div>}
+        {isFetchingNextPage && <div className="loading-more">데이터를 불러오는 중...</div>}
       </div>
       <SuitableButton />
     </>

src/components/suitable/SuitableNoData.tsx

@@ -1,11 +1,16 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
 export default function SuitableNoData() {
+  const router = useRouter()
   return (
     <>
       <div className="compliace-nosearch">
         <span className="mb10">検索結果はありません。</span>
         <span className="mb10">屋根材適合性表にない製品の情報を入力してください。 今後返信いたします。</span>
         <span>
-          <button className="btn-frame n-blue icon">
+          <button className="btn-frame n-blue icon" onClick={() => router.push('/inquiry/regist')}>
             お問い合わせ登録<i className="btn-arr"></i>
           </button>
         </span>

src/hooks/useSuitable.ts

@@ -1,24 +1,37 @@
-import { useQuery } from '@tanstack/react-query'
+import { useInfiniteQuery } from '@tanstack/react-query'
-import { axiosInstance, transformObjectKeys } from '@/libs/axios'
+import { transformObjectKeys } from '@/libs/axios'
 import { useSuitableStore } from '@/store/useSuitableStore'
+import { useAxios } from './useAxios'
 import { useCommCode } from './useCommCode'
 import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
 
 export function useSuitable() {
+  const { axiosInstance } = useAxios()
   const { getCommCode } = useCommCode()
-  const { selectedCategory, searchValue, suitableCommCode, setSuitableCommCode, isSearch } = useSuitableStore()
+  const { itemPerPage, selectedCategory, searchValue, suitableCommCode, setSuitableCommCode, isSearch } = useSuitableStore()
+  
 
-  const getSuitables = async (): Promise<Suitable[]> => {
+  const getSuitables = async ({
+    pageNumber,
+    ids,
+    category,
+    keyword,
+  }: {
+    pageNumber?: number
+    ids?: string
+    category?: string
+    keyword?: string
+  }): Promise<Suitable[]> => {
     try {
-      const response = await axiosInstance(null).get<Suitable[]>('/api/suitable/list', {
+      const params: Record<string, string | number> = {
-        params: {
+        pageNumber: pageNumber || 1,
-          pageNumber: 1,
+        itemPerPage: itemPerPage,
-          itemPerPage: 1000,
+      }
-          ids: '',
+      if (ids) params.ids = ids
-          category: '',
+      if (category) params.category = category
-          keyword: '',
+      if (keyword) params.keyword = keyword
-        },
+
-      })
+      const response = await axiosInstance(null).get<Suitable[]>('/api/suitable/list', { params })
       return response.data
     } catch (error) {
       console.error('지붕재 데이터 로드 실패:', error)
@@ -26,16 +39,6 @@ export function useSuitable() {
     }
   }
 
-  // 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) {
@@ -63,35 +66,30 @@ export function useSuitable() {
     }
   }
 
-  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,
+    data: suitables,
-    refetch: refetchBySearch,
+    fetchNextPage,
-    isLoading: isSearchLoading,
+    hasNextPage,
-  } = useQuery<Suitable[]>({
+    isFetchingNextPage,
-    queryKey: ['suitables', 'search', selectedCategory, isSearch],
+    isLoading,
-    queryFn: async () => {
+    isError,
-      if (!isSearch && !selectedCategory) {
+    error,
-        return isInitialLoading ? await getSuitables() : suitableList ?? [] // 검색 상태가 아니면 초기 데이터 반환 임시처리
+  } = useInfiniteQuery<Suitable[]>({
-      } else {
+    queryKey: ['suitables', 'list', selectedCategory, isSearch],
-        return (
+    queryFn: async (context) => {
-          suitableList?.filter((item: Suitable) => {
+      const pageParam = context.pageParam as number
-            const categoryMatch = !selectedCategory || item.roofMtCd === selectedCategory
+      return await getSuitables({
-            const searchMatch = !searchValue || item.productName.includes(searchValue)
+        pageNumber: pageParam,
-            return categoryMatch && searchMatch
+        ...(selectedCategory && { category: selectedCategory }),
-          }) ?? []
+        ...(isSearch && { keyword: searchValue }),
-        )
+      })
-      }
     },
+    getNextPageParam: (lastPage: Suitable[], allPages: Suitable[][]) => {
+      return lastPage.length === itemPerPage ? allPages.length + 1 : undefined
+    },
+    initialPageParam: 1,
     staleTime: 1000 * 60 * 10,
     gcTime: 1000 * 60 * 10,
-    enabled: true,
   })
 
   return {
@@ -99,9 +97,10 @@ export function useSuitable() {
     getSuitableCommCode,
     toCodeName,
     toSuitableDetail,
-    suitableList,
+    suitables,
-    suitableSearchResults,
+    fetchNextPage,
-    refetchBySearch,
+    hasNextPage,
-    isSearchLoading,
+    isFetchingNextPage,
+    isLoading,
   }
 }

src/store/useSuitableStore.ts

@@ -2,6 +2,9 @@ import { create } from 'zustand'
 import type { CommCode } from '@/types/CommCode'
 
 interface SuitableState {
+  /* 초기 데이터 로드 개수*/
+  itemPerPage: number
+
   /* 공통코드 */
   suitableCommCode: Map<string, CommCode[]>
   /* 공통코드 설정 */
@@ -23,21 +26,22 @@ interface SuitableState {
   setSearchValue: (value: string) => void
 
   /* 선택된 아이템 리스트 */
-  selectedItems: number[]
+  selectedItems: Map<number, Set<number>>
   /* 선택된 아이템 추가 */
-  addSelectedItem: (itemId: number) => void
+  addSelectedItem: (mainId: number, detailId?: number) => void
   /* 선택된 아이템 제거 */
-  removeSelectedItem: (itemId: number) => void
+  removeSelectedItem: (mainId: number, detailId?: number) => void
   /* 선택된 아이템 모두 제거 */
   clearSelectedItems: () => void
 }
 
 export const useSuitableStore = create<SuitableState>((set) => ({
+  itemPerPage: 100 as number,
   suitableCommCode: new Map() as Map<string, CommCode[]>,
   isSearch: false as boolean,
   selectedCategory: '' as string,
   searchValue: '' as string,
-  selectedItems: [] as number[],
+  selectedItems: new Map() as Map<number, Set<number>>,
 
   /* 공통코드 설정 */
   setSuitableCommCode: (headCode: string, commCode: CommCode[]) =>
@@ -55,17 +59,46 @@ export const useSuitableStore = create<SuitableState>((set) => ({
   setSearchValue: (value: string) => set({ searchValue: value }),
 
   /* 선택된 아이템 추가 */
-  addSelectedItem: (itemId: number) =>
+  addSelectedItem: (mainId: number, detailId?: number) => {
-    set((state) => ({
+    if (detailId) {
-      selectedItems: state.selectedItems.some((i) => i === itemId) ? state.selectedItems : [...state.selectedItems, itemId],
+      // 디테일(하위) 아이템 추가
-    })),
+      set((state) => {
+        const detailSet = state.selectedItems.get(mainId) || new Set()
+        detailSet.add(detailId)
+        state.selectedItems.set(mainId, detailSet)
+        return { selectedItems: state.selectedItems }
+      })
+    } else {
+      // 메인(상위) 아이템 추가
+      set((state) => {
+        state.selectedItems.set(mainId, new Set())
+        return { selectedItems: state.selectedItems }
+      })
+    }
+  },
 
   /* 선택된 아이템 제거 */
-  removeSelectedItem: (itemId: number) =>
+  removeSelectedItem: (mainId: number, detailId?: number) => {
-    set((state) => ({
+    set((state) => {
-      selectedItems: state.selectedItems.filter((i) => i !== itemId),
+      const newSelectedItems = new Map(state.selectedItems)
-    })),
+
+      if (!detailId) {
+        // 메인(상위) 아이템 제거
+        newSelectedItems.delete(mainId)
+        return { selectedItems: newSelectedItems }
+      }
+
+      // 디테일(하위) 아이템 제거
+      const detailSet = state.selectedItems.get(mainId) || new Set()
+      detailSet.delete(detailId)
+
+      // 디테일(하위)하위 아이템이 모두 제거되면 메인 아이템도 제거
+      detailSet.size === 0 ? newSelectedItems.delete(mainId) : newSelectedItems.set(mainId, detailSet)
+
+      return { selectedItems: newSelectedItems }
+    })
+  },
 
   /* 선택된 아이템 모두 제거 */
-  clearSelectedItems: () => set({ selectedItems: [] }),
+  clearSelectedItems: () => set({ selectedItems: new Map() as Map<number, Set<number>> }),
 }))

src/types/Suitable.ts

@@ -31,5 +31,6 @@ export type Suitable = {
   manuFtCd: string
   roofMtCd: string
   roofShCd: string
+  detailCnt: number
   detail: string
 }