[Feat/#53] Stepper 공통 컴포넌트 추가

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;

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;

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";

src/components/commons/stepper/Stepper.stories.tsx

@@ -0,0 +1,25 @@
+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(args.round);
+
+  return <Stepper {...args} round={round} setRound={setRound} />;
+};
+
+export const Default: Story = Template.bind({});
+Default.args = {};

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}
+`;

src/components/commons/stepper/Stepper.tsx

@@ -0,0 +1,34 @@
+import * as S from "./Stepper.styled";
+import { IconMinus, IconPlus } from "@assets/svgs";
+
+export interface StepperProps {
+  max: number;
+  round: number;
+  setRound: (round: number) => void;
+}
+
+const Stepper = ({ round, max, setRound }: StepperProps) => {
+  return (
+    <S.StepperWrapper>
+      <S.StepperBtn
+        disabled={round === 1}
+        onClick={() => {
+          setRound(round - 1);
+        }}
+      >
+        <IconMinus />
+      </S.StepperBtn>
+      <S.StepperNum>{round}</S.StepperNum>
+      <S.StepperBtn
+        disabled={max === round}
+        onClick={() => {
+          setRound(round + 1);
+        }}
+      >
+        <IconPlus />
+      </S.StepperBtn>
+    </S.StepperWrapper>
+  );
+};
+
+export default Stepper;

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);
@@ -39,6 +41,7 @@ const TestPage = () => {
         />
         <Chip label="테스트" />
       </div>
+      <Stepper max={3} round={round} setRound={setRound} />
     </div>
   );
 };