const holidays = [ [1, 1], // New Year's Day [3, 1], // Independence Movement Day [5, 5], // Children's Day [6, 6], // Memorial Day [8, 15], // Liberation Day [10, 3], // National Foundation Day [12, 25], // Christmas ]; const Calendar = () => { // //const [currentYear, setCurrentYear] = useState(new Date().getFullYear()); // const [currentMonth, setCurrentMonth] = useState(new Date().getMonth()); // const [notes, setNotes] = useState({}); State.init({ currentYear: new Date().getFullYear(), currentMonth: new Date().getMonth(), notes: {} }); const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate(); const firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay(); const createCalendar = () => { const calendar = []; for (let i = 0; i < firstDayOfWeek; i++) { calendar.push(<div key={`empty-${i}`} className="day"></div>); } for (let day = 1; day <= daysInMonth; day++) { const currentDate = new Date(currentYear, currentMonth, day); const dayOfWeek = currentDate.getDay(); let dayClasses = 'day'; if (dayOfWeek === 0) { dayClasses += ' sunday'; } else if (dayOfWeek === 6) { dayClasses += ' saturday'; } for (const holiday of holidays) { if (currentMonth === holiday[0] - 1 && day === holiday[1]) { dayClasses += ' holiday'; break; } } if (notes[`${currentYear}-${currentMonth + 1}-${day}`]) { dayClasses += ' active'; } calendar.push( <div key={`day-${day}`} className={dayClasses} onClick={() => openNoteInput(currentYear, currentMonth, day)} > {day} </div> ); } return calendar; }; const openNoteInput = (year, month, day) => { const existingNote = notes[`${year}-${month + 1}-${day}`] || ''; const noteInput = prompt(`Enter note for ${year}-${month + 1}-${day}:`, existingNote); if (noteInput !== null) { // setNotes(prevNotes => ({ // ...prevNotes, // [`${year}-${month + 1}-${day}`]: noteInput, // })); State.update({notes:prevNotes => ({ ...prevNotes, [`${year}-${month + 1}-${day}`]: noteInput, })}); } }; const goToPrevMonth = () => { setCurrentMonth(prevMonth => { if (prevMonth === 0) { // setCurrentYear(year => year - 1); // return 11; State.update({currentYear:year => year - 1}); } return prevMonth - 1; }); }; const goToNextMonth = () => { setCurrentMonth(prevMonth => { if (prevMonth === 11) { // setCurrentYear(year => year + 1); State.update({currentYear:year => year + 1}); return 0; } return prevMonth + 1; }); }; return ( <div className="calendar"> <div className="nav-buttons"> <div className="nav-button" onClick={goToPrevMonth}>← 이전 월</div> <div className="nav-button" onClick={goToNextMonth}>다음 월 →</div> </div> <div className="month-title">{currentYear}년 {currentMonth + 1}월</div> <div className="weekdays"> {["일", "월", "화", "수", "목", "금", "토"].map(day => ( <div key={day} className="weekday">{day}</div> ))} </div> <div className="days"> {createCalendar()} </div> </div> ); }; return Calendar();