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

2025-05-23 11:20:17 +09:00 · 2025-05-23 11:20:17 +09:00 · 2b8cbe1aed
commit 2b8cbe1aed
parent 57a1e6a69b 1f044337d6
21 changed files with 355 additions and 836 deletions
--- a/src/app/api/auth/route.ts
+++ b/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 = {
-    LANG_CD: result.data.data.langCd,
-    CURR_PAGE: result.data.data.currPage,
-    ROW_COUNT: result.data.data.rowCount,
-    START_ROW: result.data.data.startRow,
-    END_ROW: result.data.data.endRow,
-    COMP_CD: result.data.data.compCd,
-    AGENCY_STORE_ID: result.data.data.agencyStoreId,
-    STORE_ID: result.data.data.storeId,
-    STORE_NM: result.data.data.storeNm,
-    USER_ID: result.data.data.userId,
-    CATEGORY: result.data.data.category,
-    USER_NM: result.data.data.userNm,
-    USER_NM_KANA: result.data.data.userNmKana,
-    TEL_NO: result.data.data.telNo,
-    FAX: result.data.data.fax,
-    EMAIL: result.data.data.email,
-    LAST_EDIT_USER: result.data.data.lastEditUser,
-    STORE_GUBUN: result.data.data.storeGubun,
-    PW_CURR: result.data.data.pwCurr,
-    PWD_INIT_YN: result.data.data.pwdInitYn,
-    APPR_STAT_CD: result.data.data.apprStatCd,
-    LOGIN_FAIL_CNT: result.data.data.loginFailCnt,
-    LOGIN_FAIL_MIN_YN: result.data.data.loginFailMinYn,
-    PRICE_VIEW_STAT_CD: result.data.data.priceViewStatCd,
-    GROUP_ID: result.data.data.groupId,
-    STORE_LVL: result.data.data.storeLvl,
-    CUST_CD: result.data.data.custCd,
-    BUILDER_NO: result.data.data.builderNo,
-    IS_LOGGED_IN: true,
-    ROLE: '',
-  }
+    const resultForSession = {
+      LANG_CD: result.data.data.langCd,
+      CURR_PAGE: result.data.data.currPage,
+      ROW_COUNT: result.data.data.rowCount,
+      START_ROW: result.data.data.startRow,
+      END_ROW: result.data.data.endRow,
+      COMP_CD: result.data.data.compCd,
+      AGENCY_STORE_ID: result.data.data.agencyStoreId,
+      STORE_ID: result.data.data.storeId,
+      STORE_NM: result.data.data.storeNm,
+      USER_ID: result.data.data.userId,
+      CATEGORY: result.data.data.category,
+      USER_NM: result.data.data.userNm,
+      USER_NM_KANA: result.data.data.userNmKana,
+      TEL_NO: result.data.data.telNo,
+      FAX: result.data.data.fax,
+      EMAIL: result.data.data.email,
+      LAST_EDIT_USER: result.data.data.lastEditUser,
+      STORE_GUBUN: result.data.data.storeGubun,
+      PW_CURR: result.data.data.pwCurr,
+      PWD_INIT_YN: result.data.data.pwdInitYn,
+      APPR_STAT_CD: result.data.data.apprStatCd,
+      LOGIN_FAIL_CNT: result.data.data.loginFailCnt,
+      LOGIN_FAIL_MIN_YN: result.data.data.loginFailMinYn,
+      PRICE_VIEW_STAT_CD: result.data.data.priceViewStatCd,
+      GROUP_ID: result.data.data.groupId,
+      STORE_LVL: result.data.data.storeLvl,
+      CUST_CD: result.data.data.custCd,
+      BUILDER_NO: result.data.data.builderNo,
+      IS_LOGGED_IN: true,
+      ROLE: '',
+    }

-  if (result.data.data.userId === 'T01') {
-    resultForSession.ROLE = 'T01'
-  } else if (result.data.data.groupId === '60000') {
-    resultForSession.ROLE = 'Admin'
-  } else if (result.data.data.groupId === '70000' && result.data.data.builderNo === null) {
-    resultForSession.ROLE = 'Admin_Sub'
-  } else if (result.data.data.groupId === '70000' && result.data.data.builderNo !== null) {
-    resultForSession.ROLE = 'Builder'
+    if (result.data.data.userId === 'T01') {
+      resultForSession.ROLE = 'T01'
+    } else if (result.data.data.groupId === '60000') {
+      resultForSession.ROLE = 'Admin'
+    } else if (result.data.data.groupId === '70000' && result.data.data.builderNo === null) {
+      resultForSession.ROLE = 'Admin_Sub'
+    } else if (result.data.data.groupId === '70000' && result.data.data.builderNo !== null) {
+      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)
 }
