From bf3060d0f4b8efb6ebba3044533f142d79457014 Mon Sep 17 00:00:00 2001
From: TaeeunKim <xodms0309@naver.com>
Date: Sun, 28 Jul 2024 18:25:48 +0200
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20Spacing=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Common/Spacing/Spacing.stories.tsx        | 81 +++++++++++++++++++
 src/components/Common/Spacing/Spacing.tsx     | 27 +++++++
 src/components/Common/Spacing/spacing.css.ts  |  8 ++
 src/components/Common/index.ts                |  1 +
 4 files changed, 117 insertions(+)
 create mode 100644 src/components/Common/Spacing/Spacing.stories.tsx
 create mode 100644 src/components/Common/Spacing/Spacing.tsx
 create mode 100644 src/components/Common/Spacing/spacing.css.ts

diff --git a/src/components/Common/Spacing/Spacing.stories.tsx b/src/components/Common/Spacing/Spacing.stories.tsx
new file mode 100644
index 00000000..3cf539af
--- /dev/null
+++ b/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>
+  ),
+};
diff --git a/src/components/Common/Spacing/Spacing.tsx b/src/components/Common/Spacing/Spacing.tsx
new file mode 100644
index 00000000..d2bc12d0
--- /dev/null
+++ b/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;
diff --git a/src/components/Common/Spacing/spacing.css.ts b/src/components/Common/Spacing/spacing.css.ts
new file mode 100644
index 00000000..3e8936bd
--- /dev/null
+++ b/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 }],
+});
diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts
index c76cc771..5bd8b62e 100644
--- a/src/components/Common/index.ts
+++ b/src/components/Common/index.ts
@@ -29,3 +29,4 @@ 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';

From d8674fd14f2f725c40f7f087aeaa17dbe74d1d0f Mon Sep 17 00:00:00 2001
From: TaeeunKim <xodms0309@naver.com>
Date: Sun, 28 Jul 2024 18:37:02 +0200
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=EB=94=94=EC=9E=90=EC=9D=B8?=
 =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=EC=9D=98=20Spacing=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Common/ErrorComponent/ErrorComponent.tsx           |  7 ++++---
 .../Members/MemberModifyInput/MemberModifyInput.tsx    |  4 ++--
 .../Members/MemberReviewItem/MemberReviewItem.tsx      |  4 ++--
 .../Members/MemberReviewList/MemberReviewList.tsx      |  4 ++--
 src/components/Members/MembersInfo/MembersInfo.tsx     |  6 +++---
 src/components/Product/ProductItem/ProductItem.tsx     |  8 ++++----
 .../ProductOverviewItem/ProductOverviewItem.tsx        |  4 ++--
 .../ProductOverviewList/ProductOverviewList.tsx        |  3 ++-
 .../Product/ProductRecipeList/ProductRecipeList.tsx    |  4 ++--
 .../Rank/ProductRankingItem/ProductRankingItem.tsx     |  6 ++++--
 .../Rank/ReviewRankingItem/ReviewRankingItem.tsx       |  8 ++++----
 .../RecipeDetailTextarea/RecipeDetailTextarea.tsx      |  3 ++-
 src/components/Recipe/RecipeItem/RecipeItem.tsx        | 10 +++++-----
 .../Recipe/RecipeNameInput/RecipeNameInput.tsx         |  4 ++--
 .../Recipe/RecipeRegisterForm/RecipeRegisterForm.tsx   |  8 ++++----
 .../Recipe/RecipeUsedProducts/RecipeUsedProducts.tsx   |  6 +++---
 .../Recipe/RecipeUsedProducts/SearchedProductList.tsx  |  4 ++--
 .../RecipeUsedProducts/UsedProductOverviewItem.tsx     |  4 ++--
 .../Review/BestReviewItem/BestReviewItem.tsx           |  4 ++--
 src/components/Review/ReviewItem/ReviewItem.tsx        |  4 ++--
 .../Review/ReviewItemInfo/ReviewItemInfo.tsx           |  8 ++++----
 src/components/Review/ReviewList/ReviewList.tsx        |  8 ++++----
 .../Review/ReviewRegisterForm/ReviewRegisterForm.tsx   |  4 ++--
 src/components/Search/RecommendList/RecommendList.tsx  |  4 ++--
 .../Search/SearchNotFound/SearchNotFound.tsx           |  4 ++--
 src/pages/HomePage/HomePage.tsx                        |  2 +-
 src/pages/LoginPage/LoginPage.tsx                      |  8 ++++----
 src/pages/MemberModifyPage/MemberModifyPage.tsx        |  6 +++---
 src/pages/MemberPage/MemberPage.tsx                    |  8 ++++----
 src/pages/MemberPostPage/MemberPostPage.tsx            |  4 ++--
 src/pages/MemberRecipeBookmarkPage.tsx                 |  4 ++--
 src/pages/NotFoundPage/NotFoundPage.tsx                |  8 ++++----
 src/pages/OnboardingPage/OnboardingContent.tsx         |  6 +++---
 src/pages/OnboardingPage/OnboardingPage.tsx            |  4 ++--
 src/pages/ProductDetailPage/ProductDetailPage.tsx      |  5 +++--
 src/pages/ProductPage/ProductPage.tsx                  |  2 +-
 src/pages/RecipeDetailPage/RecipeDetailPage.tsx        |  4 ++--
 src/pages/RecipePage/RecipePage.tsx                    |  3 ++-
 38 files changed, 102 insertions(+), 95 deletions(-)

diff --git a/src/components/Common/ErrorComponent/ErrorComponent.tsx b/src/components/Common/ErrorComponent/ErrorComponent.tsx
index ff0027c4..0c8326ec 100644
--- a/src/components/Common/ErrorComponent/ErrorComponent.tsx
+++ b/src/components/Common/ErrorComponent/ErrorComponent.tsx
@@ -1,4 +1,5 @@
 import { container } from './errorComponent.css';
+import Spacing from '../Spacing/Spacing';
 import Text from '../Typography/Text/Text';
 
 import Error from '@/assets/error.png';
@@ -6,13 +7,13 @@ 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>
   );
 };
diff --git a/src/components/Members/MemberModifyInput/MemberModifyInput.tsx b/src/components/Members/MemberModifyInput/MemberModifyInput.tsx
index be7cfb1f..7e49b4df 100644
--- a/src/components/Members/MemberModifyInput/MemberModifyInput.tsx
+++ b/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}
diff --git a/src/components/Members/MemberReviewItem/MemberReviewItem.tsx b/src/components/Members/MemberReviewItem/MemberReviewItem.tsx
index 52efee7b..b615e0ff 100644
--- a/src/components/Members/MemberReviewItem/MemberReviewItem.tsx
+++ b/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} />
     </>
diff --git a/src/components/Members/MemberReviewList/MemberReviewList.tsx b/src/components/Members/MemberReviewList/MemberReviewList.tsx
index 8bf423b0..4f97b41b 100644
--- a/src/components/Members/MemberReviewList/MemberReviewList.tsx
+++ b/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>
diff --git a/src/components/Members/MembersInfo/MembersInfo.tsx b/src/components/Members/MembersInfo/MembersInfo.tsx
index 6140ae50..8a50958a 100644
--- a/src/components/Members/MembersInfo/MembersInfo.tsx
+++ b/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,7 +41,7 @@ const MembersInfo = () => {
             objectFit: `cover`,
           }}
         />
-        <div style={{ width: '10px' }} />
+        <Spacing direction="horizontal" size={10} />
         <Text size="display1" weight="semiBold">
           {nickname}
         </Text>
