feat: Spacing, Divider 컴포넌트 추가

src/components/Common/Divider/Divider.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Divider from './Divider';
+
+const meta: Meta<typeof Divider> = {
+  title: 'common/Divider',
+  component: Divider,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+  },
+};
+
+export const Light: Story = {
+  args: {
+    variant: 'light',
+  },
+};

src/components/Common/Divider/Divider.tsx

@@ -0,0 +1,28 @@
+import cx from 'classnames';
+import type { ComponentPropsWithoutRef } from 'react';
+
+import { divider, dividerHeight, dividerWidth } from './divider.css';
+
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+export interface DividerProps extends ComponentPropsWithoutRef<'hr'> {
+  variant?: 'default' | 'light' | 'navigation';
+  width?: string;
+  height?: string;
+}
+
+const Divider = ({ variant = 'default', width = '100%', height = '1px', ...props }: DividerProps) => {
+  return (
+    <hr
+      aria-hidden
+      className={cx(divider({ variant }))}
+      style={assignInlineVars({
+        [dividerWidth]: width ?? '100%',
+        [dividerHeight]: height ?? '1px',
+      })}
+      {...props}
+    />
+  );
+};
+
+export default Divider;

src/components/Common/Divider/divider.css.ts

@@ -0,0 +1,23 @@
+import { vars } from '@/styles/theme.css';
+import { createVar, style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+export const dividerWidth = createVar();
+export const dividerHeight = createVar();
+
+export const dividerBase = style({
+  width: dividerWidth,
+  height: dividerHeight,
+  border: 0,
+});
+
+export const divider = recipe({
+  base: dividerBase,
+  variants: {
+    variant: {
+      default: { backgroundColor: vars.colors.border.default },
+      light: { backgroundColor: vars.colors.border.light },
+      navigation: { backgroundColor: vars.colors.border.navigation },
+    },
+  },
+});

src/components/Common/ErrorComponent/ErrorComponent.tsx

@@ -1,18 +1,19 @@
 import { container } from './errorComponent.css';
+import Spacing from '../Spacing/Spacing';
 import Text from '../Typography/Text/Text';
 
 import Error from '@/assets/error.png';
 
 const ErrorComponent = () => {
   return (
     <div className={container}>
-      <div style={{ height: 30 }} />
+      <Spacing size={30} />
       <img src={Error} alt="404 캐릭터" width={92} height={58} />
-      <div style={{ height: 12 }} />
+      <Spacing size={12} />
       <Text size="headline" weight="semiBold" color="sub">
         에러가 발생했습니다
       </Text>
-      <div style={{ height: 32 }} />
+      <Spacing size={32} />
     </div>
   );
 };

src/components/Common/Spacing/Spacing.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { PropsWithChildren } from 'react';
+
+import Spacing from './Spacing';
+
+import { vars } from '@/styles/theme.css';
+
+const meta: Meta<typeof Spacing> = {
+  title: 'common/Spacing',
+  component: Spacing,
+};
+
+export default meta;
+type Story = StoryObj<typeof Spacing>;
+
+const Container = ({ children, vertical }: PropsWithChildren<{ vertical?: boolean }>) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: `${vertical ? 'column' : 'row'}`,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const Box = () => {
+  return (
+    <div
+      style={{
+        width: '100px',
+        height: '50px',
+        backgroundColor: `${vars.colors.primary}`,
+      }}
+    />
+  );
+};
+
+export const Default: Story = {
+  render: ({ direction = 'vertical', size }) => (
+    <Container vertical={direction === 'vertical'}>
+      <Box />
+      <Spacing direction={direction} size={size} />
+      <Box />
+      <Spacing direction={direction} size={size} />
+      <Box />
+      <Spacing direction={direction} size={size} />
+      <Box />
+    </Container>
+  ),
+};
+
+export const Vertical: Story = {
+  render: ({ size }) => (
+    <Container vertical>
+      <Box />
+      <Spacing direction="vertical" size={size} />
+      <Box />
+      <Spacing direction="vertical" size={size} />
+      <Box />
+      <Spacing direction="vertical" size={size} />
+      <Box />
+    </Container>
+  ),
+};
+
+export const Horizontal: Story = {
+  render: ({ size }) => (
+    <Container>
+      <Box />
+      <Spacing direction="horizontal" size={size} />
+      <Box />
+      <Spacing direction="horizontal" size={size} />
+      <Box />
+      <Spacing direction="horizontal" size={size} />
+      <Box />
+    </Container>
+  ),
+};

src/components/Common/Spacing/Spacing.tsx

@@ -0,0 +1,27 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+import { spacing, spacingSize } from './spacing.css';
+
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+type SpacingDirections = 'vertical' | 'horizontal';
+
+export interface SpacingProps extends ComponentPropsWithoutRef<'div'> {
+  direction?: SpacingDirections;
+  size: number;
+}
+
+const Spacing = ({ direction = 'vertical', size, ...props }: SpacingProps) => {
+  return (
+    <div
+      aria-hidden="true"
+      className={direction === 'vertical' ? spacing['vertical'] : spacing['horizontal']}
+      style={assignInlineVars({
+        [spacingSize]: `${size}px`,
+      })}
+      {...props}
+    />
+  );
+};
+
+export default Spacing;

src/components/Common/Spacing/spacing.css.ts

@@ -0,0 +1,8 @@
+import { createVar, styleVariants } from '@vanilla-extract/css';
+
+export const spacingSize = createVar();
+
+export const spacing = styleVariants({
+  vertical: [{ height: spacingSize }],
+  horizontal: [{ width: spacingSize }],
+});

src/components/Common/index.ts

@@ -29,3 +29,5 @@ export { default as StarRating } from './StarRating/StarRating';
 export { default as ShowAllButton } from './ShowAllButton/ShowAllButton';
 export { default as FormTextarea } from './FormTextarea/FormTextarea';
 export { default as Stepper } from './Stepper/Stepper';
+export { default as Spacing } from './Spacing/Spacing';
+export { default as Divider } from './Divider/Divider';

src/components/Members/MemberModifyInput/MemberModifyInput.tsx

@@ -2,7 +2,7 @@ import type { ChangeEventHandler } from 'react';
 
 import { container, inputWrapper, letterCount } from './memberModifyInput.css';
 
-import { Text } from '@/components/Common';
+import { Spacing, Text } from '@/components/Common';
 
 const MIN_LENGTH = 1;
 const MAX_LENGTH = 10;
@@ -18,7 +18,7 @@ const MemberModifyInput = ({ nickname, modifyNickname }: MemberModifyInputProps)
       <Text size="caption2" weight="semiBold">
         닉네임
       </Text>
-      <div style={{ height: 8 }} />
+      <Spacing size={8} />
       <div className={container}>
         <Text className={letterCount} as="span" size="caption4" weight="medium" color="disabled">
           {nickname.length} / {MAX_LENGTH}

src/components/Members/MemberReviewItem/MemberReviewItem.tsx

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 
 import { titleWrapper } from './memberReviewItem.css';
 
-import { SvgIcon, Text } from '@/components/Common';
+import { Spacing, SvgIcon, Text } from '@/components/Common';
 import { ReviewItemInfo } from '@/components/Review';
 import { PATH } from '@/constants/path';
 import { useDeleteReview } from '@/hooks/queries/members';
@@ -60,7 +60,7 @@ const MemberReviewItem = ({ review }: MemberReviewItemProps) => {
           </Text>
         </button>
       </div>
-      <div style={{ height: '11px' }} />
+      <Spacing size={11} />
 
       <ReviewItemInfo rating={rating} createdAt={createdAt} image={image} content={content} tags={tags} />
     </>

src/components/Members/MemberReviewList/MemberReviewList.tsx

@@ -4,7 +4,7 @@ import { notFound, notFoundContainer } from './memberReviewList.css';
 import MemberReviewItem from '../MemberReviewItem/MemberReviewItem';
 
 import ReviewNotFoundImage from '@/assets/review-notfound.png';
-import { Text } from '@/components/Common';
+import { Spacing, Text } from '@/components/Common';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteMemberReviewQuery } from '@/hooks/queries/members';
 import displaySlice from '@/utils/displaySlice';
@@ -47,7 +47,7 @@ const MemberReviewList = ({ isPreview = false }: MemberReviewListProps) => {
             <li key={review.reviewId}>
               <MemberReviewItem review={review} />
             </li>
-            <div style={{ height: '40px' }} />
+            <Spacing size={40} />
           </>
         ))}
       </ul>

