feat: 모임카드 API 연결

sopt-makers · Jan 13, 2025 · 86b3d8c · 86b3d8c
1 parent e56f100
commit 86b3d8c
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 14 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -13,9 +13,9 @@ import type { NextPage } from 'next';
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { styled } from 'stitches.config';
-import { GroupBrowsingCardResponse } from '@api/API_LEGACY/meeting';
 import CrewTab from '@components/CrewTab';
 import HomeCardList from '@components/page/home/HomeCardList';
+import { useGetRecommendMeetingListQuery } from '@api/meeting/hook';
 
 const Home: NextPage = () => {
   const { isLaptop, isTablet } = useDisplay();
@@ -25,6 +25,7 @@ const Home: NextPage = () => {
   const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useInfinitePosts(TAKE_COUNT);
 
   const { data: groupBrowsingCardData } = useQueryGetGroupBrowsingCard();
+  const { data: inProgressMeetings } = useGetRecommendMeetingListQuery({ meetingIds: [] });
 
   useEffect(() => {
     if (inView && hasNextPage) {
@@ -56,16 +57,12 @@ const Home: NextPage = () => {
           <QuickMenuWrapper>
             <QuickMenu />
           </QuickMenuWrapper>
-          {groupBrowsingCardData && (
-            <HomeCardList groupBrowsingCardData={groupBrowsingCardData as GroupBrowsingCardResponse} />
-          )}
+          {inProgressMeetings && <HomeCardList groupBrowsingCardData={inProgressMeetings} />}
         </Flex>
       ) : (
         <>
           <Flex justify="center" style={{ marginTop: '72px' }}>
-            {groupBrowsingCardData && (
-              <HomeCardList groupBrowsingCardData={groupBrowsingCardData as GroupBrowsingCardResponse} />
-            )}
+            {inProgressMeetings && <HomeCardList groupBrowsingCardData={inProgressMeetings} />}
             <div style={{ paddingLeft: '106px' }}>
               <QuickMenu />
             </div>

diff --git a/src/api/API_LEGACY/user/index.ts b/src/api/API_LEGACY/user/index.ts
@@ -1,7 +1,7 @@
 import { GroupInfo } from '@components/feed/Modal/FeedFormPresentation';
-import { api } from '../..';
 import { GetMeetingResponse } from '../meeting';
 import { paths } from '@/__generated__/schema2';
+import { api } from '@api/index';
 
 /**
  * @deprecated

diff --git a/src/api/meeting/hook.ts b/src/api/meeting/hook.ts
@@ -1,5 +1,6 @@
 import { UseQueryOptions, UseQueryResult, useQuery } from '@tanstack/react-query';
-import { MeetingPeopleResponse, getMeetingPeopleList } from '.';
+import { MeetingPeopleResponse, getMeetingPeopleList, getRecommendMeetingList } from '.';
+import { paths } from '@/__generated__/schema2';
 
 interface UseQueryGetMeetingPeopleListParams {
   params: {
@@ -27,3 +28,12 @@ export const useQueryGetMeetingPeopleList = ({
     ...useQueryOptions,
   });
 };
+
+export type RecommendMeetingListQueryResponse =
+  paths['/meeting/v2/recommend']['get']['responses']['200']['content']['application/json;charset=UTF-8']['meetings'];
+export const useGetRecommendMeetingListQuery = ({ meetingIds = [] }: { meetingIds: number[] }) => {
+  return useQuery<RecommendMeetingListQueryResponse>({
+    queryKey: ['getRecommendMeetingList', ...meetingIds],
+    queryFn: () => getRecommendMeetingList({ meetingIds }),
+  });
+};
diff --git a/src/api/meeting/index.ts b/src/api/meeting/index.ts
@@ -1,6 +1,7 @@
 import { ApplicationStatusType, UserResponse } from '@api/user';
 import { api } from '..';
 import { APPROVAL_STATUS_KOREAN_TO_ENGLISH } from '@constants/option';
+import { paths } from '@/__generated__/schema2';
 interface PaginationType {
   page: number;
   take: number;
@@ -47,3 +48,12 @@ export const getMeetingPeopleList = async ({ id, ...rest }: OptionData): Promise
     })
   ).data;
 };
+
+type RecommendMeetingListResponse =
+  paths['/meeting/v2/recommend']['get']['responses']['200']['content']['application/json;charset=UTF-8'];
+export const getRecommendMeetingList = async ({ meetingIds = [] }: { meetingIds: number[] }) => {
+  const meetingIdsParams = meetingIds.reduce((acc, id, idx) => {
+    return acc + (idx === 0 ? '?' : '&') + `meetingIds=${id}`;
+  }, '');
+  return (await api.get<RecommendMeetingListResponse>(`/meeting/v2/recommend${meetingIdsParams}`, {})).data.meetings;
+};
diff --git a/src/api/post/index.ts b/src/api/post/index.ts
@@ -1,7 +1,7 @@
 import { GetMeetingResponse } from '@api/API_LEGACY/meeting';
 import { UserResponse } from '@api/API_LEGACY/user';
 import { FormCreateType, FormEditType } from '@components/feed/Modal/feedSchema';
-import { Data, api, apiV2 } from '..';
+import { api, apiV2 } from '..';
 import { paths } from '@/__generated__/schema2';
 
 export interface PostResponse {

diff --git a/src/components/page/home/HomeCardList/index.tsx b/src/components/page/home/HomeCardList/index.tsx
@@ -1,14 +1,18 @@
-import { GroupBrowsingCardResponse } from '@api/API_LEGACY/meeting';
+import { RecommendMeetingListQueryResponse, useGetRecommendMeetingListQuery } from '@api/meeting/hook';
 import CardList from '@components/page/home/HomeCardList/CardList';
 import { styled } from 'stitches.config';
 
-const HomeCardList = ({ groupBrowsingCardData }: { groupBrowsingCardData: GroupBrowsingCardResponse }) => {
+const HomeCardList = ({ groupBrowsingCardData }: { groupBrowsingCardData: RecommendMeetingListQueryResponse }) => {
+  const { data: recommendMeetings } = useGetRecommendMeetingListQuery({ meetingIds: [359, 360, 361] });
+
   return (
     <SWrapper>
       <SGradationRight />
-      <CardList label="🔹 우리... 같이 솝커톤 할래?" data={groupBrowsingCardData.slice(0, 3)} />
+      {recommendMeetings && <CardList label="🔹 우리... 같이 솝커톤 할래?" data={recommendMeetings.slice(0, 3)} />}
       <CardList label="🔥 지금 모집중인 모임" data={groupBrowsingCardData.slice(0, 3)} />
-      <CardList label="🍀 1차 행사 신청이 얼마 남지 않았어요!" data={groupBrowsingCardData.slice(0, 3)} />
+      {recommendMeetings && (
+        <CardList label="🍀 1차 행사 신청이 얼마 남지 않았어요!" data={recommendMeetings.slice(0, 3)} />
+      )}
     </SWrapper>
   );
 };