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

2025-05-22 18:16:31 +09:00 · 2025-05-22 18:16:31 +09:00 · 2e0ff4ae6f
commit 2e0ff4ae6f
parent 80194efec1
7 changed files with 182 additions and 177 deletions
--- a/src/app/api/suitable/list/route.ts
+++ b/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
-      , msm.roof_mt_cd
-      , msm.roof_sh_cd
+      , details.detail_cnt
      , 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)
--- a/src/components/suitable/Suitable.tsx
+++ b/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>
  )
--- a/src/components/suitable/SuitableList.tsx
+++ b/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)

-  // 선택된 아이템 확인 함수 메모이제이션
-  const isItemSelected = useCallback(
-    (itemId: number) => {
-      return selectedItems.some((selected) => selected === itemId)
+  // 선택된 아이템 확인 - 메인 하위 아이템 indeterminate 확인
+  const isMainIndeterminate = useMemo(
+    () => (mainId: number, detailCnt: number) => {
+      const mainItem = selectedItems.get(mainId)
+      if (!mainItem) return false
+      return mainItem.size > 0 && mainItem.size < detailCnt
    },
    [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 isItemSelected = useCallback(
+    (mainId: number, detailId?: number): boolean => {
+      const mainItem = selectedItems.get(mainId)
+      if (!mainItem) return false
+      if (!detailId) return true
+      return mainItem.has(detailId)
+    },
+    [selectedItems],
+  )

+  // 아이템 클릭
  const handleItemClick = useCallback(
-    (itemId: number) => {
-      isItemSelected(itemId) ? removeSelectedItem(itemId) : addSelectedItem(itemId)
+    (mainId: number, detailId?: number): void => {
+      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 === '×') {
-      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 iconMap: Record<string, string> = {
+      '×': '/assets/images/sub/compliance_x_icon.svg',
+      ー: '/assets/images/sub/compliance_quest_icon.svg',
+      default: '/assets/images/sub/compliance_check_icon.svg',
    }
+    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 ">
-              <input type="checkbox" id={`ch${item.id}`} checked={isSelected} onChange={() => handleItemClick(item.id)} />
+            <div className={`check-form-box ${isMainIndeterminate(item.id, item.detailCnt) ? 'space' : ''}`}>
+              <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(() => {
-    return visibleItems.map(renderItem)
-  }, [visibleItems, renderItem])
+  // 아이템 리스트
+  const suitableList = suitables?.pages.flat() ?? []

-  if (isSearchLoading) {
-    return <div>Loading...</div>
-  }
+  // Intersection Observer 설정
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage()
+        }
+      },
+      {
+        threshold: 0,
+        rootMargin: '100px',
+      },
+    )

-  if (!suitableSearchResults?.length) {
-    return <SuitableNoData />
-  }
+    if (observerTarget.current) {
+      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 />
    </>
--- a/src/components/suitable/SuitableNoData.tsx
+++ b/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>
--- a/src/hooks/useSuitable.ts
+++ b/src/hooks/useSuitable.ts
@ -1,24 +1,37 @@
-import { useQuery } from '@tanstack/react-query'
-import { axiosInstance, transformObjectKeys } from '@/libs/axios'
+import { useInfiniteQuery } from '@tanstack/react-query'
+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', {
-        params: {
-          pageNumber: 1,
-          itemPerPage: 1000,
-          ids: '',
-          category: '',
-          keyword: '',
-        },
-      })
+      const params: Record<string, string | number> = {
+        pageNumber: pageNumber || 1,
+        itemPerPage: itemPerPage,
+      }
+      if (ids) params.ids = ids
+      if (category) params.category = category
+      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,
-    refetch: refetchBySearch,
-    isLoading: isSearchLoading,
-  } = 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
-          }) ?? []
-        )
-      }
+    data: suitables,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isError,
+    error,
+  } = useInfiniteQuery<Suitable[]>({
+    queryKey: ['suitables', 'list', selectedCategory, isSearch],
+    queryFn: async (context) => {
+      const pageParam = context.pageParam as number
+      return await getSuitables({
+        pageNumber: pageParam,
+        ...(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,
-    suitableSearchResults,
-    refetchBySearch,
-    isSearchLoading,
+    suitables,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
  }
 }
--- a/src/store/useSuitableStore.ts
+++ b/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) =>
-    set((state) => ({
-      selectedItems: state.selectedItems.some((i) => i === itemId) ? state.selectedItems : [...state.selectedItems, itemId],
-    })),
+  addSelectedItem: (mainId: number, detailId?: number) => {
+    if (detailId) {
+      // 디테일(하위) 아이템 추가
+      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) =>
-    set((state) => ({
-      selectedItems: state.selectedItems.filter((i) => i !== itemId),
-    })),
+  removeSelectedItem: (mainId: number, detailId?: number) => {
+    set((state) => {
+      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>> }),
 }))
--- a/src/types/Suitable.ts
+++ b/src/types/Suitable.ts
@ -31,5 +31,6 @@ export type Suitable = {
  manuFtCd: string
  roofMtCd: string
  roofShCd: string
+  detailCnt: number
  detail: string
 }