Merge branch 'feature/suitable' into dev

README.md

@@ -58,3 +58,20 @@ session에 있는 role 키로 구분한다
   session.role === 'Partner'
 - 이외의 경우 -> 굳이 체크할 필요 없어보임\
   session.role === 'User'
+
+
+# 지붕재 적합성 TODO
+
+```
+const suitableCheck = (value: string) => {
+    if (value === '×') {
+      return <i className="compliance-icon x" />
+    } else if (value === 'ー') {
+      return <i className="compliance-icon quest" />
+    } else {
+      return <i className="compliance-icon check" />
+    }
+  }
+```
+
+- 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요

src/app/api/comm-code/route.ts

@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/libs/prisma'
+import type { CommCode } from '@/types/CommCode'
+
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams
+    const headCode = searchParams.get('headCode')
+
+    // @ts-ignore
+    const headCd = await prisma.BC_COMM_H.findFirst({
+      where: {
+        HEAD_ID: headCode,
+      },
+      select: {
+        HEAD_CD: true,
+      },
+    })
+
+    if (!headCd) {
+      return NextResponse.json({ error: `${headCode}를 찾을 수 없습니다` }, { status: 404 })
+    }
+
+    // @ts-ignore
+    const roofMaterials: CommCode[] = await prisma.BC_COMM_L.findMany({
+      where: {
+        HEAD_CD: headCd.HEAD_CD,
+      },
+      select: {
+        HEAD_CD: true,
+        CODE: true,
+        CODE_JP: true,
+      },
+      orderBy: {
+        CODE: 'asc',
+      },
+    })
+
+    return NextResponse.json(roofMaterials)
+  } catch (error) {
+    console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
+    return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
+  }
+}

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

@@ -1,16 +0,0 @@
-import { NextResponse } from 'next/server'
-import { prisma } from '@/libs/prisma'
-
-export async function GET() {
-  // @ts-ignore
-  const roofMaterialCategory = await prisma.MS_SUITABLE.findMany({
-    select: {
-      roof_material: true,
-    },
-    distinct: ['roof_material'],
-    orderBy: {
-      roof_material: 'asc',
-    },
-  })
-  return NextResponse.json(roofMaterialCategory)
-}

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

@@ -1,17 +0,0 @@
-import { NextResponse } from 'next/server'
-import { prisma } from '@/libs/prisma'
-
-export async function GET(request: Request) {
-  const { searchParams } = new URL(request.url)
-  const roofMaterial = searchParams.get('roof-material')
-  console.log('🚀 ~ GET ~ roof-material:', roofMaterial)
-
-  // @ts-ignore
-  const suitables = await prisma.MS_SUITABLE.findMany({
-    where: {
-      roof_material: roofMaterial,
-    },
-  })
-
-  return NextResponse.json(suitables)
-}

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

@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server'
 import { prisma } from '@/libs/prisma'
