유저 유형 타입 별 축제 추천 컴포넌트 구현

.github/workflows/chromatic.yml

@@ -40,8 +40,8 @@ jobs:
           cache-dependency-path: "**/pnpm-lock.yaml"
 
 
-      - name: Set up Environment Variable for build    
-        uses: ./.github/workflows/_set_env.yaml
+      - name: Set up Environment Variable for build
+        uses: ./.github/workflows/_set_env.yml
         with:
           NODE_VERSION: 20.x
           NEXT_PUBLIC_STAGE: development

auth.ts

@@ -1,18 +1,13 @@
 // ? Reference https://github.dev/nextauthjs/next-auth-example/blob/main/app/api/protected/route.ts
 // ? Reference https://www.heropy.dev/p/MI1Khc
 
-import { decodeJwt } from "jose";
 import NextAuth, { Account, NextAuthConfig, Session, User } from "next-auth";
 import { AdapterUser } from "next-auth/adapters";
 import { JWT } from "next-auth/jwt";
 import { ProviderType } from "next-auth/providers";
 import Kakao from "next-auth/providers/kakao";
 
-import {
-  getRefreshToken,
-  getServerSideSession,
-  postOauthLogin,
-} from "@/apis/auth/auth";
+import { getServerSideSession, postOauthLogin } from "@/apis/auth/auth";
 import { SocialLoginRequest } from "@/apis/auth/authType";
 import { isMatchPath } from "@/utils";
 
