mainAside.js

import React, { useState, useEffect, useContext } from 'react';
import styles from './mainAside.module.css';
import { AppContext } from '../pages/main';

function NextSchedule(props) {
    const { nextSchedules } = props.data;

    if (!nextSchedules || !Array.isArray(nextSchedules) || nextSchedules.length === 0) {
        return <p className={styles.noContent}>다음 일정이 없습니다.</p>;
    }
    console.log('ns:', !nextSchedules, !Array.isArray(nextSchedules));
    const sortedSchedules = nextSchedules.slice().sort((a, b) => {
       return a.startTime.localeCompare(b.startTime);
    });
    const nextComponents = sortedSchedules.map((nextSchedule) => (
        <p className={styles.nextContent}>
            <span className={styles.title}>{nextSchedule.title}</span>
            <span className={styles.time}>{nextSchedule.startTime}-{nextSchedule.endTime}</span>
        </p>
    ));  

    return (
      <div>
        {nextComponents}
      </div>
    );
  };  

function Notice(props){
    const { subscribeNotices } = props.data;

    if (!subscribeNotices || !Array.isArray(subscribeNotices) || subscribeNotices.length === 0) {
        return <p className={styles.noContent}>최근 공지가 없습니다.</p>;
    }

    const sortedNotice = subscribeNotices.sort((a, b) => a.date - b.date);
    const noticeComponents = sortedNotice.map((notice) => (
        <p className={styles.noticeContent}>
            <span className={styles.channel}>{notice.channelNickname}</span>
            <span className={styles.noticeTitle}>{notice.title}</span>
            <span className={styles.content}>{notice.content}</span>
        </p>
    ));
    
    return (
        <div>
          {noticeComponents}
        </div>
    );
}

function Schedule(){
    const [fulldata, setFulldata] = useState(null);
    const { count } = useContext(AppContext);

    const getFulldata = async ()=>{
        try{
            const response = await fetch('/api/schedules');
            
            if (response.status === 200){
                const jsonData = await response.json();
                setFulldata(jsonData);
            }else{
                throw new Error('Data loading error');
            }

        } catch(error){
            console.log('Error during fetch:', error);
        }
    }

    useEffect(() => {
        getFulldata();
      }, [count]);

    return (
       <div className={styles.aside_container}>
            <div className={styles.header}>
                <span className={styles.sign}>다음 일정</span>
            </div>
            <div className={styles.nextSchedule}>
                <NextSchedule data={fulldata || {}}/>
            </div>

            <div className={styles.header}>
                <span className={styles.sign}>최근 공지</span>
            </div>
            <div className={styles.notice}>
                <Notice data={fulldata || {}}/>
            </div>
        </div>
    )
}

export default Schedule;