Feat[#99] 마이페이지/예약현황 모달창 구현

src/components/calendar/ListBody/index.tsx

@@ -3,14 +3,14 @@ import classNames from 'classnames/bind';
 import ListCard from '@/components/calendar/ListCard';
 import EmptyCard from '@/components/layout/empty/EmptyCard';
 
-import { MonthlySchedule } from '@/types';
+import { MonthlyReservationResponse } from '@/types';
 
 import styles from './ListBody.module.scss';
 
 const cx = classNames.bind(styles);
 
 type ListBodyProps = {
-  schedules?: MonthlySchedule[];
+  schedules?: MonthlyReservationResponse[];
   onClick: (date: string) => void;
 };
 

src/components/calendar/ModalCard/ModalCard.module.scss

@@ -0,0 +1,32 @@
+.modal-card {
+  &-container {
+    @include column-flexbox(start, stretch, 0.8rem);
+
+    padding: 1.2rem;
+    background-color: $black80;
+    border-radius: 0.8rem;
+  }
+
+  &-text {
+    @include column-flexbox(start, stretch, 0.4rem);
+
+    &-line {
+      @include flexbox(start, center, 0.8rem);
+    }
+
+    &-title {
+      @include text-style(14, $gray30);
+
+      display: inline-block;
+      width: 4rem;
+    }
+
+    &-value {
+      @include text-style(14, $white);
+    }
+  }
+
+  &-button {
+    @include flexbox(end, center, 0.8rem);
+  }
+}

src/components/calendar/ModalCard/index.tsx

@@ -0,0 +1,52 @@
+import { Fragment } from 'react';
+
+import classNames from 'classnames/bind';
+
+import Badge from '@/components/commons/Badge';
+import { BaseButton } from '@/components/commons/buttons';
+
+import { MyReservationsStatus } from '@/types';
+
+import styles from './ModalCard.module.scss';
+
+const cx = classNames.bind(styles);
+
+type ModalCardProps = {
+  nickName: string;
+  headCount: number;
+  status: MyReservationsStatus;
+  onClickButton: (text: string) => void;
+};
+
+const ModalCard = ({ nickName, headCount, status, onClickButton }: ModalCardProps) => {
+  return (
+    <div className={cx('modal-card-container')}>
+      <div className={cx('modal-card-text')}>
+        <div className={cx('modal-card-text-line')}>
+          <span className={cx('modal-card-text-title')}>닉네임</span>
+          <span className={cx('modal-card-text-value')}>{nickName}</span>
+        </div>
+        <div className={cx('modal-card-text-line')}>
+          <span className={cx('modal-card-text-title')}>인원</span>
+          <span className={cx('modal-card-text-value')}>{headCount}명</span>
+        </div>
+      </div>
+      <div className={cx('modal-card-button')}>
+        {status === 'pending' ? (
+          <Fragment>
+            <BaseButton theme='outline' size='small' onClick={() => onClickButton('거절')}>
+              거절
+            </BaseButton>
+            <BaseButton theme='ghost' size='small' onClick={() => onClickButton('승인')}>
+              승인
+            </BaseButton>
+          </Fragment>
+        ) : (
+          <Badge status={status} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ModalCard;

src/components/calendar/ModalContents/ModalContents.module.scss

@@ -0,0 +1,72 @@
+.schedule-modal {
+  &-container {
+    @include column-flexbox(start, stretch, 1.6rem);
+
+    @include responsive(T) {
+      justify-content: space-between;
+      height: 100%;
+    }
+  }
+
+  &-date {
+    @include column-flexbox(start, stretch, 0.8rem);
+
+    &-title {
+      @include text-style(16, $white, bold);
+    }
+
+    &-korean {
+      @include text-style(14, $gray10);
+    }
+  }
+
+  &-reservation {
+    @include column-flexbox(start, stretch, 0.8rem);
+
+    @include responsive(T) {
+      flex-grow: 1;
+    }
+
+    &-title {
+      @include flexbox(start, center, 0.4rem);
+      @include text-style(16, $white, bold);
+    }
+
+    &-count {
+      @include text-style(14, $primary, bold);
+    }
+
+    &-card {
+      @include column-flexbox(start, stretch, 0.8rem);
+
+      overflow-y: auto;
+      max-height: 23.2rem;
+
+      &::-webkit-scrollbar {
+        width: 0.6rem;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: $opacity-white-5;
+        border-radius: 9.9rem;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: $gray10;
+        border-radius: 9.9rem;
+      }
+
+      &.scroll {
+        padding-right: 0.8rem;
+      }
+    }
+  }
+
+  &-close {
+    @include responsive(T) {
+      margin: 0;
+    }
+
+    margin: 0 auto;
+  }
+}

src/components/calendar/ModalContents/index.tsx

@@ -1,11 +1,112 @@
+import { MouseEventHandler, useState } from 'react';
+
 import classNames from 'classnames/bind';
 
+import { getDateStringKR, getScheduleDropdownOption, getStatusCountByScheduleId } from '@/utils';
+
+import ModalCard from '@/components/calendar/ModalCard';
+import { BaseButton } from '@/components/commons/buttons';
+import Dropdown from '@/components/commons/Dropdown';
+import Tab from '@/components/commons/Tab';
+import EmptyCard from '@/components/layout/empty/EmptyCard';
+import reservationDetailMockDataConfirmed from '@/constants/mockData/reservationDetailMockDataConfirmed.json';
+import reservationDetailMockDataDeclined from '@/constants/mockData/reservationDetailMockDataDeclined.json';
+import reservationDetailMockDataPending from '@/constants/mockData/reservationDetailMockDataPending.json';
+import reservationDetailMockDataPendingNoData from '@/constants/mockData/reservationDetailMockDataPendingNoData.json';
+import DailyScheduleMockData from '@/constants/mockData/reservedScheduleMockData.json';
+import { useDeviceType } from '@/hooks/useDeviceType';
+
+import { DailyReservationResponse, DetailReservationResponse, MyReservationsStatus, StatusTabOptions } from '@/types';
+
 import styles from './ModalContents.module.scss';
 
 const cx = classNames.bind(styles);
 
-const ModalContents = () => {
-  return <div className={cx('')}>ModalContents</div>;
+type ModalContentsProps = {
+  gameId: number;
+  activeDate: string;
+  onClickCloseButton: MouseEventHandler<HTMLButtonElement>;
+  onClickCardButton: (text: string) => void;
+};
+
+const ModalContents = ({ gameId, activeDate, onClickCloseButton, onClickCardButton }: ModalContentsProps) => {
+  const DailyMockData: Record<string, DailyReservationResponse[]> = {
+    '2024-03-27': DailyScheduleMockData['2024-03-27'],
+    '2024-03-30': DailyScheduleMockData['2024-03-30'],
+    '2024-04-01': DailyScheduleMockData['2024-04-01'],
+  };
+
+  const ReservationMockData: Record<string, DetailReservationResponse> = {
+    '1-0-confirmed': reservationDetailMockDataConfirmed as DetailReservationResponse,
+    '1-0-declined': reservationDetailMockDataDeclined as DetailReservationResponse,
+    '1-0-pending': reservationDetailMockDataPending as DetailReservationResponse,
+    '1-1-pending': reservationDetailMockDataPendingNoData as DetailReservationResponse,
+  };
+
+  const dropdownOptions = getScheduleDropdownOption(DailyMockData[activeDate]);
+  const statusCountByScheduleId = getStatusCountByScheduleId(DailyMockData[activeDate]);
+
+  const [scheduleId, setScheduleId] = useState(dropdownOptions[0].value as number);
+
+  const statusCount = statusCountByScheduleId[scheduleId];
+
+  const statusTabOptions: StatusTabOptions[] = [
+    { id: 'pending', text: '신청', count: statusCount.pending },
+    { id: 'confirmed', text: '승인', count: statusCount.confirmed },
+    { id: 'declined', text: '거절', count: statusCount.declined },
+  ];
+
+  const [selectedStatus, setSelectedStatus] = useState<MyReservationsStatus>(statusTabOptions[0].id);
+
+  const currentDeviceType = useDeviceType();
+
+  const { totalCount, reservations } = ReservationMockData[`${gameId}-${scheduleId}-${selectedStatus}`];
+
+  const handleChangeTabId = (selectedId: string | number) => {
+    setSelectedStatus(selectedId as MyReservationsStatus);
+  };
+
+  const handleChangeScheduleId = (value: string | number) => {
+    setScheduleId(value as number);
+  };
+
+  return (
+    <div className={cx('schedule-modal-container')}>
+      <Tab items={statusTabOptions} size='small' selectedTabId={selectedStatus} onClick={handleChangeTabId} />
+      <div className={cx('schedule-modal-date')}>
+        <h3 className={cx('schedule-modal-date-title')}>예약 날짜</h3>
+        <span className={cx('schedule-modal-date-korean')}>{getDateStringKR(activeDate)}</span>
+        <Dropdown options={dropdownOptions} onChange={handleChangeScheduleId} color='yellow' isSmall />
+      </div>
+      <div className={cx('schedule-modal-reservation')}>
+        <h3 className={cx('schedule-modal-reservation-title')}>
+          <span>예약 내역</span>
+          <span className={cx('schedule-modal-reservation-count')}>{totalCount}</span>
+        </h3>
+        {totalCount !== 0 ? (
+          <ul className={cx('schedule-modal-reservation-card', { scroll: totalCount > 2 })}>
+            {reservations.map(({ nickname, headCount, status, id }) => (
+              <li key={`card-${id}`}>
+                <ModalCard
+                  nickName={nickname}
+                  headCount={headCount}
+                  status={status as MyReservationsStatus}
+                  onClickButton={onClickCardButton}
+                />
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <EmptyCard text='No Reservation' isSmall />
+        )}
+      </div>
+      <div className={cx('schedule-modal-close')}>
+        <BaseButton theme='outline' size={currentDeviceType === 'PC' ? 'medium' : 'large'} onClick={onClickCloseButton}>
+          닫기
+        </BaseButton>
+      </div>
+    </div>
+  );
 };
 
 export default ModalContents;