@@ -69,40 +64,40 @@ const config = {
       user?: User | AdapterUser;
       account?: Account | null;
     }) => {
-      if (token.accessToken) {
-        const decodedToken = decodeJwt(token.accessToken);
-
-        if (decodedToken.exp && decodedToken.exp * 1000 < Date.now()) {
-          const { accessToken, refreshToken } = await getRefreshToken(
-            token.refreshToken as string,
-          );
-          token.accessToken = accessToken;
-          token.refreshToken = refreshToken;
-          return token;
-        }
-
-        return token;
-      }
-
-      if (!user?.id || !user.email || !account?.access_token) {
-        throw Error("Login Failed");
-      }
-      const body: SocialLoginRequest = {
-        id: user?.id,
-        email: user?.email,
-        accessToken: account?.access_token,
-      };
+      // ! refresh Token 로직 수정 필요
+      // if (token.accessToken) {
+      //   const decodedToken = decodeJwt(token.accessToken);
+
+      //   if (decodedToken.exp && decodedToken.exp * 1000 < Date.now()) {
+      //     const { accessToken, refreshToken } = await getRefreshToken(
+      //       token.refreshToken as string,
+      //     );
+      //     token.accessToken = accessToken;
+      //     token.refreshToken = refreshToken;
+      //     return token;
+      //   }
+
+      //   return token;
+      // }
 
       let response: JWT = token;
 
-      if (!Object.hasOwn(token, "isProfileRegistered")) {
-        response = await postOauthLogin(body);
+      if (!!user && !!account) {
+        const body: SocialLoginRequest = {
+          id: user.id as string,
+          email: user.email as string,
+          accessToken: account.access_token as string,
+        };
+
+        if (!Object.hasOwn(token, "isProfileRegistered")) {
+          response = await postOauthLogin(body);
+        }
       }
 
       token.accessToken = response?.accessToken;
       token.refreshToken = response.refreshToken;
       token.isProfileRegistered = response.isProfileRegistered;
-      token.email = user.email;
+      token.email = user?.email;
 
       return token;
     },

package.json

@@ -38,6 +38,7 @@
     "react-daum-postcode": "^3.1.3",
     "react-dom": "^18",
     "react-hook-form": "7.52.2",
+    "swiper": "^11.1.11",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-radix": "^3.0.3",
     "usehooks-ts": "^3.1.0",

src/apis/festivals/recommendFestival/recommendFestival.ts

@@ -0,0 +1,30 @@
+"use server";
+
+import instance from "@/apis/instance";
+import FIESTA_ENDPOINTS from "@/config/apiEndpoints";
+import { generateUrlWithParams } from "@/utils/generateUrlWithParams";
+
+import {
+  PaginationParamter,
+  RecommendFestivalResponse,
+} from "./recommendFestivalType";
+
+const defaultParams: PaginationParamter = { page: 0, size: 5 };
+const ENDPOINT = FIESTA_ENDPOINTS.festivals;
+
+export async function getRecommendFestival(
+  params: PaginationParamter = defaultParams,
+) {
+  try {
+    const endpoint = ENDPOINT.recommend;
+    const { data } = await instance.get<RecommendFestivalResponse>(
+      generateUrlWithParams(endpoint, params),
+      {
+        cache: "no-store",
+      },
+    );
+    return data;
+  } catch (error) {
+    return null;
+  }
+}

src/apis/festivals/recommendFestival/recommendFestivalType.ts

@@ -0,0 +1,24 @@
+export type PaginationParamter = {
+  page: number;
+  size: number;
+};
+
+export type UserType = {
+  userTypeId: number;
+  name: string;
+};
+
+export type RecommendFestivalResponse = {
+  festivals: Array<RecommendFestivalModel>;
+  userType: UserType;
+};
+
+export interface RecommendFestivalModel {
+  festivalId: number;
+  name: string;
+  sido: string;
+  sigungu: string;
+  thumbnailImage: string;
+  startDate: string;
+  endDate: string;
+}

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

@@ -7,10 +7,7 @@ import { CREATE_FESTIVAL_SETTING } from "@/config";
 import { CreateFestivalType } from "@/validations/CreateFestivalSchema";
 
 const CreateFestivalFirstStep = () => {
-  const {
-    control,
-    formState: { dirtyFields },
-  } = useFormContext<CreateFestivalType>();
+  const { control } = useFormContext<CreateFestivalType>();
 
   return (
     <section className=" flex w-full flex-col gap-[32px]">

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

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { Controller, useFormContext } from "react-hook-form";
 
 import {
   FestivalCategory,
@@ -9,13 +9,14 @@ import {
   AddressInput,
   CategoryKeywordInput,
   DescriptionInput,
-  DurationInput,
   MoodKeywordInput,
   TextInput,
   TimeInput,
 } from "@/components/core/Input";
 import { CreateFestivalType } from "@/validations/CreateFestivalSchema";
 
+import DurationFestivalInput from "./DurationFestivalInput";
+
 interface Props {
   moods: Array<FestivalMood>;
   categories: Array<FestivalCategory>;
@@ -29,31 +30,18 @@ const CreateFestivalSecondStep: FC<Props> = ({ moods, categories }) => {
     formState: { errors, submitCount },
   } = useFormContext<CreateFestivalType>();
 
-  const startDate = useWatch({ control, name: "startDate" });
-  const endDate = useWatch({ control, name: "endDate" });
-  const time = useWatch({ control, name: "playtime" });
-
-  const handleCalendarConfirm = (start: string | null, end: string | null) => {
-    setValue("startDate", start ?? "", { shouldValidate: true });
-    setValue("endDate", end ?? "", { shouldValidate: true });
-  };
-
   const handleAddress = (
     address: string,
     sido: string,
     sigungu: string,
     latitude: string,
     longitude: string,
   ) => {
-    setValue("address", address ?? "", { shouldValidate: true });
-    setValue("sido", sido ?? "", { shouldValidate: true });
-    setValue("sigungu", sigungu ?? "", { shouldValidate: true });
-    setValue("latitude", latitude ?? "", { shouldValidate: true });
-    setValue("longitude", longitude ?? "", { shouldValidate: true });
-  };
-
-  const handleTimeChange = (time: string) => {
-    setValue("playtime", time, { shouldValidate: true });
+    setValue("address", address ?? "");
+    setValue("sido", sido ?? "");
+    setValue("sigungu", sigungu ?? "");
+    setValue("latitude", latitude ?? "");
+    setValue("longitude", longitude ?? "");
   };
 
   const handleGetError = (name: keyof CreateFestivalType) => {
@@ -72,24 +60,24 @@ const CreateFestivalSecondStep: FC<Props> = ({ moods, categories }) => {
 
   return (
     <section className="flex w-full flex-col gap-[18px]">
-      <DurationInput
-        label="페스티벌 기간"
-        start={startDate}
-        end={endDate}
-        error={handleGetError("startDate") || handleGetError("endDate")}
-        onConfirm={handleCalendarConfirm}
-      />
+      <DurationFestivalInput handleGetError={handleGetError} />
 
       <AddressInput
         value={null}
         onChange={handleAddress}
         error={handleGetError("address")}
       />
 
-      <TimeInput
-        value={time}
-        onChange={handleTimeChange}
-        error={handleGetError("playtime")}
+      <Controller
+        control={control}
+        name="playtime"
+        render={({ field: { onChange, value } }) => (
+          <TimeInput
+            value={value}
+            onChange={onChange}
+            error={handleGetError("playtime")}
+          />
+        )}
       />
 
       <label className="text-subtitle-medium text-gray-scale-900">URL</label>

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

@@ -0,0 +1,32 @@
+import { FC } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+
+import { DurationInput } from "@/components/core/Input";
+import { CreateFestivalType } from "@/validations/CreateFestivalSchema";
+
+interface Props {
+  handleGetError: (name: keyof CreateFestivalType) => string | undefined;
+}
+
+const DurationFestivalInput: FC<Props> = ({ handleGetError }) => {
+  const { control, setValue } = useFormContext<CreateFestivalType>();
+
+  const startDate = useWatch({ control, name: "startDate" });
+  const endDate = useWatch({ control, name: "endDate" });
+
+  const handleCalendarConfirm = (start: string | null, end: string | null) => {
+    setValue("startDate", start ?? "");
+    setValue("endDate", end ?? "");
+  };
+  return (
+    <DurationInput
+      label="페스티벌 기간"
+      start={startDate}
+      end={endDate}
+      error={handleGetError("startDate") || handleGetError("endDate")}
+      onConfirm={handleCalendarConfirm}
+    />
+  );
+};
+
+export default DurationFestivalInput;

src/app/(home)/page.tsx

@@ -1,15 +1,18 @@
 import { getServerSideSession } from "@/apis/auth/auth";
 import { FloatingButton } from "@/components/core/Button";
+import RecommendFestival from "@/components/Swiper/RecommendFestival";
 import { HomeHeader } from "@/layout/Mobile/MobileHeader";
 import NavigationBar from "@/layout/Mobile/NavigationBar";
 
 import { FestivalHot, FestivalThisWeek, TopReviews } from "./_components";
+
 export default async function Home() {
   const session = await getServerSideSession();
   return (
     <div className="mb-[60px] mt-[44px]">
       <HomeHeader />
-      <main className="flex flex-col gap-[40px] bg-gray-scale-100 px-[16px] pb-[36px] pt-[16px]">
+      <RecommendFestival />
+      <main className="flex flex-col gap-[40px] rounded-t-[20px] bg-gray-scale-100 px-[16px] pb-[36px] pt-[16px]">
         <FestivalHot />
         <FestivalThisWeek />
         <TopReviews />

src/app/mypage/view.tsx

@@ -1,7 +1,12 @@
+import { postSignOut } from "@/apis/auth/auth";
+
 const MyPageView = () => {
   return (
-    <main className="flex flex-wrap gap-4 bg-indigo-300 text-title-bold">
-      <div className="h-[100px] w-full bg-primary-05"></div>
+    <form
+      action={postSignOut}
+      className="flex flex-wrap gap-4 bg-indigo-300 text-title-bold"
+    >
+      <button>Logout</button>
       <div className="h-[100px] w-full bg-primary-05"></div>
       <div className="h-[100px] w-full bg-primary-05"></div>
       <div className="h-[100px] w-full bg-primary-05"></div>
@@ -10,7 +15,7 @@ const MyPageView = () => {
       <div className="h-[100px] w-full bg-primary-05"></div>
       <div className="h-[100px] w-full bg-primary-05"></div>
       <div className="h-[100px] w-full bg-primary-05"></div>
-    </main>
+    </form>
   );
 };
 

src/app/onboarding/page.tsx

@@ -8,7 +8,7 @@ import OnBoardingView from "./view";
 export default async function OnBoarding() {
   const session = await getServerSideSession();
 
-  if (session?.isProfileRegistered) {
+  if (!session || session?.isProfileRegistered) {
     redirect("/");
   }