Merge pull request #491 from woowacourse-teams/develop-frontend

프론트 변경 사항 production 반영

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/DarakbangNameWrapper/DarakbangNameWrapper.style.ts

@@ -2,8 +2,10 @@ import { SerializedStyles, css } from '@emotion/react';
 
 export const name = ({ font }: { font: string | SerializedStyles }) => css`
   ${font}
+
+  max-width: 40vw;
   overflow-x: hidden;
-  max-width: 30%;
   text-overflow: ellipsis;
+
   white-space: nowrap;
 `;

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/MoimList/MoimCardListSkeleton/MoimCardListSkeleton.style.ts

@@ -0,0 +1,7 @@
+import { css } from '@emotion/react';
+
+export const cardListSection = css`
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+`;

frontend/src/components/MoimList/MoimCardListSkeleton/MoimCardListSkeleton.tsx

@@ -0,0 +1,16 @@
+import * as S from './MoimCardListSkeleton.style';
+import MoimCardSkeleton from './MoimCardSkeleton/MoimCardSkeleton';
+
+export default function MoimCardListSkeleton() {
+  return (
+    <div css={S.cardListSection}>
+      <MoimCardSkeleton />
+      <MoimCardSkeleton />
+      <MoimCardSkeleton />
+      <MoimCardSkeleton />
+      <MoimCardSkeleton />
+      <MoimCardSkeleton />
+      <MoimCardSkeleton />
+    </div>
+  );
+}

frontend/src/components/MoimList/MoimCardListSkeleton/MoimCardSkeleton/MoimCardSkeleton.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MoimCardSkeleton from './MoimCardSkeleton';
+
+const meta = {
+  component: MoimCardSkeleton,
+  title: 'Components/MoimCardSkeleton',
+} satisfies Meta<typeof MoimCardSkeleton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  render: (args) => <MoimCardSkeleton {...args} />,
+};

frontend/src/components/MoimList/MoimCardListSkeleton/MoimCardSkeleton/MoimCardSkeleton.style.ts

@@ -0,0 +1,27 @@
+import { css } from '@emotion/react';
+
+export const cardBox = css`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  width: 100%;
+  padding: 2rem 2.4rem;
+
+  background: white;
+  border-radius: 2.5rem;
+  box-shadow: rgb(0 0 0 / 24%) 0 3px 8px;
+`;
+
+export const titleBox = css`
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const detailInfo = css`
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+`;

frontend/src/components/MoimList/MoimCardListSkeleton/MoimCardSkeleton/MoimCardSkeleton.tsx

@@ -0,0 +1,19 @@
+import SkeletonPiece from '@_components/Skeleton/SkeletonPiece';
+import * as S from './MoimCardSkeleton.style';
+
+export default function MoimCardSkeleton() {
+  return (
+    <div css={S.cardBox}>
+      <div css={S.titleBox}>
+        <SkeletonPiece width="50%" height="24px" />
+        <SkeletonPiece width="24px" height="24px" />
+      </div>
+
+      <div css={S.detailInfo}>
+        <SkeletonPiece width="40%" height="18px" />
+        <SkeletonPiece width="30%" height="18px" />
+        <SkeletonPiece width="60%" height="18px" />
+      </div>
+    </div>
+  );
+}

frontend/src/components/MoimList/MoimList.tsx

@@ -1,12 +1,13 @@
 import MissingFallback from '@_components/MissingFallback/MissingFallback';
 import MoimCardList from '@_components/MoimCardList/MoimCardList';
+import MoimCardListSkeleton from '@_components/MoimList/MoimCardListSkeleton/MoimCardListSkeleton';
 import useMoims from '@_hooks/queries/useMoims';
 
 export default function MoimList() {
   const { moims, isLoading } = useMoims();
 
   if (isLoading) {
-    return <div>로딩중...</div>;
+    return <MoimCardListSkeleton />;
   }
 
   return moims && moims.length > 0 ? (

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/PleaseList/PleaseCardListSkeleton/PleaseCardListSkeleton.style.ts

@@ -0,0 +1,7 @@
+import { css } from '@emotion/react';
+
+export const cardListSection = css`
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+`;

frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardListSkeleton.tsx

@@ -0,0 +1,15 @@
+import * as S from './PleaseCardListSkeleton.style';
+import PleaseCardSkeleton from './PleaseCardSkeleton/PleaseCardSkeleton';
+
+export default function PleaseCardListSkeleton() {
+  return (
+    <div css={S.cardListSection}>
+      <PleaseCardSkeleton />
+      <PleaseCardSkeleton />
+      <PleaseCardSkeleton />
+      <PleaseCardSkeleton />
+      <PleaseCardSkeleton />
+      <PleaseCardSkeleton />
+    </div>
+  );
+}

frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardSkeleton/PleaseCardSkeleton.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PleaseCardSkeleton from './PleaseCardSkeleton';
+
+const meta = {
+  component: PleaseCardSkeleton,
+  title: 'Components/PleaseCardSkeleton',
+} satisfies Meta<typeof PleaseCardSkeleton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  render: (args) => <PleaseCardSkeleton {...args} />,
+};

frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardSkeleton/PleaseCardSkeleton.style.ts

@@ -0,0 +1,33 @@
+import { css } from '@emotion/react';
+
+export const cardBox = css`
+  display: flex;
+  gap: 1.6rem;
+  justify-content: space-between;
+
+  width: 100%;
+  padding: 2rem 2.4rem;
+
+  background: white;
+  border-radius: 2.5rem;
+  box-shadow: rgb(0 0 0 / 24%) 0 3px 8px;
+`;
+
+export const contentWrapper = css`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+`;
+
+export const headerWrapper = css`
+  display: flex;
+  gap: 0.6rem;
+  align-items: center;
+`;
+
+export const actionWrapper = css`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+`;

frontend/src/components/PleaseList/PleaseCardListSkeleton/PleaseCardSkeleton/PleaseCardSkeleton.tsx

@@ -0,0 +1,21 @@
+import SkeletonPiece from '@_components/Skeleton/SkeletonPiece';
+import * as S from './PleaseCardSkeleton.style';
+
+export default function PleaseCardSkeleton() {
+  return (
+    <div css={S.cardBox}>
+      <div css={S.contentWrapper}>
+        <div css={S.headerWrapper}>
+          <SkeletonPiece width="30%" height="24px" />
+          <SkeletonPiece width="140px" height="24px" />
+        </div>
+        <SkeletonPiece width="100%" height="24px" />
+      </div>
+
+      <div css={S.actionWrapper}>
+        <SkeletonPiece width="40px" height="40px" />
+        <SkeletonPiece width="50px" height="16px" />
+      </div>
+    </div>
+  );
+}

frontend/src/components/PleaseList/PleaseList.tsx

@@ -1,12 +1,13 @@
 import MissingFallback from '@_components/MissingFallback/MissingFallback';
 import PleaseCardList from '@_components/PleaseCardList/PleaseCardList';
 import usePleases from '@_hooks/queries/usePleases';
+import PleaseCardListSkeleton from './PleaseCardListSkeleton/PleaseCardListSkeleton';
 
 export default function PleaseList() {
   const { pleases, isLoading } = usePleases();
 
   if (isLoading) {
-    return <div>로딩중...</div>;
+    return <PleaseCardListSkeleton />;
   }
 
   return pleases && pleases.length > 0 ? (

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" />;
+}