timeInquiry.js

import React, { useState, useEffect } from 'react';
import timeInquiryStyles from './timeInquiry.module.css';
import CreateVote from './createVote';

//import MyScheduleApp from '../calendar/calendar';

function TimeItem({ item, setSelectedTimes }){
    const [isChecked, setIsChecked] = useState(false);

    const onChangeCheck = () => {
        if (!isChecked) {
            setSelectedTimes((prev) => [...prev, item]);
            setIsChecked((prev) => !prev);
        } else {
            setSelectedTimes((prev) =>
                prev.filter((data) => (
                    data.date !== item.date ||
                    data.startTime !== item.startTime ||
                    data.endTime !== item.endTime
                ))
            );
            setIsChecked((prev) => !prev);
        }
    };

    return(
        <li className={isChecked ? "checked" : " "}>
            <span>{item.date} {item.startTime}-{item.endTime}</span>
            <label>
                <input 
                    type='checkbox' 
                    onChange={onChangeCheck}
                    checked={isChecked}
                />
            </label>
        </li>
    );
}

function TimeInquiry({ isOpen, onClose, data }){
    const [inquirydata, setInquirydata] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [selectedTimes, setSelectedTimes] = useState([]);

    const optionsArray = Array.from({ length: 1441 / 30 }, (_, index) => index * 30 + 30);

    const [bodyData, setBodyData] = useState({
        startDate: '',
        endDate: '',
        startTime: '',
        endTime: '',
        interval: '30',
    });

    const [timeData, setTimeData] = useState({
        startHour: '',
        startMinute: '',
        endHour: '',
        endMinute: ''
    });      

    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setBodyData((prevData) => ({
            ...prevData,
            [name]: value,
        }));
    };

    const handleTimeChange = (e) => {