feat: 지붕재적합성 초기화면 전체 데이터 미표출, 검색조건 그룹코드로 변경

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 = ':roofMtCd'
+      --roofMtCd AND msm.roof_mt_cd IN (:roofMtCd)
       --productName AND msm.product_name LIKE '%:productName%'
     ORDER BY msm.product_name
     OFFSET (@P1 - 1) * @P2 ROWS
@@ -50,8 +50,13 @@ export async function GET(request: NextRequest) {
 
     // 검색 조건 설정
     if (category) {
+      let 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', category)
+      query = query.replace(':roofMtCd', roofMtQuery.replace(':roofMtGrpCd', category))
     }
     if (keyword) {
       query = query.replace('--productName ', '')
@@ -60,6 +65,8 @@ 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/components/suitable/Suitable.tsx

@@ -10,29 +10,28 @@ import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
 
 export default function Suitable() {
   const [reference, setReference] = useState(true)
+  const [searchValue, setSearchValue] = useState('')
 
-  const { getSuitableCommCode } = useSuitable()
-  const { suitableCommCode, selectedCategory, setSelectedCategory, searchValue, setSearchValue, setIsSearch, clearSelectedItems } = useSuitableStore()
+  const { getSuitableCommCode, clearSuitableSearch } = useSuitable()
+  const { suitableCommCode, selectedCategory, setSelectedCategory, setSearchKeyword, clearSearchKeyword } = useSuitableStore()
 
   const handleInputSearch = async () => {
     if (!searchValue.trim()) {
       alert('屋根材の製品名を入力してください。')
       return
     }
-    setIsSearch(true)
+    setSearchKeyword(searchValue)
   }
 
   const handleInputClear = () => {
     setSearchValue('')
-    setIsSearch(false)
+    clearSearchKeyword()
   }
 
   useEffect(() => {
     getSuitableCommCode()
     return () => {
-      setSelectedCategory('')
-      setSearchValue('')
-      clearSelectedItems()
+      clearSuitableSearch()
     }
   }, [])
 
@@ -41,7 +40,7 @@ export default function Suitable() {
       <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) => (
+          {suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATERIAL_GROUP)?.map((category: CommCode, index: number) => (
             <option key={index} value={category.code}>
               {category.codeJp}
             </option>

src/components/suitable/SuitableList.tsx

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

src/hooks/useSuitable.ts

@@ -8,7 +8,17 @@ import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail, type SuitableId
 export function useSuitable() {
   const { axiosInstance } = useAxios()
   const { getCommCode } = useCommCode()
-  const { itemPerPage, selectedCategory, searchValue, suitableCommCode, setSuitableCommCode, isSearch, selectedItems } = useSuitableStore()
+  const {
+    itemPerPage,
+    suitableCommCode,
+    setSuitableCommCode,
+    selectedCategory,
+    clearSelectedCategory,
+    searchKeyword,
+    clearSearchKeyword,
+    selectedItems,
+    clearSelectedItems,
+  } = useSuitableStore()
 
   const getSuitables = async ({
     pageNumber,
@@ -39,7 +49,7 @@ export function useSuitable() {
     try {
       const params: Record<string, string> = {}
       if (selectedCategory) params.category = selectedCategory
-      if (searchValue) params.keyword = searchValue
+      if (searchKeyword) params.keyword = searchKeyword
       const response = await axiosInstance(null).get<SuitableIds[]>('/api/suitable/pick', { params })
       return response.data
     } catch (error) {
@@ -105,13 +115,13 @@ export function useSuitable() {
     isError,
     error,
   } = useInfiniteQuery<Suitable[]>({
-    queryKey: ['suitables', 'list', selectedCategory, isSearch],
+    queryKey: ['suitables', 'list', selectedCategory, searchKeyword],
     queryFn: async (context) => {
       const pageParam = context.pageParam as number
       return await getSuitables({
         pageNumber: pageParam,
         ...(selectedCategory && { category: selectedCategory }),
-        ...(isSearch && { keyword: searchValue }),
+        ...(searchKeyword && { keyword: searchKeyword }),
       })
     },
     getNextPageParam: (lastPage: Suitable[], allPages: Suitable[][]) => {
@@ -120,6 +130,7 @@ export function useSuitable() {
     initialPageParam: 1,
     staleTime: 1000 * 60 * 10,
     gcTime: 1000 * 60 * 10,
+    enabled: selectedCategory !== '' || searchKeyword !== '',
   })
 
   const serializeSelectedItems = (): Map<string, string> => {
@@ -135,6 +146,12 @@ export function useSuitable() {
     ])
   }
 
+  const clearSuitableSearch = () => {
+    clearSelectedItems()
+    clearSearchKeyword()
+    clearSelectedCategory()
+  }
+
   return {
     getSuitables,
     getSuitableIds,
@@ -149,5 +166,6 @@ export function useSuitable() {
     isFetchingNextPage,
     isLoading,
     serializeSelectedItems,
+    clearSuitableSearch,
   }
 }

src/store/useSuitableStore.ts

@@ -11,20 +11,19 @@ interface SuitableState {
   /* 공통코드 설정 */
   setSuitableCommCode: (headCode: string, commCode: CommCode[]) => void
 
-  /* 검색 상태 */
-  isSearch: boolean
-  /* 검색 상태 설정 */
-  setIsSearch: (isSearch: boolean) => void
-
   /* 선택된 카테고리 */
   selectedCategory: string
   /* 선택된 카테고리 설정 */
   setSelectedCategory: (category: string) => void
+  /* 선택된 카테고리 초기화 */
+  clearSelectedCategory: () => void
 
   /* 검색 값 */
-  searchValue: string
+  searchKeyword: string
   /* 검색 값 설정 */
-  setSearchValue: (value: string) => void
+  setSearchKeyword: (value: string) => void
+  /* 검색 값 초기화 */
+  clearSearchKeyword: () => void
 
   /* 선택된 아이템 리스트 */
   selectedItems: Map<number, Set<number>>
@@ -41,9 +40,8 @@ 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,
-  searchValue: '' as string,
+  searchKeyword: '' as string,
   selectedItems: new Map() as Map<number, Set<number>>,
 
   /* 공통코드 설정 */
@@ -52,14 +50,15 @@ 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: '' }),
 
   /* 검색 값 설정 */
-  setSearchValue: (value: string) => set({ searchValue: value }),
+  setSearchKeyword: (value: string) => set({ searchKeyword: value }),
+  /* 검색 값 초기화 */
+  clearSearchKeyword: () => set({ searchKeyword: '' }),
 
   /* 선택된 아이템 추가 */
   addSelectedItem: (mainId: number, detailId?: number, detailIds?: Set<number>) => {

src/types/Suitable.ts

@@ -1,11 +1,13 @@
 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',
 }