Merge pull request #37 from URECA-PODONG/feat/#6

Feat(#6):결제4차수정&라우터추가

src/Router.jsx

@@ -28,23 +28,34 @@ 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';
 
 function Router() {
   return (
     <BrowserRouter>
-      <ScrollTop />
-      <NavSelector />
+      {/* <ScrollTop /> */}
+      {/* <NavSelector /> */}
       <Routes>
         <Route path="/" element={<Outlet />}>
-          <Route index element={<Payment />} />
+          <Route index element={<MainPage/>} />
           <Route path="login" element={<LoginPage />} />
           <Route
             path="shoppingDetail/:productId"
             element={<ShoppingDetail />}
           />
+
+        <Route path="payment" element={<Payment />} /> 
+        <Route path="paymentCancelList" element={<PaymentCancelList />}/>
+        <Route path="paymentEnd" element={<PaymentEnd />}/>
+        <Route path="paymentHistory" element={<PaymentHistory />}/>
+        <Route path="cancelpay" element={<CancelPay />}/>
+        <Route path="paymentlist" element={<PayListTest />}/>
+
           <Route path="nanumList" element={<Outlet />}>
             <Route index element={<NanumList />} />
             <Route path="write" element={<NanumWrite />} />

src/pages/PaymentPage/PayListTest.jsx

@@ -0,0 +1,50 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const PayListTest = () => {
+    const userId = 1; // userId가 상수로 선언되어 1로 설정
+    const [paymentLogs, setPaymentLogs] = useState([]); // 데이터를 배열로 초기화
+
+    useEffect(() => {
+        const fetchPaymentLogs = async () => {
+            try {
+                const response = await axios.get(`http://localhost:8080/api/payment/list/${userId}`);
+                console.log(response.data); // 응답 데이터 확인
+                setPaymentLogs(response.data); // 응답 데이터가 배열인 경우에 데이터를 상화에 저장
+            } catch (error) {
+                console.error("Error fetching payment logs:", error);
+            }
+        };
+
+        fetchPaymentLogs();
+    }, [userId]);
+
+    return (
+        <div>
+            <h2>결제내역</h2>
+            <ul>
+                {paymentLogs.map((log, index) => (
+                    <li key={index}>
+                        <p><strong>User ID(유저ID) :</strong> {log.userId}</p>
+                        <p><strong>Merchant ID(구매자ID) :</strong> {log.merchantId}</p>
+                        <p><strong>IMP UID(결제번호) :</strong> {log.impUid}</p>
+                        <p><strong>Created At(생성일) :</strong> {new Date(log.createdAt).toLocaleString()}</p>
+                        <p><strong>Card Name(카드명) :</strong> {log.cardName}</p>
+                        <p><strong>Card Number(카드번호) :</strong> {log.cardNumber}</p>
+                        <p><strong>Approval Number(카드승인번호) :</strong> {log.approvalNumber}</p>
+                        <p><strong>Installment Months(할부개월수) :</strong> {log.installmentMonths}</p>
+                        <p><strong>Pay Name(결제명) :</strong> {log.payName}</p>
+                        <p><strong>Pay Amount(결제금액) :</strong> {log.payAmount}</p>
+                        <p><strong>Pay Method(결제방법) :</strong> {log.payMethod}</p>
+                        <p><strong>Pay Status(결제상태) :</strong> {log.payStatus}</p>
+                        <p><strong>PG(PG사명) :</strong> {log.pg}</p>
+                        <p><strong>Updated At(수정일) :</strong> {new Date(log.updatedAt).toLocaleString()}</p>
+                        <hr />
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export default PayListTest;

src/pages/PaymentPage/Payment.jsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import PopupDom from '../../components/Register/PopUpDom';
 import PopupPostCode from '../../components/Register/PopupPostCode';
 import axios from 'axios';
-// 결제1차백
+
 const Payment = () => {
     const [deliveryMethod, setDeliveryMethod] = useState('');
     const [deliveryNote, setDeliveryNote] = useState('');

src/pages/PaymentPage/PaymentCancel.jsx → src/pages/PaymentPage/PaymentCancelList.jsx

@@ -1,8 +1,7 @@
-// React Component (PaymentCancel.js)
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import Lottie from 'lottie-react';
-import PayCancelAnimation from '../PaymentPage/PayCancelAnimation.json';
+import PayCancelAnimation from './PayCancelAnimation.json';
 
 const Container = styled.div`
   display: flex;
@@ -131,7 +130,7 @@ const PaymentTotal = styled.p`
   margin-top: 10px;
 `;
 
-const PaymentCancel = () => {
+const PaymentCancelList = () => {
   const [orderNumber, setOrderNumber] = useState('');
   const [content, setContent] = useState({});
 
@@ -201,4 +200,4 @@ const PaymentCancel = () => {
   );
 };
 
-export default PaymentCancel;
+export default PaymentCancelList;

src/pages/PaymentPage/PaymentHistory.jsx

@@ -9,7 +9,7 @@ const Container = styled.div`
 
 const SearchContainer = styled.div`
   display: flex;
-  align-items: center;
+  align-items: center; 
   margin-bottom: 20px;
   background-color: #fff;
   padding: 10px;