+import { SUITABLE_HEAD_CODE, type SuitableMain } from '@/types/Suitable'
 
 export async function GET(request: NextRequest) {
   try {
@@ -7,26 +8,75 @@ export async function GET(request: NextRequest) {
     const category = searchParams.get('category')
     const keyword = searchParams.get('keyword')
 
-    let whereCondition: any = {}
+    let MainWhereCondition: any = {}
+    const whereCondition: string[] = []
+    const params: string[] = []
     if (category) {
-      whereCondition['roof_material'] = category
+      whereCondition.push(`${SUITABLE_HEAD_CODE.ROOF_MT_CD} = @P1`)
+      params.push(category)
+      MainWhereCondition[SUITABLE_HEAD_CODE.ROOF_MT_CD] = category
     }
     if (keyword) {
-      whereCondition['product_name'] = {
+      whereCondition.push('PRODUCT_NAME LIKE @P2')
+      params.push(`%${keyword}%`)
+      MainWhereCondition['PRODUCT_NAME'] = {
         contains: keyword,
       }
     }
-    console.log('🚀 ~ /api/suitable/list: ~ prisma where condition:', whereCondition)
+    const startTime = performance.now()
+    console.log(`쿼리 (main table) 시작 시간: ${startTime}ms`)
 
     // @ts-ignore
-    const suitables = await prisma.MS_SUITABLE.findMany({
-      where: whereCondition,
+    const suitable = await prisma.MS_SUITABLE_MAIN.findMany({
+      select: {
+        ID: true,
+        PRODUCT_NAME: true,
+        ROOF_MT_CD: true,
+      },
+      where: MainWhereCondition,
       orderBy: {
-        product_name: 'asc',
+        PRODUCT_NAME: 'asc',
       },
     })
 
-    return NextResponse.json(suitables)
+    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 })
   } catch (error) {
     console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
     return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })

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

@@ -0,0 +1,71 @@
+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/suitable-test/layout.tsx

@@ -0,0 +1,24 @@
+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

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

src/components/suitable/Suitable.tsx

@@ -1,28 +1,70 @@
 'use client'
 
-import { useState } from 'react'
-import SuitableCheckData from './SuitableCheckData'
-import SuitableNoData from './SuitableNoData'
 import Image from 'next/image'
+import { useEffect, useState } from 'react'
+import SuitableList from './SuitableList'
+import { useSuitable } from '@/hooks/useSuitable'
+import { useSuitableStore } from '@/store/useSuitableStore'
+import type { CommCode } from '@/types/CommCode'
+import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
 
 export default function Suitable() {
-  const [reference, setReference] = useState(false)
+  const [reference, setReference] = useState(true)
+
+  const { getSuitableCommCode, refetchBySearch } = useSuitable()
+  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">
       <div className="sale-form-bx">
-        <select className="select-form" name="" id="">
-          <option value="">屋根材を選択してください.</option>
-          <option value="">屋根材を選択してください.</option>
-          <option value="">屋根材を選択してください.</option>
-          <option value="">屋根材を選択してください.</option>
+        <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="屋根材 製品名を入力してください." />
-          <button className="search-icon"></button>
+          <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">
@@ -68,37 +110,8 @@ export default function Suitable() {
             </li>
           </ul>
         </div>
-        {/* checkData */}
-        {/* 데이터 없을경우 버튼 영역 안보여야함 */}
-        <SuitableCheckData />
-        <SuitableCheckData />
-        <SuitableCheckData />
-        <SuitableCheckData />
-
-        {/* 데이터 없을경우 버튼 영역 안보여야함 */}
-        <div className="float-btn-wrap">
-          <div className="btn-flex-wrap com">
-            <div className="btn-bx">
-              <button className="btn-frame n-blue icon">
-                全選択<i className="btn-arr"></i>
-              </button>
+        <SuitableList />
       </div>
-            <div className="btn-bx">
-              <button className="btn-frame red icon">
-                詳細を見る<i className="btn-arr"></i>
-              </button>
-            </div>
-            <div className="btn-bx">
-              <button className="btn-frame n-blue icon">
-                選択ダウンロード<i className="btn-arr"></i>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* 검색기록 없을떄 위에 두 영역 안보이고 이 부분만 보여야 함*/}
-      {/* <SuitableNoData /> */}
     </div>
   )
 }

src/components/suitable/SuitableButton.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+export default function SuitableButton() {
+  return (
+    <div className="float-btn-wrap">
+      <div className="btn-flex-wrap com">
+        <div className="btn-bx">
+          <button className="btn-frame n-blue icon">
+            全選択<i className="btn-arr"></i>
+          </button>
+        </div>
+        <div className="btn-bx">
+          <button className="btn-frame red icon">
+            詳細を見る<i className="btn-arr"></i>
+          </button>
+        </div>
+        <div className="btn-bx">
+          <button className="btn-frame n-blue icon">
+            選択ダウンロード<i className="btn-arr"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/suitable/SuitableCheckData.tsx

@@ -1,81 +0,0 @@
-'use client'
-
-import Image from 'next/image'
-
-export default function SuitableCheckData() {
-  return (
-    <>
-      <div className={`compliance-check-bx act`}>
-        <div className="check-name-wrap">
-          <div className="check-form-box ch-bld">
-            <input type="checkbox" id="ch01" />
-            <label htmlFor="ch01">アースティ４０</label>
-          </div>
-          <div className="check-name-btn">
-            <button className="bx-btn"></button>
-          </div>
-        </div>
-        <ul className="reference-list check">
-          <li className="reference-item">
-            <div className="check-item-wrap">
-              <div className="check-form-box light">
-                <input type="checkbox" id="ch02" />
-                <label htmlFor="ch02">屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦</label>
-              </div>
-              <div className="compliance-icon-wrap">
-                <div className="compliance-icon">
-                  <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li className="reference-item">
-            <div className="check-item-wrap">
-              <div className="check-form-box light">
-                <input type="checkbox" id="ch03" />
-                <label htmlFor="ch03">屋根技研 支持金具</label>
-              </div>
-              <div className="compliance-icon-wrap">
-                <div className="compliance-icon">
-                  <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
-                </div>
-                <div className="compliance-icon">
-                  <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li className="reference-item">
-            <div className="check-item-wrap">
-              <div className="check-form-box light">
-                <input type="checkbox" id="ch04" />
-                <label htmlFor="ch04">屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦</label>
-              </div>
-              <div className="compliance-icon-wrap">
-                <div className="compliance-icon">
-                  <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
-                </div>
-                <div className="compliance-icon">
-                  <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li className="reference-item">
-            <div className="check-item-wrap">
-              <div className="check-form-box light">
-                <input type="checkbox" id="ch05" />
-                <label htmlFor="ch05">ダイドハント支持瓦Ⅱ</label>
-              </div>
-              <div className="compliance-icon-wrap">
-                <div className="compliance-icon">
-                  <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
-                </div>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </>
-  )
-}

src/components/suitable/SuitableList.tsx

@@ -0,0 +1,174 @@
+'use client'
+
+import Image from 'next/image'
+import { useState, useEffect, useRef, useCallback, 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
+
+export default function SuitableList() {
+  const { toCodeName, suitableSearchResults, isSearchLoading, toSuitableDetail } = useSuitable()
+  const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
+
+  const [openItems, setOpenItems] = useState<Set<number>>(new Set())
+  const [visibleItems, setVisibleItems] = useState<SuitableMain[]>([])
+  const [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.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 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: SuitableMain) => {
+      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.id).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?.suitable.length) {
+    return <SuitableNoData />
+  }
+
+  return (
+    <>
+      {renderedItems}
+      <div ref={observerTarget} className="loading-indicator">
+        {isLoadingMore && <div className="loading-more">데이터를 불러오는 중...</div>}
+      </div>
+      <SuitableButton />
+    </>
+  )
+}

src/components/suitable/SuitableListRaw.tsx

@@ -0,0 +1,173 @@
+'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/SuitableRaw.tsx

@@ -0,0 +1,118 @@
+'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/hooks/useCommCode.ts

@@ -0,0 +1,18 @@
+import { axiosInstance } from '@/libs/axios'
+import type { CommCode } from '@/types/CommCode'
+
+export function useCommCode() {
+  const getCommCode = async (headCode: string): Promise<CommCode[]> => {
+    try {
+      const response = await axiosInstance(null).get<CommCode[]>('/api/comm-code', { params: { headCode: headCode } })
+      return response.data
+    } catch (error) {
+      console.error(`common code (${headCode}) load failed:`, error)
+      return []
+    }
+  }
+
+  return {
+    getCommCode,
+  }
+}

src/hooks/useSuitable.ts

@@ -1,30 +1,107 @@
-import { suitableApi } from '@/api/suitable'
+import { useQuery } from '@tanstack/react-query'
+import { axiosInstance, transformObjectKeys } from '@/libs/axios'
+import { useSuitableStore } from '@/store/useSuitableStore'
+import { useCommCode } from './useCommCode'
+import { SUITABLE_HEAD_CODE, type SuitableDetailGroup, type SuitableMain, type Suitable, type SuitableDetail } from '@/types/Suitable'
 
 export function useSuitable() {
-  const getCategories = async () => {
+  const { getCommCode } = useCommCode()
+  const { selectedCategory, searchValue, suitableCommCode, setSuitableCommCode, isSearch } = useSuitableStore()
+
+  const getSuitables = async (): Promise<Suitable> => {
     try {
-      // return await suitableApi.getCategory()
+      const response = await axiosInstance(null).get<Suitable>('/api/suitable/list')
+      return response.data
     } catch (error) {
-      console.error('카테고리 데이터 로드 실패:', error)
+      console.error('지붕재 데이터 로드 실패:', error)
+      return { suitable: [], detail: [] }
+    }
+  }
+
+  // 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 = (mainId: number): 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')
+      }
+      return suitableDetailArray
+    } catch (error) {
+      console.error('지붕재 데이터 파싱 실패:', error)
       return []
     }
   }
 
-  const getSuitables = async () => {
-    try {
-      // return await suitableApi.getList()
-    } catch (error) {
-      console.error('지붕재 데이터 로드 실패:', error)
-    }
-  }
+  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 updateSearchResults = async (selectedCategory: string | undefined, searchValue: string | undefined) => {
-    try {
-      // return await suitableApi.getList(selectedCategory, searchValue)
-    } catch (error) {
-      console.error('지붕재 데이터 검색 실패:', error)
-    }
+  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 }
       }
+    },
+    staleTime: 1000 * 60 * 10,
+    gcTime: 1000 * 60 * 10,
+    enabled: true,
+  })
 
