[Feat/#151] 사용자 정보(이름, 이메일) 조회 API 연결

src/apis/instance.ts

@@ -5,7 +5,7 @@ import { BASE_URL } from '@constants';
 export const instance = axios.create({
   baseURL: BASE_URL,
 
-  withCredentials: false,
+  withCredentials: true,
 });
 
 export function get<T>(...args: Parameters<typeof instance.get>) {

src/apis/myPage/useFetchUser.ts

@@ -0,0 +1,26 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { instance } from '@apis/instance';
+
+import { END_POINT, queryKey } from '@constants';
+
+import { ApiResponseType, UserResponse } from '@types';
+
+const fetchUser = async (): Promise<UserResponse> => {
+  try {
+    const response = await instance.get<ApiResponseType<UserResponse>>(
+      END_POINT.FETCH_USER
+    );
+    return response.data.data;
+  } catch (error) {
+    console.log(error);
+    throw error;
+  }
+};
+
+export const useFetchUser = () => {
+  return useSuspenseQuery({
+    queryKey: [queryKey.USER],
+    queryFn: fetchUser,
+  });
+};

src/constants/apis/api.ts

@@ -5,4 +5,5 @@ export const END_POINT = {
   FETCH_STORE_COORDINATE_LIST: (station: string) =>
     `/api/v1/store/coordinate-list?station=${station}`,
   KAKAO_LOGIN: '/api/v1/user/login',
+  FETCH_USER: '/api/v1/user',
 } as const;

src/constants/apis/queryKey.ts

@@ -2,4 +2,5 @@ export const queryKey = {
   STORE_RANK: 'storeRank',
   STORE_COORDINATE_LIST: 'storeCoordinateList',
   KAKAO_LOGIN: 'kakaoLogin',
+  USER: 'user',
 } as const;

src/pages/myPage/page/Mypage/MyPage.tsx

@@ -1,22 +1,19 @@
+import { useFetchUser } from '@apis/myPage/useFetchUser';
+
 import { AuthModal, Modal, TextButton } from '@components';
 import { WHIPEE_CONTACT_FORM } from '@constants';
 import { useEasyNavigate, useModal } from '@hooks';
 import { LetsGoButton, ProfileCard } from '@pages/myPage/components';
+import { isLoggedIn } from '@utils';
 
 import {
   letsGoButtonWrapper,
   loginButton,
   profileCardStyle,
 } from './MyPage.css';
 
-const user = {
-  userId: 1,
-  userName: '쥬먐이',
-  userEmail: '[email protected]',
-};
-
 const MyPage = () => {
-  const isLogin = true; //추후 삭제 후 localStorage.getItem로 수정할 예정
+  const isLogin = isLoggedIn();
 
   const { isModalOpen, openModal, closeModal } = useModal();
 
@@ -26,13 +23,15 @@ const MyPage = () => {
     window.open(WHIPEE_CONTACT_FORM, '_blank');
   };
 
+  const { data: userData } = useFetchUser();
+
   return (
     <>
       <section className={profileCardStyle[isLogin ? 'login' : 'logout']}>
         <ProfileCard
           isLogin={isLogin}
-          userName={user.userName}
-          userEmail={user.userEmail}
+          userName={userData.userName}
+          userEmail={userData.userEmail}
         />
       </section>
 

src/types/apis/myPage/index.ts

@@ -0,0 +1,4 @@
+export interface UserResponse {
+  userName: string;
+  userEmail: string;
+}