feat: 봉사자앱의 마이페이지 UI, msw 연결 (#218)

* feat(volunteer): 마이페이지 ui 추가

* fix(volunteer): 봉사자 마이페이지 정보 조회 api 타입 수정

* feat(volunteer): 봉사자의 마이정보조회 useQuery 훅 추가

* feat(volunteer): 봉사자 마이페이지 msw 연결

* fix(volunteer): 계정정보조회 fetch 훅을 useFetchMyVolunteer hook으로 변경

* remove(volunteer): useFetchAccount hook 삭제

apps/volunteer/src/apis/volunteer.ts

@@ -6,8 +6,8 @@ export type MyInfoResponse = {
   volunteerName: string;
   volunteerBirthDate: string;
   volunteerPhoneNumber: string;
-  volunteerTemperture: number;
-  volunteerCount: number;
+  volunteerTemperature: number;
+  completedVolunteerCount: number;
   volunteerImageUrl: string;
   volunteerGender: 'FEMALE' | 'MALE';
 };

apps/volunteer/src/pages/my/_hooks/useFetchMyVolunteer.ts

@@ -0,0 +1,11 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getMyVolunteerInfo } from '@/apis/volunteer';
+
+const useFetchMyVolunteer = () =>
+  useSuspenseQuery({
+    queryKey: ['myVolunteer'],
+    queryFn: async () => (await getMyVolunteerInfo()).data,
+  });
+
+export default useFetchMyVolunteer;

apps/volunteer/src/pages/my/index.tsx

@@ -1,3 +1,46 @@
+import { Box, Divider, Highlight } from '@chakra-ui/react';
+import Label from 'shared/components/Label';
+import ProfileInfo from 'shared/components/ProfileInfo';
+import Tabs from 'shared/components/Tabs';
+
+import useFetchMyVolunteer from './_hooks/useFetchMyVolunteer';
+
 export default function MyPage() {
-  return <h1>MyPage</h1>;
+  const { data } = useFetchMyVolunteer();
+
+  return (
+    <Box>
+      <ProfileInfo
+        infoImage={data.volunteerImageUrl}
+        infoTitle={data.volunteerName}
+        infoTexts={[data.volunteerEmail, data.volunteerPhoneNumber]}
+      >
+        <Label labelTitle={`${data.volunteerTemperature}℃`} />
+      </ProfileInfo>
+      <Divider />
+      <Box
+        textAlign="center"
+        fontWeight={500}
+        border="1px solid"
+        borderColor="gray.200"
+        borderRadius={10}
+        m={4}
+        mb={25}
+        py={3}
+      >
+        <Highlight
+          query={`${data.completedVolunteerCount}회`}
+          styles={{ color: 'orange.400', fontWeight: 600 }}
+        >
+          {`김프롱 님께서는 봉사를 ${data.completedVolunteerCount}회 완료했어요!`}
+        </Highlight>
+      </Box>
+      <Tabs
+        tabs={[
+          ['신청한 봉사 목록', <Box key={1} minH={500} />],
+          ['작성한 봉사 후기', <Box key={2} minH={500} />],
+        ]}
+      />
+    </Box>
+  );
 }

apps/volunteer/src/pages/settings/account/index.tsx

@@ -19,13 +19,12 @@ import {
   UpdateUserInfoParams,
   updateVolunteerUserInfo,
 } from '@/apis/volunteer';
-
-import useFetchAccount from './_hooks/useFetchAccount';
+import useFetchMyVolunteer from '@/pages/my/_hooks/useFetchMyVolunteer';
 
 export default function SettingsAccountPage() {
   const toast = useToast();
   const [imgFile, setImgFile] = useState<string>('');
-  const { data } = useFetchAccount();
+  const { data } = useFetchMyVolunteer();
   const { mutate: updateAccount } = useMutation({
     mutationFn: (data: UpdateUserInfoParams) => updateVolunteerUserInfo(data),
     onSuccess: () => {
@@ -42,13 +41,13 @@ export default function SettingsAccountPage() {
 
   useEffect(() => {
     reset({
-      name: data.name,
-      imageUrl: data.imageUrl,
-      birthDate: data.birthDate,
-      phoneNumber: data.phoneNumber,
-      gender: data.gender,
+      name: data.volunteerName,
+      imageUrl: data.volunteerImageUrl,
+      birthDate: data.volunteerBirthDate,
+      phoneNumber: data.volunteerPhoneNumber,
+      gender: data.volunteerGender,
     });
-    setImgFile(data.imageUrl);
+    setImgFile(data.volunteerImageUrl);
   }, [data, reset]);
 
   const uploadImgFile = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -61,8 +60,8 @@ export default function SettingsAccountPage() {
 
   const onSubmit = handleSubmit((newData) => {
     updateAccount(newData);
-    // console.log(newData);
   });
+
   return (
     <Box px={4} pb={208}>
       <form onSubmit={onSubmit}>
@@ -90,7 +89,7 @@ export default function SettingsAccountPage() {
             bgColor="gray.100"
             color="gray.500"
             _hover={{ border: `none` }}
-            value={data.email}
+            value={data.volunteerEmail}
           />
         </FormControl>
         <FormControl mb={5} isRequired>