Merge branch 'develop' of https://github.com/SOPT-36-NINEDOT/NINEDOT-CLIENT into feat/#206/404

Author: jisooooooooooo

src/App.tsx

@@ -1,9 +1,22 @@
+import { Suspense } from 'react';
 import { RouterProvider } from 'react-router-dom';
 
 import { router } from '@/route';
+import Loading from '@/common/component/Loading/Loading';
 
 function App() {
-  return <RouterProvider router={router} />;
+  return (
+    <Suspense
+      fallback={
+        <Loading
+          type="goal"
+          // type="default"
+        />
+      }
+    >
+      <RouterProvider router={router} />
+    </Suspense>
+  );
 }
 
 export default App;

src/api/domain/signup/hook/usePostSignup.ts

@@ -1,10 +1,10 @@
 import { useMutation } from '@tanstack/react-query';
 
 import { postSignUp } from '@/api/domain/signup';
-import type { SignupResponse } from '@/api/domain/signup/type/SignupResponse';
+import type { SignupRequest } from '@/api/domain/signup/type/SignupRequest';
 
 export const usePostSignUp = () => {
   return useMutation({
-    mutationFn: (payload: SignupResponse) => postSignUp(payload),
+    mutationFn: (payload: SignupRequest) => postSignUp(payload),
   });
 };

src/api/domain/signup/index.ts

@@ -2,7 +2,7 @@ import axiosInstance from '@/api/axiosInstance';
 import { END_POINT } from '@/api/constant/endPoint';
 import type { JobResponse } from '@/api/domain/signup/type/JobResponse';
 import type { PersonaResponse } from '@/api/domain/signup/type/PersonaResponse';
-import type { SignupResponse } from '@/api/domain/signup/type/SignupResponse';
+import type { SignupRequest } from '@/api/domain/signup/type/SignupRequest';
 import type { UserType } from '@/store/types/authTypes';
 import type { BaseResponse } from '@/type/api';
 
@@ -15,7 +15,7 @@ export const getPersona = async () => {
   const { data } = await axiosInstance.get<BaseResponse<PersonaResponse>>(`/${END_POINT.PERSONA}`);
   return data.data;
 };
-export const postSignUp = async (payload: SignupResponse) => {
+export const postSignUp = async (payload: SignupRequest) => {
   const { data } = await axiosInstance.post('/auth/signup', payload);
   return data.data;
 };

…api/domain/signup/type/SignupResponse.ts …/api/domain/signup/type/SignupRequest.tssrc/api/domain/signup/type/SignupResponse.ts renamed to src/api/domain/signup/type/SignupRequest.ts src/api/domain/signup/type/SignupResponse.ts renamed to src/api/domain/signup/type/SignupRequest.ts

@@ -1,4 +1,4 @@
-export interface SignupResponse {
+export interface SignupRequest {
   socialProvider: string;
   socialToken: string;
   name: string;

src/common/component/Loading/Loading.tsx

@@ -4,13 +4,16 @@ import loadingAnimation from '@/assets/lottie/loading.json';
 import * as styles from '@/common/component/Loading/Loading.css';
 
 type LoadingProps = {
-  type: 'goal' | 'todo' | 'history' | 'entireTodo';
+  type: 'default' | 'goal' | 'todo' | 'history' | 'entireTodo';
 };
 
 const Loading = ({ type }: LoadingProps) => {
   let message = '';
 
   switch (type) {
+    case 'default':
+      message = '데이터를 불러오는 중이에요';
+      break;
     case 'goal':
       message = 'AI가 목표를 추천해주고 있어요';
       break;

src/common/component/TextField/signup/format.ts

@@ -4,7 +4,7 @@ export function formatBirthDate(value: string): string {
     return digits;
   }
   if (digits.length < 7) {
-    return `${digits.slice(0, 4)}-${digits.slice(4)}`;
+    return `${digits.slice(0, 4)}.${digits.slice(4)}`;
   }
-  return `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6)}`;
+  return `${digits.slice(0, 4)}.${digits.slice(4, 6)}.${digits.slice(6)}`;
 }

src/common/component/TextField/signup/validation.ts

@@ -2,7 +2,7 @@ import { ERROR_MESSAGES } from './constants';
 
 export const NAME_REGEX = /^[A-Za-z가-힣ㄱ-ㅎㅏ-ㅣ\s]{1,10}$/;
 export const JOB_REGEX = /^[A-Za-z가-힣ㄱ-ㅎㅏ-ㅣ\s]{1,15}$/;
-export const BIRTH_REGEX = /^\d{4}-\d{2}-\d{2}$/;
+export const BIRTH_REGEX = /^\d{4}.\d{2}.\d{2}$/;
 
 export function validateName(value: string): string | undefined {
   const v = (value ?? '').trim();
@@ -24,7 +24,7 @@ export function validateBirth(value: string): string | undefined {
     return ERROR_MESSAGES.birth;
   }
 
-  const [yy, mm, dd] = v.split('-');
+  const [yy, mm, dd] = v.split('.');
   const yearNum = parseInt(yy, 10);
   const monthNum = parseInt(mm, 10);
   const dayNum = parseInt(dd, 10);

src/common/hook/useGoogleAuth.ts

@@ -22,7 +22,9 @@ export const useGoogleAuth = (): UserData | null => {
 
       try {
         const data = await getAccessToken(code);
-        localStorage.setItem('accessToken', data.accessToken);
+        if (data.accessToken) {
+          localStorage.setItem('accessToken', data.accessToken);
+        }
         setUserData(data);
       } catch (error) {
         console.error('로그인 실패:', error);

src/page/history/History.css.ts

@@ -24,8 +24,8 @@ export const titleContainer = style({
 });
 
 export const descriptionContainer = style({
-  marginTop: '2rem',
-  padding: '7.6rem 5rem',
+  marginTop: '2.3rem',
+  padding: '6.7rem 8.6rem',
   backgroundColor: colors.grey2,
   borderRadius: '12px',
   color: colors.grey11,
@@ -37,7 +37,7 @@ export const descriptionContainer = style({
 });
 
 export const streakTrackerWrapper = style({
-  paddingTop: '8rem',
+  paddingTop: '7.7rem',
   paddingBottom: '9.8rem',
 });
 

src/page/history/History.tsx

@@ -5,6 +5,7 @@ import StreakTracker from '@/page/history/StreakTrackerSection/StreakTrackerSect
 import { useGetHistory } from '@/api/domain/history/hook/useGetHistory';
 import { useMandalartId } from '@/common/hook/useMandalartId';
 import Loading from '@/common/component/Loading/Loading';
+import { useAuthStore } from '@/store/useAuthStore';
 
 const STREAK_BANNER_MESSAGE = '작은 실천을 66일 이어가면 나의 목표에 도달합니다';
 const STREAK_DESCRIPTION_MESSAGE = '하루에 하나라도 실천하면 오늘의 점이 찍혀요!';
@@ -14,6 +15,7 @@ const History = () => {
   const mandalartId = useMandalartId();
 
   const { data, isLoading } = useGetHistory(mandalartId);
+  const user = useAuthStore((state) => state.user);
 
   const handleOutsideClick = () => {
     setSelectedDay(null);
@@ -28,7 +30,7 @@ const History = () => {
       <div className={styles.layoutContainer}>
         <h1 className={styles.titleContainer}>{data.title}</h1>
         <p className={styles.descriptionContainer}>
-          김도트님, 목표를 향해 <br />
+          {user.name}님, 목표를 향해 <br />
           <strong className={styles.progressText}>{data.progressDays}</strong>일째 달려가고 있어요
         </p>
         <section className={styles.streakTrackerWrapper}>