[FE] refactor: 친구 리스트 디자인 수정 및 명수 안내 (#69)

Author: chysis

src/frontend/src/components/friend/FriendsList/index.tsx

@@ -29,6 +29,7 @@ const friends: Friend[] = [
 const FriendsList = () => {
   return (
     <S.FriendsList>
+      <S.FriendCount>모든 친구 - {friends.length}명</S.FriendCount>
       {friends.map((friend, index) => (
         <S.FriendItem key={`${friend.name}_${index}`}>
           <S.FriendProfileImage $imageUrl={friend.profileImageUrl}>

src/frontend/src/components/friend/FriendsList/styles.ts

@@ -8,19 +8,24 @@ export const FriendsList = styled.ul`
 
   width: 100%;
   margin-top: 0.8rem;
+  padding: 0 2rem 0 3rem;
 
   color: ${({ theme }) => theme.colors.dark[300]};
 `;
 
+export const FriendCount = styled(ChipText)`
+  margin: 1.6rem 0 1rem;
+  color: ${({ theme }) => theme.colors.dark[300]};
+`;
+
 export const FriendItem = styled.li`
   cursor: pointer;
 
   display: flex;
   align-items: center;
 
   height: 6.2rem;
-  margin: 0 2rem 0 3rem;
-  padding: 1.6rem 1rem;
+  border-top: 0.1rem solid ${({ theme }) => theme.colors.dark[500]};
   border-radius: 0.4rem;
 
   &:hover {

src/frontend/src/components/friend/PendingFriendsList/index.tsx

@@ -31,6 +31,7 @@ const PendingFriendsList = () => {
 
   return (
     <S.FriendsList>
+      <S.FriendCount>대기 중인 친구 - {friends.length}명</S.FriendCount>
       {friends.map((friend, index) => (
         <S.FriendItem key={`${friend.name}_${index}`}>
           <S.FriendInfoContainer>

src/frontend/src/components/friend/PendingFriendsList/styles.ts

@@ -8,10 +8,16 @@ export const FriendsList = styled.ul`
 
   width: 100%;
   margin-top: 0.8rem;
+  padding: 0 2rem 0 3rem;
 
   color: ${({ theme }) => theme.colors.dark[300]};
 `;
 
+export const FriendCount = styled(ChipText)`
+  margin: 1.6rem 0 1rem;
+  color: ${({ theme }) => theme.colors.dark[300]};
+`;
+
 export const FriendItem = styled.li`
   cursor: pointer;
 
@@ -20,8 +26,7 @@ export const FriendItem = styled.li`
   justify-content: space-between;
 
   height: 6.2rem;
-  margin: 0 2rem 0 3rem;
-  padding: 1.6rem 1rem;
+  border-top: 0.1rem solid ${({ theme }) => theme.colors.dark[500]};
   border-radius: 0.4rem;
 
   &:hover {