From ff8c21364d14708b547b7ae71d62bfdd492b1b67 Mon Sep 17 00:00:00 2001
From: rivertw777 <105557972+rivertw777@users.noreply.github.com>
Date: Sat, 28 Dec 2024 01:25:49 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20=EC=9E=91=EC=97=85=EC=97=B4=20?=
 =?UTF-8?q?=EC=A7=84=EC=9E=85=20=ED=9B=84=20=EC=9D=BC=EC=A0=95=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A7=84=EC=9E=85?=
 =?UTF-8?q?=ED=95=98=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ticketping/src/component/QueueInfoModal.js | 63 +++++++++++-----------
 ticketping/src/pages/PerformanceDetail.js  |  2 +-
 2 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/ticketping/src/component/QueueInfoModal.js b/ticketping/src/component/QueueInfoModal.js
index 950b283..4427289 100644
--- a/ticketping/src/component/QueueInfoModal.js
+++ b/ticketping/src/component/QueueInfoModal.js
@@ -5,24 +5,29 @@ 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);
@@ -30,42 +35,38 @@ const QueueInfoModal = ({ visible, onClose, performanceId }) => {
   };
 
   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>
diff --git a/ticketping/src/pages/PerformanceDetail.js b/ticketping/src/pages/PerformanceDetail.js
index 2d2530b..84265e4 100644
--- a/ticketping/src/pages/PerformanceDetail.js
+++ b/ticketping/src/pages/PerformanceDetail.js
@@ -151,7 +151,7 @@ function PerformanceDetail() {
         <QueueInfoModal
           visible={isModalVisible}
           onClose={() => setIsModalVisible(false)}
-          performanceId={id}
+          performance={performance}
         />
       </div>
     </div>