1. Skeleton

Skeleton 컴포넌트는 로딩 상태에서 사용자에게 시각적인 피드백을 제공하기 위해 사용됩니다. 다양한 크기, 모양, 애니메이션 옵션을 제공하여 유연하게 사용할 수 있습니다.

1.1. Import

import { Skeleton } from '@components/Skeleton';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

import Skeleton from '@components/Skeleton';

function Example() {
  return (
    <Skeleton size="medium" variants="rounded" animate={true} />
  );
}

export default Example;

1.3. Props

Skeleton 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`size`	Skeleton의 크기를 설정합니다. `small`, `medium`, `large` 중 하나를 선택할 수 있습니다.	`"small" \| "medium" \| "large"`	`"small"`
`variants`	Skeleton의 모양을 설정합니다. `rounded` 또는 `rectangular` 중 하나를 선택할 수 있습니다.	`"rounded" \| "rectangular"`	`"rectangular"`
`animate`	로딩 애니메이션을 활성화할지 여부를 설정합니다.	`boolean`	`true`

1.4. Full Example

import Skeleton from '@components/Skeleton';

function Example() {
  return (
    <div>
      <Skeleton size="large" variants="rectangular" animate={false} />
    </div>
  );
}

export default Example;

2. SkeletonCard

SkeletonCard 컴포넌트는 로딩 상태를 시각적으로 나타내기 위한 스켈레톤 UI를 제공합니다. 카드 형태로 다양한 속성을 조정하여 맞춤형 스켈레톤 카드를 만들 수 있습니다.

2.1. Import

import SkeletonCard from '@components/SkeletonCard';

2.2. Usage

기본 사용 예제는 아래와 같습니다:

import SkeletonCard from '@components/SkeletonCard';
function Example() {
  return <SkeletonCard />;
}

export default Example;

2.3. Customizing SkeletonCard

SkeletonCard 컴포넌트는 다양한 속성을 통해 사용자 정의할 수 있습니다. 카드의 크기, 이미지 유무, 아바타 표시 여부, 애니메이션 효과 등을 설정할 수 있습니다.

import SkeletonCard from '@components/SkeletonCard';

function Example() {
  return (
    <>
      <SkeletonCard width="w-1/4" />
      <SkeletonCard width="w-1/5" hasAvatar={false} />
      <SkeletonCard width="w-1/4" hasImage={false} />
      <SkeletonCard width="w-1/4" animate={false} />
    </>
  );
}

export default Example;

2.4. Props

SkeletonCard 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`width`	카드의 너비를 설정합니다. TailwindCSS 클래스를 사용합니다.	`string`	`"w-1/5"`
`height`	카드의 높이를 설정합니다. TailwindCSS 클래스를 사용합니다.	`string`	`"h-auto"`
`imageHeight`	이미지의 높이를 설정합니다. TailwindCSS 클래스를 사용합니다.	`string`	`"h-48"`
`hasAvatar`	아바타를 표시할지 여부를 설정합니다.	`boolean`	`true`
`hasImage`	이미지를 표시할지 여부를 설정합니다.	`boolean`	`true`
`animate`	스켈레톤 카드에 애니메이션을 적용할지 여부를 설정합니다.	`boolean`	`true`

2.5. Full Example

import SkeletonCard from '@components/SkeletonCard';

function Example() {
  return (
    <div>
      <SkeletonCard width="w-2/5" />
    </div>
  );
}

export default Example;