[Fix] Spacing 컴포넌트 수정 (#54)

* fix(packages/ui): Spacing 컴포넌트 수정

* chore: name import 하도록 수정

* chore: 배럴 파일 수정

* chore: empty file 삭제

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

@@ -1,18 +1,16 @@
-import { FC } from 'react';
+import { HTMLAttributes } 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';
+export type SpacingDirection = 'row' | 'column';
+
+export type SpacingProps = HTMLAttributes<HTMLDivElement> & {
+  direction?: SpacingDirection;
   size: keyof typeof tokens.spacing;
-}
+};
 
-export const Spacing: FC<SpacingProps> = ({
-  direction = 'column',
-  size,
-  ...rest
-}: SpacingProps) => {
+export function Spacing({ direction = 'column', size, ...rest }: SpacingProps) {
   const sizeValue =
     direction === 'row'
       ? tokens.spacing[size]
@@ -23,15 +21,15 @@ export const Spacing: FC<SpacingProps> = ({
   return (
     <div
       className={spacingStyle}
-      style={JSON.parse(
-        JSON.stringify(
-          assignInlineVars({
-            [directionVar]: direction,
-            [sizeVar]: sizeValue,
-          })
-        )
-      )}
+      style={{
+        ...assignInlineVars({
+          [directionVar]: direction,
+          [sizeVar]: sizeValue,
+        }),
+      }}
+      role="separator"
+      aria-label="space"
       {...rest}
     />
   );
-};
+}

packages/ui/src/components/index.ts

@@ -1,3 +1,4 @@
-export * from './Spacing/Spacing';
+export { Spacing } from './Spacing/Spacing';
+export type { SpacingDirection, SpacingProps } from './Spacing/Spacing';
 export { Icon } from './Icon/Icon';
 export type { IconName, IconProps } from './Icon/Icon';