From eb511a4f93fe1dd7c3966a5e45ddb38444508f5e Mon Sep 17 00:00:00 2001
From: gahyeon <gus_05@naver.com>
Date: Thu, 21 Nov 2024 18:26:28 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9E=A5=EB=B0=94=EA=B5=AC=EB=8B=88=20?=
 =?UTF-8?q?=EC=A3=BC=EB=AC=B8=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Cart/OrderBtn/OrderBtn.styled.ts          | 23 +++++++++++++++++++
 src/components/Cart/OrderBtn/OrderBtn.tsx     | 16 +++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 src/components/Cart/OrderBtn/OrderBtn.styled.ts
 create mode 100644 src/components/Cart/OrderBtn/OrderBtn.tsx

diff --git a/src/components/Cart/OrderBtn/OrderBtn.styled.ts b/src/components/Cart/OrderBtn/OrderBtn.styled.ts
new file mode 100644
index 0000000..b202ea9
--- /dev/null
+++ b/src/components/Cart/OrderBtn/OrderBtn.styled.ts
@@ -0,0 +1,23 @@
+import styled from "@emotion/styled";
+import theme from "@styles/theme";
+
+export const StyledBtn = styled.button`
+  background-color: ${theme.colors.purple50};
+  border-radius: 10px;
+  color: white;
+  ${theme.fonts.body2_b_14};
+  width: 25rem;
+  height: 5.6rem;
+  transition: 
+    background-color 0.3s ease, 
+    color 0.3s ease, 
+    width 0.3s ease, 
+    height 0.3s ease; 
+
+  &:active {
+    background-color: ${theme.colors.purple60};
+    color: ${theme.colors.purple40};
+    width: 23.6rem; 
+    height: 5.2rem;
+  }
+`;
diff --git a/src/components/Cart/OrderBtn/OrderBtn.tsx b/src/components/Cart/OrderBtn/OrderBtn.tsx
new file mode 100644
index 0000000..0801bb0
--- /dev/null
+++ b/src/components/Cart/OrderBtn/OrderBtn.tsx
@@ -0,0 +1,16 @@
+import * as S from "./OrderBtn.styled"
+
+interface OrderBtnProps {
+  totalItems: number;
+  totalPrice: number;
+}
+
+const OrderBtn = ({ totalItems, totalPrice } : OrderBtnProps) => {
+  return (
+    <S.StyledBtn>
+      {`${totalPrice.toLocaleString()}원 (${totalItems}) 주문하기`}
+    </S.StyledBtn>
+  ); 
+};
+
+export default OrderBtn;