src/components/suitable/SuitableSearch.tsx

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

@@ -12,8 +12,8 @@ export function useSuitable() {
     itemPerPage,
     suitableCommCode,
     setSuitableCommCode,
-    selectedCategory,
-    clearSelectedCategory,
+    searchCategory,
+    clearSearchCategory,
     searchKeyword,
     clearSearchKeyword,
     selectedItems,
@@ -48,7 +48,7 @@ export function useSuitable() {
   const getSuitableIds = async (): Promise<SuitableIds[]> => {
     try {
       const params: Record<string, string> = {}
-      if (selectedCategory) params.category = selectedCategory
+      if (searchCategory) params.category = searchCategory
       if (searchKeyword) params.keyword = searchKeyword
       const response = await axiosInstance(null).get<SuitableIds[]>('/api/suitable/pick', { params })
       return response.data
@@ -116,13 +116,13 @@ export function useSuitable() {
     // isError,
     // error,
   } = useInfiniteQuery<Suitable[]>({
-    queryKey: ['suitables', 'list', selectedCategory, searchKeyword],
+    queryKey: ['suitables', 'list', searchCategory, searchKeyword],
     queryFn: async (context) => {
       const pageParam = context.pageParam as number
       if (pageParam === 1) clearSuitableStore({ items: true })
       return await getSuitables({
         pageNumber: pageParam,
-        ...(selectedCategory && { category: selectedCategory }),
+        ...(searchCategory && { category: searchCategory }),
         ...(searchKeyword && { keyword: searchKeyword }),
       })
     },
@@ -132,12 +132,12 @@ export function useSuitable() {
     initialPageParam: 1,
     staleTime: 1000 * 60 * 10,
     gcTime: 1000 * 60 * 10,
-    enabled: selectedCategory !== '' || searchKeyword !== '',
+    enabled: searchCategory !== '' || searchKeyword !== '',
   })
 
   const clearSuitableStore = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => {
     if (items) clearSelectedItems()
-    if (category) clearSelectedCategory()
+    if (category) clearSearchCategory()
     if (keyword) clearSearchKeyword()
   }
 
@@ -179,7 +179,7 @@ export function useSuitable() {
     try {
       const { ids, detailIds } = serializeSelectedItems()
       const fileTitle = `(${
-        suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.find((category) => category.code === selectedCategory)?.codeJp
+        suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.find((category) => category.code === searchCategory)?.codeJp
       }) 屋根材適合表`
 
       const form = document.createElement('form')

src/store/useSuitableStore.ts

@@ -11,36 +11,36 @@ interface SuitableState {
   /* 공통코드 설정 */
   setSuitableCommCode: (headCode: string, commCode: CommCode[]) => void
 
-  /* 선택된 카테고리 */
-  selectedCategory: string
-  /* 선택된 카테고리 설정 */
-  setSelectedCategory: (category: string) => void
-  /* 선택된 카테고리 초기화 */
-  clearSelectedCategory: () => void
+  /* 검색 카테고리 */
+  searchCategory: string
+  /* 검색 카테고리 설정 */
+  setSearchCategory: (category: string) => void
+  /* 검색 카테고리 초기화 */
+  clearSearchCategory: () => 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
 }
 
 export const useSuitableStore = create<SuitableState>((set) => ({
   itemPerPage: 100 as number,
   suitableCommCode: new Map() as Map<string, CommCode[]>,
-  selectedCategory: '' as string,
+  searchCategory: '' as string,
   searchKeyword: '' as string,
   selectedItems: new Map() as Map<number, Set<number>>,
 
@@ -50,17 +50,17 @@ export const useSuitableStore = create<SuitableState>((set) => ({
       suitableCommCode: new Map(state.suitableCommCode).set(headCode, commCode),
     })),
 
-  /* 선택된 카테고리 설정 */
-  setSelectedCategory: (category: string) => set({ selectedCategory: category }),
-  /* 선택된 카테고리 초기화 */
-  clearSelectedCategory: () => set({ selectedCategory: '' }),
+  /* 검색 카테고리 설정 */
+  setSearchCategory: (category: string) => set({ searchCategory: category }),
+  /* 검색 카테고리 초기화 */
+  clearSearchCategory: () => set({ searchCategory: '' }),
 
-  /* 검색 값 설정 */
+  /* 검색 키워드 설정 */
   setSearchKeyword: (value: string) => set({ searchKeyword: value }),
-  /* 검색 값 초기화 */
+  /* 검색 키워드 초기화 */
   clearSearchKeyword: () => set({ searchKeyword: '' }),
 
-  /* 선택된 아이템 추가 */
+  /* 선택 아이템 추가 */
   addSelectedItem: (mainId: number, detailId?: number, detailIds?: Set<number>) => {
     if (detailId) {
       /* 디테일(하위) 아이템 추가 */
@@ -79,7 +79,7 @@ export const useSuitableStore = create<SuitableState>((set) => ({
     }
   },
 
-  /* 아이템 전체 추가 */
+  /* 선택 아이템 전체 추가 */
   addAllSelectedItem: (suitableIds: SuitableIds[]) => {
     set(() => {
       const newSelectedItems = new Map()
@@ -90,7 +90,7 @@ export const useSuitableStore = create<SuitableState>((set) => ({
     })
   },
 
-  /* 선택된 아이템 제거 */
+  /* 선택 아이템 제거 */
   removeSelectedItem: (mainId: number, detailId?: number) => {
     set((state) => {
       const newSelectedItems = new Map(state.selectedItems)
@@ -112,6 +112,6 @@ export const useSuitableStore = create<SuitableState>((set) => ({
     })
   },
 
-  /* 선택된 아이템 모두 제거 */
+  /* 선택 아이템 모두 제거 */
   clearSelectedItems: () => set({ selectedItems: new Map() as Map<number, Set<number>> }),
 }))