[feat] 좌석 선점 페이지로 performance 정보 전달

ticketping/src/component/EnterQueue.js

@@ -9,29 +9,29 @@ export const useEnterQueue = (setIsModalVisible) => {
   const { store: { jwtToken } } = useAppContext();
   const headers = { Authorization: jwtToken };
 
-  const enterQueue = async (performanceId) => {
+  const enterQueue = async (performance) => {
     try { 
-      const response = await axiosInstance.get(`/api/v1/waiting-queue?performanceId=${performanceId}`, { headers });
+      const response = await axiosInstance.get(`/api/v1/waiting-queue?performanceId=${performance.id}`, { headers });
       const tokenStatus = response.data.data.tokenStatus;
 
       if (tokenStatus === "WAITING") {
         setIsModalVisible(true); 
       } else if (tokenStatus === "WORKING") {
-        navigate(`/performance/${performanceId}/schedule`);
+        navigate(`/performance/${performance.id}/schedule`, { state: { performance } });
       }
     } catch (error) {
 
       // 대기열에 없는 인원
       if (error.response && error.response.status === 404) {
 
         try {
-          const response = await axiosInstance.post(`/api/v1/waiting-queue?performanceId=${performanceId}`, {}, { headers });
+          const response = await axiosInstance.post(`/api/v1/waiting-queue?performanceId=${performance.id}`, {}, { headers });
           const tokenStatus = response.data.data.tokenStatus;
 
           if (tokenStatus === "WAITING") {
             setIsModalVisible(true); 
           } else if (tokenStatus === "WORKING") {
-            navigate(`/performance/${performanceId}/schedule`);
+            navigate(`/performance/${performance.id}/schedule`, { state: { performance } });
           }
         } catch (error) {
           if (error.response) {

ticketping/src/component/Logout.js

@@ -10,7 +10,6 @@ export const useLogout = () => {
   const { dispatch } = useAppContext();
   const { store: { jwtToken } } = useAppContext();
 
-  // 토큰 만료 확인 및 재발급
   const { checkExpiredToken } = useCheckExpiredToken(); 
 
   const logout = async () => {
@@ -28,7 +27,6 @@ export const useLogout = () => {
 
       navigate("/"); 
     } catch (error) {
-      // 토큰 만료 확인 및 재발급
       checkExpiredToken(error.response.data);
     }
   };

ticketping/src/pages/PerformanceDetail.js

@@ -87,9 +87,9 @@ function PerformanceDetail() {
     return <p>{error}</p>;
   }
 
-  const handleEnterQueue = (performanceId) => {
+  const handleEnterQueue = (performance) => {
     if (isAuthenticated) {
-      enterQueue(performanceId);
+      enterQueue(performance);
     } else {
       notification.open({
         message: "로그인이 필요합니다!",
@@ -143,7 +143,7 @@ function PerformanceDetail() {
         </table>
         <button 
           disabled={timeRemaining !== "공연 예매하기"}
-          onClick={() => handleEnterQueue(id)} 
+          onClick={() => handleEnterQueue(performance)} 
         >
           {timeRemaining}
         </button>

ticketping/src/pages/SelectSchedule.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { useParams, useNavigate } from "react-router-dom";
+import { useParams, useNavigate, useLocation } from "react-router-dom";
 import { axiosInstance } from "../api";
 import { useAppContext } from "../store";
 import { Calendar, Button } from 'antd';
@@ -9,6 +9,9 @@ import "../style/SelectSchedule.css";
 export default function SelectSchedule() {
   const { id } = useParams();
   const navigate = useNavigate();
+  const location = useLocation();
+  const { performance } = location.state || {};
+
   const { store: { jwtToken } } = useAppContext();
   const headers = { Authorization: jwtToken };
 
@@ -72,11 +75,7 @@ export default function SelectSchedule() {
 
   const handleDateSelect = () => {
     if (selectedDateId) {
-      console.log(`공연 id: ${id}`);
-      console.log(`선택된 스케줄 id: ${selectedDateId}`);
-
-      // 좌석 선점 페이지 이동
-      navigate('/'); 
+      navigate(`/performance/${id}/schedule/${selectedDateId}/seat`, { state: { performance } }); 
     } else {
 
     }

ticketping/src/pages/seat/Seat.js

@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useLocation } from 'react-router-dom';
 import { axiosInstance } from "../../api";
 import { useAppContext } from "../../store";
 import SeatLayout from './SeatLayout';
 import '../../style/Seat.css';
 
 function Seat() {
+  const location = useLocation();
+  const { performance } = location.state || {};
   const { performanceId, scheduleId } = useParams();
   const { store: { jwtToken } } = useAppContext();
   const [seats, setSeats] = useState([]);
@@ -17,7 +19,7 @@ function Seat() {
   // rows, columns, performanceName은 performance 정보 받아온 거에 맞춰서 바꾸기
   const rows = 10; 
   const columns = 5; 
-  const performanceName = "햄릿"; 
+  const performanceName = performance.name; 
   const grades = ['S', 'S', 'A', 'A', 'B', 'B', 'B', 'B', 'B', 'B', 'B'];
   const headers = { Authorization: jwtToken };