refactor(skeleton): apply vanilla-extract

packages/skeleton/package.json

@@ -22,7 +22,10 @@
     "prepack": "pnpm run build"
   },
   "dependencies": {
-    "@radix-ui/react-slot": "^1.1.0"
+    "@sipe-team/tokens": "workspace:*",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@vanilla-extract/recipes": "^0.5.5",
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.2.0",
@@ -36,6 +39,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/react": "^18.3.12",
+    "@vanilla-extract/css": "catalog:",
     "happy-dom": "catalog:",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

packages/skeleton/src/Skeleton.css.ts

@@ -0,0 +1,113 @@
+import { color, radius } from '@sipe-team/tokens';
+import { keyframes, style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+//FIXME : background color 바꿔야함. 지금 x-lay 같음...
+
+const fadeInOut = keyframes({
+  '0%': { opacity: 1 },
+  '50%': { opacity: 0.8 },
+  '100%': { opacity: 1 },
+});
+
+export const SkeletonVariant = {
+  rectangular: 'rectangular',
+  circle: 'circle',
+  text: 'text',
+  rounded: 'rounded',
+} as const;
+
+export type SkeletonVariant = (typeof SkeletonVariant)[keyof typeof SkeletonVariant];
+
+const baseSkeletonStyle = style({
+  backgroundColor: color.gray200,
+  backgroundImage: 'none',
+  backgroundClip: 'border-box',
+  border: 'none',
+  boxShadow: 'none',
+  color: 'transparent',
+  outline: 'none',
+  pointerEvents: 'none',
+  userSelect: 'none',
+  cursor: 'default',
+  overflow: 'hidden',
+  position: 'relative',
+
+  '::before': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: `linear-gradient(90deg, transparent, ${color.gray200}, transparent)`,
+    animation: `${fadeInOut} 1.5s ease-in-out infinite`,
+  },
+});
+
+export const skeleton = recipe({
+  base: baseSkeletonStyle,
+
+  variants: {
+    variant: {
+      [SkeletonVariant.rectangular]: {
+        borderRadius: radius.sm,
+      },
+      [SkeletonVariant.circle]: {
+        borderRadius: radius.full,
+        aspectRatio: '1',
+      },
+      [SkeletonVariant.text]: {
+        borderRadius: radius.sm,
+        height: '1em',
+        width: '100%',
+      },
+      [SkeletonVariant.rounded]: {
+        borderRadius: radius.md,
+      },
+    },
+
+    loading: {
+      true: {},
+      false: {
+        animation: 'none',
+        backgroundColor: 'transparent',
+
+        '::before': {
+          display: 'none',
+        },
+      },
+    },
+
+    pulse: {
+      true: {
+        '::before': {
+          animation: `${fadeInOut} 1.2s ease-in-out infinite`,
+        },
+      },
+      false: {
+        '::before': {
+          animation: `${fadeInOut} 2s ease-in-out infinite`,
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: SkeletonVariant.rectangular,
+    loading: true,
+    pulse: false,
+  },
+});
+
+export const shimmer = keyframes({
+  '0%': { transform: 'translateX(-100%)' },
+  '100%': { transform: 'translateX(100%)' },
+});
+
+export const shimmerEffect = style({
+  '::before': {
+    background: `linear-gradient(90deg, transparent, ${color.white}, transparent)`,
+    animation: `${shimmer} 2s infinite`,
+  },
+});

packages/skeleton/src/Skeleton.stories.tsx

@@ -1,5 +1,3 @@
-import { faker } from '@faker-js/faker';
-// Skeleton.stories.tsx
 import type { Meta, StoryObj } from '@storybook/react';
 import { Skeleton } from './Skeleton';
 
@@ -12,19 +10,42 @@ const meta = {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['circle', 'rectangular'],
+      options: ['rectangular', 'circle', 'text', 'rounded'],
+      description: 'Visual variant of the skeleton',
+      defaultValue: 'rectangular',
     },
     width: {
-      control: { type: 'number', min: 20, max: 200, step: 10 },
+      control: { type: 'number', min: 20, max: 500, step: 10 },
+      description: 'Width of the skeleton in pixels',
     },
     height: {
       control: { type: 'number', min: 20, max: 200, step: 10 },
+      description: 'Height of the skeleton in pixels',
     },
     loading: {
       control: 'boolean',
+      description: 'Whether to show skeleton or content',
+      defaultValue: true,
     },
     asChild: {
       control: 'boolean',
+      description: 'Whether to use as a wrapper',
+      defaultValue: false,
+    },
+    pulse: {
+      control: 'boolean',
+      description: 'Enable faster pulse animation',
+      defaultValue: false,
+    },
+    shimmer: {
+      control: 'boolean',
+      description: 'Enable shimmer effect',
+      defaultValue: false,
+    },
+    lines: {
+      control: { type: 'number', min: 1, max: 10, step: 1 },
+      description: 'Number of lines for text variant',
+      defaultValue: 1,
     },
   },
 } satisfies Meta<typeof Skeleton>;
@@ -37,12 +58,12 @@ export const Basic: Story = {
   args: {
     loading: true,
     variant: 'rectangular',
-    width: 100,
+    width: 200,
     height: 100,
   },
 };
 
-export const CircleSkeleton: Story = {
+export const Circle: Story = {
   args: {
     loading: true,
     variant: 'circle',
@@ -51,29 +72,40 @@ export const CircleSkeleton: Story = {
   },
 };
 
-export const RectangularSkeleton: Story = {
+export const Text: Story = {
   args: {
     loading: true,
-    variant: 'rectangular',
-    width: 80,
-    height: 30,
+    variant: 'text',
+    width: 300,
+    lines: 3,
   },
 };
 
-export const SkeletonWithChildren: Story = {
+export const Rounded: Story = {
+  args: {
+    loading: true,
+    variant: 'rounded',
+    width: 200,
+    height: 60,
+  },
+};
+
+export const WithShimmer: Story = {
   args: {
     loading: true,
-    asChild: true,
-    children: <button type="button">Loading...</button>,
     variant: 'rectangular',
+    width: 200,
+    height: 100,
+    shimmer: true,
   },
 };
 
-export const SkeletonWithText: Story = {
+export const WithPulse: Story = {
   args: {
     loading: true,
-    asChild: true,
-    children: <span>{faker.lorem.lines(2)}</span>,
     variant: 'rectangular',
+    width: 200,
+    height: 100,
+    pulse: true,
   },
 };