[refactor] axios 에러 응답 수정 및 온보딩 api 연결 로직 리팩토링 (#19)

* feat: 홈화면 ui 및 데이터 페칭

* feat: 홈화면 분기별 ui

* feat: 빠른시작 등록, 리스트

* refactor

* fix: 라우팅 경로 오류 수정

* feat: 온보딩 api 연결

* refactor: axios 에러 응답 반환 수정

* refactor: 에러처리

* fix: eslint

src/api/core.ts

@@ -40,8 +40,7 @@ axiosInstance.interceptors.response.use(
     if (!error.response) {
       return Promise.reject(error)
     }
-    // TODO: 에러 세분화
-    return error
+    return Promise.reject(error.response.data)
   },
 )
 

src/app/home/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { Button, Category, HomeHeader, House, Div, Right } from '@/components'
+import useUserInfo from '@/store/useUserInfo'
 import { useHomeContext } from './fast/components/Fetcher'
 import { QuickBox } from './components/QuickBox'
 import NoQuickBox from './components/NoQuickBox'
@@ -10,12 +11,14 @@ import TimePiece from './components/TimePiece'
 export default function Home() {
   const { quickStart, totalSavedTime, activities } = useHomeContext()
 
+  const { userInfo } = useUserInfo()
+
   return (
     <HomeHeader>
       <div className="bg-[#F3F3F4]">
         <Div className="bg-primary_foundation_100 flex flex-col gap-20 rounded-t-0 pt-60">
           <h1 className="text-white text-24 mt-10">
-            고먕님, <br /> 지금 시간 조각을 모아볼까요?
+            {userInfo.nickname}님, <br /> 지금 시간 조각을 모아볼까요?
           </h1>
           <Button
             type="button"

src/app/start/api/api.ts

@@ -0,0 +1,25 @@
+import { http } from '@/api'
+import { UserInfo } from '@/store/useUserInfo'
+import { useMutation } from '@tanstack/react-query'
+import { useRouter } from 'next/navigation'
+
+export const postOnboard = (data: UserInfo) => {
+  return http.post({
+    url: '/members/onboard',
+    data,
+  })
+}
+
+export const usePostOnboard = () => {
+  const router = useRouter()
+
+  return useMutation({
+    mutationFn: (data: UserInfo) => postOnboard(data),
+    onSuccess: () => {
+      router.push('/home')
+    },
+    onError: (error) => {
+      alert(error.message)
+    },
+  })
+}

src/app/start/components/Step1.tsx

@@ -11,7 +11,7 @@ interface Step1Props {
 
 export default function Step1({ setError }: Step1Props) {
   const { userInfo, setUserInfo } = useUserInfo()
-  const [username, setUsername] = useState(userInfo.name)
+  const [username, setUsername] = useState(userInfo.nickname)
   const [errorMessage, setErrorMessage] = useState<string>()
 
   const validateName = (name: string) => {
@@ -28,7 +28,7 @@ export default function Step1({ setError }: Step1Props) {
     } else {
       setError(false)
       setErrorMessage('')
-      setUserInfo({ ...userInfo, name: newName })
+      setUserInfo({ ...userInfo, nickname: newName })
     }
   }
   return (

src/app/start/components/Step2.tsx

@@ -2,7 +2,7 @@
 
 import { Input } from '@/components/common'
 import CheckboxWithLabel from '@/components/common/CheckBox'
-import useUserInfo from '@/store/useUserInfo'
+import useUserInfo, { GenderType } from '@/store/useUserInfo'
 import Image from 'next/image'
 import { ChangeEvent, useState } from 'react'
 
@@ -13,11 +13,11 @@ interface Step2Props {
 export default function Step2({ setError }: Step2Props) {
   const [errorMessage, setErrorMessage] = useState<string>()
   const { userInfo, setUserInfo } = useUserInfo()
-  const { name, age, gender } = userInfo
+  const { nickname, birthYear, gender } = userInfo
 
-  const [userAge, setUserAge] = useState<string>(age ? String(age) : '')
+  const [userAge, setUserAge] = useState<string>(birthYear || '')
 
-  const handleGenderChange = (data: string) => {
+  const handleGenderChange = (data: GenderType) => {
     setUserInfo({ ...userInfo, gender: data })
 
     if (!errorMessage) {
@@ -32,7 +32,10 @@ export default function Step2({ setError }: Step2Props) {
       const regex = /^[0-9]{4}$/
 
       if (regex.test(value)) {
-        setUserInfo({ ...userInfo, age: value ? Number(value) : undefined })
+        setUserInfo({
+          ...userInfo,
+          birthYear: value || '',
+        })
         setErrorMessage('')
         if (gender) {
           setError(false)
@@ -47,7 +50,7 @@ export default function Step2({ setError }: Step2Props) {
   return (
     <div className="px-20">
       <h1 className="title">
-        {name} 님의 나이와 성별을 <br />
+        {nickname} 님의 나이와 성별을 <br />
         알려주세요.
       </h1>
 
@@ -63,22 +66,22 @@ export default function Step2({ setError }: Step2Props) {
       <div className="flex justify-between mt-10 gap-20">
         <CheckboxWithLabel
           id="1"
-          isChecked={gender === 'female'}
+          isChecked={gender === 'FEMALE'}
           label="여성"
-          onChange={() => handleGenderChange('female')}
+          onChange={() => handleGenderChange('FEMALE')}
         />
 
         <CheckboxWithLabel
           id="2"
-          isChecked={gender === 'male'}
+          isChecked={gender === 'MALE'}
           label="남성"
-          onChange={() => handleGenderChange('male')}
+          onChange={() => handleGenderChange('MALE')}
         />
         <CheckboxWithLabel
           id="3"
-          isChecked={gender === 'no'}
+          isChecked={gender === 'NONE'}
           label="미선택"
-          onChange={() => handleGenderChange('no')}
+          onChange={() => handleGenderChange('NONE')}
         />
       </div>
 

src/app/start/components/Step3.tsx

@@ -26,11 +26,11 @@ const profiles = [
 
 export default function Step3() {
   const { userInfo, setUserInfo } = useUserInfo()
-  const [selectedProfile, setSelectedProfile] = useState(userInfo.profileIcon)
+  const [selectedProfile, setSelectedProfile] = useState(userInfo.profileImage)
 
   const handleProfileSelect = (profile: string) => {
     setSelectedProfile(profile)
-    setUserInfo({ ...userInfo, profileIcon: profile })
+    setUserInfo({ ...userInfo, profileImage: profile })
   }
 
   return (

src/app/start/components/Step4.tsx

@@ -151,7 +151,7 @@ export default function Step4() {
       <div className="absolute -z-1 w-screen h-screen bg-gradient-to-b from-white via-[#fffbfb] to-[#ffa89c]" />
       <div className="flex flex-col items-center mt-34">
         <h2 className="text-primary_foundation_60 relative">
-          환영해요, {userInfo.name}님!
+          환영해요, {userInfo.nickname}님!
         </h2>
         <h1 className="relative title !mt-0">
           조각조각이 고망님의 흩어진 <br />

src/app/start/page.tsx

@@ -4,13 +4,18 @@ import { Button, If } from '@/components/common'
 import { useState } from 'react'
 import { cn } from '@/util'
 import { HeaderWithBack } from '@/components'
+import useUserInfo from '@/store/useUserInfo'
 import { Step1, Step2, Step3, Step4 } from './components'
+import { usePostOnboard } from './api/api'
 
 export default function Start() {
   const [step, setStep] = useState(1)
   const [text, setText] = useState('다음')
   const [error, setError] = useState(true)
 
+  const { mutate } = usePostOnboard()
+  const { userInfo } = useUserInfo()
+
   const handleBack = () => {
     setStep((prevStep) => Math.max(prevStep - 1, 1))
   }
@@ -25,6 +30,14 @@ export default function Start() {
       setError(false)
       setText('시작하기')
     }
+    if (step === 4) {
+      mutate({
+        nickname: userInfo.nickname,
+        birthYear: userInfo.birthYear,
+        gender: userInfo.gender,
+        profileImage: userInfo.profileImage,
+      })
+    }
   }
 
   const progressBarWidth = `${(step / 3) * 100}%`

src/components/Icons/Caution.tsx

@@ -22,15 +22,15 @@ export default function Caution({ ...props }: SVGProps<SVGSVGElement>) {
             id="Line"
             d="M8 5.00033L8 7.66699"
             stroke="white"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            strokeLinecap="round"
+            strokeLinejoin="round"
           />
           <path
             id="Line_2"
             d="M8 9.66667L8 10"
             stroke="white"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            strokeLinecap="round"
+            strokeLinejoin="round"
           />
         </g>
       </g>

src/components/Icons/Clock.tsx

@@ -11,8 +11,8 @@ export default function Category({ ...props }: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M0.041748 9C0.041748 4.05245 4.05253 0.0416641 9.00008 0.0416641C13.9476 0.0416641 17.9584 4.05245 17.9584 9C17.9584 13.9475 13.9476 17.9583 9.00008 17.9583C4.05253 17.9583 0.041748 13.9475 0.041748 9ZM9.625 5.66667C9.625 5.32149 9.34518 5.04167 9 5.04167C8.65482 5.04167 8.375 5.32149 8.375 5.66667V8.77701C8.375 9.12529 8.54906 9.45053 8.83885 9.64373L11.1533 11.1867C11.4405 11.3782 11.8286 11.3006 12.02 11.0134C12.2115 10.7261 12.1339 10.3381 11.8467 10.1466L9.625 8.66551V5.66667Z"
         fill="#31313B"
       />

src/components/Icons/Logo.tsx

@@ -4,88 +4,55 @@ export default function Logo({ ...props }: SVGProps<SVGSVGElement>) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="28"
+      height="28"
+      viewBox="0 0 28 28"
       fill="none"
       {...props}
     >
-      <rect
-        x="17.9839"
-        y="6.00952"
-        width="6.01583"
-        height="12.0188"
+      <ellipse
+        cx="6.61382"
+        cy="2.98679"
+        rx="6.61382"
+        ry="2.98679"
+        transform="matrix(-0.997349 -0.0727717 -0.069464 0.997585 22.9653 16.1428)"
+        fill="#1A1A25"
+      />
+      <ellipse
+        cx="4.54644"
+        cy="2.17857"
+        rx="4.54644"
+        ry="2.17857"
+        transform="matrix(-0.876446 -0.4815 -0.464336 0.885659 18.521 25.1412)"
+        fill="#1A1A25"
+      />
+      <ellipse
+        cx="8.16227"
+        cy="5.08315"
+        rx="8.16227"
+        ry="5.08315"
+        transform="matrix(0.71326 -0.7009 0.684052 0.729434 6.30273 15.5643)"
+        fill="#1A1A25"
+      />
+      <ellipse
+        cx="9.9513"
+        cy="6.88615"
+        rx="9.9513"
+        ry="6.88615"
+        transform="matrix(0.738779 -0.673948 0.656612 0.754228 1.05957 12.4127)"
         fill="#FF4F38"
       />
-      <rect
-        x="11.9937"
-        y="-3.05176e-05"
-        width="6.00317"
-        height="6.00942"
-        fill="#FF4F38"
-      />
-      <rect
-        x="17.9971"
-        y="-3.05176e-05"
-        width="6.00317"
-        height="6.00942"
-        fill="#FF4F38"
-      />
-      <rect
-        x="17.9971"
-        y="6.00952"
-        width="6.00317"
-        height="6.00942"
-        fill="#FF4F38"
-      />
-      <rect
-        x="17.9971"
-        y="12.019"
-        width="6.00317"
-        height="6.00942"
-        fill="#FF4F38"
-      />
-      <rect x="5.99072" width="6.00317" height="6.00942" fill="#FF4F38" />
-      <rect y="12.019" width="12.0317" height="6.00942" fill="white" />
-      <rect
-        x="11.9897"
-        y="24"
-        width="5.99473"
-        height="5.99677"
-        transform="rotate(180 11.9897 24)"
-        fill="white"
-      />
-      <rect
-        x="5.99512"
-        y="24"
-        width="5.99473"
-        height="5.99677"
-        transform="rotate(180 5.99512 24)"
-        fill="white"
-      />
-      <rect
-        x="5.99512"
-        y="18.0031"
-        width="5.99473"
-        height="5.99677"
-        transform="rotate(180 5.99512 18.0031)"
-        fill="white"
-      />
-      <rect
-        x="12.0322"
-        y="12.019"
-        width="12.0317"
-        height="6.00942"
-        transform="rotate(180 12.0322 12.019)"
-        fill="white"
-      />
-      <rect
-        x="17.9844"
-        y="23.9747"
-        width="6.01583"
-        height="5.94616"
-        transform="rotate(180 17.9844 23.9747)"
-        fill="white"
+      <path
+        d="M11.1367 10.8336L17.1037 10.363"
+        stroke="white"
+        strokeWidth="0.949259"
+        strokeLinecap="round"
+      />
+      <path
+        d="M14.1989 5.14835L11.4155 11.6387"
+        stroke="white"
+        strokeWidth="0.949259"
+        strokeLinecap="round"
       />
     </svg>
   )

src/components/Icons/Pencil.tsx

@@ -11,8 +11,8 @@ export default function Caution({ ...props }: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M11.7036 3.61333C12.354 2.96196 13.4089 2.96156 14.0597 3.61244L16.1363 5.68898C16.7816 6.3343 16.7883 7.37901 16.1513 8.03256L14.768 9.45189L10.3176 5.00148L11.7036 3.61333ZM9.43434 5.88604L13.8954 10.3471L8.45703 15.9269C7.98668 16.4095 7.34157 16.6816 6.66795 16.6816L4.3745 16.6815C3.6638 16.6815 3.09624 16.0891 3.12613 15.3785L3.22459 13.0376C3.25092 12.4116 3.51111 11.8182 3.95367 11.375L9.43434 5.88604ZM17.0959 17.246C17.4409 17.246 17.7207 16.966 17.7207 16.6207C17.7207 16.2754 17.4409 15.9955 17.0959 15.9955H11.9945C11.6494 15.9955 11.3697 16.2754 11.3697 16.6207C11.3697 16.966 11.6494 17.246 11.9945 17.246H17.0959Z"
         fill="#484851"
       />