refactor(divider): apply vanilla-extract

packages/divider/package.json

@@ -9,9 +9,7 @@
   },
   "type": "module",
   "exports": "./src/index.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "build": "tsup",
     "build:storybook": "storybook build",
@@ -23,7 +21,8 @@
     "prepack": "pnpm run build"
   },
   "dependencies": {
-    "clsx": "^2.1.1"
+    "clsx": "^2.1.1",
+    "@sipe-team/tokens": "workspace:*"
   },
   "devDependencies": {
     "@sipe-team/typography": "workspace:*",
@@ -37,6 +36,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/divider/src/Divider.css.ts

@@ -0,0 +1,30 @@
+import { color } from '@sipe-team/tokens';
+import { style, styleVariants } from '@vanilla-extract/css';
+import type { ColorType, OrientationType } from './constants';
+
+export const base = style({
+  border: 0,
+  margin: 0,
+  flexShrink: 0,
+});
+
+const orientationStyles: Record<OrientationType, { width?: string; height?: string }> = {
+  horizontal: {
+    width: '100%',
+    height: '1px',
+  },
+  vertical: {
+    width: '1px',
+    height: '100%',
+  },
+};
+
+export const orientations = styleVariants(orientationStyles);
+
+const colorStyles: Record<ColorType, { backgroundColor: string }> = {
+  default: { backgroundColor: color.gray300 },
+  primary: { backgroundColor: color.cyan300 },
+  dark: { backgroundColor: color.gray900 },
+};
+
+export const colors = styleVariants(colorStyles);

packages/divider/src/Divider.stories.tsx

@@ -1,13 +1,26 @@
 import { Typography } from '@sipe-team/typography';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Divider } from './Divider';
+import { DIVIDER_COLORS, DIVIDER_ORIENTATIONS } from './constants';
 
 const meta = {
   title: 'Components/Divider',
   component: Divider,
   parameters: {
     layout: 'centered',
   },
+  argTypes: {
+    orientation: {
+      description: '구분선의 방향',
+      control: 'radio',
+      options: DIVIDER_ORIENTATIONS,
+    },
+    color: {
+      description: '구분선의 색상',
+      control: 'radio',
+      options: DIVIDER_COLORS,
+    },
+  },
 } satisfies Meta<typeof Divider>;
 export default meta;
 
@@ -47,26 +60,50 @@ export const Basic: Story = {
         </div>
       </section>
 
-      {/* 스타일 섹션 */}
+      {/* 색상 변형 섹션 */}
+      <section>
+        <Typography weight="bold" size={12}>
+          <h2>색상 변형</h2>
+        </Typography>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+          <div>
+            <Typography>기본 색상 (default)</Typography>
+            <Divider color="default" />
+          </div>
+
+          <div>
+            <Typography>메인 색상 (primary)</Typography>
+            <Divider color="primary" />
+          </div>
+
+          <div>
+            <Typography>어두운 색상 (dark)</Typography>
+            <Divider color="dark" />
+          </div>
+        </div>
+      </section>
+
+      {/* 고급 스타일링 섹션 */}
       <section>
         <Typography weight="bold" size={12}>
-          <h2>스타일링</h2>
+          <h2>고급 스타일링</h2>
         </Typography>
 
         <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
           <div>
-            <Typography>default</Typography>
-            <Divider style={{ backgroundColor: '#E5E7EB' }} />
+            <Typography>사용자 정의 색상</Typography>
+            <Divider style={{ backgroundColor: '#FF5733' }} />
           </div>
 
           <div>
-            <Typography>colored</Typography>
-            <Divider style={{ backgroundColor: '#3B82F6' }} />
+            <Typography>두껍게 (4px)</Typography>
+            <Divider style={{ height: '4px' }} />
           </div>
 
           <div>
-            <Typography>thick</Typography>
-            <Divider style={{ backgroundColor: '#E5E7EB', height: '4px' }} />
+            <Typography>점선</Typography>
+            <Divider style={{ borderStyle: 'dashed', borderTopWidth: '1px', backgroundColor: 'transparent' }} />
           </div>
         </div>
       </section>

packages/divider/src/Divider.test.tsx

@@ -1,9 +1,10 @@
+import { color } from '@sipe-team/tokens';
 import { render, screen } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
 import { Divider } from './Divider';
 
 describe('Divider', () => {
-  test('orientation 속성이 없으면 가로 방향으로 그린다.', () => {
+  test('orientation 속성이 없으면 가로 방향으로 그리고 기본 색상을 가진다.', () => {
     render(<Divider />);
 
     const divider = screen.getByRole('separator');
@@ -12,6 +13,7 @@ describe('Divider', () => {
     expect(divider).toHaveStyle({
       width: '100%',
       height: '1px',
+      backgroundColor: color.gray300,
     });
   });
 
@@ -42,4 +44,20 @@ describe('Divider', () => {
       margin: '8px',
     });
   });
+
+  test('color 속성에 따라 배경색이 변경된다.', () => {
+    render(<Divider color="primary" />);
+
+    const divider = screen.getByRole('separator');
+    expect(divider).toHaveStyle({
+      backgroundColor: color.cyan300,
+    });
+  });
+
+  test('className이 올바르게 전달된다.', () => {
+    render(<Divider className="custom-class" />);
+
+    const divider = screen.getByRole('separator');
+    expect(divider).toHaveClass('custom-class');
+  });
 });

packages/divider/src/Divider.tsx

@@ -1,20 +1,23 @@
 import { clsx as cx } from 'clsx';
 import { type ComponentProps, forwardRef } from 'react';
-import styles from './Divider.module.css';
+import * as styles from './Divider.css';
+import type { ColorType, OrientationType } from './constants';
 
-interface DividerProps extends ComponentProps<'hr'> {
-  orientation?: 'horizontal' | 'vertical';
+export interface DividerProps extends ComponentProps<'hr'> {
+  orientation?: OrientationType;
+  color?: ColorType;
 }
 
-export const Divider = forwardRef(function Divider({
-  orientation = 'horizontal',
-  ...props
-}: DividerProps) {
+export const Divider = forwardRef<HTMLHRElement, DividerProps>(function Divider(
+  { orientation = 'horizontal', color = 'default', className, ...props }: DividerProps,
+  ref,
+) {
   return (
     <hr
-      {...props}
+      ref={ref}
       aria-orientation={orientation}
-      className={cx(styles[orientation], styles.divider, props.className)}
+      className={cx(styles.base, styles.orientations[orientation], styles.colors[color], className)}
+      {...props}
     />
   );
 });

packages/divider/src/constants/index.ts

@@ -0,0 +1,5 @@
+export const DIVIDER_ORIENTATIONS = ['horizontal', 'vertical'] as const;
+export type OrientationType = (typeof DIVIDER_ORIENTATIONS)[number];
+
+export const DIVIDER_COLORS = ['default', 'primary', 'dark'] as const;
+export type ColorType = (typeof DIVIDER_COLORS)[number];