feat: 계정정보수정 (봉사자, 보호소) msw 연결 (#167)

* feat(shelter): 계정정보수정 msw mock 데이터 * fix(shelter): 보호소 정보 msw handler shelterImageUrl 수정 * feat(shelter): shelterInfo 수정 타입 추가 * fix(shelter): 계정정보수정API request 타입 수정 * feat(shelter): 보호소계정정보 useQuery 추가 * feat(shelter): 보호소 계정정보 조회 msw 연결 * feat(shelter): 계정정보 수정 mutation 추가 * fix(shelter): msw 계정정보수정 handler HttpResponse 수정 * design(shelter): button 의 hover, active background 수정 * fix(volunteer): api MyInfoResponse, UpdateUserInfoParams 타입 수정 * feat(volunteer): 봉사자계정정보 fetch hook 추가 * feat(volunteer): get 봉사자정보 msw handler 추가 * feat(volunteer): 봉사자 계정정보 조회 msw 연결 * design(volunteer): button 태그 hover, active 일때 background 제거 * fix(volunteer): volunteergender 타입 수정 * feat(volunteer): 계정정보수정 useMutation 추가 * feat(volunteer): 계정정보수정 patch msw 추가 * fix(volunteer): 계정정보조회 useQuery 의 select 메소드 타입 지정
anifriends · Nov 27, 2023 · cacde57 · cacde57
1 parent cf111b8
commit cacde57
Show file tree

Hide file tree

Showing 10 changed files with 239 additions and 29 deletions.
diff --git a/apps/shelter/src/apis/shelter.ts b/apps/shelter/src/apis/shelter.ts
@@ -1,6 +1,6 @@
 import axiosInstance from 'shared/apis/axiosInstance';
 
-import { ShelterInfo } from '@/types/apis/shetler';
+import { ShelterInfo, UpdateShelterInfo } from '@/types/apis/shetler';
 
 type PasswordUpdateParams = {
   newPassword: string;
@@ -15,8 +15,8 @@ type PageParams = {
 export const getShelterInfoAPI = () =>
   axiosInstance.get<ShelterInfo>('/shelters/me');
 
-export const updateShelterInfo = (shelterInfo: ShelterInfo) =>
-  axiosInstance.patch<unknown, ShelterInfo>('/shelters/me', shelterInfo);
+export const updateShelterInfo = (shelterInfo: UpdateShelterInfo) =>
+  axiosInstance.patch<unknown, UpdateShelterInfo>('/shelters/me', shelterInfo);
 
 export const updatePassword = (passwordUpdateParams: PasswordUpdateParams) =>
   axiosInstance.patch<unknown, PasswordUpdateParams>(

diff --git a/apps/shelter/src/mocks/handlers/shelter.ts b/apps/shelter/src/mocks/handlers/shelter.ts
@@ -22,7 +22,7 @@ export const handlers = [
         shelterId: 1,
         shelterEmail: '[email protected]',
         shelterName: '양천구 보호소',
-        imageUrl: null,
+        shelterImageUrl: 'https://source.unsplash.com/random/?animal',
         shelterAddress: '서울특별시 양천구',
         shelterAddressDetail: '서울특별시 양천구 신월동 동자빌딩',
         shelterPhoneNumber: '010-1234-5678',
@@ -49,4 +49,8 @@ export const handlers = [
       { status: 200 },
     );
   }),
+  http.patch('/shelters/me', async () => {
+    await delay(200);
+    return new HttpResponse(null, { status: 204 });
+  }),
 ];
diff --git a/apps/shelter/src/pages/settings/account/_hooks/useFetchShelterAccount.ts b/apps/shelter/src/pages/settings/account/_hooks/useFetchShelterAccount.ts
@@ -0,0 +1,35 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getShelterInfoAPI } from '@/apis/shelter';
+
+const useFethShelterAccount = () => {
+  return useQuery({
+    queryKey: ['shelter', 'account'],
+    queryFn: async () => (await getShelterInfoAPI()).data,
+    select: (data) => {
+      return {
+        imageUrl: data.shelterImageUrl,
+        email: data.shelterEmail,
+        name: data.shelterName,
+        address: data.shelterAddress,
+        addressDetail: data.shelterAddressDetail,
+        phoneNumber: data.shelterPhoneNumber,
+        sparePhoneNumber: data.shelterSparePhoneNumber,
+        isOpenedAddress: data.shelterIsOpenedAddress,
+      };
+    },
+    initialData: {
+      shelterId: 1,
+      shelterImageUrl: '',
+      shelterEmail: '',
+      shelterName: '',
+      shelterAddress: '',
+      shelterAddressDetail: '',
+      shelterPhoneNumber: '',
+      shelterSparePhoneNumber: '',
+      shelterIsOpenedAddress: false,
+    },
+  });
+};
+
+export default useFethShelterAccount;
diff --git a/apps/shelter/src/pages/settings/account/index.tsx b/apps/shelter/src/pages/settings/account/index.tsx
@@ -8,11 +8,43 @@ import {
   HStack,
   Input,
   Switch,
+  useToast,
 } from '@chakra-ui/react';
-import { useState } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { updateShelterInfo } from '@/apis/shelter';
+import { UpdateShelterInfo } from '@/types/apis/shetler';
+
+import useFetchShelterAccount from './_hooks/useFetchShelterAccount';
 
 export default function SettingsAccountPage() {
+  const toast = useToast();
   const [imgFile, setImgFile] = useState<string>('');
+  const { data } = useFetchShelterAccount();
+  const { mutate: updateShelter } = useMutation({
+    mutationFn: (data: UpdateShelterInfo) => updateShelterInfo(data),
+    onSuccess: () => {
+      toast({
+        position: 'top',
+        description: '계정 정보가 수정되었습니다.',
+        status: 'success',
+        duration: 1500,
+      });
+    },
+  });
+
+  const { register, handleSubmit, reset, watch } = useForm<UpdateShelterInfo>();
+
+  useEffect(() => {
+    reset(data);
+    setImgFile(data.imageUrl);
+  }, [data]);
+
+  const onSubmit = handleSubmit((newData) => {
+    updateShelter(newData);
+  });
 
   const uploadImgFile = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -24,7 +56,7 @@ export default function SettingsAccountPage() {
 
   return (
     <Box px={4} pb={193}>
-      <form>
+      <form onSubmit={onSubmit}>
         <Center py={30}>
           <FormLabel htmlFor="fileInput" cursor="pointer" fontWeight={400} />
           <Avatar
@@ -39,7 +71,7 @@ export default function SettingsAccountPage() {
             type="file"
             accept="image/*"
             display="none"
-            onChange={uploadImgFile}
+            {...register('imageUrl', { onChange: uploadImgFile })}
           />
         </Center>
 
@@ -50,17 +82,21 @@ export default function SettingsAccountPage() {
             bgColor="gray.100"
             color="gray.500"
             _hover={{ border: 'none' }}
+            value={data.email}
           />
         </FormControl>
 
         <FormControl mb={5} isRequired>
           <FormLabel fontWeight={400}>보호소 이름</FormLabel>
-          <Input placeholder="이름을 입력하세요" />
+          <Input placeholder="이름을 입력하세요" {...register('name')} />
         </FormControl>
 
         <FormControl mb={5} isRequired>
           <FormLabel fontWeight={400}>보호소 주소</FormLabel>
-          <Input placeholder="보호소 주소를 입력해주세요" />
+          <Input
+            placeholder="보호소 주소를 입력해주세요"
+            {...register('address')}
+          />
         </FormControl>
 
         <FormControl mb={5} isRequired>
@@ -78,20 +114,35 @@ export default function SettingsAccountPage() {
               >
                 상세주소 공개
               </FormLabel>
-              <Switch colorScheme="orange" />
+              <Switch
+                colorScheme="orange"
+                isChecked={watch('isOpenedAddress')}
+                {...register('isOpenedAddress')}
+              />
             </FormControl>
           </HStack>
-          <Input placeholder="보호소 상세 주소를 입력해주세요" />
+          <Input
+            placeholder="보호소 상세 주소를 입력해주세요"
+            {...register('addressDetail')}
+          />
         </FormControl>
 
         <FormControl mb={5} isRequired>
           <FormLabel fontWeight={400}>보호소 전화번호</FormLabel>
-          <Input type="tel" placeholder="전화번호를 입력하세요" />
+          <Input
+            type="tel"
+            placeholder="전화번호를 입력하세요"
+            {...register('phoneNumber')}
+          />
         </FormControl>
 
         <FormControl mb={5} isRequired>
           <FormLabel fontWeight={400}>보호소 임시 전화번호</FormLabel>
-          <Input type="tel" placeholder="전화번호를 입력하세요" />
+          <Input
+            type="tel"
+            placeholder="전화번호를 입력하세요"
+            {...register('sparePhoneNumber')}
+          />
         </FormControl>
         <Center>
           <Button
@@ -102,6 +153,8 @@ export default function SettingsAccountPage() {
             bottom={21}
             bgColor="orange.400"
             color="white"
+            _active={{ bg: undefined }}
+            _hover={{ bg: undefined }}
           >
             수정완료
           </Button>

diff --git a/apps/shelter/src/types/apis/shetler.ts b/apps/shelter/src/types/apis/shetler.ts
@@ -9,3 +9,13 @@ export type ShelterInfo = {
   shelterSparePhoneNumber: string;
   shelterIsOpenedAddress: boolean;
 };
+
+export type UpdateShelterInfo = {
+  imageUrl?: string;
+  name: string;
+  address: string;
+  addressDetail: string;
+  phoneNumber: string;
+  sparePhoneNumber: string;
+  isOpenedAddress: boolean;
+};
diff --git a/apps/volunteer/src/apis/volunteer.ts b/apps/volunteer/src/apis/volunteer.ts
@@ -1,15 +1,15 @@
 import axiosInstance from 'shared/apis/axiosInstance';
 
-type MyInfoResponse = {
-  volunteerId: string;
+export type MyInfoResponse = {
+  volunteerId: number;
   volunteerEmail: string;
   volunteerName: string;
   volunteerBirthDate: string;
   volunteerPhoneNumber: string;
   volunteerTemperture: number;
   volunteerCount: number;
   volunteerImageUrl: string;
-  volunteerGender: 'FEMAIL' | 'MALE';
+  volunteerGender: 'FEMALE' | 'MALE';
 };
 
 export const getMyVolunteerInfo = () =>
@@ -29,10 +29,10 @@ export const updateVolunteerPassword = (
   );
 };
 
-type UpdateUserInfoParams = {
+export type UpdateUserInfoParams = {
   name: string;
-  gender: string;
-  birthData: string;
+  gender: 'FEMALE' | 'MALE';
+  birthDate: string;
   phoneNumber: string;
   imageUrl: string;
 };

diff --git a/apps/volunteer/src/mocks/browser.ts b/apps/volunteer/src/mocks/browser.ts
@@ -2,5 +2,6 @@ import { setupWorker } from 'msw/browser';
 
 import { handlers as authHandlers } from './handlers/auth';
 import { handlers as recruitmentHandler } from './handlers/recruitment';
+import { handlers as volunteerHandlers } from './handlers/volunteer';
 
-export const worker = setupWorker(...authHandlers, ...recruitmentHandler);
+export const worker = setupWorker(...authHandlers, ...recruitmentHandler, ...volunteerHandlers );
diff --git a/apps/volunteer/src/mocks/handlers/volunteer.ts b/apps/volunteer/src/mocks/handlers/volunteer.ts
@@ -0,0 +1,23 @@
+import { delay, http, HttpResponse } from 'msw';
+
+export const handlers = [
+  http.get('/volunteers/me', async () => {
+    await delay(200);
+    return HttpResponse.json({
+      volunteerId: 1,
+      volunteerEmail: '[email protected]',
+      volunteerName: '김프롱',
+      volunteerBirthDate: '2023-03-16',
+      volunteerPhoneNumber: '010-1234-5678',
+      volunteerTemperature: 32,
+      completedVolunteerCount: 3,
+      volunteerImageUrl: 'https://source.unsplash.com/random',
+      volunteerGender: 'FEMALE',
+    });
+  }),
+  http.patch('/volunteers/me', async ({ request }) => {
+    const updateVolunteer = await request.json();
+    console.log(updateVolunteer);
+    return new HttpResponse(null, { status: 204 });
+  }),
+];
diff --git a/apps/volunteer/src/pages/settings/account/_hooks/useFetchAccount.ts b/apps/volunteer/src/pages/settings/account/_hooks/useFetchAccount.ts
@@ -0,0 +1,32 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getMyVolunteerInfo, MyInfoResponse } from '@/apis/volunteer';
+
+const useFetchAccount = () =>
+  useQuery({
+    queryKey: ['volunteer', 'account'],
+    queryFn: async () => (await getMyVolunteerInfo()).data,
+    select: (data: MyInfoResponse) => {
+      return {
+        imageUrl: data.volunteerImageUrl,
+        email: data.volunteerEmail,
+        name: data.volunteerName,
+        birthDate: data.volunteerBirthDate,
+        phoneNumber: data.volunteerPhoneNumber,
+        gender: data.volunteerGender,
+      };
+    },
+    initialData: {
+      volunteerId: 1,
+      volunteerEmail: '',
+      volunteerName: '',
+      volunteerBirthDate: '',
+      volunteerPhoneNumber: '',
+      volunteerTemperture: 36,
+      volunteerCount: 0,
+      volunteerImageUrl: '',
+      volunteerGender: 'MALE',
+    },
+  });
+
+export default useFetchAccount;