feat(packages/ui): Spacing 컴포넌트

apps/web/package.json

@@ -19,6 +19,7 @@
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
+    "@repo/ui": "workspace:*",
     "@types/node": "^20.11.24",
     "@types/react": "18.3.0",
     "@types/react-dom": "18.3.1",

package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@vanilla-extract/css": "^1.17.0",
+    "@vanilla-extract/dynamic": "^2.1.2",
     "@vanilla-extract/recipes": "^0.5.5"
   }
 }

packages/ui/src/components/Spacing/Spacing.css.ts

@@ -0,0 +1,11 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const sizeVar = createVar();
+export const directionVar = createVar();
+
+export const spacingStyle = style({
+  display: 'flex',
+  flexDirection: directionVar,
+  width: sizeVar,
+  height: sizeVar,
+});

packages/ui/src/components/Spacing/Spacing.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { tokens } from '@repo/theme';
+import { directionVar, sizeVar, spacingStyle } from './Spacing.css';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
+  direction?: 'row' | 'column';
+  size: keyof typeof tokens.spacing;
+}
+
+export const Spacing: FC<SpacingProps> = ({
+  direction = 'column',
+  size,
+  ...rest
+}: SpacingProps) => {
+  const sizeValue =
+    direction === 'row'
+      ? tokens.spacing[size]
+      : direction === 'column'
+        ? tokens.spacing[size]
+        : 'auto';
+
+  return (
+    <div
+      className={spacingStyle}
+      style={JSON.parse(
+        JSON.stringify(
+          assignInlineVars({
+            [directionVar]: direction,
+            [sizeVar]: sizeValue,
+          })
+        )
+      )}
+      {...rest}
+    />
+  );
+};

packages/ui/src/components/index.ts

@@ -1 +1 @@
-//export * from './TestComponent';
+export * from './Spacing/Spacing';