Feat: 메이트 규칙 상세보기, 메이트 수정하기 페이지 스켈레톤 UI 구현

Here-You · Feb 18, 2024 · 3065880 · 3065880
1 parent bb05852
commit 3065880
Show file tree

Hide file tree

Showing 6 changed files with 485 additions and 109 deletions.
diff --git a/src/pages/mate/ruleCheck/MateRuleDetailCheck.jsx b/src/pages/mate/ruleCheck/MateRuleDetailCheck.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import * as S from './MateRuleDetailCheck.style';
+import MateRuleDetailSkeleton from './MateRuleDetailSkeleton/MateRuleDetailSkeleton';
 import Logo from '/images/mypage/MyPageLogo.svg';
 import MateCommentList from '@/components/comment/mate/MateCommentList';
 import MateCommentInput from '@/components/comment/mate/commentInput/MateCommentInput';
@@ -14,60 +15,62 @@ const MateRuleDetailCheckPage = () => {
 
   const navigate = useNavigate();
 
-  if (loading) {
-    return <div>로딩 중 입니다..</div>;
-  }
-
   if (error) {
     return <div>에러가 발생했습니다.</div>;
   }
 
   return (
-    <S.Container>
-      <S.Wrapper>
-        <S.Header>
-          <S.Title>{data?.mainTitle}</S.Title>
-          <S.ProfileContainer>
-            {data?.detailMembers?.slice(0, 5).map(p => (
-              <S.ProfileBox key={p.id}>
-                <S.ProfileImages src={p.image ? p.image : Logo} />
-                <h3>{p.name}</h3>
-              </S.ProfileBox>
-            ))}
-            {data?.detailMembers?.length > 5 && ( //
-              <S.ProfileBox>
-                <h3>외 {data.detailMembers.length - 5} 명</h3>
-              </S.ProfileBox>
-            )}
-          </S.ProfileContainer>
-        </S.Header>
-        <S.Content>
-          {data?.rulePairs?.map((rule, index) => (
-            <S.TextContainer key={rule.id}>
-              <h3>{rule.ruleTitle}</h3>
-              <p>{rule.ruleDetail}</p>
-            </S.TextContainer>
-          ))}
-        </S.Content>
-      </S.Wrapper>
-      {editMode ? (
-        <S.UpdateBtn
-          onClick={() => {
-            handleSubmit();
-            setEditMode(false);
-          }}>
-          저장하기
-        </S.UpdateBtn>
+    <>
+      {loading ? (
+        <MateRuleDetailSkeleton />
       ) : (
-        <S.UpdateBtn onClick={() => navigate(`/mate/rule-edit/${ruleId}`)}>
-          수정하기
-        </S.UpdateBtn>
+        <S.Container>
+          <S.Wrapper>
+            <S.Header>
+              <S.Title>{data?.mainTitle}</S.Title>
+              <S.ProfileContainer>
+                {data?.detailMembers?.slice(0, 5).map(p => (
+                  <S.ProfileBox key={p.id}>
+                    <S.ProfileImages src={p.image ? p.image : Logo} />
+                    <h3>{p.name}</h3>
+                  </S.ProfileBox>
+                ))}
+                {data?.detailMembers?.length > 5 && ( //
+                  <S.ProfileBox>
+                    <h3>외 {data.detailMembers.length - 5} 명</h3>
+                  </S.ProfileBox>
+                )}
+              </S.ProfileContainer>
+            </S.Header>
+            <S.Content>
+              {data?.rulePairs?.map((rule, index) => (
+                <S.TextContainer key={rule.id}>
+                  <h3>{rule.ruleTitle}</h3>
+                  <p>{rule.ruleDetail}</p>
+                </S.TextContainer>
+              ))}
+            </S.Content>
+          </S.Wrapper>
+          {editMode ? (
+            <S.UpdateBtn
+              onClick={() => {
+                handleSubmit();
+                setEditMode(false);
+              }}>
+              저장하기
+            </S.UpdateBtn>
+          ) : (
+            <S.UpdateBtn onClick={() => navigate(`/mate/rule-edit/${ruleId}`)}>
+              수정하기
+            </S.UpdateBtn>
+          )}
+          <MateCommentInput ruleId={ruleId} />
+          <S.CommentsContainer>
+            <MateCommentList ruleId={ruleId} />
+          </S.CommentsContainer>
+        </S.Container>
       )}
-      <MateCommentInput ruleId={ruleId} />
-      <S.CommentsContainer>
-        <MateCommentList ruleId={ruleId} />
-      </S.CommentsContainer>
-    </S.Container>
+    </>
   );
 };
 

diff --git a/src/pages/mate/ruleCheck/MateRuleDetailSkeleton/MateRuleDetailSkeleton.jsx b/src/pages/mate/ruleCheck/MateRuleDetailSkeleton/MateRuleDetailSkeleton.jsx
@@ -0,0 +1,30 @@
+import * as S from './MateRuleDetailSkeleton.style';
+
+const MateRuleDetailSkeleton = () => {
+  return (
+    <S.Container>
+      <S.Wrapper>
+        <S.Header>
+          <S.Title />
+          <S.ProfileContainer>
+            <S.ProfileBox>
+              <S.ProfileImages />
+              <S.Title />
+            </S.ProfileBox>
+          </S.ProfileContainer>
+        </S.Header>
+        <S.Content>
+          {new Array(5).fill(0).map(() => (
+            <S.TextContainer>
+              <S.Text />
+              <S.Text />
+            </S.TextContainer>
+          ))}
+        </S.Content>
+      </S.Wrapper>
+      <S.UpdateBtn />
+    </S.Container>
+  );
+};
+
+export default MateRuleDetailSkeleton;
diff --git a/src/pages/mate/ruleCheck/MateRuleDetailSkeleton/MateRuleDetailSkeleton.style.js b/src/pages/mate/ruleCheck/MateRuleDetailSkeleton/MateRuleDetailSkeleton.style.js
@@ -0,0 +1,151 @@
+import styled, { keyframes } from 'styled-components';
+
+import theme from '@/theme';
+
+const skeletonGradient = keyframes`
+  0% {
+    background-color: rgba(165, 165, 165, 0.1);
+  }
+  50% {
+    background-color: rgba(165, 165, 165, 0.3);
+  }
+  100% {
+    background-color: rgba(165, 165, 165, 0.1);
+  }
+`;
+
+const Container = styled.div`
+  ${theme.ALIGN.COLUMN_CENTER};
+`;
+
+const Wrapper = styled.div`
+  width: 80%;
+  height: 900px;
+
+  border-radius: 20px;
+  padding: 20px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 20px;
+  }
+  animation: ${skeletonGradient} 1.5s infinite;
+`;
+
+const Header = styled.div`
+  ${theme.ALIGN.COLUMN_CENTER};
+  gap: 20px;
+`;
+
+const Title = styled.div`
+  width: 200px;
+  padding: 15px;
+  border-radius: 20px;
+  animation: ${skeletonGradient} 1.5s infinite;
+`;
+
+const ProfileContainer = styled.div`
+  ${theme.ALIGN.ROW_CENTER};
+`;
+
+const ProfileBox = styled.div`
+  ${theme.ALIGN.COLUMN_CENTER};
+  margin-right: 10px;
+`;
+
+const ProfileImages = styled.div`
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  margin-bottom: 10px;
+  object-fit: cover;
+  animation: ${skeletonGradient} 1.5s infinite;
+`;
+
+const Content = styled.div`
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+  border-radius: 20px;
+  margin-top: 20px;
+`;
+
+const TextContainer = styled.div`
+  ${theme.ALIGN.COLUMN_CENTER};
+  padding: 10px;
+  gap: 5px;
+  align-items: flex-start;
+  margin-bottom: 20px;
+`;
+
+const ContentTextInput = styled.textarea`
+  width: 80%;
+  padding: 9px;
+  border: none;
+  resize: none;
+  font-size: 0.8rem;
+  color: ${theme.COLOR.MAIN.GRAY};
+`;
+
+const AddButtonWrapper = styled.div`
+  ${theme.ALIGN.ROW_CENTER}
+`;
+
+const AddQuestionButton = styled.button`
+  width: 120px;
+  height: 40px;
+  border: none;
+  border-radius: 10px;
+  background-color: ${theme.COLOR.MAIN.LIGHT_GREEN};
+  cursor: pointer;
+
+  &:hover {
+    transform: scale(0.9);
+  }
+  animation: ${skeletonGradient} 1.5s infinite;
+`;
+
+const UpdateBtn = styled.button`
+  border: none;
+  width: 200px;
+  height: 50px;
+  margin-top: 20px;
+  border-radius: 20px;
+
+  animation: ${skeletonGradient} 1.5s infinite;
+`;
+
+const CommentsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  padding: 20px 40px;
+`;
+
+const Text = styled.div`
+  width: 50%;
+  padding: 10px;
+  border-radius: 20px;
+  animation: ${skeletonGradient} 1.5s infinite;
+`;
+
+export {
+  Container,
+  Wrapper,
+  ProfileBox,
+  ProfileContainer,
+  ProfileImages,
+  Header,
+  Content,
+  TextContainer,
+  Title,
+  ContentTextInput,
+  AddButtonWrapper,
+  AddQuestionButton,
+  UpdateBtn,
+  CommentsContainer,
+  Text,
+};