style: 팔로워 팔로잉 스타일 완료

KUIT-MAPU · Aug 17, 2024 · e49630e · e49630e
1 parent d51855c
commit e49630e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 12 deletions.
diff --git a/src/components/userProfile/followModal/Follower.module.scss b/src/components/userProfile/followModal/Follower.module.scss
@@ -57,7 +57,7 @@
 }
 
 .userList {
-  flex: 1;
+  width: 380px;
   overflow-y: auto;
   margin-top: 8px;
   padding-right: 4px; 
@@ -73,8 +73,7 @@
   align-items: center;
   flex-direction: row;
   width: 380px;
-  height: 60px;
-  padding: 8px;
+  height: 52px;
   margin-bottom: 8px;
   border-radius: 6px;
   justify-content: space-between;

diff --git a/src/components/userProfile/followModal/Follower.tsx b/src/components/userProfile/followModal/Follower.tsx
@@ -1,6 +1,6 @@
 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';
@@ -49,7 +49,7 @@ const Follower = ({ onClose }: { onClose: () => void }) => {
                         src={user.profileImageUrl}
                         alt="mapImage"
                         className={styles.userProfilePic}
-                      />
+                />
                 <div className={styles.userName}>{user.nickname}</div>
               </div>
               <button className={styles.isFollow}>

diff --git a/src/components/userProfile/followModal/Following.module.scss b/src/components/userProfile/followModal/Following.module.scss
@@ -56,17 +56,16 @@
   color: var(--gray_400);
 }
 
-
 .userList {
-  flex: 1;
+  width: 380px;
   overflow-y: auto;
   margin-top: 8px;
-  padding-right: 4px; /* To ensure padding when scrolling */
+  padding-right: 4px; 
   gap: 6px;
 }
 
 ::-webkit-scrollbar {
-  width: 6px; /* 스크롤 바의 너비 */
+  width: 6px;
 }
 
 .userItem {
@@ -75,7 +74,6 @@
   flex-direction: row;
   width: 380px;
   height: 52px;
-  padding: 8px;
   margin-bottom: 8px;
   border-radius: 6px;
   justify-content: space-between;
@@ -92,7 +90,7 @@
   width: 40px;
   height: 40px;
   border-radius: 100px;
-  margin-right: 12px;
+  margin-right: 2px;
   border: 1px;
 }
 

diff --git a/src/components/userProfile/followModal/Following.tsx b/src/components/userProfile/followModal/Following.tsx
@@ -46,7 +46,11 @@ const Following = ({ onClose }: { onClose: () => void }) => {
           {followingUsers.map((user: any) => (
             <div key={user.userId} className={styles.userItem}>
               <div className={styles.userInfo}>
-                <User/>
+              <img
+                        src={user.profileImageUrl}
+                        alt="mapImage"
+                        className={styles.userProfilePic}
+                      />
                 <div className={styles.userName}>{user.nickname}</div>
               </div>
               <button className={styles.isFollow}>