From 517023e922673534af35480365c3cc06bd47ad84 Mon Sep 17 00:00:00 2001
From: nmc2711 <nmc2711@naver.com>
Date: Tue, 5 Dec 2023 19:01:34 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A2=8B=EC=95=84=EC=97=AC=20=ED=91=B8?=
 =?UTF-8?q?=EC=89=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/your-page/profile.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/ui/your-page/profile.tsx b/src/components/ui/your-page/profile.tsx
index eb60053..6276ef8 100644
--- a/src/components/ui/your-page/profile.tsx
+++ b/src/components/ui/your-page/profile.tsx
@@ -142,6 +142,7 @@ const SubscribeIcon = styled.span`
 const YourPageProfile = () => {
   const [isFollow, setIsFollow] = useState(true);
   const { consumerId: myId } = useAtomValue(MyProfileAtom);
+  const [count, setCount] = useState(0);
   const [yourProfile, setYourProfile] = useAtom(YourProfileAtom);
   const setTitle = useSetAtom(titleAtom);
 
@@ -152,7 +153,13 @@ const YourPageProfile = () => {
       isFollow: toggledFollow,
     });
     if (!success) return;
+
     setIsFollow(toggledFollow);
+    if (toggledFollow) {
+      setCount(count + 1);
+    } else {
+      setCount(count - 1);
+    }
     setYourProfile((prev) => ({
       ...prev,
       followerConsumerIds: toggledFollow
@@ -161,10 +168,6 @@ const YourPageProfile = () => {
     }));
   };
 
-  useEffect(() => {
-    setTitle('매거진');
-  }, [setTitle]);
-
   const fetchGetYourPageProfile = async () => {
     try {
       const {
@@ -173,6 +176,7 @@ const YourPageProfile = () => {
         `/api/api/consumer/detail?consumerId=consumer2&myId=consumer1`,
       );
       if (success) {
+        setCount(data.consumer.followerConsumerIds?.length);
         setIsFollow(data.isFollow);
         setYourProfile(data.consumer);
       } else {
@@ -183,6 +187,10 @@ const YourPageProfile = () => {
     }
   };
 
+  useEffect(() => {
+    setTitle('매거진');
+  }, [setTitle]);
+
   useLayoutEffect(() => {
     fetchGetYourPageProfile();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -204,10 +212,7 @@ const YourPageProfile = () => {
           <SubscribeWrap>
             <SubscribeIcon>구독자</SubscribeIcon>
             <FaUserPlus size={16} color="#fff" />
-            <strong>
-              {formatNumber(yourProfile.followerConsumerIds?.length)}
-            </strong>
-            명
+            <strong>{formatNumber(count)}</strong>명
           </SubscribeWrap>
         </NameBox>
         <GreetingBox>