diff --git a/src/Router.jsx b/src/Router.jsx index 2cb2548..8769ad4 100644 --- a/src/Router.jsx +++ b/src/Router.jsx @@ -20,20 +20,16 @@ import WalkMapPage from './pages/WalkPage/WalkMapPage.jsx'; import WalkJournalPage from './pages/WalkPage/WalkJournalPage.jsx'; import Payment from './pages/PaymentPage/Payment.jsx'; import PaymentEnd from './pages/PaymentPage/PaymentEnd.jsx'; -import CancelPay from './pages/PaymentPage/CancelPay.jsx'; import PetEditPage from './pages/MyPage/PetEditPage.jsx'; - -import PayListTest from './pages/PaymentPage/paylisttest.jsx'; -import PaymentCancelList from './pages/PaymentPage/PaymentCancelList.jsx'; import PaymentHistory from './pages/PaymentPage/PaymentHistory.jsx'; - import ComunityWrite from './pages/CommunityPage/CommunityWrite.jsx'; import CommunityList from './pages/CommunityPage/CommunityList.jsx'; import CommunityDetail from './pages/CommunityPage/CommunityDetail.jsx'; - import HealthCare from './pages/HealthCare/HealthCare.jsx'; import ShoppingCart from './pages/ShoppingCart/ShoppingCart.jsx'; import { CartProvider } from './pages/ShoppingCart/CartContext'; +import PayCancelReq from './pages/PaymentPage/PayCancelReq.jsx'; +import PaymentCancelDone from './pages/PaymentPage/PaymentCancelDone.jsx'; function Router() { return ( @@ -43,18 +39,18 @@ function Router() { }> - } /> + } /> } /> } /> } /> } /> } /> - } /> + } /> } /> } /> - } /> - } /> + } /> + } /> }> } /> diff --git a/src/pages/PaymentPage/CancelPay.jsx b/src/pages/PaymentPage/CancelPay.jsx index 54f77ec..6a92cb6 100644 --- a/src/pages/PaymentPage/CancelPay.jsx +++ b/src/pages/PaymentPage/CancelPay.jsx @@ -1,11 +1,36 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import axios from "axios"; -const CancelPay = () => { - // 결제 취소 함수 + +const CancelPay = ({ userId }) => { + const [impUid, setImpUid] = useState(null); + + // userId에 따른 imp_uid 가져오기 + const fetchImpUid = async () => { + try { + const response = await axios.get(`http://localhost:8080/api/payment/list/${userId}`); + const paymentData = response.data; + + console.log("Fetched Payment Data:", paymentData); // 전체 데이터를 확인 + + // 배열의 첫 번째 객체의 impUid만 가져옵니다 + if (paymentData.length > 0 && paymentData[0].impUid) { + setImpUid(paymentData[0].impUid); + } else { + console.error("impUid를 찾을 수 없습니다."); + alert("impUid를 찾을 수 없습니다."); + } + } catch (error) { + console.error("impUid 가져오기 에러 발생:", error); + alert("impUid를 가져오는 데 실패했습니다."); + } + }; + + // 결제 취소 요청 핸들링 const handleCancel = async () => { - const imp_uid = "imp_624092379683"; // 테스트용 결제번호 - const confirm = window.confirm(`${imp_uid} / 결제를 취소하시겠습니까?`); + if (!impUid) return; // imp_uid가 없는 경우 실행 중지 + + const confirm = window.confirm(`${impUid} / 결제를 취소하시겠습니까?`); if (confirm) { try { // Access token 요청 @@ -14,8 +39,8 @@ const CancelPay = () => { method: "post", headers: { "Content-Type": "application/json" }, data: { - imp_key: "6424817121242405", - imp_secret: "Qxc7mtPG7i3Rp0s2g4t9ftrE90QkD1jB32mmYIKQIaYyAdjAYFLD2Q9Ff7aA4KLSa7abVuXcut47ZTQ9", + imp_key: import.meta.env.VITE_IMP_KEY, + imp_secret: import.meta.env.VITE_IMP_SECRET, }, }); @@ -23,7 +48,7 @@ const CancelPay = () => { const { access_token } = getToken.data.response; // 취소 요청 - await getCancelData(access_token, imp_uid); + await getCancelData(access_token, impUid); } catch (error) { console.error("토큰 추출 에러 발생:", error); } @@ -36,13 +61,13 @@ const CancelPay = () => { const response = await axios.post( "/iamport/payments/cancel", { - imp_uid: "imp_624092379683", // 결제번호 (필수) - cancel_request_amount: 1000 + imp_uid: imp_uid, // 결제번호 (필수) + cancel_request_amount: 1000, }, { headers: { "Content-Type": "application/json", - Authorization: `Bearer ${access_token}`, + Authorization: `Bearer ${access_token}`, }, } ); @@ -54,9 +79,20 @@ const CancelPay = () => { } }; + // 컴포넌트가 렌더링될 때 imp_uid를 먼저 가져오고 handleCancel 함수 실행 + useEffect(() => { + fetchImpUid(); + }, []); + + useEffect(() => { + if (impUid) { + handleCancel(); + } + }, [impUid]); + return (
- +

결제 취소 요청 중...

); }; diff --git a/src/pages/PaymentPage/PayCancelReq.jsx b/src/pages/PaymentPage/PayCancelReq.jsx new file mode 100644 index 0000000..a59bbb6 --- /dev/null +++ b/src/pages/PaymentPage/PayCancelReq.jsx @@ -0,0 +1,183 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import CancelPay from "./CancelPay"; + +const StyledH2 = styled.h2` + font-weight: bold; + margin-bottom: 10px; +`; + +const OrderCancellationWrapper = styled.div` + padding: 20px; + margin-top: 64px; +`; + +const OrderInfo = styled.div` + display: flex; + justify-content: space-between; + margin-bottom: 20px; + font-size: 13px; +`; + +const CancelItem = styled.div` + margin-bottom: 20px; +`; + +const ItemInfo = styled.div` + display: flex; + align-items: center; + margin-bottom: 10px; + + input { + margin-right: 10px; + } + + label { + display: flex; + align-items: center; + + img { + width: 50px; + height: 50px; + margin-right: 10px; + } + + div { + p { + margin: 0; + } + } + } +`; + +const CancelReason = styled.div` + margin-bottom: 20px; + + select { + width: 100%; + margin-top: 10px; + border-radius: 8px; + } + + textarea { + margin-top: 10px; + width: 100%; + height: 100px; + border-radius: 8px; + } +`; + +const RefundInfo = styled.div` + margin-bottom: 20px; +`; + +const RefundDetails = styled.div` + .refund-detail { + display: flex; + justify-content: space-between; + margin-bottom: 10px; + } +`; + +const Divider = styled.hr` + border: none; + border-top: 1px solid #e0e0e0; + margin: 20px 0; +`; + +const CancelButton = styled.button` + background-color: #ff6e00; + color: white; + padding: 10px 20px; + border: none; + cursor: pointer; + width: 100%; + font-size: 14px; + font-weight: bold; + border-radius: 5px; + transition: background-color 0.3s; + + &:hover { + background-color: darkorange; + } +`; + +function PayCancelReq() { + const [cancelReason, setCancelReason] = useState(''); + const [detailedReason, setDetailedReason] = useState(''); + const [isCancelRequested, setIsCancelRequested] = useState(false); + + const handleReasonChange = (e) => { + setCancelReason(e.target.value); + }; + + const handleDetailedReasonChange = (e) => { + setDetailedReason(e.target.value); + }; + + const handleCancel = () => { + setIsCancelRequested(true); + console.log("주문 취소 요청"); + }; + + return ( + + + 주문일시 + 24.10.17 + + + 취소 사유 선택 + + + + + + + + 취소 사유 + +