[REFACTOR] 필터링 및 검색 v2 로직으로 수정

.gitignore

@@ -29,4 +29,9 @@ dist-ssr
 
 .next
 next-env.d.ts
-dist
+dist
+
+CLAUDE.md
+
+# TypeScript build cache
+tsconfig.tsbuildinfo

src/apis/filter/axios.ts

@@ -1,38 +1,74 @@
-import { FilterType, PriceType } from '@apis/filter/type';
-import instance, { getAxiosInstance } from '@apis/instance';
+import { FilterType, PriceType, TemplestaySearchParamsV2 } from '@apis/filter/type';
+import instance from '@apis/instance';
 import MESSAGES from '@apis/messages';
 import { isAxiosError } from 'axios';
 
-export const fetchFilteredList = async (
-  filterData: FilterType & { price: PriceType; content: string },
-  page: number,
-  userId?: string,
-) => {
-  const axiosInstance = getAxiosInstance();
-
+// v2 API
+export const fetchFilteredListV2 = async (params: TemplestaySearchParamsV2) => {
   try {
-    const response = await axiosInstance.post(`/search?page=${page}&userId=${userId}`, {
-      ...filterData,
-    });
+    const response = await instance.get('/v2/api/templestay', { params });
 
-    return response.data;
+    return response.data.data;
   } catch (error) {
     if (isAxiosError(error)) throw error;
     else throw new Error(MESSAGES.UNKNOWN_ERROR);
   }
 };
 
-export const fetchFilteredCount = async (
-  filterData: FilterType & { price: PriceType; content: string },
-) => {
-  try {
-    const response = await instance.post('/public/filter/count', {
-      ...filterData,
-    });
+// 필터 데이터를 v2 API 파라미터로 변환하는 헬퍼 함수
+export const convertToV2Params = (
+  groupedFilters: FilterType,
+  price: PriceType,
+  search: string,
+  page: number,
+  userId?: string,
+  sort?: string,
+): TemplestaySearchParamsV2 => {
+  const params: TemplestaySearchParamsV2 = {
+    page,
+    search: search && search.trim() !== '' ? search : undefined,
+    min: price.minPrice > 0 ? price.minPrice : undefined,
+    max: price.maxPrice < 30 ? price.maxPrice : undefined,
+    sort: sort && sort.trim() !== '' ? sort : undefined,
+    userId: userId && userId.trim() !== '' ? userId : undefined,
+  };
 
-    return response.data;
-  } catch (error) {
-    if (isAxiosError(error)) throw error;
-    else throw new Error(MESSAGES.UNKNOWN_ERROR);
+  // 각 필터 그룹의 선택된 아이템들을 콤마로 구분된 문자열로 변환
+  if (groupedFilters.region) {
+    const selectedRegions = Object.entries(groupedFilters.region)
+      .filter(([, isSelected]) => isSelected)
+      .map(([region]) => region);
+    if (selectedRegions.length > 0) {
+      params.region = selectedRegions.join(',');
+    }
+  }
+
+  if (groupedFilters.type) {
+    const selectedTypes = Object.entries(groupedFilters.type)
+      .filter(([, isSelected]) => isSelected)
+      .map(([type]) => type);
+    if (selectedTypes.length > 0) {
+      params.type = selectedTypes.join(',');
+    }
+  }
+
+  if (groupedFilters.activity) {
+    const selectedActivities = Object.entries(groupedFilters.activity)
+      .filter(([, isSelected]) => isSelected)
+      .map(([activity]) => activity);
+    if (selectedActivities.length > 0) {
+      params.activity = selectedActivities.join(',');
+    }
+  }
+
+  if (groupedFilters.etc) {
+    const selectedEtc = Object.entries(groupedFilters.etc)
+      .filter(([, isSelected]) => isSelected)
+      .map(([etc]) => etc);
+    if (selectedEtc.length > 0) {
+      params.etc = selectedEtc.join(',');
+    }
   }
+
+  return params;
 };

src/apis/filter/index.ts

@@ -1,27 +1,34 @@
-import { fetchFilteredList } from '@apis/filter/axios';
+import { fetchFilteredListV2, convertToV2Params } from '@apis/filter/axios';
 import { FetchFilteredListProps } from '@apis/filter/type';
 import { useMutation } from '@tanstack/react-query';
 import queryClient from 'src/queryClient';
 
-const useFetchFilteredList = () => {
+// v2 api 사용하는 hook
+const useFetchFilteredListV2 = () => {
   return useMutation({
     mutationFn: ({
       groupedFilters,
       adjustedPrice,
       searchQuery,
       page,
       userId,
-    }: FetchFilteredListProps) => {
-      return fetchFilteredList(
-        { ...groupedFilters, price: adjustedPrice, content: searchQuery },
+      sort,
+    }: FetchFilteredListProps & { sort?: string }) => {
+      const params = convertToV2Params(
+        groupedFilters,
+        adjustedPrice,
+        searchQuery,
         page,
         userId,
+        sort,
       );
+      return fetchFilteredListV2(params);
     },
-    onSuccess: (data, { groupedFilters, page, userId }: FetchFilteredListProps) => {
-      queryClient.setQueryData(['filteredList', groupedFilters, page, userId], data);
+    onSuccess: (data, variables) => {
+      const { groupedFilters, page, userId } = variables;
+      queryClient.setQueryData(['filteredListV2', groupedFilters, page, userId], data);
     },
   });
 };
 
-export default useFetchFilteredList;
+export default useFetchFilteredListV2;

src/apis/filter/type.ts

@@ -18,3 +18,17 @@ export interface FetchFilteredListProps {
   page: number;
   userId: string;
 }
+
+export interface TemplestaySearchParamsV2 {
+  region?: string;
+  type?: string;
+  activity?: string;
+  etc?: string;
+  min?: number;
+  max?: number;
+  sort?: string;
+  search?: string;
+  page?: number;
+  userId?: string;
+  size?: number;
+}

src/app/HomeClient.tsx

@@ -2,12 +2,9 @@
 
 import PopularCarousel from '@components/carousel/popularCarousel/PopularCarousel';
 import ModalContainer from '@components/common/modal/ModalContainer';
-import useFilter from '@hooks/useFilter';
 import useNavigateTo from '@hooks/useNavigateTo';
-import { useSetAtom } from 'jotai';
 import { useEffect, useState } from 'react';
 import useEventLogger from 'src/gtm/hooks/useEventLogger';
-import { contentAtom } from 'src/store/store';
 
 import * as styles from './homePage.css';
 
@@ -16,12 +13,7 @@ const HomeClient = () => {
   const navigateToLogin = useNavigateTo('/loginStart');
   const { logClickEvent } = useEventLogger('modal_login_wish');
 
-  const { handleResetFilter } = useFilter();
-  const setContent = useSetAtom(contentAtom);
-
   useEffect(() => {
-    setContent('');
-    handleResetFilter();
     localStorage.setItem('prevPage', '/');
   }, []);