--- a/src/app/api/suitable/list/route.ts
+++ b/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 = {}
-    const whereCondition: string[] = []
-    const params: string[] = []
+    let query = `
+    SELECT 
+      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`)
-      params.push(category)
-      MainWhereCondition[SUITABLE_HEAD_CODE.ROOF_MT_CD] = category
+      query = query.replace('--roofMtCd ', '')
+      query = query.replace(':roofMtCd', category)
    }
    if (keyword) {
-      whereCondition.push('PRODUCT_NAME LIKE @P2')
-      params.push(`%${keyword}%`)
-      MainWhereCondition['PRODUCT_NAME'] = {
-        contains: keyword,
-      }
+      query = query.replace('--productName ', '')
+      query = query.replace(':productName', keyword)
    }
-    const startTime = performance.now()
-    console.log(`쿼리 (main table) 시작 시간: ${startTime}ms`)

-    // @ts-ignore
-    const suitable = await prisma.MS_SUITABLE_MAIN.findMany({
-      select: {
-        ID: true,
-        PRODUCT_NAME: true,
-        ROOF_MT_CD: true,
-      },
-      where: MainWhereCondition,
-      orderBy: {
-        PRODUCT_NAME: 'asc',
-      },
-    })
+    const suitable: Suitable[] = await prisma.$queryRawUnsafe(query, pageNumber, itemPerPage)

-    const endTime = performance.now()
-    console.log(`쿼리 (main table) 종료 시간: ${endTime - startTime}ms`)
-
-    const mainIds: number[] = suitable.map((item: SuitableMain) => item.id)
-
-
-    const startTime2 = performance.now()
-    console.log(`쿼리 (detail table) 시작 시간: ${startTime2}ms`)
-    let detailQuery = `
-    SELECT
-      msd.main_id
-      , (
-        SELECT
-          msd_json.id
-          , msd_json.trestle_mfpc_cd
-          , msd_json.trestle_manufacturer_product_name
-          , msd_json.memo
-        FROM ms_suitable_detail msd_json
-          WHERE msd.main_id = msd_json.main_id
-        FOR JSON PATH
-      ) AS detail
-    FROM ms_suitable_detail msd
-    -- WHERE 1=1
-    GROUP BY msd.main_id
-    `
-    if (whereCondition.length > 0) {
-      detailQuery = detailQuery.replace('-- WHERE 1=1', `WHERE msd.main_id IN @P1`)
-    }
-    // @ts-ignore
-    const detail = await prisma.$queryRawUnsafe(detailQuery, ...mainIds)
-
-    const endTime2 = performance.now()
-    console.log(`쿼리 (detail table) 종료 시간: ${endTime2 - startTime2}ms`)
-
-    const endTime3 = performance.now()
-    console.log(`쿼리 총 실행 시간: ${endTime3 - startTime}ms`)
-
-    return NextResponse.json({ suitable, detail })
+    return NextResponse.json(suitable)
  } catch (error) {
    console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
    return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
--- a/src/app/api/suitable/list/test/route.ts
+++ b/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 })
-  }
-}
--- a/src/app/api/survey-sales/[id]/route.ts
+++ b/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) {
--- a/src/app/api/survey-sales/route.ts
+++ b/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
 }
--- a/src/app/suitable-test/layout.tsx
+++ b/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>
-    </>
-  )
-}
--- a/src/app/suitable-test/page.tsx
+++ b/src/app/suitable-test/page.tsx
@ -1,9 +0,0 @@
-import SuitableRaw from '@/components/suitable/SuitableRaw'
-
-export default function page() {
-  return (
-    <>
-      <SuitableRaw />
-    </>
-  )
-}
--- a/src/components/Login.tsx
+++ b/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>
--- a/src/components/suitable/Suitable.tsx
+++ b/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} />
--- a/src/components/suitable/SuitableList.tsx
+++ b/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'
-
-// 한 번에 로드할 아이템 수
-const ITEMS_PER_PAGE = 100
+import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'

 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)

