Feat: payment 화면 구현중

src/App.css

@@ -14,7 +14,7 @@
     max-width: 390px;
     height: 94vh;
     background-color: white;
-    padding-top: 2.75rem;
+    padding-top: 3.5rem;
   }
   .bottom_navbar {
     left: calc(50% - 207px); /* Center the navbar */
@@ -36,7 +36,7 @@
     max-width: 430px;
     height: 94vh;
     background-color: white;
-    padding-top: 2.75rem;
+    padding-top: 3.5rem;
   }
   .bottom_navbar {
     left: calc(50% - 207px); /* Center the navbar */
@@ -51,15 +51,14 @@
     left: calc(50% - 207px); /* Center the navbar */
     right: calc(50% - 207px); /* Center the navbar */
   }
-
 }
 
 @media (min-width: 800px) {
   .App {
     width: 600px;
     height: 94vh;
     background-color: white;
-    padding-top: 2.75rem;
+    padding-top: 3.5rem;
   }
   .bottom_navbar {
     left: calc(50% - 300px); /* Center the navbar */
@@ -82,8 +81,8 @@
   font-display: swap;
   src: local("Pretendard"),
     url("./assets/font/Pretendard-Bold.woff2") format("woff2");
-unicode-range: U+AC00-D7A3, U+0061-007A, U+AC00-D7A3, U+0030-0039;
-  }
+  unicode-range: U+AC00-D7A3, U+0061-007A, U+AC00-D7A3, U+0030-0039;
+}
 
 @font-face {
   font-family: "ExtraBold";

src/App.js

@@ -15,6 +15,7 @@ import OrderStatus from "./pages/OrderStatus/OrderStatus";
 import OrderStorage from "./pages/OrderStorage/OrderStorage";
 import PackagingStatusPage from "./pages/PackagingStatusPage/PackagingStatusPage";
 import CartPage from "./pages/CartPage/CartPage";
+import PaymentPage from "./pages/PaymentPage/PaymentPage";
 
 function App() {
   return (
@@ -57,6 +58,7 @@ function App() {
         {/* 장바구니 페이지 */}
         <Route path="/cart" element={<CartPage />} />
         {/* 결제 페이지 */}
+        <Route path="/payment" element={<PaymentPage />} />
       </Routes>
     </div>
   );

src/components/views/Header/Header.css

@@ -4,7 +4,7 @@
   top: 0;
   left: 0;
   right: 0;
-  height: 2.6875rem;
+  height: 3.5rem;
   background-color: #ffffff;
   display: flex;
   align-items: center;
@@ -15,7 +15,7 @@
   top: 0;
   left: 0;
   right: 0;
-  height: 2.6875rem;
+  height: 3.5rem;
   background-color: #ffffff;
   display: flex;
   align-items: center;
@@ -25,7 +25,7 @@
   margin-left: 1.5rem;
 }
 
-.header-main__warpper{
+.header-main__warpper {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -34,12 +34,12 @@
   margin: 0 auto;
 }
 
-.header-main__warpper span{
+.header-main__warpper span {
   color: #000;
   font-size: 1.25rem;
   font-family: "Bold";
 }
 
-.header-main__warpper div{
+.header-main__warpper div {
   width: 1.5rem;
-}
+}

src/pages/CartPage/CartPage.jsx

@@ -1,6 +1,13 @@
 import Header from "../../components/views/Header/Header";
+import "./style.css";
+import { Link, useLocation } from "react-router-dom";
 
 const CartPage = () => {
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+  const storeId = params.get("storeId");
+  const inout = params.get("inout");
+
   // const { cartItems, setCartItems } = useContext(CartContext);
 
   // const handleRemoveFromCart = (id) => {
@@ -14,7 +21,7 @@ const CartPage = () => {
         headerProps={{
           pageName: "장바구니",
           isClose: false,
-          linkTo: "/store",
+          linkTo: `/store?storeId=${storeId}&inout=${inout}`,
         }}
       />
       {/* <h1>Cart</h1>
@@ -33,6 +40,12 @@ const CartPage = () => {
           </div>
         ))}
       </div> */}
+      <Link
+        to={`/payment?storeId=${storeId}&inout=${inout}`}
+        style={{ display: "flex", textDecoration: "none" }}
+      >
+        <div className="order-btn">주문하기</div>
+      </Link>
     </div>
   );
 };

src/pages/CartPage/style.css

@@ -0,0 +1,23 @@
+.cart-page {
+  display: flex;
+  width: 100%;
+}
+
+.order-btn {
+  display: flex;
+  width: 23.4375rem;
+  height: 3.6875rem;
+  flex-shrink: 0;
+  border-radius: 0.625rem;
+  background: #d82356;
+  margin-left: auto;
+  margin-right: auto;
+  color: #fff;
+  text-align: center;
+  font-family: "Bold";
+  font-size: 1.125rem;
+  line-height: 130%; /* 1.4625rem */
+  letter-spacing: -0.01125rem;
+  justify-content: center;
+  align-items: center;
+}