온보딩 데이터 페칭 및 Flow UI 완성

next.config.mjs

@@ -58,6 +58,12 @@ const nextConfig = {
 
     return config;
   },
+  // ? https://nextjs.org/docs/app/api-reference/next-config-js/logging
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },
 };
 
 export default nextConfig;

package.json

@@ -26,6 +26,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.12",
+    "framer-motion": "^11.3.24",
     "next": "14.2.4",
     "nuqs": "^1.17.8",
     "react": "^18",

src/apis/onboarding/onboarding.ts

@@ -0,0 +1,77 @@
+"use server";
+import { FIESTA_ENDPOINTS } from "@/config";
+import { getSettledValue } from "@/utils";
+
+import instance from "../instance";
+import { festivalOnBoarding } from "./onboardingKeys";
+import {
+  FestivalCategory,
+  FestivalCompanion,
+  FestivalMood,
+  FestivalPriority,
+  OnboardingModel,
+} from "./onboardingType";
+
+export const getMoods = async () => {
+  const endpoint = FIESTA_ENDPOINTS.festivals.moods;
+  const { data } = await instance.get<Array<FestivalMood>>(endpoint, {
+    next: {
+      tags: festivalOnBoarding.all,
+    },
+  });
+
+  return data;
+};
+export const getCategories = async () => {
+  const endpoint = FIESTA_ENDPOINTS.festivals.categories;
+  const { data } = await instance.get<Array<FestivalCategory>>(endpoint, {
+    next: {
+      tags: festivalOnBoarding.all,
+    },
+  });
+
+  return data;
+};
+export const getCompanions = async () => {
+  const endpoint = FIESTA_ENDPOINTS.festivals.companions;
+  const { data } = await instance.get<Array<FestivalCompanion>>(endpoint, {
+    next: {
+      tags: festivalOnBoarding.all,
+    },
+  });
+
+  return data;
+};
+
+export const getPriority = async () => {
+  const endpoint = FIESTA_ENDPOINTS.festivals.priorities;
+  const { data } = await instance.get<Array<FestivalPriority>>(endpoint, {
+    next: {
+      tags: festivalOnBoarding.all,
+    },
+  });
+
+  return data;
+};
+
+export const getOnboardingData = async (): Promise<OnboardingModel> => {
+  const [moodsPromise, categoriesPromise, companionsPromise, priorityPromise] =
+    await Promise.allSettled([
+      getMoods(),
+      getCategories(),
+      getCompanions(),
+      getPriority(),
+    ]);
+
+  const moods = getSettledValue(moodsPromise, []);
+  const categories = getSettledValue(categoriesPromise, []);
+  const companions = getSettledValue(companionsPromise, []);
+  const priorities = getSettledValue(priorityPromise, []);
+
+  return {
+    moods,
+    companions,
+    priorities,
+    categories,
+  };
+};

src/apis/onboarding/onboardingKeys.ts

@@ -0,0 +1,3 @@
+export const festivalOnBoarding = {
+  all: ["FestivalOnBoarding"],
+};

src/apis/onboarding/onboardingType.ts

@@ -0,0 +1,27 @@
+export type FestivalMood = {
+  moodId: number;
+  name: string;
+};
+
+export type FestivalCompanion = {
+  companionId: number;
+  companionType: string;
+};
+
+export type FestivalCategory = {
+  categoryId: number;
+  emoji: string;
+  name: string;
+};
+
+export type FestivalPriority = {
+  priorityId: number;
+  priority: string;
+};
+
+export type OnboardingModel = {
+  categories: Array<FestivalCategory>;
+  companions: Array<FestivalCompanion>;
+  priorities: Array<FestivalPriority>;
+  moods: Array<FestivalMood>;
+};

src/app/onboarding/_components/index.ts

@@ -1,6 +1,2 @@
-export { default as OnBoardingButton } from "./OnBoardingButton";
-export { default as OnBoardingCategories } from "./OnBoardingCategories";
-export { default as OnBoardingCompanies } from "./OnBoardingCompanies";
-export { default as OnBoardingMoods } from "./OnBoardingMoods";
-export { default as OnBoardingPriorities } from "./OnBoardingPriorities";
-export { default as OnBOardingTitle } from "./OnBoardingTitle";
+export { default as OnBoardingLoading } from "./onBoardingLoading";
+export { default as OnBoardingContainer } from "./onBoardingStep";

src/app/onboarding/_components/onBoardingLoading/index.tsx

@@ -0,0 +1,73 @@
+import { AnimatePresence, motion } from "framer-motion";
+import Image from "next/image";
+
+import { IconButton } from "@/components/core/Button";
+import { ProgressCircle } from "@/components/core/Progress";
+import { CheckIcon } from "@/components/icons";
+import { cn } from "@/utils/cn";
+
+const ONBOARDING_LOADING_MESSAGES = [
+  "페스티벌 관심사 파악 완료!",
+  "페스티벌 무드 파악 완료!",
+  "페스티벌 일행 파악 완료!",
+  "페스티벌 우선순위 파악 완료!",
+];
+
+const OnBoardingLoading = () => {
+  return (
+    <section className="flex h-full w-full flex-col items-center justify-center gap-[30px] px-[16px]">
+      <div className="flex w-full flex-col items-center">
+        <h1 className="max-w-[250px] break-words text-center text-title-bold">
+          페스티벌 유형 프로필을
+          <br />
+          설정하는 중이예요
+        </h1>
+        <h1 className=""></h1>
+        <h2 className="mt-[10px] text-caption2-medium">
+          잠시만 기다려주세요...
+        </h2>
+      </div>
+
+      <div className="relative">
+        <ProgressCircle className="z-[10]" />
+        <div className="absolute left-1/2 top-1/2 flex size-[128px] translate-x-[-50%] translate-y-[-50%] items-end justify-center rounded-full">
+          <Image
+            width={180}
+            height={150}
+            src={"/images/onboadingLoading.png"}
+            alt="onboading-loading"
+          />
+        </div>
+      </div>
+
+      <div className="flex h-auto w-full flex-col gap-[12px]">
+        <AnimatePresence>
+          {ONBOARDING_LOADING_MESSAGES.map((str, idx) => (
+            <motion.div
+              key={str}
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.5, delay: idx * 1 }}
+            >
+              <IconButton className="h-[54px] w-full rounded-[8px] bg-primary-05">
+                <div className="flex w-full items-center gap-[6px] p-[16px]">
+                  <CheckIcon
+                    width={24}
+                    height={24}
+                    className={cn("text-primary-01", "duration-300")}
+                  />
+                  <span className="text-caption2-medium text-gray-scale-600">
+                    {str}
+                  </span>
+                </div>
+              </IconButton>
+            </motion.div>
+          ))}
+        </AnimatePresence>
+      </div>
+    </section>
+  );
+};
+
+export default OnBoardingLoading;

