Feat/refactor/meeting list/DEVING-57

src/app/meeting/components/MeetingList.tsx

@@ -7,15 +7,12 @@ import VerticalCard from '@/components/ui/VerticalCard';
 import TechSelector from '@/components/ui/tech-stack/TechSelector';
 import useInfiniteScroll from '@/hooks/common/useInfiniteScroll';
 import useMediaQuery from '@/hooks/common/useMediaQuery';
-import {
-  MEETING_QUERY_KEYS,
-  useInfiniteSearchMeetings,
-} from '@/hooks/queries/useMeetingQueries';
+import { useInfiniteSearchMeetings } from '@/hooks/queries/useMeetingQueries';
 import useDebounce from '@/hooks/useDebounde';
 import { filterOptions, translateCategoryNameToKor } from '@/util/searchFilter';
-import { QueryClient } from '@tanstack/react-query';
+import { keepPreviousData } from '@tanstack/react-query';
 import { useParams, useRouter } from 'next/navigation';
-import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
+import { ChangeEvent, useCallback, useState } from 'react';
 import type { IMeetingSearchCondition, SearchMeeting } from 'types/meeting';
 
 import MeetingExtraInfo from './MeetingExtraInfo';
@@ -41,10 +38,12 @@ const MeetingList = () => {
     hasNextPage,
     isFetchingNextPage,
     fetchNextPage,
-    refetch,
   } = useInfiniteSearchMeetings(
     translateCategoryNameToKor(categoryStr),
     searchQuery,
+    {
+      placeholderData: keepPreviousData,
+    },
   );
 
   const lastMeetingRef = useInfiniteScroll({
@@ -69,14 +68,6 @@ const MeetingList = () => {
     [],
   );
 
-  const queryClient = useMemo(() => new QueryClient(), []);
-
-  // 필터에 따른 재검색
-  useEffect(() => {
-    queryClient.removeQueries({ queryKey: [MEETING_QUERY_KEYS.meetings] });
-    refetch();
-  }, [queryClient, searchQuery, refetch]);
-
   const [inputValue, setInputValue] = useState('');
 
   // 키워드 검색 시 사용되는 디바운스 훅
@@ -114,7 +105,14 @@ const MeetingList = () => {
 
   return (
     <div className="mt-[126px]">
-      <SearchInput className="mx-5" onChange={handleChange} />
+      <div className="typo-head1 mb-10 px-4 text-Cgray800">
+        {translateCategoryNameToKor(categoryStr)} 모임 목록
+      </div>
+      <SearchInput
+        className="mx-5"
+        value={inputValue}
+        onChange={handleChange}
+      />
 
       {/* 기술스택 검색바 */}
       {categoryStr !== 'hobby' && (

src/app/meeting/components/RecommendMeeting.tsx

@@ -34,7 +34,9 @@ const RecommendMeeting = () => {
 
   return (
     <>
-      <div className="typo-head1 mb-6 px-4 text-Cgray800">Deving 추천 모임</div>
+      <div className="typo-head1 mb-6 px-4 text-Cgray800">
+        Deving의 {translateCategoryNameToKor(categoryStr)} 추천 모임
+      </div>
 
       {/* 웹뷰, 테블릿 */}
       <div

src/hooks/queries/useMeetingQueries.ts

@@ -7,13 +7,32 @@ import {
 } from 'service/api/meeting';
 import type { CategoryTitle, IMeetingSearchCondition } from 'types/meeting';
 
+const getSortedSearchQuery = (
+  searchQueryObj: IMeetingSearchCondition,
+): IMeetingSearchCondition => ({
+  ...searchQueryObj,
+  skillArray: [...searchQueryObj.skillArray].sort(),
+});
+
 const MEETING_QUERY_KEYS = {
-  topMeetings: (category: string) => ['topMeetings', category] as const, // 카테고리별 추천모임 쿼리키 분리
-  meetings: (category: string) => ['meetings', category] as const, // 카테고리별 모임 쿼리키 분리
-  meetingId: (id: string, category: string) =>
-    [...MEETING_QUERY_KEYS.meetings(category), id] as const,
+  topMeetings: (category: string) => ['topMeetings', category] as const,
+  meetings: (category: string, searchQueryObj: IMeetingSearchCondition) => {
+    const sortedSearchQueryObj = getSortedSearchQuery(searchQueryObj);
+    return ['meetings', category, sortedSearchQueryObj] as const;
+  },
+  meetingId: (
+    id: string,
+    category: string,
+    searchQueryObj: IMeetingSearchCondition,
+  ) =>
+    [
+      ...MEETING_QUERY_KEYS.meetings(
+        category,
+        getSortedSearchQuery(searchQueryObj),
+      ),
+      id,
+    ] as const,
 };
-
 const useTopMeetings = (category: CategoryTitle, options = {}) => {
   return useQuery({
     queryKey: MEETING_QUERY_KEYS.topMeetings(category),
@@ -28,7 +47,7 @@ const useInfiniteSearchMeetings = (
   option = {},
 ) => {
   return useInfiniteQuery({
-    queryKey: MEETING_QUERY_KEYS.meetings(category),
+    queryKey: MEETING_QUERY_KEYS.meetings(category, searchQueryObj),
     queryFn: ({ pageParam = 0 }) =>
       getMeetings(pageParam, category, searchQueryObj),
     initialPageParam: 0,