refactor: 지붕재 상세팝업 데이터 조회 수정

- 구 지붕재 적합성 pdf 페이지와 연계된 내용 제거 및 수정
- crypto-js 라이브러리 제거

package-lock.json

@@ -14,7 +14,6 @@
         "@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",
@@ -33,7 +32,6 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
-        "@types/crypto-js": "^4.2.2",
         "@types/mysql": "^2.15.27",
         "@types/node": "^20",
         "@types/react": "^19",
@@ -2142,13 +2140,6 @@
       "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,7 +21,6 @@
     "@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",
@@ -40,7 +39,6 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
-    "@types/crypto-js": "^4.2.2",
     "@types/mysql": "^2.15.27",
     "@types/node": "^20",
     "@types/react": "^19",

src/components/popup/SuitableDetailPopup.tsx

@@ -5,16 +5,14 @@ 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, selectedSuitables, isSelectedSuitablesLoading } = useSuitable()
-  const { setSelectedItemsSearching } = useSuitableStore()
+  const { toCodeName, toSuitableDetail, suitableCheckIcon, suitableCheckMemo, getSelectedSuitables } = useSuitable()
 
   const [openItems, setOpenItems] = useState<Set<number>>(new Set())
+  const [selectedSuitables, setSelectedSuitables] = useState<Suitable[]>([])
 
   /* 아이템 열기/닫기 */
   const toggleItemOpen = useCallback((itemId: number) => {
@@ -25,13 +23,10 @@ export default function SuitableDetailPopup() {
     })
   }, [])
 
-  /* 데이터 로딩 상태 처리 */
   useEffect(() => {
-    useSpinnerStore.getState().setIsShow(isSelectedSuitablesLoading)
-  }, [isSelectedSuitablesLoading])
-
-  useEffect(() => {
-    setSelectedItemsSearching(true)
+    getSelectedSuitables().then((res) => {
+      setSelectedSuitables(res)
+    })
   }, [])
 
   return (

src/components/suitable/SuitableList.tsx

@@ -21,7 +21,7 @@ export default function SuitableList() {
     isLoading,
     suitableCheckIcon,
   } = useSuitable()
-  const { selectedItems, addSelectedItem, removeSelectedItem, setSelectedItemsSearching } = useSuitableStore()
+  const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
   const [openItems, setOpenItems] = useState<Set<number>>(new Set())
   const observerTarget = useRef<HTMLDivElement>(null)
 
@@ -49,7 +49,6 @@ 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/hooks/useSuitable.ts

@@ -1,5 +1,4 @@
-import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
-import { SHA256 } from 'crypto-js'
+import { useInfiniteQuery } from '@tanstack/react-query'
 import { transformObjectKeys } from '@/libs/axios'
 import { useSuitableStore } from '@/store/useSuitableStore'
 import { useAxios } from './useAxios'
@@ -19,7 +18,6 @@ export function useSuitable() {
     clearSearchKeyword,
     selectedItems,
     clearSelectedItems,
-    selectedItemsSearching,
   } = useSuitableStore()
 
   const getSuitables = async ({
@@ -137,42 +135,6 @@ export function useSuitable() {
     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) clearSelectedCategory()
@@ -198,6 +160,21 @@ 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()
@@ -240,7 +217,6 @@ export function useSuitable() {
   return {
     getSuitables,
     getSuitableIds,
-    getSuitableDetails,
     getSuitableCommCode,
     toCodeName,
     toSuitableDetail,
@@ -250,8 +226,7 @@ export function useSuitable() {
     hasNextPage,
     isFetchingNextPage,
     isLoading,
-    selectedSuitables,
-    isSelectedSuitablesLoading,
+    getSelectedSuitables,
     clearSuitableStore,
     suitableCheckIcon,
     suitableCheckMemo,

src/store/useSuitableStore.ts

@@ -35,10 +35,6 @@ interface SuitableState {
   removeSelectedItem: (mainId: number, detailId?: number) => void
   /* 선택된 아이템 모두 제거 */
   clearSelectedItems: () => void
-  /* 선택된 아이템 검색 상태 */
-  selectedItemsSearching: boolean
-  /* 선택된 아이템 검색 상태 설정 */
-  setSelectedItemsSearching: (value: boolean) => void
 }
 
 export const useSuitableStore = create<SuitableState>((set) => ({
@@ -47,7 +43,6 @@ export const useSuitableStore = create<SuitableState>((set) => ({
   selectedCategory: '' as string,
   searchKeyword: '' as string,
   selectedItems: new Map() as Map<number, Set<number>>,
-  selectedItemsSearching: false as boolean,
 
   /* 공통코드 설정 */
   setSuitableCommCode: (headCode: string, commCode: CommCode[]) =>
@@ -68,7 +63,7 @@ export const useSuitableStore = create<SuitableState>((set) => ({
   /* 선택된 아이템 추가 */
   addSelectedItem: (mainId: number, detailId?: number, detailIds?: Set<number>) => {
     if (detailId) {
-      // 디테일(하위) 아이템 추가
+      /* 디테일(하위) 아이템 추가 */
       set((state) => {
         const detailSet = state.selectedItems.get(mainId) || new Set()
         detailSet.add(detailId)
@@ -76,7 +71,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 }
@@ -101,16 +96,16 @@ export const useSuitableStore = create<SuitableState>((set) => ({
       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 }
@@ -119,7 +114,4 @@ export const useSuitableStore = create<SuitableState>((set) => ({
 
   /* 선택된 아이템 모두 제거 */
   clearSelectedItems: () => set({ selectedItems: new Map() as Map<number, Set<number>> }),
-
-  /* 선택된 아이템 검색 상태 설정 */
-  setSelectedItemsSearching: (value: boolean) => set({ selectedItemsSearching: value }),
 }))