feat: add profile email property

src/components/profile-setting/index.test.tsx

@@ -4,14 +4,23 @@ import { renderWithProviders } from '@/utils/testHelper';
 
 import ProfileSetting from './index';
 
+jest.mock('@/hooks/api/useGetMyProfile', () => jest.fn(() => ({
+  isLoading: false,
+  data: {
+    userName: 'Test POPO',
+    schoolName: '포포 고등학교',
+    grade: 1,
+    email: '[email protected]',
+  },
+})));
+
 describe('ProfileSetting', () => {
   const renderProfileSetting = () => renderWithProviders(<ProfileSetting />);
 
   it('프로필 정보를 화면에 보여준다.', () => {
     renderProfileSetting();
 
     expect(screen.getByDisplayValue('Test POPO')).toBeInTheDocument();
-    expect(screen.getByDisplayValue('18세')).toBeInTheDocument();
     expect(screen.getByDisplayValue('포포 고등학교')).toBeInTheDocument();
     expect(screen.getByDisplayValue('1학년')).toBeInTheDocument();
     expect(screen.getByDisplayValue('[email protected]')).toBeInTheDocument();

src/components/profile-setting/index.tsx

@@ -1,18 +1,29 @@
 import styled from 'styled-components';
 
 import TextField from '@/components/common/TextField';
-import fixtures from '@/fixtures';
+import useGetMyProfile from '@/hooks/api/useGetMyProfile';
+
+import FixedSpinner from '../common/FixedSpinner';
+import LoadingHandler from '../common/LoadingHandler';
 
 export default function ProfileSetting() {
-  const { profile } = fixtures;
+  const {
+    isLoading, data = {
+      userName: '',
+      schoolName: '',
+      grade: 0,
+      email: '',
+    },
+  } = useGetMyProfile();
 
   return (
     <Container>
-      <TextField label="이름" value={profile.userName} readOnly />
-      <TextField label="나이" value="18세" readOnly />
-      <TextField label="학교" value={profile.schoolName} readOnly />
-      <TextField label="학년" value={`${profile.grade}학년`} readOnly />
-      <TextField label="이메일" value="[email protected]" readOnly />
+      <LoadingHandler isLoading={isLoading || !data} loadingComponent={<FixedSpinner type="normal" />}>
+        <TextField label="이름" value={data.userName} readOnly key="userName" />
+        <TextField label="학교" value={data.schoolName} readOnly key="schoolName" />
+        <TextField label="학년" value={`${data.grade}학년`} readOnly key="grade" />
+        <TextField label="이메일" value={data.email} readOnly />
+      </LoadingHandler>
     </Container>
   );
 }

src/components/profile/index.tsx

@@ -15,12 +15,10 @@ export default function Profile() {
   return (
     <Container>
       <LoadingHandler isLoading={isLoading || !data} loadingComponent={<FixedSpinner type="normal" />}>
-        <>
-          <ProfileHeader />
-          <ProfileInfo data={data as ProfileType} />
-          <GrayBar data-testid="graybar" />
-          <InviteFriends />
-        </>
+        <ProfileHeader />
+        <ProfileInfo data={data as ProfileType} />
+        <GrayBar data-testid="graybar" />
+        <InviteFriends />
       </LoadingHandler>
     </Container>
   );

src/types/ProfileType.ts

@@ -11,6 +11,7 @@ type ProfileType = {
   reward: number,
   gender: Gender,
   profileImageUrl: string,
+  email: string,
 };
 
 export default ProfileType;