Fix MonthView bug: allow correct navigation to and date selection in …

…other months
TEAM-WHEN-WILL-WE-MEET · Sep 15, 2024 · 7ec978e · 7ec978e
1 parent 3d21e53
commit 7ec978e
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 13 deletions.
diff --git a/src/components/TimePicker.css b/src/components/TimePicker.css
@@ -31,7 +31,7 @@
   }
   .time-range.disabled {
     pointer-events: none; /* 클릭을 막음 */
-    background-color: #fafafa;
+    background-color: #fafafa !important;
 
   }
 
@@ -53,7 +53,9 @@
     /* width:230px; */
     padding: 14px 21px;
   }
-
+  .time-button.disabled{
+
+  }
 /* 기본 토글 컨테이너 */
 .all-day-toggle {
     display: flex;

diff --git a/src/pages/MonthView.css b/src/pages/MonthView.css
@@ -181,7 +181,7 @@
   display: grid;
   grid-template-columns: repeat(7, 1fr) !important; /* 7열 그리드 설정, 각 열의 너비가 동일함 */
   gap: 0px; /* 타일 간의 간격을 설정할 수 있음 */
-  
+
 
 }
 .react-calendar--doubleView {
@@ -274,6 +274,8 @@
     min-height: 45px;
     margin-left:4px;
     padding: 0;
+    transition: background-color 0.3s ease;
+
 } 
 .react-calendar__tile:hover{
   cursor: pointer;

diff --git a/src/pages/MonthView.js b/src/pages/MonthView.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef  } from 'react';
 import Calendar from 'react-calendar';
 import './MonthView.css'; 
 import moment from "moment";
@@ -23,10 +23,11 @@ const MonthView = () => {
     setIsFocused(false);
   };
 
+  //타일 클릭시, 해당 날 반환
   const handleDateChange = (date) => {
     const dateString = moment(date).format("YYYY-MM-DD");
     const monthKey = moment(calendarDate).format("YYYY-MM");
-
+    console.log(date);
     // 현재 달의 선택된 날짜를 저장
     setSavedDates(prevSavedDates => {
       const currentMonthDates = prevSavedDates[monthKey] || [];
@@ -69,32 +70,83 @@ const MonthView = () => {
     setSelectedDates(savedDates[currentMonthKey] || []); // 새로운 달로 이동할 때 해당 달의 선택된 날짜를 불러옴
   }, [calendarDate, savedDates]);
 
+  //드롭다운에서 월(1-12) 선택
   const handleMonthChange = (e) => {
-    const currentMonthKey = moment(calendarDate).format("YYYY-MM");
-
+
     // 현재 달의 선택된 날짜들을 저장
+    const currentMonthKey = moment(calendarDate).format("YYYY-MM");
+    console.log(currentMonthKey);
+    // 현재 무슨달인지 console.log에 출력
     if (selectedDates.length > 0) {
       setSavedDates(prevSavedDates => ({
         ...prevSavedDates,
         [currentMonthKey]: selectedDates,
       }));
+      console.log("현재 선택된 날짜: "+selectedDates);
+      //새로운 달로 이동하기전에 현재달에서 무슨무슨 날 선택된건지 출력
     }
 
     // 새로운 달로 이동
-    const newMonth = parseInt(e.target.value, 10) - 1;
+    const newMonth = parseInt(e.target.value, 10)-1;
     setSelectedMonth(e.target.value);
+    console.log(newMonth);
+    //무슨 달로 이동한건지 출력
     const newDate = new Date(calendarDate.getFullYear(), newMonth, 1);
     setCalendarDate(newDate);
-
+    console.log(newDate);
+    console.log(calendarDate);
     // 새로운 달로 이동할 때 이전 선택 상태를 불러옴
     const newMonthKey = moment(newDate).format("YYYY-MM");
-    setSelectedDates(savedDates[newMonthKey] || []); 
+    setSelectedDates(savedDates[newMonthKey] || []);
+
   };
 
+  //타일 비활성화 조건->true일때
   const tileDisabled = ({ date, view }) => {
-    return view === 'month' && date.getMonth() !== calendarDate.getMonth();
+    // console.log(date+"랄ㄹ라"); //Sat Oct 05 2024 00:00:00 GMT+0900 (한국 표준시) 이런식
+    // console.log(view+"룰루"); //month
+    // console.log(date.getMonth()+"dddddd"); //9
+    // console.log("ㅇㅇㅇㅇ"+calendarDate.getMonth()); //8???
+    // return view === 'month' && date.getMonth() !== calendarDate.getMonth();
+    // return true;
+    return false; //임시 반환값
+    //return 현재달(맨처음 클릭한달?) =< 지금 클릭한 달 숫자일때만 false반환
   };
 
+  // const DatePicker = ({ activeStartDate }) => {
+  //   const [startDate, setStartDate] = useState(activeStartDate);
+  //   const refCalendarContainer = useRef(null);
+
+  //   const handleNavigationClick = () => {
+  //     const refNode = refCalendarContainer.current;
+  //     const currentCalendarView = refNode.querySelector('.react-calendar__view');
+  //     const activeMonth = new Date(currentCalendarView?.dataset?.activeStartDate || new Date());
+  //     setStartDate(activeMonth);
+  //   };
+
+  //   useEffect(() => {
+  //     if (activeStartDate instanceof Date) {
+  //       setStartDate(activeStartDate);
+  //     }
+  //   }, [activeStartDate]);
+
+  //   useEffect(() => {
+  //     const refNode = refCalendarContainer.current;
+  //     const navigationButtons = refNode.querySelectorAll('.react-calendar__navigation__arrow');
+
+  //     navigationButtons.forEach(button => {
+  //       button.addEventListener('click', handleNavigationClick);
+  //     });
+
+  //     return () => {
+  //       navigationButtons.forEach(button => {
+  //         button.removeEventListener('click', handleNavigationClick);
+  //       });
+  //     };
+  //   }, []);
+
+
+
   return (
     <div className="main-container">
       <div className="tab"></div>
@@ -128,16 +180,18 @@ const MonthView = () => {
           </select>
         </div>
       </div>
+      {/* <div className="calendar" ref={refCalendarContainer}> */}
       <div className="calendar">
-        <Calendar 
-          value={calendarDate}
+        <Calendar
+          activeStartDate={calendarDate} 
           locale="ko-KR"
           calendarType="gregory"
           onClickDay={handleDateChange}
           tileClassName={tileClassName}
           formatDay={(locale, date) => moment(date).format("DD")}
           showNeighboringMonth={true}
           tileDisabled={tileDisabled}
+          // activeStartDate={startDate}
         /> 
       </div>
     </div>