Merge pull request #91 from YAPP-Github/feature/PRODUCT-192

feat: Skeleton 컴포넌트 생성 (#90)

Author: wkdtnqls0506

src/components/ui/Skeleton/Skeleton.css.ts

@@ -0,0 +1,14 @@
+import { createVar, style } from "@vanilla-extract/css";
+
+import { colors } from "@/styles";
+
+export const widthVar = createVar();
+export const heightVar = createVar();
+export const radiusVar = createVar();
+
+export const wrapper = style({
+  width: widthVar,
+  height: heightVar,
+  borderRadius: radiusVar,
+  backgroundColor: colors.coolNeutral[98],
+});

src/components/ui/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+
+import { Skeleton } from "./Skeleton";
+
+const meta: Meta<typeof Skeleton> = {
+  title: "Components/Skeleton",
+  component: Skeleton,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Skeleton 컴포넌트는 로딩 상태를 시각적으로 표시하기 위한 사각형 스켈레톤 UI입니다. width, height, radius를 지정할 수 있습니다.",
+      },
+    },
+  },
+  argTypes: {
+    width: {
+      control: "number",
+      description: "스켈레톤의 너비 (px)",
+    },
+    height: {
+      control: "number",
+      description: "스켈레톤의 높이 (px)",
+    },
+    radius: {
+      control: "text",
+      description: "스켈레톤의 border-radius (px 또는 string)",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+
+export const Default: Story = {
+  render: args => <Skeleton {...args} />,
+  args: {
+    width: 120,
+    height: 24,
+    radius: 8,
+  },
+};
+
+export const CustomRadius: Story = {
+  render: args => <Skeleton {...args} />,
+  args: {
+    width: 120,
+    height: 24,
+    radius: "50%",
+  },
+};
+
+export const VariousSizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
+      <Skeleton width={40} height={40} radius={20} />
+      <Skeleton width={80} height={16} radius={4} />
+      <Skeleton width={120} height={24} radius={8} />
+      <Skeleton width={200} height={32} radius={16} />
+    </div>
+  ),
+};

src/components/ui/Skeleton/Skeleton.tsx

@@ -0,0 +1,43 @@
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { type HTMLAttributes } from "react";
+
+import { coerceCssRemValue } from "@/lib/utils/coerceCssRemValue";
+
+import * as styles from "./Skeleton.css";
+
+export type SkeletonProps = {
+  /** 스켈레톤 너비 */
+  width: number;
+
+  /** 스켈레톤 높이 */
+  height: number;
+
+  /** border-radius(px, rem, %, 토큰 모두 가능) */
+  radius?: number | string;
+} & HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Skeleton 컴포넌트
+ * @example
+ * ```tsx
+ * <Skeleton width={120} height={24} radius={8} />
+ * ```
+ */
+export const Skeleton = ({
+  width,
+  height,
+  radius,
+  style: customStyle,
+  ...rest
+}: SkeletonProps) => {
+  const style = {
+    ...assignInlineVars({
+      [styles.widthVar]: coerceCssRemValue(width),
+      [styles.heightVar]: coerceCssRemValue(height),
+      [styles.radiusVar]: radius ? coerceCssRemValue(radius) : undefined,
+    }),
+    ...customStyle,
+  };
+
+  return <div className={styles.wrapper} style={style} {...rest} />;
+};

src/components/ui/Skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton, type SkeletonProps } from "./Skeleton";