Merge pull request #335 from JEOLLOGA/feat/#333/my

[FEAT] 마이페이지 업데이트

Author: bykbyk0401

src/apis/user/axios.ts

@@ -1,13 +1,13 @@
 import instance from '@apis/instance';
 
-import { OnboardingDataV2, OnboardingResponseV2, UserNicknameResponse } from './type';
+import { OnboardingDataV2, OnboardingResponseV2 } from './type';
 
 export const postOnboardingData = async (data: OnboardingDataV2): Promise<OnboardingResponseV2> => {
   const response = await instance.post<OnboardingResponseV2>('/v2/user/onboarding', data);
   return response.data;
 };
 
 export const getMyPage = async () => {
-  const res = await instance.get('/v2/user/mypage');
+  const res = await instance.get('/v2/user/new-mypage');
   return res.data;
 };

src/apis/user/index.ts

@@ -2,7 +2,7 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 
 import { ApiResponse } from './../response';
 import { getMyPage, postOnboardingData } from './axios';
-import { MyPageType, OnboardingDataV2, OnboardingResponseV2 } from './type';
+import { MyPageResponse, OnboardingDataV2, OnboardingResponseV2 } from './type';
 
 export const usePostOnboardingData = () => {
   return useMutation<OnboardingResponseV2, Error, OnboardingDataV2>({
@@ -11,7 +11,7 @@ export const usePostOnboardingData = () => {
 };
 
 export const useGetMyPage = () => {
-  const { data, isLoading, isError } = useQuery<ApiResponse<MyPageType>>({
+  const { data, isLoading, isError } = useQuery<ApiResponse<MyPageResponse>>({
     queryKey: ['myPage'],
     queryFn: () => getMyPage(),
   });

src/apis/user/type.ts

@@ -23,3 +23,11 @@ export interface MyPageType {
   religion?: string;
   hasExperience?: boolean;
 }
+
+export interface MyPageResponse {
+  type: string | null;
+  typeContent: string | null;
+  nickname: string;
+  email: string;
+  hasType: boolean;
+}

src/app/myPage/myPage.css.ts

@@ -24,3 +24,53 @@ export const modalOverlay = style({
   alignItems: 'center',
   marginTop: '-1.2rem',
 });
+
+export const resultSection = style({
+  marginTop: '3.7rem',
+  marginBottom: '6rem',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});
+
+export const cardWrapper = style({
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+export const profileInfoBox = style({
+  marginTop: '1.2rem',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '0.2rem',
+  marginBottom: '2.4rem',
+});
+
+export const nameRow = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.2rem',
+  ...theme.FONTS.h5Sb16,
+  color: theme.COLORS.black,
+});
+
+export const typeContent = style({
+  color: theme.COLORS.primary600,
+});
+
+export const nickname = style({
+  color: theme.COLORS.black,
+});
+
+export const email = style({
+  ...theme.FONTS.f3R10,
+  color: theme.COLORS.gray7,
+});
+
+export const buttonGroup = style({
+  display: 'flex',
+  gap: '0.9rem',
+  justifyContent: 'center',
+  width: '100%',
+});

src/app/myPage/page.tsx

@@ -1,27 +1,65 @@
 'use client';
 import { usePostLogout, usePostWithdraw } from '@apis/auth';
 import { useGetMyPage } from '@apis/user';
+import PopupBtn from '@components/common/button/popupBtn/PopupBtn';
 import ModalContainer from '@components/common/modal/ModalContainer';
 import PageName from '@components/common/pageName/PageName';
 import ExceptLayout from '@components/except/exceptLayout/ExceptLayout';
 import Footer from '@components/footer/Footer';
+import ResultCard from '@components/test/resultCard/ResultCard';
 import UserInfo from '@components/userInfo/userInfo';
+import { TestType } from '@constants/test';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import useEventLogger from 'src/gtm/hooks/useEventLogger';
 
 import * as styles from './myPage.css';
 
+// const MOCK_USER_DATA_DONE = {
+//   type: 'IAJ',
+//   typeContent: '잔잔한 호수형 목탁이',
+//   nickname: '배영경',
+//   email: 'jjeolloga@gmail.com',
+//   hasType: true,
+// };
+
+// const MOCK_USER_DATA_NONE = {
+//   type: null,
+//   typeContent: null,
+//   nickname: '배영경',
+//   email: 'jjeolloga@gmail.com',
+//   hasType: false,
+// };
+
 const MyPage = () => {
+  const router = useRouter();
   const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
+  // const userData = MOCK_USER_DATA_DONE;
+  // const userData = MOCK_USER_DATA_NONE;
+
   const postLogout = usePostLogout();
   const postWithdraw = usePostWithdraw();
 
   const { data, isLoading, isError } = useGetMyPage();
+  const userData = data?.data;
 
   const { logClickEvent } = useEventLogger('my');
 
+  const handleGoToTest = () => {
+    router.push('/test');
+  };
+
+  const handleRecommend = () => {
+    router.push('/');
+    // router.push('/curation');
+  };
+
+  const handleReTest = () => {
+    router.push('/test');
+  };
+
   const handleLogoutClick = () => {
     setIsLogoutModalOpen(true);
 
@@ -68,10 +106,42 @@ const MyPage = () => {
     return <ExceptLayout type="networkError" />;
   }
 
+  if (!userData) {
+    return <ExceptLayout type="networkError" />;
+  }
+
   return (
     <div className={styles.myPageWrapper}>
       <div className={styles.userInfoContainer}>
         <PageName title="마이페이지" />
+
+        <section className={styles.resultSection}>
+          <div className={styles.cardWrapper}>
+            <ResultCard color="NONE" type={(userData.type as TestType) || undefined} />
+          </div>
+
+          <div className={styles.profileInfoBox}>
+            <p className={styles.nameRow}>
+              {userData.hasType && (
+                <span className={styles.typeContent}>{userData.typeContent}</span>
+              )}
+              <span className={styles.nickname}>{userData.nickname}</span> 님
+            </p>
+            <p className={styles.email}>{userData.email}</p>
+          </div>
+
+          <div className={styles.buttonGroup}>
+            {userData.hasType ? (
+              <>
+                <PopupBtn color="green" label="절 추천받기" onClick={handleRecommend} />
+                <PopupBtn color="gray" label="테스트 다시하기" onClick={handleReTest} />
+              </>
+            ) : (
+              <PopupBtn color="green" label="성향 테스트하기" onClick={handleGoToTest} />
+            )}
+          </div>
+        </section>
+
         <UserInfo
           data={data?.data}
           onLogoutClick={handleLogoutClick}

src/components/userInfo/userInfo.tsx

@@ -3,9 +3,6 @@ import useEventLogger from 'src/gtm/hooks/useEventLogger';
 import infoContainerStyle from './userInfo.css';
 import AccountActions from './userInfoContent/accountAction/AccountAction';
 import HelpSection from './userInfoContent/helpContent/HelpContent';
-import TopInfo from './userInfoContent/nameContent/NameContent';
-import MemberInfo from './userInfoContent/userDetailInfo.tsx/UserDetailInfo';
-import UserInfoSection from './userInfoContent/userInfoSection/userInfoSection';
 
 interface UserInfoProps {
   data?: {
@@ -37,17 +34,7 @@ const UserInfo = ({ data, onLogoutClick, onDeleteClick }: UserInfoProps) => {
 
   return (
     <div className={infoContainerStyle}>
-      <TopInfo nickname={data.nickname} email={data.email} />
-      <UserInfoSection title="회원정보">
-        <MemberInfo
-          ageRange={data.ageRange || '정보 없음'}
-          gender={data.gender || '정보 없음'}
-          religion={data.religion || '정보 없음'}
-        />
-      </UserInfoSection>
-      <UserInfoSection title="도움말">
-        <HelpSection onNoticeClick={handleNoticeClick} onQuestionClick={handleQuestionClick} />
-      </UserInfoSection>
+      <HelpSection onNoticeClick={handleNoticeClick} onQuestionClick={handleQuestionClick} />
       <AccountActions onLogoutClick={onLogoutClick} onDeleteClick={onDeleteClick} />
     </div>
   );