[FEAT] Skeleton 컴포넌트, 스토리북

src/components/common/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable no-restricted-exports */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Skeleton } from '.';
+import { FlexBox } from '../FlexBox';
+
+const meta = {
+  title: 'components/common/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+
+export const Basic: Story = {
+  args: {
+    layout: 'box',
+    width: '100%',
+    height: '100%',
+  },
+  argTypes: {
+    layout: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['text', 'box'],
+    },
+    width: {
+      control: {
+        type: 'text',
+      },
+    },
+    height: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  render: (args) => (
+    <FlexBox justifyContent="space-between" height="10rem">
+      <Skeleton {...args} />
+    </FlexBox>
+  ),
+};

src/components/common/Skeleton/Skeleton.styled.ts

@@ -0,0 +1,45 @@
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { Props } from './Skeleton.types';
+
+export const pulseKeyframes = keyframes`
+  50% {
+    opacity: .5;
+  }
+`;
+
+export const StyledSkeletonContainer = styled.div<Props>`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
+`;
+
+export const StyledTextSkeletonContainer = styled.div<Props>`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
+`;
+
+export const StyledTextLine = styled.div<{ width: string }>`
+  height: 1rem;
+  width: ${({ width }) => width};
+  background-color: #f3f4f6;
+  border-radius: 0.25rem;
+  animation: ${pulseKeyframes} 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+`;
+
+export const StyledBoxSkeleton = styled.div`
+  width: 100%;
+  height: 100%;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: #f3f4f6;
+  border-radius: 0.5rem;
+  animation: ${pulseKeyframes} 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+`;

src/components/common/Skeleton/Skeleton.types.ts

@@ -0,0 +1,17 @@
+export type Props = {
+  /**
+   * The layout of the skeleton.
+   * @default 'box'
+   */
+  layout?: 'text' | 'box';
+  /**
+   * The width of the skeleton.
+   * @default '100%'
+   */
+  width: string;
+  /**
+   * The height of the skeleton.
+   * @default '100%'
+   */
+  height: string;
+};

src/components/common/Skeleton/index.tsx

@@ -0,0 +1,26 @@
+import {
+  StyledBoxSkeleton,
+  StyledSkeletonContainer,
+  StyledTextLine,
+  StyledTextSkeletonContainer,
+} from './Skeleton.styled';
+import { Props } from './Skeleton.types';
+
+const TEXT_LINE_WIDTH = ['30%', '60%', '90%', '80%'];
+export const Skeleton = ({ layout = 'box', width = '100%', height = '100%', ...props }: Props) => {
+  if (layout === 'text') {
+    return (
+      <StyledTextSkeletonContainer width={width} height={height} {...props}>
+        {TEXT_LINE_WIDTH.map((width) => (
+          <StyledTextLine key={width} width={width} />
+        ))}
+      </StyledTextSkeletonContainer>
+    );
+  }
+
+  return (
+    <StyledSkeletonContainer width={width} height={height} {...props}>
+      <StyledBoxSkeleton />
+    </StyledSkeletonContainer>
+  );
+};

src/components/features/TotalScheduleList/TotalScheduleList.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { css } from '@emotion/react';
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
 
 import { queries } from '@/apis';
 import { FlexBox } from '@/components/common/FlexBox';
@@ -18,7 +18,7 @@ export const TotalScheduleList = ({ uuid, sortOption }: Props) => {
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
-  } = useInfiniteQuery({
+  } = useSuspenseInfiniteQuery({
     ...queries.meeting.times(uuid, sortOption),
     initialPageParam: { page: 0, requestTime: '' },
     getNextPageParam: (lastPage) => {

src/pages/EditSchedule.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -71,18 +71,15 @@ export const EditSchedule = () => {
       </Funnel.Step>
 
       <Funnel.Step name="일정수정">
-        {/* // TODO : fallback 추가 */}
-        <Suspense>
-          <EditScheduleContent
-            uuid={uuid as string}
-            accessToken={accessToken}
-            data={scheduleData?.dateOfScheduleList as Schedule[]}
-            pin={pin}
-            setStep={setStep}
-            refetch={refetch}
-            navigate={navigate}
-          />
-        </Suspense>
+        <EditScheduleContent
+          uuid={uuid as string}
+          accessToken={accessToken}
+          data={scheduleData?.dateOfScheduleList as Schedule[]}
+          pin={pin}
+          setStep={setStep}
+          refetch={refetch}
+          navigate={navigate}
+        />
       </Funnel.Step>
     </Funnel>
   );

src/pages/MeetingDetail.tsx

@@ -4,6 +4,7 @@ import { useParams, useNavigate, Navigate } from 'react-router-dom';
 
 import { FlexBox } from '@/components/common/FlexBox';
 import { ScheduleLayout } from '@/components/common/ScheduleLayout';
+import { Skeleton } from '@/components/common/Skeleton';
 import { Body3 } from '@/components/common/Typography';
 import { MeetingInfo } from '@/components/features/MeetingDetail/MeetingInfo';
 import { MemberList } from '@/components/features/MeetingDetail/MemberList';
@@ -31,14 +32,31 @@ export const MeetingDetail = () => {
         <meta property="og:image" content="https://ifh.cc/g/38gbOb.jpg" />
       </Helmet>
       <ScheduleLayout>
-        {/* TODO Suspense fallback */}
-        <Suspense>
+        <Suspense
+          fallback={
+            <FlexBox width="100%" height="100%" padding="50px 20px 20px 20px">
+              <Skeleton layout="text" width="100%" height="170px" />
+            </FlexBox>
+          }
+        >
           <MeetingInfo uuid={uuid} />
         </Suspense>
-        <Suspense>
+        <Suspense
+          fallback={
+            <FlexBox width="100%" height="100%" padding="10px 20px">
+              <Skeleton width="100%" height="200px" />
+            </FlexBox>
+          }
+        >
           <MemberScheduleCard uuid={uuid} onNavigate={navigate} />
         </Suspense>
-        <Suspense>
+        <Suspense
+          fallback={
+            <FlexBox width="100%" height="100%" padding="0px 20px">
+              <Skeleton width="100%" height="160px" />
+            </FlexBox>
+          }
+        >
           <MemberList uuid={uuid} />
         </Suspense>
         {!accessToken && (

src/pages/TotalSchedule.tsx

@@ -12,6 +12,7 @@ import { FormLayout } from '@/components/common/FormLayout';
 import { Header } from '@/components/common/Header';
 import { IconButton } from '@/components/common/IconButton';
 import { SegmentedControl } from '@/components/common/SegmentedControl';
+import { Skeleton } from '@/components/common/Skeleton';
 import { Body2 } from '@/components/common/Typography';
 import { TotalScheduleList } from '@/components/features/TotalScheduleList/TotalScheduleList';
 import { colors } from '@/styles/global';
@@ -32,8 +33,6 @@ export const TotalSchedule = () => {
           <Header
             left={<IconButton iconName="back" onClick={() => navigate(`/${uuid}`)} />}
             middle={<Body2>전체보기</Body2>}
-            // TODO : MY페이지 이동
-            right={<IconButton iconName="user" />}
           />
         }
         // TODO: 추후 title 제거
@@ -74,7 +73,15 @@ export const TotalSchedule = () => {
                 <Border borderStyle="dashed" color="GY5" />
               </FlexBox>
 
-              <Suspense>
+              <Suspense
+                fallback={
+                  <FlexBox gap={10}>
+                    {Array.from({ length: 4 }).map((_, index) => (
+                      <Skeleton key={index} layout="box" width="100%" height="110px" />
+                    ))}
+                  </FlexBox>
+                }
+              >
                 <TotalScheduleList uuid={uuid as string} sortOption={sortOption} />
               </Suspense>
             </FlexBox>