src/components/Members/MembersInfo/MembersInfo.tsx

@@ -4,7 +4,7 @@ import { container, logoutButton, modifyButton, wrapper } from './memberInfo.css
 import MemberImage from '../MemberImage/MemberImage';
 import PostCounterBox from '../PostCounterBox/PostCounterBox';
 
-import { SvgIcon, Text } from '@/components/Common';
+import { Spacing, SvgIcon, Text } from '@/components/Common';
 import { PATH } from '@/constants/path';
 import { useLogoutMutation, useMemberQuery } from '@/hooks/queries/members';
 import { vars } from '@/styles/theme.css';
@@ -41,15 +41,15 @@ const MembersInfo = () => {
             objectFit: `cover`,
           }}
         />
-        <div style={{ width: '10px' }} />
+        <Spacing direction="horizontal" size={10} />
         <Text size="display1" weight="semiBold">
           {nickname}
         </Text>
         <Link to={`${PATH.MEMBER}/modify`} className={modifyButton}>
           <SvgIcon variant="pencil" width={12} height={12} fill={vars.colors.white} />
         </Link>
       </div>
-      <div style={{ height: '24px' }} />
+      <Spacing size={24} />
 
       <PostCounterBox recipeCount={recipeCount} reviewCount={reviewCount} />
     </div>

