🐛Modify : navigate()에 객체 데이터 함께 보내기 #105

FRONTENDSCHOOL5 · Jun 23, 2023 · 873710f · 873710f
1 parent 340c2be
commit 873710f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git a/src/pages/follow/Follower.jsx b/src/pages/follow/Follower.jsx
@@ -4,16 +4,19 @@ import TabMenu from '../../components/common/tab/TabMenu';
 import UserFollow from '../../components/common/user/UserFollow';
 import { loadFollowerListAPI } from '../../api/profile/getFollowerAPI';
 import { useRecoilValue } from 'recoil';
-import { accountNameState, userTokenState } from '../../atoms/Atoms';
+import { userTokenState } from '../../atoms/Atoms';
 import * as S from './Follower.style';
+import { useLocation } from 'react-router-dom';
 
 function Follower() {
   const [isFollower, setIsFollower] = useState([]);
   const userToken = useRecoilValue(userTokenState);
-  const accountName = useRecoilValue(accountNameState);
 
+  const location = useLocation();
+
+  const accountname = location.pathname.split('/')[2];
   const loadFollowers = () => {
-    loadFollowerListAPI(accountName, userToken)
+    loadFollowerListAPI(accountname, userToken)
       .then((data) => {
         console.log('API response:', data); // API 응답 확인
         if (data) {

diff --git a/src/pages/follow/Following.jsx b/src/pages/follow/Following.jsx
@@ -6,14 +6,15 @@ import { loadFollowingListAPI } from '../../api/profile/getFollowingAPI';
 import { useRecoilValue } from 'recoil';
 import { accountNameState, userTokenState } from '../../atoms/Atoms';
 import * as S from './Following.style';
+import { useLocation } from 'react-router-dom';
 
 function Following() {
   const [isFollowing, setIsFollowing] = useState([]);
   const userToken = useRecoilValue(userTokenState);
-  const accountName = useRecoilValue(accountNameState);
-
+  const location = useLocation();
+  const accountname = location.pathname.split('/')[2];
   const loadfollowing = () => {
-    loadFollowingListAPI(accountName, userToken)
+    loadFollowingListAPI(accountname, userToken)
       .then((data) => {
         console.log('API response:', data); // API 응답 확인
         if (data) {

diff --git a/src/pages/profile/Profile.jsx b/src/pages/profile/Profile.jsx
@@ -158,6 +158,14 @@ export default function Profile() {
     }
   };
 
+  const sendAccountnameData = () => {
+    navigate(`/profile/${accountname}/following`, {
+      state: {
+        accountnameData: accountname,
+      },
+    });
+  };
+
   return (
     <div>
       <TopBasicNav />
@@ -167,10 +175,14 @@ export default function Profile() {
             {/* 프로필 팔로워수 처리 변경 */}
             <S.Followers
               onClick={() => {
-                navigate(`/profile/${accountname}/follower`);
+                navigate(`/profile/${accountname}/follower`, {
+                  state: {
+                    accountnameData: accountname,
+                  },
+                });
               }}
             >
-              <span>{followersCount || 'Loading...'}</span>
+              <span>{followersCount || 0}</span>
               <span>followers</span>
             </S.Followers>
             {/* 프로필 이미지 처리 변경 */}
@@ -181,10 +193,14 @@ export default function Profile() {
             {/* 프로필 팔로잉수 처리 변경 */}
             <S.Followings
               onClick={() => {
-                navigate(`/profile/${accountname}/following`);
+                navigate(`/profile/${accountname}/following`, {
+                  state: {
+                    accountnameData: accountname,
+                  },
+                });
               }}
             >
-              <span>{followingCount}</span>
+              <span>{followingCount || 0}</span>
               <span>followings</span>
             </S.Followings>
           </S.ProfileHeader>