[#195] Fix: 팔로워 팔로이 관련 수정사항 (#199)

nodak-v2 · Jul 21, 2024 · 33ef2b2 · 33ef2b2
1 parent 7a9801f
commit 33ef2b2
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 11 deletions.
diff --git a/src/apis/follow.ts b/src/apis/follow.ts
@@ -65,7 +65,7 @@ const deleteFollow = (userId: string) => {
   });
 };
 
-export const usePostFollowAPI = (userId: string) => {
+export const usePostFollowAPI = (userId: string, myId: string) => {
   const queryClient = useQueryClient();
 
   const { mutateAsync } = useMutation({
@@ -75,15 +75,18 @@ export const usePostFollowAPI = (userId: string) => {
         queryKey: ['profile', userId],
       });
       queryClient.invalidateQueries({
-        queryKey: ['followees', userId],
+        queryKey: ['followees', myId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['followers', myId],
       });
     },
   });
 
   return mutateAsync;
 };
 
-export const useDeleteFollowAPI = (userId: string) => {
+export const useDeleteFollowAPI = (userId: string, myId: string) => {
   const queryClient = useQueryClient();
 
   const { mutateAsync } = useMutation({
@@ -93,7 +96,10 @@ export const useDeleteFollowAPI = (userId: string) => {
         queryKey: ['profile', userId],
       });
       queryClient.invalidateQueries({
-        queryKey: ['followees', userId],
+        queryKey: ['followees', myId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['followers', myId],
       });
     },
   });

diff --git a/src/app/(auth)/signin/page.tsx b/src/app/(auth)/signin/page.tsx
@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { BASE_URL } from '@/src/apis/constants';
 import Icon from '@/src/components/Icon';
 import TopBar from '@/src/components/Topbar';
 
@@ -19,7 +20,7 @@ const Signin = () => {
         <span className='font-h3-sm'>{SLOGAN}</span>
       </div>
       <div className='sticky mb-[60px] h-[44px] min-w-full'>
-        <Link href='https://api.picky-pick.com/oauth2/authorization/kakao'>
+        <Link href={`${BASE_URL}/oauth2/authorization/kakao`}>
           <Image
             src='/picky/kakao.svg'
             alt='kakao'

diff --git a/src/app/social/_components/FollowButtons/FollowButton.tsx b/src/app/social/_components/FollowButtons/FollowButton.tsx
@@ -1,12 +1,14 @@
 import { usePostFollowAPI } from '@/src/apis/follow';
+import { useGetUserStatusAPI } from '@/src/apis/myInfo';
 import Button from '@/src/components/Button/Button';
 
 interface FollowButtonProps {
   userId: number;
 }
 
 const FollowButton = ({ userId }: FollowButtonProps) => {
-  const postFollow = usePostFollowAPI(userId.toString());
+  const { userId: myId } = useGetUserStatusAPI();
+  const postFollow = usePostFollowAPI(userId.toString(), myId.toString());
 
   const handleFollow = () => postFollow();
 

diff --git a/src/app/social/_components/FollowButtons/UnFollowButton.tsx b/src/app/social/_components/FollowButtons/UnFollowButton.tsx
@@ -1,4 +1,5 @@
 import { useDeleteFollowAPI } from '@/src/apis/follow';
+import { useGetUserStatusAPI } from '@/src/apis/myInfo';
 import Button from '@/src/components/Button/Button';
 import ConfirmationModal from '@/src/components/Modal/ConfirmationModal';
 import useModal from '@/src/hooks/useModal';
@@ -8,7 +9,8 @@ interface FollowButtonProps {
 }
 
 const UnFollowButton = ({ userId }: FollowButtonProps) => {
-  const deleteFollow = useDeleteFollowAPI(userId.toString());
+  const { userId: myId } = useGetUserStatusAPI();
+  const deleteFollow = useDeleteFollowAPI(userId.toString(), myId.toString());
   const { isOpen, open, close } = useModal();
 
   const handleUnFollow = () => {

diff --git a/src/app/users/[userId]/hooks/useFollow.ts b/src/app/users/[userId]/hooks/useFollow.ts
@@ -5,8 +5,9 @@ import { useGetUserStatusAPI } from '@/src/apis/myInfo';
 import Toast from '@/src/components/Toast';
 
 export const useFollow = (userId: string) => {
-  const postFollow = usePostFollowAPI(userId);
-  const deleteFollow = useDeleteFollowAPI(userId);
+  const { userId: myId } = useGetUserStatusAPI();
+  const postFollow = usePostFollowAPI(userId, myId.toString());
+  const deleteFollow = useDeleteFollowAPI(userId, myId.toString());
 
   const { login: isLogin } = useGetUserStatusAPI();
   const router = useRouter();

diff --git a/src/app/users/_components/ProfileBlock.tsx b/src/app/users/_components/ProfileBlock.tsx
@@ -8,6 +8,7 @@ import { useGetUserStatusAPI } from '@/src/apis/myInfo';
 import { useGetProfileAPI } from '@/src/apis/profile';
 import ConfirmationModal from '@/src/components/Modal/ConfirmationModal';
 import useModal from '@/src/hooks/useModal';
+import { cn } from '@/src/utils/cn';
 
 import { useFollow } from '../[userId]/hooks/useFollow';
 
@@ -115,11 +116,23 @@ const ProfileBlock = () => {
               <span className='font-text-3-rg text-gray-accent4'>작성글</span>
               <span className='font-title-2-sm'>{postCount}</span>
             </div>
-            <Link className='flex items-center gap-1' href={followersPath}>
+            <Link
+              className={cn(
+                'flex items-center gap-1',
+                followerCount === 0 && 'pointer-events-none',
+              )}
+              href={followersPath}
+            >
               <span className='font-text-3-rg text-gray-accent4'>팔로워</span>
               <span className='font-title-2-sm'>{followerCount}</span>
             </Link>
-            <Link className='flex items-center gap-1' href={followeesPath}>
+            <Link
+              className={cn(
+                'flex items-center gap-1',
+                followeeCount === 0 && 'pointer-events-none',
+              )}
+              href={followeesPath}
+            >
               <span className='font-text-3-rg text-gray-accent4'>팔로잉</span>
               <span className='font-title-2-sm'>{followeeCount}</span>
             </Link>