Feat[#18] 마이페이지 - 예약 현황 캘린더/리스트 구현

src/components/calendar/ArrowButton/ArrowButton.module.scss

@@ -0,0 +1,38 @@
+%btn-base {
+  @include inline-flexbox;
+
+  @include responsive(M) {
+    width: 3.2rem;
+    height: 3.2rem;
+  }
+
+  width: 4.8rem;
+  height: 4.8rem;
+  background-color: $black70;
+}
+
+.btn-arrow {
+  &-left {
+    @extend %btn-base;
+
+    border-right: 0.1rem solid $black50;
+    border-radius: 0.6rem 0 0 0.6rem;
+  }
+
+  &-right {
+    @extend %btn-base;
+
+    border-radius: 0 0.6rem 0.6rem 0;
+  }
+
+  &-icon {
+    @include responsive(M) {
+      width: 1.6rem;
+      height: 1.6rem;
+    }
+
+    position: relative;
+    width: 2.4rem;
+    height: 2.4rem;
+  }
+}

src/components/calendar/ArrowButton/index.tsx

@@ -0,0 +1,57 @@
+import Image from 'next/image';
+
+import classNames from 'classnames/bind';
+
+import { SVGS } from '@/constants';
+
+import useToggleButton from '@/hooks/useToggleButton';
+
+import styles from './ArrowButton.module.scss';
+
+const cx = classNames.bind(styles);
+
+const { default: leftDefault, active: leftActive } = SVGS.arrow.left;
+const { default: rightDefault, active: rightActive } = SVGS.arrow.right;
+
+type ArrowButtonProps = {
+  onClick: (addNumber: number) => void;
+};
+
+const ArrowButton = ({ onClick }: ArrowButtonProps) => {
+  const { isVisible: isLeftHovering, handleToggleClick: handleHoverLeft } = useToggleButton();
+  const { isVisible: isRightHovering, handleToggleClick: handleHoverRight } = useToggleButton();
+
+  const { url: leftUrl, alt: leftAlt } = isLeftHovering ? leftActive : leftDefault;
+  const { url: rightUrl, alt: rightAlt } = isRightHovering ? rightActive : rightDefault;
+
+  const handleLeftButtonClick = () => onClick(-1);
+
+  const handleRightButtonClick = () => onClick(1);
+
+  return (
+    <div>
+      <button
+        className={cx('btn-arrow-left')}
+        onMouseEnter={handleHoverLeft}
+        onMouseLeave={handleHoverLeft}
+        onClick={handleLeftButtonClick}
+      >
+        <div className={cx('btn-arrow-icon')}>
+          <Image src={leftUrl} alt={leftAlt} fill />
+        </div>
+      </button>
+      <button
+        className={cx('btn-arrow-right')}
+        onMouseEnter={handleHoverRight}
+        onMouseLeave={handleHoverRight}
+        onClick={handleRightButtonClick}
+      >
+        <div className={cx('btn-arrow-icon')}>
+          <Image src={rightUrl} alt={rightAlt} fill />
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default ArrowButton;

src/components/calendar/Calendar.module.scss

@@ -0,0 +1,4 @@
+.calendar-container {
+  border: 0.1rem solid $black50;
+  border-radius: 0.8rem;
+}

src/components/calendar/CalendarBody/CalendarBody.module.scss

@@ -0,0 +1,79 @@
+$calendar-item-column: 7;
+
+@mixin border-horizontal($direction, $color) {
+  @include pos-center-x;
+
+  @if $direction == 'top' {
+    top: 0;
+  }
+
+  @if $direction == 'bottom' {
+    bottom: 0;
+  }
+
+  content: '';
+  width: 13.8rem;
+  height: 0.1rem;
+  background-color: $color;
+}
+
+.calendar-body {
+  &-container {
+    @include text-style-quantico(16, $white, regular, normal);
+
+    padding: 1.6rem;
+  }
+
+  &-week {
+    @include flexbox;
+  }
+
+  &-day {
+    @include flexbox;
+
+    width: 15.4rem;
+    height: 3.2rem;
+
+    &.weekends {
+      color: $gray20;
+    }
+  }
+
+  &-dates {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-template-columns: repeat($calendar-item-column, 1fr);
+  }
+}
+
+.date-item {
+  position: relative;
+
+  &-button:not(.clickable) {
+    cursor: default;
+  }
+
+  &:nth-child(7n - 6) {
+    background-color: $black;
+  }
+
+  &:not(:nth-child(7n)) {
+    border-right: 0.1rem solid $black50;
+  }
+
+  &:not(:nth-child(n):nth-child(-n + 7)) {
+    &::after {
+      @include border-horizontal(top, $black50);
+    }
+  }
+
+  &.hover:hover {
+    &::before {
+      @include border-horizontal(bottom, $primary);
+    }
+
+    &::after {
+      @include border-horizontal(top, $primary);
+    }
+  }
+}

src/components/calendar/CalendarBody/index.tsx

@@ -0,0 +1,85 @@
+import classNames from 'classnames/bind';
+
+import { getCalendarDates, getDateRange, getJoinedDateString } from '@/utils';
+
+import CalendarItem from '@/components/calendar/CalendarItem';
+import { CALENDAR_WEEKS } from '@/constants/date';
+
+import { ReservationsByDate } from '@/types';
+
+import styles from './CalendarBody.module.scss';
+
+const cx = classNames.bind(styles);
+
+const START_OF_MONTH = 1;
+
+type CalendarBodyProps = {
+  today: {
+    year: number;
+    month: number;
+    date: number;
+  };
+  currentYear: number;
+  currentMonth: number;
+  schedules?: ReservationsByDate;
+  onClick: (date: string) => void;
+};
+
+const CalendarBody = ({ today, currentYear, currentMonth, schedules, onClick }: CalendarBodyProps) => {
+  const { startOfCalendar, endOfPrevMonth, endOfThisMonth, endOfCalendar } = getCalendarDates(
+    currentYear,
+    currentMonth,
+  );
+
+  const prevMonthDates = startOfCalendar !== START_OF_MONTH ? getDateRange(startOfCalendar, endOfPrevMonth) : [];
+  const thisMonthDates = getDateRange(START_OF_MONTH, endOfThisMonth);
+  const nextMonthDates = endOfCalendar !== endOfThisMonth ? getDateRange(START_OF_MONTH, endOfCalendar) : [];
+
+  const isToday = (date: number) => currentYear === today.year && currentMonth === today.month && date === today.date;
+
+  return (
+    <div className={cx('calendar-body-container')}>
+      <ul className={cx('calendar-body-week')}>
+        {CALENDAR_WEEKS.map((day) => {
+          const isWeekends = day === 'SUNDAY';
+
+          return (
+            <li className={cx('calendar-body-day', { weekends: isWeekends })} key={`day-${day}`}>
+              {day}
+            </li>
+          );
+        })}
+      </ul>
+      <ul className={cx('calendar-body-dates')}>
+        {prevMonthDates.map((date, index) => (
+          <li className={cx('date-item')} key={`date-prev-${index}`}>
+            <CalendarItem date={date} isDisabled />
+          </li>
+        ))}
+        {thisMonthDates.map((date, index) => {
+          const formattedDate = getJoinedDateString(currentYear, currentMonth, date);
+          const hasReservation = schedules?.[formattedDate] !== undefined;
+          const handleClick = () => {
+            if (!hasReservation) return;
+            onClick(formattedDate);
+          };
+
+          return (
+            <li className={cx('date-item', 'hover')} key={`date-${index}`}>
+              <button className={cx('date-item-button', { clickable: hasReservation })} onClick={handleClick}>
+                <CalendarItem date={date} isToday={isToday(date)} reservations={schedules?.[formattedDate]} />
+              </button>
+            </li>
+          );
+        })}
+        {nextMonthDates.map((date, index) => (
+          <li className={cx('date-item')} key={`date-next-${index}`}>
+            <CalendarItem date={date} isDisabled />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default CalendarBody;

src/components/calendar/CalendarHeader/CalendarHeader.module.scss

@@ -0,0 +1,32 @@
+.calendar-header {
+  &-container {
+    @include responsive(M) {
+      height: 5.6rem;
+      padding: 1.2rem 1.6rem;
+    }
+
+    @include flexbox(between);
+
+    height: 8rem;
+    padding: 1.6rem;
+    border-bottom: 0.1rem solid $black50;
+  }
+
+  &-date {
+    @include text-style-quantico(24);
+
+    @include responsive(M) {
+      @include text-style-quantico(20);
+    }
+  }
+
+  &-year {
+    color: $primary;
+  }
+}
+
+.arrow-area {
+  @include responsive(T) {
+    order: 1;
+  }
+}

src/components/calendar/CalendarHeader/index.tsx

@@ -0,0 +1,46 @@
+import { Dispatch, SetStateAction } from 'react';
+
+import classNames from 'classnames/bind';
+
+import { getMonthString } from '@/utils';
+
+import ArrowButton from '@/components/calendar/ArrowButton';
+import SwitchButton from '@/components/calendar/SwitchButton';
+
+import styles from './CalendarHeader.module.scss';
+
+const cx = classNames.bind(styles);
+
+type CalendarHeaderProps = {
+  currentYear: number;
+  currentMonth: number;
+  onChangeMonth: (addNumber: number) => void;
+  isCalendar: boolean;
+  setIsCalendar: Dispatch<SetStateAction<boolean>>;
+};
+
+const CalendarHeader = ({
+  currentYear,
+  currentMonth,
+  onChangeMonth,
+  isCalendar,
+  setIsCalendar,
+}: CalendarHeaderProps) => {
+  const handleSwitchClick = (isCalendar: boolean) => setIsCalendar(isCalendar);
+
+  return (
+    <div className={cx('calendar-header-container')}>
+      <div className={cx('arrow-area')}>
+        <ArrowButton onClick={onChangeMonth} />
+      </div>
+      <div className={cx('calendar-header-date')}>
+        {getMonthString(currentMonth)} <span className={cx('calendar-header-year')}>{currentYear}</span>
+      </div>
+      <div className={cx('lg-only')}>
+        <SwitchButton isCalendar={isCalendar} onClick={handleSwitchClick} />
+      </div>
+    </div>
+  );
+};
+
+export default CalendarHeader;