Feat(onboarding): 온보딩 회원가입 api 연결

apps/client/src/pages/onBoarding/components/funnel/AlarmBox.tsx

@@ -2,6 +2,7 @@ import { cva } from 'class-variance-authority';
 import TimePicker from '../timePicker/TimePicker';
 import { AlarmsType } from '@constants/alarms';
 import { useState } from 'react';
+import { normalizeTime } from '@pages/onBoarding/utils/formatRemindTime';
 interface AlarmBoxProps {
   select: 1 | 2 | 3;
   isDisabled: boolean;
@@ -57,7 +58,7 @@ const AlarmBox = ({ select, isDisabled, onClick }: AlarmBoxProps) => {
       {select === 3 && isDisabled && (
         <>
           {AlarmsType[2].time && (
-            <p className="caption2-m text-font-gray-3">{AlarmsType[2].time}</p>
+            <p className="caption2-m text-font-gray-3">{normalizeTime(AlarmsType[2].time)}</p>
           )}
 
           {showPicker && (

apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx

@@ -6,8 +6,10 @@ import AlarmStep from './step/AlarmStep';
 import MacStep from './step/MacStep';
 import FinalStep from './step/FinalStep';
 import { cva } from 'class-variance-authority';
+import { usePostSignUp } from '@shared/apis/queries';
 const stepProgress = [{ progress: 30 }, { progress: 60 }, { progress: 100 }];
-
+import { AlarmsType } from '@constants/alarms';
+import { normalizeTime } from '@pages/onBoarding/utils/formatRemindTime';
 const variants = {
   slideIn: (direction: number) => ({
     x: direction > 0 ? 200 : -200,
@@ -36,6 +38,8 @@ const MainCard = () => {
   const [direction, setDirection] = useState(0);
   const [alarmSelected, setAlarmSelected] = useState<1 | 2 | 3>(1);
   const [isMac, setIsMac] = useState(false);
+  // api 구간
+  const {mutate:postSignData} = usePostSignUp();
 
   useEffect(() => {
     const ua = navigator.userAgent.toLowerCase();
@@ -62,15 +66,33 @@ const MainCard = () => {
     }
   };
 
+const [remindTime, setRemindTime] = useState('09:00');
   const nextStep = () => {
+    console.log(step)
     if (step === 3) {
-      // 이거 이후에 api 붙일 자리 표시임! console.log('선택된 알람:', AlarmsType[alarmSelected - 1].time);
+      // 이거 이후에 api 붙일 자리 표시임! 
+
     }
     if (step < 5) {
       setDirection(1);
       setStep((prev) => prev + 1);
     } else if (step === 5) {
-      window.location.href = '/';
+      const raw = AlarmsType[alarmSelected - 1].time;
+      setRemindTime(normalizeTime(raw));
+
+      postSignData({
+            "email": "tesdfdfsst@gmail.com", 
+            "remindDefault": remindTime, 
+            "fcmToken": "adlfdjlajlkadfsjlkfdsdfsdfsdfsdfsa"
+        },
+        {
+          onSuccess:()=>{
+            window.location.href = '/';
+           }
+        }
+      )
+
+
     }
   };
 

apps/client/src/pages/onBoarding/utils/formatRemindTime.ts

@@ -0,0 +1,26 @@
+export function normalizeTime(input: string): string {
+  let hours = 0;
+  let minutes = 0;
+
+  const ampmMatch = input.match(/(AM|PM)\s?(\d{1,2}):(\d{1,2})/i);
+  if (ampmMatch) {
+    const [, ampm, h, m] = ampmMatch;
+    hours = parseInt(h, 10);
+    minutes = parseInt(m, 10);
+
+    if (ampm.toUpperCase() === "PM" && hours < 12) {
+      hours += 12;
+    }
+    if (ampm.toUpperCase() === "AM" && hours === 12) {
+      hours = 0; // 12 AM → 00시
+    }
+  } else {
+    const [h, m] = input.split(":");
+    hours = parseInt(h, 10);
+    minutes = parseInt(m, 10);
+  }
+
+  const hh = String(hours).padStart(2, "0");
+  const mm = String(minutes).padStart(2, "0");
+  return `${hh}:${mm}`;
+}

apps/client/src/shared/apis/axios.ts

@@ -20,3 +20,14 @@ export const getAcorns = async () => {
   });
   return data.data;
 };
+
+export interface postSignUpRequest {
+  email: string,
+  remindDefault: string,
+  fcmToken: string
+}
+
+export const postSignUp = async (data: postSignUpRequest) => {
+  const response = await apiRequest.post('/api/v1/auth/signup', data);
+  return response.data;
+};

apps/client/src/shared/apis/queries.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQuery, UseQueryResult } from '@tanstack/react-query';
-import { getDashboardCategories, postCategory } from '@shared/apis/axios';
+import { getDashboardCategories, postCategory, postSignUp, postSignUpRequest } from '@shared/apis/axios';
 import { AxiosError } from 'axios';
 import { DashboardCategoriesResponse, AcornsResponse } from '@shared/types/api';
 import { getAcorns } from './axios';
@@ -26,3 +26,21 @@ export const useGetArcons = (): UseQueryResult<AcornsResponse, AxiosError> => {
     queryFn: () => getAcorns(),
   });
 };
+
+export const usePostSignUp = () => {
+  return useMutation({
+    mutationFn: (data: postSignUpRequest) => postSignUp(data),
+    onSuccess: (data) => {
+      const newToken = data?.data?.token || data?.token;
+
+      if (newToken) {
+        localStorage.setItem("token", newToken);
+      }
+
+      console.log("회원가입 성공:", data);
+    },
+    onError: (error) => {
+      console.error("회원가입 실패:", error);
+    },
+  });
+};