[feat] 예매 내역 확인 창 구현

ticketping/src/App.js

@@ -9,7 +9,7 @@ import Order from './pages/Order'
 import AppLayout from './component/AppLayout';
 import Login from './pages/Login';
 import VerificationInfo from './pages/Join';
-import MyPage from './pages/MyPage';
+import MyOrder from './pages/MyOrder';
 import NotFound from './pages/NotFound';
 import Checkout from './pages/payment/Checkout';
 import Success from './pages/payment/Success';
@@ -22,7 +22,8 @@ function App() {
         <Route path='/' element={<Main />}></Route>
         <Route path='/login' element={<Login />}></Route>
         <Route path='/join' element={<VerificationInfo />}></Route>
-        <Route path='/mypage' element={<LoginRequiredRoute><MyPage /></LoginRequiredRoute>}></Route>
+        <Route path='/myorder' element={<MyOrder />}></Route>
+        {/* <Route path='/myorder' element={<LoginRequiredRoute><MyOrder /></LoginRequiredRoute>}></Route> */}
         <Route path='/performance/:id' element={<PerformanceDetail />} />
         <Route path='/performance/:id/schedule' element={<LoginRequiredRoute><SelectSchedule /></LoginRequiredRoute>} />
         <Route path='/performance/:performanceId/schedule/:scheduleId/seat' element={<LoginRequiredRoute><Seat /></LoginRequiredRoute>}></Route>

ticketping/src/component/AppLayout.js

@@ -28,9 +28,9 @@ function AppLayout({ children }) {
           <Button
             type="link"
             className="auth-button"
-            onClick={() => navigate("/mypage")}
+            onClick={() => navigate("/myorder")}
           >
-            MyPage
+            MyOrder
           </Button>
           {isAuthenticated ? (
             <Button type="link" className="auth-button" onClick={logout}>

ticketping/src/pages/MyOrder.js

@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from "react";
+import { axiosInstance } from "../api";
+import { useAppContext } from "../store";
+import "../style/MyOrder.css";
+
+export default function MyOrder() {
+  const {
+    store: { jwtToken },
+  } = useAppContext();
+  const headers = { Authorization: jwtToken };
+
+  const [orders, setOrders] = useState([]);
+  const [page, setPage] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [lastPage, setLastPage] = useState(false);
+
+  const fetchOrders = async () => {
+    if (loading || lastPage) return;
+    setLoading(true);
+
+    try {
+      const response = await axiosInstance.get(
+        `/api/v1/orders/user-orders?page=${page}&size=10`,
+        { headers }
+      );
+
+      const { content, last } = response.data.data;
+      setOrders((prevOrders) => [...prevOrders, ...content]);
+      setLastPage(last);
+    } catch (error) {
+      console.error("주문 목록 조회 실패:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchOrders();
+  }, [page]);
+
+  const handleScroll = () => {
+    if (
+      window.innerHeight + document.documentElement.scrollTop >=
+        document.documentElement.offsetHeight - 10 &&
+      !loading
+    ) {
+      setPage((prevPage) => prevPage + 1);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [loading]);
+
+  const getOrderStatusClass = (status) => {
+    switch (status) {
+      case "예매 완료":
+        return "payment-completed";
+      case "예매 취소":
+        return "canceled";
+      default:
+        return "";
+    }
+  };
+
+  return (
+    <div className="myorder-container">
+      <h2 className="myorder-title">예매 내역</h2>
+      <div className="myorder-list">
+        {!loading && orders.length === 0 && (
+          <div className="no-orders-message">예매 내역이 없습니다.</div>
+        )}
+        {orders.map((order, index) => (
+          <div
+            className={`myorder-detail ${index === 0 ? "first-order" : ""}`}
+            key={order.id}
+          >
+            <div className="myorder-header">
+              <div
+                className={`order-status ${getOrderStatusClass(
+                  order.orderStatus
+                )}`}
+              >
+                {order.orderStatus}
+              </div>
+              <div className="performance-name">{order.performanceName}</div>
+            </div>
+            <table className="order-table">
+              <tbody>
+                <tr>
+                  <td className="order-label">시작일</td>
+                  <td>{order.startDate}</td>
+                </tr>
+                <tr>
+                  <td className="order-label">좌석</td>
+                  <td>{`${order.row}석, ${order.col}열 (${order.seatGrade})`}</td>
+                </tr>
+                <tr>
+                  <td className="order-label">공연장</td>
+                  <td>{order.performanceHallName}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        ))}
+        {loading && <div>...</div>}
+      </div>
+    </div>
+  );
+}

ticketping/src/style/MyOrder.css

@@ -0,0 +1,95 @@
+.myorder-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.myorder-title {
+  text-align: center;
+  width: 100%;
+  font-size: 30px;
+  margin-bottom: 20px;
+}
+
+.myorder-list {
+  padding: 10px;
+  width: 50%;
+  min-width: 500px;
+}
+
+.no-orders-message {
+  display: flex;
+  justify-content: center;
+  height: 50vh;
+  font-size: 24px;
+  font-weight: bold;
+  color: #555;
+  text-align: center;
+}
+
+
+.myorder-detail {
+  display: flex;
+  flex-direction: column;
+  padding: 20px 0;
+  border-bottom: 1px solid #ddd;
+  width: 100%;
+}
+
+.myorder-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 20px;
+}
+
+.performance-name {
+  font-weight: bold;
+  margin-left: 10px; 
+}
+
+.order-status {
+  display: inline-block;
+  width: 80px;
+  padding: 5px 20px;
+  border-radius: 50px;
+  text-align: center;
+  font-weight: bold;
+}
+
+.payment-completed {
+  border: 2px solid #28A745;
+  color: #28A745;
+}
+
+.canceled {
+  border: 2px solid #DC3545;
+  color: #DC3545;
+}
+
+.order-table {
+  width: 100%;
+  table-layout: fixed;
+  border-spacing: 0;
+}
+
+.order-label {
+  width: 20%;
+  font-weight: bold;
+  text-align: left;
+}
+
+.order-table td {
+  padding: 5px;
+  border: none;
+}
+
+.order-table td:first-child {
+  font-weight: bold;
+}
+
+.first-order {
+  border-top: 1px solid #ddd;
+}