✨ feat: 추천 페스티벌 관련 로직에 세션 넘김 #45

dnd-side-project · Oct 6, 2024 · ef11379 · ef11379
1 parent 354e4b2
commit ef11379
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 124 deletions.
diff --git a/src/apis/festivals/recommendFestival/recommendFestival.ts b/src/apis/festivals/recommendFestival/recommendFestival.ts
@@ -1,5 +1,3 @@
-"use server";
-
 import { ClientError } from "@/apis/error";
 import instance from "@/apis/instance";
 import FIESTA_ENDPOINTS from "@/config/apiEndpoints";

diff --git a/src/apis/festivals/recommendFestival/recommendFestivalKeys.ts b/src/apis/festivals/recommendFestival/recommendFestivalKeys.ts
@@ -3,6 +3,7 @@ const defaultParams: PaginationParamter = { page: 0, size: 6 };
 
 export const recommendFestivalKeys = {
   all: ["RecommendFestival"],
+  user: (userId: number | string) => [...recommendFestivalKeys.all, userId],
   list: (params: PaginationParamter = defaultParams) => [
     recommendFestivalKeys.all,
     params,

diff --git a/src/app/(home)/_components/FestivalRecommend/RecommendFestivalHeader.tsx b/src/app/(home)/_components/FestivalRecommend/RecommendFestivalHeader.tsx
@@ -1,26 +1,27 @@
 import Image from "next/image";
+import { User } from "next-auth";
 import { FC } from "react";
 
 import { UserTypeImage, UserTypeText } from "@/utils";
 
 interface Props {
-  user: UserMeResponse;
+  user: User & UserMeResponse;
 }
 
 const RecommendFestivalHeader: FC<Props> = ({ user }) => {
   return (
     <div className="relative flex w-full justify-between">
       <div className="flex w-1/2 flex-wrap pb-[18px] text-title-bold">
-        <span className={UserTypeText[user.userType ?? 1]}>
-          {user.nickname}
+        <span className={UserTypeText[user.userTypeId ?? 1]}>
+          {user.nickname ?? "피에스타"}
         </span>
         <span>들을</span>
         <span>위한 페스티벌이에요!</span>
       </div>
       <Image
         className="absolute bottom-[-15px] right-[20px]"
-        src={UserTypeImage[user.userType ?? 1] ?? "/images/fallbackLogo.png"}
-        alt={user.nickname}
+        src={UserTypeImage[user.userTypeId ?? 1] ?? "/images/fallbackLogo.png"}
+        alt={user.nickname ?? "피에스타"}
         width={109}
         height={109}
       />

diff --git a/src/app/(home)/_components/FestivalRecommend/index.tsx b/src/app/(home)/_components/FestivalRecommend/index.tsx
@@ -1,9 +1,41 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
+import { Session } from "next-auth";
+import { FC } from "react";
+
+import { getRecommendFestival } from "@/apis/festivals/recommendFestival/recommendFestival";
+import { recommendFestivalKeys } from "@/apis/festivals/recommendFestival/recommendFestivalKeys";
 import RecommendFestivalList from "@/components/Swiper/RecommendFestival/RecommendFestival";
 
-const RecommendFestival = () => {
-  return <RecommendFestivalList />;
+import RecommendFestivalFallbackUI from "./RecommendFestivalFallbackUI";
+import RecommendFestivalSkeleton from "./RecommendFestivalSkeleton";
+
+interface Props {
+  session: Session | null;
+}
+
+const RecommendFestival: FC<Props> = ({ session }) => {
+  const { data: recommendFestivals, isLoading } = useQuery({
+    queryKey: recommendFestivalKeys.user(session?.user.userId ?? 0),
+    queryFn: () => getRecommendFestival(),
+    retry: false,
+  });
+
+  if (isLoading) {
+    return <RecommendFestivalSkeleton />;
+  }
+
+  if (!session) {
+    return <RecommendFestivalFallbackUI />;
+  }
+
+  return (
+    <RecommendFestivalList
+      recommendFestivals={recommendFestivals}
+      user={session.user}
+    />
+  );
 };
 
 export default RecommendFestival;
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
@@ -1,3 +1,4 @@
+import { getServerSideSession } from "@/apis/auth/auth";
 import { FloatingButton } from "@/components/core/Button";
 import { HomeHeader } from "@/layout/Mobile/MobileHeader";
 import NavigationBar from "@/layout/Mobile/NavigationBar";
@@ -10,10 +11,11 @@ import {
 } from "./_components";
 
 export default async function Home() {
+  const session = await getServerSideSession();
   return (
     <div className="mb-[60px] mt-[44px]">
       <HomeHeader />
-      <FestivalRecommend />
+      <FestivalRecommend session={session} />
       <main className="flex flex-col gap-[40px] rounded-t-[20px] bg-gray-scale-100 px-[16px] pb-[36px] pt-[16px]">
         <FestivalHot />
         <FestivalThisWeek />

diff --git a/src/app/onboarding/complete/page.tsx b/src/app/onboarding/complete/page.tsx
@@ -1,37 +1,11 @@
-"use client";
-
-import Link from "next/link";
 import { Suspense } from "react";
 
-import { BasicButton } from "@/components/core/Button";
-import useUpdateUserSession from "@/hooks/session/useUpdateUserSession";
-
-import OnboardingCompleteConfetti from "./_components/OnboardingCompleteConfetti";
-import OnboardingImageDownloadButton from "./_components/OnboardingImageDownloadButton";
+import OnBoardingCompleteView from "./view";
 
 const OnBoardingComplete = () => {
-  useUpdateUserSession();
-
   return (
     <Suspense>
-      <section className="relative flex h-full w-full flex-col items-center justify-between gap-[30px] px-[16px] pb-[38px]">
-        <div />
-
-        <div className="flex h-full w-full flex-col items-center justify-center gap-[30px]">
-          <div className="flex w-full justify-center">
-            <h1 className="text-center text-title-bold text-gray-scale-900">
-              페스티벌 유형 프로필이 완성됐어요!
-            </h1>
-          </div>
-
-          <OnboardingImageDownloadButton />
-        </div>
-
-        <Link href="/" prefetch className="w-full">
-          <BasicButton type="button" label="맞춤 페스티벌 보러가기" />
-        </Link>
-        <OnboardingCompleteConfetti />
-      </section>
+      <OnBoardingCompleteView />
     </Suspense>
   );
 };

diff --git a/src/app/onboarding/complete/view.tsx b/src/app/onboarding/complete/view.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import Link from "next/link";
+
+import { BasicButton } from "@/components/core/Button";
+import useUpdateUserSession from "@/hooks/session/useUpdateUserSession";
+
+import OnboardingCompleteConfetti from "./_components/OnboardingCompleteConfetti";
+import OnboardingImageDownloadButton from "./_components/OnboardingImageDownloadButton";
+
+function OnBoardingCompleteView() {
+  useUpdateUserSession();
+  return (
+    <section className="relative flex h-full w-full flex-col items-center justify-between gap-[30px] px-[16px] pb-[38px]">
+      <div />
+
+      <div className="flex h-full w-full flex-col items-center justify-center gap-[30px]">
+        <div className="flex w-full justify-center">
+          <h1 className="text-center text-title-bold text-gray-scale-900">
+            페스티벌 유형 프로필이 완성됐어요!
+          </h1>
+        </div>
+
+        <OnboardingImageDownloadButton />
+      </div>
+
+      <Link href="/" prefetch className="w-full">
+        <BasicButton type="button" label="맞춤 페스티벌 보러가기" />
+      </Link>
+      <OnboardingCompleteConfetti />
+    </section>
+  );
+}
+
+export default OnBoardingCompleteView;
diff --git a/src/components/Swiper/RecommendFestival/RecommendFestival.stories.tsx b/src/components/Swiper/RecommendFestival/RecommendFestival.stories.tsx
@@ -16,70 +16,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {
-    initialData: {
-      festivals: [
-        {
-          festivalId: 64,
-          name: "dfdfd",
-          sido: "충청남도",
-          sigungu: "천안시 동남구",
-          thumbnailImage:
-            "https://fiesta-image.s3.ap-northeast-2.amazonaws.com/festival/6869294f-f5ef-4891-a3ca-60fac98e2873my-festival-type%20%282%29.png",
-          startDate: "2024-08-29",
-          endDate: "2024-08-31",
-        },
-        {
-          festivalId: 43,
-          name: "광주 버스킹 월드컵",
-          sido: "광주",
-          sigungu: "동구",
-          thumbnailImage:
-            "https://fiesta-image.s3.ap-northeast-2.amazonaws.com/festival/fd48e6eb-5ff6-457d-affd-d3cc659042503112130_image2_1.jpeg",
-          startDate: "2024-10-02",
-          endDate: "2024-10-06",
-        },
-        {
-          festivalId: 44,
-          name: "광주 추억의 충장축제",
-          sido: "광주",
-          sigungu: "동구",
-          thumbnailImage:
-            "https://fiesta-image.s3.ap-northeast-2.amazonaws.com/festival/00d385e7-5048-4265-abaf-8fd001ecff7711111111.jpg",
-          startDate: "2024-10-02",
-          endDate: "2024-10-06",
-        },
-        {
-          festivalId: 45,
-          name: "광주프린지페스티벌",
-          sido: "광주",
-          sigungu: "북구",
-          thumbnailImage:
-            "https://fiesta-image.s3.ap-northeast-2.amazonaws.com/festival/f54a1b88-0873-4696-b3a0-ca6e15b949ae3343042_image2_1.jpg",
-          startDate: "2024-09-21",
-          endDate: "2024-09-29",
-        },
-        {
-          festivalId: 54,
-          name: "국가유산 미디어아트 고흥분청사기요지",
-          sido: "전라남도",
-          sigungu: "고흥군",
-          thumbnailImage:
-            "https://fiesta-image.s3.ap-northeast-2.amazonaws.com/festival/d52dee4c-edbc-46c0-8236-b801411cad0d3340080_image2_1.jpg",
-          startDate: "2024-09-13",
-          endDate: "2024-10-06",
-        },
-      ],
-      userType: {
-        userTypeId: 2,
-        name: "파티피플러",
-      },
-    },
-  },
+  args: {},
   render: (args) => (
-    <div className="h-[300px] w-[400px]">
-      <RecoomendFestivalList />
-    </div>
+    <div className="h-[300px] w-[400px]">{/* <RecoomendFestivalList /> */}</div>
   ),
 };
 export const NoSession: Story = {

diff --git a/src/components/Swiper/RecommendFestival/RecommendFestival.tsx b/src/components/Swiper/RecommendFestival/RecommendFestival.tsx
@@ -3,37 +3,23 @@
 import "swiper/css";
 import "swiper/css/pagination";
 
-import { useQuery } from "@tanstack/react-query";
 import Image from "next/image";
 import Link from "next/link";
+import { User } from "next-auth";
+import { FC } from "react";
 import { Autoplay, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 
-import { getRecommendFestival } from "@/apis/festivals/recommendFestival/recommendFestival";
-import { recommendFestivalKeys } from "@/apis/festivals/recommendFestival/recommendFestivalKeys";
-import RecommendFestivalFallbackUI from "@/app/(home)/_components/FestivalRecommend/RecommendFestivalFallbackUI";
-import RecommendFestivalSkeleton from "@/app/(home)/_components/FestivalRecommend/RecommendFestivalSkeleton";
+import { RecommendFestivalResponse } from "@/apis/festivals/recommendFestival/recommendFestivalType";
+import RecommendFestivalHeader from "@/app/(home)/_components/FestivalRecommend/RecommendFestivalHeader";
 import { formatToKoreanDate } from "@/lib/dayjs";
-import { useUserStore } from "@/store/user";
 
-import RecommendFestivalHeader from "../../../app/(home)/_components/FestivalRecommend/RecommendFestivalHeader";
-
-const RecommendFestivalList = () => {
-  const user = useUserStore((state) => state.user);
-
-  const { data: recommendFestivals, isLoading } = useQuery({
-    queryKey: recommendFestivalKeys.all,
-    queryFn: () => getRecommendFestival(),
-  });
-
-  if (isLoading) {
-    return <RecommendFestivalSkeleton />;
-  }
-
-  if (!user) {
-    return <RecommendFestivalFallbackUI />;
-  }
+interface Props {
+  recommendFestivals?: RecommendFestivalResponse;
+  user: User & UserMeResponse;
+}
 
+const RecommendFestivalList: FC<Props> = ({ recommendFestivals, user }) => {
   return (
     <section className="relative h-full w-full px-[24px] py-[35px]">
       <RecommendFestivalHeader user={user} />

diff --git a/src/hooks/session/useUpdateUserSession.tsx b/src/hooks/session/useUpdateUserSession.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useSearchParams } from "next/navigation";
 import { useEffect } from "react";