diff --git a/src/App.css b/src/App.css index 6ef6d8a..a9eb3f0 100644 --- a/src/App.css +++ b/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,7 +51,6 @@ left: calc(50% - 207px); /* Center the navbar */ right: calc(50% - 207px); /* Center the navbar */ } - } @media (min-width: 800px) { @@ -59,7 +58,7 @@ 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"; diff --git a/src/App.js b/src/App.js index 8f0775c..bd0e316 100644 --- a/src/App.js +++ b/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() { {/* 장바구니 페이지 */} } /> {/* 결제 페이지 */} + } /> ); diff --git a/src/assets/images/menu_delete.svg b/src/assets/images/menu_delete.svg new file mode 100644 index 0000000..79bb10f --- /dev/null +++ b/src/assets/images/menu_delete.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/views/Header/Header.css b/src/components/views/Header/Header.css index 2f17733..5eab458 100644 --- a/src/components/views/Header/Header.css +++ b/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; -} \ No newline at end of file +} diff --git a/src/pages/CartPage/CartPage.jsx b/src/pages/CartPage/CartPage.jsx index b107857..fb2a596 100644 --- a/src/pages/CartPage/CartPage.jsx +++ b/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}`, }} /> {/*

Cart

@@ -33,6 +40,12 @@ const CartPage = () => { ))} */} + +
주문하기
+ ); }; diff --git a/src/pages/CartPage/style.css b/src/pages/CartPage/style.css index e69de29..b4778a3 100644 --- a/src/pages/CartPage/style.css +++ b/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; +} diff --git a/src/pages/OrderDetail/OrderDetail.jsx b/src/pages/OrderDetail/OrderDetail.jsx index 720259c..abf11d6 100644 --- a/src/pages/OrderDetail/OrderDetail.jsx +++ b/src/pages/OrderDetail/OrderDetail.jsx @@ -3,124 +3,156 @@ import Header from "../../components/views/Header/Header"; import "./OrderDetail.css"; const OrderDetail = () => { - const isCompelete = false; + const isCompelete = false; - return( -
-
-
-
-
-
- {isCompelete ? ( - 주문 취소 (가게사정) - ) : ( - 주문 완료 - )} - 이디야커피 가톨릭대점 -
- 주문일시: 2021년 12월 12일 18:06 (픽업) - 주문번호: B14102GXG9 - 가게전화: 031-123-1234 -
-
-
-
-
-
-
americano
-
- 아메리카노 - ICE / LARGE / 1 - 샷추가 -
-
-
- 3,500원 -
-
+ return ( +
+
+
+
+
+
+ {isCompelete ? ( + + 주문 취소 (가게사정) + + ) : ( + 주문 완료 + )} + 이디야커피 가톨릭대점 +
+ 주문일시: 2021년 12월 12일 18:06 (픽업) + 주문번호: B14102GXG9 + 가게전화: 031-123-1234 +
+
+
+
+
+
+
+ americano +
+
+ 아메리카노 + + ICE / LARGE / 1 + + 샷추가 +
+
+
+ 3,500원 +
+
-
-
-
americano
-
- 아메리카노 - ICE / LARGE / 1 -
-
-
- 3,500원 -
-
+
+
+
+ americano +
+
+ 아메리카노 + + ICE / LARGE / 1 + +
+
+
+ 3,500원 +
+
-
-
-
americano
-
- 아메리카노 - ICE / LARGE / 1 -
-
-
- 3,500원 -
-
+
+
+
+ americano +
+
+ 아메리카노 + + ICE / LARGE / 1 + +
+
+
+ 3,500원 +
+
-
-
-
americano
-
- 아메리카노 - ICE / LARGE / 1 -
-
-
- 3,500원 -
-
+
+
+
+ americano +
+
+ 아메리카노 + + ICE / LARGE / 1 + +
+
+
+ 3,500원 +
+
-
-
-
americano
-
- 아메리카노 - ICE / LARGE / 1 -
-
-
- 3,500원 -
-
-
-
-
americano
-
- 아메리카노 - ICE / LARGE / 1 -
-
-
- 3,500원 -
-
-
-
-
-
- 총 결제금액 - 22,500원 -
-
- 결제방법 - 주문취소 -
-
-
+
+
+
+ americano +
+
+ 아메리카노 + + ICE / LARGE / 1 + +
+
+ 3,500원
+
+
+
+
+ americano +
+
+ 아메리카노 + + ICE / LARGE / 1 + +
+
+
+ 3,500원 +
+
+
+
+
+
+ 총 결제금액 + 22,500원 +
+
+ 결제방법 + 주문취소 +
+
+
- ) -} +
+
+ ); +}; -export default OrderDetail; \ No newline at end of file +export default OrderDetail; diff --git a/src/pages/OrderProcessPage/OrderProcessPage.jsx b/src/pages/OrderProcessPage/OrderProcessPage.jsx index 4a325a3..a417e4c 100644 --- a/src/pages/OrderProcessPage/OrderProcessPage.jsx +++ b/src/pages/OrderProcessPage/OrderProcessPage.jsx @@ -98,11 +98,15 @@ const OrderProcessPage = () => { return (
- no_image_menu +
diff --git a/src/pages/PaymentPage/PaymentPage.jsx b/src/pages/PaymentPage/PaymentPage.jsx new file mode 100644 index 0000000..a3face0 --- /dev/null +++ b/src/pages/PaymentPage/PaymentPage.jsx @@ -0,0 +1,190 @@ +import Header from "../../components/views/Header/Header"; +import "./style.css"; +import React, { useEffect, useRef } from "react"; +import { useLocation } from "react-router-dom"; +import noImageMenu from "../../assets/images/no_image_menu.svg"; +import menuDelete from "../../assets/images/menu_delete.svg"; + +const PaymentPage = () => { + const location = useLocation(); + const params = new URLSearchParams(location.search); + const storeId = params.get("storeId"); + const inout = params.get("inout"); + + const paymentData = { + name: "카페 오르다", + imgUrl: "/주소", + carts: [ + { + idx: 141, // 장바구니 idx + name: "아메리카노", + imgUrl: "/주주소소", + price: 2500, + count: 4, + options: [ + { + idx: 1, // 옵션 테이블 인덱스 + name: "ICE", + }, + { + idx: 114, // 옵션 테이블 인덱스 + name: "샷추가", + }, + ], + }, + { + idx: 143, // 장바구니 idx + name: "카페라떼", + imgUrl: null, + price: 4500, + count: 3, + options: [ + { + idx: 1, // 옵션 테이블 인덱스 + name: "ICE", + }, + { + idx: 114, // 옵션 테이블 인덱스 + name: "샷추가", + }, + ], + }, + ], + couponId: 12, + }; + + const buttonRef = useRef(); + + useEffect(() => { + const loadTossPayments = async () => { + try { + // 토스페이먼츠 라이브러리 비동기로 로드 + const TossPayments = await import( + "https://js.tosspayments.com/v1/payment" + ); + + // 클라이언트 키로 객체 초기화 + const clientKey = "test_ck_pP2YxJ4K87By0b4RZeo0rRGZwXLO"; + const tossPayments = TossPayments.default(clientKey); + + // 버튼에 클릭 이벤트 추가 + buttonRef.current.addEventListener("click", () => { + // 결제창 띄우기 + tossPayments.requestPayment("card", { + amount: 20, + orderId: "2ab88b105d-8bd1-436a-ab52-731396a352bda", + orderName: "포인트 충전", + customerName: "첫번째", + customerEmail: "test1@gmail.com", + successUrl: "http://localhost:8080/api/v1/payments/toss/success", + failUrl: "http://localhost:8080/api/v1/payments/toss/fail", + }); + }); + } catch (error) { + console.error("Failed to load TossPayments:", error); + } + }; + + loadTossPayments(); + }, []); + + return ( +
+
+ +
+ + + {paymentData.name} + +
+ +
+ {paymentData.carts.map((item) => ( +
+
+ + +
+
+ {item.name} +
+ X +
+ {item.options.map((option) => ( +
•{option.name}
+ ))} +
+
+ {item.price} +
+
+
+
+
+ ))} +
+ + {/* 버튼에 ref 추가 */} +
+ 결제하기 +
+
+ ); +}; +// const PaymentPage = () => { +// const [paymentMethod, setPaymentMethod] = useState("PayPal"); + +// const dispatch = useDispatch(); + +// const cart = useSelector((state) => state.cart); +// const { shippingAddress } = cart; + +// if (!shippingAddress.address) { +// history.push("/shipping"); +// } + +// const submitHandler = (e) => { +// e.preventDefault(); +// dispatch(savePaymentMethod(paymentMethod)); +// history.push("/placeorder"); +// }; + +// return ( +//
+// {/*
어떻게 결제할까요?
+//
+// 결제방식을 선택해주세요 +//
+//
+// takeOut +// 먹고갈게요 +//
+//
+// takeOut +// 가져갈게요 +//
*/} +//
+// ); +// }; +export default PaymentPage; diff --git a/src/pages/PaymentPage/style.css b/src/pages/PaymentPage/style.css new file mode 100644 index 0000000..c1643d6 --- /dev/null +++ b/src/pages/PaymentPage/style.css @@ -0,0 +1,104 @@ +.payment-page { + display: flex; + width: 100%; + flex-direction: column; +} + +.payment-page__cafe-info { + display: flex; + margin-left: 1.56rem; + margin-top: 1.38rem; + margin-bottom: 0.44rem; +} + +.payment-page__cafe-info__img { + display: flex; + width: 1.875rem; + height: 1.875rem; + flex-shrink: 0; + border-radius: 0.625rem; +} + +.payment-page__cafe-info__name { + color: #000; + font-family: "Bold"; + font-size: 1.25rem; + line-height: 130%; /* 1.625rem */ + letter-spacing: -0.0125rem; + margin-left: 0.75rem; +} + +.payment-page__order-info { + display: flex; + flex-shrink: 0; + background: #fff; + flex-direction: column; +} + +.payment-page__order-info__item { + display: flex; + height: fit-content; + flex-shrink: 0; + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.7rem; + padding-bottom: 0.7rem; +} + +.payment-page__order-info__item__img { + display: flex; + width: 4.8125rem; + height: 4.8125rem; + flex-shrink: 0; + border-radius: 0.625rem; + background: #f4f4f4; + margin-right: 0.69rem; +} + +.payment-page__order-info__item__name { + display: flex; + color: #000; + font-family: "Medium"; + font-size: 0.9375rem; + line-height: 130%; /* 1.21875rem */ + letter-spacing: -0.00938rem; +} +.payment-page__order-info__item__option { + display: flex; + flex-direction: column; + color: #838383; + font-family: "Light"; + font-size: 0.625rem; + line-height: 130%; /* 0.8125rem */ + letter-spacing: -0.00625rem; + margin-bottom: 0.31rem; +} + +.payment-page__order-info__item__line { + width: 21.5625rem; + height: 0rem; + flex-shrink: 0; + stroke-width: 1px; + stroke: #dadada; + margin-left: auto; + margin-right: auto; +} + +.payment-page__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; +} diff --git a/src/pages/StoreDetailPage/StoreDetailPage.jsx b/src/pages/StoreDetailPage/StoreDetailPage.jsx index 553f991..49e3b71 100644 --- a/src/pages/StoreDetailPage/StoreDetailPage.jsx +++ b/src/pages/StoreDetailPage/StoreDetailPage.jsx @@ -386,7 +386,7 @@ const StoreDetailPage = () => { headerProps={{ pageName: "", isClose: false, - linkTo: "/packagingStatus", + linkTo: `/packagingStatus?storeId=${storeId}`, }} />