fix: 유저 차단/해제에 대해서 상태가 제대로 업데이트 되지 않던 오류 수정

src/bookmarks/ui/BookmarkUserInfo.tsx

@@ -13,6 +13,7 @@ interface BookmarkUserInfoProps {
     isFollowing: boolean;
     friendId: number;
     memberId: number;
+    isBlocked: boolean;
   };
 }
 
@@ -43,12 +44,14 @@ const BookmarkUserInfo = ({
             <UnFollowButton
               followerId={isFriendPage.memberId}
               memberId={isFriendPage.friendId}
+              isBlocked={isFriendPage.isBlocked}
             />
           )}
           {!isFriendPage?.isFollowing && (
             <FollowButton
               followerId={isFriendPage.memberId}
               memberId={isFriendPage.friendId}
+              isBlocked={isFriendPage.isBlocked}
             />
           )}
         </>

src/friend/api/friends.tsx

@@ -20,6 +20,7 @@ export interface FollowingInfo {
   memberId: number;
   nickname: string;
   emoji: string;
+  isBlocked: boolean;
 }
 
 interface GETFollowingListRequest {
@@ -81,6 +82,7 @@ interface FollowerInfo {
   memberId: number;
   nickname: string;
   isFollowing: boolean;
+  isBlocked: boolean;
   emoji: string;
 }
 
@@ -392,6 +394,7 @@ export interface SearchList {
   nickname: string;
   emoji: string;
   isFollowing: boolean;
+  isBlocked: boolean;
 }
 
 interface GETSearchListRequest {
@@ -431,8 +434,6 @@ export const GET_SEARCH_LIST_KEY = (params: GETSearchListQueryRequest) => [
   'GET_SEARCH_LIST',
   params.memberId,
   params.keyword,
-  params.cursorId,
-  params.pageSize,
 ];
 
 export const useGETSearchListQuery = (params: GETSearchListQueryRequest) => {

src/friend/ui/Friends.tsx

@@ -51,6 +51,7 @@ const Friends = () => {
               name={info.nickname}
               profileEmoji={info.emoji}
               isFollowing={true}
+              isBlocked={info.isBlocked}
             />
           ))}
         {selectedType === FriendType.Following && !followings.length && (
@@ -65,6 +66,7 @@ const Friends = () => {
               name={info.nickname}
               profileEmoji={info.emoji}
               isFollowing={info.isFollowing}
+              isBlocked={info.isBlocked}
             />
           ))}
       </Container>

src/friend/ui/buttons/FollowButton.tsx

@@ -6,18 +6,34 @@ import { theme } from '@/styles/theme';
 import { type MouseEvent } from 'react';
 import { usePOSTFollowUserQuery } from '@/friend/api/friends';
 import useSearchStore from '@/store/search';
+import useToast from '@/common-ui/Toast/hooks/useToast';
 
 interface FollowButtonProps {
   memberId: number;
   followerId: number;
+  isBlocked?: boolean;
 }
-const FollowButton = ({ memberId, followerId }: FollowButtonProps) => {
+const FollowButton = ({
+  memberId,
+  followerId,
+  isBlocked = false,
+}: FollowButtonProps) => {
   const { setSelectedMemberId } = useSearchStore();
   const { mutate } = usePOSTFollowUserQuery({ memberId: followerId });
 
+  const { fireToast } = useToast();
+
   //TODO: 하드 코딩 개선
   const onClick = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
+    if (isBlocked) {
+      fireToast({
+        message: '차단된 사용자는 팔로우 할 수 없어요',
+        mode: 'ERROR',
+      });
+      return;
+    }
+
     setSelectedMemberId(memberId);
     mutate({ memberId, followerId });
   };

src/friend/ui/buttons/UnFollowButton.tsx

@@ -5,18 +5,32 @@ import { theme } from '@/styles/theme';
 import { type MouseEvent } from 'react';
 import { useDELETEUnFollowQuery } from '@/friend/api/friends';
 import useSearchStore from '@/store/search';
+import useToast from '@/common-ui/Toast/hooks/useToast';
 
 interface UnFollowButtonProps {
   memberId: number;
   followerId: number;
+  isBlocked?: boolean;
 }
-const UnFollowButton = ({ memberId, followerId }: UnFollowButtonProps) => {
+const UnFollowButton = ({
+  memberId,
+  followerId,
+  isBlocked = false,
+}: UnFollowButtonProps) => {
   const { setSelectedMemberId } = useSearchStore();
   const { mutate } = useDELETEUnFollowQuery({ memberId: followerId });
 
-  //TODO: 하드코딩 개선
+  const { fireToast } = useToast();
+
   const onClick = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
+    if (isBlocked) {
+      fireToast({
+        message: '차단된 사용자는 팔로우 할 수 없어요',
+        mode: 'ERROR',
+      });
+      return;
+    }
     setSelectedMemberId(memberId);
     mutate({ memberId, followerId });
   };

src/friend/ui/friend/FriendFollowerItem.tsx

@@ -8,13 +8,15 @@ type FriendFollowerProps = {
   name: string;
   profileEmoji: string;
   isFollowing: boolean;
+  isBlocked: boolean;
 };
 const FriendFollowerItem = ({
   id,
   memberId,
   name,
   profileEmoji,
   isFollowing,
+  isBlocked,
 }: FriendFollowerProps) => {
   return (
     <FriendItemLayout
@@ -23,9 +25,17 @@ const FriendFollowerItem = ({
       emoji={profileEmoji}
       button={
         isFollowing ? (
-          <UnFollowButton followerId={memberId} memberId={id} />
+          <UnFollowButton
+            followerId={memberId}
+            memberId={id}
+            isBlocked={isBlocked}
+          />
         ) : (
-          <FollowButton followerId={memberId} memberId={id} />
+          <FollowButton
+            followerId={memberId}
+            memberId={id}
+            isBlocked={isBlocked}
+          />
         )
       }
     />

src/friend/ui/friend/FriendFollowingItem.tsx

@@ -8,13 +8,15 @@ type FriendFollowingProps = {
   name: string;
   profileEmoji: string;
   isFollowing: boolean;
+  isBlocked: boolean;
 };
 const FriendFollowingItem = ({
   id,
   memberId,
   name,
   profileEmoji,
   isFollowing,
+  isBlocked,
 }: FriendFollowingProps) => {
   return (
     <FriendItemLayout
@@ -23,9 +25,17 @@ const FriendFollowingItem = ({
       id={id}
       button={
         isFollowing ? (
-          <UnFollowButton memberId={id} followerId={memberId} />
+          <UnFollowButton
+            memberId={id}
+            followerId={memberId}
+            isBlocked={isBlocked}
+          />
         ) : (
-          <FollowButton memberId={id} followerId={memberId} />
+          <FollowButton
+            memberId={id}
+            followerId={memberId}
+            isBlocked={isBlocked}
+          />
         )
       }
     />

src/friend/ui/friend/FriendList.tsx

@@ -40,7 +40,8 @@ const FriendList = ({ keyword }: FriendListProps) => {
             memberId={memberId}
             name={info.nickname}
             profileEmoji={info.emoji}
-            isFollowing={Boolean(info.isFollowing)}
+            isFollowing={info.isFollowing}
+            isBlocked={info.isBlocked}
           />
         ))}
       </Container>

src/members/api/member.ts

@@ -1,7 +1,11 @@
 import { GET_USER_PROFILE } from '@/auth/api/profile';
 import useToast from '@/common-ui/Toast/hooks/useToast';
 import client from '@/common/service/client';
+import { GET_SEARCH_LIST_KEY, SearchList } from '@/friend/api/friends';
+import useFriendStore from '@/store/friend';
+import useSearchStore from '@/store/search';
 import {
+  InfiniteData,
   useInfiniteQuery,
   useMutation,
   useQuery,
@@ -328,18 +332,53 @@ interface POSTBlockMemberQueryParams {
   memberId: number;
 }
 
+type InfiniteSearchList =
+  | InfiniteData<{
+      contents: SearchList[];
+      hasNext: boolean;
+    }>
+  | undefined;
+
 export const usePOSTBlockMemberQuery = ({
   memberId,
 }: POSTBlockMemberQueryParams) => {
   const router = useNavigate();
   const { fireToast } = useToast();
   const queryClient = useQueryClient();
+  const { keyword, selectedMemberId } = useSearchStore();
+  console.log(keyword, memberId);
   return useMutation(postBlockMemberAPI, {
     onSuccess: () => {
       fireToast({ message: '차단 되었습니다' });
       router(-1);
       queryClient.refetchQueries(GET_BLOCK_MEMBER_LIST_KEY({ memberId }));
       queryClient.refetchQueries(GET_USER_PROFILE({ loginId: memberId }));
+      if (keyword && selectedMemberId) {
+        queryClient.setQueryData<InfiniteSearchList>(
+          GET_SEARCH_LIST_KEY({ memberId, keyword }),
+          (searchList) => {
+            if (searchList) {
+              return {
+                ...searchList,
+                pages: searchList.pages.map((page) => ({
+                  ...page,
+                  contents: page.contents.map((content) => {
+                    if (content.memberId === selectedMemberId) {
+                      return {
+                        ...content,
+                        isFollowing: false,
+                        isBlocked: true,
+                      };
+                    }
+                    return content;
+                  }),
+                })),
+              };
+            }
+            return searchList;
+          },
+        );
+      }
     },
   });
 };
@@ -351,6 +390,7 @@ export interface MemberProfile {
   nickname: string;
   profileEmoji: string;
   isFollowing: boolean;
+  isBlocked: boolean;
 }
 
 interface GETMemberProfileParams {
@@ -411,7 +451,6 @@ interface GetBlockMemberListParams {
   pageSize?: number;
 }
 
-// NOTE : Backend API가 수정되면 삭제
 const GETBlockMemberList = {
   API: async (params: GetBlockMemberListParams) => {
     const { data } = await client<MemberItem>({
@@ -477,9 +516,13 @@ export const useUnblockUserQuery = ({
 }: DELETEBlockMemberQueryParams) => {
   const queryClient = useQueryClient();
   const { fireToast } = useToast();
+  const { friendId } = useFriendStore();
   return useMutation(unblockUserAPI, {
     onSuccess: () => {
       queryClient.invalidateQueries(GET_BLOCK_MEMBER_LIST_KEY({ memberId }));
+      queryClient.refetchQueries(
+        GET_FRIEND_PROFILE({ memberId: friendId, loginId: memberId }),
+      );
       fireToast({ message: '차단이 해제 되었습니다' });
     },
   });

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>