releas 0.3.1 적용

package.json

@@ -40,6 +40,7 @@
     "swiper": "^11.2.5",
     "tailwind-merge": "^2.6.0",
     "tailwind-scrollbar-hide": "^1.3.1",
+    "uuid": "^11.1.0",
     "workbox-window": "^7.3.0",
     "yup": "^1.6.1",
     "zustand": "^4.5.6"

src/_common/BottomButton.tsx

@@ -34,9 +34,6 @@ export default function BottomButton({
       ) : (
         <button
           onClick={(e: MouseEvent) => {
-            e.stopPropagation();
-            e.preventDefault();
-
             onClick();
           }}
           className={`flex w-[91%] max-w-[560px] items-center justify-center rounded-[10px] py-[14px] text-base font-bold text-white ${

src/_common/TopHeader.tsx

@@ -10,22 +10,28 @@ interface ITopHeader {
   step: number;
   rest: number;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  goBack?: () => void;
 }
 
-export default function TopHeader({ title, step, rest, onClick }: ITopHeader) {
+export default function TopHeader({
+  title,
+  step,
+  rest,
+  onClick,
+  goBack,
+}: ITopHeader) {
   const router = useRouter();
   const totalSteps = step + rest; // 전체 단계 수
   const pathname = usePathname();
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    if (onClick) {
-      event.preventDefault();
-      onClick(event);
-    } else {
+    if (goBack) {
       if (step === 1) {
         router.replace("/");
+      } else if (step === 3 && onClick) {
+        onClick(event);
       } else {
-        router.back();
+        goBack();
       }
     }
   };

src/_components/SplashScreen.tsx

@@ -4,7 +4,7 @@ import Image from "next/image";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useCookies } from "react-cookie";
-import LoginForm from "./auth/LoginForm";
+import LoginForm from "./auth/login/LoginForm";
 
 export default function SplashScreen() {
   const pathname = usePathname();

src/_components/auth/LoginForm.tsx → src/_components/auth/login/LoginForm.tsx

@@ -2,12 +2,18 @@
 
 import Image from "next/image";
 import { useEffect, useState } from "react";
-import LoginButton from "@/_components/auth/LoginButton";
+import { v4 as uuidv4 } from "uuid";
+import LoginButton from "@/_components/auth/login/LoginButton";
 import TopHeader from "@/_common/TopHeader";
 
 export default function LoginForm() {
-  const kakaoSocialLoginLink = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_KAKAO_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_KAKAO_LOGIN_REDIRECT_URI}&response_type=code`;
-  const googleSocialLoginLink = `https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${process.env.NEXT_PUBLIC_GOOGLE_API_KEY}&scope=email&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_LOGIN_REDIRECT_URI}`;
+  // state 추가 deviceID
+  const deviceId = localStorage.getItem("device-id") || uuidv4();
+  if (!localStorage.getItem("device-id")) {
+    localStorage.setItem("device-id", deviceId);
+  }
+  const kakaoSocialLoginLink = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_KAKAO_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_KAKAO_LOGIN_REDIRECT_URI}&response_type=code&state=${deviceId}`;
+  const googleSocialLoginLink = `https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${process.env.NEXT_PUBLIC_GOOGLE_API_KEY}&scope=email&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_LOGIN_REDIRECT_URI}&state=${deviceId}`;
   const [kakaoRecentLogin, setKakaoRecentLogin] = useState<boolean>(false);
   const [googleRecentLogin, setGoogleRecentLogin] = useState<boolean>(false);
 

src/_components/auth/register/RegisterSetup.tsx

@@ -0,0 +1,37 @@
+import { FunnelProps, StepProps } from "@/_utils/hooks/useFunnel";
+import Agreement from "./agreement/Agreement";
+import NickName from "./nickname/Nickname";
+import UserInfo from "./userInfo/UserInfo";
+
+interface ProfileSetupInterface {
+  steps: string[];
+  onNext: (nextStep: string) => void;
+  Funnel: React.ComponentType<FunnelProps>;
+  Step: React.ComponentType<StepProps>;
+}
+
+export default function RegisterSetup({
+  steps,
+  onNext,
+  Funnel,
+  Step,
+}: ProfileSetupInterface) {
+  return (
+    <>
+      <Funnel>
+        {/* 약관동의 */}
+        <Step name={"약관동의"}>
+          <Agreement onNext={() => onNext(steps[1])} />
+        </Step>
+        {/* 닉네임 설정 */}
+        <Step name={"닉네임"}>
+          <NickName onNext={() => onNext(steps[2])} />
+        </Step>
+        {/* 가입정보 설정 */}
+        <Step name={"가입정보"}>
+          <UserInfo />
+        </Step>
+      </Funnel>
+    </>
+  );
+}

src/app/(view)/(auth)/register/agreement/page.tsx → src/_components/auth/register/agreement/Agreement.tsx

@@ -1,16 +1,14 @@
-import RegisterAgreementForm from "@/_components/auth/RegisterAgreementForm";
-import TopHeader from "@/_common/TopHeader";
+import AgreementForm from "./AgreementForm";
 
-export default function Page() {
+export default function Agreement({ onNext }: { onNext: () => void }) {
   return (
     <>
-      <TopHeader title="회원가입" step={1} rest={2} />
       <div className="mx-[4%] mb-[50vh] mt-[6vh]">
         <h2 className="text-xl font-bold">
           주라벨을 사용하려면 <br /> 아래에 대한 약관 동의가 필요해요
         </h2>
       </div>
-      <RegisterAgreementForm />
+      <AgreementForm onNext={() => onNext()} />
     </>
   );
 }

src/_components/auth/RegisterAgreementForm.tsx → src/_components/auth/register/agreement/AgreementForm.tsx

@@ -13,8 +13,9 @@ import {
   AgreementUserFormValues,
   termsMapping,
 } from "@/_types/yup/yupRegister";
+import AgreementFormSkeleton from "./AgreementformtSkeleton";
 
-export default function RegisterAgreementForm() {
+export default function AgreementForm({ onNext }: { onNext: () => void }) {
   const router = useRouter();
   const {
     data: terms,
@@ -55,6 +56,7 @@ export default function RegisterAgreementForm() {
     setServiceAgree(getValues("serviceAgree"));
     setPrivateInformationAgree(getValues("privateInformationAgree"));
     setMarketingAgree(getValues("marketingAgree"));
+    onNext();
   };
 
   // 리렌더링 시 zustand 상태 반영
@@ -99,8 +101,13 @@ export default function RegisterAgreementForm() {
     setValue,
   ]);
 
-  if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error : {error.message}</div>;
+  if (isLoading) {
+    return <AgreementFormSkeleton />;
+  }
+  if (error) {
+    router.push("/error");
+    return null;
+  }
 
   return (
     <form className="w-full max-w-[560px]">
@@ -163,7 +170,6 @@ export default function RegisterAgreementForm() {
         )}
       </div>
       <BottomButton
-        url="/register/name"
         enableButton={
           allAgreeWatch || (serviceAgreeWatch && privateInformationAgreeWatch)
         }

src/_components/auth/register/agreement/AgreementformtSkeleton.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import Skeleton from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+
+export default function AgreementFormSkeleton() {
+  return (
+    <div className="w-full max-w-[560px] mx-auto">
+      <div className="mx-[4%] my-4">
+        <Skeleton height={24} width={200} />
+        <Skeleton height={20} width={150} className="mt-2" />
+      </div>
+
+      {[...Array(3)].map((_, idx) => (
+        <div
+          key={idx}
+          className="mx-[4%] my-4 flex items-center justify-between"
+        >
+          <div className="flex items-center space-x-2">
+            <Skeleton circle height={20} width={20} />
+            <Skeleton height={20} width={180} />
+          </div>
+          <Skeleton height={20} width={24} />
+        </div>
+      ))}
+
+      <div className="mx-[4%] mt-8">
+        <Skeleton height={48} width="100%" borderRadius={8} />
+      </div>
+    </div>
+  );
+}

src/app/(view)/(auth)/register/name/page.tsx → src/_components/auth/register/nickname/Nickname.tsx

@@ -1,10 +1,9 @@
-import NicknameForm from "@/_components/auth/NicknameForm";
+import NicknameForm from "@/_components/auth/register/nickname/NicknameForm";
 import TopHeader from "@/_common/TopHeader";
 
-export default function Page() {
+export default function NickName({ onNext }: { onNext: () => void }) {
   return (
     <>
-      <TopHeader title="회원가입" step={2} rest={1} />
       <div className="mx-[4%] mb-4 mt-10 flex flex-col">
         <h2 className="my-1 text-xl font-bold">닉네임을 설정해주세요.</h2>
         <div className="my-1 flex flex-col text-sm font-medium text-cool-grayscale-600">
@@ -15,7 +14,7 @@ export default function Page() {
           닉네임은 추후 변경이 가능해요!
         </span>
       </div>
-      <NicknameForm />
+      <NicknameForm onNext={() => onNext()} />
     </>
   );
 }

src/_components/auth/NicknameForm.tsx → src/_components/auth/register/nickname/NicknameForm.tsx

@@ -12,7 +12,7 @@ import {
   NicknameUserFormValues,
 } from "@/_types/yup/yupRegister";
 
-export default function NicknameForm() {
+export default function NicknameForm({ onNext }: { onNext: () => void }) {
   const { setNickname } = useRegisterStore();
   const [nicknamePass, setNicknamePass] = useState<string>("");
   const [enableButton, setEnableButton] = useState<boolean>(false);
@@ -129,9 +129,13 @@ export default function NicknameForm() {
     [isSubmitting, clearErrors, setError],
   );
 
+  // const saveNicknameData = useCallback(() => {
+  //   setNickname(getValues("nickname"));
+  // }, [getValues, setNickname]);
   const saveNicknameData = useCallback(() => {
     setNickname(getValues("nickname"));
-  }, [getValues, setNickname]);
+    onNext();
+  }, [getValues, setNickname, onNext]);
 
   useEffect(() => {
     clearErrors("nickname");
@@ -179,11 +183,7 @@ export default function NicknameForm() {
       >
         중복 검사
       </button>
-      <BottomButton
-        url="/register/details"
-        enableButton={enableButton}
-        onClick={saveNicknameData}
-      >
+      <BottomButton enableButton={enableButton} onClick={saveNicknameData}>
         다음
       </BottomButton>
     </form>