From 1b23b5d6e2b73fd7e3dd667d214fd1c0c0f9063f Mon Sep 17 00:00:00 2001
From: Brokyeom <goindol40@gmail.com>
Date: Mon, 21 Oct 2024 18:10:19 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20children=20=EC=97=AC=EB=B6=80=EC=97=90?=
 =?UTF-8?q?=20=EB=94=B0=EB=9D=BC=20=EC=9E=90=EB=8F=99=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=EC=A1=B0=EC=A0=88,=20JSDdoc=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Skeleton/Skeleton.tsx | 49 ++++++++++++++++++++++++++-----
 packages/ui/Skeleton/style.css.ts | 13 ++++++--
 2 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/packages/ui/Skeleton/Skeleton.tsx b/packages/ui/Skeleton/Skeleton.tsx
index 141f03b..6d1c420 100644
--- a/packages/ui/Skeleton/Skeleton.tsx
+++ b/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';
diff --git a/packages/ui/Skeleton/style.css.ts b/packages/ui/Skeleton/style.css.ts
index 812d773..bf175c2 100644
--- a/packages/ui/Skeleton/style.css.ts
+++ b/packages/ui/Skeleton/style.css.ts
@@ -1,5 +1,5 @@
 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';
 
@@ -7,11 +7,9 @@ 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,