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}
+
+
+
+ {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 (
+//
+// {/*
어떻게 결제할까요?
+//
+// 결제방식을 선택해주세요
+//
+//
+//
+//
먹고갈게요
+//
+//
+//
+//
가져갈게요
+//
*/}
+//
+// );
+// };
+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}`,
}}
/>