src/components/Product/ProductItem/ProductItem.tsx

@@ -3,7 +3,7 @@ import { memo, useState } from 'react';
 
 import { container, imageWrapper, previewWrapper, productImage, summaryWrapper } from './productItem.css';
 
-import { SvgIcon, Text } from '@/components/Common';
+import { Spacing, SvgIcon, Text } from '@/components/Common';
 import { ellipsis } from '@/styles/common.css';
 import { vars } from '@/styles/theme.css';
 import type { Product } from '@/types/product';
@@ -33,16 +33,16 @@ const ProductItem = ({ product }: ProductItemProps) => {
           </div>
         )}
       </div>
-      <div style={{ height: '8px' }} />
+      <Spacing size={8} />
       <Text className={ellipsis} size="caption3" weight="semiBold" color="sub">
         {name}
       </Text>
-      <div style={{ height: '2px' }} />
+      <Spacing size={2} />
       {/* 추후 bold로 변경 */}
       <Text size="caption2" weight="semiBold" color="sub">
         {price.toLocaleString('ko-KR')}원
       </Text>
-      <div style={{ height: '8px' }} />
+      <Spacing size={8} />
       <div className={summaryWrapper}>
         <div className={previewWrapper}>
           <SvgIcon variant="star2" width={11} height={11} fill={vars.colors.gray2} />

src/components/Product/ProductOverviewItem/ProductOverviewItem.tsx

@@ -1,6 +1,6 @@
 import { container, priceRate, priceRateWrapper, rateWrapper, wrapper } from './productOverviewItem.css';
 
-import { SvgIcon } from '@/components/Common';
+import { Spacing, SvgIcon } from '@/components/Common';
 import {
   PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_1,
   PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_2,
@@ -34,7 +34,7 @@ const ProductOverviewItem = ({ product }: ProductOverviewItemProps) => {
         <img src={image ?? defaultImage} width={60} height={60} alt={name} />
         <div>
           <p>{name}</p>
-          <div style={{ height: '6px' }} />
+          <Spacing size={6} />
           <div className={priceRateWrapper}>
             <span className={priceRate}>{price}원</span>
             <div className={rateWrapper}>

src/components/Product/ProductOverviewList/ProductOverviewList.tsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { container } from './productOverviewList.css';
 import ProductOverviewItem from '../ProductOverviewItem/ProductOverviewItem';
 
+import { Divider, Spacing } from '@/components/Common';
 import { UsedProductOverviewItem } from '@/components/Recipe';
 import { PATH } from '@/constants/path';
 import type { Product } from '@/types/product';
@@ -27,8 +28,8 @@ const ProductOverviewList = ({ products, hasBorder = false, hasRemoved = false }
           )}
           {hasBorder && (
             <>
-              <div style={{ height: '20px' }} />
-              <hr style={{ border: '0.5px solid #e6e6e6' }} />
+              <Spacing size={20} />
+              <Divider variant="default" />
             </>
           )}
         </li>

src/components/Product/ProductRecipeList/ProductRecipeList.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { container, moreItem, notFound, recipeLink } from './productRecipeList.css';
 
 import SearchNotFoundImage from '@/assets/search-notfound.png';
-import { Text, ShowAllButton } from '@/components/Common';
+import { Text, ShowAllButton, Spacing } from '@/components/Common';
 import { DefaultRecipeItem } from '@/components/Recipe';
 import { PATH } from '@/constants/path';
 import { useInfiniteProductRecipesQuery } from '@/hooks/queries/product';
@@ -28,7 +28,7 @@ const ProductRecipeList = ({ productId, productName }: ProductRecipeListProps) =
         <Text color="disabled" size="caption4">
           아직 작성된 꿀조합이 없어요
         </Text>
-        <div style={{ height: '6px' }} />
+        <Spacing size={6} />
         <Link to={PATH.RECIPE} className={recipeLink}>
           <Text as="span" color="sub" weight="semiBold" size="caption2">
             꿀조합 작성하러 가기