@@ -49,7 +49,7 @@ const MembersInfo = () => {
           <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>
diff --git a/src/components/Product/ProductItem/ProductItem.tsx b/src/components/Product/ProductItem/ProductItem.tsx
index 25baea67..0cb871a6 100644
--- a/src/components/Product/ProductItem/ProductItem.tsx
+++ b/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} />
diff --git a/src/components/Product/ProductOverviewItem/ProductOverviewItem.tsx b/src/components/Product/ProductOverviewItem/ProductOverviewItem.tsx
index 0c9fd29f..e787c43a 100644
--- a/src/components/Product/ProductOverviewItem/ProductOverviewItem.tsx
+++ b/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}>
diff --git a/src/components/Product/ProductOverviewList/ProductOverviewList.tsx b/src/components/Product/ProductOverviewList/ProductOverviewList.tsx
index 50561753..9a6fae65 100644
--- a/src/components/Product/ProductOverviewList/ProductOverviewList.tsx
+++ b/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 { Spacing } from '@/components/Common';
 import { UsedProductOverviewItem } from '@/components/Recipe';
 import { PATH } from '@/constants/path';
 import type { Product } from '@/types/product';
@@ -27,7 +28,7 @@ const ProductOverviewList = ({ products, hasBorder = false, hasRemoved = false }
           )}
           {hasBorder && (
             <>
-              <div style={{ height: '20px' }} />
+              <Spacing size={20} />
               <hr style={{ border: '0.5px solid #e6e6e6' }} />
             </>
           )}
diff --git a/src/components/Product/ProductRecipeList/ProductRecipeList.tsx b/src/components/Product/ProductRecipeList/ProductRecipeList.tsx
index 3c901d91..696656df 100644
--- a/src/components/Product/ProductRecipeList/ProductRecipeList.tsx
+++ b/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">
             꿀조합 작성하러 가기
diff --git a/src/components/Rank/ProductRankingItem/ProductRankingItem.tsx b/src/components/Rank/ProductRankingItem/ProductRankingItem.tsx
index 2f6ab22b..5ca541c0 100644
--- a/src/components/Rank/ProductRankingItem/ProductRankingItem.tsx
+++ b/src/components/Rank/ProductRankingItem/ProductRankingItem.tsx
@@ -7,6 +7,8 @@ import {
   productPrice,
 } from './productRankingItem.css';
 
