fix: 유저 차단 여부에 따른 차단하기, 차단해제 워딩 및 메서드 수정

pickly-team · Jul 25, 2023 · 10b79d8 · 10b79d8
1 parent c633c6b
commit 10b79d8
Showing 1 changed file with 27 additions and 7 deletions.
diff --git a/src/pages/FriendBookmarkPage.tsx b/src/pages/FriendBookmarkPage.tsx
@@ -13,18 +13,26 @@ import IconButton from '@/common/ui/IconButton';
 import {
   useGETFriendProfileQuery,
   usePOSTBlockMemberQuery,
+  useUnblockUserQuery,
 } from '@/members/api/member';
 import useAuthStore from '@/store/auth';
 import BookmarkListView from '@/bookmarks/ui/Main/BookmarkListView';
-import { Suspense } from 'react';
+import { Suspense, useEffect } from 'react';
 import SkeletonWrapper from '@/common-ui/SkeletonWrapper';
 import BookmarkSkeletonItem from '@/bookmarks/ui/Main/BookmarkSkeletonItem';
+import useFriendStore from '@/store/friend';
 
 const FriendBookmarkPage = () => {
   // FIRST RENDER
   const { memberId } = useAuthStore();
   const { id: friendId } = useParams<{ id: string }>();
 
+  const { setFriendId } = useFriendStore();
+
+  useEffect(() => {
+    setFriendId(Number(friendId));
+  }, [friendId]);
+
   // SERVER
   // 1. 친구 프로필 조회
   const { data: profileInfo } = useGETFriendProfileQuery({
@@ -38,6 +46,10 @@ const FriendBookmarkPage = () => {
   const onClick_차단하기 = () => {
     postBlockMember({ blockeeId: Number(friendId), blockerId: memberId });
   };
+  const { mutate: deleteUnBlockMember } = useUnblockUserQuery({ memberId });
+  const onClick_차단해제 = () => {
+    deleteUnBlockMember({ blockeeId: Number(friendId), blockerId: memberId });
+  };
 
   // 2. 카테고리 선택
   const { selectedCategoryId, categoryOptions, onChangeCategory } = useCategory(
@@ -59,21 +71,29 @@ const FriendBookmarkPage = () => {
               as={<IconButton onClick={() => {}} name="more" size="s" />}
             />
             <TriggerBottomSheet.BottomSheet>
-              <TriggerBottomSheet.Item onClick={onClick_차단하기}>
-                차단하기
-              </TriggerBottomSheet.Item>
+              {!!profileInfo?.isBlocked && (
+                <TriggerBottomSheet.Item onClick={onClick_차단해제}>
+                  차단해제
+                </TriggerBottomSheet.Item>
+              )}
+              {!profileInfo?.isBlocked && (
+                <TriggerBottomSheet.Item onClick={onClick_차단하기}>
+                  차단하기
+                </TriggerBottomSheet.Item>
+              )}
             </TriggerBottomSheet.BottomSheet>
           </TriggerBottomSheet>
         }
       />
       <LTop>
         <BookmarkUserInfo
-          userEmoji={profileInfo?.profileEmoji || ''}
-          userName={profileInfo?.nickname || ''}
+          userEmoji={profileInfo?.profileEmoji ?? ''}
+          userName={profileInfo?.nickname ?? ''}
           isFriendPage={{
-            isFollowing: profileInfo?.isFollowing || false,
+            isFollowing: profileInfo?.isFollowing ?? false,
             friendId: Number(friendId),
             memberId,
+            isBlocked: profileInfo?.isBlocked ?? false,
           }}
         />
       </LTop>