Refactor: post에 스켈레톤 적용

Author: lalaurrel

src/pages/Post/index.tsx

@@ -7,14 +7,18 @@ import { modifyPostRepresentativeStatusApi, deletePostApi } from '@apis/post';
 import { isPostRepresentativeAtom, postIdAtom, userAtom } from '@recoil/Post/PostAtom';
 import { getCurrentUserId } from '@utils/getCurrentUserId';
 
+import back from '@assets/arrow/left.svg';
 import Delete from '@assets/default/delete.svg';
 import Edit from '@assets/default/edit.svg';
 import Pin from '@assets/default/pin.svg';
 
 import BottomSheet from '@components/BottomSheet';
 import BottomSheetMenu from '@components/BottomSheet/BottomSheetMenu';
 import OptionsBottomSheet from '@components/BottomSheet/OptionsBottomSheet';
+import { OODDFrame } from '@components/Frame/Frame';
 import Modal from '@components/Modal';
+import Skeleton from '@components/Skeleton';
+import TopBar from '@components/TopBar/index';
 
 import type { BottomSheetMenuProps } from '@components/BottomSheet/BottomSheetMenu/dto';
 import type { BottomSheetProps } from '@components/BottomSheet/dto';
@@ -23,6 +27,8 @@ import type { ModalProps } from '@components/Modal/dto';
 
 import PostBase from './PostBase/index';
 
+import { PicWrapper, NameWrapper, InfoWrapper, PostWrapper } from './styles';
+
 const Post: React.FC = () => {
 	const user = useRecoilValue(userAtom);
 	const postId = useRecoilValue(postIdAtom);
@@ -37,6 +43,8 @@ const Post: React.FC = () => {
 	const [modalContent, setModalContent] = useState('');
 	const [postPinStatus, setPostPinStatus] = useState<'지정' | '해제'>('지정');
 
+	const [isLoading, setIsLoading] = useState(true);
+
 	const navigate = useNavigate();
 	const currentUserId = getCurrentUserId();
 
@@ -87,6 +95,10 @@ const Post: React.FC = () => {
 	};
 
 	useEffect(() => {
+		setTimeout(() => {
+			setIsLoading(false);
+		}, 5000);
+
 		// 현재 게시글이 내 게시글인지 확인
 		if (user?.id && postId) {
 			setIsMyPost(currentUserId === user.id);
@@ -163,6 +175,25 @@ const Post: React.FC = () => {
 		content: modalContent,
 	};
 
+	if (isLoading) {
+		return (
+			<OODDFrame>
+				<TopBar LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
+				<InfoWrapper>
+					<PicWrapper>
+						<Skeleton width={40} height={40} borderRadius={40} />
+					</PicWrapper>
+					<NameWrapper>
+						<Skeleton width={100} height={20} />
+					</NameWrapper>
+				</InfoWrapper>
+				<PostWrapper>
+					<Skeleton width="100%" height={800} />
+				</PostWrapper>
+			</OODDFrame>
+		);
+	}
+
 	return (
 		<>
 			<PostBase onClickMenu={handleMenuOpen} />

src/pages/Post/styles.tsx

@@ -1,28 +1,21 @@
 import { styled } from 'styled-components';
 
-export const InputLayout = styled.div`
+export const InfoWrapper = styled.div`
 	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
+	flex-direction: row;
+	align-items: left;
+`;
+
+export const PicWrapper = styled.div`
+	margin-left: 47px;
+`;
+
+export const NameWrapper = styled.div`
+	margin-left: 10px;
+	margin-top: 10px;
+`;
 
-	textarea {
-		display: block;
-		width: calc(100% - 3rem);
-		height: 5.75rem;
-		border-radius: 0.125rem;
-		border: 0.0625rem solid ${({ theme }) => theme.colors.gray[600]};
-		margin-bottom: 5.875rem;
-		z-index: 2;
-		margin-top: -3.75rem;
-		outline: none;
-		padding: 0.8125rem 0.9375rem;
-		font-family: 'Pretendard Variable';
-		font-size: 1rem;
-		font-style: normal;
-		font-weight: 300;
-		line-height: 150%;
-		color: ${({ theme }) => theme.colors.text.primary};
-		resize: none;
-	}
+export const PostWrapper = styled.div`
+	margin-top: 10px;
+	padding-inline: 30px;
 `;