[feat] 작업열 진입 후 일정 선택 페이지 진입하게 수정

ticketping/src/component/QueueInfoModal.js

@@ -5,67 +5,68 @@ import { axiosInstance } from "../api";
 import { useNavigate } from "react-router-dom";
 import "../style/QueueInfoModal.css";
 
-const QueueInfoModal = ({ visible, onClose, performanceId }) => {
+const QueueInfoModal = ({ visible, onClose, performance }) => {
   const navigate = useNavigate();
   const { store: { jwtToken } } = useAppContext();
   const headers = { Authorization: jwtToken };
 
-  const [tokenStatus, setTokenStatus] = useState(null); 
-  const [position, setPosition] = useState(0);
-  const [totalUsers, setTotalUsers] = useState(0);
+  const [queueData, setQueueData] = useState({
+    tokenStatus: null,
+    position: 0,
+    totalUsers: 0
+  });
 
   const fetchQueueInfo = async () => {
     try {
-      const response = await axiosInstance.get(`/api/v1/waiting-queue?performanceId=${performanceId}`, { headers });
-      setTokenStatus(response.data.data.tokenStatus);
-      setPosition(response.data.data.position);
-      setTotalUsers(response.data.data.totalUsers);
+      const response = await axiosInstance.get(
+        `/api/v1/waiting-queue?performanceId=${performance.id}`,
+        { headers }
+      );
 
-      if (tokenStatus === "WORKING") {
-        navigate(`/performance/${performanceId}/schedule`);
+      const newData = response.data.data;
+      setQueueData(newData);
+
+      if (newData.tokenStatus === "WORKING") {
+        navigate(`/performance/${performance.id}/schedule`, { state: { performance } });
       }
     } catch (error) {
       console.error("대기열 정보 요청 중 오류 발생:", error);
     }
   };
 
   useEffect(() => {
-    if (visible) { 
-      fetchQueueInfo(); 
-
-      const intervalId = setInterval(fetchQueueInfo, 3000); // 3초 주기 Polling
-
-      return () => clearInterval(intervalId); 
+    if (visible) {
+      fetchQueueInfo();
+      const intervalId = setInterval(fetchQueueInfo, 3000);
+      return () => clearInterval(intervalId);
     }
-  }, [visible]); 
+  }, [visible, performance, navigate]);
 
-  const progressPercentage = totalUsers > 0 ? ((totalUsers - position) / totalUsers * 100).toFixed(1) : 0;
+  const progressPercentage = queueData.totalUsers > 0 
+    ? ((queueData.totalUsers - queueData.position) / queueData.totalUsers * 100).toFixed(1) 
+    : 0;
 
   return (
     <Modal
       open={visible}
-      footer={null} 
-      closable={false} 
+      footer={null}
+      closable={false}
       styles={{ mask: { backgroundColor: 'rgba(0, 0, 0, 0.90)' } }}
     >
       <div className="queue-entry-modal-content">
         <h3 className="waiting-message">티켓 예매를 위해 접속 대기중입니다.</h3>
-
-        <h1 className="queue-number">나의 대기 순번: {position}</h1>
-
-        <Progress 
-          percent={progressPercentage} 
-          status="active" 
-          strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }} 
+        <h1 className="queue-number">나의 대기 순번: {queueData.position}</h1>
+        <Progress
+          percent={progressPercentage}
+          status="active"
+          strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
           style={{ marginBottom: '16px' }}
         />
-
         <h1 className="waiting-message">
-          현재 <span style={{ color: '#4A90E2' }}>{totalUsers}</span>명 중 <span style={{ color: '#4A90E2' }}>{position}</span>번째로 대기 중입니다.
+          현재 <span style={{ color: '#4A90E2' }}>{queueData.totalUsers}</span>명 중{' '}
+          <span style={{ color: '#4A90E2' }}>{queueData.position}</span>번째로 대기 중입니다.
         </h1>
-
         <div className="modal-divider"></div>
-
         <p>현재 접속량이 많아 대기 중입니다.</p>
         <p>잠시만 기다려 주시면 예매 페이지로 연결됩니다.</p>
       </div>

ticketping/src/pages/PerformanceDetail.js

@@ -151,7 +151,7 @@ function PerformanceDetail() {
         <QueueInfoModal
           visible={isModalVisible}
           onClose={() => setIsModalVisible(false)}
-          performanceId={id}
+          performance={performance}
         />
       </div>
     </div>