feat: children 여부에 따라 자동으로 크기 조절, JSDdoc 작성

packages/ui/Skeleton/Skeleton.tsx

@@ -1,20 +1,53 @@
-import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import { root } from './style.css';
+import type { HTMLAttributes } from 'react';
+import { root, hasChildren } from './style.css';
 import createSkeletonStyle from './utils';
+import type { SkeletonVariant } from './types';
 
 export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
-  width: number | string;
-  height: number | string;
-  variant: 'default' | 'circular' | 'rounded';
+  /**
+   * ### 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;
 }
 
 export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>((props, forwardedRef) => {
-  const { width, height, variant, ...restProps } = props;
+  const { width, height, variant = 'default', children, ...restProps } = props;
 
-  const style = createSkeletonStyle(variant);
+  const styleClass = createSkeletonStyle(variant);
 
-  return <span className={`${root} ${style}`} ref={forwardedRef} style={{ width, height }} {...restProps} />;
+  return (
+    <span
+      className={`${root} ${styleClass} ${children ? hasChildren : ''}`}
+      ref={forwardedRef}
+      style={{ width, height }}
+      {...restProps}
+    >
+      {children}
+    </span>
+  );
 });
 
 Skeleton.displayName = 'Skeleton';

packages/ui/Skeleton/style.css.ts

@@ -1,17 +1,15 @@
 import { colors } from '@sopt-makers/colors';
-import { keyframes, style } from '@vanilla-extract/css';
+import { keyframes, style, globalStyle } from '@vanilla-extract/css';
 import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
 import SkeletonBorderRadius from './constants';
 
 const pulseKeyframe = keyframes({
   '0%': {
     opacity: 1,
   },
-
   '50%': {
     opacity: 0.4,
   },
-
   '100%': {
     opacity: 1,
   },
@@ -23,6 +21,15 @@ export const root = style({
   animation: `${pulseKeyframe} 2s ease-in-out 0.5s infinite`,
 });
 
+export const hasChildren = style({
+  maxWidth: 'fit-content',
+  height: 'auto',
+});
+
+globalStyle(`${hasChildren} > *`, {
+  visibility: 'hidden',
+});
+
 const sprinkleProperties = defineProperties({
   properties: {
     borderRadius: SkeletonBorderRadius,