From 86a87062f1c6d2c23996180d0afdd8a89a40fb51 Mon Sep 17 00:00:00 2001
From: jerry <becomegoodguy@gmail.com>
Date: Mon, 8 Jul 2024 23:57:39 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Spacing=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=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

---
 src/components/commons/spacing/Spacing.tsx | 15 +++++++++++++++
 src/pages/test/TestPage.tsx                |  2 ++
 2 files changed, 17 insertions(+)
 create mode 100644 src/components/commons/spacing/Spacing.tsx

diff --git a/src/components/commons/spacing/Spacing.tsx b/src/components/commons/spacing/Spacing.tsx
new file mode 100644
index 00000000..ba5088ec
--- /dev/null
+++ b/src/components/commons/spacing/Spacing.tsx
@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+interface SpacingPropTypes {
+  marginBottom: string;
+}
+
+const Spacing = ({ marginBottom }: SpacingPropTypes) => {
+  return <SpacingBox $marginBottom={marginBottom} />;
+};
+
+export default Spacing;
+
+const SpacingBox = styled.div<{ $marginBottom: string }>`
+  margin-bottom: ${(props) => props.$marginBottom || "0"}rem;
+`;
diff --git a/src/pages/test/TestPage.tsx b/src/pages/test/TestPage.tsx
index 560d33bd..7aa586a1 100644
--- a/src/pages/test/TestPage.tsx
+++ b/src/pages/test/TestPage.tsx
@@ -2,6 +2,7 @@ import { IconTextfiedlDelete } from "@assets/svgs";
 import Chip from "@components/commons/chip/Chip";
 import TextArea from "@components/commons/input/textArea/TextArea";
 import TextField from "@components/commons/input/textField/TextField";
+import Spacing from "@components/commons/spacing/Spacing";
 import Stepper from "@components/commons/stepper/Stepper";
 import { useState } from "react";
 
@@ -47,6 +48,7 @@ const TestPage = () => {
         />
         <Chip label="테스트" />
       </div>
+      <Spacing marginBottom="3" />
       <Stepper max={3} round={round} onMinusClick={onMinusClick} onPlusClick={onPlusClick} />
     </div>
   );