#12 Add userInfo skeleton'

views/myPage/UserInfo.tsx

@@ -4,13 +4,14 @@ import ImageWithDefault from "@components/ImageWithDefault";
 import { useQuery } from "react-query";
 import queryKey from "@constants/queryKey";
 import { getMyInfo } from "@apis/myPage";
+import { UserInfoSkeleton } from "@views/myPage";
 
 const UserInfo: FC = () => {
   const { data, isLoading, isError } = useQuery([queryKey.myInfo], getMyInfo);
   const shortenData = data?.data.data;
 
   if (isLoading) {
-    return <div>loading</div>;
+    return <UserInfoSkeleton />;
   }
 
   if (isError) {
@@ -67,7 +68,7 @@ const FollowContainer = styled.div`
 
 const Follow = styled.p`
   font-size: 14px;
-  color: #97979c;
+  color: ${({ theme }) => theme.colors.grayscale.scale40};
 `;
 
 const Name = styled.p`

views/myPage/UserInfoSkeleton.tsx

@@ -0,0 +1,62 @@
+import styled from "@emotion/styled";
+
+const Container = styled.section`
+  background-color: ${({ theme }) => theme.colors.grayscale.scale10};
+  padding: 16px 20px;
+`;
+
+const Outer = styled.div`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+`;
+
+const ProfileImage = styled.div`
+  border-radius: 50%;
+  width: 65px;
+  height: 65px;
+  background-color: ${({ theme }) => theme.colors.grayscale.scale40};
+`;
+
+const Inner = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: 16px;
+`;
+
+const FollowContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+`;
+
+const Follow = styled.p`
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.grayscale.scale20};
+  background-color: ${({ theme }) => theme.colors.grayscale.scale20};
+`;
+
+const Name = styled.p`
+  font-size: 16px;
+  color: ${({ theme }) => theme.colors.grayscale.scale20};
+  background-color: ${({ theme }) => theme.colors.grayscale.scale20};
+  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;

views/myPage/index.ts

@@ -2,3 +2,4 @@ export { default as UserInfo } from "./UserInfo";
 export { default as ToggleButton } from "./ToggleButton";
 export { default as VideoLayout } from "./VideoLayout";
 export { default as VideoItem } from "./VideoItem";
+export { default as UserInfoSkeleton } from "./UserInfoSkeleton";