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' && (
@@ -157,6 +155,7 @@ const MeetingList = () => {
                     isLike={meeting.isLike}
                     total={meeting.maxMember}
                     value={meeting.memberCount}
+                    searchQuery={searchQuery}
                     likesCount={meeting.likesCount}
                     skills={meeting.meetingSkillArray}
                   >
@@ -201,6 +200,7 @@ const MeetingList = () => {
                     likesCount={meeting.likesCount}
                     total={meeting.maxMember}
                     value={meeting.memberCount}
+                    searchQuery={searchQuery}
                     skills={meeting.meetingSkillArray}
                   >
                     <MeetingExtraInfo
@@ -244,6 +244,7 @@ const MeetingList = () => {
                     likesCount={meeting.likesCount}
                     total={meeting.maxMember}
                     value={meeting.memberCount}
+                    searchQuery={searchQuery}
                     skills={meeting.meetingSkillArray}
                   >
                     <MeetingExtraInfo

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/components/ui/HorizonCard.tsx

@@ -13,6 +13,7 @@ import { Heart, Map } from 'lucide-react';
 import Image from 'next/image';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { IMeetingSearchCondition } from 'types/meeting';
 
 import { useToast } from '../common/ToastContext';
 import { Button } from './Button';
@@ -33,6 +34,7 @@ interface HorizonCardProps {
   thumbnailWidth?: number;
   thumbnailHeight?: number;
   onClick?: (id: number) => void;
+  searchQuery?: IMeetingSearchCondition;
   isLike?: boolean;
   likesCount?: number;
   skills?: string[];
@@ -52,6 +54,7 @@ const HorizonCard = ({
   isLike = false,
   value,
   total = 100,
+  searchQuery,
   likesCount,
   skills,
 }: HorizonCardProps) => {
@@ -76,9 +79,11 @@ const HorizonCard = ({
   });
 
   const invalidateMeetingQuery = () => {
-    queryClient.invalidateQueries({
-      queryKey: MEETING_QUERY_KEYS.meetings(category),
-    });
+    if (category && searchQuery) {
+      queryClient.invalidateQueries({
+        queryKey: MEETING_QUERY_KEYS.meetings(category, searchQuery),
+      });
+    }
     queryClient.invalidateQueries({
       queryKey: MEETING_QUERY_KEYS.topMeetings(category),
     });

src/components/ui/VerticalCard.tsx

@@ -13,6 +13,7 @@ import { Heart, Map } from 'lucide-react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { IMeetingSearchCondition } from 'types/meeting';
 
 import { useToast } from '../common/ToastContext';
 import { Button } from './Button';
@@ -32,6 +33,7 @@ interface VerticalCardProps {
   location: string;
   onClick?: (id: number) => void;
   isLike?: boolean;
+  searchQuery?: IMeetingSearchCondition;
   value: number;
   total: number;
   likesCount?: number;
@@ -51,6 +53,7 @@ const VerticalCard = ({
   onClick,
   isLike = false,
   likesCount,
+  searchQuery,
   value,
   total = 100,
   skills,
@@ -77,9 +80,11 @@ const VerticalCard = ({
 
   // TODO: 리팩토링 예정
   const invalidateMeetingQuery = () => {
-    queryClient.invalidateQueries({
-      queryKey: MEETING_QUERY_KEYS.meetings(category),
-    });
+    if (category && searchQuery) {
+      queryClient.invalidateQueries({
+        queryKey: MEETING_QUERY_KEYS.meetings(category, searchQuery),
+      });
+    }
     queryClient.invalidateQueries({
       queryKey: MEETING_QUERY_KEYS.topMeetings(category),
     });

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,