Refactor: AccountSetting 스켈레톤 적용

Author: lalaurrel

src/pages/Account/AccountSetting/index.tsx

@@ -12,8 +12,8 @@ import leave from '@assets/default/leave.svg';
 import Profile_s from '@assets/default/my-page.svg';
 
 import { OODDFrame } from '@components/Frame/Frame';
-import Loading from '@components/Loading/index';
 import Modal from '@components/Modal';
+import Skeleton from '@components/Skeleton';
 import { StyledText } from '@components/Text/StyledText';
 import TopBar from '@components/TopBar/index';
 
@@ -44,8 +44,7 @@ const AccountSetting: React.FC = () => {
 				setIsLoading(false);
 			}
 		};
-
-		getUserInfo();
+		setTimeout(getUserInfo, 1000);
 	}, []);
 
 	const handleConfirmLogout = () => {
@@ -68,7 +67,33 @@ const AccountSetting: React.FC = () => {
 	};
 
 	if (isLoading) {
-		return <Loading />;
+		return (
+			<OODDFrame>
+				<ProfileEditContainer>
+					<TopBar text="계정 관리" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
+					<ProfilePicWrapper>
+						<ProfilePic>
+							<Skeleton width={120} height={120} borderRadius={80} />
+						</ProfilePic>{' '}
+						<Row>
+							<Skeleton width="60%" height={20} />
+						</Row>
+						<Row>
+							<Skeleton width="100%" height={20} />
+						</Row>
+					</ProfilePicWrapper>
+
+					<List>
+						<ListItem>
+							<Skeleton width="100%" height={40} />
+						</ListItem>
+						<ListItem>
+							<Skeleton width="100%" height={40} />
+						</ListItem>
+					</List>
+				</ProfileEditContainer>
+			</OODDFrame>
+		);
 	}
 
 	return (

src/pages/Account/AccountSetting/styles.tsx

@@ -13,8 +13,6 @@ export const ProfilePicWrapper = styled.div`
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin-bottom: 1.25rem;
-	margin-top: 24px;
 `;
 
 export const ProfilePic = styled.div`
@@ -24,7 +22,6 @@ export const ProfilePic = styled.div`
 	border-radius: 50%;
 	overflow: hidden;
 	margin-top: 2.125rem;
-	margin-bottom: 1.375rem;
 
 	img {
 		width: 100%;
@@ -42,7 +39,7 @@ export const Row = styled.div`
 	justify-content: center;
 	align-items: center;
 	width: 100%;
-	margin-bottom: 10px;
+	margin-top: 10px;
 
 	${Label} {
 		width: auto;
@@ -67,7 +64,7 @@ export const List = styled.ul`
 export const ListItem = styled.li`
 	display: flex;
 	align-items: center;
-	padding: 15px 1.25rem;
+	padding: 15px 10px;
 	border-bottom: 0px solid ${({ theme }) => theme.colors.background.divider};
 	cursor: pointer;