[#185] Feat: 찜 목록 조회 페이지 구현 (#186)

src/Router.tsx

@@ -35,6 +35,7 @@ import RedirectOnAuthentication from '@/pages/RedirectOnAuthentication';
 
 import SpinnerFullScreen from './components/Spinner/SpinnerFullScreen';
 import BoardGameListPage from './pages/BoardGameList';
+import BoardGameWishListPage from './pages/BoardGameWishList';
 import ChatRoomPage from './pages/ChatRoom';
 import ChatRoomListPage from './pages/ChatRoomList';
 import CreateBoardGameTipPage from './pages/CreateBoardGameTip';
@@ -165,7 +166,7 @@ const AnimatedRoutes = () => {
             element={
               <Suspense fallback={<SpinnerFullScreen />}>
                 <AuthorizedRoute>
-                  <ProfileEditPage />
+                  <BoardGameWishListPage />
                 </AuthorizedRoute>
               </Suspense>
             }

src/apis/boardGameWishList.ts

@@ -0,0 +1,47 @@
+import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
+import qs from 'qs';
+
+import { BOARD_GAMES_WISH_API_URL } from '@/constants/apiRoutes';
+import { BOARD_GAME_WISH_LIST_QUERY_KEY } from '@/constants/queryKey';
+
+import type { BoardGameListItemResponse } from './boardGameList';
+import { api } from './core';
+
+interface BoardGameWishListResponse {
+  boardGamesInfos: BoardGameListItemResponse[];
+  currentPageNumber: number;
+  size: number;
+  hasNext: true;
+}
+
+const getBoardGameWishList = (userId: string, size: number, page: number) =>
+  api.get<BoardGameWishListResponse>({
+    url: `${BOARD_GAMES_WISH_API_URL}/${userId}`,
+    params: { size, page },
+    paramsSerializer: params => qs.stringify(params, { indices: false }),
+  });
+
+export const useGetBoardGameWishListApi = (
+  userId: string,
+  size: number = 20,
+) => {
+  const { data, hasNextPage, fetchNextPage, fetchStatus } =
+    useSuspenseInfiniteQuery({
+      queryKey: [BOARD_GAME_WISH_LIST_QUERY_KEY, userId],
+      queryFn: ({ pageParam }) => getBoardGameWishList(userId, size, pageParam),
+      initialPageParam: 0,
+      getNextPageParam: ({ hasNext, currentPageNumber }) =>
+        hasNext ? currentPageNumber + 1 : undefined,
+    });
+
+  const allPagesMerged = data.pages.flatMap(
+    ({ boardGamesInfos }) => boardGamesInfos,
+  );
+
+  return {
+    fetchStatus,
+    hasNextPage,
+    fetchNextPage,
+    boardGamesInfos: allPagesMerged,
+  };
+};

src/components/GatheringListItem/index.tsx

@@ -66,7 +66,7 @@ const GatheringListItem = ({
         />
         <div className='flex h-[100px] grow flex-col justify-between'>
           <div className='flex flex-col items-start gap-1'>
-            <div className='w-full truncate text-left'>{title}</div>
+            <div className='line-clamp-1 w-full text-left'>{title}</div>
             <div className='text-left text-xs text-gray-accent2'>
               {gatheringSummary}
             </div>

src/constants/messages/emptyScreens.ts

@@ -5,6 +5,9 @@ export const EMPTY_NOTIFICATION_MESSAGE =
 export const EMPTY_BOARD_GAMES_TITLE = '앗! 조건에 맞는 게임이 없어요!';
 export const EMPTY_BOARD_GAMES_MESSAGE = '조건을 변경해서 검색해주세요';
 
+export const EMPTY_BOARD_GAME_WISH_TITLE = '앗! 찜한 게임이 없어요!';
+export const EMPTY_BOARD_GAME_WISH_MESSAGE = '관심 있는 보드 게임을 찜해보세요';
+
 export const EMPTY_CHAT_ROOM_LIST_TITLE = '앗! 참여 중인 모임이 없어요!';
 export const EMPTY_CHAT_ROOM_LIST_MESSAGE =
   '새로운 모임에 참여해 대화를 시작해보세요';

src/constants/queryKey.ts

@@ -2,6 +2,7 @@ export const LOGGED_IN_USER_QUERY_KEY = 'logged-in-user';
 export const GATHERING_DETAIL_QUERY_KEY = 'gathering-detail';
 export const BOARD_GAME_DETAIL_QUERY_KEY = 'board-game-detail';
 export const BOARD_GAME_LIST_QUERY_KEY = 'board-games';
+export const BOARD_GAME_WISH_LIST_QUERY_KEY = 'wish-list';
 export const NOTIFICATIONS_QUERY_KEY = 'notifications';
 export const PROFILES_QUERY_KEY = 'profiles';
 export const KAKAO_MAP_SEARCH_QUERY_KEY = 'kakao-map-search';

src/index.css

@@ -3,6 +3,15 @@
 @tailwind utilities;
 
 @layer base {
+  @font-face {
+    font-family: 'Noto Sans KR';
+    src: url('../assets/font/NotoSansKR-Regular.ttf');
+  }
+
+  * {
+    @apply font-sans;
+  }
+
   #styleRoot {
     /* Figma 색상 팔레트 정의 필요 */
     --base: black;

src/mocks/boardGameWishList.ts

@@ -0,0 +1,102 @@
+import { HttpResponse, http } from 'msw';
+
+import { API_BASE_URL, BOARD_GAMES_WISH_API_URL } from '@/constants/apiRoutes';
+
+export const MOCK_GET_BOARD_GAME_WISH_LIST_URL = `${API_BASE_URL}${BOARD_GAMES_WISH_API_URL}/4`;
+
+export const mockGetBoardGameWishListHandler = async () => {
+  return HttpResponse.json({
+    boardGamesInfos: [
+      {
+        boardGameId: 1,
+        name: '스플렌더',
+        categories: ['전략 게임'],
+        difficulty: '어려움',
+        minParticipants: 2,
+        maxParticipants: 4,
+        fromPlayTime: 45,
+        toPlayTime: 45,
+        wishCount: 54,
+        imageUrl: 'https://picsum.photos/200',
+      },
+      {
+        boardGameId: 2,
+        name: '노터치 크라켄 (크툴루를 건드리지마)',
+        categories: ['전략 게임', '파티 게임'],
+        difficulty: '보통',
+        minParticipants: 3,
+        maxParticipants: 6,
+        fromPlayTime: 30,
+        toPlayTime: 30,
+        wishCount: 11,
+        imageUrl: 'https://picsum.photos/200',
+      },
+      {
+        boardGameId: 3,
+        name: '보난자',
+        categories: ['전략 게임', '파티 게임', '가족 게임'],
+        difficulty: '어려움',
+        minParticipants: 3,
+        maxParticipants: 7,
+        fromPlayTime: 50,
+        toPlayTime: 50,
+        wishCount: 34,
+        imageUrl: 'https://picsum.photos/200',
+      },
+      {
+        boardGameId: 4,
+        name: '카탄',
+        categories: ['전략 게임', '테마 게임'],
+        difficulty: '어려움',
+        minParticipants: 3,
+        maxParticipants: 4,
+        fromPlayTime: 60,
+        toPlayTime: 90,
+        wishCount: 215,
+        imageUrl: 'https://picsum.photos/200',
+      },
+      {
+        boardGameId: 5,
+        name: '꼬치의 달인',
+        categories: ['가족게임', '파티 게임', '어린이 게임'],
+        difficulty: '쉬움',
+        minParticipants: 2,
+        maxParticipants: 4,
+        fromPlayTime: 15,
+        toPlayTime: 30,
+        wishCount: 183,
+        imageUrl: 'https://picsum.photos/200',
+      },
+      {
+        boardGameId: 6,
+        name: '스플렌더',
+        categories: ['전략 게임'],
+        difficulty: '어려움',
+        minParticipants: 2,
+        maxParticipants: 4,
+        fromPlayTime: 45,
+        toPlayTime: 45,
+        wishCount: 54,
+        imageUrl: 'https://picsum.photos/200',
+      },
+      {
+        boardGameId: 7,
+        name: '노터치 크라켄 (크툴루를 건드리지마)',
+        categories: ['전략 게임', '파티 게임'],
+        difficulty: '보통',
+        minParticipants: 3,
+        maxParticipants: 6,
+        fromPlayTime: 30,
+        toPlayTime: 30,
+        wishCount: 11,
+        imageUrl: 'https://picsum.photos/200',
+      },
+    ],
+  });
+};
+
+const boardGameWishListMocks = [
+  http.get(MOCK_GET_BOARD_GAME_WISH_LIST_URL, mockGetBoardGameWishListHandler),
+];
+
+export default boardGameWishListMocks;

src/mocks/gatheringList.ts

@@ -10,7 +10,7 @@ export const mockGetGatheringListHandler = async () => {
     roomsInfos: [
       {
         id: 25,
-        title: '정령섬 심화 격주로 하실 1~2분',
+        title: '정령섬 심화 격주로 하실 1~2분 모집합니다.',
         description:
           '두 명이서 하고 있습니다.\n 3~4인이 더 재밌어요.\n 확장 텍스트가 영문이라 읽을 수 있으시면 편해요.',
         station: '국제금융센터·부산은행',

src/pages/BoardGameList/components/BoardGameList/BoardGameListItem.tsx

@@ -56,7 +56,9 @@ const BoardGameListItem = ({
         />
         <div className='flex flex-col items-start gap-2'>
           <div className='flex flex-col items-start gap-1'>
-            <span className='font-bold text-gray-accent1'>{name}</span>
+            <span className='line-clamp-1 font-bold text-gray-accent1'>
+              {name}
+            </span>
             <div className='flex gap-1'>
               {categories.map(category => (
                 <Chip key={category}>{category}</Chip>

src/pages/BoardGameWishList/components/BoardGameWishList/index.tsx

@@ -0,0 +1,40 @@
+import { useParams } from 'react-router-dom';
+
+import { useGetBoardGameWishListApi } from '@/apis/boardGameWishList';
+import EmptyListFullScreen from '@/components/EmptyListFullScreen';
+import InfiniteScrollAutoFetcher from '@/components/InfiniteScrollAutoFetcher';
+import {
+  EMPTY_BOARD_GAME_WISH_MESSAGE,
+  EMPTY_BOARD_GAME_WISH_TITLE,
+} from '@/constants/messages/emptyScreens';
+import BoardGameListItem from '@/pages/BoardGameList/components/BoardGameList/BoardGameListItem';
+
+const BoardGameWishList = () => {
+  const { userId } = useParams() as { userId: string };
+  const { boardGamesInfos, fetchStatus, hasNextPage, fetchNextPage } =
+    useGetBoardGameWishListApi(userId);
+
+  if (boardGamesInfos.length === 0) {
+    return (
+      <EmptyListFullScreen
+        title={EMPTY_BOARD_GAME_WISH_TITLE}
+        message={EMPTY_BOARD_GAME_WISH_MESSAGE}
+      />
+    );
+  }
+
+  return (
+    <InfiniteScrollAutoFetcher
+      hasNextPage={hasNextPage}
+      fetchStatus={fetchStatus}
+      fetchNextPage={fetchNextPage}
+      className='grow overflow-y-auto overflow-x-hidden'
+    >
+      {boardGamesInfos.map(boardGame => (
+        <BoardGameListItem key={boardGame.boardGameId} boardGame={boardGame} />
+      ))}
+    </InfiniteScrollAutoFetcher>
+  );
+};
+
+export default BoardGameWishList;