[Fix] Button Blocked 추가 & 프로필 팔로우/팔로잉 버튼 API 중복 호출 수정

src/app/profile/[id]/FollowButton.tsx

@@ -1,72 +1,70 @@
-import { FOLLOW_API } from '@/apis/follow';
+import { FOLLOW_API, useAddFollow, useDeleteFollow } from '@/apis/follow';
 import getQueryKey from '@/apis/getQueryKey';
-import { isSeverError } from '@/apis/instance.api';
 import { FollowStatus } from '@/apis/schema/member';
 import Button from '@/components/Button/Button';
 import GradientTextButton from '@/components/Button/GradientTextButton';
-import { useSnackBar } from '@/components/SnackBar/SnackBarProvider';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import { eventLogger } from '@/utils';
 import { css } from '@styled-system/css';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
 
-function FollowButton({ followStatus, memberId }: { followStatus: FollowStatus; memberId: number }) {
-  const { triggerSnackBar } = useSnackBar();
+interface Props {
+  followStatus: FollowStatus;
+  memberId: number;
+  isFetching: boolean;
+}
+
+function FollowButton({ followStatus, memberId, isFetching: isListLoading }: Props) {
   const queryClient = useQueryClient();
 
-  const { mutateAsync: followMutate } = useMutation({
-    mutationFn: FOLLOW_API.addFollow,
+  const { mutateAsync: followMutate, isPending: isFollowPending } = useAddFollow({
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: getQueryKey('followsCountTargetId', { followId: memberId }),
       });
     },
-    onError: (e) => {
-      if (isSeverError(e)) {
-        triggerSnackBar({
-          message: e.response.data.data.message,
-        });
-      }
-    },
   });
 
-  const { mutateAsync: unFollowMutate } = useMutation({
+  const { mutateAsync: unFollowMutate, isPending: isUnFollowPending } = useDeleteFollow({
     mutationFn: FOLLOW_API.deleteFollow,
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: getQueryKey('followsCountTargetId', { followId: memberId }),
       });
     },
-    onError: (e) => {
-      if (isSeverError(e)) {
-        triggerSnackBar({
-          message: e.response.data.data.message,
-        });
-      }
-    },
   });
 
