마이페이지 북마크 API 연동

auth.ts

@@ -20,6 +20,7 @@ export const { handlers, auth, signIn, signOut, unstable_update } = NextAuth({
   pages: {
     signIn: "/auth/sign-in",
     signOut: "/auth/sign-in",
+    error: "/auth/sign-in",
   },
   callbacks: {
     async signIn() {
@@ -64,6 +65,8 @@ export const { handlers, auth, signIn, signOut, unstable_update } = NextAuth({
       if (params.trigger === "update") {
         params.token = {
           ...params.token,
+          userTypeId: params.session.user.userTypeId,
+          isProfileRegistered: params.session.user.isProfileRegistered,
         };
       }
 

src/apis/instance.ts

@@ -1,5 +1,6 @@
 import { Session } from "next-auth";
-import { getSession } from "next-auth/react";
+
+import { getClientSideSession } from "@/lib/session";
 
 import { env } from "../env";
 import { getServerSideSession } from "./auth/auth";
@@ -22,11 +23,6 @@ export interface FiestaResponse<T> {
   data: T;
 }
 
-export async function getClientSideSession() {
-  const session = await getSession();
-  return session;
-}
-
 export type FiestaFetchOptions = Omit<RequestInit, "body">;
 
 export class CreateFiestaFetch {

src/apis/review/reviews/reviewsType.ts

@@ -1,6 +1,6 @@
 export type FestivalReviewsParameters = {
   festivalId?: number | string;
-  sort?: "createdAt" | "likeCount";
+  sort?: SortOption;
   page?: number;
   size?: number;
 };
@@ -47,6 +47,7 @@ export interface Keyword {
 export enum SortOption {
   createdAt = "createdAt",
   likeCount = "likeCount",
+  desc = "desc",
 }
 
 export type PostReviewResponse = {

src/apis/user/bookmarks/bookmarks.ts

@@ -0,0 +1,24 @@
+import instance from "@/apis/instance";
+import { FIESTA_ENDPOINTS } from "@/config";
+import { generateUrlWithParams } from "@/utils";
+
+import { BookmarkFestivalParameter, BookmarksResponse } from "./bookmarksType";
+
+const defaultParameter: BookmarkFestivalParameter = {
+  page: 0,
+  size: 6,
+};
+
+export const getBookmarkedFestival = async (
+  params: BookmarkFestivalParameter = defaultParameter,
+) => {
+  const endpoint = FIESTA_ENDPOINTS.users.bookmarks;
+  const { data } = await instance.get<BookmarksResponse>(
+    generateUrlWithParams(endpoint, params),
+    {
+      cache: "no-store",
+    },
+  );
+
+  return data;
+};

src/apis/user/bookmarks/bookmarksKeys.ts

@@ -0,0 +1,7 @@
+import { BookmarkFestivalParameter } from "./bookmarksType";
+
+export const bookmarksKeys = {
+  all: ["bookmarks"] as const,
+  list: (params: BookmarkFestivalParameter) =>
+    [...bookmarksKeys.all, params] as const,
+};

src/apis/user/bookmarks/bookmarksType.ts

@@ -0,0 +1,27 @@
+import { SortOption } from "@/apis/review/reviews/reviewsType";
+
+export type BookmarksResponse = {
+  content: Array<BookmarkedFestival>;
+  offset: number;
+  pageNumber: number;
+  pageSize: number;
+  totalElements: number;
+  totalPages: number;
+};
+
+export type BookmarkFestivalParameter = {
+  page?: number;
+  size?: number;
+  sort?: SortOption;
+};
+
+export type BookmarkedFestival = {
+  festivalId: number;
+  name: string;
+  thumbnailImage: string;
+  sido: string;
+  sigungu: string;
+  startDate: string;
+  endDate: string;
+  isBookmarked: boolean;
+};

src/app/(home)/festivals/[festivalId]/_components/DetailFestivalTab/Review/_components/TotalReviews/TotalReviewListItem.tsx

@@ -128,7 +128,7 @@ const TotalReviewListItem: FC<Props> = ({ review }) => {
       </p>
       <div className="flex w-full justify-between">
         <div className="flex gap-[8px] overflow-auto scrollbar-hide">
-          {review.keywords.splice(0, 2).map((keyword) => (
+          {review.keywords.map((keyword) => (
             <BasicChip key={keyword.keywordId} label={keyword.keyword} />
           ))}
         </div>

src/app/(home)/festivals/new/_components/CreateFestivalSecondStep.tsx

@@ -120,8 +120,9 @@ const CreateFestivalSecondStep: FC<Props> = ({ moods, categories }) => {
         name="categoryIds"
         render={({ field: { onChange, value } }) => (
           <CategoryKeywordInput
-            moods={categories}
-            selectedMoods={value}
+            categories={categories}
+            label="주제"
+            selectedCategories={value}
             onChange={onChange}
           />
         )}

src/app/layout.tsx

@@ -5,6 +5,7 @@ import type { Metadata } from "next";
 import Script from "next/script";
 import { ReactNode } from "react";
 
+import { auth } from "@/auth";
 import { env } from "@/env";
 import MobileLayout from "@/layout/Mobile/MobileLayout";
 import {
@@ -21,15 +22,17 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: ReactNode;
 }>) {
+  const session = await auth();
+
   return (
     <html lang="ko" className={Pretendard.variable}>
       <body className={cn(Pretendard.className)} suppressHydrationWarning>
-        <SessionProvider>
+        <SessionProvider session={session}>
           <MSWProvider>
             <ReactQueryProvider>
               <MobileLayout>

src/app/mypage/_components/Bookmark/MyPageScrab.tsx

@@ -0,0 +1,106 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { FC, useRef, useState } from "react";
+
+import { patchBookmarkFestival } from "@/apis/festivals/bookmarkFestival/bookmarkFestival";
+import { SortOption } from "@/apis/review/reviews/reviewsType";
+import { getBookmarkedFestival } from "@/apis/user/bookmarks/bookmarks";
+import { bookmarksKeys } from "@/apis/user/bookmarks/bookmarksKeys";
+import {
+  BookmarkFestivalParameter,
+  BookmarksResponse,
+} from "@/apis/user/bookmarks/bookmarksType";
+import { TrendFestivalCard } from "@/components/core/Card";
+import ClientPagination from "@/components/Pagination/ClientPagination";
+import { useOptimisticMutation } from "@/hooks/useOptimisticMutation";
+
+import MypageBookmarkFallback from "./MypageBookmarkFallback";
+import MypageBookmarkSkeleton from "./MypageBookmarkSkeleton";
+
+interface Props {}
+
+const MypageBookmark: FC<Props> = ({}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const queryClient = useQueryClient();
+
+  const [params, setParams] = useState<BookmarkFestivalParameter>({
+    sort: SortOption.createdAt,
+    page: 0,
+    size: 6,
+  });
+
+  const { data, isLoading } = useQuery({
+    queryKey: bookmarksKeys.list(params),
+    queryFn: () => getBookmarkedFestival(params),
+  });
+
+  const { mutate: toggleBookmark } = useOptimisticMutation({
+    mutationFn: patchBookmarkFestival,
+    queryKey: bookmarksKeys.list(params),
+    onMutate: async (festivalId) => {
+      await queryClient.cancelQueries({
+        queryKey: bookmarksKeys.list(params),
+      });
+
+      const previousBookmarkData = queryClient.getQueryData(
+        bookmarksKeys.list(params),
+      );
+
+      queryClient.setQueryData(
+        bookmarksKeys.list(params),
+        (oldQueryData: BookmarksResponse) => ({
+          ...oldQueryData,
+          content: oldQueryData.content.filter(
+            (c: { festivalId: number }) => c.festivalId !== festivalId,
+          ),
+        }),
+      );
+      return previousBookmarkData;
+    },
+  });
+
+  const handlePage = (page: number) => {
+    setParams((prev) => ({ ...prev, page }));
+
+    if (containerRef.current) {
+      containerRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
+  if (isLoading) {
+    return <MypageBookmarkSkeleton />;
+  }
+
+  if (data?.content.length === 0 || !data) {
+    return <MypageBookmarkFallback />;
+  }
+
+  return (
+    <div className=" flex flex-col gap-[18px]" ref={containerRef}>
+      <span className="text-subtitle-bold text-gray-scale-700">
+        {data.totalElements}개의 페스티벌
+      </span>
+
+      <div className="grid w-full grid-cols-2 gap-y-[24px]">
+        {data.content?.map((festival, index) => (
+          <TrendFestivalCard
+            key={festival.festivalId + index}
+            href={`/festivals/${festival.festivalId}`}
+            festival={festival}
+            isBookmarkAvailable
+            isBookmarked={festival.isBookmarked}
+            onToggle={() => toggleBookmark(festival.festivalId)}
+          />
+        ))}
+      </div>
+
+      <ClientPagination
+        currentPage={data.pageNumber + 1}
+        totalPage={data.totalPages}
+        onChange={handlePage}
+        size={3}
+      />
+    </div>
+  );
+};
+
+export default MypageBookmark;

src/app/mypage/_components/MypageFallback.tsx → src/app/mypage/_components/Bookmark/MypageBookmarkFallback.tsx

@@ -1,8 +1,8 @@
 import Image from "next/image";
 
-const MypageFallback = () => {
+const MypageBookmarkFallback = () => {
   return (
-    <div className="flex h-screen w-full flex-col items-center justify-center gap-[8px] rounded-[12px] border-[1px] border-gray-scale-200 bg-gray-scale-0">
+    <div className="flex h-[400px] w-full flex-col items-center justify-center gap-[8px] rounded-[12px] border-[1px] border-gray-scale-200 bg-gray-scale-0">
       <Image
         src="/images/fallbackLogo.png"
         alt="service"
@@ -16,4 +16,4 @@ const MypageFallback = () => {
   );
 };
 
-export default MypageFallback;
+export default MypageBookmarkFallback;

src/app/mypage/_components/Bookmark/MypageBookmarkSkeleton.tsx

@@ -0,0 +1,19 @@
+const MypageBookmarkSkeleton = () => {
+  return (
+    <div role="status" className="flex animate-pulse flex-col gap-[18px]">
+      <div className="h-[18px] w-[200px] rounded-md bg-gray-scale-200" />
+      <div className="grid w-full grid-cols-2 gap-y-[24px]">
+        {Array.from({ length: 6 }).map((_, idx) => (
+          <div
+            key={idx}
+            className="rounded-mg h-[196px] w-[200px] bg-gray-scale-200"
+          />
+        ))}
+      </div>
+
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+};
+
+export default MypageBookmarkSkeleton;

src/app/mypage/_components/MypageTab.tsx

@@ -3,13 +3,15 @@
 import * as Tabs from "@radix-ui/react-tabs";
 import { FC } from "react";
 
+import MypageBookmark from "./Bookmark/MyPageScrab";
+
 interface Props {}
 
 const MypageTab: FC<Props> = ({}) => {
   const TabList = [
     {
       name: "스크랩",
-      contentComponent: <h1>스크랩</h1>,
+      contentComponent: <MypageBookmark />,
     },
     {
       name: "활동뱃지",
@@ -26,11 +28,7 @@ const MypageTab: FC<Props> = ({}) => {
 
   return (
     <Tabs.Root className="w-full" defaultValue={TabList[0].name}>
-      <Tabs.List
-        id={"tab"}
-        className="flex h-[47px] w-full"
-        aria-label="Manage your account"
-      >
+      <Tabs.List id={"tab"} className="mb-[30px] flex h-[47px] w-full">
         {TabList.map(({ name }, index) => (
           <Tabs.Trigger
             key={name}