feature-079: 마이페이지 스켈레톤 구현

teamViNO · Feb 19, 2024 · 50ddbd6 · 50ddbd6
1 parent 22bec4f
commit 50ddbd6
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 29 deletions.
diff --git a/src/components/skeleton/ProfilePageSkeleton.tsx b/src/components/skeleton/ProfilePageSkeleton.tsx
@@ -3,7 +3,35 @@ import * as ProfilePageSkeletonStyles from '@/styles/skeleton/ProfilePageSkeleto
 const ProfilePageSkeleton = () => {
   return (
     <ProfilePageSkeletonStyles.Container>
-      <ProfilePageSkeletonStyles.Title />
+      <ProfilePageSkeletonStyles.Rectangle className="medium" />
+      <ProfilePageSkeletonStyles.Rectangle />
+      <ProfilePageSkeletonStyles.Box />
+      <ProfilePageSkeletonStyles.Wrap>
+        <ProfilePageSkeletonStyles.Box className="large" />
+        <ProfilePageSkeletonStyles.InnerWrap>
+          <ProfilePageSkeletonStyles.Rectangle className="small" />
+          <ProfilePageSkeletonStyles.Chip className="medium" />
+        </ProfilePageSkeletonStyles.InnerWrap>
+      </ProfilePageSkeletonStyles.Wrap>
+      <ProfilePageSkeletonStyles.CommonWrap>
+        <ProfilePageSkeletonStyles.CommonFlex>
+          <ProfilePageSkeletonStyles.Rectangle className="small" />
+          <ProfilePageSkeletonStyles.Chip className="large" />
+          <ProfilePageSkeletonStyles.Rectangle className="large" />
+        </ProfilePageSkeletonStyles.CommonFlex>
+      </ProfilePageSkeletonStyles.CommonWrap>
+      <ProfilePageSkeletonStyles.CommonWrap>
+        <ProfilePageSkeletonStyles.CommonFlex>
+          <ProfilePageSkeletonStyles.Rectangle className="small" />
+          <ProfilePageSkeletonStyles.Chip className="large" />
+        </ProfilePageSkeletonStyles.CommonFlex>
+      </ProfilePageSkeletonStyles.CommonWrap>
+      <ProfilePageSkeletonStyles.CommonWrap>
+        <ProfilePageSkeletonStyles.CommonFlex>
+          <ProfilePageSkeletonStyles.Rectangle className="small" />
+          <ProfilePageSkeletonStyles.Chip className="large" />
+        </ProfilePageSkeletonStyles.CommonFlex>
+      </ProfilePageSkeletonStyles.CommonWrap>
     </ProfilePageSkeletonStyles.Container>
   );
 };

diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
@@ -2,9 +2,10 @@ import { useRecoilState, useSetRecoilState } from 'recoil';
 import { Account, ServiceSetting } from '@/components/ProfilePage';
 import { userInfoState, userTokenState } from '@/stores/user';
 import { Wrapper } from '@/styles/ProfilePage';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import WithdrawModal from '@/components/modals/WIthdrawModal';
 import NoticeModal from '@/components/modals/NoticeModal';
+import ProfilePageSkeleton from '@/components/skeleton/ProfilePageSkeleton';
 
 const ProfilePage = () => {
   const [reason, setReason] = useState('');
@@ -36,33 +37,40 @@ const ProfilePage = () => {
 
   return (
     <>
-      <Wrapper>
-        <div className="container">
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 60 }}>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-              <h1 className="title">내 정보</h1>
-              <span className="description">여기서 계정 정보를 관리하세요</span>
-            </div>
+      {!userInfo && <ProfilePageSkeleton />}
+      {userInfo && (
+        <Wrapper>
+          <div className="container">
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 60 }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                <h1 className="title">내 정보</h1>
+                <span className="description">
+                  여기서 계정 정보를 관리하세요
+                </span>
+              </div>
 
-            {userInfo && (
-              <>
-                <Account />
+              {userInfo && (
+                <>
+                  <Account />
 
-                <ServiceSetting />
-              </>
-            )}
-          </div>
+                  <ServiceSetting />
+                </>
+              )}
+            </div>
 
-          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
-            <button className="other" onClick={handleOpenModal}>
-              회원탈퇴
-            </button>
-            <button className="other" onClick={handleOpenModal}>
-              로그아웃
-            </button>
+            <div
+              style={{ display: 'flex', justifyContent: 'flex-end', gap: 12 }}
+            >
+              <button className="other" onClick={handleOpenModal}>
+                회원탈퇴
+              </button>
+              <button className="other" onClick={handleOpenModal}>
+                로그아웃
+              </button>
+            </div>
           </div>
-        </div>
-      </Wrapper>
+        </Wrapper>
+      )}
 
       {isLogoutModalOpen && (
         <NoticeModal

diff --git a/src/styles/category/index.style.ts b/src/styles/category/index.style.ts
@@ -14,10 +14,10 @@ const CommonIconBackground = styled.div`
 `;
 
 export const Container = styled.div`
-  padding: 60px 60px 40px 120px;
+  padding: 60px 0 40px;
   width: 100%;
   margin-inline: auto;
-  max-width: 1440px;
+  max-width: 910px;
 `;
 
 export const MenuWrap = styled.div`

diff --git a/src/styles/skeleton/ProfilePageSkeleton.style.ts b/src/styles/skeleton/ProfilePageSkeleton.style.ts
@@ -1,11 +1,81 @@
 import styled from 'styled-components';
 import { CommonBackground } from './CategoryPageSkeleton.style';
 
+export const CommonFlex = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 export const Container = styled.div`
+  padding: 60px 0 121px;
+  margin-inline: auto;
   width: 873px;
 `;
 
-export const Title = styled(CommonBackground)`
-  width: 90px;
+export const Rectangle = styled(CommonBackground)`
+  width: 220px;
+  height: 20px;
+  margin: 12px 0 59px;
+
+  &.small,
+  &.medium,
+  &.large {
+    margin: 0;
+  }
+  &.small {
+    width: 41px;
+  }
+
+  &.medium {
+    width: 90px;
+    height: 40px;
+  }
+
+  &.large {
+    width: 274px;
+    margin-top: 11px;
+    align-self: flex-end;
+  }
+`;
+
+export const Box = styled(CommonBackground)`
+  width: 40px;
   height: 40px;
+
+  &.large {
+    width: 84px;
+    height: 84px;
+  }
+`;
+
+export const Wrap = styled.div`
+  display: flex;
+  margin-top: 53px;
+  justify-content: flex-end;
+`;
+
+export const InnerWrap = styled(CommonFlex)`
+  justify-content: space-between;
+  margin-left: 20px;
+`;
+
+export const Chip = styled(CommonBackground)`
+  width: 41px;
+  height: 20px;
+
+  &.medium {
+    width: 734px;
+    height: 43px;
+  }
+
+  &.large {
+    width: 838px;
+    height: 50px;
+    margin-top: 10px;
+  }
+`;
+
+export const CommonWrap = styled(CommonFlex)`
+  margin-top: 45px;
+  align-items: flex-end;
 `;