Merge pull request #136 from KUIT-MAPU/feat/133-User-Follow

Feat/133 user follow
KUIT-MAPU · Aug 17, 2024 · 9c72135 · 9c72135
2 parents a8e37a7 + e49630e
commit 9c72135
Show file tree

Hide file tree

Showing 7 changed files with 202 additions and 7 deletions.
diff --git a/src/components/userProfile/followModal/Follower.module.scss b/src/components/userProfile/followModal/Follower.module.scss
@@ -55,3 +55,61 @@
   font-weight: 400;
   color: var(--gray_400);
 }
+
+.userList {
+  width: 380px;
+  overflow-y: auto;
+  margin-top: 8px;
+  padding-right: 4px; 
+  gap: 6px;
+}
+
+::-webkit-scrollbar {
+  width: 6px; /* 스크롤 바의 너비 */
+}
+
+.userItem {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: 380px;
+  height: 52px;
+  margin-bottom: 8px;
+  border-radius: 6px;
+  justify-content: space-between;
+}
+
+.userInfo {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+}
+
+.userProfilePic {
+  width: 40px;
+  height: 40px;
+  border-radius: 100px;
+  margin-right: 2px;
+  border: 1px;
+}
+
+.userName {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: black;
+}
+
+.isFollow {
+  display: flex;
+  border-radius: 4px;
+  background-color: var(--gray_50);
+  width: 56px;
+  height: 25px;
+  align-items: center;
+  padding: 2px 12px 2px 12px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 21px;
+}
diff --git a/src/components/userProfile/followModal/Follower.tsx b/src/components/userProfile/followModal/Follower.tsx
@@ -1,11 +1,31 @@
 import React, { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import styles from './Following.module.scss';
+import styles from './Follower.module.scss';
 import { ReactComponent as IcoFollower } from '../../../assets/ico_user_follower.svg';
 import { ReactComponent as ModalClose } from '../../../assets/btn_followmodal_close.svg';
 import { ReactComponent as Search } from '../../../assets/ico_search.svg';
+import { ReactComponent as User } from '../../../assets/user.svg';
+
+import instance from '../../../apis/instance';
 
 const Follower = ({ onClose }: { onClose: () => void }) => {
+  const [followerUsers,setFollowerUsers] = useState([]);
+
+  useEffect(() => {
+    const fetchUserFollowerData = async () => {
+      try {
+        const response = await instance.get('/follower');
+        const data = response.data.result.users;
+
+        setFollowerUsers(data);
+
+      } catch (error) {
+        console.error('Failed to fetch user data', error);
+      }
+   };  
+   fetchUserFollowerData();
+  }, []);
+
   return (
     <div className={styles.modalOverlay}>
       <div className={styles.modalContent}>
@@ -18,9 +38,26 @@ const Follower = ({ onClose }: { onClose: () => void }) => {
         <div className={styles.searchBar}>
           <div className={styles.searchBarText}>
             <Search />
-            <div>텍스트</div>
+            <div>검색</div>
           </div>
         </div>
+        <div className={styles.userList}>
+          {followerUsers.map((user: any) => (
+            <div key={user.userId} className={styles.userItem}>
+              <div className={styles.userInfo}>
+              <img
+                        src={user.profileImageUrl}
+                        alt="mapImage"
+                        className={styles.userProfilePic}
+                />
+                <div className={styles.userName}>{user.nickname}</div>
+              </div>
+              <button className={styles.isFollow}>
+                팔로잉
+              </button>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/userProfile/followModal/Following.module.scss b/src/components/userProfile/followModal/Following.module.scss
@@ -55,3 +55,61 @@
   font-weight: 400;
   color: var(--gray_400);
 }
+
+.userList {
+  width: 380px;
+  overflow-y: auto;
+  margin-top: 8px;
+  padding-right: 4px; 
+  gap: 6px;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+.userItem {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: 380px;
+  height: 52px;
+  margin-bottom: 8px;
+  border-radius: 6px;
+  justify-content: space-between;
+}
+
+.userInfo {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+}
+
+.userProfilePic {
+  width: 40px;
+  height: 40px;
+  border-radius: 100px;
+  margin-right: 2px;
+  border: 1px;
+}
+
+.userName {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: black;
+}
+
+.isFollow {
+  display: flex;
+  border-radius: 4px;
+  background-color: var(--gray_50);
+  width: 56px;
+  height: 25px;
+  align-items: center;
+  padding: 2px 12px 2px 12px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 21px;
+}
diff --git a/src/components/userProfile/followModal/Following.tsx b/src/components/userProfile/followModal/Following.tsx
@@ -4,8 +4,29 @@ import styles from './Following.module.scss';
 import { ReactComponent as IcoFollowing } from '../../../assets/ico_user_following.svg';
 import { ReactComponent as ModalClose } from '../../../assets/btn_followmodal_close.svg';
 import { ReactComponent as Search } from '../../../assets/ico_search.svg';
+import { ReactComponent as User } from '../../../assets/user.svg';
+
+import instance from '../../../apis/instance';
+
 
 const Following = ({ onClose }: { onClose: () => void }) => {
+  const [followingUsers,setFollowingUsers] = useState([]);
+
+  useEffect(() => {
+    const fetchUserFollowingData = async () => {
+      try {
+        const response = await instance.get('/following');
+        const data = response.data.result.users;
+
+        setFollowingUsers(data);
+
+      } catch (error) {
+        console.error('Failed to fetch user data', error);
+      }
+   };  
+   fetchUserFollowingData();
+  }, []);
+
   return (
     <div className={styles.modalOverlay}>
       <div className={styles.modalContent}>
@@ -18,9 +39,26 @@ const Following = ({ onClose }: { onClose: () => void }) => {
         <div className={styles.searchBar}>
           <div className={styles.searchBarText}>
             <Search />
-            <div>텍스트</div>
+            <div>검색</div>
           </div>
         </div>
+        <div className={styles.userList}>
+          {followingUsers.map((user: any) => (
+            <div key={user.userId} className={styles.userItem}>
+              <div className={styles.userInfo}>
+              <img
+                        src={user.profileImageUrl}
+                        alt="mapImage"
+                        className={styles.userProfilePic}
+                      />
+                <div className={styles.userName}>{user.nickname}</div>
+              </div>
+              <button className={styles.isFollow}>
+                팔로잉
+              </button>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/userProfile/userInfoBarCard/EmptyUserInfoBar.tsx b/src/components/userProfile/userInfoBarCard/EmptyUserInfoBar.tsx
@@ -3,7 +3,7 @@ import AuthContainer from '../../login/AuthContainer';
 import useRegisterStore from '../../../stores/registerStore';
 import { RegisterStatus } from '../../../types/enum/RegisterStatus';
 
-import styles from './UserInfoBar.module.scss';
+import styles from './EmptyUSerInfobar.module.scss';
 import { ReactComponent as ProfilePerson } from '../../../assets/img_user_default_profile.svg';
 import Following from '../followModal/Following';
 import Follower from '../followModal/Follower';

diff --git a/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx b/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx
@@ -83,7 +83,8 @@ const UserInfoBar = (props: { children?: React.ReactNode }) => {
       } catch (error) {
         console.error('Failed to fetch user data', error);
       }
-    };
+    };  //로그인 한 유저 정보 받아오기
+
 
     fetchUserData();
   }, [navigate]);

diff --git a/src/pages/UserProfile/UserProfile.tsx b/src/pages/UserProfile/UserProfile.tsx
@@ -3,10 +3,12 @@ import { Outlet, useParams } from 'react-router-dom';
 
 import GlobalNavigationBar from '../../components/global/GlobalNavigationBar';
 import styles1 from '../../components/global/GlobalNavigationBar.module.scss';
-import UserInfoBar from '../../components/userProfile/userInfoBarCard/GetUserInfoBar';
 import styles2 from '../components/userProfile/GetUserInfoBar.module.scss';
 import GetUser from '../../components/userProfile/GetUser';
 import EmptyUser from '../../components/userProfile/EmptyUser';
+import EmtpyUserInfobar from '../../components/userProfile/userInfoBarCard/EmptyUserInfoBar';
+import GetUserInfobar from '../../components/userProfile/userInfoBarCard/GetUserInfoBar';
+
 
 import useRegisterStore from '../../stores/registerStore';
 import { RegisterStatus } from '../../types/enum/RegisterStatus';
@@ -35,10 +37,11 @@ const UserProfile = () => {
     titleElement.innerHTML = `@@@님의 페이지 | MAPU`; //api 호출 -> 사용자 타이틀에 추가
   }, []);
 
+  console.log(RegisterStatus.LOG_IN);
   return (
     <div className={styles1.container}>
       <GlobalNavigationBar />
-      <UserInfoBar />
+      {RegisterStatus.LOG_IN ? <GetUserInfobar /> : <EmtpyUserInfobar />}
       {RegisterStatus.LOG_IN ? <GetUser /> : <EmptyUser />}
       <main className={styles1.main}>
         <Outlet />