-  return { getCategories, getSuitables, updateSearchResults }
+  return {
+    getSuitables,
+    getSuitableCommCode,
+    toCodeName,
+    toSuitableDetail,
+    suitableList,
+    suitableSearchResults,
+    refetchBySearch,
+    isSearchLoading,
+  }
 }

src/hooks/useSuitableRaw.ts

@@ -0,0 +1,109 @@
+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/libs/axios.ts

@@ -68,7 +68,7 @@ export const transferResponse = (response: any) => {
 }
 
 // camel case object 반환
-const transformObjectKeys = (obj: any): any => {
+export const transformObjectKeys = (obj: any): any => {
   if (Array.isArray(obj)) {
     return obj.map(transformObjectKeys)
   }

src/store/useSuitableStore.ts

@@ -1,68 +1,71 @@
 import { create } from 'zustand'
-import { Suitable, suitableApi } from '@/api/suitable'
+import type { CommCode } from '@/types/CommCode'
 
 interface SuitableState {
-  // // 검색 결과 리스트
-  // searchResults: Suitable[]
-  // // 초기 데이터 로드
-  // fetchInitializeData: () => Promise<void>
-  // // 검색 결과 설정
-  // setSearchResults: (results: Suitable[]) => void
-  // // 검색 결과 초기화
-  // resetSearchResults: () => void
+  /* 공통코드 */
+  suitableCommCode: Map<string, CommCode[]>
+  /* 공통코드 설정 */
+  setSuitableCommCode: (headCode: string, commCode: CommCode[]) => void
 
-  // 선택된 아이템 리스트
-  selectedItems: Suitable[]
-  // 선택된 아이템 추가
-  addSelectedItem: (item: Suitable) => void
-  // 선택된 아이템 제거
+  /* 검색 상태 */
+  isSearch: boolean
+  /* 검색 상태 설정 */
+  setIsSearch: (isSearch: boolean) => void
+
+  /* 선택된 카테고리 */
+  selectedCategory: string
+  /* 선택된 카테고리 설정 */
+  setSelectedCategory: (category: string) => void
+
+  /* 검색 값 */
+  searchValue: string
+  /* 검색 값 설정 */
+  setSearchValue: (value: string) => void
+
+  /* 선택된 아이템 리스트 */
+  selectedItems: number[]
+  /* 선택된 아이템 추가 */
+  addSelectedItem: (itemId: number) => void
+  /* 선택된 아이템 제거 */
   removeSelectedItem: (itemId: number) => void
-  // 선택된 아이템 모두 제거
+  /* 선택된 아이템 모두 제거 */
   clearSelectedItems: () => void
 }
 
 export const useSuitableStore = create<SuitableState>((set) => ({
-  // // 초기 상태
-  // searchResults: [],
+  suitableCommCode: new Map() as Map<string, CommCode[]>,
+  isSearch: false as boolean,
+  selectedCategory: '' as string,
+  searchValue: '' as string,
+  selectedItems: [] as number[],
 
-  // // 초기 데이터 로드
-  // fetchInitializeData: async () => {
-  //   const suitables = await fetchInitialSuitablee()
-  //   set({ searchResults: suitables })
-  // },
-
-  // // 검색 결과 설정
-  // setSearchResults: (results) => set({ searchResults: results }),
-
-  // // 검색 결과 초기화
-  // resetSearchResults: () => set({ searchResults: [] }),
-
-  // 초기 상태
-  selectedItems: [],
-
-  // 선택된 아이템 추가 (중복 방지)
-  addSelectedItem: (item) =>
+  /* 공통코드 설정 */
+  setSuitableCommCode: (headCode: string, commCode: CommCode[]) =>
     set((state) => ({
-      selectedItems: state.selectedItems.some((i) => i.id === item.id) ? state.selectedItems : [...state.selectedItems, item],
+      suitableCommCode: new Map(state.suitableCommCode).set(headCode, commCode),
     })),
 
-  // 선택된 아이템 제거
-  removeSelectedItem: (itemId) =>
+  /* 검색 상태 설정 */
+  setIsSearch: (isSearch: boolean) => set({ isSearch }),
+
+  /* 선택된 카테고리 설정 */
+  setSelectedCategory: (category: string) => set({ selectedCategory: category }),
+
+  /* 검색 값 설정 */
+  setSearchValue: (value: string) => set({ searchValue: value }),
+
+  /* 선택된 아이템 추가 */
+  addSelectedItem: (itemId: number) =>
     set((state) => ({
-      selectedItems: state.selectedItems.filter((item) => item.id !== itemId),
+      selectedItems: state.selectedItems.some((i) => i === itemId) ? state.selectedItems : [...state.selectedItems, itemId],
     })),
 
-  // 선택된 아이템 모두 제거
+  /* 선택된 아이템 제거 */
+  removeSelectedItem: (itemId: number) =>
+    set((state) => ({
+      selectedItems: state.selectedItems.filter((i) => i !== itemId),
+    })),
+
+  /* 선택된 아이템 모두 제거 */
   clearSelectedItems: () => set({ selectedItems: [] }),
 }))
-
-// // 전체 데이터 초기화 함수
-// async function fetchInitialSuitablee() {
-//   try {
-//     const suitable = await suitableApi.getList()
-//     return suitable
-//   } catch (error) {
-//     console.error('초기 데이터 로드 실패:', error)
-//     return []
-//   }
-// }

src/types/CommCode.ts

@@ -0,0 +1,5 @@
+export type CommCode = {
+  headCd: string
+  code: string
+  codeJp: string
+}

src/types/Suitable.ts

@@ -0,0 +1,44 @@
+export enum SUITABLE_HEAD_CODE {
+  /* 지붕재 제조사명 */
+  MANU_FT_CD = 'MANU_FT_CD',
+  /* 지붕재 종류 */
+  ROOF_MT_CD = 'ROOF_MT_CD',
+  /* 마운팅 브래킷 종류 */
+  ROOF_SH_CD = 'ROOF_SH_CD',
+  /* 마운팅 브래킷 제조사명 및 제품코드드 */
+  TRESTLE_MFPC_CD = 'TRESTLE_MFPC_CD',
+}
+
+export type SuitableMain = {
+  id: number
+  productName: string
+  manuFtCd: string
+  roofMtCd: string
+  roofShCd: string
+}
+
+export type SuitableDetail = {
+  id: number
+  mainId: number
+  trestleMfpcCd: string
+  trestleManufacturerProductName: string
+  memo: string
+}
+
+// export type Suitable = {
+//   id: number
+//   productName: string
+//   manuFtCd: string
+//   roofMtCd: string
+//   roofShCd: string
+//   detail: string
+// }
+
+export type SuitableDetailGroup = {
+  mainId: number
+  detail: string
+}
+export type Suitable = {
+  suitable: SuitableMain[]
+  detail: SuitableDetailGroup[]
+}