+import { Spacing } from '@/components/Common';
+
 interface ProductRankingItemProps {
   name: string;
   image: string;
@@ -21,9 +23,9 @@ const ProductRankingItem = ({ name, image, rank, price }: ProductRankingItemProp
         <img className={productImage} src={image} alt={name} />
         <p className={productRank}>{rank}</p>
       </div>
-      <div style={{ height: '5px' }} />
+      <Spacing size={5} />
       <p className={productTitle}>{name}</p>
-      <div style={{ height: '2px' }} />
+      <Spacing size={2} />
       <p className={productPrice}>{price.toLocaleString('ko-KR')}원</p>
     </div>
   );
diff --git a/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx b/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx
index 141e6dc6..0e037d82 100644
--- a/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx
+++ b/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react';
 
 import { reviewImage, tagList, tag, tagName, reviewContent } from './reviewRankingItem.css';
 
-import { Text } from '@/components/Common';
+import { Spacing, Text } from '@/components/Common';
 import { REVIEW_CARD_DEFAULT_IMAGE_URL } from '@/constants/image';
 import { ellipsis } from '@/styles/common.css';
 import type { ReviewRanking } from '@/types/ranking';
@@ -25,15 +25,15 @@ const ReviewRankingItem = ({ productName, content, tags, image }: ReviewRankingI
       {image !== null && (
         <img src={image === '' ? REVIEW_CARD_DEFAULT_IMAGE_URL : image} className={reviewImage} alt={productName} />
       )}
-      <div style={{ height: '8px' }} />
+      <Spacing size={8} />
       <Text className={ellipsis} color="sub" size="caption2" weight="semiBold">
         {productName}
       </Text>
-      <div style={{ height: '4px' }} />
+      <Spacing size={4} />
       <Text color="info" size="caption4" className={reviewContent}>
         {content}
       </Text>
-      <div style={{ height: '10px' }} />
+      <Spacing size={10} />
       <ul className={tagList}>
         {tagToDisplay.map(({ id, name }) => (
           <li key={id} className={tag}>
diff --git a/src/components/Recipe/RecipeDetailTextarea/RecipeDetailTextarea.tsx b/src/components/Recipe/RecipeDetailTextarea/RecipeDetailTextarea.tsx
index 79d5cdd4..dd484ca4 100644
--- a/src/components/Recipe/RecipeDetailTextarea/RecipeDetailTextarea.tsx
+++ b/src/components/Recipe/RecipeDetailTextarea/RecipeDetailTextarea.tsx
@@ -1,7 +1,8 @@
-import { Heading, Spacing, Textarea, Text, useTheme } from '@fun-eat/design-system';
+import { Heading, Textarea, Text, useTheme } from '@fun-eat/design-system';
 import type { ChangeEventHandler } from 'react';
 import styled from 'styled-components';
 
+import { Spacing } from '@/components/Common';
 import { useRecipeFormActionContext } from '@/hooks/context';
 
 const MAX_LENGTH = 500;
diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx
index 887e5428..1cc92f86 100644
--- a/src/components/Recipe/RecipeItem/RecipeItem.tsx
+++ b/src/components/Recipe/RecipeItem/RecipeItem.tsx
@@ -17,7 +17,7 @@ import {
 import RecipeFavoriteButton from '../RecipeFavoriteButton/RecipeFavoriteButton';
 import RecipeProductButton from '../RecipeProductButton/RecipeProductButton';
 
-import { Text } from '@/components/Common';
+import { Spacing, Text } from '@/components/Common';
 import {
   RECIPE_CARD_DEFAULT_IMAGE_URL_1,
   RECIPE_CARD_DEFAULT_IMAGE_URL_2,
@@ -192,7 +192,7 @@ export const DefaultRecipeItem = ({ recipe }: RecipeItemProps) => {
   return (
     <RecipeItem recipe={recipe}>
       <RecipeItem.ImageAndFavoriteButton />
-      <div style={{ height: '8px' }} />
+      <Spacing size={8} />
       <RecipeItem.Title />
       <RecipeItem.AuthorAndCreatedDate />
     </RecipeItem>
@@ -205,7 +205,7 @@ export const RecipeItemWithDiskIcon = ({ recipe }: RecipeItemProps) => {
       <RecipeItem.ImageAndFavoriteButton>
         <RecipeItem.ProductButton />
       </RecipeItem.ImageAndFavoriteButton>
-      <div style={{ height: '8px' }} />
+      <Spacing size={8} />
       <RecipeItem.Title />
       <RecipeItem.AuthorAndCreatedDate />
     </RecipeItem>
@@ -218,7 +218,7 @@ export const RecipeItemWithProductDetailImage = ({ recipe }: RecipeItemProps) =>
       <RecipeItem.ImageAndFavoriteButton>
         <RecipeItem.ProductCircleButton />
       </RecipeItem.ImageAndFavoriteButton>
-      <div style={{ height: '8px' }} />
+      <Spacing size={8} />
       <RecipeItem.Title />
       <RecipeItem.Author />
       <RecipeItem.Content />
@@ -232,7 +232,7 @@ export const RecipeItemWithDiskIconAndContent = ({ recipe }: RecipeItemProps) =>
       <RecipeItem.ImageAndFavoriteButton>
         <RecipeItem.ProductButton />
       </RecipeItem.ImageAndFavoriteButton>
-      <div style={{ height: '8px' }} />
+      <Spacing size={8} />
       <RecipeItem.Title />
       <RecipeItem.AuthorAndCreatedDate />
       <RecipeItem.Content />
diff --git a/src/components/Recipe/RecipeNameInput/RecipeNameInput.tsx b/src/components/Recipe/RecipeNameInput/RecipeNameInput.tsx
index 07d52ee1..a71fba26 100644
--- a/src/components/Recipe/RecipeNameInput/RecipeNameInput.tsx
+++ b/src/components/Recipe/RecipeNameInput/RecipeNameInput.tsx
@@ -3,7 +3,7 @@ import type { FocusEventHandler, ChangeEventHandler } from 'react';
 
 import { formInput } from './recipeNameInput.css';
 
-import { SvgIcon, Text } from '@/components/Common';
+import { Spacing, SvgIcon, Text } from '@/components/Common';
 import { useRecipeFormActionContext } from '@/hooks/context';
 import { errorMessage, errorWrapper, itemTitle, requiredMark } from '@/styles/form.css';
 
@@ -51,7 +51,7 @@ const RecipeNameInput = ({ recipeName }: RecipeNameInputProps) => {
         onFocus={handleFocus}
         onBlur={handleBlur}
       />
-      <div style={{ height: 5 }} />
+      <Spacing size={5} />
 
       <div className={isValid ? errorWrapper.hidden : errorWrapper.show}>
         <SvgIcon variant="error" width={12} height={12} fill="currentColor" />
diff --git a/src/components/Recipe/RecipeRegisterForm/RecipeRegisterForm.tsx b/src/components/Recipe/RecipeRegisterForm/RecipeRegisterForm.tsx
index 1fafcd4c..9a1a4a46 100644
--- a/src/components/Recipe/RecipeRegisterForm/RecipeRegisterForm.tsx
+++ b/src/components/Recipe/RecipeRegisterForm/RecipeRegisterForm.tsx
@@ -4,7 +4,7 @@ import type { FormEventHandler } from 'react';
 import RecipeNameInput from '../RecipeNameInput/RecipeNameInput';
 import RecipeUsedProducts from '../RecipeUsedProducts/RecipeUsedProducts';
 
-import { FormTextarea, ImageUploader } from '@/components/Common';
+import { FormTextarea, ImageUploader, Spacing } from '@/components/Common';
 import { useImageUploader, useFormData } from '@/hooks/common';
 import { useRecipeFormValueContext, useRecipeFormActionContext } from '@/hooks/context';
 import { useRecipeRegisterFormMutation } from '@/hooks/queries/recipe';
@@ -60,13 +60,13 @@ const RecipeRegisterForm = () => {
         </h2>
         <ImageUploader previewImage={previewImage} uploadImage={uploadImage} deleteImage={deleteImage} />
       </div>
-      <div style={{ height: 32 }} />
+      <Spacing size={32} />
 
       <RecipeUsedProducts />
-      <div style={{ height: 32 }} />
+      <Spacing size={32} />
 
       <RecipeNameInput recipeName={recipeFormValue.title} />
-      <div style={{ height: 32 }} />
+      <Spacing size={32} />
 
       <FormTextarea
         content={recipeFormValue.content}
diff --git a/src/components/Recipe/RecipeUsedProducts/RecipeUsedProducts.tsx b/src/components/Recipe/RecipeUsedProducts/RecipeUsedProducts.tsx
index 0ff21139..2344ff76 100644
--- a/src/components/Recipe/RecipeUsedProducts/RecipeUsedProducts.tsx
+++ b/src/components/Recipe/RecipeUsedProducts/RecipeUsedProducts.tsx
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 
 import { addProduct, disabled, iconWrapper } from './recipeUsedProducts.css';
 
-import { ErrorBoundary, ErrorComponent, Loading, SvgIcon, Text } from '@/components/Common';
+import { ErrorBoundary, ErrorComponent, Loading, Spacing, SvgIcon, Text } from '@/components/Common';
 import { ProductOverviewList } from '@/components/Product';
 import { PATH } from '@/constants/path';
 import { useRecipeFormValueContext } from '@/hooks/context';
@@ -27,7 +27,7 @@ const RecipeUsedProducts = () => {
           *
         </sup>
       </h2>
-      <div style={{ height: 8 }} />
+      <Spacing size={8} />
 
       {isValid ? (
         <Link to={`${PATH.RECIPE}/used-products`} className={addProduct}>
@@ -43,7 +43,7 @@ const RecipeUsedProducts = () => {
           </Text>
         </div>
       )}
-      <div style={{ height: 8 }} />
+      <Spacing size={8} />
 
       <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
         <Suspense fallback={<Loading />}>
diff --git a/src/components/Recipe/RecipeUsedProducts/SearchedProductList.tsx b/src/components/Recipe/RecipeUsedProducts/SearchedProductList.tsx
index ecc2dc00..d6db76dc 100644
--- a/src/components/Recipe/RecipeUsedProducts/SearchedProductList.tsx
+++ b/src/components/Recipe/RecipeUsedProducts/SearchedProductList.tsx
@@ -1,7 +1,7 @@
 import type { MouseEventHandler } from 'react';
 import { useRef } from 'react';
 
-import { MarkedText, Text } from '@/components/Common';
+import { MarkedText, Spacing, Text } from '@/components/Common';
 import { container, backdrop, wrapper, productButton } from '@/components/Search/RecommendList/recommendList.css';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteProductSearchAutocompleteQuery } from '@/hooks/queries/search';
@@ -43,7 +43,7 @@ const SearchedProductList = ({ searchQuery, addUsedProducts, handleAutocompleteC
               onClick={() => addUsedProducts(product)}
             >
               <MarkedText text={product.name} mark={searchQuery} />
-              <div style={{ width: '10px' }} />
+              <Spacing direction="horizontal" size={10} />
               <Text size="caption4" weight="semiBold" color="disabled">
                 상품
               </Text>
diff --git a/src/components/Recipe/RecipeUsedProducts/UsedProductOverviewItem.tsx b/src/components/Recipe/RecipeUsedProducts/UsedProductOverviewItem.tsx
index f2b1037b..4645e64f 100644
--- a/src/components/Recipe/RecipeUsedProducts/UsedProductOverviewItem.tsx
+++ b/src/components/Recipe/RecipeUsedProducts/UsedProductOverviewItem.tsx
@@ -7,7 +7,7 @@ import {
   wrapper,
 } from '../../Product/ProductOverviewItem/productOverviewItem.css';
 
-import { SvgIcon } from '@/components/Common';
+import { Spacing, SvgIcon } from '@/components/Common';
 import { useRecipeFormActionContext } from '@/hooks/context';
 import { vars } from '@/styles/theme.css';
 import type { Product } from '@/types/product';
@@ -32,7 +32,7 @@ const UsedProductOverviewItem = ({ product }: ProductOverviewItemProps) => {
         <img src={image} 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}>
diff --git a/src/components/Review/BestReviewItem/BestReviewItem.tsx b/src/components/Review/BestReviewItem/BestReviewItem.tsx
index 731d5d14..47d6005f 100644
--- a/src/components/Review/BestReviewItem/BestReviewItem.tsx
+++ b/src/components/Review/BestReviewItem/BestReviewItem.tsx
@@ -1,7 +1,7 @@
-import { Spacing, Text, useTheme } from '@fun-eat/design-system';
+import { Text, useTheme } from '@fun-eat/design-system';
 import styled from 'styled-components';
 
-import { SvgIcon } from '@/components/Common';
+import { Spacing, SvgIcon } from '@/components/Common';
 import { MemberImage } from '@/components/Members';
 import { useBestReviewQuery } from '@/hooks/queries/rank';
 
diff --git a/src/components/Review/ReviewItem/ReviewItem.tsx b/src/components/Review/ReviewItem/ReviewItem.tsx
index 34c508f3..d44689d8 100644
--- a/src/components/Review/ReviewItem/ReviewItem.tsx
+++ b/src/components/Review/ReviewItem/ReviewItem.tsx
@@ -4,7 +4,7 @@ import { favoriteWrapper, memberInfo } from './reviewItem.css';
 import ReviewFavoriteButton from '../ReviewFavoriteButton/ReviewFavoriteButton';
 import ReviewItemInfo from '../ReviewItemInfo/ReviewItemInfo';
 
-import { Badge, Text } from '@/components/Common';
+import { Badge, Spacing, Text } from '@/components/Common';
 import { MemberImage } from '@/components/Members';
 import { vars } from '@/styles/theme.css';
 import type { Review } from '@/types/review';
@@ -32,7 +32,7 @@ const ReviewItem = ({ productId, review }: ReviewItemProps) => {
           <ReviewFavoriteButton productId={productId} reviewId={id} favorite={favorite} favoriteCount={favoriteCount} />
         </div>
       </div>
-      <div style={{ height: '12px' }} />
+      <Spacing size={12} />
 
       <ReviewItemInfo rating={rating} createdAt={createdAt} image={image} content={content} tags={tags} />
     </div>
diff --git a/src/components/Review/ReviewItemInfo/ReviewItemInfo.tsx b/src/components/Review/ReviewItemInfo/ReviewItemInfo.tsx
index c657b0ab..77aa6b53 100644
--- a/src/components/Review/ReviewItemInfo/ReviewItemInfo.tsx
+++ b/src/components/Review/ReviewItemInfo/ReviewItemInfo.tsx
@@ -1,6 +1,6 @@
 import { reviewImage } from './reviewItemInfo.css';
 
-import { StarRating, TagList, Text } from '@/components/Common';
+import { Spacing, StarRating, TagList, Text } from '@/components/Common';
 import type { Tag } from '@/types/common';
 
 interface ReviewItemInfoProps {
@@ -15,15 +15,15 @@ const ReviewItemInfo = ({ rating, createdAt, image, content, tags }: ReviewItemI
   return (
     <>
       <StarRating rating={rating} createdAt={createdAt} />
-      <div style={{ height: '8px' }} />
+      <Spacing size={8} />
 
       {image && <img className={reviewImage} src={image} alt="작성한 리뷰" />}
-      <div style={{ height: '8px' }} />
+      <Spacing size={8} />
 
       <Text size="caption2" color="sub">
         {content}
       </Text>
-      <div style={{ height: '8px' }} />
+      <Spacing size={8} />
 
       <TagList tags={tags} />
     </>
diff --git a/src/components/Review/ReviewList/ReviewList.tsx b/src/components/Review/ReviewList/ReviewList.tsx
index ad25a5a9..30de5013 100644
--- a/src/components/Review/ReviewList/ReviewList.tsx
+++ b/src/components/Review/ReviewList/ReviewList.tsx
@@ -4,7 +4,7 @@ import { container, notFound } from './reviewList.css';
 import ReviewItem from '../ReviewItem/ReviewItem';
 
 import ReviewNotFoundImage from '@/assets/review-notfound.png';
-import { Loading, Text } from '@/components/Common';
+import { Loading, Spacing, Text } from '@/components/Common';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteProductReviewsQuery } from '@/hooks/queries/product';
 import type { SortOption } from '@/types/common';
@@ -27,13 +27,13 @@ const ReviewList = ({ productId, selectedOption }: ReviewListProps) => {
   if (reviews.length === 0) {
     return (
       <div className={notFound}>
-        <div style={{ height: 52 }} />
+        <Spacing size={52} />
         <img src={ReviewNotFoundImage} width={117} alt="검색 결과 없음" />
-        <div style={{ height: 25 }} />
+        <Spacing size={25} />
         <Text color="disabled" size="caption4">
           새로운 리뷰를 작성해주세요
         </Text>
-        <div style={{ height: 20 }} />
+        <Spacing size={20} />
       </div>
     );
   }
diff --git a/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx b/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx
index 29b8f793..2db3e6b0 100644
--- a/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx
+++ b/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx
@@ -1,4 +1,4 @@
-import { Spacing, useToastActionContext } from '@fun-eat/design-system';
+import { useToastActionContext } from '@fun-eat/design-system';
 import type { FormEventHandler } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -6,7 +6,7 @@ import { tagAddButton, tagButton, tagList } from './reviewRegisterForm.css';
 import StarRate from './StarRate/StarRate';
 import RebuyCheckbox from '../RebuyCheckbox/RebuyCheckbox';
 
-import { FormTextarea, ImageUploader, SvgIcon, Text } from '@/components/Common';
+import { FormTextarea, ImageUploader, Spacing, SvgIcon, Text } from '@/components/Common';
 import type { TagValue } from '@/contexts/ReviewFormContext';
 import { useFormData, useImageUploader } from '@/hooks/common';
 import { useReviewFormActionContext, useReviewFormValueContext } from '@/hooks/context';
diff --git a/src/components/Search/RecommendList/RecommendList.tsx b/src/components/Search/RecommendList/RecommendList.tsx
index e0d328ff..9d8a4e3f 100644
--- a/src/components/Search/RecommendList/RecommendList.tsx
+++ b/src/components/Search/RecommendList/RecommendList.tsx
@@ -3,7 +3,7 @@ import { useRef } from 'react';
 
 import { backdrop, container, productButton, wrapper } from './recommendList.css';
 
-import { MarkedText, Text } from '@/components/Common';
+import { MarkedText, Spacing, Text } from '@/components/Common';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteProductSearchAutocompleteQuery } from '@/hooks/queries/search';
 import { vars } from '@/styles/theme.css';
@@ -33,7 +33,7 @@ const RecommendList = ({ searchQuery, handleSearchClick, handleAutocompleteClose
           <li key={id}>
             <button className={productButton} type="button" color="white" value={name} onClick={handleSearchClick}>
               <MarkedText text={name} mark={searchQuery} />
-              <div style={{ width: '10px' }} />
+              <Spacing direction="horizontal" size={10} />
               <Text size="caption4" weight="semiBold" color="disabled">
                 상품
               </Text>
diff --git a/src/components/Search/SearchNotFound/SearchNotFound.tsx b/src/components/Search/SearchNotFound/SearchNotFound.tsx
index f1c1479a..5ffa1b0a 100644
--- a/src/components/Search/SearchNotFound/SearchNotFound.tsx
+++ b/src/components/Search/SearchNotFound/SearchNotFound.tsx
@@ -1,7 +1,7 @@
 import { container } from './searchNotFound.css';
 
 import SearchNotFoundImage from '@/assets/search-notfound.png';
-import { Text } from '@/components/Common';
+import { Spacing, Text } from '@/components/Common';
 
 const SearchNotFound = () => {
   return (
@@ -10,7 +10,7 @@ const SearchNotFound = () => {
       <Text color="sub" size="headline" weight="semiBold">
         검색 결과가 없어요
       </Text>
-      <div style={{ height: '6px' }} />
+      <Spacing size={6} />
       <Text color="disabled" size="caption4">
         다른 키워드로 검색해보세요!
       </Text>
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
index f46e37d3..81f74d61 100644
--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@@ -1,4 +1,3 @@
-import { Spacing } from '@fun-eat/design-system';
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
 import { Suspense } from 'react';
 import { Link } from 'react-router-dom';
@@ -14,6 +13,7 @@ import {
   SvgIcon,
   Banner,
   SectionHeader,
+  Spacing,
 } from '@/components/Common';
 import { ProductRankingList, ReviewRankingList, RecipeRankingList } from '@/components/Rank';
 import { PATH } from '@/constants/path';
diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
index 69d6acee..0dbe8236 100644
--- a/src/pages/LoginPage/LoginPage.tsx
+++ b/src/pages/LoginPage/LoginPage.tsx
@@ -3,7 +3,7 @@ import { Navigate } from 'react-router-dom';
 import { buttonWrapper, container, imageWrapper, kakaoButton, main, wrapper } from './loginPage.css';
 
 import LoginImage from '@/assets/login.png';
-import { SvgIcon, Text, TopBar } from '@/components/Common';
+import { Spacing, SvgIcon, Text, TopBar } from '@/components/Common';
 import { useMemberQuery } from '@/hooks/queries/members';
 
 const loginLink = process.env.NODE_ENV === 'development' ? '/login/kakao?code=qwe' : '/api/auth/kakao';
@@ -24,16 +24,16 @@ export const LoginPage = () => {
       <main className={main}>
         <section className={container}>
           <div className={wrapper}>
-            <div style={{ height: 40 }} />
+            <Spacing size={40} />
             <Text size="display1" weight="semiBold">
               로그인이 필요합니다
             </Text>
-            <div style={{ height: 8 }} />
+            <Spacing size={8} />
             <Text size="caption2" color="info" weight="medium">
               다양한 편의점 상품을 쉽게 찾아보고, <br />
               상품의 조합과 레시피를 살펴보세요!
             </Text>
-            <div style={{ height: 116 }} />
+            <Spacing size={116} />
           </div>
           <div className={imageWrapper}>
             <img src={LoginImage} alt="로그인 캐릭터" width={220} height={300} />
diff --git a/src/pages/MemberModifyPage/MemberModifyPage.tsx b/src/pages/MemberModifyPage/MemberModifyPage.tsx
index ca2f024e..0cbbdfee 100644
--- a/src/pages/MemberModifyPage/MemberModifyPage.tsx
+++ b/src/pages/MemberModifyPage/MemberModifyPage.tsx
@@ -16,7 +16,7 @@ import {
   profileImageWrapper,
 } from './memberModifyPage.css';
 
-import { SvgIcon, TopBar } from '@/components/Common';
+import { Spacing, SvgIcon, TopBar } from '@/components/Common';
 import { MemberModifyInput } from '@/components/Members';
 import { IMAGE_MAX_SIZE } from '@/constants';
 import { useFormData, useImageUploader } from '@/hooks/common';
@@ -99,7 +99,7 @@ export const MemberModifyPage = () => {
       <TopBar>
         <TopBar.BackLink />
       </TopBar>
-      <div style={{ height: '24px' }} />
+      <Spacing size={24} />
 
       <section className={container}>
         <form onSubmit={handleSubmit}>
@@ -126,7 +126,7 @@ export const MemberModifyPage = () => {
               </label>
             </div>
           </div>
-          <div style={{ height: 20 }} />
+          <Spacing size={20} />
 
           <MemberModifyInput nickname={nickname} modifyNickname={modifyNickname} />
           <div className={buttonWrapper}>
diff --git a/src/pages/MemberPage/MemberPage.tsx b/src/pages/MemberPage/MemberPage.tsx
index 1f370174..6285ad2d 100644
--- a/src/pages/MemberPage/MemberPage.tsx
+++ b/src/pages/MemberPage/MemberPage.tsx
@@ -3,7 +3,7 @@ import { Suspense } from 'react';
 
 import { container } from './memberPage.css';
 
-import { ErrorBoundary, ErrorComponent, Loading, SectionHeader, TopBar } from '@/components/Common';
+import { ErrorBoundary, ErrorComponent, Loading, SectionHeader, Spacing, TopBar } from '@/components/Common';
 import { MemberRecipeBookmarkList, MembersInfo } from '@/components/Members';
 import { PATH } from '@/constants/path';
 
@@ -17,16 +17,16 @@ export const MemberPage = () => {
         <TopBar.Title title="마이페이지" />
         <TopBar.Spacer />
       </TopBar>
-      <div style={{ height: '29px' }} />
+      <Spacing size={30} />
 
       <section className={container}>
         <Suspense fallback={<Loading />}>
           <MembersInfo />
         </Suspense>
-        <div style={{ height: '32px' }} />
+        <Spacing size={32} />
 
         <SectionHeader name="저장한 꿀조합" link={`${PATH.MEMBER}/bookmark`} />
-        <div style={{ height: '14px' }} />
+        <Spacing size={14} />
         <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
           <Suspense fallback={<Loading />}>
             <MemberRecipeBookmarkList isPreview />
diff --git a/src/pages/MemberPostPage/MemberPostPage.tsx b/src/pages/MemberPostPage/MemberPostPage.tsx
index 906f2aea..c7ad7ef4 100644
--- a/src/pages/MemberPostPage/MemberPostPage.tsx
+++ b/src/pages/MemberPostPage/MemberPostPage.tsx
@@ -4,7 +4,7 @@ import { useLocation } from 'react-router-dom';
 
 import { container } from './memberPostPage.css';
 
-import { ErrorBoundary, ErrorComponent, Loading, TabMenu, TopBar } from '@/components/Common';
+import { ErrorBoundary, ErrorComponent, Loading, Spacing, TabMenu, TopBar } from '@/components/Common';
 import { MemberRecipeList, MemberReviewList } from '@/components/Members';
 import { POST_TYPE } from '@/constants';
 import { useTabMenu } from '@/hooks/common';
@@ -33,7 +33,7 @@ export const MemberPostPage = () => {
       <section ref={memberRecipeRef} className={container}>
         <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
           <Suspense fallback={<Loading />}>
-            <div style={{ height: '20px' }} />
+            <Spacing size={20} />
             {selectedTabMenu === TAB_MENUS[0].value ? <MemberRecipeList /> : <MemberReviewList />}
           </Suspense>
         </ErrorBoundary>
diff --git a/src/pages/MemberRecipeBookmarkPage.tsx b/src/pages/MemberRecipeBookmarkPage.tsx
index 9189c737..4a14ea5c 100644
--- a/src/pages/MemberRecipeBookmarkPage.tsx
+++ b/src/pages/MemberRecipeBookmarkPage.tsx
@@ -1,7 +1,7 @@
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
 import { Suspense, useRef } from 'react';
 
-import { ErrorBoundary, ErrorComponent, Loading, TopBar } from '@/components/Common';
+import { ErrorBoundary, ErrorComponent, Loading, Spacing, TopBar } from '@/components/Common';
 import { MemberRecipeBookmarkList } from '@/components/Members/';
 
 export const MemberRecipeBookmarkPage = () => {
@@ -17,7 +17,7 @@ export const MemberRecipeBookmarkPage = () => {
       <section ref={memberRecipeRef}>
         <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
           <Suspense fallback={<Loading />}>
-            <div style={{ height: '20px' }} />
+            <Spacing size={20} />
             <MemberRecipeBookmarkList />
           </Suspense>
         </ErrorBoundary>
diff --git a/src/pages/NotFoundPage/NotFoundPage.tsx b/src/pages/NotFoundPage/NotFoundPage.tsx
index eaffef1a..ddce9dbe 100644
--- a/src/pages/NotFoundPage/NotFoundPage.tsx
+++ b/src/pages/NotFoundPage/NotFoundPage.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { container, linkWrapper, main } from './notFoundPage.css';
 
 import NotFound from '@/assets/not-found.png';
-import { Text, TopBar } from '@/components/Common';
+import { Spacing, Text, TopBar } from '@/components/Common';
 import { PATH } from '@/constants/path';
 
 const NotFoundPage = () => {
@@ -16,16 +16,16 @@ const NotFoundPage = () => {
       <main className={main}>
         <section className={container}>
           <img src={NotFound} alt="404 캐릭터" width={83} height={77} />
-          <div style={{ height: 24 }} />
+          <Spacing size={24} />
           <Text size="headline" weight="semiBold" color="sub">
             페이지를 찾을 수 없습니다
           </Text>
-          <div style={{ height: 6 }} />
+          <Spacing size={6} />
           <Text size="caption4" weight="medium" color="disabled">
             죄송합니다. 찾으려는 페이지의 주소가 <br />
             존재하지 않거나, 사용할 수 없는 페이지입니다.
           </Text>
-          <div style={{ height: 60 }} />
+          <Spacing size={60} />
           <Link to={PATH.HOME} className={linkWrapper}>
             <Text size="caption1" weight="semiBold" color="info">
               홈으로 돌아가기
diff --git a/src/pages/OnboardingPage/OnboardingContent.tsx b/src/pages/OnboardingPage/OnboardingContent.tsx
index 9acce04b..9cab27a3 100644
--- a/src/pages/OnboardingPage/OnboardingContent.tsx
+++ b/src/pages/OnboardingPage/OnboardingContent.tsx
@@ -1,6 +1,6 @@
 import { contentWrapper, titleWrapper, descriptionText } from './onboardingPage.css';
 
-import { Text } from '@/components/Common';
+import { Spacing, Text } from '@/components/Common';
 
 interface OnboardingContentProps {
   title: string;
@@ -16,12 +16,12 @@ const OnboardingContent = ({ title, description, image }: OnboardingContentProps
           {title}
         </Text>
       </div>
-      <div style={{ height: 17 }} />
+      <Spacing size={17} />
 
       <Text size="display1" weight="semiBold" color="sub" className={descriptionText}>
         {description}
       </Text>
-      <div style={{ height: 28 }} />
+      <Spacing size={28} />
 
       <img width={244} height={'100%'} src={image} alt="온보딩 예시" />
     </div>
diff --git a/src/pages/OnboardingPage/OnboardingPage.tsx b/src/pages/OnboardingPage/OnboardingPage.tsx
index 57a01c7b..8de70cd2 100644
--- a/src/pages/OnboardingPage/OnboardingPage.tsx
+++ b/src/pages/OnboardingPage/OnboardingPage.tsx
@@ -6,7 +6,7 @@ import { container, link } from './onboardingPage.css';
 import OnboardingMember from '@/assets/onboarding-member.png';
 import OnboardingRecipe from '@/assets/onboarding-recipe.png';
 import OnboardingReview from '@/assets/onboarding-review.png';
-import { Stepper, Text } from '@/components/Common';
+import { Spacing, Stepper, Text } from '@/components/Common';
 import { PATH } from '@/constants/path';
 import { useTabMenu } from '@/hooks/common';
 import { setLocalStorage } from '@/utils/localStorage';
@@ -41,7 +41,7 @@ export const OnboardingPage = () => {
     <>
       <section className={container}>
         <Stepper selectedStepper={selectedStepper} handleStepperSelect={handleTabMenuClick} />
-        <div style={{ height: 50 }} />
+        <Spacing size={50} />
 
         <OnboardingContent title={content.title} description={content.description} image={content.image} />
       </section>
diff --git a/src/pages/ProductDetailPage/ProductDetailPage.tsx b/src/pages/ProductDetailPage/ProductDetailPage.tsx
index 6b982ec4..48ef102e 100644
--- a/src/pages/ProductDetailPage/ProductDetailPage.tsx
+++ b/src/pages/ProductDetailPage/ProductDetailPage.tsx
@@ -14,6 +14,7 @@ import {
   Loading,
   SelectOptionList,
   TopBar,
+  Spacing,
 } from '@/components/Common';
 import { ProductDetailItem, ProductRecipeList } from '@/components/Product';
 import { ReviewList } from '@/components/Review';
@@ -68,7 +69,7 @@ export const ProductDetailPage = () => {
 
         <section className={section}>
           <SectionHeader name="이 상품이 포함된 꿀조합!" />
-          <div style={{ height: '24px' }} />
+          <Spacing size={24} />
           <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
             <Suspense fallback={<Loading />}>
               <ProductRecipeList productId={Number(productId)} productName={productDetail.name} />
@@ -83,7 +84,7 @@ export const ProductDetailPage = () => {
           <div className={sortWrapper}>
             <SortButton option={currentSortOption} onClick={handleOpenSortOptionSheet} />
           </div>
-          <div style={{ height: '24px' }} />
+          <Spacing size={24} />
           <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
             <Suspense fallback={<Loading />}>
               <ReviewList productId={Number(productId)} selectedOption={currentSortOption} />
diff --git a/src/pages/ProductPage/ProductPage.tsx b/src/pages/ProductPage/ProductPage.tsx
index 42e44697..1f405977 100644
--- a/src/pages/ProductPage/ProductPage.tsx
+++ b/src/pages/ProductPage/ProductPage.tsx
@@ -1,4 +1,3 @@
-import { Spacing } from '@fun-eat/design-system';
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
 import { Suspense } from 'react';
 import { Link, useLocation } from 'react-router-dom';
@@ -13,6 +12,7 @@ import {
   CategoryStoreList,
   TabMenu,
   SectionHeader,
+  Spacing,
 } from '@/components/Common';
 import { ProductPreviewList } from '@/components/Product';
 import { CATEGORY_TYPE } from '@/constants';
diff --git a/src/pages/RecipeDetailPage/RecipeDetailPage.tsx b/src/pages/RecipeDetailPage/RecipeDetailPage.tsx
index 05e4d61d..6f531c89 100644
--- a/src/pages/RecipeDetailPage/RecipeDetailPage.tsx
+++ b/src/pages/RecipeDetailPage/RecipeDetailPage.tsx
@@ -1,4 +1,4 @@
-import { BottomSheet, Spacing, useBottomSheet } from '@fun-eat/design-system';
+import { BottomSheet, useBottomSheet } from '@fun-eat/design-system';
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
 import { Suspense, useRef } from 'react';
 import { useParams } from 'react-router-dom';
@@ -22,7 +22,7 @@ import {
   commentSection,
 } from './recipeDetailPage.css';
 
-import { ErrorBoundary, ErrorComponent, Loading, SvgIcon, Text, TopBar } from '@/components/Common';
+import { ErrorBoundary, ErrorComponent, Loading, Spacing, SvgIcon, Text, TopBar } from '@/components/Common';
 import { MemberImage } from '@/components/Members';
 import { ProductOverviewList } from '@/components/Product';
 import { CommentForm, CommentList, RecipeFavoriteButton } from '@/components/Recipe';
diff --git a/src/pages/RecipePage/RecipePage.tsx b/src/pages/RecipePage/RecipePage.tsx
index 632c6fd2..22031870 100644
--- a/src/pages/RecipePage/RecipePage.tsx
+++ b/src/pages/RecipePage/RecipePage.tsx
@@ -12,6 +12,7 @@ import {
   ScrollButton,
   SelectOptionList,
   SortButton,
+  Spacing,
   WriteButton,
 } from '@/components/Common';
 import { RecipeList } from '@/components/Recipe';
@@ -48,7 +49,7 @@ export const RecipePage = () => {
             <div className={sortButtonWrapper}>
               <SortButton option={currentSortOption} onClick={handleOpenSortOptionSheet} />
             </div>
-            <div style={{ height: '8px' }} />
+            <Spacing size={8} />
             <RecipeList selectedOption={currentSortOption} />
           </section>
         </Suspense>

From 3149680c8fa15f310c7b0a51a1061869d4aed4e0 Mon Sep 17 00:00:00 2001
From: TaeeunKim <xodms0309@naver.com>
Date: Sun, 28 Jul 2024 18:57:21 +0200
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20Divider=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Common/Divider/Divider.stories.tsx        | 23 +++++++++++++++
 src/components/Common/Divider/Divider.tsx     | 28 +++++++++++++++++++
 src/components/Common/Divider/divider.css.ts  | 23 +++++++++++++++
 src/components/Common/index.ts                |  1 +
 4 files changed, 75 insertions(+)
 create mode 100644 src/components/Common/Divider/Divider.stories.tsx
 create mode 100644 src/components/Common/Divider/Divider.tsx
 create mode 100644 src/components/Common/Divider/divider.css.ts

diff --git a/src/components/Common/Divider/Divider.stories.tsx b/src/components/Common/Divider/Divider.stories.tsx
new file mode 100644
index 00000000..4682880c
--- /dev/null
+++ b/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',
+  },
+};
diff --git a/src/components/Common/Divider/Divider.tsx b/src/components/Common/Divider/Divider.tsx
new file mode 100644
index 00000000..848e4cf1
--- /dev/null
+++ b/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;
diff --git a/src/components/Common/Divider/divider.css.ts b/src/components/Common/Divider/divider.css.ts
new file mode 100644
index 00000000..ab993905
--- /dev/null
+++ b/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 },
+    },
+  },
+});
diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts
index 5bd8b62e..43262abb 100644
--- a/src/components/Common/index.ts
+++ b/src/components/Common/index.ts
@@ -30,3 +30,4 @@ 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';

From e1ef362b7b5efc7d167179b6087d69645996b304 Mon Sep 17 00:00:00 2001
From: TaeeunKim <xodms0309@naver.com>
Date: Sun, 28 Jul 2024 19:04:51 +0200
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20Divider=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Product/ProductOverviewList/ProductOverviewList.tsx    | 4 ++--
 .../Rank/ReviewRankingList/ReviewRankingList.tsx           | 6 +++---
 .../Rank/ReviewRankingList/reviewRankingList.css.ts        | 1 +
 .../Recipe/RecipeUsedProducts/SearchedProductList.tsx      | 5 ++---
 src/components/Search/RecommendList/RecommendList.tsx      | 5 ++---
 src/pages/HomePage/HomePage.tsx                            | 3 ++-
 src/pages/ProductDetailPage/ProductDetailPage.tsx          | 5 +++--
 src/pages/ProductPage/ProductPage.tsx                      | 4 ++--
 src/pages/RecipeDetailPage/RecipeDetailPage.tsx            | 7 +++----
 src/pages/SearchPage/SearchPage.tsx                        | 5 ++---
 10 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/components/Product/ProductOverviewList/ProductOverviewList.tsx b/src/components/Product/ProductOverviewList/ProductOverviewList.tsx
index 9a6fae65..f5b4bc0c 100644
--- a/src/components/Product/ProductOverviewList/ProductOverviewList.tsx
+++ b/src/components/Product/ProductOverviewList/ProductOverviewList.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { container } from './productOverviewList.css';
 import ProductOverviewItem from '../ProductOverviewItem/ProductOverviewItem';
 
-import { Spacing } from '@/components/Common';
+import { Divider, Spacing } from '@/components/Common';
 import { UsedProductOverviewItem } from '@/components/Recipe';
 import { PATH } from '@/constants/path';
 import type { Product } from '@/types/product';
@@ -29,7 +29,7 @@ const ProductOverviewList = ({ products, hasBorder = false, hasRemoved = false }
           {hasBorder && (
             <>
               <Spacing size={20} />
-              <hr style={{ border: '0.5px solid #e6e6e6' }} />
+              <Divider variant="default" />
             </>
           )}
         </li>
diff --git a/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx b/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx
index a6a1e038..c4621741 100644
--- a/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx
+++ b/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx
@@ -5,11 +5,10 @@ import { Link } from 'react-router-dom';
 import { bottomSheetWrapper, container, productLink, reviewItemWrapper } from './reviewRankingList.css';
 import ReviewRankingItem from '../ReviewRankingItem/ReviewRankingItem';
 
-import { Text } from '@/components/Common';
+import { Divider, Spacing, Text } from '@/components/Common';
 import { ReviewItem } from '@/components/Review';
 import { PATH } from '@/constants/path';
 import { useReviewRankingQuery } from '@/hooks/queries/rank';
-import { vars } from '@/styles/theme.css';
 import type { ReviewDetail } from '@/types/review';
 
 const ReviewRankingList = () => {
@@ -47,7 +46,8 @@ const ReviewRankingList = () => {
         <BottomSheet isOpen={isOpen} isClosing={isClosing} close={handleCloseBottomSheet}>
           <div className={bottomSheetWrapper}>
             <ReviewItem productId={selectedReview.productId} review={selectedReview.review} />
-            <hr style={{ height: '1px', background: `${vars.colors.border.default}`, border: 0, margin: '12px 0' }} />
+            <Spacing size={12} />
+            <Divider variant="default" />
             <Link to={`${PATH.PRODUCT_LIST}/detail/${selectedReview?.productId}`} className={productLink}>
               <Text weight="semiBold" color="white">
                 상품 바로가기
diff --git a/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts b/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts
index b93e4a65..de322cf3 100644
--- a/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts
+++ b/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts
@@ -24,4 +24,5 @@ export const productLink = style({
   height: 56,
   background: vars.colors.primary,
   borderRadius: 6,
+  marginTop: 12,
 });
diff --git a/src/components/Recipe/RecipeUsedProducts/SearchedProductList.tsx b/src/components/Recipe/RecipeUsedProducts/SearchedProductList.tsx
index d6db76dc..999c7c5d 100644
--- a/src/components/Recipe/RecipeUsedProducts/SearchedProductList.tsx
+++ b/src/components/Recipe/RecipeUsedProducts/SearchedProductList.tsx
@@ -1,11 +1,10 @@
 import type { MouseEventHandler } from 'react';
 import { useRef } from 'react';
 
-import { MarkedText, Spacing, Text } from '@/components/Common';
+import { Divider, MarkedText, Spacing, Text } from '@/components/Common';
 import { container, backdrop, wrapper, productButton } from '@/components/Search/RecommendList/recommendList.css';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteProductSearchAutocompleteQuery } from '@/hooks/queries/search';
-import { vars } from '@/styles/theme.css';
 import type { RecipeProduct } from '@/types/recipe';
 
 interface SearchedProductListProps {
@@ -48,7 +47,7 @@ const SearchedProductList = ({ searchQuery, addUsedProducts, handleAutocompleteC
                 상품
               </Text>
             </button>
-            <hr style={{ border: `0.5px solid ${vars.colors.border.default}` }} />
+            <Divider variant="default" />
           </li>
         ))}
       </ul>
diff --git a/src/components/Search/RecommendList/RecommendList.tsx b/src/components/Search/RecommendList/RecommendList.tsx
index 9d8a4e3f..56c18216 100644
--- a/src/components/Search/RecommendList/RecommendList.tsx
+++ b/src/components/Search/RecommendList/RecommendList.tsx
@@ -3,10 +3,9 @@ import { useRef } from 'react';
 
 import { backdrop, container, productButton, wrapper } from './recommendList.css';
 
-import { MarkedText, Spacing, Text } from '@/components/Common';
+import { Divider, MarkedText, Spacing, Text } from '@/components/Common';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteProductSearchAutocompleteQuery } from '@/hooks/queries/search';
-import { vars } from '@/styles/theme.css';
 
 interface RecommendListProps {
   searchQuery: string;
@@ -38,7 +37,7 @@ const RecommendList = ({ searchQuery, handleSearchClick, handleAutocompleteClose
                 상품
               </Text>
             </button>
-            <hr style={{ border: `0.5px solid ${vars.colors.border.default}` }} />
+            <Divider variant="default" />
           </li>
         ))}
       </ul>
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
index 81f74d61..1becab8c 100644
--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@@ -14,6 +14,7 @@ import {
   Banner,
   SectionHeader,
   Spacing,
+  Divider,
 } from '@/components/Common';
 import { ProductRankingList, ReviewRankingList, RecipeRankingList } from '@/components/Rank';
 import { PATH } from '@/constants/path';
@@ -58,7 +59,7 @@ export const HomePage = () => {
         </ErrorBoundary>
       </section>
 
-      <div style={{ height: '12px', backgroundColor: '#f9f9f9' }} aria-hidden />
+      <Divider height="12px" variant="light" />
 
       <section className={sectionWrapper}>
         <SectionHeader name="상품 랭킹" />
diff --git a/src/pages/ProductDetailPage/ProductDetailPage.tsx b/src/pages/ProductDetailPage/ProductDetailPage.tsx
index 48ef102e..f012f8ae 100644
--- a/src/pages/ProductDetailPage/ProductDetailPage.tsx
+++ b/src/pages/ProductDetailPage/ProductDetailPage.tsx
@@ -15,6 +15,7 @@ import {
   SelectOptionList,
   TopBar,
   Spacing,
+  Divider,
 } from '@/components/Common';
 import { ProductDetailItem, ProductRecipeList } from '@/components/Product';
 import { ReviewList } from '@/components/Review';
@@ -65,7 +66,7 @@ export const ProductDetailPage = () => {
       <main className={main}>
         <ProductDetailItem productDetail={productDetail} />
 
-        <div style={{ height: '12px', backgroundColor: '#f9f9f9' }} aria-hidden />
+        <Divider height="12px" variant="light" />
 
         <section className={section}>
           <SectionHeader name="이 상품이 포함된 꿀조합!" />
@@ -77,7 +78,7 @@ export const ProductDetailPage = () => {
           </ErrorBoundary>
         </section>
 
-        <div style={{ height: '12px', backgroundColor: '#f9f9f9' }} aria-hidden />
+        <Divider height="12px" variant="light" />
 
         <section className={section}>
           <SectionHeader name="리뷰" />
diff --git a/src/pages/ProductPage/ProductPage.tsx b/src/pages/ProductPage/ProductPage.tsx
index 1f405977..205dd04a 100644
--- a/src/pages/ProductPage/ProductPage.tsx
+++ b/src/pages/ProductPage/ProductPage.tsx
@@ -13,6 +13,7 @@ import {
   TabMenu,
   SectionHeader,
   Spacing,
+  Divider,
 } from '@/components/Common';
 import { ProductPreviewList } from '@/components/Product';
 import { CATEGORY_TYPE } from '@/constants';
@@ -20,7 +21,6 @@ import { PRODUCT_BANNER, STORE_BANNER } from '@/constants/image';
 import { PATH } from '@/constants/path';
 import { useTabMenu } from '@/hooks/common';
 import { useCategoryQuery } from '@/hooks/queries/product';
-import { vars } from '@/styles/theme.css';
 import type { CategoryVariant, Tab } from '@/types/common';
 
 const TAB_MENUS: Tab<CategoryVariant>[] = [
@@ -60,7 +60,7 @@ export const ProductPage = () => {
           <img src={PRODUCT_BANNER} width={'100%'} height={72} alt="상품 배너" />
         </Link>
       ) : (
-        <div style={{ height: '12px', backgroundColor: vars.colors.border.light }} aria-hidden />
+        <Divider height="12px" variant="light" />
       )}
 
       <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
diff --git a/src/pages/RecipeDetailPage/RecipeDetailPage.tsx b/src/pages/RecipeDetailPage/RecipeDetailPage.tsx
index 6f531c89..e50e55c3 100644
--- a/src/pages/RecipeDetailPage/RecipeDetailPage.tsx
+++ b/src/pages/RecipeDetailPage/RecipeDetailPage.tsx
@@ -22,12 +22,11 @@ import {
   commentSection,
 } from './recipeDetailPage.css';
 
-import { ErrorBoundary, ErrorComponent, Loading, Spacing, SvgIcon, Text, TopBar } from '@/components/Common';
+import { Divider, ErrorBoundary, ErrorComponent, Loading, Spacing, SvgIcon, Text, TopBar } from '@/components/Common';
 import { MemberImage } from '@/components/Members';
 import { ProductOverviewList } from '@/components/Product';
 import { CommentForm, CommentList, RecipeFavoriteButton } from '@/components/Recipe';
 import { useRecipeDetailQuery } from '@/hooks/queries/recipe';
-import { vars } from '@/styles/theme.css';
 import { getFormattedDate } from '@/utils/date';
 import displaySlice from '@/utils/displaySlice';
 
@@ -106,7 +105,7 @@ export const RecipeDetailPage = () => {
           </div>
         </section>
 
-        <hr style={{ height: '1px', background: vars.colors.border.default, border: 0 }} />
+        <Divider variant="default" />
 
         <section className={contentSection}>
           <RecipeFavoriteButton recipeId={id} favorite={favorite} favoriteCount={favoriteCount} />
@@ -116,7 +115,7 @@ export const RecipeDetailPage = () => {
           </Text>
         </section>
 
-        <hr style={{ height: '12px', background: vars.colors.border.light, border: 0 }} />
+        <Divider height="12px" variant="light" />
 
         <section className={commentSection}>
           <CommentForm recipeId={Number(recipeId)} scrollTargetRef={scrollTargetRef} />
diff --git a/src/pages/SearchPage/SearchPage.tsx b/src/pages/SearchPage/SearchPage.tsx
index a99059cc..106ca1da 100644
--- a/src/pages/SearchPage/SearchPage.tsx
+++ b/src/pages/SearchPage/SearchPage.tsx
@@ -3,7 +3,7 @@ import { Suspense, useEffect, useState } from 'react';
 
 import { badgeContainer, searchWrapper, searchResultTitle, searchSection, subTitle, main } from './searchPage.css';
 
-import { Text, Badge, ErrorBoundary, ErrorComponent, Loading, TopBar } from '@/components/Common';
+import { Text, Badge, ErrorBoundary, ErrorComponent, Loading, TopBar, Divider } from '@/components/Common';
 import {
   ProductSearchResultPreviewList,
   RecipeSearchResultPreviewList,
@@ -13,7 +13,6 @@ import {
 import { RECOMMENDED_TAGS } from '@/constants';
 import { useDebounce } from '@/hooks/common';
 import { useSearch } from '@/hooks/search';
-import { vars } from '@/styles/theme.css';
 import { getLocalStorage } from '@/utils/localStorage';
 
 export const SearchPage = () => {
@@ -90,7 +89,7 @@ export const SearchPage = () => {
                   </Suspense>
                 </ErrorBoundary>
               </div>
-              <hr style={{ border: `6px solid ${vars.colors.border.light}` }} />
+              <Divider height="6px" variant="light" />
               <div className={searchWrapper}>
                 <Text size="caption3" color="info" weight="semiBold" className={searchResultTitle}>
                   꿀!조합 바로가기