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

.changeset/late-icons-boil.md

@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': minor
+---
+
+Add Skeleton Component.

apps/docs/eslint.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  files: ['**/*.ts', '**/*.tsx'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+  },
+};

apps/docs/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -33,7 +33,7 @@
     "@typescript-eslint/parser": "^6.10.0",
     "@vanilla-extract/vite-plugin": "^3.9.2",
     "@vitejs/plugin-react": "^4.2.0",
-    "chromatic": "^10.0.0",
+    "chromatic": "^11.15.0",
     "eslint": "^8.53.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",

apps/docs/src/stories/Skeleton.stories.tsx

@@ -0,0 +1,37 @@
+import { Skeleton, SkeletonProps, Button as MDSButton, Toggle } from '@sopt-makers/ui';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default: StoryObj<SkeletonProps> = {
+  render: () => {
+    return <Skeleton width={300} height={48} variant='default' />;
+  },
+};
+
+export const Circular: StoryObj<SkeletonProps> = {
+  render: () => {
+    return <Skeleton width={40} height={40} variant='circular' />;
+  },
+};
+
+export const HasChildren: StoryObj<SkeletonProps> = {
+  render: () => {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        <Skeleton>
+          <MDSButton>버튼버튼버튼</MDSButton>
+        </Skeleton>
+        <Skeleton>
+          <Toggle />
+        </Skeleton>
+      </div>
+    );
+  },
+};

packages/ui/Skeleton/Skeleton.tsx

@@ -0,0 +1,53 @@
+import { forwardRef } from 'react';
+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> {
+  /**
+   * ### 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 = 'default', children, ...restProps } = props;
+
+  const styleClass = createSkeletonStyle(variant);
+
+  return (
+    <span
+      className={`${root} ${styleClass} ${children ? hasChildren : ''}`}
+      ref={forwardedRef}
+      style={{ width, height }}
+      {...restProps}
+    >
+      {children}
+    </span>
+  );
+});
+
+Skeleton.displayName = 'Skeleton';

packages/ui/Skeleton/constants.ts

@@ -0,0 +1,9 @@
+import type { SkeletonVariant } from './types';
+
+const SkeletonBorderRadius: Record<SkeletonVariant, string> = {
+  default: '12px',
+  circular: '100%',
+  rounded: '100%',
+};
+
+export default SkeletonBorderRadius;

packages/ui/Skeleton/index.ts

@@ -0,0 +1 @@
+export * from './Skeleton';

packages/ui/Skeleton/style.css.ts

@@ -0,0 +1,39 @@
+import { colors } from '@sopt-makers/colors';
+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,
+  },
+});
+
+export const root = style({
+  display: 'block',
+  backgroundColor: colors.gray700,
+  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,
+  },
+});
+
+export const sprinkles = createSprinkles(sprinkleProperties);

packages/ui/Skeleton/types.ts

@@ -0,0 +1 @@
+export type SkeletonVariant = 'default' | 'circular' | 'rounded';

packages/ui/Skeleton/utils.ts

@@ -0,0 +1,8 @@
+import { sprinkles } from './style.css';
+import type { SkeletonVariant } from './types';
+
+const createSkeletonStyle = (variant: SkeletonVariant) => {
+  return sprinkles({ borderRadius: variant });
+};
+
+export default createSkeletonStyle;

packages/ui/index.ts

@@ -12,6 +12,7 @@ export { default as Tag } from './Tag';
 export { default as Chip } from './Chip';
 export { default as Callout } from './Callout';
 export { default as Tab } from './Tab';
+export * from './Skeleton';
 export * from './FieldBox';
 // test component
 export { default as Test } from './Test';