diff --git a/public/svgs/icon_minus.svg b/public/svgs/icon_minus.svg
new file mode 100644
index 00000000..e75390c2
--- /dev/null
+++ b/public/svgs/icon_minus.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 12H7" stroke="white" stroke-width="1.2" stroke-miterlimit="10"/>
+</svg>
diff --git a/public/svgs/icon_plus.svg b/public/svgs/icon_plus.svg
new file mode 100644
index 00000000..46a4ca9f
--- /dev/null
+++ b/public/svgs/icon_plus.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 7V17" stroke="white" stroke-width="1.2" stroke-miterlimit="10"/>
+<path d="M17 12H7" stroke="white" stroke-width="1.2" stroke-miterlimit="10"/>
+</svg>
diff --git a/src/assets/svgs/IconMinus.tsx b/src/assets/svgs/IconMinus.tsx
new file mode 100644
index 00000000..30a9a62e
--- /dev/null
+++ b/src/assets/svgs/IconMinus.tsx
@@ -0,0 +1,7 @@
+import type { SVGProps } from "react";
+const SvgIconMinus = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
+    <path stroke="currentColor" strokeMiterlimit={10} strokeWidth={1.2} d="M17 12H7" />
+  </svg>
+);
+export default SvgIconMinus;
diff --git a/src/assets/svgs/IconPlus.tsx b/src/assets/svgs/IconPlus.tsx
new file mode 100644
index 00000000..8297b858
--- /dev/null
+++ b/src/assets/svgs/IconPlus.tsx
@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIconPlus = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
+    <path stroke="currentColor" strokeMiterlimit={10} strokeWidth={1.2} d="M12 7v10M17 12H7" />
+  </svg>
+);
+export default SvgIconPlus;
diff --git a/src/assets/svgs/index.ts b/src/assets/svgs/index.ts
index fa5863be..76170fe0 100644
--- a/src/assets/svgs/index.ts
+++ b/src/assets/svgs/index.ts
@@ -1 +1,3 @@
+export { default as IconMinus } from "./IconMinus";
+export { default as IconPlus } from "./IconPlus";
 export { default as IconTextfiedlDelete } from "./IconTextfiedlDelete";
diff --git a/src/components/commons/stepper/Stepper.stories.tsx b/src/components/commons/stepper/Stepper.stories.tsx
new file mode 100644
index 00000000..c9fda9cd
--- /dev/null
+++ b/src/components/commons/stepper/Stepper.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import Stepper, { StepperProps } from "./Stepper";
+import { useState } from "react";
+
+const meta = {
+  title: "Stepper",
+  component: Stepper,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {},
+  args: { max: 3, round: 1 },
+} satisfies Meta<typeof Stepper>;
+
+export default meta;
+type Story = StoryObj<StepperProps>;
+
+const Template: StoryFn<StepperProps> = (args) => {
+  const [round, setRound] = useState(1);
+
+  const onMinusClick = () => {
+    setRound((prev) => prev - 1);
+  };
+  const onPlusClick = () => {
+    setRound((prev) => prev + 1);
+  };
+
+  return <Stepper {...args} round={round} onMinusClick={onMinusClick} onPlusClick={onPlusClick} />;
+};
+
+export const Default: Story = Template.bind({});
+Default.args = {};
diff --git a/src/components/commons/stepper/Stepper.styled.ts b/src/components/commons/stepper/Stepper.styled.ts
new file mode 100644
index 00000000..ef77cd8d
--- /dev/null
+++ b/src/components/commons/stepper/Stepper.styled.ts
@@ -0,0 +1,41 @@
+import { Generators } from "@styles/generator";
+import styled from "styled-components";
+
+export const StepperWrapper = styled.div`
+  ${Generators.flexGenerator()};
+  gap: 0.6rem;
+  width: 11.5rem;
+  height: 4rem;
+  padding: 0.8rem 1rem;
+
+  background: ${({ theme }) => theme.colors.gray_900};
+  border: 1px solid ${({ theme }) => theme.colors.gray_700};
+  border-radius: 6px;
+`;
+
+export const StepperBtn = styled.button`
+  ${Generators.flexGenerator()};
+  width: 2.4rem;
+  height: 2.4rem;
+
+  color: ${({ theme }) => theme.colors.white};
+
+  cursor: pointer;
+
+  &:disabled {
+    color: ${({ theme }) => theme.colors.gray_500};
+
+    cursor: not-allowed;
+  }
+`;
+
+export const StepperNum = styled.p`
+  ${Generators.flexGenerator()};
+
+  width: 3.5rem;
+  height: 1.3rem;
+
+  color: ${({ theme }) => theme.colors.white};
+
+  ${({ theme }) => theme.fonts.heading4}
+`;
diff --git a/src/components/commons/stepper/Stepper.tsx b/src/components/commons/stepper/Stepper.tsx
new file mode 100644
index 00000000..ce88c044
--- /dev/null
+++ b/src/components/commons/stepper/Stepper.tsx
@@ -0,0 +1,39 @@
+import { useState } from "react";
+import * as S from "./Stepper.styled";
+import { IconMinus, IconPlus } from "@assets/svgs";
+
+export interface StepperProps {
+  max: number;
+  round: number;
+  onMinusClick: () => void;
+  onPlusClick: () => void;
+}
+
+const Stepper = ({ round, max, onMinusClick, onPlusClick }: StepperProps) => {
+  const [num, setNum] = useState(round);
+  return (
+    <S.StepperWrapper>
+      <S.StepperBtn
+        disabled={round === 1}
+        onClick={() => {
+          setNum((prev) => prev - 1);
+          onMinusClick();
+        }}
+      >
+        <IconMinus />
+      </S.StepperBtn>
+      <S.StepperNum>{round}</S.StepperNum>
+      <S.StepperBtn
+        disabled={max === round}
+        onClick={() => {
+          setNum((prev) => prev + 1);
+          onPlusClick();
+        }}
+      >
+        <IconPlus />
+      </S.StepperBtn>
+    </S.StepperWrapper>
+  );
+};
+
+export default Stepper;
diff --git a/src/pages/test/TestPage.tsx b/src/pages/test/TestPage.tsx
index f3916a8e..560d33bd 100644
--- a/src/pages/test/TestPage.tsx
+++ b/src/pages/test/TestPage.tsx
@@ -2,11 +2,13 @@ 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 Stepper from "@components/commons/stepper/Stepper";
 import { useState } from "react";
 
 const TestPage = () => {
   const [inputValue, setInputValue] = useState("");
   const [inputAreaValue, setInputAreaValue] = useState("");
+  const [round, setRound] = useState(1);
 
   const handleChangeInput = (value: string) => {
     setInputValue(value);
@@ -14,6 +16,12 @@ const TestPage = () => {
   const handleChangeInputArea = (value: string) => {
     setInputAreaValue(value);
   };
+  const onMinusClick = () => {
+    setRound((prev) => prev - 1);
+  };
+  const onPlusClick = () => {
+    setRound((prev) => prev + 1);
+  };
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: "3rem", alignItems: "center" }}>
       <div style={{ display: "flex", flexDirection: "column" }}>
@@ -39,6 +47,7 @@ const TestPage = () => {
         />
         <Chip label="테스트" />
       </div>
+      <Stepper max={3} round={round} onMinusClick={onMinusClick} onPlusClick={onPlusClick} />
     </div>
   );
 };