From 29875e558734d1bbe194aa58a39ad843621368a4 Mon Sep 17 00:00:00 2001 From: KKangHHee <137751841+KKangHHee@users.noreply.github.com> Date: Mon, 26 Feb 2024 14:53:05 +0900 Subject: [PATCH 1/6] =?UTF-8?q?Docs:=20=EC=9E=A5=EB=B0=94=EA=B5=AC?= =?UTF-8?q?=EB=8B=88=20=EC=88=AB=EC=9E=90=20=ED=81=AC=EA=B8=B0=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/CartItemCount/CartItemCount.css | 14 +++++++------- .../views/CartItemCount/CartItemCount.jsx | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/views/CartItemCount/CartItemCount.css b/src/components/views/CartItemCount/CartItemCount.css index 46d3756..200c459 100644 --- a/src/components/views/CartItemCount/CartItemCount.css +++ b/src/components/views/CartItemCount/CartItemCount.css @@ -1,11 +1,10 @@ .cart-item-count { position: absolute; - top: 0.825rem; - /* transform: translateX(50%); */ - left: 0.725rem; + bottom: -0.06rem; + right: -0.14rem; - width: 0.77606rem; - height: 0.77606rem; +width: 0.77606rem; +height: 0.77606rem; background-color: #d82356; border-radius: 50%; @@ -15,9 +14,10 @@ color: #fff; text-align: center; font-family: "Pretendard Variable"; - font-size: 0.375rem; + font-size: 0.5rem; font-style: normal; font-weight: 800; - line-height: 1rem; /* 266.667% */ + text-align: center; + /* line-height: 248.345% */ } diff --git a/src/components/views/CartItemCount/CartItemCount.jsx b/src/components/views/CartItemCount/CartItemCount.jsx index a1af87d..ef06b13 100644 --- a/src/components/views/CartItemCount/CartItemCount.jsx +++ b/src/components/views/CartItemCount/CartItemCount.jsx @@ -22,7 +22,7 @@ const CartItemCount = () => { }, []); return ( - <>{count === 0 ? null :
{ count}
} + <>{count === 0 ? null :
{count}
} ); }; From 373d6d1f890cf538db89fe178b85e73049bc665a Mon Sep 17 00:00:00 2001 From: KKangHHee <137751841+KKangHHee@users.noreply.github.com> Date: Mon, 26 Feb 2024 14:53:33 +0900 Subject: [PATCH 2/6] =?UTF-8?q?Feat:=20=ED=8F=AC=EC=9D=B8=ED=8A=B8=20?= =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/HomePage/Homepage.jsx | 3 +- src/pages/MembershipPage/MembershipPage.jsx | 34 +++++---------------- 2 files changed, 10 insertions(+), 27 deletions(-) diff --git a/src/pages/HomePage/Homepage.jsx b/src/pages/HomePage/Homepage.jsx index 2c7a465..bba8c34 100644 --- a/src/pages/HomePage/Homepage.jsx +++ b/src/pages/HomePage/Homepage.jsx @@ -13,13 +13,14 @@ import "slick-carousel/slick/slick-theme.css"; import "slick-carousel/slick/slick.css"; import Banner from "../../components/views/Home/Banner/Banner"; import StoreList from "../../components/views/StoreList/StoreList"; +import useGetPoint from "../../hooks/useGetPoint"; const HomePage = () => { const isAuth = useRecoilValue(isAuthenticatedState); const { name: userName } = useFetchUserInfo(); const navigate = useNavigate(); const quickOrder = useFetchQuickOrder(isAuth); - const point = 231552; + const point = useGetPoint(); // const postCoupon = usePostCoupon(); // const [couponIssued, setCouponIssued] = useState(false); // const handleCouponClick = (couponCode, couponId) => { diff --git a/src/pages/MembershipPage/MembershipPage.jsx b/src/pages/MembershipPage/MembershipPage.jsx index 2b7d72b..344261d 100644 --- a/src/pages/MembershipPage/MembershipPage.jsx +++ b/src/pages/MembershipPage/MembershipPage.jsx @@ -1,36 +1,20 @@ import React from "react"; // import { useRecoilState } from "recoil"; // import { isAuthenticatedState } from "../../Atom/status"; +import { useNavigate } from "react-router-dom"; import Header from "../../components/views/Header/Header"; import NavBar from "../../components/views/NavBar/NavBar"; -import { IMAGES } from "../../constants/images"; -// import useFetchUserInfo from "../../hooks/useFetchUserInfo"; -import { useNavigate } from "react-router-dom"; import Empty from "../../components/views/PageComponent/Empty"; import PointStateBox from "../../components/views/PointStateBox/PointStateBox"; -// import useGetPoint from "../../hooks/useGetPoint"; -// import useGetPointHistory from "../../hooks/useGetPointHistory"; +import { IMAGES } from "../../constants/images"; +import useGetPoint from "../../hooks/useGetPoint"; +import useGetPointHistory from "../../hooks/useGetPointHistory"; import "./MembershipPage.css"; function MembershipPage() { const navigate = useNavigate(); - // const point = useGetPoint(); - // const pointHistory = useGetPointHistory(); - const point = 10000; - const membershipList = [ - { - status: true, - point: "+1000", - store: "오르다", - date: "2023-11-25 19:09", - }, - { - status: false, - point: "-1000", - store: "오르다", - date: "2023-11-25 19:09", - }, - ]; + const point = useGetPoint(); + const pointHistory = useGetPointHistory(); return (
@@ -65,10 +49,8 @@ function MembershipPage() {
멤버십 내역
- {/* {pointHistory?.length ? ( - pointHistory?.map((e, i) => ( */} - {membershipList?.length ? ( - membershipList?.map((e, i) => ( + {pointHistory?.length ? ( + pointHistory?.map((e, i) => ( // {/* 매핑될 요소 */}
Date: Mon, 26 Feb 2024 14:54:57 +0900 Subject: [PATCH 3/6] =?UTF-8?q?Feat:=20=ED=8F=AC=EC=9D=B8=ED=8A=B8=20?= =?UTF-8?q?=EA=B2=B0=EC=A0=9C=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PaymentPage/PaymentPage.jsx | 50 ++++++++++++++++++--------- 1 file changed, 34 insertions(+), 16 deletions(-) diff --git a/src/pages/PaymentPage/PaymentPage.jsx b/src/pages/PaymentPage/PaymentPage.jsx index 1a1783e..e052ee3 100644 --- a/src/pages/PaymentPage/PaymentPage.jsx +++ b/src/pages/PaymentPage/PaymentPage.jsx @@ -1,12 +1,12 @@ import { loadPaymentWidget } from "@tosspayments/payment-widget-sdk"; -import React, { useEffect, useRef } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { Link, useLocation } from "react-router-dom"; import Header from "../../components/views/Header/Header"; +import { IMAGES } from "../../constants/images"; import useFetchCartData from "../../hooks/useFetchCartData"; import useGetPoint from "../../hooks/useGetPoint"; import useRequestPayment from "../../hooks/useRequestPayment"; import "./PaymentPage.css"; -import { IMAGES } from "../../constants/images"; const clientKey = process.env.REACT_APP_TOSS_CLIENT_KEY; const customerKey = "OSlBWOomTvjxwqJTcNtEB"; @@ -17,17 +17,29 @@ const PaymentPage = () => { const cartId = params.get("cartId"); const couponId = location.state?.selectedCoupon ?? null; const salePrice = location.state?.salePrice ?? 0; + const [usedPoint, setUsedPoint] = useState(0); const paymentWidgetRef = useRef(null); const paymentMethodsWidgetRef = useRef(null); const { carts, edit, imgUrl, inOut, isOpened, name, storeId, totalPrice } = useFetchCartData(cartId); const requestPayment = useRequestPayment(); - const getPoint = useGetPoint(); + const point = useGetPoint(); const paymentRequest = () => { const paymentWidget = paymentWidgetRef.current; requestPayment(cartId, couponId, paymentWidget); }; - + const handleSetPoint = () => { + if (usedPoint !== 0) { + setUsedPoint(0); + return; + } + const MiddleSumPrice = totalPrice - salePrice; + if (MiddleSumPrice <= 0) { + setUsedPoint(0); + } else { + setUsedPoint(Math.min(point, MiddleSumPrice)); + } + }; useEffect(() => { (async () => { // ------ 결제위젯 초기화 ------ @@ -41,7 +53,7 @@ const PaymentPage = () => { // https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods선택자-결제-금액-옵션 const paymentMethodsWidget = paymentWidget.renderPaymentMethods( "#payment-page__payment-widget", - { value: Math.max(totalPrice - salePrice, 0) }, + { value: Math.max(totalPrice - salePrice - usedPoint, 0) }, // 렌더링하고 싶은 결제 UI의 variantKey // 아래 variantKey는 문서용 테스트키와 연동되어 있습니다. 멀티 UI를 직접 만들고 싶다면 계약이 필요해요. @@ -59,7 +71,7 @@ const PaymentPage = () => { paymentWidgetRef.current = paymentWidget; paymentMethodsWidgetRef.current = paymentMethodsWidget; })(); - }, [totalPrice, salePrice]); + }, [totalPrice, salePrice, usedPoint]); useEffect(() => { const paymentMethodsWidget = paymentMethodsWidgetRef.current; @@ -71,8 +83,10 @@ const PaymentPage = () => { // ------ 금액 업데이트 ------ // 새로운 결제 금액을 넣어주세요. // https://docs.tosspayments.com/reference/widget-sdk#updateamount결제-금액 - paymentMethodsWidget.updateAmount(Math.max(totalPrice - salePrice, 0)); - }, [totalPrice, salePrice]); + paymentMethodsWidget.updateAmount( + Math.max(totalPrice - salePrice - usedPoint, 0) + ); + }, [totalPrice, salePrice, usedPoint]); return (
@@ -195,23 +209,24 @@ const PaymentPage = () => { 통합 포인트 - {salePrice && ( + {usedPoint && ( - {salePrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원 + {usedPoint.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원 )} {/* 적용취소, 적용 금액 한계 설정 */}
- 적용 + {usedPoint === 0 ? "적용" : "적용 취소"}
- 보유: {getPoint} P + 보유: {point} P
@@ -226,9 +241,12 @@ const PaymentPage = () => {
할인금액 - {salePrice > 0 + {salePrice + usedPoint > 0 ? "(-)" + - salePrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + + // 표시되는 할인 금액 조정 + Math.min(salePrice + usedPoint, totalPrice) + .toString() + .replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "원" : "0원"} @@ -240,10 +258,10 @@ const PaymentPage = () => { 총 결제 금액 {totalPrice && - Math.max(totalPrice - salePrice, 0) + Math.max(totalPrice - salePrice - usedPoint, 0) .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "원"} - {console.log(totalPrice, salePrice)} + {console.log(totalPrice, salePrice, usedPoint)}
From e79455e4dbd25cebab355bc257af2de7b4ef5f00 Mon Sep 17 00:00:00 2001 From: KKangHHee <137751841+KKangHHee@users.noreply.github.com> Date: Tue, 27 Feb 2024 14:28:10 +0900 Subject: [PATCH 4/6] =?UTF-8?q?Docs:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=ED=9B=85=20=EC=82=AD=EC=A0=9C=5F0=EC=9B=90?= =?UTF-8?q?=EA=B2=B0=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useRequestPaymentZeroCost.jsx | 24 ------------------------ 1 file changed, 24 deletions(-) delete mode 100644 src/hooks/useRequestPaymentZeroCost.jsx diff --git a/src/hooks/useRequestPaymentZeroCost.jsx b/src/hooks/useRequestPaymentZeroCost.jsx deleted file mode 100644 index 645553a..0000000 --- a/src/hooks/useRequestPaymentZeroCost.jsx +++ /dev/null @@ -1,24 +0,0 @@ -const apiHome = process.env.REACT_APP_HOME_URL; -const apiVer = "api/v1"; -const apiUrlBasic = `${apiHome}/${apiVer}/order/toss/success?`; - -const useRequestZoreCostPayment = () => { - const zoreCostPaymentKey = "coupon"; - const requestZoreCostPayment = async ({ orderId, amount }) => { - const apiUrl = - apiUrlBasic + - `paymentKey=${zoreCostPaymentKey}&` + - `orderId=${orderId}&` + - `amount=${amount}`; - try { - window.location.href = apiUrl; - return; - } catch (error) { - console.error(error); - } - }; - - return requestZoreCostPayment; -}; - -export default useRequestZoreCostPayment; From fc243bb907d603e1fd558317719a0f1029cc8ef4 Mon Sep 17 00:00:00 2001 From: KKangHHee <137751841+KKangHHee@users.noreply.github.com> Date: Tue, 27 Feb 2024 14:29:24 +0900 Subject: [PATCH 5/6] =?UTF-8?q?Docs:=20=EA=B2=B0=EC=A0=9C=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C=20=EB=B0=8F=20=EC=A3=BC=EB=AC=B8=20=EC=82=AC=ED=95=AD?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=86=92=EC=9D=B4=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/PageComponent/OrderProgress.css | 23 +++++++++++++++---- .../views/PageComponent/OrderProgress.jsx | 2 +- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/components/views/PageComponent/OrderProgress.css b/src/components/views/PageComponent/OrderProgress.css index f2bf3b4..ae0574e 100644 --- a/src/components/views/PageComponent/OrderProgress.css +++ b/src/components/views/PageComponent/OrderProgress.css @@ -1,7 +1,11 @@ .order_progress { + position: fixed; + top: 0; + left: 0; width: 100%; + height: 100vh; + overflow-y: auto; background: linear-gradient(180deg, #fff 34.11%, #ffe2ed 100%); - padding-bottom: 5rem; } .order_progress__header { @@ -133,6 +137,10 @@ letter-spacing: -0.01rem; } +/* 주문상세 주문 취소 */ +.order_progress__wrapper { + position: relative; +} .order_progress__detail { display: flex; justify-content: center; @@ -152,9 +160,13 @@ margin-left: auto; margin-right: auto; margin-top: 4rem; + margin-bottom: 10.25rem; } .order_progress__cancel { + position: absolute; + top: 6.0675rem; + width: 100%; color: #838383; text-align: center; font-family: "Pretendard Variable"; @@ -163,11 +175,14 @@ font-weight: 700; line-height: 130%; /* 0.975rem */ letter-spacing: -0.0075rem; - margin-top: 4.25rem; - /* margin-bottom: 3.63rem; */ } .order_progress__point { + position: absolute; + /* 수평 가운데 정렬 */ + left: 50%; + transform: translateX(-50%); + top: 2.3775rem; display: flex; flex-direction: column; align-items: center; @@ -176,7 +191,6 @@ background: url(../../../assets/images/bg_earn_point_info.png) no-repeat center center; background-size: cover; - margin: 0.69rem auto 0 auto; } .order_progress__point_text { @@ -188,5 +202,4 @@ line-height: 130%; /* 0.975rem */ letter-spacing: -0.0075rem; margin-top: 0.96rem; - margin-bottom: 0.48rem; } diff --git a/src/components/views/PageComponent/OrderProgress.jsx b/src/components/views/PageComponent/OrderProgress.jsx index cd976e0..354dd71 100644 --- a/src/components/views/PageComponent/OrderProgress.jsx +++ b/src/components/views/PageComponent/OrderProgress.jsx @@ -178,7 +178,7 @@ const OrderProgress = () => { : "안내 문구"}
-
+
{degree === 1 ? (
Date: Tue, 27 Feb 2024 14:29:51 +0900 Subject: [PATCH 6/6] =?UTF-8?q?Feat:=20=ED=8F=AC=EC=9D=B8=ED=8A=B8=20?= =?UTF-8?q?=EA=B2=B0=EC=A0=9C=20=EB=B0=8F=200=EC=9B=90=20=EA=B2=B0?= =?UTF-8?q?=EC=A0=9C=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useRequestPayment.jsx | 12 +++++------- src/pages/PaymentPage/PaymentPage.jsx | 2 +- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/hooks/useRequestPayment.jsx b/src/hooks/useRequestPayment.jsx index 433a69e..5128931 100644 --- a/src/hooks/useRequestPayment.jsx +++ b/src/hooks/useRequestPayment.jsx @@ -1,23 +1,21 @@ import axios from "axios"; -import useRequestZoreCostPayment from "./useRequestPaymentZeroCost"; const apiRoot = process.env.REACT_APP_API_ROOT; const apiVer = "api/v1"; const apiUrl = `${apiRoot}/${apiVer}/order/toss`; const useRequestPayment = () => { - const requestZoreCostPayment = useRequestZoreCostPayment(); - const requestPayment = async (cartId, couponId, paymentWidget) => { + const requestPayment = async (cartId, couponId, paymentWidget, point) => { try { - const body = { cartId, couponId }; + const body = { cartId, couponId, point }; const response = await axios.post(apiUrl, body, { withCredentials: true, }); if (response.data.amount <= 0) { - const orderIds = response.data.orderId; - const amounts = response.data.amount; - requestZoreCostPayment({ orderId: orderIds, amount: amounts }); + window.location.href = + response.data.successUrl + + `?paymentType=NORMAL&orderId=${response.data.orderId}&paymentKey=membership&amount=${response.data.amount}`; return; } paymentWidget?.requestPayment(response.data); diff --git a/src/pages/PaymentPage/PaymentPage.jsx b/src/pages/PaymentPage/PaymentPage.jsx index e052ee3..8dbb404 100644 --- a/src/pages/PaymentPage/PaymentPage.jsx +++ b/src/pages/PaymentPage/PaymentPage.jsx @@ -26,7 +26,7 @@ const PaymentPage = () => { const point = useGetPoint(); const paymentRequest = () => { const paymentWidget = paymentWidgetRef.current; - requestPayment(cartId, couponId, paymentWidget); + requestPayment(cartId, couponId, paymentWidget, usedPoint); }; const handleSetPoint = () => { if (usedPoint !== 0) {