Merge pull request #236 from prgrms-fe-devcourse/feature/#230-profile…

…-page-list-none

Feature/#230 profile page list none

src/components/Follow/FollowList.tsx

@@ -60,27 +60,44 @@ const FollowList = ({ type, follows, onUnfollow }: Following | Followers) => {
     fetchUsers();
   }, [fetchUsers]);
 
+  if (loading) {
+    return <Spinner loading={loading} />;
+  }
+
+  if (users.length === 0) {
+    return (
+      <Text>
+        아직 {type === 'following' ? '팔로잉' : '팔로워'} 목록이 없습니다.
+      </Text>
+    );
+  }
+
   return (
-    <>
-      <List>
-        {users.map((user, index) => (
-          <UserListItem key={user._id}>
-            <UserItem
-              type={type}
-              user={user}
-              onUnfollow={onUnfollow}
-              follow={follows[index]}
-            />
-          </UserListItem>
-        ))}
-      </List>
-      <Spinner loading={loading} />
-    </>
+    <List>
+      {users.map((user, index) => (
+        <UserListItem key={user._id}>
+          <UserItem
+            type={type}
+            user={user}
+            onUnfollow={onUnfollow}
+            follow={follows[index]}
+          />
+        </UserListItem>
+      ))}
+    </List>
   );
 };
 
 export default FollowList;
 
+const Text = styled.h3`
+  margin-top: 4rem;
+  font-weight: 400;
+  font-size: 1.5rem;
+  text-align: center;
+  color: ${COLORS.brownGray};
+`;
+
 const List = styled.ul`
   width: 100%;
 

src/components/Notification/NotificationList.tsx

@@ -43,17 +43,17 @@ const NotificationList = () => {
     fetchNotifications();
   }, [fetchSeenNotifications, fetchNotifications]);
 
+  if (notifications.length === 0) {
+    return <Text>아무 알림도 오지 않았어요 ... 🦔</Text>;
+  }
+
   return (
     <List>
-      {notifications.length === 0 ? (
-        <Text>아무 알림도 오지 않았어요 ... 🦔</Text>
-      ) : (
-        notifications
-          .filter((notification) => notification.author._id !== user._id)
-          .map((notification) => (
-            <Notification key={notification._id} {...notification} />
-          ))
-      )}
+      {notifications
+        .filter((notification) => notification.author._id !== user._id)
+        .map((notification) => (
+          <Notification key={notification._id} {...notification} />
+        ))}
     </List>
   );
 };
@@ -75,5 +75,5 @@ const Text = styled.h3`
   font-weight: 400;
   font-size: 1.5rem;
   text-align: center;
-  color: ${COLORS.lightBrown};
+  color: ${COLORS.brownGray};
 `;

src/components/Post/PostList.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { userState } from '../../recoil/atoms/user';
 import { getPostsByAuthor } from '../../utils/api/post';
 import Post from './Post';
+import COLORS from '../../utils/colors';
 import type { PostResponse } from '../../types/api/post';
 
 interface Props {
@@ -12,7 +13,7 @@ interface Props {
 
 const PostList = ({ authorId }: Props) => {
   const { _id: myId } = useRecoilValue(userState);
-  const [posts, setPosts] = useState<PostResponse[]>();
+  const [posts, setPosts] = useState<PostResponse[]>([]);
   const checkIsMine = authorId === myId ? true : false;
 
   const fetchPosts = useCallback(async () => {
@@ -24,12 +25,13 @@ const PostList = ({ authorId }: Props) => {
     fetchPosts();
   }, [fetchPosts, authorId]);
 
+  if (posts.length === 0) return <Text>생성된 그라운드가 없습니다.</Text>;
+
   return (
     <UnorderedList>
-      {posts &&
-        posts.map((post) => (
-          <Post key={post._id} checkIsMine={checkIsMine} {...post} />
-        ))}
+      {posts.map((post) => (
+        <Post key={post._id} checkIsMine={checkIsMine} {...post} />
+      ))}
     </UnorderedList>
   );
 };
@@ -39,3 +41,11 @@ export default PostList;
 const UnorderedList = styled.ul`
   width: 100%;
 `;
+
+const Text = styled.h3`
+  margin-top: 4rem;
+  font-weight: 400;
+  font-size: 1.5rem;
+  text-align: center;
+  color: ${COLORS.brownGray};
+`;