Merge pull request #124 from YAPP-Github/feature/FE-088

Feature/fe-088 : 먹팟 필터링 관련 수정사항 반영

package.json

@@ -44,6 +44,7 @@
     "next": "13.4.10",
     "postcss": "^8.4.23",
     "prop-types": "^15.8.1",
+    "query-string": "^8.1.0",
     "react": "18.2.0",
     "react-day-picker": "^8.7.1",
     "react-dom": "18.2.0",

src/api/board/api.ts

@@ -1,6 +1,7 @@
 import { request } from '@/utils/ky/request';
 import { BOARDS_PER_PAGE } from '@/app/home/constants';
 import { BoardListPagingData, BoardListResponse, BoardDetail, BoardRegionResponse, BoardStatus } from './types';
+import { getQueryString } from '@/utils/queryString';
 import { SAMPLE_BOARD_IDS, SAMPLE_BOARDDETAILS } from '@/app/board/constants/sample';
 
 class BoardAPI {
@@ -37,11 +38,18 @@ class BoardAPI {
    * boardId에 해당하는 먹팟의 정보를 가져옵니다.
    * @param boardId - 가져올 board의 id
    */
-  async getBoardDetail(boardId: number) {
+  async getBoardDetail(boardId: number, cityId?: number, provinceId?: number) {
     if (SAMPLE_BOARD_IDS.includes(boardId)) {
       return SAMPLE_BOARDDETAILS.find((board) => board.boardId === boardId) as BoardDetail;
     }
-    return request.get(`v1/boards/${boardId}`).json<BoardDetail>();
+    return request
+      .get(
+        `v1/boards/${boardId}${getQueryString({
+          cityId,
+          provinceId,
+        })}`,
+      )
+      .json<BoardDetail>();
   }
 
   /**

src/api/board/hooks/useBoardDetail.ts

@@ -3,7 +3,9 @@ import { boardKeys } from '@/api/board/queryKeys';
 import { BoardDetail } from '@/api/types';
 import { boardAPI } from '@/api/board/api';
 
-const useBoardDetail = (boardId: number) =>
-  useSuspenseQuery<BoardDetail>(boardKeys.detail(boardId), () => boardAPI.getBoardDetail(boardId));
+const useBoardDetail = (boardId: number, cityId?: number, provinceId?: number) =>
+  useSuspenseQuery<BoardDetail>(boardKeys.detail(boardId, cityId, provinceId), () =>
+    boardAPI.getBoardDetail(boardId, cityId, provinceId),
+  );
 
 export default useBoardDetail;

src/api/board/queryKeys.ts

@@ -1,6 +1,7 @@
 export const boardKeys = {
   all: ['board'] as const,
   list: (cityId?: number, provinceId?: number) => [...boardKeys.all, 'list', cityId, provinceId] as const,
-  detail: (boardId: number) => [...boardKeys.all, 'detail', boardId] as const,
+  detail: (boardId: number, cityId?: number, provinceId?: number) =>
+    [...boardKeys.all, 'detail', boardId, cityId, provinceId] as const,
   regions: () => [...boardKeys.all, 'regions'] as const,
 };

src/app/board/[id]/page.tsx

@@ -3,22 +3,31 @@ import { Header } from '@/components/server';
 import { Suspense } from '@suspensive/react';
 import { Content, HydratedBoardDetail, BoardDetailLoading } from '@/app/board/components';
 
-const BoardDetailPage = ({
-  params: { id },
-}: {
+interface Props {
   params: {
     id: string;
   };
-}) => {
+  searchParams: {
+    cityId?: string;
+    provinceId?: string;
+  };
+}
+
+const BoardDetailPage = ({
+  params: { id },
+  searchParams: { cityId: cityIdParam, provinceId: provinceIdParam },
+}: Props) => {
   const boardId = Number(id);
+  const cityId = cityIdParam && !Number.isNaN(cityIdParam) ? Number(cityIdParam) : undefined;
+  const provinceId = provinceIdParam && !Number.isNaN(provinceIdParam) ? Number(provinceIdParam) : undefined;
   if (Number.isNaN(boardId)) notFound();
 
   return (
     <>
       <Header />
       <Content verticalCenter={false}>
         <Suspense fallback={<BoardDetailLoading />}>
-          <HydratedBoardDetail boardId={boardId} />
+          <HydratedBoardDetail boardId={boardId} cityId={cityId} provinceId={provinceId} />
         </Suspense>
       </Content>
     </>

src/app/board/components/ContentSection/ContentSection.tsx

@@ -1,6 +1,5 @@
-import Link from 'next/link';
 import { PropsWithChildren } from 'react';
-import { IconButton, Typography } from '@/components';
+import { Typography } from '@/components';
 import { getBoardStatusText } from '@/app/board/utils';
 import { BoardDetail } from '@/api/types';
 
@@ -12,10 +11,9 @@ import {
   contentWrapper,
   footer,
   footerText,
-  footerButtons,
-  disabledLink,
   childrenWrapper,
 } from './ContentSection.css';
+import FooterButtons from './FooterLinkButtons';
 
 interface Props extends PropsWithChildren {
   board: BoardDetail;
@@ -115,24 +113,7 @@ const ContentSection = ({ board, children }: Props) => {
             조회수 {views}
           </Typography>
         </div>
-        <div className={footerButtons}>
-          <Link
-            href={`/board/${prevId}`}
-            className={disabledLink({
-              disabled: !prevId,
-            })}
-          >
-            <IconButton iconType="chevronleft" hover disabled={!prevId} />
-          </Link>
-          <Link
-            href={`/board/${nextId}`}
-            className={disabledLink({
-              disabled: !nextId,
-            })}
-          >
-            <IconButton iconType="chevronright" hover disabled={!nextId} />
-          </Link>
-        </div>
+        <FooterButtons nextId={nextId} prevId={prevId} />
       </div>
     </section>
   );

src/app/board/components/ContentSection/FooterLinkButtons.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import Link from 'next/link';
+import { IconButton } from '@/components';
+import { useRegionsFilterStore } from '@/store';
+import { BoardDetail } from '@/api/types';
+import { getQueryString } from '@/utils/queryString';
+import { disabledLink, footerButtons } from './ContentSection.css';
+
+interface Props {
+  prevId: BoardDetail['prevId'];
+  nextId: BoardDetail['nextId'];
+}
+
+const FooterLinkButtons = ({ prevId, nextId }: Props) => {
+  const { cityId, provinceId } = useRegionsFilterStore(({ cityId, provinceId }) => ({
+    cityId,
+    provinceId,
+  }));
+
+  const isPrevDisabled = prevId === null;
+  const isNextDisabled = nextId === null;
+
+  return (
+    <div className={footerButtons}>
+      <Link
+        href={`/board/${prevId}${getQueryString({
+          cityId,
+          provinceId,
+        })}`}
+        className={disabledLink({
+          disabled: isPrevDisabled,
+        })}
+      >
+        <IconButton iconType="chevronleft" hover disabled={isPrevDisabled} />
+      </Link>
+      <Link
+        href={`/board/${nextId}${getQueryString({
+          cityId,
+          provinceId,
+        })}`}
+        className={disabledLink({
+          disabled: isNextDisabled,
+        })}
+      >
+        <IconButton iconType="chevronright" hover disabled={isNextDisabled} />
+      </Link>
+    </div>
+  );
+};
+
+export default FooterLinkButtons;

src/app/board/components/HydratedBoardDetail/HydratedBoardDetail.tsx

@@ -3,9 +3,17 @@ import { BoardDetail } from '@/app/board/components';
 import getQueryClient from '@/utils/getQueryClients';
 import { api, queryKeys } from '@/api';
 
-const HydratedBoardDetail = async ({ boardId }: { boardId: number }) => {
+interface Props {
+  boardId: number;
+  cityId?: number;
+  provinceId?: number;
+}
+
+const HydratedBoardDetail = async ({ boardId, cityId, provinceId }: Props) => {
   const queryClient = getQueryClient();
-  await queryClient.prefetchQuery(queryKeys.board.detail(boardId), () => api.board.getBoardDetail(boardId));
+  await queryClient.prefetchQuery(queryKeys.board.detail(boardId, cityId, provinceId), () =>
+    api.board.getBoardDetail(boardId, cityId, provinceId),
+  );
   const dehydratedState = dehydrate(queryClient);
 
   return (

src/app/board/hooks/useBoardDetail/useBoardDetail.tsx

@@ -1,9 +1,17 @@
-import { useParams } from 'next/navigation';
+import { useParams, useSearchParams } from 'next/navigation';
 import { useBoardDetail as useBoardDetailQuery } from '@/api/hooks';
 
 const useBoardDetail = () => {
   const { id: boardId } = useParams();
-  const { data: board } = useBoardDetailQuery(Number(boardId));
+  const searchParams = useSearchParams();
+
+  const cityIdParam = searchParams.get('cityId');
+  const provinceIdParam = searchParams.get('provinceId');
+
+  const cityId = cityIdParam && !Number.isNaN(cityIdParam) ? Number(cityIdParam) : undefined;
+  const provinceId = provinceIdParam && !Number.isNaN(provinceIdParam) ? Number(provinceIdParam) : undefined;
+
+  const { data: board } = useBoardDetailQuery(Number(boardId), cityId, provinceId);
 
   return board;
 };

src/app/home/components/BoardCard/BoardCard.tsx

@@ -1,8 +1,8 @@
-import Link from 'next/link';
 import { Chip, Profile, SvgIcon, Typography } from '@/components';
 import { BoardListItem } from '@/api/types';
 import { RECRUIT_STATUS } from '@/app/home/constants';
 import { getChipColor } from '@/app/home/utils/chipColor';
+import BoardCardLink from './BoardCardLink';
 
 import {
   wrapper,
@@ -40,7 +40,7 @@ const BoardCard = ({ boardListItem }: Props) => {
 
   return (
     <li>
-      <Link href={`/board/${boardId}`}>
+      <BoardCardLink boardId={boardId}>
         <div
           className={wrapper({
             isRecruiting,
@@ -93,7 +93,7 @@ const BoardCard = ({ boardListItem }: Props) => {
             </div>
           </div>
         </div>
-      </Link>
+      </BoardCardLink>
     </li>
   );
 };

src/app/home/components/BoardCard/BoardCardLink.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import Link from 'next/link';
+import { PropsWithChildren } from 'react';
+import { getQueryString } from '@/utils/queryString';
+import { useRegionsFilterStore } from '@/store';
+
+interface Props extends PropsWithChildren {
+  boardId: number;
+}
+
+const BoardCardLink = ({ boardId, children }: Props) => {
+  const { cityId, provinceId } = useRegionsFilterStore(({ cityId, provinceId }) => ({
+    cityId,
+    provinceId,
+  }));
+
+  return (
+    <Link
+      href={`/board/${boardId}${getQueryString({
+        cityId,
+        provinceId,
+      })}`}
+    >
+      {children}
+    </Link>
+  );
+};
+
+export default BoardCardLink;

src/app/home/components/BoardCardList/BoardCardList.tsx

@@ -5,7 +5,7 @@ import { useIntersectObserver } from '@/hooks';
 import { useBoardListQuery } from '@/api/hooks';
 import { BoardCard } from '@/app/home/components';
 import { BOARDS_PER_PAGE } from '@/app/home/constants';
-import { useRegionsFilterStore } from '@/app/home/store';
+import { useRegionsFilterStore } from '@/store';
 import { listGrid, noBoard } from './BoardCardList.css';
 
 const BoardCardList = () => {

src/app/home/components/RegionsFilter/RegionsFilter.tsx

@@ -4,7 +4,7 @@ import { useCallback } from 'react';
 import { Dropdown } from '@/components';
 import { useDetectSticky, useScrollDownState } from '@/app/home/hooks';
 import { useBoardRegions } from '@/api/hooks';
-import { useRegionsFilter } from '@/app/home/store';
+import { useRegionsFilter } from '@/store';
 import * as styles from './RegionsFilter.css';
 
 const RegionsFilter = () => {