#12 Add userItem skeleton

Allie-Knowing · Jul 8, 2022 · 1c0e481 · 1c0e481
1 parent b328345
commit 1c0e481
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 27 deletions.
diff --git a/pages/myPage/viewFollow.tsx b/pages/myPage/viewFollow.tsx
@@ -1,6 +1,6 @@
-import { FC, useEffect, useState } from "react";
+import { FC, useState } from "react";
 import styled from "@emotion/styled";
-import { UserItem, SelectButton } from "@views/viewFollow";
+import { UserItem, SelectButton, UserItemSkeleton } from "@views/viewFollow";
 import { useQuery } from "react-query";
 import queryKey from "@constants/queryKey";
 import { getFollowerList, getFollowingList } from "@apis/myPage";
@@ -12,14 +12,14 @@ const ViewFollowContainer: FC = () => {
   const [isFollower, setIsFollower] = useState<boolean>(true);
 
   if (res1.isLoading || res1.isLoading) {
-    return <div>loading</div>;
+    return <UserItemSkeleton />;
   }
 
   if (res1.isError || res2.isError) {
     return <div>error</div>;
   }
 
-  const whatMap = () => (isFollower ? res1.data : res2.data);
+  const whatsSelected = () => (isFollower ? res1.data : res2.data);
 
   return (
     <Container>
@@ -43,7 +43,7 @@ const ViewFollowContainer: FC = () => {
         initalName="follower-list"
       />
       <UserItems>
-        {whatMap().map((ele) => (
+        {whatsSelected().map((ele) => (
           <UserItem key={ele.id} profile={ele.profile} name={ele.name} />
         ))}
       </UserItems>

diff --git a/views/myPage/UserInfoSkeleton.tsx b/views/myPage/UserInfoSkeleton.tsx
@@ -1,5 +1,22 @@
 import styled from "@emotion/styled";
 
+const UserInfoSkeleton = () => (
+  <Container>
+    <Outer>
+      <ProfileImage />
+      <Inner>
+        <Name>ㅇㅇㅇ</Name>
+        <FollowContainer>
+          <Follow>ㅇㅇㅇ 0</Follow>
+          <Follow>ㅇㅇㅇ 0</Follow>
+        </FollowContainer>
+      </Inner>
+    </Outer>
+  </Container>
+);
+
+export default UserInfoSkeleton;
+
 const Container = styled.section`
   background-color: ${({ theme }) => theme.colors.grayscale.scale10};
   padding: 16px 20px;
@@ -16,7 +33,7 @@ const ProfileImage = styled.div`
   border-radius: 50%;
   width: 65px;
   height: 65px;
-  background-color: ${({ theme }) => theme.colors.grayscale.scale40};
+  background-color: ${({ theme }) => theme.colors.grayscale.scale50};
 `;
 
 const Inner = styled.div`
@@ -33,30 +50,13 @@ const FollowContainer = styled.div`
 
 const Follow = styled.p`
   font-size: 14px;
-  color: ${({ theme }) => theme.colors.grayscale.scale20};
-  background-color: ${({ theme }) => theme.colors.grayscale.scale20};
+  color: ${({ theme }) => theme.colors.grayscale.scale50};
+  background-color: ${({ theme }) => theme.colors.grayscale.scale50};
 `;
 
 const Name = styled.p`
   font-size: 16px;
-  color: ${({ theme }) => theme.colors.grayscale.scale20};
-  background-color: ${({ theme }) => theme.colors.grayscale.scale20};
+  color: ${({ theme }) => theme.colors.grayscale.scale50};
+  background-color: ${({ theme }) => theme.colors.grayscale.scale50};
   margin-bottom: 3px;
 `;
-
-const UserInfoSkeleton = () => (
-  <Container>
-    <Outer>
-      <ProfileImage />
-      <Inner>
-        <Name>ㅇㅇㅇ</Name>
-        <FollowContainer>
-          <Follow>ㅇㅇㅇ 0</Follow>
-          <Follow>ㅇㅇㅇ 0</Follow>
-        </FollowContainer>
-      </Inner>
-    </Outer>
-  </Container>
-);
-
-export default UserInfoSkeleton;
diff --git a/views/viewFollow/UserItemSkeleton.tsx b/views/viewFollow/UserItemSkeleton.tsx
@@ -0,0 +1,45 @@
+import styled from "@emotion/styled";
+
+const UserItemSkeleton = () => (
+  <Container>
+    {Array(5)
+      .fill(0)
+      .map((_, idx) => (
+        <UserItemConatainer key={idx}>
+          <ProfileImage />
+          <Name>ㅇㅇㅇㅇㅇㅇㅇㅇㅇ</Name>
+        </UserItemConatainer>
+      ))}
+  </Container>
+);
+
+export default UserItemSkeleton;
+
+const Container = styled.section`
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+`;
+
+const UserItemConatainer = styled.div`
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.grayscale.scale10};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px 20px;
+`;
+
+const ProfileImage = styled.div`
+  border-radius: 50%;
+  background-color: ${({ theme }) => theme.colors.grayscale.scale50};
+  width: 48px;
+  height: 48px;
+`;
+
+const Name = styled.p`
+  font-size: 14px;
+  margin-left: 20px;
+  background-color: ${({ theme }) => theme.colors.grayscale.scale50};
+  color: ${({ theme }) => theme.colors.grayscale.scale50};
+`;
diff --git a/views/viewFollow/index.ts b/views/viewFollow/index.ts
@@ -1,2 +1,3 @@
 export { default as UserItem } from "./UserItem";
 export { default as SelectButton } from "./SelectButton";
+export { default as UserItemSkeleton } from "./UserItemSkeleton";