추후 업데이트 기능 안내 토스트 (#463)

* feat: 내 정보 수정 토스트 추가

* feat: 전체 메뉴 페이지 토스트 추가

* fix: 제공되지 않는 기능 색상 흐리게

src/pages/AllServicesPage/AllServicesPage.tsx

@@ -26,7 +26,7 @@ import { MenuItem } from './components/MenuItem';
 import { useAllServicesPage } from './hooks/useAllServicesPage';
 
 export const AllServicesPage = () => {
-  const { myId, moveToPage, logout } = useAllServicesPage();
+  const { myId, moveToPage, logout, toastNextUpdate } = useAllServicesPage();
 
   return (
     <AllServicesContainer>
@@ -67,6 +67,7 @@ export const AllServicesPage = () => {
           <MenuItem
             icon={<Social />}
             color={theme.PALETTE.GRAY_300}
+            onClickMenuItem={toastNextUpdate}
             pageName="소셜링"
           />
         </FieldContainer>

src/pages/AllServicesPage/hooks/useAllServicesPage.ts

@@ -1,3 +1,4 @@
+import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
 import { axiosInstance } from '@api/axiosInstance';
@@ -27,9 +28,16 @@ export const useAllServicesPage = () => {
     }
   };
 
+  const toastNextUpdate = () => {
+    toast('차후에 업데이트될 기능입니다!', {
+      icon: '👏',
+    });
+  };
+
   return {
     moveToPage,
     logout,
+    toastNextUpdate,
     myId,
   };
 };

src/pages/ProfilePage/components/Profile.tsx

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import toast from 'react-hot-toast';
 
 import { Avatar } from '@components/Avatar';
 import { Button } from '@components/shared/Button';
@@ -11,8 +10,6 @@ import { theme } from '@styles/theme';
 
 import { Member } from '@type/models';
 
-import { PATH_NAME } from '@constants/pathName';
-
 import Social from '@assets/follow.svg?react';
 import HandHeart from '@assets/handHeart.svg?react';
 import Heart from '@assets/heart.svg?react';
@@ -58,11 +55,11 @@ export const Profile = ({ memberId }: ProfileProps) => {
     myId,
     profile,
     isHeartClicked,
+    toastNextUpdate,
     handleClickHeart,
     handleClickChattingButton,
     handleClickPosition,
     handleClickCrew,
-    moveToPage,
   } = useProfile({ memberId });
 
   return (
@@ -103,18 +100,18 @@ export const Profile = ({ memberId }: ProfileProps) => {
             text="팔로우"
             icon={<Social />}
             count={0}
-            onClick={handleClickFollow}
+            onClick={toastNextUpdate}
           />
         </Flex>
         {myId === memberId ? (
           <EventButton
             text="내 정보 수정"
             width="100%"
-            onClick={() => moveToPage(PATH_NAME.PROFILE_UPDATE)}
+            onClick={toastNextUpdate}
           />
         ) : (
           <Flex justify="center" gap={10}>
-            <EventButton text="팔로우" onClick={handleClickFollow} />
+            <EventButton text="팔로우" onClick={toastNextUpdate} />
             <EventButton text="대화하기" onClick={handleClickChattingButton} />
           </Flex>
         )}
@@ -205,9 +202,3 @@ const NumberedItem = ({
     </PointerFlex>
   );
 };
-
-const handleClickFollow = () => {
-  toast('차후에 업데이트될 기능입니다!', {
-    icon: '👏',
-  });
-};

src/pages/ProfilePage/hooks/useProfile.ts

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
 import { useMemberProfileQuery } from '@hooks/member/useMemberProfileQuery';
@@ -44,14 +45,20 @@ export const useProfile = ({ memberId }: ProfileProps) => {
 
   const { handleClickPosition } = usePositionToast();
 
+  const toastNextUpdate = () => {
+    toast('차후에 업데이트될 기능입니다!', {
+      icon: '👏',
+    });
+  };
+
   return {
     myId,
     profile,
     isHeartClicked,
+    toastNextUpdate,
     handleClickHeart,
     handleClickChattingButton,
     handleClickPosition,
     handleClickCrew,
-    moveToPage,
   };
 };