feat: 캘린더/리스트 클릭 이벤트 추가 - 클릭한 날짜 반환

sprint-team3 · Mar 27, 2024 · 6825a8f · 6825a8f
1 parent 4fa393b
commit 6825a8f
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 32 deletions.
diff --git a/src/components/calendar/CalendarBody/CalendarBody.module.scss b/src/components/calendar/CalendarBody/CalendarBody.module.scss
@@ -49,6 +49,10 @@ $item-column: 7;
 .date-item {
   position: relative;
 
+  &.clickable {
+    cursor: pointer;
+  }
+
   &:not(:nth-child(7n)) {
     border-right: 0.1rem solid $black50;
   }

diff --git a/src/components/calendar/CalendarBody/index.tsx b/src/components/calendar/CalendarBody/index.tsx
@@ -23,9 +23,10 @@ type CalendarBodyProps = {
   currentYear: number;
   currentMonth: number;
   schedules?: ReservationsByDate;
+  onClick: (date: string) => void;
 };
 
-const CalendarBody = ({ today, currentYear, currentMonth, schedules }: CalendarBodyProps) => {
+const CalendarBody = ({ today, currentYear, currentMonth, schedules, onClick }: CalendarBodyProps) => {
   const { startOfCalendar, endOfPrevMonth, endOfThisMonth, endOfCalendar } = getCalendarDates(
     currentYear,
     currentMonth,
@@ -58,9 +59,19 @@ const CalendarBody = ({ today, currentYear, currentMonth, schedules }: CalendarB
         ))}
         {thisMonthDates.map((date, index) => {
           const formattedDate = getJoinedDateString(currentYear, currentMonth, date);
+          const hasReservation = schedules?.[formattedDate] !== undefined;
+          const handleClick = () => {
+            if (!hasReservation) return;
+            onClick(formattedDate);
+          };
 
           return (
-            <div className={cx('date-item', 'hover')} key={`date-${index}`}>
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+            <div
+              className={cx('date-item', 'hover', { clickable: hasReservation })}
+              key={`date-${index}`}
+              onClick={handleClick}
+            >
               <CalendarItem date={date} isToday={isToday(date)} reservations={schedules?.[formattedDate]} />
             </div>
           );

diff --git a/src/components/calendar/CalendarItem/CalendarItem.module.scss b/src/components/calendar/CalendarItem/CalendarItem.module.scss
@@ -13,10 +13,6 @@ $item-size: 15.4rem;
       color: $gray40;
     }
 
-    &.clickable {
-      cursor: pointer;
-    }
-
     &:hover:not(.disabled) {
       color: $black80;
 

diff --git a/src/components/calendar/CalendarItem/index.tsx b/src/components/calendar/CalendarItem/index.tsx
@@ -16,25 +16,21 @@ type CalendarItemProps = {
   reservations?: MonthlyReservationCount;
 };
 
-const CalendarItem = ({ date, isToday, isDisabled, reservations }: CalendarItemProps) => {
-  const hasReservation = reservations !== undefined;
-
-  return (
-    <div className={cx('calendar-item', { disabled: isDisabled }, { clickable: hasReservation })}>
-      <div className={cx('calendar-number-area')}>
-        <span className={cx('calendar-number', { today: isToday })}>{date}</span>
-      </div>
-      <ul className={cx('calendar-badge-area')}>
-        {SCHEDULE_ORDER.map((status) =>
-          reservations?.[status] ? (
-            <li key={`badge-${status}`}>
-              <ScheduleBadge type={status} count={reservations[status]} />
-            </li>
-          ) : undefined,
-        )}
-      </ul>
+const CalendarItem = ({ date, isToday, isDisabled, reservations }: CalendarItemProps) => (
+  <div className={cx('calendar-item', { disabled: isDisabled })}>
+    <div className={cx('calendar-number-area')}>
+      <span className={cx('calendar-number', { today: isToday })}>{date}</span>
     </div>
-  );
-};
+    <ul className={cx('calendar-badge-area')}>
+      {SCHEDULE_ORDER.map((status) =>
+        reservations?.[status] ? (
+          <li key={`badge-${status}`}>
+            <ScheduleBadge type={status} count={reservations[status]} />
+          </li>
+        ) : undefined,
+      )}
+    </ul>
+  </div>
+);
 
 export default CalendarItem;
diff --git a/src/components/calendar/ListBody/index.tsx b/src/components/calendar/ListBody/index.tsx
@@ -10,16 +10,22 @@ const cx = classNames.bind(styles);
 
 type ListBodyProps = {
   schedules?: MonthlySchedule[];
+  onClick: (date: string) => void;
 };
 
-const ListBody = ({ schedules }: ListBodyProps) => {
+const ListBody = ({ schedules, onClick }: ListBodyProps) => {
   return (
     <ul>
-      {schedules?.map(({ date, reservations }) => (
-        <li className={cx('card-container')} key={`schedule-${date}`}>
-          <ListCard date={date} reservations={reservations} />
-        </li>
-      ))}
+      {schedules?.map(({ date, reservations }) => {
+        const handleClick = () => onClick(date);
+
+        return (
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+          <li className={cx('card-container')} key={`schedule-${date}`} onClick={handleClick}>
+            <ListCard date={date} reservations={reservations} />
+          </li>
+        );
+      })}
     </ul>
   );
 };

diff --git a/src/components/calendar/ModalContents/ModalContents.module.scss b/src/components/calendar/ModalContents/ModalContents.module.scss
diff --git a/src/components/calendar/ModalContents/index.tsx b/src/components/calendar/ModalContents/index.tsx
@@ -0,0 +1,11 @@
+import classNames from 'classnames/bind';
+
+import styles from './ModalContents.module.scss';
+
+const cx = classNames.bind(styles);
+
+const ModalContents = () => {
+  return <div className={cx('')}>ModalContents</div>;
+};
+
+export default ModalContents;
diff --git a/src/components/calendar/index.tsx b/src/components/calendar/index.tsx
@@ -47,6 +47,7 @@ const Calendar = ({ gameId }: CalendarProps) => {
   const [currentYear, setCurrentYear] = useState(today.year);
   const [currentMonth, setCurrentMonth] = useState(today.month);
   const [monthlySchedule, setMonthlySchedule] = useState<MonthlySchedule[]>([]);
+  const [activeDate, setActiveDate] = useState('');
 
   const currentDeviceType = useDeviceType();
 
@@ -64,6 +65,10 @@ const Calendar = ({ gameId }: CalendarProps) => {
     setCurrentMonth(newMonth);
   };
 
+  const handleScheduleClick = (date: string) => {
+    setActiveDate(date);
+  };
+
   useEffect(() => {
     if (currentDeviceType !== 'PC') setIsCalendar(false);
   }, [currentDeviceType]);
@@ -75,6 +80,7 @@ const Calendar = ({ gameId }: CalendarProps) => {
   }, [currentYear, currentMonth]);
 
   console.log(gameId);
+  console.log(activeDate);
 
   return (
     <div className={cx('calendar-container')}>
@@ -91,9 +97,10 @@ const Calendar = ({ gameId }: CalendarProps) => {
           currentYear={currentYear}
           currentMonth={currentMonth}
           schedules={scheduleListToObjectByDate(monthlySchedule)}
+          onClick={handleScheduleClick}
         />
       ) : (
-        <ListBody schedules={monthlySchedule} />
+        <ListBody schedules={monthlySchedule} onClick={handleScheduleClick} />
       )}
     </div>
   );