Merge pull request #304 from JEOLLOGA/feat/#290/filter-ssr

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

Author: seong-hui

.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,47 @@
-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();
-
+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,
-    });
+const getSelectedItems = (filterGroup?: Record<string, number>): string | undefined => {
+  if (!filterGroup) return undefined;
+  const selected = Object.entries(filterGroup)
+    .filter(([, value]) => value === 1)
+    .map(([item]) => item);
+  return selected.length > 0 ? selected.join(',') : undefined;
+};
 
-    return response.data;
-  } catch (error) {
-    if (isAxiosError(error)) throw error;
-    else throw new Error(MESSAGES.UNKNOWN_ERROR);
-  }
+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,
+  };
+
+  params.region = getSelectedItems(groupedFilters.region);
+  params.type = getSelectedItems(groupedFilters.type);
+  params.activity = getSelectedItems(groupedFilters.activity);
+  params.etc = getSelectedItems(groupedFilters.etc);
+  return params;
 };

src/apis/filter/index.ts

@@ -1,27 +1,14 @@
-import { fetchFilteredList } from '@apis/filter/axios';
-import { FetchFilteredListProps } from '@apis/filter/type';
-import { useMutation } from '@tanstack/react-query';
-import queryClient from 'src/queryClient';
+import { fetchFilteredListV2 } from '@apis/filter/axios';
+import { TemplestaySearchParamsV2 } from '@apis/filter/type';
+import { useQuery } from '@tanstack/react-query';
 
-const useFetchFilteredList = () => {
-  return useMutation({
-    mutationFn: ({
-      groupedFilters,
-      adjustedPrice,
-      searchQuery,
-      page,
-      userId,
-    }: FetchFilteredListProps) => {
-      return fetchFilteredList(
-        { ...groupedFilters, price: adjustedPrice, content: searchQuery },
-        page,
-        userId,
-      );
-    },
-    onSuccess: (data, { groupedFilters, page, userId }: FetchFilteredListProps) => {
-      queryClient.setQueryData(['filteredList', groupedFilters, page, userId], data);
-    },
+const useFetchFilteredListV2 = (params: TemplestaySearchParamsV2) => {
+  return useQuery({
+    queryKey: ['filteredListV2', params],
+    queryFn: () => fetchFilteredListV2(params),
+    enabled: true,
+    placeholderData: (previousData) => previousData,
   });
 };
 
-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', '/');
   }, []);