Merge branch 'feature/survey' of https://git.hanasys.jp/qcast3/onsitesurvey into feature/inquiry

src/app/api/auth/route.ts

@@ -15,7 +15,9 @@ export async function POST(request: Request) {
   })
   console.log('🚀 ~ result ~ result:', result.data)
 
-  if (result.data.result.code === 200) {
+  let finalResult = {}
+
+  if (result.data.result.resultCode === 'S') {
     tracking({
       url: `/api/auth/login`,
       data: JSON.stringify({
@@ -72,52 +74,64 @@ export async function POST(request: Request) {
     console.log('end session edit!')
 
     await session.save()
-  }
 
-  const resultForSession = {
+    const resultForSession = {
-    LANG_CD: result.data.data.langCd,
+      LANG_CD: result.data.data.langCd,
-    CURR_PAGE: result.data.data.currPage,
+      CURR_PAGE: result.data.data.currPage,
-    ROW_COUNT: result.data.data.rowCount,
+      ROW_COUNT: result.data.data.rowCount,
-    START_ROW: result.data.data.startRow,
+      START_ROW: result.data.data.startRow,
-    END_ROW: result.data.data.endRow,
+      END_ROW: result.data.data.endRow,
-    COMP_CD: result.data.data.compCd,
+      COMP_CD: result.data.data.compCd,
-    AGENCY_STORE_ID: result.data.data.agencyStoreId,
+      AGENCY_STORE_ID: result.data.data.agencyStoreId,
-    STORE_ID: result.data.data.storeId,
+      STORE_ID: result.data.data.storeId,
-    STORE_NM: result.data.data.storeNm,
+      STORE_NM: result.data.data.storeNm,
-    USER_ID: result.data.data.userId,
+      USER_ID: result.data.data.userId,
-    CATEGORY: result.data.data.category,
+      CATEGORY: result.data.data.category,
-    USER_NM: result.data.data.userNm,
+      USER_NM: result.data.data.userNm,
-    USER_NM_KANA: result.data.data.userNmKana,
+      USER_NM_KANA: result.data.data.userNmKana,
-    TEL_NO: result.data.data.telNo,
+      TEL_NO: result.data.data.telNo,
-    FAX: result.data.data.fax,
+      FAX: result.data.data.fax,
-    EMAIL: result.data.data.email,
+      EMAIL: result.data.data.email,
-    LAST_EDIT_USER: result.data.data.lastEditUser,
+      LAST_EDIT_USER: result.data.data.lastEditUser,
-    STORE_GUBUN: result.data.data.storeGubun,
+      STORE_GUBUN: result.data.data.storeGubun,
-    PW_CURR: result.data.data.pwCurr,
+      PW_CURR: result.data.data.pwCurr,
-    PWD_INIT_YN: result.data.data.pwdInitYn,
+      PWD_INIT_YN: result.data.data.pwdInitYn,
-    APPR_STAT_CD: result.data.data.apprStatCd,
+      APPR_STAT_CD: result.data.data.apprStatCd,
-    LOGIN_FAIL_CNT: result.data.data.loginFailCnt,
+      LOGIN_FAIL_CNT: result.data.data.loginFailCnt,
-    LOGIN_FAIL_MIN_YN: result.data.data.loginFailMinYn,
+      LOGIN_FAIL_MIN_YN: result.data.data.loginFailMinYn,
-    PRICE_VIEW_STAT_CD: result.data.data.priceViewStatCd,
+      PRICE_VIEW_STAT_CD: result.data.data.priceViewStatCd,
-    GROUP_ID: result.data.data.groupId,
+      GROUP_ID: result.data.data.groupId,
-    STORE_LVL: result.data.data.storeLvl,
+      STORE_LVL: result.data.data.storeLvl,
-    CUST_CD: result.data.data.custCd,
+      CUST_CD: result.data.data.custCd,
-    BUILDER_NO: result.data.data.builderNo,
+      BUILDER_NO: result.data.data.builderNo,
-    IS_LOGGED_IN: true,
+      IS_LOGGED_IN: true,
-    ROLE: '',
+      ROLE: '',
-  }
+    }
 
-  if (result.data.data.userId === 'T01') {
+    if (result.data.data.userId === 'T01') {
-    resultForSession.ROLE = 'T01'
+      resultForSession.ROLE = 'T01'
-  } else if (result.data.data.groupId === '60000') {
+    } else if (result.data.data.groupId === '60000') {
-    resultForSession.ROLE = 'Admin'
+      resultForSession.ROLE = 'Admin'
-  } else if (result.data.data.groupId === '70000' && result.data.data.builderNo === null) {
+    } else if (result.data.data.groupId === '70000' && result.data.data.builderNo === null) {
-    resultForSession.ROLE = 'Admin_Sub'
+      resultForSession.ROLE = 'Admin_Sub'
-  } else if (result.data.data.groupId === '70000' && result.data.data.builderNo !== null) {
+    } else if (result.data.data.groupId === '70000' && result.data.data.builderNo !== null) {
-    resultForSession.ROLE = 'Builder'
+      resultForSession.ROLE = 'Builder'
+    } else {
+      resultForSession.ROLE = 'User'
+    }
+
+    finalResult = {
+      code: 200,
+      message: 'Login is Succecss!!',
+      result: resultForSession,
+    }
   } else {
-    resultForSession.ROLE = 'User'
+    finalResult = {
+      code: 400,
+      message: 'Login is Failed!!',
+      result: {},
+    }
   }
 
-  return NextResponse.json({ code: 200, message: 'Login is Succecss!!', result: resultForSession })
+  return NextResponse.json(finalResult)
 }

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

@@ -1,82 +1,66 @@
 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 category = searchParams.get('category')
     const keyword = searchParams.get('keyword')
 
-    let MainWhereCondition: any = {}
+    let query = `
-    const whereCondition: string[] = []
+    SELECT 
-    const params: string[] = []
+      msm.id
+      , msm.product_name
+      , 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
+            , 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 
+    WHERE 1=1
+      --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 (category) {
-      whereCondition.push(`${SUITABLE_HEAD_CODE.ROOF_MT_CD} = @P1`)
+      query = query.replace('--roofMtCd ', '')
-      params.push(category)
+      query = query.replace(':roofMtCd', category)
-      MainWhereCondition[SUITABLE_HEAD_CODE.ROOF_MT_CD] = category
     }
     if (keyword) {
-      whereCondition.push('PRODUCT_NAME LIKE @P2')
+      query = query.replace('--productName ', '')
-      params.push(`%${keyword}%`)
+      query = query.replace(':productName', keyword)
-      MainWhereCondition['PRODUCT_NAME'] = {
-        contains: keyword,
-      }
     }
-    const startTime = performance.now()
-    console.log(`쿼리 (main table) 시작 시간: ${startTime}ms`)
 
-    // @ts-ignore
+    const suitable: Suitable[] = await prisma.$queryRawUnsafe(query, pageNumber, itemPerPage)
-    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 endTime = performance.now()
+    return NextResponse.json(suitable)
-    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 })
   } catch (error) {
     console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
     return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })

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

@@ -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 })
-  }
-}

src/app/api/survey-sales/[id]/route.ts

@@ -21,7 +21,6 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
 
 const getNewSrlNo = async (srlNo: string, storeId: string) => {
   let newSrlNo = srlNo
-  console.log('srlNo:: ', srlNo)
   if (srlNo.startsWith('一時保存')) {
     //@ts-ignore
     const lastSurvey = await prisma.SD_SURVEY_SALES_BASIC_INFO.findFirst({
@@ -128,7 +127,6 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
           SRL_NO: newSrlNo,
         },
       })
-      console.log(survey)
       return NextResponse.json({ message: 'Survey confirmed successfully' })
     }
   } catch (error) {

src/app/api/survey-sales/route.ts

@@ -1,7 +1,6 @@
 import { NextResponse } from 'next/server'
 import { prisma } from '@/libs/prisma'
 import { convertToSnakeCase } from '@/utils/common-utils'
-import { equal } from 'assert'
 /**
  * 검색 파라미터
  */
@@ -32,6 +31,7 @@ const SEARCH_OPTIONS = [
   'POST_CODE', // 우편번호
   'ADDRESS', // 주소
   'ADDRESS_DETAIL', // 상세주소
+  'SRL_NO', // 등록번호
 ] as const
 
 // 페이지당 항목 수
@@ -50,13 +50,6 @@ const createKeywordSearchCondition = (keyword: string, searchOption: string): Wh
     // 모든 필드 검색 시 OR 조건 사용
     where.OR = []
 
-    // ID가 숫자인 경우 ID 검색 조건 추가
-    if (keyword.match(/^\d+$/) || !isNaN(Number(keyword))) {
-      where.OR.push({
-        ID: { equals: Number(keyword) },
-      })
-    }
-
     where.OR.push(
       ...SEARCH_OPTIONS.map((field) => ({
         [field]: { contains: keyword },
@@ -65,15 +58,6 @@ const createKeywordSearchCondition = (keyword: string, searchOption: string): Wh
   } else if (SEARCH_OPTIONS.includes(searchOption.toUpperCase() as any)) {
     // 특정 필드 검색
     where[searchOption.toUpperCase()] = { contains: keyword }
-  } else if (searchOption === 'id') {
-    // ID 검색 (숫자 변환 필요)
-    const number = Number(keyword)
-    if (!isNaN(number)) {
-      where.ID = { equals: number }
-    } else {
-      // 유효하지 않은 ID 검색 시 빈 결과 반환
-      where.ID = { equals: null }
-    }
   }
   return where
 }

src/app/suitable-test/layout.tsx

@@ -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>
-    </>
-  )
-}

src/app/suitable-test/page.tsx

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

src/components/Login.tsx

@@ -39,6 +39,26 @@ export default function Login() {
     return emailRegex.test(email)
   }
 
+  const handleLogin = () => {
+    if (validateLogin()) {
+      setIsLogin(true)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleLogin()
+    }
+  }
+
+  const validateLogin = () => {
+    if (account.loginId === '' || account.pwd === '') {
+      alert('Please enter your ID and password.')
+      return false
+    }
+    return true
+  }
+
   interface LoginData {
     code: number
     message: string | null
@@ -85,6 +105,9 @@ export default function Login() {
         ...loginData?.result,
       })
       router.push('/')
+    } else if (loginData?.code === 400) {
+      alert(loginData?.message)
+      setAccount({ loginId: '', pwd: '' })
     }
   }, [loginData])
 
@@ -106,6 +129,7 @@ export default function Login() {
               className="login-frame"
               placeholder="Input Frame ID"
               value={account.loginId}
+              onKeyDown={(e) => handleKeyDown(e)}
               onChange={(e) => setAccount({ loginId: e.target.value })}
             />
             <button className="login-icon" onClick={() => setAccount({ loginId: '' })}>
@@ -120,6 +144,7 @@ export default function Login() {
               className="login-frame"
               placeholder="Input Frame PW"
               value={account.pwd}
+              onKeyDown={(e) => handleKeyDown(e)}
               onChange={(e) => setAccount({ pwd: e.target.value })}
             />
             <button className={`login-icon ${pwShow ? 'act' : ''}`} onClick={() => setPwShow(!pwShow)}>
@@ -141,7 +166,7 @@ export default function Login() {
           </div>
         </div>
         <div className="login-btn-wrap">
-          <button className="btn-frame icon login" onClick={() => setIsLogin(true)}>
+          <button className="btn-frame icon login" onClick={handleLogin}>
             お問い合わせ <i className="btn-arr"></i>
           </button>
         </div>

src/components/suitable/Suitable.tsx

@@ -11,7 +11,7 @@ import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
 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 Suitable() {
       return
     }
     setIsSearch(true)
-    refetchBySearch()
   }
 
   const handleInputClear = () => {
     setSearchValue('')
     setIsSearch(false)
-    refetchBySearch()
   }
 
-  useEffect(() => {
-    refetchBySearch()
-  }, [selectedCategory])
-
   useEffect(() => {
     getSuitableCommCode()
     return () => {
@@ -62,6 +56,11 @@ export default function Suitable() {
             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} />

src/components/suitable/SuitableList.tsx

@@ -1,80 +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 SuitableMain, type SuitableDetail } from '@/types/Suitable'
+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, toSuitableDetailIds, suitables, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useSuitable()
   const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
-
   const [openItems, setOpenItems] = useState<Set<number>>(new Set())
-  const [visibleItems, setVisibleItems] = useState<SuitableMain[]>([])
-  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.suitable.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.suitable.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, detailIds?: Set<number>): void => {
-      isItemSelected(itemId) ? removeSelectedItem(itemId) : addSelectedItem(itemId)
+      isItemSelected(mainId, detailId) ? removeSelectedItem(mainId, detailId) : addSelectedItem(mainId, detailId, detailIds)
     },
     [isItemSelected, addSelectedItem, removeSelectedItem],
   )
 
+  // 아이템 열기/닫기
   const toggleItemOpen = useCallback((itemId: number) => {
     setOpenItems((prev) => {
       const newOpenItems = new Set(prev)
@@ -85,38 +54,31 @@ 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: SuitableMain) => {
+    (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, undefined, toSuitableDetailIds(item.detail))}
+              />
               <label htmlFor={`ch${item.id}`}>{item.productName}</label>
             </div>
             <div className="check-name-btn">
@@ -124,11 +86,16 @@ 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">
-                    <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">
@@ -149,24 +116,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?.suitable.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/SuitableListRaw.tsx

@@ -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 />
-    </>
-  )
-}

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/components/suitable/SuitableRaw.tsx

@@ -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>
-  )
-}

src/components/survey-sale/list/ListTable.tsx

@@ -27,7 +27,7 @@ export default function ListTable() {
   }, [pathname])
 
   useEffect(() => {
-    if (!session.isLoggedIn || !('data' in surveyList)) return
+    if (!session.isLoggedIn || isLoadingSurveyList) return
     if ('count' in surveyList && surveyList.count > 0) {
       if (offset > 0) {
         setHeldSurveyList((prev) => [...prev, ...surveyList.data])
@@ -45,14 +45,12 @@ export default function ListTable() {
     router.push(`/survey-sale/${id}`)
   }
 
-  // TODO: 로딩 처리 필요
-
   return (
     <>
       <SearchForm memberRole={session?.role ?? ''} userNm={session?.userNm ?? ''} />
-        <div className="sale-frame">
+      <div className="sale-frame">
-          {heldSurveyList.length > 0 ? (
+        {heldSurveyList.length > 0 ? (
-            <ul className="sale-list-wrap">
+          <ul className="sale-list-wrap">
             {heldSurveyList.map((survey) => (
               <li className="sale-list-item cursor-pointer" key={survey.id} onClick={() => handleDetailClick(survey.id)}>
                 <div className="sale-item-bx">
@@ -67,18 +65,18 @@ export default function ListTable() {
                     <div className="sale-item-update">{new Date(survey.uptDt).toLocaleString()}</div>
                   </div>
                 </div>
-                </li>
+              </li>
-              ))}
+            ))}
-            </ul>
+          </ul>
-          ) : (
+        ) : (
-            <div className="compliace-nosearch">
+          <div className="compliace-nosearch">
-              <span className="mb10">作成された物件はありません。</span>
+            <span className="mb10">作成された物件はありません。</span>
-            </div>
-          )}
-          <div className="sale-edit-btn">
-            <LoadMoreButton hasMore={hasMore} onLoadMore={() => setOffset(offset + 10)} />
           </div>
+        )}
+        <div className="sale-edit-btn">
+          <LoadMoreButton hasMore={hasMore} onLoadMore={() => setOffset(offset + 10)} />
         </div>
+      </div>
     </>
   )
 }

src/components/survey-sale/list/SearchForm.tsx

@@ -6,7 +6,7 @@ import { useState } from 'react'
 
 export default function SearchForm({ memberRole, userNm }: { memberRole: string; userNm: string }) {
   const router = useRouter()
-  const { setSearchOption, setSort, setIsMySurvey, setKeyword, isMySurvey, keyword, searchOption, sort } = useSurveyFilterStore()
+  const { setSearchOption, setSort, setIsMySurvey, setKeyword, reset, isMySurvey, keyword, searchOption, sort } = useSurveyFilterStore()
   const [searchKeyword, setSearchKeyword] = useState(keyword)
   const [option, setOption] = useState(searchOption)
 
@@ -15,6 +15,7 @@ export default function SearchForm({ memberRole, userNm }: { memberRole: string;
       alert('2文字以上入力してください')
       return
     }
+    reset()
     setKeyword(searchKeyword)
     setSearchOption(option)
   }

src/hooks/useCommCode.ts

@@ -1,7 +1,8 @@
-import { axiosInstance } from '@/libs/axios'
+import { useAxios } from './useAxios'
 import type { CommCode } from '@/types/CommCode'
 
 export function useCommCode() {
+  const { axiosInstance } = useAxios()
   const getCommCode = async (headCode: string): Promise<CommCode[]> => {
     try {
       const response = await axiosInstance(null).get<CommCode[]>('/api/comm-code', { params: { headCode: headCode } })

src/hooks/useSuitable.ts

@@ -1,33 +1,43 @@
-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 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 { 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> = {
+        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)
-      return { suitable: [], detail: [] }
+      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) {
@@ -42,12 +52,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,39 +65,39 @@ export function useSuitable() {
     }
   }
 
-  const { data: suitableList, isLoading: isInitialLoading } = useQuery<Suitable>({
+  const toSuitableDetailIds = (suitableDetailString: string): Set<number> => {
-    queryKey: ['suitables', 'list'],
+    try {
-    queryFn: async () => await getSuitables(),
+      return new Set<number>(JSON.parse(suitableDetailString).map(({ id }: { id: number }) => id))
-    staleTime: 1000 * 60 * 10, // 10분
+    } catch (error) {
-    gcTime: 1000 * 60 * 10, // 10분
+      console.error('지붕재 데이터 파싱 실패:', error)
-  })
+      return new Set()
+    }
+  }
 
   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,
-        // 검색 상태가 아니면 초기 데이터 반환 임시처리
+  } = useInfiniteQuery<Suitable[]>({
-        return isInitialLoading ? await getSuitables() : suitableList ?? { suitable: [], detail: [] }
+    queryKey: ['suitables', 'list', selectedCategory, isSearch],
-      } else {
+    queryFn: async (context) => {
-        const filteredSuitable = suitableList?.suitable.filter((item: SuitableMain) => {
+      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 }),
-        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 }
-      }
     },
+    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 +105,11 @@ export function useSuitable() {
     getSuitableCommCode,
     toCodeName,
     toSuitableDetail,
-    suitableList,
+    toSuitableDetailIds,
-    suitableSearchResults,
+    suitables,
-    refetchBySearch,
+    fetchNextPage,
-    isSearchLoading,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
   }
 }

src/hooks/useSuitableRaw.ts

@@ -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,
-  }
-}

src/store/surveyFilterStore.ts

@@ -6,7 +6,7 @@ export const SEARCH_OPTIONS = [
     label: '全体',
   },
   {
-    id: 'id',
+    id: 'srl_no',
     label: '登録番号',
   },
   {
@@ -41,7 +41,7 @@ export const SEARCH_OPTIONS_PARTNERS = [
     label: '全体',
   },
   {
-    id: 'id',
+    id: 'srl_no',
     label: '登録番号',
   },
   {

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, detailIds?: Set<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, detailIds?: Set<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, detailIds || 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

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