Merge pull request #165 from KUIT-MAPU/feat/164-refactoring

Feat/164 refactoring
KUIT-MAPU · Nov 20, 2024 · 95054e0 · 95054e0
2 parents a0b7b29 + d58ceff
commit 95054e0
Show file tree

Hide file tree

Showing 9 changed files with 845 additions and 30 deletions.
diff --git a/src/components/global/GlobalNavigationBar.tsx b/src/components/global/GlobalNavigationBar.tsx
@@ -16,6 +16,7 @@ import { ReactComponent as User } from '../../assets/user.svg';
 import { ReactComponent as Login } from '../../assets/btn_login.svg';
 import { ReactComponent as Logout } from '../../assets/btn_logout.svg';
 import useLogOutMutation from '../../apis/auth/useLogOutMutation';
+import useUserViewState from '../../stores/userViewState';
 
 import instance from '../../apis/instance';
 
@@ -29,6 +30,7 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => {
     useRegisterStore();
 
   const logOutMutation = useLogOutMutation(prevUrl);
+  const { viewUserData } = useUserViewState();
   const [userData, setUserData] = useState({
     nickname: '',
     profileId: '',
@@ -120,14 +122,27 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => {
           <div
             className={`${styles.iconContainer} ${isUserpageActive ? styles.iconContainer_on : styles.iconContainer_off}`}
           >
-            {userData.imgUrl ? (
+            {/* {userData.imgUrl ? (
               <img
                 src={userData.imgUrl}
                 alt="User Profile"
                 className={styles.iconContainer}
               />
             ) : (
               <User />
+            )} */}
+            { viewUserData.nickname != '' ? (
+              <img
+               src={viewUserData.imgUrl}
+               alt="User Profile"
+               className={styles.iconContainer}
+              />
+            ) : (
+              <img
+              src={userData.imgUrl}
+              alt="User Profile"
+              className={styles.iconContainer}
+              />
             )}
           </div>
         </Link>

diff --git a/src/components/timeLine/editorList/EditorProfileCard.tsx b/src/components/timeLine/editorList/EditorProfileCard.tsx
@@ -14,7 +14,9 @@ import { FollowType } from '../../../types/follow/FollowType';
 import { useDeleteUnFollow } from '../../../apis/follow/useDeleteUnFollow';
 import { useQuery } from 'react-query';
 import { fetchFollowing } from '../../../apis/follow/useGetFollowing';
+import instance from '../../../apis/instance';
 
+import { useUserViewState } from '../../../stores/userViewState';
 interface ProfileCardProps {
   Editor: EditorType;
   token: string | undefined;
@@ -33,11 +35,35 @@ const EditorProfileCard: React.FC<ProfileCardProps> = ({
   const pathname = useLocation().pathname;
   const Followmutation = usePostFollow();
   const UnFollowmutation = useDeleteUnFollow();
+  const { setViewUserData } = useUserViewState();
 
   const { data: followingData } = useQuery(['followindData'], () =>
     fetchFollowing(token),
   );
 
+  const handleUserProfile = (userId: number) => {
+    const fetchUserData = async () => {
+      try {
+        const response = await instance.get(`/user/${userId}`);
+        const data = response.data.result;
+        console.log(data);
+        setViewUserData({
+          nickname: data.nickname,
+          profileId: data.profileId,
+          imgUrl: data.imgUrl,
+          mapCnt: data.mapCnt,
+          followerCnt: data.followerCnt,
+          followingCnt: data.followingCnt,
+        });
+
+        navigate(`/user/${data.profileId}`);
+      } catch (error) {
+        console.error('Failed to fetch user data', error);
+      }
+    }; 
+    fetchUserData();
+  }
+
   const handleFollow = (followingId: number) => {
     if (!isLog) {
       setLoginNeededStatus(true);
@@ -86,7 +112,12 @@ const EditorProfileCard: React.FC<ProfileCardProps> = ({
           <AuthContainer className={dimmedStyles.authContainer} />
         </>
       )}
-      <Link to={`/user/${Editor.profileId}`} style={{ textDecoration: 'none',color: 'inherit' }}>
+      <Link to={`/user/${Editor.profileId}`} 
+      style={{ textDecoration: 'none',color: 'inherit' }}
+      onClick={() => {
+        handleUserProfile(Editor.userId);
+      }}
+      >
         <div className={styles.editorInfo}>
           <img
             className={styles.editorImg}
@@ -100,18 +131,6 @@ const EditorProfileCard: React.FC<ProfileCardProps> = ({
           </div>
         </div>
       </Link>
-      {/* <div className={styles.editorInfo}>
-        <img
-          className={styles.editorImg}
-          src={Editor.image ? Editor.image : userImg}
-          alt="Editor Image"
-        />
-
-        <div className={styles.editorNameNid}>
-          <div className={styles.editorName}>{Editor.nickname}</div>
-          <span className={styles.editorId}>@{Editor.profileId}</span>
-        </div>
-      </div> */}
 
       <button
         className={`${isFollow ? styles.unfollowing : styles.following}`}