[feat] 일정 선택 페이지 구현

ticketping/package.json

@@ -7,6 +7,7 @@
     "axios": "^1.7.9",
     "axios-hooks": "^5.0.2",
     "cra-template": "1.2.0",
+    "dayjs": "^1.11.13",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.28.0",

ticketping/src/component/EnterQueue.js

@@ -11,11 +11,14 @@ export const useEnterQueue = (setIsModalVisible) => {
 
   const enterQueue = async (performanceId) => {
     try { 
-      await axiosInstance.get(`/api/v1/waiting-queue?performanceId=${performanceId}`, { headers });
-
-      // 이미 대기열에 있는 인원
-      setIsModalVisible(true); 
+      const response = await axiosInstance.get(`/api/v1/waiting-queue?performanceId=${performanceId}`, { headers });
+      const tokenStatus = response.data.data.tokenStatus;
 
+      if (tokenStatus === "WAITING") {
+        setIsModalVisible(true); 
+      } else if (tokenStatus === "WORKING") {
+        navigate(`/performance/${performanceId}/schedule`);
+      }
     } catch (error) {
 
       // 대기열에 없는 인원

ticketping/src/component/QueueInfoModal.js

@@ -17,14 +17,11 @@ const QueueInfoModal = ({ visible, onClose, performanceId }) => {
   const fetchQueueInfo = async () => {
     try {
       const response = await axiosInstance.get(`/api/v1/waiting-queue?performanceId=${performanceId}`, { headers });
-
-      console.log(response);
-
       setTokenStatus(response.data.data.tokenStatus);
       setPosition(response.data.data.position);
       setTotalUsers(response.data.data.totalUsers);
 
-      if (response.data.data.tokenStatus === "WORKING") {
+      if (tokenStatus === "WORKING") {
         navigate(`/performance/${performanceId}/schedule`);
       }
     } catch (error) {

ticketping/src/pages/SelectSchedule.js

@@ -1,5 +1,114 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { axiosInstance } from "../api";
+import { useAppContext } from "../store";
+import { Calendar, Button } from 'antd';
+import dayjs from 'dayjs';
+import "../style/SelectSchedule.css";
 
 export default function SelectSchedule() {
-  return <p>일정 선택 페이지</p>;
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { store: { jwtToken } } = useAppContext();
+  const headers = { Authorization: jwtToken };
+
+  const [schedules, setSchedules] = useState([]);
+  const [selectedDateId, setSelectedDateId] = useState(null);
+
+  useEffect(() => {
+    const fetchSchedules = async () => {
+      try {
+        const response = await axiosInstance.get(`/api/v1/performances/${id}/schedules`, { headers });
+        setSchedules(response.data.data.content);
+      } catch (err) {
+
+      } 
+    };
+
+    fetchSchedules();
+  }, [id, headers]);
+
+  const disabledDate = (current) => {
+    const hasSchedule = schedules.some(schedule => schedule.startTime.startsWith(current.format('YYYY-MM-DD')));
+    return !hasSchedule; 
+  };
+
+  const monthCellRender = (value) => {
+    const month = value.month();
+    const year = value.year();
+
+    const daysWithSchedules = schedules
+      .filter(schedule => {
+        const scheduleDate = dayjs(schedule.startTime);
+        return (
+          scheduleDate.year() === year &&
+          scheduleDate.month() === month
+        );
+      })
+      .map(schedule => schedule.date());
+
+    return (
+      <div className="dates">
+        {daysWithSchedules.length > 0 && daysWithSchedules.map((currentDay) => (
+          <div key={currentDay} className="day has-schedule">
+            {currentDay}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const headerRender = ({ value, onChange }) => {
+    return (
+      <div className="calendar-header">
+        <span>{dayjs(value).format('MMMM YYYY')}</span>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <a onClick={() => onChange(value.subtract(1, 'month'))}>&lt;</a>
+          <a onClick={() => onChange(value.add(1, 'month'))}>&gt;</a>
+        </div>
+      </div>
+    );
+  };
+
+  const handleDateSelect = () => {
+    if (selectedDateId) {
+      console.log(`공연 id: ${id}`);
+      console.log(`선택된 스케줄 id: ${selectedDateId}`);
+
+      // 좌석 선점 페이지 이동
+      navigate('/'); 
+    } else {
+
+    }
+  };
+
+  const onDateSelect = (date) => {
+    const schedule = schedules.find(schedule => schedule.startTime.startsWith(date.format('YYYY-MM-DD')));
+    if (schedule) {
+      setSelectedDateId(schedule.id);
+    }
+  };
+
+  return (
+    <div className="container">
+      <h1>일정 선택</h1>
+      <div className="calendar-container">
+        <Calendar 
+          disabledDate={disabledDate} 
+          monthCellRender={monthCellRender} 
+          headerRender={headerRender} 
+          fullscreen={false}
+          onSelect={onDateSelect} 
+        />
+      </div>
+      <div className="button-container">
+        <Button 
+          onClick={handleDateSelect} 
+          style={{ width: '15%', height: '50%' }}
+        >
+          선택
+        </Button>
+      </div>
+    </div>
+  );
 }

ticketping/src/style/AppLayout.css

@@ -12,15 +12,17 @@
     display: flex;
     justify-content: space-between; 
     align-items: center; 
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.1); 
     border-bottom: 1px solid white;
+    position: relative; 
 }
 
 .page-title {
     margin-right: auto; 
     font-family: 'Poppins', sans-serif; 
     display: flex;
     align-items: center; 
+    margin-top: 17px;
 }
 
 .topnav {

ticketping/src/style/SelectSchedule.css

@@ -0,0 +1,55 @@
+.container {
+  max-width: 800px; 
+  margin: 0 auto; 
+  padding: 20px;
+  background-color: #f9f9f9; 
+  border-radius: 10px; 
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
+}
+
+h1 {
+  text-align: center; 
+  color: #333; 
+  margin-top: 0px;
+  margin-bottom: 24px; 
+}
+
+.calendar-container {
+  background-color: white; 
+  border-radius: 10px; 
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
+  padding: 20px; 
+}
+
+.dates {
+  display: flex; 
+  flex-wrap: wrap; 
+}
+
+.day {
+  display: inline-block;
+  width: 30px; 
+  text-align: center;
+  margin: 2px;
+  font-size: 18px; 
+}
+
+.calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 18px; 
+  margin-bottom: 10px;
+}
+
+.calendar-header a {
+  cursor: pointer; 
+  margin: 0 10px; 
+}
+
+.button-container {
+  display: flex;
+  justify-content: center; 
+  margin-top: 20px;
+  margin-bottom: -10px
+}