feat: Button 컴포넌트 구현

src/components/common/Button.tsx

@@ -0,0 +1,21 @@
+import { ButtonHTMLAttributes, MouseEventHandler } from 'react';
+import styled, { CSSProp } from 'styled-components';
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  css: CSSProp;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+const Button = ({ children, ...props }: Props) => {
+  return <S.Button {...props}>{children}</S.Button>;
+};
+
+const S = {
+  Button: styled.button<{ css: CSSProp }>`
+    cursor: pointer;
+
+    ${(props) => props.css}
+  `,
+};
+
+export default Button;

src/pages/CartPage.tsx

@@ -1,11 +1,22 @@
+import { css } from 'styled-components';
+import Button from '../components/common/Button';
 import Header from '../components/common/Header';
 
 const CartPage = () => {
   return (
     <div>
       <Header title="STORE" />
+      <main>
+        <Button css={orderButtonStyle}>주문하기</Button>
+      </main>
     </div>
   );
 };
 
+const orderButtonStyle = css`
+  padding: 26px 120px;
+  color: #fff;
+  background: var(--text-color);
+`;
+
 export default CartPage;