모임 상세페이지 스켈레톤 구현

frontend/src/components/CommentCard/CommentCardSkeleton.tsx

@@ -0,0 +1,25 @@
+import * as S from '@_components/CommentCard/CommentCard.style';
+
+import SkeletonPiece from '@_components/Skeleton/SkeletonPiece';
+import { useTheme } from '@emotion/react';
+
+export default function CommentCardSkeleton() {
+  const theme = useTheme();
+
+  return (
+    <div css={S.commentContainer()}>
+      <div css={S.commentWrapper({ theme, isChecked: false })}>
+        <SkeletonPiece width="3rem" height="3rem" />
+        <div css={S.commnetBox()}>
+          <div css={S.commnetHeader}>
+            <div css={S.commentHeaderLeft}>
+              <SkeletonPiece width="4.1rem" height="1.6rem" />
+              <SkeletonPiece width="8.3rem" height="1.4rem" />
+            </div>
+          </div>
+          <SkeletonPiece width="19rem" height="1.4rem" />
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/CommentList/CommentListSkeleton.tsx

@@ -0,0 +1,22 @@
+import * as S from '@_components/CommentList/ComentList.style';
+
+import CommentCardSkeleton from '@_components/CommentCard/CommentCardSkeleton';
+import MessageInput from '@_components/Input/MessagInput/MessageInput';
+
+export default function CommentListSkeleton() {
+  return (
+    <div css={S.commentListBox()}>
+      <CommentCardSkeleton />
+      <CommentCardSkeleton />
+      <CommentCardSkeleton />
+      <CommentCardSkeleton />
+      <MessageInput
+        placeHolder={'메세지를 입력해주세요'}
+        disabled={true}
+        onSubmit={(message: string) => {
+          message;
+        }}
+      ></MessageInput>
+    </div>
+  );
+}

frontend/src/components/MoimDescription/MoimDescriptionSkeleton.tsx

@@ -0,0 +1,34 @@
+import * as S from './MoimDescription.style';
+
+import { PropsWithChildren } from 'react';
+import SkeletonPiece from '@_components/Skeleton/SkeletonPiece';
+import { useTheme } from '@emotion/react';
+
+interface MoimDescriptionProps extends PropsWithChildren {
+  title?: string;
+  color?: string;
+}
+
+export default function MoimDescriptionSkeleton(props: MoimDescriptionProps) {
+  const theme = useTheme();
+  const { title, color = '', children } = props;
+
+  if (title === '') {
+    return;
+  }
+
+  return (
+    <div css={S.containerStyle({ theme, color })}>
+      {title && <h2 css={S.titleStyle({ theme })}>{title}</h2>}
+      {!title && <SkeletonPiece height="2.4rem" width="10rem" />}
+      {!children && (
+        <div css={S.descriptionStyle({ theme })}>
+          <SkeletonPiece height="2.4rem" width="100%" />
+          <SkeletonPiece height="2.4rem" width="100%" />
+          <SkeletonPiece height="2.4rem" width="100%" />
+        </div>
+      )}
+      {children && children}
+    </div>
+  );
+}

frontend/src/components/MoimInformation/MoimInfomationSkeleton.tsx

@@ -0,0 +1,39 @@
+import * as S from './MoimInformation.style';
+
+import SkeletonPiece from '@_components/Skeleton/SkeletonPiece';
+import { useTheme } from '@emotion/react';
+
+export default function MoimInformationSkeleton() {
+  const theme = useTheme();
+
+  return (
+    <div css={S.containerStyle()}>
+      <h2 css={S.titleStyle({ theme })}>모임 정보</h2>
+      <div css={S.cardStyle({ theme })}>
+        <div css={S.rowStyle({ theme })}>
+          <span>날짜</span>
+          <SkeletonPiece width="10rem" height="4rem" />
+        </div>
+
+        <div css={S.rowStyle({ theme })}>
+          <span>시간</span>
+          <SkeletonPiece width="5rem" height="4rem" />
+        </div>
+
+        <div css={S.rowStyle({ theme })}>
+          <span>장소</span>
+          <SkeletonPiece width="20rem" height="4rem" />
+        </div>
+
+        <div css={S.rowStyle({ theme })}>
+          <span>최대 인원</span>
+          <SkeletonPiece width="3.3rem" height="4rem" />
+        </div>
+        <div css={S.rowStyle({ theme })}>
+          <span>현재 참여 인원</span>
+          <SkeletonPiece width="3.3rem" height="4rem" />
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/MoimSummary/MoimSummarySkeleton.tsx

@@ -0,0 +1,15 @@
+import * as S from './MoimSummary.style';
+
+import SkeletonPiece from '@_components/Skeleton/SkeletonPiece';
+import TagSkeleton from '@_components/Tag/TagSkeleton';
+
+export default function MoimSummarySkeleton() {
+  return (
+    <div css={S.containerStyle}>
+      <div css={S.titleBox()}>
+        <SkeletonPiece width="50%" height="3.5rem" />
+        <TagSkeleton />
+      </div>
+    </div>
+  );
+}

frontend/src/components/ProfileList/ProfileListSkeleton.tsx

@@ -0,0 +1,21 @@
+import * as S from './ProfileList.style';
+
+import { Fragment } from 'react';
+import SkeletonPiece from '@_components/Skeleton/SkeletonPiece';
+import { useTheme } from '@emotion/react';
+
+export default function ProfileListSkeleton() {
+  const theme = useTheme();
+  return (
+    <Fragment>
+      <div css={theme.typography.s1}>참여자</div>
+      <div css={S.ProfileContanier}>
+        <SkeletonPiece height="8rem" width="8rem" />
+        <SkeletonPiece height="8rem" width="8rem" />
+        <SkeletonPiece height="8rem" width="8rem" />
+        <SkeletonPiece height="8rem" width="8rem" />
+        <SkeletonPiece height="8rem" width="8rem" />
+      </div>
+    </Fragment>
+  );
+}

frontend/src/components/Tag/TagSkeleton.tsx

@@ -0,0 +1,5 @@
+import SkeletonPiece from '@_components/Skeleton/SkeletonPiece';
+
+export default function TagSkeleton() {
+  return <SkeletonPiece width="40px" height="2rem" />;
+}