-  const handleFollow = async () => {
+  const handleFollow = () => {
     eventLogger.logEvent(EVENT_LOG_CATEGORY.FOLLOW_PROFILE, EVENT_LOG_NAME.FOLLOW_PROFILE.CLICK_FOLLOW_BUTTON);
-    await followMutate(memberId);
+    followMutate(memberId);
   };
 
-  const handleUnfollow = async () => {
+  const handleUnfollow = () => {
     eventLogger.logEvent(EVENT_LOG_CATEGORY.FOLLOW_PROFILE, EVENT_LOG_NAME.FOLLOW_PROFILE.CLICK_UNFOLLOW_BUTTON);
-    await unFollowMutate(memberId);
+    unFollowMutate(memberId);
   };
 
   switch (followStatus) {
-    case FollowStatus.FOLLOWED_BY_ME:
-      return <GradientTextButton onClick={handleFollow}>맞팔로우</GradientTextButton>;
     case FollowStatus.FOLLOWING:
       return (
-        <Button onClick={handleUnfollow} variant="primary" size={'small'} className={followingButtonCss}>
+        <Button
+          onClick={handleUnfollow}
+          variant="primary"
+          size={'small'}
+          className={followingButtonCss}
+          blocked={isUnFollowPending || isListLoading}
+        >
           팔로잉
         </Button>
       );
+
+    case FollowStatus.FOLLOWED_BY_ME:
     case FollowStatus.NOT_FOLLOWING:
-      return <GradientTextButton onClick={handleFollow}>팔로우</GradientTextButton>;
+      return (
+        <GradientTextButton onClick={handleFollow} blocked={isFollowPending || isListLoading}>
+          {followStatus === FollowStatus.FOLLOWED_BY_ME ? '맞팔로우' : '팔로우'}
+        </GradientTextButton>
+      );
   }
 }
 

src/app/profile/[id]/page.tsx

@@ -13,7 +13,7 @@ import Tab from '@/components/Tab/Tab';
 import { css } from '@styled-system/css';
 
 function FollowProfilePage({ params }: { params: { id: string } }) {
-  const { data: followCountData } = useFollowsCountTargetId(Number(params.id));
+  const { data: followCountData, isFetching } = useFollowsCountTargetId(Number(params.id));
   const { data } = useGetMembersById(Number(params.id));
   const { data: symbolStackData } = useGetMissionStack(params.id);
 
@@ -31,6 +31,7 @@ function FollowProfilePage({ params }: { params: { id: string } }) {
           <FollowButton
             followStatus={followCountData?.followStatus || FollowStatus.NOT_FOLLOWING}
             memberId={Number(params.id)}
+            isFetching={isFetching}
           />
         }
       >

src/components/Button/Button.tsx

@@ -107,6 +107,14 @@ export const buttonStyle = cva({
         },
       },
     },
+    // @params blocked
+    // @description 버튼 클릭 만을 막을 때 사용합니다.
+    blocked: {
+      true: {
+        pointerEvents: 'none',
+      },
+      false: {},
+    },
   },
   compoundVariants: [
     {
@@ -160,6 +168,7 @@ export const buttonStyle = cva({
   ],
   defaultVariants: {
     size: 'large',
+    blocked: false,
   },
 });
 

src/components/Button/GradientTextButton.tsx

@@ -2,39 +2,45 @@ import { type ButtonHTMLAttributes, type PropsWithChildren } from 'react';
 import { gradientBorderWrapperCss, gradientTextCss } from '@/constants/style/gradient';
 import { css, cx } from '@styled-system/css';
 
-function GradientTextButton({ children, ...props }: PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>) {
+function GradientTextButton({
+  children,
+  blocked,
+  ...props
+}: PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> & {
+  blocked?: boolean;
+}) {
   return (
     <button
       className={cx(
+        buttonCss,
+        gradientBorderWrapperCss(),
         css({
-          display: 'block',
-          alignItems: 'center',
-          justifyContent: 'center',
-          borderRadius: '20px',
-          cursor: 'pointer',
-          height: '30px',
+          pointerEvents: blocked ? 'none' : 'auto',
         }),
-        gradientBorderWrapperCss(),
       )}
       type={'button'}
       {...props}
     >
-      <span
-        className={cx(
-          css({
-            textStyle: 'subtitle5',
-            fontSize: '13px',
-            fontWeight: 300,
-            lineHeight: '28px',
-            padding: '0px 12px',
-          }),
-          gradientTextCss,
-        )}
-      >
-        {children}
-      </span>
+      <span className={cx(textCss, gradientTextCss)}>{children}</span>
     </button>
   );
 }
 
 export default GradientTextButton;
+
+const buttonCss = css({
+  display: 'block',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '20px',
+  cursor: 'pointer',
+  height: '30px',
+});
+
+const textCss = css({
+  textStyle: 'subtitle5',
+  fontSize: '13px',
+  fontWeight: 300,
+  lineHeight: '28px',
+  padding: '0px 12px',
+});

src/components/ListItem/Follow/MemberItem.tsx

@@ -3,7 +3,6 @@ import { type FollowerMemberWithStatusType, FollowStatus } from '@/apis/schema/m
 import Button from '@/components/Button/Button';
 import { ProfileListItem } from '@/components/ListItem';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
-import { css } from '@/styled-system/css';
 import { eventLogger } from '@/utils';
 
 export interface MemberItemProps extends FollowerMemberWithStatusType {
@@ -15,7 +14,6 @@ export interface MemberItemProps extends FollowerMemberWithStatusType {
 export function FollowingMember({ onClick, ...props }: MemberItemProps) {
   const { mutate, isPending } = useDeleteFollow({
     onSuccess: (res) => {
-      // TODO : 서버 데이터 잘 받아오는지 체크
       const newStatus = res?.followStatus ?? FollowStatus.NOT_FOLLOWING;
       props.onButtonClick?.({ ...props, followStatus: newStatus });
     },
@@ -32,28 +30,14 @@ export function FollowingMember({ onClick, ...props }: MemberItemProps) {
       name={props.nickname}
       thumbnailUrl={props.profileImageUrl}
       buttonElement={
-        <Button
-          size="small"
-          variant="secondary"
-          onClick={onFollowingCancel}
-          disabled={isButtonDisabled}
-          className={secondaryButtonCss}
-        >
+        <Button size="small" variant="secondary" onClick={onFollowingCancel} blocked={isButtonDisabled}>
           팔로잉
         </Button>
       }
     />
   );
 }
 
-const secondaryButtonCss = css({
-  '&:disabled': {
-    filter: 'none',
-    backgroundColor: 'gray.gray200',
-    color: 'text.secondary',
-  },
-});
-
 // 팔로잉 되어있지 않은 멤버
 export function NotFollowingMember(props: MemberItemProps) {
   const { mutate, isPending } = useAddFollow({
@@ -74,26 +58,14 @@ export function NotFollowingMember(props: MemberItemProps) {
       name={props.nickname}
       thumbnailUrl={props.profileImageUrl}
       buttonElement={
-        <Button
-          size="small"
-          variant="primary"
-          onClick={onFollowerClick}
-          disabled={isButtonDisabled}
-          className={primaryButtonCss}
-        >
+        <Button size="small" variant="primary" onClick={onFollowerClick} blocked={isButtonDisabled}>
           {props.followStatus === FollowStatus.FOLLOWED_BY_ME ? '맞팔로우' : '팔로우'}
         </Button>
       }
     />
   );
 }
 
-const primaryButtonCss = css({
-  '&:disabled': {
-    filter: 'none',
-  },
-});
-
 export function MineMemberItem(props: MemberItemProps) {
   return <ProfileListItem name={props.nickname} buttonElement={<div></div>} thumbnailUrl={props.profileImageUrl} />;
 }