📝 : 부모 회원가입 api 관련 수정 중 (500, 403 에러 발생중) #54

.gitignore

@@ -45,3 +45,5 @@ next-env.d.ts
 # Storybook build output
 storybook-static/
 /src/app/goal/detail/page.tsx
+
+certificates

package.json

@@ -11,7 +11,8 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "commit": "gitmoji -c",
-    "dev:all": "concurrently \"pnpm run dev\" \"pnpm run storybook\""
+    "dev:all": "concurrently \"pnpm run dev\" \"pnpm run storybook\"",
+    "dev:domain": "next dev --hostname growfit.co.kr --port 3000  --experimental-https"
   },
   "engines": {
     "node": "^20.11.0",

src/app/(auth)/join/[type]/[step]/_components/ParentStep02.tsx

@@ -8,6 +8,7 @@ import BoyIcon from "@/assets/character/comm/img-boy.svg"
 import GirlIcon from "@/assets/character/comm/img-girl.svg"
 import Button from "@/components/common/button/button"
 import Input from "@/components/common/input/input"
+import { useParentJoin } from "@/hooks/auth/useParentAuth"
 import { useUserStore } from "@/stores/userStore"
 
 import pageStyles from "../page.module.scss"
@@ -23,7 +24,11 @@ function generateNumberArray(begin: number, end: number, unit: string) {
 
 const ParentStep02 = () => {
   const router = useRouter()
-  const { updateParent } = useUserStore()
+
+  const { updateUser, parent } = useUserStore()
+  const { mutate } = useParentJoin()
+
+
   const [childInfo, setChildInfo] = useState({
     childName: "",
     childGender: "",
@@ -44,7 +49,9 @@ const ParentStep02 = () => {
     childHeight: generateNumberArray(100, 200, "cm"),
     childWeight: generateNumberArray(20, 150, "kg"),
   }
+  // #endregion
 
+  // #region Event
   const handleChange = (key: string, e: ChangeEvent<HTMLInputElement>) => {
     setChildInfo((prev) => ({
       ...prev,
@@ -60,15 +67,61 @@ const ParentStep02 = () => {
     })
   }
 
-  const handleClickNext = async () => {
-    await updateParent({
+
+  const handleClickJoin = async () => {
+    const updatedChildInfo = { 
       ...childInfo,
       childAge: parseInt(pickerValues.childAge.replace("세", "")),
       childHeight: parseInt(pickerValues.childHeight.replace("cm", "")),
       childWeight: parseInt(pickerValues.childWeight.replace("kg", "")),
+    }
+
+    updateUser(updatedChildInfo)
+
+    const requestData = {
+      nickname: parent.nickname ?? "",
+      child_name: updatedChildInfo.childName,
+      child_gender: updatedChildInfo.childGender,
+      child_age: updatedChildInfo.childAge,
+      child_height: updatedChildInfo.childHeight,
+      child_weight: updatedChildInfo.childWeight,
+    }
+
+    // // 요청 데이터 확인
+    // console.log("요청 데이터:", requestData)
+
+    // try {
+    //   await mutate(requestData)
+    // } catch (error) {
+    //   console.error("회원가입 실패:", error)
+    // }
+    // 쿠키 확인
+    console.log("현재 쿠키:", document.cookie)
+
+    // 요청 데이터 타입 확인
+    console.log("요청 데이터 타입:", {
+      nickname: typeof requestData.nickname,
+      child_name: typeof requestData.child_name,
+      child_gender: typeof requestData.child_gender,
+      child_age: typeof requestData.child_age,
+      child_height: typeof requestData.child_height,
+      child_weight: typeof requestData.child_weight,
     })
-    router.push("/success?type=parent")
+
+    console.log("요청 데이터 값:", requestData)
+
+    try {
+      const response = await mutate(requestData)
+      console.log("성공 응답:", response)
+    } catch (error) {
+      // 더 자세한 에러 정보
+      console.error("에러 응답 데이터:", error.response?.data)
+      console.error("에러 상태 코드:", error.response?.status)
+      console.error("에러 헤더:", error.response?.headers)
+      console.error("요청 설정:", error.config)
+    }
   }
+  // #endregion
 
   return (
     <>
@@ -93,25 +146,25 @@ const ParentStep02 = () => {
 
           <label
             htmlFor="genderM"
-            className={`${styles.lab_radio} ${childInfo.childGender === "M" ? styles.selected : ""}`}>
+            className={`${styles.lab_radio} ${childInfo.childGender === "MALE" ? styles.selected : ""}`}>
             <input
               id="genderM"
               type="radio"
               name="childGender"
-              value="M"
+              value="MALE"
               onChange={(e) => handleChange("childGender", e)}
             />
             남아
             <BoyIcon className={styles.img_gender} />
           </label>
           <label
             htmlFor="genderF"
-            className={`${styles.lab_radio} ${childInfo.childGender === "F" ? styles.selected : ""}`}>
+            className={`${styles.lab_radio} ${childInfo.childGender === "FEMALE" ? styles.selected : ""}`}>
             <input
               id="genderF"
               type="radio"
               name="childGender"
-              value="F"
+              value="FEMALE"
               onChange={(e) => handleChange("childGender", e)}
             />
             여아
@@ -209,7 +262,7 @@ const ParentStep02 = () => {
         size="large"
         variant="filled"
         classNames={pageStyles.join__content__btn}
-        onClick={handleClickNext}
+        onClick={handleClickJoin}
       />
     </>
   )

src/app/(auth)/join/[type]/[step]/page.tsx

@@ -52,7 +52,7 @@ const Page = async ({ params }: Props) => {
         <em>0{currentStep}</em>
         <h3>{STEPS[currentType][currentStep - 1].title}</h3>
       </div>
-      {STEPS[currentType][currentStep - 1].component(currentStep)}
+      {STEPS[currentType][currentStep - 1].component()}
     </section>
   )
 }

src/app/(auth)/join/layout.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import BackHeader from "@/components/layout/header/BackHeader"
 
 import styles from "./layout.module.scss"

src/app/(auth)/layout.tsx

@@ -0,0 +1,3 @@
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}

src/app/(auth)/login/page.tsx

@@ -3,13 +3,13 @@ import Link from "next/link"
 
 import LoginStartCharacter from "@/assets/character/login/img-login-start.svg"
 import LoginLogo from "@/assets/logo/logo-type01.svg"
-import { useKakaoAuth } from "@/hooks/useKakaoAuth"
+import { useKakaoAuth } from "@/hooks/auth/useKakaoAuth"
 
 import layoutStyles from "./layout.module.scss"
 import styles from "./page.module.scss"
 
-const Page = () => {
-  const { handleKakaoLogin, isLoading } = useKakaoAuth()
+const Page = () => { 
+  const { handleKakaoLogin, handleKakaoLogout, isLoading } = useKakaoAuth() 
 
   return (
     <div className={`${layoutStyles.login__content}`}>
@@ -29,6 +29,13 @@ const Page = () => {
           disabled={isLoading}>
           {isLoading ? "로그인 중..." : "카카오톡으로 시작하기 (테스트용)"}
         </button>
+        <button
+          style={{ backgroundColor: "red" }}
+          type="button"
+          className={`btn-comm rounded ${styles.btn_kakao_login}`}
+          onClick={handleKakaoLogout}>
+          로그아웃
+        </button>
         <Link href="/login/parent" className="btn-comm large filled rounded">
           부모 로그인
         </Link>

src/app/api/auth/index.ts

@@ -1 +1 @@
-export { parentLogin, parentQrGenerate, parentRegister } from "./parent"
+export { parentJoin, parentQrGenerate } from "./parent"

src/app/api/auth/parent/index.ts

@@ -1,14 +1,14 @@
 import { authAPI } from "@/app/api/config"
 
-const goalBaseUrl = "/api/parent/"
+import { ParentJoinRequestType } from "@/types/auth"
+
+const AuthBaseUrl = "/api/parent"
 
-// 부모 로그인
-export const parentLogin = async () => {
-  return authAPI.get(`${goalBaseUrl}`)
-}
 // 부모 회원가입
-export const parentRegister = async () => {}
+export const parentJoin = async (joinInfo: ParentJoinRequestType) => {
+  return authAPI.post(`${AuthBaseUrl}/child`, joinInfo)
+}
 // 부모 qr생성
 export const parentQrGenerate = async () => {
-  return authAPI.get(`${goalBaseUrl}child/qr`)
+  return authAPI.get(`${AuthBaseUrl}/child/qr`)
 }

src/app/api/config.ts

@@ -18,19 +18,7 @@ authAPI.interceptors.response.use(
     return res.data
   },
   async (error) => {
-    // MEMO : 에러 확인이 안돼서 주석 처리했으나 추후 주석 처리내용 사용 예정
-    // if (error.response?.status === 401) {
-    //   clearAuthCookies()
-
-    //   if (typeof window !== "undefined") {
-    //     const currentPath = window.location.pathname
-    //     const isLoginPage = currentPath.includes("/login") || currentPath === "/"
-
-    //     if (!isLoginPage) {
-    //       window.location.href = "/login"
-    //     }
-    //   }
-    // }
+    console.error("API 에러 상세:", error.response?.data) // 에러 로깅 추가
     return Promise.reject(error)
   }
 )

src/hooks/useKakaoAuth.ts → src/hooks/auth/useKakaoAuth.ts

@@ -1,5 +1,7 @@
 import { useState } from "react"
 
+import { authAPI } from "@/app/api/config"
+
 export const useKakaoAuth = () => {
   const [isLoading, setIsLoading] = useState(false)
 
@@ -34,6 +36,8 @@ export const useKakaoAuth = () => {
     document.cookie = "userId=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;"
     document.cookie = "isUser=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;"
 
+    authAPI.post("oauth/logout")
+
     window.location.href = "/login"
   }
 

src/hooks/auth/useParentAuth.ts

@@ -1,7 +1,25 @@
-import { useQuery } from "@tanstack/react-query"
+import { useRouter } from "next/navigation"
 
-import { parentQrGenerate } from "@/app/api/auth"
+import { useMutation, useQuery } from "@tanstack/react-query"
 
+import { parentJoin, parentQrGenerate } from "@/app/api/auth"
+
+// 부모 회원가입
+export const useParentJoin = () => {
+  const router = useRouter()
+  return useMutation({
+    mutationKey: ["parent", "join"],
+    mutationFn: parentJoin,
+    onSuccess: () => {
+      router.push("/success?type=parent")
+    },
+    onError: (error) => {
+      console.error("회원가입 실패:", error)
+    },
+  })
+}
+
+// 아이 회원가입
 export const useParentQrGenerate = () => {
   return useQuery({
     queryKey: ["parent", "qr"],

src/types/auth.ts

@@ -0,0 +1,8 @@
+export type ParentJoinRequestType = {
+  nickname: string
+  child_name: string
+  child_gender: string
+  child_age: number
+  child_height: number
+  child_weight: number
+}