-  // 선택된 아이템 확인 함수 메모이제이션
-  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.suitable.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.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 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, detailIds?: Set<number>): void => {
+      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 === '×') {
-      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: SuitableMain) => {
-      const isSelected = isItemSelected(item.id)
-      const isOpen = openItems.has(item.id)
-
+    (item: Suitable) => {
      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, 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(() => {
-    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?.suitable.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/SuitableListRaw.tsx
+++ b/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 />
-    </>
-  )
-}
--- 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/components/suitable/SuitableRaw.tsx
+++ b/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>
-  )
-}
--- a/src/components/survey-sale/list/ListTable.tsx
+++ b/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">
-          {heldSurveyList.length > 0 ? (
-            <ul className="sale-list-wrap">
+      <div className="sale-frame">
+        {heldSurveyList.length > 0 ? (
+          <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>
-              ))}
-            </ul>
-          ) : (
-            <div className="compliace-nosearch">
-              <span className="mb10">作成された物件はありません。</span>
-            </div>
-          )}
-          <div className="sale-edit-btn">
-            <LoadMoreButton hasMore={hasMore} onLoadMore={() => setOffset(offset + 10)} />
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div className="compliace-nosearch">
+            <span className="mb10">作成された物件はありません。</span>
          </div>
+        )}
+        <div className="sale-edit-btn">
+          <LoadMoreButton hasMore={hasMore} onLoadMore={() => setOffset(offset + 10)} />
        </div>
+      </div>
    </>
  )
 }
--- a/src/components/survey-sale/list/SearchForm.tsx
+++ b/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)
  }
--- a/src/hooks/useCommCode.ts
+++ b/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 } })
--- a/src/hooks/useSuitable.ts
+++ b/src/hooks/useSuitable.ts
@ -1,33 +1,43 @@
-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 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>({
-    queryKey: ['suitables', 'list'],
-    queryFn: async () => await getSuitables(),
-    staleTime: 1000 * 60 * 10, // 10분
-    gcTime: 1000 * 60 * 10, // 10분
-  })
+  const toSuitableDetailIds = (suitableDetailString: string): Set<number> => {
+    try {
+      return new Set<number>(JSON.parse(suitableDetailString).map(({ id }: { id: number }) => id))
+    } catch (error) {
+      console.error('지붕재 데이터 파싱 실패:', error)
+      return new Set()
+    }
+  }

  const {
-    data: suitableSearchResults,
-    refetch: refetchBySearch,
-    isLoading: isSearchLoading,
-  } = useQuery<Suitable>({
-    queryKey: ['suitables', 'search', selectedCategory, isSearch],
-    queryFn: async () => {
-      if (!isSearch && !selectedCategory) {
-        // 검색 상태가 아니면 초기 데이터 반환 임시처리
-        return isInitialLoading ? await getSuitables() : suitableList ?? { suitable: [], detail: [] }
-      } else {
-        const filteredSuitable = suitableList?.suitable.filter((item: SuitableMain) => {
-          const categoryMatch = !selectedCategory || item.roofMtCd === selectedCategory
-          const searchMatch = !searchValue || item.productName.includes(searchValue)
-          return categoryMatch && searchMatch
-        }) ?? []
-        const mainIds = filteredSuitable.map((item: SuitableMain) => item.id)
-        const filteredDetail = suitableList?.detail.filter((item: SuitableDetailGroup) => {
-          return mainIds.includes(item.mainId)
-        }) ?? []
-        return { suitable: filteredSuitable, detail: filteredDetail }
-      }
+    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 +105,11 @@ export function useSuitable() {
    getSuitableCommCode,
    toCodeName,
    toSuitableDetail,
-    suitableList,
-    suitableSearchResults,
-    refetchBySearch,
-    isSearchLoading,
+    toSuitableDetailIds,
+    suitables,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
  }
 }
--- a/src/hooks/useSuitableRaw.ts
+++ b/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,
-  }
-}
--- a/src/store/surveyFilterStore.ts
+++ b/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: '登録番号',
  },
  {
--- 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, 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) =>
-    set((state) => ({
-      selectedItems: state.selectedItems.some((i) => i === itemId) ? state.selectedItems : [...state.selectedItems, itemId],
-    })),
+  addSelectedItem: (mainId: number, detailId?: number, detailIds?: Set<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, detailIds || 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
@ -25,20 +25,12 @@ export type SuitableDetail = {
  memo: string
 }

-// export type Suitable = {
-//   id: number
-//   productName: string
-//   manuFtCd: string
-//   roofMtCd: string
-//   roofShCd: string
-//   detail: string
-// }
-
-export type SuitableDetailGroup = {
-  mainId: number
+export type Suitable = {
+  id: number
+  productName: string
+  manuFtCd: string
+  roofMtCd: string
+  roofShCd: string
+  detailCnt: number
  detail: string
 }
-export type Suitable = {
-  suitable: SuitableMain[]
-  detail: SuitableDetailGroup[]
-}