Feat: 포인트 결제 및 0원 결제 연동

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% */
 }
 

src/components/views/CartItemCount/CartItemCount.jsx

@@ -22,7 +22,7 @@ const CartItemCount = () => {
   }, []);
 
   return (
-    <>{count === 0 ? null : <div className="cart-item-count">{ count}</div>}</>
+    <>{count === 0 ? null : <div className="cart-item-count">{count}</div>}</>
   );
 };
 

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;
 }

src/components/views/PageComponent/OrderProgress.jsx

@@ -178,7 +178,7 @@ const OrderProgress = () => {
           : "안내 문구"}
       </div>
 
-      <div>
+      <div className="order_progress__wrapper">
         {degree === 1 ? (
           <div>
             <div

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);

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) => {

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 (
     <section className="membershippage-div">
@@ -65,10 +49,8 @@ function MembershipPage() {
           <div className="membershippage-use-point-box-title">
             <span>멤버십 내역</span>
           </div>
-          {/* {pointHistory?.length ? (
-            pointHistory?.map((e, i) => ( */}
-          {membershipList?.length ? (
-            membershipList?.map((e, i) => (
+          {pointHistory?.length ? (
+            pointHistory?.map((e, i) => (
               // {/* 매핑될 요소 */}
               <div
                 className="membershippage-use-point-box-content"

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);
+    requestPayment(cartId, couponId, paymentWidget, usedPoint);
+  };
+  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 (
     <div className="payment-page">
@@ -195,23 +209,24 @@ const PaymentPage = () => {
           <span className="payment-page__content">통합 포인트</span>
           <span className="payment-page__coupone__apply">
             <span className="payment-page__coupone-price">
-              {salePrice && (
+              {usedPoint && (
                 <span className="payment-page__coupone-price">
-                  {salePrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
+                  {usedPoint.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
                 </span>
               )}
               {/* 적용취소, 적용 금액 한계 설정 */}
               <div
                 className="payment-page__coupone-btn"
                 style={{ textDecoration: "none" }}
+                onClick={handleSetPoint}
               >
-                적용
+                {usedPoint === 0 ? "적용" : "적용 취소"}
               </div>
             </span>
           </span>
         </div>
         <div className="payment-page__point__available">
-          <span>보유: {getPoint} P</span>
+          <span>보유: {point} P</span>
         </div>
         <div className="payment-page__order-info__pay__line"></div>
 
@@ -226,9 +241,12 @@ const PaymentPage = () => {
         <div className="payment-page__discountAmount">
           <span className="payment-page__content">할인금액</span>
           <span className="payment-page__content-price">
-            {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원"}
           </span>
@@ -240,10 +258,10 @@ const PaymentPage = () => {
           <span className="payment-page__title">총 결제 금액</span>
           <span className="payment-page__total-price">
             {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)}
           </span>
         </div>