[🖌 Design] 스켈레톤 UI 만들기 (홈, 프로필 페이지 스켈레톤 제작 완료) #204

src/components/Common/PostList/PostContent.jsx

@@ -30,14 +30,15 @@ export default function PostContent({ post }) {
         ) : (
           <PostImageWrap
             className={postImages.length > 1 ? 'postImgscroll' : ''}
+            height={
+              postImages.length > 1 || !postImages.length ? '100%' : '228px'
+            }
           >
-            {postImages &&
-              postImages.map((postImage, index) => (
+            {compressedImages.map((compressedImage, index) => (
                 <img
                   key={index}
-                  src={HandleNormalizeImage(postImage)}
+                src={compressedImage}
                   width={postImages.length > 1 ? '168px' : '304px'}
-                  height={postImages.length > 1 ? '126px' : '228px'}
                   alt=''
                 /> // comment객체가 'comment'라는 이름으로 또 감싸져 있어 안의 요소들로 바로 접근하기 위함
               ))}
@@ -77,7 +78,7 @@ const MovePostDetail = styled.button`
 
 const PostImageWrap = styled.div`
   width: 304px;
-  height: 100%;
+  height: ${(props) => props.height || '100%'};
 
   img {
     width: ${(props) => props.width};

src/components/Common/PostList/PostList.jsx

@@ -16,5 +16,5 @@ const PostLiStyle = styled.li`
   font-size: var(--font-md);
   padding-bottom: 20px;
   gap: 16px;
-  margin-top: 20px;
+  margin-top: 10px;
 `;

src/components/Common/Skeleton/ClassSkeleton.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Skeleton } from './Skeleton';
+
+export default function ClassSkeleton() {
+  return (
+    <ClassSkeletonWrap>
+      <SkeletonClasstitle></SkeletonClasstitle>
+      <SkeletonClassListWrap>
+        <SkeletonClassContent></SkeletonClassContent>
+        <SkeletonClassContent></SkeletonClassContent>
+        <SkeletonClassContent></SkeletonClassContent>
+      </SkeletonClassListWrap>
+    </ClassSkeletonWrap>
+  );
+}
+
+const ClassSkeletonWrap = styled.div`
+  padding: 10px;
+  background-color: #fff;
+`;
+const SkeletonClasstitle = styled.div`
+  width: 100%;
+  height: 14px;
+  margin-bottom: 16px;
+`;
+const SkeletonClassListWrap = styled.div`
+  padding-bottom: 10px;
+  display: flex;
+
+  gap: 10px;
+  overflow-x: scroll;
+
+  &::-webkit-scrollbar {
+    padding-top: 5px;
+    background-color: white;
+
+    height: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--border-color);
+    border-radius: 10px;
+    background-clip: padding-box;
+    border: 2px solid white;
+  }
+`;
+
+const SkeletonClassContent = styled(Skeleton)`
+  width: 140px;
+  height: 138px;
+  flex-shrink: 0;
+`;

src/components/Common/Skeleton/PostSkeleton.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled from 'styled-components';
+import UserSkeleton from './UserSkeleton';
+import { Skeleton } from './Skeleton';
+export default function PostSkeleton() {
+  return (
+    <SkeletonWrap>
+      <SkeletonPostList>
+        <UserSkeleton />
+        <SkeletonContent>
+          <SkeletonContentDetail>
+            <SkeletonContentDesc></SkeletonContentDesc>
+            <SkeletonContentDesc></SkeletonContentDesc>
+            <SkeletonContentImg></SkeletonContentImg>
+          </SkeletonContentDetail>
+        </SkeletonContent>
+      </SkeletonPostList>
+    </SkeletonWrap>
+  );
+}
+
+const SkeletonWrap = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+const SkeletonPostList = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
+  padding-bottom: 20px;
+  gap: 16px;
+`;
+const SkeletonContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-left: calc(42px + 10px);
+`;
+const SkeletonContentDetail = styled.div`
+  width: 304px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+const SkeletonContentDesc = styled(Skeleton)`
+  width: 100%;
+  height: 14px;
+`;
+const SkeletonContentImg = styled(Skeleton)`
+  height: 228px;
+  margin-top: 10px;
+  border-radius: 10px;
+`;

src/components/Common/Skeleton/ProfileSkeleton.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Skeleton } from './Skeleton';
+import PostListBtnOn from '../../../assets/img/icon-post-list-on.svg';
+import PostAlbumBtnOff from '../../../assets/img/icon-post-album-off.svg';
+import PostSkeleton from './PostSkeleton';
+import ClassSkeleton from './ClassSkeleton';
+
+export default function ProfileSkeleton(status, type) {
+  return (
+    <ProfileSkeletonWrap>
+      <SkeletonProfileSection>
+        <SkeletonProfileImg></SkeletonProfileImg>
+        <SkeletonProfileName></SkeletonProfileName>
+        <SkeletonProfileID></SkeletonProfileID>
+        <SkeletonProfileDesc></SkeletonProfileDesc>
+        <SkeletonProfileBtnWrap>
+          <SkeletonProfileBtn></SkeletonProfileBtn>
+          {type === 'teacher' && <SkeletonProfileBtn></SkeletonProfileBtn>}
+        </SkeletonProfileBtnWrap>
+      </SkeletonProfileSection>
+      <ClassSkeleton />
+      <SkeletonPostSection>
+        <SkeletonPostBtnWrap>
+          <img src={PostListBtnOn} alt='목록으로 보기 버튼' />
+          <img src={PostAlbumBtnOff} alt='앨범으로 보기 버튼' />
+        </SkeletonPostBtnWrap>
+        <SkeletonPostWrap>
+          <PostSkeleton />
+          <PostSkeleton />
+        </SkeletonPostWrap>
+      </SkeletonPostSection>
+    </ProfileSkeletonWrap>
+  );
+}
+
+const ProfileSkeletonWrap = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 10px auto;
+`;
+const SkeletonProfileSection = styled.div`
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px 0 26px;
+`;
+
+const SkeletonProfileImg = styled(Skeleton)`
+  width: 110px;
+  height: 110px;
+  border-radius: 50%;
+  margin-bottom: 16px;
+`;
+const SkeletonProfileName = styled(Skeleton)`
+  width: 126px;
+  height: 16px;
+  margin-bottom: 6px;
+`;
+const SkeletonProfileID = styled(Skeleton)`
+  width: 100px;
+  height: 12px;
+  margin-bottom: 16px;
+`;
+const SkeletonProfileDesc = styled(Skeleton)`
+  width: 200px;
+  height: 14px;
+`;
+const SkeletonProfileBtnWrap = styled.div`
+  display: flex;
+  gap: 10px;
+  margin-top: 24px;
+`;
+const SkeletonProfileBtn = styled(Skeleton)`
+  width: 120px;
+  height: 34px;
+  border-radius: 30px;
+  border: 1px solid var(--border-color);
+`;
+
+const SkeletonPostSection = styled.div`
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 5px;
+`;
+
+const SkeletonPostBtnWrap = styled.div`
+  width: 100%;
+  height: 44px;
+  display: flex;
+  justify-content: flex-end;
+  padding: 9px 11px;
+  gap: 5px;
+  border-bottom: 1.5px solid var(--background-color);
+  img {
+    width: 26px;
+    height: 26px;
+  }
+`;
+const SkeletonPostWrap = styled.div`
+  padding: 0 11px;
+`;
+
+const SkeletonClassSection = styled.div`
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 5px;
+`;

src/components/Common/Skeleton/Skeleton.jsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const Skeleton = styled.div`
+  width: 100%;
+  border-radius: 5px;
+  background-color: #c4c4c4;
+  animation: fade 2s infinite linear;
+
+  @keyframes fade {
+    0% {
+      opacity: 0.5;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0.5;
+    }
+  }
+`;

src/components/Common/Skeleton/UserSkeleton.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Skeleton } from './Skeleton';
+import MoreIcon from '../../../assets/img/icon-more-vertical.svg';
+export default function UserSkeleton() {
+  return (
+    <SkeletonUserWrapper>
+      <SkeletonUserInfo>
+        <SkeletonUserImage></SkeletonUserImage>
+        <SkeletonUserDetails>
+          <SkeletonUserName></SkeletonUserName>
+          <SkeletonUserID></SkeletonUserID>
+        </SkeletonUserDetails>
+      </SkeletonUserInfo>
+      <SkeletonMoreButton src={MoreIcon} />
+    </SkeletonUserWrapper>
+  );
+}
+
+const SkeletonUserWrapper = styled.div`
+  width: 100%;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const SkeletonUserInfo = styled.div`
+  display: flex;
+  gap: 12px;
+  align-items: center;
+`;
+
+const SkeletonUserImage = styled(Skeleton)`
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+`;
+
+const SkeletonUserDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+const SkeletonUserName = styled(Skeleton)`
+  width: 100px;
+  height: 14px;
+`;
+const SkeletonUserID = styled(Skeleton)`
+  width: 80px;
+  height: 12px;
+`;
+
+const SkeletonMoreButton = styled.img`
+  width: 18px;
+  height: 20px;
+`;