feat(ui): Skeleton 컴포넌트 구현

[Brokyeom]

변경사항

• Skeleton 컴포넌트를 구현합니다.

prop 정보는 아래와 같습니다

export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
  /**
   * ### Skeleton의 너비를 수동으로 지정할 떄 사용합니다.
   */
  width?: number | string;
  /**
   * ### Skeleton의 높이를 수동으로 지정할 떄 사용합니다.
   */
  height?: number | string;
  /**
   * ### `default` | `circular` | `rounded` 의 세 가지 값을 가집니다.
   * @example
   * default - borderRadius : '12px'
   * circular && rounded - borderRadius: '100%'
   */
  variant?: SkeletonVariant;
  /**
   * ### children prop을 사용할 경우 스켈레톤의 사이즈가 자식 요소에 맞춰집니다.
   * @example
   * ```tsx
   * // width: 'fit-content', height: 'auto'
   * <Skeleton>
   *   <Toggle />
   * </Skeleton>
   * ```
   */
  children?: React.ReactNode;
}

• 기본적인 구조는 MUI를 참고해 만들어졌습니다.

링크

• 리스트 티켓

시급한 정도

🏃‍♂️ 보통 : 최대한 빠르게 리뷰 부탁드립니다.

기타 사항

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9b97c0e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@sopt-makers/ui	Minor
docs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Brokyeom]

Storybook

[suwonthugger]

LGTM

추후에 스토리북이랑 컴포넌트 이렇게 설명 추가해나가면 좋을것 같아요 고생하셨어요!

[jungwoo3490]

variant가 circular인 case와 rounded인 case의 차이가 있을까요?? 지금 variant로 분기되는 스타일이 radius밖에 없어보이는데, 두 case의 radius 값이 동일해서 혹시 다른 차이가 있는지 궁금해요!!

[Brokyeom]

cricular: 높이, 너비가 같은 원형
rounded: 높이, 너비가 다를 경우에 사용되는 스타일 (e.g. button rounded lg)

의 용도로 구분해두긴 했습니다. (레퍼런스)

[Brokyeom]

추후에 variant 에 따라서 스타일이 달리질 것을 염두해서 분리해두려는 목적도 있습니다!