package-lock.json

@@ -14,6 +14,7 @@
         "@tanstack/react-query-devtools": "^5.71.0",
         "@types/nodemailer": "^6.4.17",
         "axios": "^1.8.4",
+        "crypto-js": "^4.2.0",
         "env-cmd": "^10.1.0",
         "iron-session": "^8.0.4",
         "lucide": "^0.503.0",
@@ -32,6 +33,7 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
+        "@types/crypto-js": "^4.2.2",
         "@types/mysql": "^2.15.27",
         "@types/node": "^20",
         "@types/react": "^19",
@@ -2140,6 +2142,13 @@
       "integrity": "sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ==",
       "license": "MIT"
     },
+    "node_modules/@types/crypto-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.2.tgz",
+      "integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/mysql": {
       "version": "2.15.27",
       "resolved": "https://registry.npmjs.org/@types/mysql/-/mysql-2.15.27.tgz",

package.json

@@ -21,6 +21,7 @@
     "@tanstack/react-query-devtools": "^5.71.0",
     "@types/nodemailer": "^6.4.17",
     "axios": "^1.8.4",
+    "crypto-js": "^4.2.0",
     "env-cmd": "^10.1.0",
     "iron-session": "^8.0.4",
     "lucide": "^0.503.0",
@@ -39,6 +40,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/crypto-js": "^4.2.2",
     "@types/mysql": "^2.15.27",
     "@types/node": "^20",
     "@types/react": "^19",

src/app/pdf/suitable/page.tsx

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

src/components/pdf/SuitableDownloadPdf.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import generatePDF, { Margin, Options, Resolution, usePDF } from 'react-to-pdf'
+import { useSuitable } from '@/hooks/useSuitable'
+import { useSuitableStore } from '@/store/useSuitableStore'
+import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
+
+export default function SuitableDownloadPdf() {
+  const [fileName, setFileName] = useState<string[]>([])
+  const [createTime, setCreateTime] = useState('')
+  const targetRef = useRef<HTMLDivElement>(null)
+  const { toCodeName, toSuitableDetail, selectedSuitables, isSelectedSuitablesLoading } = useSuitable()
+  const { selectedCategory, suitableCommCode, selectedItemsSearching, setSelectedItemsSearching } = useSuitableStore()
+
+  const handleDownPdf = () => {
+    const options: Options = {
+      filename: `${fileName.join('_')}.pdf`,
+      method: 'open' as const,
+      resolution: Resolution.HIGH,
+      page: {
+        margin: Margin.SMALL,
+        format: 'A4',
+        orientation: 'landscape' as const,
+      },
+      canvas: {
+        mimeType: 'image/png' as const,
+        qualityRatio: 1,
+      },
+      overrides: {
+        pdf: {
+          compress: true,
+        },
+        canvas: {
+          useCORS: true,
+        },
+      },
+    }
+
+    generatePDF(targetRef, options)
+    // generatePDF(targetRef, { filename: 'page.pdf' })
+  }
+
+  const formatDateString = () => {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = now.getMonth() + 1
+    const day = now.getDate()
+    const hours = now.getHours()
+    const minutes = now.getMinutes()
+
+    return `${year}年${month}月${day}日 ${hours}:${minutes.toString().padStart(2, '0')}`
+  }
+
+  useEffect(() => {
+    setCreateTime(formatDateString())
+    setFileName([
+      `(${suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.find((category) => category.code === selectedCategory)?.codeJp})`,
+      '屋根材適合表',
+    ])
+    if (!selectedItemsSearching) {
+      setSelectedItemsSearching(true)
+    }
+  }, [])
+
+  if (!selectedCategory) return <div>잘못된 접근입니다.</div>
+  if (isSelectedSuitablesLoading) return <div>Loading...</div>
+
+  return (
+    <>
+      {/* <button onClick={() => handleDownPdf()}>PDFダウンロード</button> */}
+      <div className="pdf-table-wrap" ref={targetRef}>
+        <div className="pdf-intro-page">
+          <div className="pdf-intro-tit-wrap">
+            <div className="pdf-intro-tit mb20">ハンファジャパン株式会社</div>
+            <div className="pdf-intro-tit mb20">{fileName.join(' ')}</div>
+            <div className="pdf-intro-date">{createTime}</div>
+          </div>
+          <div className="pdf-intro-cont-wrap">
+            <p>本適合表は参考資料としてご使用下さい。</p>
+            <p>屋根材製品の形状・仕様はメーカーより変更される場合が御座います。</p>
+            <p>又、現場環境（働き、勾配、瓦桟木条件等）により本適合表と異なる適合結果となる場合が御座います。予めご了承下さい。</p>
+            <p>屋根材以外の設置条件（垂木、野地板等の設置基準）も必ずご確認下さい。</p>
+          </div>
+          <div className="pdf-intro-foot-date">{createTime}</div>
+        </div>
+        <div className="pdf-table-content">
+          <div className="pdf-table-grid-wrap">
+            {selectedSuitables?.map((item: Suitable) => (
+              <div className="pdf-table-card" key={item.id}>
+                <div className="pdf-table-tit-wrap">
+                  <span>{item.productName}</span>
+                  <span>{toCodeName(SUITABLE_HEAD_CODE.MANU_FT_CD, item.manuFtCd)}</span>
+                  <span>{toCodeName(SUITABLE_HEAD_CODE.ROOF_MT_CD, item.roofMtCd)}</span>
+                </div>
+                <div className="pdf-roof-table">
+                  <table>
+                    <colgroup>
+                      <col width={'18%'} />
+                      <col width={'23%'} />
+                      <col width={'18%'} />
+                      <col />
+                    </colgroup>
+                    <thead>
+                      <tr>
+                        <th>金具タイプ</th>
+                        <th>金具名</th>
+                        <th>設置可否</th>
+                        <th>備考</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
+                        <tr key={subItem.id}>
+                          <td>{toCodeName(SUITABLE_HEAD_CODE.ROOF_SH_CD, item.roofShCd)}</td>
+                          <td>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</td>
+                          <td>{subItem.trestleManufacturerProductName}</td>
+                          <td>{subItem.memo}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="pdf-intro-foot-date">{createTime}</div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/popup/SuitableDetailPopup.tsx

@@ -5,14 +5,16 @@ import { useCallback, useEffect, useState } from 'react'
 import SuitableDetailPopupButton from './SuitableDetailPopupButton'
 import { useSuitable } from '@/hooks/useSuitable'
 import { usePopupController } from '@/store/popupController'
+import { useSuitableStore } from '@/store/useSuitableStore'
+import { useSpinnerStore } from '@/store/spinnerStore'
 import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
 
 export default function SuitableDetailPopup() {
   const popupController = usePopupController()
-  const { toCodeName, toSuitableDetail, suitableCheckIcon, suitableCheckMemo, getSelectedSuitables } = useSuitable()
+  const { toCodeName, toSuitableDetail, suitableCheckIcon, suitableCheckMemo, selectedSuitables, isSelectedSuitablesLoading } = useSuitable()
+  const { setSelectedItemsSearching } = useSuitableStore()
 
   const [openItems, setOpenItems] = useState<Set<number>>(new Set())
-  const [selectedSuitables, setSelectedSuitables] = useState<Suitable[]>([])
 
   /* 아이템 열기/닫기 */
   const toggleItemOpen = useCallback((itemId: number) => {
@@ -23,10 +25,13 @@ export default function SuitableDetailPopup() {
     })
   }, [])
 
+  /* 데이터 로딩 상태 처리 */
   useEffect(() => {
-    getSelectedSuitables().then((res) => {
+    useSpinnerStore.getState().setIsShow(isSelectedSuitablesLoading)
-      setSelectedSuitables(res)
+  }, [isSelectedSuitablesLoading])
-    })
+
+  useEffect(() => {
+    setSelectedItemsSearching(true)
   }, [])
 
   return (

src/components/popup/SuitableDetailPopupButton.tsx

@@ -19,23 +19,21 @@ export default function SuitableDetailPopupButton() {
   }
 
   return (
-    <div className="float-btn-wrap">
+    <div className="btn-flex-wrap com">
-      <div className="btn-flex-wrap com">
+      <div className="btn-bx">
-        <div className="btn-bx">
+        <button className="btn-frame n-blue icon" onClick={handleClosePopup}>
-          <button className="btn-frame n-blue icon" onClick={handleClosePopup}>
+          閉じる<i className="btn-arr"></i>
-            閉じる<i className="btn-arr"></i>
+        </button>
-          </button>
+      </div>
-        </div>
+      <div className="btn-bx">
-        <div className="btn-bx">
+        <button className="btn-frame red icon" onClick={downloadSuitablePdf}>
-          <button className="btn-frame red icon" onClick={downloadSuitablePdf}>
+          ウンロード<i className="btn-arr"></i>
-            ウンロード<i className="btn-arr"></i>
+        </button>
-          </button>
+      </div>
-        </div>
+      <div className="btn-bx">
-        <div className="btn-bx">
+        <button className="btn-frame n-blue icon" onClick={() => handleRedirectPage('/inquiry/regist')}>
-          <button className="btn-frame n-blue icon" onClick={() => handleRedirectPage('/inquiry/regist')}>
+          1：1お問い合わせ<i className="btn-arr"></i>
-            1：1お問い合わせ<i className="btn-arr"></i>
+        </button>
-          </button>
-        </div>
       </div>
     </div>
   )

src/components/suitable/SuitableList.tsx

@@ -21,7 +21,7 @@ export default function SuitableList() {
     isLoading,
     suitableCheckIcon,
   } = useSuitable()
-  const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
+  const { selectedItems, addSelectedItem, removeSelectedItem, setSelectedItemsSearching } = useSuitableStore()
   const [openItems, setOpenItems] = useState<Set<number>>(new Set())
   const observerTarget = useRef<HTMLDivElement>(null)
 
@@ -49,6 +49,7 @@ export default function SuitableList() {
   /* 아이템 클릭 */
   const handleItemClick = useCallback(
     (mainId: number, detailId?: number, detailIds?: Set<number>): void => {
+      setSelectedItemsSearching(false)
       isItemSelected(mainId, detailId) ? removeSelectedItem(mainId, detailId) : addSelectedItem(mainId, detailId, detailIds)
     },
     [isItemSelected, addSelectedItem, removeSelectedItem],

src/components/suitable/SuitableSearch.tsx

@@ -7,12 +7,11 @@ import type { CommCode } from '@/types/CommCode'
 import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
 
 export default function SuitableSearch() {
-  const [searchValue, setSearchValue] = useState<string>('')
+  const [searchValue, setSearchValue] = useState('')
 
   const { getSuitableCommCode, clearSuitableStore } = useSuitable()
-  const { suitableCommCode, searchCategory, setSearchCategory, setSearchKeyword } = useSuitableStore()
+  const { suitableCommCode, selectedCategory, setSelectedCategory, setSearchKeyword } = useSuitableStore()
 
-  /* 키워드 입력 글자 제한 */
   const handleInputChange = (value: string) => {
     if (Array.from(value).length > 30) {
       alert('検索ワードは最大30文字まで入力できます。')
@@ -22,7 +21,6 @@ export default function SuitableSearch() {
     setSearchValue(value)
   }
 
-  /* 키워드 검색 */
   const handleInputSearch = async () => {
     if (!searchValue.trim()) {
       alert('屋根材の製品名を入力してください。')
@@ -31,7 +29,6 @@ export default function SuitableSearch() {
     setSearchKeyword(searchValue)
   }
 
-  /* 키워드 초기화 */
   const handleInputClear = () => {
     setSearchValue('')
     clearSuitableStore({ items: true, keyword: true })
@@ -45,7 +42,7 @@ export default function SuitableSearch() {
   return (
     <>
       <div className="sale-form-bx">
-        <select className="select-form" name="" id="" value={searchCategory || ''} onChange={(e) => setSearchCategory(e.target.value)}>
+        <select className="select-form" name="" id="" value={selectedCategory || ''} onChange={(e) => setSelectedCategory(e.target.value)}>
           <option value="">屋根材を選択してください.</option>
           {suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.map((category: CommCode, index: number) => (
             <option key={index} value={category.code}>

src/hooks/useSuitable.ts

@@ -1,4 +1,5 @@
-import { useInfiniteQuery } from '@tanstack/react-query'
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
+import { SHA256 } from 'crypto-js'
 import { transformObjectKeys } from '@/libs/axios'
 import { useSuitableStore } from '@/store/useSuitableStore'
 import { useAxios } from './useAxios'
@@ -12,12 +13,13 @@ export function useSuitable() {
     itemPerPage,
     suitableCommCode,
     setSuitableCommCode,
-    searchCategory,
+    selectedCategory,
-    clearSearchCategory,
+    clearSelectedCategory,
     searchKeyword,
     clearSearchKeyword,
     selectedItems,
     clearSelectedItems,
+    selectedItemsSearching,
   } = useSuitableStore()
 
   const getSuitables = async ({
@@ -48,7 +50,7 @@ export function useSuitable() {
   const getSuitableIds = async (): Promise<SuitableIds[]> => {
     try {
       const params: Record<string, string> = {}
-      if (searchCategory) params.category = searchCategory
+      if (selectedCategory) params.category = selectedCategory
       if (searchKeyword) params.keyword = searchKeyword
       const response = await axiosInstance(null).get<SuitableIds[]>('/api/suitable/pick', { params })
       return response.data
@@ -116,13 +118,13 @@ export function useSuitable() {
     // isError,
     // error,
   } = useInfiniteQuery<Suitable[]>({
-    queryKey: ['suitables', 'list', searchCategory, searchKeyword],
+    queryKey: ['suitables', 'list', selectedCategory, searchKeyword],
     queryFn: async (context) => {
       const pageParam = context.pageParam as number
       if (pageParam === 1) clearSuitableStore({ items: true })
       return await getSuitables({
         pageNumber: pageParam,
-        ...(searchCategory && { category: searchCategory }),
+        ...(selectedCategory && { category: selectedCategory }),
         ...(searchKeyword && { keyword: searchKeyword }),
       })
     },
@@ -132,12 +134,48 @@ export function useSuitable() {
     initialPageParam: 1,
     staleTime: 1000 * 60 * 10,
     gcTime: 1000 * 60 * 10,
-    enabled: searchCategory !== '' || searchKeyword !== '',
+    enabled: selectedCategory !== '' || searchKeyword !== '',
+  })
+
+  const serializeSelectedItems = (): { ids: string; detailIds: 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 { ids: ids.join(','), detailIds: detailIds.length > 0 ? detailIds.join(',') : '' }
+  }
+
+  const getSelectedItemsHash = (): string => {
+    const entries = Array.from(selectedItems.entries())
+      .map(([key, value]) => `${key}:${Array.from(value).sort().join(',')}`)
+      .sort()
+      .join('|')
+    return SHA256(entries).toString()
+  }
+
+  const {
+    data: selectedSuitables,
+    isLoading: isSelectedSuitablesLoading,
+    // refetch: refetchSelectedSuitables,
+  } = useQuery<Suitable[]>({
+    queryKey: ['suitables', 'selectedItems', getSelectedItemsHash(), selectedItemsSearching],
+    queryFn: async () => {
+      const { ids, detailIds } = serializeSelectedItems()
+      return await getSuitableDetails(ids, detailIds)
+    },
+    staleTime: Infinity,
+    gcTime: Infinity,
+    enabled: selectedItemsSearching,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
   })
 
   const clearSuitableStore = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => {
     if (items) clearSelectedItems()
-    if (category) clearSearchCategory()
+    if (category) clearSelectedCategory()
     if (keyword) clearSearchKeyword()
   }
 
@@ -160,26 +198,11 @@ export function useSuitable() {
     return `${value}で設置可`
   }
 
-  const serializeSelectedItems = (): { ids: string; detailIds: 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 { ids: ids.join(','), detailIds: detailIds.length > 0 ? detailIds.join(',') : '' }
-  }
-
-  const getSelectedSuitables = async (): Promise<Suitable[]> => {
-    const { ids, detailIds } = serializeSelectedItems()
-    return await getSuitableDetails(ids, detailIds)
-  }
-
   const downloadSuitablePdf = async (): Promise<void> => {
     try {
       const { ids, detailIds } = serializeSelectedItems()
       const fileTitle = `(${
-        suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.find((category) => category.code === searchCategory)?.codeJp
+        suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.find((category) => category.code === selectedCategory)?.codeJp
       }) 屋根材適合表`
 
       const form = document.createElement('form')
@@ -217,6 +240,7 @@ export function useSuitable() {
   return {
     getSuitables,
     getSuitableIds,
+    getSuitableDetails,
     getSuitableCommCode,
     toCodeName,
     toSuitableDetail,
@@ -226,7 +250,8 @@ export function useSuitable() {
     hasNextPage,
     isFetchingNextPage,
     isLoading,
-    getSelectedSuitables,
+    selectedSuitables,
+    isSelectedSuitablesLoading,
     clearSuitableStore,
     suitableCheckIcon,
     suitableCheckMemo,

src/store/useSuitableStore.ts

@@ -11,38 +11,43 @@ interface SuitableState {
   /* 공통코드 설정 */
   setSuitableCommCode: (headCode: string, commCode: CommCode[]) => void
 
-  /* 검색 카테고리 */
+  /* 선택된 카테고리 */
-  searchCategory: string
+  selectedCategory: string
-  /* 검색 카테고리 설정 */
+  /* 선택된 카테고리 설정 */
-  setSearchCategory: (category: string) => void
+  setSelectedCategory: (category: string) => void
-  /* 검색 카테고리 초기화 */
+  /* 선택된 카테고리 초기화 */
-  clearSearchCategory: () => void
+  clearSelectedCategory: () => void
 
-  /* 검색 키워드 */
+  /* 검색 값 */
   searchKeyword: string
-  /* 검색 키워드 설정 */
+  /* 검색 값 설정 */
   setSearchKeyword: (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
-  /* 선택 아이템 모두 제거 */
+  /* 선택된 아이템 모두 제거 */
   clearSelectedItems: () => void
+  /* 선택된 아이템 검색 상태 */
+  selectedItemsSearching: boolean
+  /* 선택된 아이템 검색 상태 설정 */
+  setSelectedItemsSearching: (value: boolean) => void
 }
 
 export const useSuitableStore = create<SuitableState>((set) => ({
   itemPerPage: 100 as number,
   suitableCommCode: new Map() as Map<string, CommCode[]>,
-  searchCategory: '' as string,
+  selectedCategory: '' as string,
   searchKeyword: '' as string,
   selectedItems: new Map() as Map<number, Set<number>>,
+  selectedItemsSearching: false as boolean,
 
   /* 공통코드 설정 */
   setSuitableCommCode: (headCode: string, commCode: CommCode[]) =>
@@ -50,20 +55,20 @@ export const useSuitableStore = create<SuitableState>((set) => ({
       suitableCommCode: new Map(state.suitableCommCode).set(headCode, commCode),
     })),
 
-  /* 검색 카테고리 설정 */
+  /* 선택된 카테고리 설정 */
-  setSearchCategory: (category: string) => set({ searchCategory: category }),
+  setSelectedCategory: (category: string) => set({ selectedCategory: category }),
-  /* 검색 카테고리 초기화 */
+  /* 선택된 카테고리 초기화 */
-  clearSearchCategory: () => set({ searchCategory: '' }),
+  clearSelectedCategory: () => set({ selectedCategory: '' }),
 
-  /* 검색 키워드 설정 */
+  /* 검색 값 설정 */
   setSearchKeyword: (value: string) => set({ searchKeyword: value }),
-  /* 검색 키워드 초기화 */
+  /* 검색 값 초기화 */
   clearSearchKeyword: () => set({ searchKeyword: '' }),
 
-  /* 선택 아이템 추가 */
+  /* 선택된 아이템 추가 */
   addSelectedItem: (mainId: number, detailId?: number, detailIds?: Set<number>) => {
     if (detailId) {
-      /* 디테일(하위) 아이템 추가 */
+      // 디테일(하위) 아이템 추가
       set((state) => {
         const detailSet = state.selectedItems.get(mainId) || new Set()
         detailSet.add(detailId)
@@ -71,7 +76,7 @@ export const useSuitableStore = create<SuitableState>((set) => ({
         return { selectedItems: state.selectedItems }
       })
     } else {
-      /* 메인(상위) 아이템 추가 */
+      // 메인(상위) 아이템 추가
       set((state) => {
         state.selectedItems.set(mainId, detailIds || new Set())
         return { selectedItems: state.selectedItems }
@@ -79,7 +84,7 @@ export const useSuitableStore = create<SuitableState>((set) => ({
     }
   },
 
-  /* 선택 아이템 전체 추가 */
+  /* 아이템 전체 추가 */
   addAllSelectedItem: (suitableIds: SuitableIds[]) => {
     set(() => {
       const newSelectedItems = new Map()
@@ -90,28 +95,31 @@ export const useSuitableStore = create<SuitableState>((set) => ({
     })
   },
 
-  /* 선택 아이템 제거 */
+  /* 선택된 아이템 제거 */
   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: new Map() as Map<number, Set<number>> }),
+
+  /* 선택된 아이템 검색 상태 설정 */
+  setSelectedItemsSearching: (value: boolean) => set({ selectedItemsSearching: value }),
 }))