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

@@ -41,7 +41,7 @@ export async function GET(request: NextRequest) {
     ) AS details 
       ON msm.id = details.main_id 
     WHERE 1=1
-      --roofMtCd AND msm.roof_mt_cd IN (:roofMtCd)
+      --roofMtCd AND msm.roof_mt_cd = ':roofMtCd'
       --productName AND msm.product_name LIKE '%:productName%'
     ORDER BY msm.product_name
     OFFSET (@P1 - 1) * @P2 ROWS
@@ -50,13 +50,8 @@ export async function GET(request: NextRequest) {
 
     // 검색 조건 설정
     if (category) {
-      const roofMtQuery = `
-        SELECT roof_mt_cd
-        FROM ms_suitable_roof_material_group
-        WHERE roof_matl_grp_cd = ':roofMtGrpCd'
-      `
       query = query.replace('--roofMtCd ', '')
-      query = query.replace(':roofMtCd', roofMtQuery.replace(':roofMtGrpCd', category))
+      query = query.replace(':roofMtCd', category)
     }
     if (keyword) {
       query = query.replace('--productName ', '')
@@ -65,8 +60,6 @@ export async function GET(request: NextRequest) {
 
     const suitable: Suitable[] = await prisma.$queryRawUnsafe(query, pageNumber, itemPerPage)
 
-    // console.log(`검색 조건 :::: 카테고리: ${category}, 키워드: ${keyword}`)
-
     return NextResponse.json(suitable)
   } catch (error) {
     console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)

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

@@ -1,51 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { prisma } from '@/libs/prisma'
-
-export async function GET(request: NextRequest) {
-  try {
-    const searchParams = request.nextUrl.searchParams
-    const category = searchParams.get('category')
-    const keyword = searchParams.get('keyword')
-
-    let query = `
-    SELECT 
-      msm.id
-      , details.detail_id
-    FROM ms_suitable_main msm
-    LEFT JOIN (
-      SELECT
-        msd.main_id
-        , STRING_AGG(msd.id, ',') AS detail_id
-      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 IN (:roofMtCd)
-      --productName AND msm.product_name LIKE '%:productName%'
-    ;
-    `
-
-    // 검색 조건 설정
-    if (category) {
-      const roofMtQuery = `
-        SELECT roof_mt_cd
-        FROM ms_suitable_roof_material_group
-        WHERE roof_matl_grp_cd = ':roofMtGrpCd'
-      `
-      query = query.replace('--roofMtCd ', '')
-      query = query.replace(':roofMtCd', roofMtQuery.replace(':roofMtGrpCd', category))
-    }
-    if (keyword) {
-      query = query.replace('--productName ', '')
-      query = query.replace(':productName', keyword)
-    }
-
-    const suitableIdSet = await prisma.$queryRawUnsafe(query)
-
-    return NextResponse.json(suitableIdSet)
-  } catch (error) {
-    console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
-    return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
-  }
-}

src/app/api/suitable/route.ts

@@ -1,63 +1,12 @@
-import { NextRequest, NextResponse } from 'next/server'
+import { NextResponse } from 'next/server'
 import { prisma } from '@/libs/prisma'
-import { Suitable } from '@/types/Suitable'
 
-export async function GET(request: NextRequest) {
+export async function POST(request: Request) {
-  try {
+  const body = await request.json()
-    const searchParams = request.nextUrl.searchParams
+  // @ts-ignore
+  const suitables = await prisma.MS_SUITABLE.createMany({
+    data: body,
+  })
 
-    const ids = searchParams.get('ids')
+  return NextResponse.json({ message: 'Suitable created successfully' })
-    const detailIds = searchParams.get('subIds')
-
-    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 
-        --ids AND details.main_id IN (:mainIds)
-        --detailIds AND details.id IN (:detailIds)
-    WHERE 1=1
-      --ids AND msm.id IN (:mainIds)
-    ORDER BY msm.product_name;
-    `
-
-    // 검색 조건 설정
-    if (ids) {
-      query = query.replaceAll('--ids ', '')
-      query = query.replaceAll(':mainIds', ids)
-      if (detailIds) {
-        query = query.replaceAll('--detailIds ', '')
-        query = query.replaceAll(':detailIds', detailIds)
-      }
-    }
-
-    const suitable: Suitable[] = await prisma.$queryRawUnsafe(query)
-
-    return NextResponse.json(suitable)
-  } catch (error) {
-    console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
-    return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
-  }
 }
-

src/components/popup/SuitableDetailPopup.tsx

@@ -1,40 +1,4 @@
-'use client'
-
-import Image from 'next/image'
-import { useCallback, useEffect, useState } from 'react'
-import { usePopupController } from '@/store/popupController'
-import { useSuitableStore } from '@/store/useSuitableStore'
-import SuitableDetailPopupButton from './SuitableDetailPopupButton'
-import { useSuitable } from '@/hooks/useSuitable'
-import { Suitable } from '@/types/Suitable'
-
 export default function SuitableDetailPopup() {
-  const popupController = usePopupController()
-  const { getSuitableDetails, serializeSelectedItems } = useSuitable()
-  const { selectedItems } = useSuitableStore()
-
-  const [openItems, setOpenItems] = useState<Set<number>>(new Set())
-  const [suitableDetails, setSuitableDetails] = useState<Suitable[]>([])
-
-  // 아이템 열기/닫기
-  const toggleItemOpen = useCallback((itemId: number) => {
-    setOpenItems((prev) => {
-      const newOpenItems = new Set(prev)
-      newOpenItems.has(itemId) ? newOpenItems.delete(itemId) : newOpenItems.add(itemId)
-      return newOpenItems
-    })
-  }, [])
-
-  // 선택된 아이템 상세 데이터 가져오기
-  const getSelectedItemsData = async () => {
-    const serialized: Map<string, string> = serializeSelectedItems()
-    setSuitableDetails(await getSuitableDetails(serialized.get('ids') ?? '', serialized.get('detailIds') ?? ''))
-  }
-
-  useEffect(() => {
-    getSelectedItemsData()
-  }, [])
-
   return (
     <div className="modal-popup">
       <div className="modal-dialog">
@@ -43,109 +7,23 @@ export default function SuitableDetailPopup() {
             <div className="modal-header-inner">
               <div className="modal-name-wrap">
                 <div className="modal-img">
-                  <Image src="/assets/images/layout/modal_header_icon03.svg" width={22} height={22} alt="" />
+                  <img src="/assets/images/layout/modal_header_icon03.svg" alt="" />
                 </div>
                 <div className="modal-name">屋根材適合性詳細 </div>
               </div>
-              <button className="modal-close" onClick={() => popupController.setSuitableDetailPopup(false)}></button>
+              <button className="modal-close"></button>
             </div>
           </div>
           <div className="modal-body">
-            <div className="compliance-check-pop-wrap">
+            <div className={`compliance-check-bx act`}>
-              <div className={`compliance-check-bx ${openItems.has(1) ? 'act' : ''}`}>
+              <div className="check-name-wrap">
-                <div className="check-name-wrap">
+                <div className="check-name">アースティ４０</div>
-                  <div className="check-name">アースティ４０</div>
+                <div className="check-name-btn">
-                  <div className="check-name-btn">
+                  <button className="bx-btn"></button>
-                    <button className="bx-btn" onClick={() => toggleItemOpen(1)}></button>
-                  </div>
-                </div>
-                <div className="compliance-check-pop-contents">
-                  <div className="check-pop-data-wrap">
-                    <div className="check-pop-data-tit">屋根技研 支持瓦</div>
-                    <div className="check-pop-data-txt">㈱ダイトー</div>
-                  </div>
-                  <div className="check-pop-data-wrap">
-                    <div className="check-pop-data-tit">屋根材</div>
-                    <div className="check-pop-data-txt">瓦</div>
-                  </div>
-                  <div className="check-pop-data-wrap">
-                    <div className="check-pop-data-tit">金具タイプ</div>
-                    <div className="check-pop-data-txt">木ねじ打ち込み式</div>
-                  </div>
-                  <div className="check-pop-data-table-wrap">
-                    <div className="check-pop-data-table">
-                      <div className="pop-data-table-head">
-                        <div className="pop-data-table-head-name">屋根技研 支持瓦</div>
-                        <div className="pop-data-table-head-icon">
-                          <div className="compliance-icon">
-                            <Image src={'/assets/images/sub/compliance_check_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>
-                      <div className="pop-data-table-body">Ｄで設置可</div>
-                      <div className="pop-data-table-footer">
-                        <div className="pop-data-table-footer-unit">備考</div>
-                        <div className="pop-data-table-footer-data">
-                          桟木なしの場合は支持金具平ー１で設置可能。その場合水返しが高い為、レベルプレート使用。桟木ありの場合は支持金具平ー２で設置可能
-                        </div>
-                      </div>
-                    </div>
-                    <div className="check-pop-data-table">
-                      <div className="pop-data-table-head">
-                        <div className="pop-data-table-head-name">屋根技研支持金具</div>
-                        <div className="pop-data-table-head-icon">
-                          <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>
-                      <div className="pop-data-table-body">設置不可</div>
-                      <div className="pop-data-table-footer">
-                        <div className="pop-data-table-footer-unit">備考</div>
-                        <div className="pop-data-table-footer-data">入手困難</div>
-                      </div>
-                    </div>
-                    <div className="check-pop-data-table">
-                      <div className="pop-data-table-head">
-                        <div className="pop-data-table-head-name">屋根技研YGアンカー</div>
-                        <div className="pop-data-table-head-icon">
-                          <div className="compliance-icon">
-                            <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="pop-data-table-body">お問い合わせください</div>
-                      <div className="pop-data-table-footer">
-                        <div className="pop-data-table-footer-unit">備考</div>
-                        <div className="pop-data-table-footer-data">入手困難</div>
-                      </div>
-                    </div>
-                    <div className="check-pop-data-table">
-                      <div className="pop-data-table-head">
-                        <div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
-                        <div className="pop-data-table-head-icon">
-                          <div className="compliance-icon">
-                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>
-                      <div className="pop-data-table-footer">
-                        <div className="pop-data-table-footer-unit">備考</div>
-                        <div className="pop-data-table-footer-data">入手困難</div>
-                      </div>
-                    </div>
-                  </div>
                 </div>
               </div>
+              <div className="compliance-check-pop-contents"></div>
             </div>
-            <SuitableDetailPopupButton />
           </div>
         </div>
       </div>

src/components/popup/SuitableDetailPopupButton.tsx

@@ -1,23 +0,0 @@
-'use client'
-
-export default function SuitableDetailPopupButton() {
-  return (
-    <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">
-          1：1お問い合わせ<i className="btn-arr"></i>
-        </button>
-      </div>
-    </div>
-  )
-}

src/components/suitable/Suitable.tsx

@@ -3,24 +3,69 @@
 import Image from 'next/image'
 import { useEffect, useState } from 'react'
 import SuitableList from './SuitableList'
-import SuitableSearch from './SuitableSearch'
 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(true)
 
-  const { getSuitableCommCode, clearSuitableSearch } = useSuitable()
+  const { getSuitableCommCode } = useSuitable()
+  const { suitableCommCode, selectedCategory, setSelectedCategory, searchValue, setSearchValue, setIsSearch, clearSelectedItems } = useSuitableStore()
+
+  const handleInputSearch = async () => {
+    if (!searchValue.trim()) {
+      alert('屋根材の製品名を入力してください。')
+      return
+    }
+    setIsSearch(true)
+  }
+
+  const handleInputClear = () => {
+    setSearchValue('')
+    setIsSearch(false)
+  }
 
   useEffect(() => {
     getSuitableCommCode()
     return () => {
-      clearSuitableSearch({ items: true, category: true, keyword: true })
+      setSelectedCategory('')
+      setSearchValue('')
+      clearSelectedItems()
     }
   }, [])
 
   return (
     <div className="border-frame">
-      <SuitableSearch />
+      <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)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleInputSearch()
+              }
+            }}
+          />
+          {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">

src/components/suitable/SuitableButton.tsx

@@ -1,42 +1,16 @@
 'use client'
 
-import { usePopupController } from '@/store/popupController'
-import { useSuitable } from '@/hooks/useSuitable'
-import { useSuitableStore } from '@/store/useSuitableStore'
-
 export default function SuitableButton() {
-  const popupController = usePopupController()
-  const { getSuitableIds, clearSuitableSearch } = useSuitable()
-  const { selectedItems, addAllSelectedItem } = useSuitableStore()
-
-  const handleSelectAll = async () => {
-    addAllSelectedItem(await getSuitableIds())
-  }
-
-  const handleOpenPopup = () => {
-    if (selectedItems.size === 0) {
-      alert('屋根材を選択してください。')
-      return
-    }
-    popupController.setSuitableDetailPopup(true)
-  }
-
   return (
     <div className="float-btn-wrap">
       <div className="btn-flex-wrap com">
         <div className="btn-bx">
-          {selectedItems.size === 0 ? (
+          <button className="btn-frame n-blue icon">
-            <button className="btn-frame n-blue icon" onClick={handleSelectAll}>
+            全選択<i className="btn-arr"></i>
-              全選択<i className="btn-arr"></i>
+          </button>
-            </button>
-          ) : (
-            <button className="btn-frame n-blue icon" onClick={() => clearSuitableSearch({ items: true })}>
-              全て解除<i className="btn-arr"></i>
-            </button>
-          )}
         </div>
         <div className="btn-bx">
-          <button className="btn-frame red icon" onClick={handleOpenPopup}>
+          <button className="btn-frame red icon">
             詳細を見る<i className="btn-arr"></i>
           </button>
         </div>

src/components/suitable/SuitableList.tsx

@@ -117,7 +117,7 @@ export default function SuitableList() {
   )
 
   // 아이템 리스트
-  const suitableList = useMemo(() => suitables?.pages.flat() ?? [], [suitables?.pages])
+  const suitableList = suitables?.pages.flat() ?? []
 
   // Intersection Observer 설정
   useEffect(() => {

src/components/suitable/SuitableSearch.tsx

@@ -1,76 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-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 SuitableSearch() {
-  const [searchValue, setSearchValue] = useState('')
-
-  const { getSuitableCommCode, clearSuitableSearch } = useSuitable()
-  const { suitableCommCode, selectedCategory, setSelectedCategory, setSearchKeyword } = useSuitableStore()
-
-  const handleInputChange = (value: string) => {
-    if (Array.from(value).length > 30) {
-      alert('検索ワードは最大30文字まで入力できます。')
-      setSearchValue(value.slice(0, 30))
-      return
-    }
-    setSearchValue(value)
-  }
-
-  const handleInputSearch = async () => {
-    if (!searchValue.trim()) {
-      alert('屋根材の製品名を入力してください。')
-      return
-    }
-    setSearchKeyword(searchValue)
-  }
-
-  const handleInputClear = () => {
-    setSearchValue('')
-    clearSuitableSearch({ items: true, keyword: true })
-  }
-
-  useEffect(() => {
-    getSuitableCommCode()
-    return () => {
-      clearSuitableSearch({ items: true, category: true, keyword: true })
-    }
-  }, [])
-
-  return (
-    <>
-      <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_MATERIAL_GROUP)?.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) => handleInputChange(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                handleInputSearch()
-              }
-            }}
-          />
-          {searchValue && <button className="del-icon" onClick={handleInputClear} />}
-          <button className="search-icon" onClick={handleInputSearch} />
-        </div>
-      </div>
-    </>
-  )
-}

src/hooks/useSuitable.ts

@@ -3,29 +3,21 @@ import { transformObjectKeys } from '@/libs/axios'
 import { useSuitableStore } from '@/store/useSuitableStore'
 import { useAxios } from './useAxios'
 import { useCommCode } from './useCommCode'
-import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail, type SuitableIds } from '@/types/Suitable'
+import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
 
 export function useSuitable() {
   const { axiosInstance } = useAxios()
   const { getCommCode } = useCommCode()
-  const {
+  const { itemPerPage, selectedCategory, searchValue, suitableCommCode, setSuitableCommCode, isSearch } = useSuitableStore()
-    itemPerPage,
-    suitableCommCode,
-    setSuitableCommCode,
-    selectedCategory,
-    clearSelectedCategory,
-    searchKeyword,
-    clearSearchKeyword,
-    selectedItems,
-    clearSelectedItems,
-  } = useSuitableStore()
 
   const getSuitables = async ({
     pageNumber,
+    ids,
     category,
     keyword,
   }: {
     pageNumber?: number
+    ids?: string
     category?: string
     keyword?: string
   }): Promise<Suitable[]> => {
@@ -34,6 +26,7 @@ export function useSuitable() {
         pageNumber: pageNumber || 1,
         itemPerPage: itemPerPage,
       }
+      if (ids) params.ids = ids
       if (category) params.category = category
       if (keyword) params.keyword = keyword
 
@@ -45,31 +38,6 @@ export function useSuitable() {
     }
   }
 
-  const getSuitableIds = async (): Promise<SuitableIds[]> => {
-    try {
-      const params: Record<string, string> = {}
-      if (selectedCategory) params.category = selectedCategory
-      if (searchKeyword) params.keyword = searchKeyword
-      const response = await axiosInstance(null).get<SuitableIds[]>('/api/suitable/pick', { params })
-      return response.data
-    } catch (error) {
-      console.error('지붕재 아이디 로드 실패:', error)
-      return []
-    }
-  }
-
-  const getSuitableDetails = async (ids: string, detailIds?: string): Promise<Suitable[]> => {
-    try {
-      const params: Record<string, string> = { ids: ids }
-      if (detailIds) params.detailIds = detailIds
-      const response = await axiosInstance(null).get<Suitable[]>('/api/suitable', { params })
-      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) {
@@ -115,14 +83,13 @@ export function useSuitable() {
     isError,
     error,
   } = useInfiniteQuery<Suitable[]>({
-    queryKey: ['suitables', 'list', selectedCategory, searchKeyword],
+    queryKey: ['suitables', 'list', selectedCategory, isSearch],
     queryFn: async (context) => {
       const pageParam = context.pageParam as number
-      if (pageParam === 1) clearSuitableSearch({ items: true })
       return await getSuitables({
         pageNumber: pageParam,
         ...(selectedCategory && { category: selectedCategory }),
-        ...(searchKeyword && { keyword: searchKeyword }),
+        ...(isSearch && { keyword: searchValue }),
       })
     },
     getNextPageParam: (lastPage: Suitable[], allPages: Suitable[][]) => {
@@ -131,32 +98,10 @@ export function useSuitable() {
     initialPageParam: 1,
     staleTime: 1000 * 60 * 10,
     gcTime: 1000 * 60 * 10,
-    enabled: selectedCategory !== '' || searchKeyword !== '',
   })
 
-  const serializeSelectedItems = (): Map<string, string> => {
-    const ids: string[] = []
-    const detailIds: string[] = []
-    for (const [key, value] of selectedItems) {
-      ids.push(String(key))
-      for (const id of value) detailIds.push(String(id))
-    }
-    return new Map<string, string>([
-      ['ids', ids.join(',')],
-      ['detailIds', detailIds.join(',')],
-    ])
-  }
-
-  const clearSuitableSearch = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => {
-    if (items) clearSelectedItems()
-    if (category) clearSelectedCategory()
-    if (keyword) clearSearchKeyword()
-  }
-
   return {
     getSuitables,
-    getSuitableIds,
-    getSuitableDetails,
     getSuitableCommCode,
     toCodeName,
     toSuitableDetail,
@@ -166,7 +111,5 @@ export function useSuitable() {
     hasNextPage,
     isFetchingNextPage,
     isLoading,
-    serializeSelectedItems,
-    clearSuitableSearch,
   }
 }

src/store/useSuitableStore.ts

@@ -1,6 +1,5 @@
 import { create } from 'zustand'
 import type { CommCode } from '@/types/CommCode'
-import type { SuitableIds } from '@/types/Suitable'
 
 interface SuitableState {
   /* 초기 데이터 로드 개수*/
@@ -11,26 +10,25 @@ interface SuitableState {
   /* 공통코드 설정 */
   setSuitableCommCode: (headCode: string, commCode: CommCode[]) => void
 
+  /* 검색 상태 */
+  isSearch: boolean
+  /* 검색 상태 설정 */
+  setIsSearch: (isSearch: boolean) => void
+
   /* 선택된 카테고리 */
   selectedCategory: string
   /* 선택된 카테고리 설정 */
   setSelectedCategory: (category: string) => void
-  /* 선택된 카테고리 초기화 */
-  clearSelectedCategory: () => void
 
   /* 검색 값 */
-  searchKeyword: string
+  searchValue: string
   /* 검색 값 설정 */
-  setSearchKeyword: (value: string) => void
+  setSearchValue: (value: string) => void
-  /* 검색 값 초기화 */
-  clearSearchKeyword: () => void
 
   /* 선택된 아이템 리스트 */
   selectedItems: Map<number, Set<number>>
-  /* 선택 아이템 추가 */
+  /* 선택된 아이템 추가 */
   addSelectedItem: (mainId: number, detailId?: number, detailIds?: Set<number>) => void
-  /* 아이템 전체 추가 */
-  addAllSelectedItem: (suitableIds: SuitableIds[]) => void
   /* 선택된 아이템 제거 */
   removeSelectedItem: (mainId: number, detailId?: number) => void
   /* 선택된 아이템 모두 제거 */
@@ -40,8 +38,9 @@ interface SuitableState {
 export const useSuitableStore = create<SuitableState>((set) => ({
   itemPerPage: 100 as number,
   suitableCommCode: new Map() as Map<string, CommCode[]>,
+  isSearch: false as boolean,
   selectedCategory: '' as string,
-  searchKeyword: '' as string,
+  searchValue: '' as string,
   selectedItems: new Map() as Map<number, Set<number>>,
 
   /* 공통코드 설정 */
@@ -50,15 +49,14 @@ export const useSuitableStore = create<SuitableState>((set) => ({
       suitableCommCode: new Map(state.suitableCommCode).set(headCode, commCode),
     })),
 
+  /* 검색 상태 설정 */
+  setIsSearch: (isSearch: boolean) => set({ isSearch }),
+
   /* 선택된 카테고리 설정 */
   setSelectedCategory: (category: string) => set({ selectedCategory: category }),
-  /* 선택된 카테고리 초기화 */
-  clearSelectedCategory: () => set({ selectedCategory: '' }),
 
   /* 검색 값 설정 */
-  setSearchKeyword: (value: string) => set({ searchKeyword: value }),
+  setSearchValue: (value: string) => set({ searchValue: value }),
-  /* 검색 값 초기화 */
-  clearSearchKeyword: () => set({ searchKeyword: '' }),
 
   /* 선택된 아이템 추가 */
   addSelectedItem: (mainId: number, detailId?: number, detailIds?: Set<number>) => {
@@ -79,17 +77,6 @@ export const useSuitableStore = create<SuitableState>((set) => ({
     }
   },
 
-  /* 아이템 전체 추가 */
-  addAllSelectedItem: (suitableIds: SuitableIds[]) => {
-    set(() => {
-      const newSelectedItems = new Map()
-      suitableIds.forEach((suitableId) => {
-        newSelectedItems.set(suitableId.id, new Set(suitableId.detailId.split(',').map(Number)))
-      })
-      return { selectedItems: newSelectedItems }
-    })
-  },
-
   /* 선택된 아이템 제거 */
   removeSelectedItem: (mainId: number, detailId?: number) => {
     set((state) => {

src/types/Suitable.ts

@@ -1,13 +1,11 @@
 export enum SUITABLE_HEAD_CODE {
   /* 지붕재 제조사명 */
   MANU_FT_CD = 'MANU_FT_CD',
-  /* 지붕재 그룹 종류 */
-  ROOF_MATERIAL_GROUP = 'ROOF_MATL_GRP_CD',
   /* 지붕재 종류 */
   ROOF_MT_CD = 'ROOF_MT_CD',
   /* 마운팅 브래킷 종류 */
   ROOF_SH_CD = 'ROOF_SH_CD',
-  /* 마운팅 브래킷 제조사명 및 제품코드 */
+  /* 마운팅 브래킷 제조사명 및 제품코드드 */
   TRESTLE_MFPC_CD = 'TRESTLE_MFPC_CD',
 }
 
@@ -36,8 +34,3 @@ export type Suitable = {
   detailCnt: number
   detail: string
 }
-
-export type SuitableIds = {
-  id: number
-  detailId: string
-}