refactor: 계정정보수정페이지 수정, 보호소앱의 보호소 마이페이지 수정 (#301)

* feat(volunteer): queryClient staleTime 5000 변경

* fix(volunteer): 봉사자 계정정보 수정된 경우 캐싱된 데이터 수정

* refactor(shelter): 보호소 정보 Fetch 훅 수정

* refactor(shelter): 보호소 마이페이지 수정

* fix(shelter): 보호소 계정정보 수정, validation 추가

* feat(shelter): suspense 추가

* fix(shelter): conflict 해결

apps/shelter/src/pages/my/_hooks/useFetchShelterProfile.ts

@@ -0,0 +1,52 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getShelterInfoAPI } from '@/apis/shelter';
+import { ShelterInfo } from '@/types/apis/shetler';
+
+type ShelterProfile = {
+  shelterId: number;
+  imageUrl: string;
+  name: string;
+  email: string;
+  phoneNumber: string;
+  sparePhoneNumber: string;
+  address: string;
+  addressDetail: string;
+  isOpenedAddress: boolean;
+};
+
+const createProfile = (response: ShelterInfo): ShelterProfile => {
+  const {
+    shelterId,
+    shelterImageUrl,
+    shelterName,
+    shelterEmail,
+    shelterPhoneNumber,
+    shelterSparePhoneNumber,
+    shelterAddress,
+    shelterAddressDetail,
+    shelterIsOpenedAddress,
+  } = response;
+  return {
+    shelterId,
+    imageUrl: shelterImageUrl,
+    name: shelterName,
+    email: shelterEmail,
+    phoneNumber: shelterPhoneNumber,
+    sparePhoneNumber: shelterSparePhoneNumber,
+    address: shelterAddress,
+    addressDetail: shelterAddressDetail,
+    isOpenedAddress: shelterIsOpenedAddress,
+  };
+};
+
+const useFetchShelterProfile = () =>
+  useSuspenseQuery({
+    queryKey: ['shelterProfile'],
+    queryFn: async () => {
+      const response = (await getShelterInfoAPI()).data;
+      return createProfile(response);
+    },
+  });
+
+export default useFetchShelterProfile;

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

@@ -1,4 +1,6 @@
 import { Box, Divider, Switch, useToast, VStack } from '@chakra-ui/react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { ChangeEvent, Suspense, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import InfoItem from 'shared/components/InfoItem';
 import InfoList from 'shared/components/InfoList';
@@ -9,20 +11,45 @@ import APP_TYPE from 'shared/constants/appType';
 import useAuthStore from 'shared/store/authStore';
 import { removeItemFromStorage } from 'shared/utils/localStorage';
 
-import { useMyPage } from '@/pages/my/_hooks/useMyPage';
+import { updateAddressStatusAPI } from '@/apis/shelter';
+import { ShelterInfo } from '@/types/apis/shetler';
 
-export default function MyPage() {
+import useFetchMyShelter from './_hooks/useFetchShelterProfile';
+
+function ShelterMy() {
   const navigate = useNavigate();
   const { setUser } = useAuthStore();
-  const { shelterProfile, isAddressPublic, updateAddressStatus } = useMyPage();
   const toast = useToast();
 
-  if (!shelterProfile) {
-    return null;
-  }
+  const {
+    imageUrl,
+    name,
+    email,
+    phoneNumber,
+    sparePhoneNumber,
+    address,
+    addressDetail,
+    isOpenedAddress,
+  } = useFetchMyShelter().data;
+
+  const [isAddressPublic, setIsAddressPublic] = useState(isOpenedAddress);
+  const queryClient = useQueryClient();
 
-  const { shelterName, email, phoneNumber, sparePhoneNumber, shelterAddress } =
-    shelterProfile;
+  const { mutate: updateAddress } = useMutation({
+    mutationFn: async (updatedAddress: boolean) =>
+      updateAddressStatusAPI(updatedAddress),
+    onSuccess: (_, updatedAddress) => {
+      setIsAddressPublic(updatedAddress);
+      queryClient.setQueryData(['shelterProfile'], (data: ShelterInfo) => ({
+        ...data,
+        isOpenedAddress: updatedAddress,
+      }));
+    },
+  });
+
+  const updateAddressStatus = (e: ChangeEvent<HTMLInputElement>) => {
+    updateAddress(e.target.checked);
+  };
 
   const goShelterReview = () => navigate('/mypage/reviews');
   const goSettingsAccount = () => navigate('/settings/account');
@@ -40,13 +67,17 @@ export default function MyPage() {
   };
 
   return (
-    <Box pb="50px">
-      <ProfileInfo infoTitle={shelterName} infoTexts={[email]} />
+    <Box>
+      <ProfileInfo
+        infoImage={imageUrl}
+        infoTitle={name}
+        infoTexts={[email, address]}
+      />
       <Divider />
       <InfoList py={4}>
         <InfoTextItem title="전화번호" content={phoneNumber} />
         <InfoTextItem title="전화번호(임시)" content={sparePhoneNumber} />
-        <InfoTextItem title="상세주소" content={shelterAddress} />
+        <InfoTextItem title="상세주소" content={addressDetail} />
         <InfoItem title="상세주소 공개">
           <Switch
             size="sm"
@@ -68,6 +99,7 @@ export default function MyPage() {
           settingItems={[
             { itemTitle: '계정 정보 수정하기', onClick: goSettingsAccount },
             { itemTitle: '비밀번호 변경하기', onClick: goSettingsPassword },
+            { itemTitle: '로그아웃하기', onClick: goSettingsPassword },
           ]}
         />
         <SettingGroup
@@ -78,3 +110,11 @@ export default function MyPage() {
     </Box>
   );
 }
+
+export default function MyPage() {
+  return (
+    <Suspense fallback="로딩중">
+      <ShelterMy />
+    </Suspense>
+  );
+}