src/app/onboarding/_components/OnBoardingButton.tsx → src/app/onboarding/_components/onBoardingStep/OnBoardingButton.tsx

@@ -1,8 +1,9 @@
 import { FC } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 
+import { OnboardingModel } from "@/apis/onboarding/onboardingType";
 import { BasicButton } from "@/components/core/Button";
-import { OnboardingModel } from "@/model/onboarding";
+import { ONBOARDING_SETTING } from "@/config";
 import { checkNumber } from "@/utils/checkNumber";
 
 interface Props {
@@ -23,19 +24,19 @@ const OnBoardingButton: FC<Props> = ({ currentStep, totalStep, onNext }) => {
       [key: number]: { label: string; isError: boolean };
     } = {
       1: {
-        label: `다음 (${checkNumber(fields.categories?.length)}/2)`,
+        label: `다음 (${checkNumber(fields.categories?.length)}/${ONBOARDING_SETTING.CATEGORY_MIN})`,
         isError: !!errors.categories,
       },
       2: {
-        label: `다음 (${checkNumber(fields.moods?.length)}/3)`,
+        label: `다음 (${checkNumber(fields.moods?.length)}/${ONBOARDING_SETTING.MOOD_MIN})`,
         isError: !!errors.moods,
       },
       3: {
         label: `다음`,
-        isError: !!errors.companies,
+        isError: !!errors.companions,
       },
       4: {
-        label: `다음 (${checkNumber(fields.priorities?.length)}/3)`,
+        label: `다음 (${checkNumber(fields.priorities?.length)}/${ONBOARDING_SETTING.PRIORITY_MIN})`,
         isError: !!errors.priorities,
       },
     };

src/app/onboarding/_components/OnBoardingCategories.tsx → src/app/onboarding/_components/onBoardingStep/OnBoardingCategories.tsx

@@ -1,14 +1,17 @@
 import { FC } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
 
+import {
+  FestivalCategory,
+  OnboardingModel,
+} from "@/apis/onboarding/onboardingType";
 import { SquareTabButton } from "@/components/core/Button";
-import { CategoryModel, OnboardingModel } from "@/model/onboarding";
+import { ONBOARDING_SETTING } from "@/config";
 
-import { ONBOARDING } from "../_constants";
 import OnBoardingTitle from "./OnBoardingTitle";
 
 interface Props {
-  categories: Array<CategoryModel>;
+  categories: Array<FestivalCategory>;
 }
 
 const OnBoardingCategories: FC<Props> = ({ categories }) => {
@@ -20,10 +23,14 @@ const OnBoardingCategories: FC<Props> = ({ categories }) => {
 
   const handleCategoryToggle = (
     isSelected: boolean,
-    category: CategoryModel,
+    category: FestivalCategory,
   ) => {
     if (isSelected) {
-      replace(fields.filter((v) => v.categoryId !== category.categoryId));
+      replace(
+        fields.filter(
+          (festival) => festival.categoryId !== category.categoryId,
+        ),
+      );
       return;
     }
     append(category);
@@ -33,22 +40,32 @@ const OnBoardingCategories: FC<Props> = ({ categories }) => {
     <>
       <div className="flex h-auto w-full flex-col gap-[32px] ">
         <OnBoardingTitle
-          title={ONBOARDING.CATEGORY_TITLE}
-          subtitle={ONBOARDING.CATEGORY_SUBTITLE}
+          title={ONBOARDING_SETTING.CATEGORY_TITLE}
+          subtitle={ONBOARDING_SETTING.CATEGORY_SUBTITLE}
         />
 
         <section className="grid h-auto w-full grid-cols-3 gap-x-[18px] gap-y-[20px]">
-          {categories.map(({ categoryId, category }) => {
-            const isSelected = fields.some((c) => c.categoryId === categoryId);
+          {categories.map(({ categoryId, name, emoji }) => {
+            const isSelected = fields.some(
+              (festival) => festival.categoryId === categoryId,
+            );
             return (
               <SquareTabButton
                 key={categoryId}
                 type="button"
-                label={category}
+                label={name}
                 active={isSelected}
-                disabled={fields.length === 2 && !isSelected}
+                emoji={emoji}
+                disabled={
+                  fields.length === ONBOARDING_SETTING.CATEGORY_MIN &&
+                  !isSelected
+                }
                 onClick={() =>
-                  handleCategoryToggle(isSelected, { categoryId, category })
+                  handleCategoryToggle(isSelected, {
+                    categoryId,
+                    name,
+                    emoji,
+                  })
                 }
               />
             );