From f4314b2b036800aa45bc6768c7d6826411ca93f5 Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 10:43:22 +0900 Subject: [PATCH 01/18] =?UTF-8?q?feat:=20=EC=98=88=EC=95=BD=20=ED=98=84?= =?UTF-8?q?=ED=99=A9=20=EB=AA=A8=EB=8B=AC=EC=97=90=20CommonModal,=20useMul?= =?UTF-8?q?tiState=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20=EA=B2=8C=EC=9E=84ID?= =?UTF-8?q?=EC=99=80=20=ED=81=B4=EB=A6=AD=ED=95=9C=20=EB=82=A0=EC=A7=9C=20?= =?UTF-8?q?Prop=20=EC=A0=84=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calendar/ModalContents/index.tsx | 13 ++++- src/components/calendar/index.tsx | 54 ++++++++++++------- 2 files changed, 45 insertions(+), 22 deletions(-) diff --git a/src/components/calendar/ModalContents/index.tsx b/src/components/calendar/ModalContents/index.tsx index d62264d3..7ec4bb14 100644 --- a/src/components/calendar/ModalContents/index.tsx +++ b/src/components/calendar/ModalContents/index.tsx @@ -4,8 +4,17 @@ import styles from './ModalContents.module.scss'; const cx = classNames.bind(styles); -const ModalContents = () => { - return
ModalContents
; +type ModalContentsProps = { + gameId: number; + activeDate: string; +}; + +const ModalContents = ({ gameId, activeDate }: ModalContentsProps) => { + return ( +
+ {gameId} / {activeDate} +
+ ); }; export default ModalContents; diff --git a/src/components/calendar/index.tsx b/src/components/calendar/index.tsx index b3fffe7e..4d0caef7 100644 --- a/src/components/calendar/index.tsx +++ b/src/components/calendar/index.tsx @@ -7,11 +7,14 @@ import { getCurrentDate, scheduleListToObjectByDate } from '@/utils'; import CalendarBody from '@/components/calendar/CalendarBody'; import CalendarHeader from '@/components/calendar/CalendarHeader'; import ListBody from '@/components/calendar/ListBody'; +import ModalContents from '@/components/calendar/ModalContents'; +import { CommonModal } from '@/components/commons/modals'; import MockMonthlySchedule1 from '@/constants/mockData/myScheduleMockDataMonth1.json'; import MockMonthlySchedule2 from '@/constants/mockData/myScheduleMockDataMonth2.json'; import MockMonthlySchedule3 from '@/constants/mockData/myScheduleMockDataMonth3.json'; import MockMonthlySchedule4 from '@/constants/mockData/myScheduleMockDataMonth4.json'; import { useDeviceType } from '@/hooks/useDeviceType'; +import useMultiState from '@/hooks/useMultiState'; import { MonthlySchedule } from '@/types'; @@ -49,6 +52,7 @@ const Calendar = ({ gameId }: CalendarProps) => { const [monthlySchedule, setMonthlySchedule] = useState([]); const [activeDate, setActiveDate] = useState(''); + const { multiState, toggleClick } = useMultiState(['scheduleModal, confirmModal']); const currentDeviceType = useDeviceType(); const handleChangeMonth = (addNumber: number) => { @@ -65,8 +69,13 @@ const Calendar = ({ gameId }: CalendarProps) => { setCurrentMonth(newMonth); }; + const handleToggleModal = (modalKey: string) => { + toggleClick(modalKey); + }; + const handleScheduleClick = (date: string) => { setActiveDate(date); + toggleClick('scheduleModal'); }; useEffect(() => { @@ -79,30 +88,35 @@ const Calendar = ({ gameId }: CalendarProps) => { setMonthlySchedule(scheduleData); }, [currentYear, currentMonth]); - console.log(gameId); - console.log(activeDate); - return ( -
- - {isCalendar ? ( - +
+ - ) : ( - - )} -
+ {isCalendar ? ( + + ) : ( + + )} +
+ handleToggleModal('scheduleModal')} + title={'예약 정보'} + renderContent={} + /> + ); }; From e40831f0ba4fd00d06ccfa05cc60a0c351089c52 Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 11:02:28 +0900 Subject: [PATCH 02/18] =?UTF-8?q?feat:=20=EC=98=88=EC=95=BD=ED=98=84?= =?UTF-8?q?=ED=99=A9=20=EB=AA=A8=EB=8B=AC=EC=97=90=20=ED=83=AD=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ModalContents/ModalContents.module.scss | 5 +++++ .../calendar/ModalContents/index.tsx | 22 +++++++++++++++++-- src/constants/tapOptions.ts | 8 +++++++ src/types/schedule.ts | 7 +++++- 4 files changed, 39 insertions(+), 3 deletions(-) diff --git a/src/components/calendar/ModalContents/ModalContents.module.scss b/src/components/calendar/ModalContents/ModalContents.module.scss index e69de29b..e7e5a6c2 100644 --- a/src/components/calendar/ModalContents/ModalContents.module.scss +++ b/src/components/calendar/ModalContents/ModalContents.module.scss @@ -0,0 +1,5 @@ +.schedule-modal { + &-container { + @include column-flexbox(start, stretch, 1.6rem); + } +} diff --git a/src/components/calendar/ModalContents/index.tsx b/src/components/calendar/ModalContents/index.tsx index 7ec4bb14..0ed28750 100644 --- a/src/components/calendar/ModalContents/index.tsx +++ b/src/components/calendar/ModalContents/index.tsx @@ -1,5 +1,13 @@ +import { useState } from 'react'; + import classNames from 'classnames/bind'; +import { SCHEDULE_TAB_OPTIONS } from '@/constants'; + +import Tab from '@/components/commons/Tab'; + +import { MyReservationsStatus } from '@/types'; + import styles from './ModalContents.module.scss'; const cx = classNames.bind(styles); @@ -10,9 +18,19 @@ type ModalContentsProps = { }; const ModalContents = ({ gameId, activeDate }: ModalContentsProps) => { + const [selectedTabId, setSelectedTabId] = useState(SCHEDULE_TAB_OPTIONS[0].id); + + console.log(gameId); + console.log(activeDate); + return ( -
- {gameId} / {activeDate} +
+ setSelectedTabId(selectedId as MyReservationsStatus)} + />
); }; diff --git a/src/constants/tapOptions.ts b/src/constants/tapOptions.ts index 0c4cc65e..a1dfd0c0 100644 --- a/src/constants/tapOptions.ts +++ b/src/constants/tapOptions.ts @@ -1,5 +1,13 @@ +import { ScheduleTabOptions } from '@/types'; + export const MYPAGE_TAB_OPTIONS = [ { id: 'myPost', text: '등록한 게시글' }, { id: 'myReservation', text: '신청한 예약' }, { id: 'reservationsStatus', text: '예약 현황' }, ]; + +export const SCHEDULE_TAB_OPTIONS: ScheduleTabOptions[] = [ + { id: 'pending', text: '신청' }, + { id: 'confirmed', text: '승인' }, + { id: 'declined', text: '거절' }, +]; diff --git a/src/types/schedule.ts b/src/types/schedule.ts index b0fb91f9..713435b2 100644 --- a/src/types/schedule.ts +++ b/src/types/schedule.ts @@ -1,4 +1,4 @@ -import { ReservationResponse } from '@/types'; +import { MyReservationsStatus, MyReservationsStatusKR, ReservationResponse } from '@/types'; export type AvailableSchedule = { date: string; @@ -37,3 +37,8 @@ export type DetailSchedule = { }; export type ReservationsByDate = Record; + +export type ScheduleTabOptions = { + id: MyReservationsStatus; + text: MyReservationsStatusKR; +}; From aa26529d14173c36de3cda3897d481008de94f42 Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 11:19:58 +0900 Subject: [PATCH 03/18] =?UTF-8?q?refactor:=20=EC=98=88=EC=95=BD=20?= =?UTF-8?q?=ED=98=84=ED=99=A9=20response=20=ED=83=80=EC=9E=85=EB=AA=85=20?= =?UTF-8?q?=EB=8D=94=20=EB=AA=85=ED=99=95=ED=95=98=EA=B2=8C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/calendar/ListBody/index.tsx | 4 ++-- src/components/calendar/index.tsx | 6 +++--- src/types/schedule.ts | 6 +++--- src/utils/dataMap.ts | 4 ++-- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/calendar/ListBody/index.tsx b/src/components/calendar/ListBody/index.tsx index daeeed2b..54bb8b0b 100644 --- a/src/components/calendar/ListBody/index.tsx +++ b/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; }; diff --git a/src/components/calendar/index.tsx b/src/components/calendar/index.tsx index 4d0caef7..8db9921a 100644 --- a/src/components/calendar/index.tsx +++ b/src/components/calendar/index.tsx @@ -16,7 +16,7 @@ import MockMonthlySchedule4 from '@/constants/mockData/myScheduleMockDataMonth4. import { useDeviceType } from '@/hooks/useDeviceType'; import useMultiState from '@/hooks/useMultiState'; -import { MonthlySchedule } from '@/types'; +import { MonthlyReservationResponse } from '@/types'; import styles from './Calendar.module.scss'; @@ -29,7 +29,7 @@ const getMonthlyMockData = (year: number, month: number) => { const yearText = year.toString(); const monthText = month.toString().padStart(2, '0'); - const MonthlyMockData: Record = { + const MonthlyMockData: Record = { '2024/01': MockMonthlySchedule1, '2024/02': MockMonthlySchedule2, '2024/03': MockMonthlySchedule3, @@ -49,7 +49,7 @@ const Calendar = ({ gameId }: CalendarProps) => { const [isCalendar, setIsCalendar] = useState(true); const [currentYear, setCurrentYear] = useState(today.year); const [currentMonth, setCurrentMonth] = useState(today.month); - const [monthlySchedule, setMonthlySchedule] = useState([]); + const [monthlySchedule, setMonthlySchedule] = useState([]); const [activeDate, setActiveDate] = useState(''); const { multiState, toggleClick } = useMultiState(['scheduleModal, confirmModal']); diff --git a/src/types/schedule.ts b/src/types/schedule.ts index 713435b2..936d921d 100644 --- a/src/types/schedule.ts +++ b/src/types/schedule.ts @@ -18,19 +18,19 @@ export type DailyReservationCount = { pending: number; }; -export type MonthlySchedule = { +export type MonthlyReservationResponse = { date: string; reservations: MonthlyReservationCount; }; -export type DailySchedule = { +export type DailyReservationResponse = { scheduleId: number; startTime: string; endTime: string; count: DailyReservationCount; }; -export type DetailSchedule = { +export type DetailReservationResponse = { cursorId: 0; totalCount: 0; reservations: Omit[]; diff --git a/src/utils/dataMap.ts b/src/utils/dataMap.ts index c12ae395..873f9191 100644 --- a/src/utils/dataMap.ts +++ b/src/utils/dataMap.ts @@ -1,6 +1,6 @@ import { PRICE_TO_POST_TYPES } from '@/constants'; -import { MonthlySchedule, ReservationsByDate } from '@/types'; +import { MonthlyReservationResponse, ReservationsByDate } from '@/types'; import { formatCategoryToGameNameKR } from './gameFormatter'; @@ -29,7 +29,7 @@ export const splitDescByDelimiter = (inputString: string) => { }; }; -export const scheduleListToObjectByDate = (scheduleData: MonthlySchedule[] | undefined) => { +export const scheduleListToObjectByDate = (scheduleData: MonthlyReservationResponse[] | undefined) => { const result: ReservationsByDate = {}; scheduleData?.forEach((schedule) => (result[schedule.date] = schedule.reservations)); From ba6e9c745e18fd8b00590734f03122561e941755 Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 12:13:04 +0900 Subject: [PATCH 04/18] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=EC=97=90=20?= =?UTF-8?q?=EC=9D=BC=EB=B3=84=20=EC=8A=A4=EC=BC=80=EC=A4=84=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=ED=91=9C=EC=8B=9C=ED=95=98=EB=8A=94=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84=20(mock=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calendar/ModalContents/index.tsx | 42 ++++++++++++++++--- src/components/calendar/index.tsx | 4 +- src/constants/tapOptions.ts | 8 ---- src/types/schedule.ts | 3 +- src/utils/dataMap.ts | 36 ++++++++++++++-- src/utils/getDate.ts | 2 + 6 files changed, 76 insertions(+), 19 deletions(-) diff --git a/src/components/calendar/ModalContents/index.tsx b/src/components/calendar/ModalContents/index.tsx index 0ed28750..fa0d8c4c 100644 --- a/src/components/calendar/ModalContents/index.tsx +++ b/src/components/calendar/ModalContents/index.tsx @@ -2,11 +2,13 @@ import { useState } from 'react'; import classNames from 'classnames/bind'; -import { SCHEDULE_TAB_OPTIONS } from '@/constants'; +import { getDateStringKR, getScheduleDropdownOption, getStatusCountByScheduleId } from '@/utils'; +import Dropdown from '@/components/commons/Dropdown'; import Tab from '@/components/commons/Tab'; +import DailyScheduleMockData from '@/constants/mockData/reservedScheduleMockData.json'; -import { MyReservationsStatus } from '@/types'; +import { DailyReservationResponse, MyReservationsStatus, StatusTabOptions } from '@/types'; import styles from './ModalContents.module.scss'; @@ -18,19 +20,49 @@ type ModalContentsProps = { }; const ModalContents = ({ gameId, activeDate }: ModalContentsProps) => { - const [selectedTabId, setSelectedTabId] = useState(SCHEDULE_TAB_OPTIONS[0].id); + const DailyMockData: Record = { + '2024-03-27': DailyScheduleMockData['2024-03-27'], + '2024-03-30': DailyScheduleMockData['2024-03-30'], + '2024-04-01': DailyScheduleMockData['2024-04-01'], + }; + + 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 [selectedTabId, setSelectedTabId] = useState(statusTabOptions[0].id); console.log(gameId); - console.log(activeDate); return (
setSelectedTabId(selectedId as MyReservationsStatus)} /> +
+

예약 날짜

+ {getDateStringKR(activeDate)} + { + setScheduleId(value as number); + }} + color='yellow' + isSmall + /> +
); }; diff --git a/src/components/calendar/index.tsx b/src/components/calendar/index.tsx index 8db9921a..0bf4a498 100644 --- a/src/components/calendar/index.tsx +++ b/src/components/calendar/index.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; import classNames from 'classnames/bind'; -import { getCurrentDate, scheduleListToObjectByDate } from '@/utils'; +import { getCurrentDate, getScheduleByDate } from '@/utils'; import CalendarBody from '@/components/calendar/CalendarBody'; import CalendarHeader from '@/components/calendar/CalendarHeader'; @@ -103,7 +103,7 @@ const Calendar = ({ gameId }: CalendarProps) => { today={today} currentYear={currentYear} currentMonth={currentMonth} - schedules={scheduleListToObjectByDate(monthlySchedule)} + schedules={getScheduleByDate(monthlySchedule)} onClick={handleScheduleClick} /> ) : ( diff --git a/src/constants/tapOptions.ts b/src/constants/tapOptions.ts index a1dfd0c0..0c4cc65e 100644 --- a/src/constants/tapOptions.ts +++ b/src/constants/tapOptions.ts @@ -1,13 +1,5 @@ -import { ScheduleTabOptions } from '@/types'; - export const MYPAGE_TAB_OPTIONS = [ { id: 'myPost', text: '등록한 게시글' }, { id: 'myReservation', text: '신청한 예약' }, { id: 'reservationsStatus', text: '예약 현황' }, ]; - -export const SCHEDULE_TAB_OPTIONS: ScheduleTabOptions[] = [ - { id: 'pending', text: '신청' }, - { id: 'confirmed', text: '승인' }, - { id: 'declined', text: '거절' }, -]; diff --git a/src/types/schedule.ts b/src/types/schedule.ts index 936d921d..2e8fc0c3 100644 --- a/src/types/schedule.ts +++ b/src/types/schedule.ts @@ -38,7 +38,8 @@ export type DetailReservationResponse = { export type ReservationsByDate = Record; -export type ScheduleTabOptions = { +export type StatusTabOptions = { id: MyReservationsStatus; text: MyReservationsStatusKR; + count: number; }; diff --git a/src/utils/dataMap.ts b/src/utils/dataMap.ts index 873f9191..e9921535 100644 --- a/src/utils/dataMap.ts +++ b/src/utils/dataMap.ts @@ -1,6 +1,11 @@ import { PRICE_TO_POST_TYPES } from '@/constants'; -import { MonthlyReservationResponse, ReservationsByDate } from '@/types'; +import { + DailyReservationCount, + DailyReservationResponse, + MonthlyReservationResponse, + ReservationsByDate, +} from '@/types'; import { formatCategoryToGameNameKR } from './gameFormatter'; @@ -29,10 +34,35 @@ export const splitDescByDelimiter = (inputString: string) => { }; }; -export const scheduleListToObjectByDate = (scheduleData: MonthlyReservationResponse[] | undefined) => { +export const getScheduleByDate = (scheduleData: MonthlyReservationResponse[] | undefined) => { const result: ReservationsByDate = {}; - scheduleData?.forEach((schedule) => (result[schedule.date] = schedule.reservations)); + scheduleData?.forEach((schedule) => { + result[schedule.date] = schedule.reservations; + }); + + return result; +}; + +export const getStatusCountByScheduleId = (scheduleData: DailyReservationResponse[] | undefined) => { + const result: { [id: number]: DailyReservationCount } = {}; + + scheduleData?.forEach((schedule) => { + result[schedule.scheduleId] = schedule.count; + }); + + return result; +}; + +export const getScheduleDropdownOption = (scheduleData: DailyReservationResponse[] | undefined) => { + const result: { title: string; value: number | string }[] = []; + + scheduleData?.forEach((schedule) => { + result.push({ + title: `${schedule.startTime} - ${schedule.endTime}`, + value: schedule.scheduleId, + }); + }); return result; }; diff --git a/src/utils/getDate.ts b/src/utils/getDate.ts index c3a0e41c..c4cdc5fa 100644 --- a/src/utils/getDate.ts +++ b/src/utils/getDate.ts @@ -126,3 +126,5 @@ export const getMonthString = (month: number) => dayjs() .month(month - 1) .format('MMMM'); + +export const getDateStringKR = (date: string) => dayjs(date).format('YYYY년 M월 D일'); From 34b80b142bba7d9b7dfe4dbd73a6f6d5376c51ed Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 12:58:37 +0900 Subject: [PATCH 05/18] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=EC=B0=BD=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ModalContents/ModalContents.module.scss | 30 +++++++++++++++++++ .../calendar/ModalContents/index.tsx | 20 +++++++++++-- src/components/calendar/index.tsx | 10 +++---- 3 files changed, 51 insertions(+), 9 deletions(-) diff --git a/src/components/calendar/ModalContents/ModalContents.module.scss b/src/components/calendar/ModalContents/ModalContents.module.scss index e7e5a6c2..2626e144 100644 --- a/src/components/calendar/ModalContents/ModalContents.module.scss +++ b/src/components/calendar/ModalContents/ModalContents.module.scss @@ -2,4 +2,34 @@ &-container { @include column-flexbox(start, stretch, 1.6rem); } + + &-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); + + &-title { + @include flexbox(start, center, 0.4rem); + @include text-style(16, $white, bold); + } + + &-count { + @include text-style(14, $primary, bold); + } + } + + &-close { + flex-grow: 0; + margin: 0 auto; + } } diff --git a/src/components/calendar/ModalContents/index.tsx b/src/components/calendar/ModalContents/index.tsx index fa0d8c4c..2fae18f8 100644 --- a/src/components/calendar/ModalContents/index.tsx +++ b/src/components/calendar/ModalContents/index.tsx @@ -1,9 +1,10 @@ -import { useState } from 'react'; +import { MouseEventHandler, useState } from 'react'; import classNames from 'classnames/bind'; import { getDateStringKR, getScheduleDropdownOption, getStatusCountByScheduleId } from '@/utils'; +import { BaseButton } from '@/components/commons/buttons'; import Dropdown from '@/components/commons/Dropdown'; import Tab from '@/components/commons/Tab'; import DailyScheduleMockData from '@/constants/mockData/reservedScheduleMockData.json'; @@ -17,9 +18,10 @@ const cx = classNames.bind(styles); type ModalContentsProps = { gameId: number; activeDate: string; + onClick: MouseEventHandler; }; -const ModalContents = ({ gameId, activeDate }: ModalContentsProps) => { +const ModalContents = ({ gameId, activeDate, onClick }: ModalContentsProps) => { const DailyMockData: Record = { '2024-03-27': DailyScheduleMockData['2024-03-27'], '2024-03-30': DailyScheduleMockData['2024-03-30'], @@ -40,6 +42,7 @@ const ModalContents = ({ gameId, activeDate }: ModalContentsProps) => { ]; const [selectedTabId, setSelectedTabId] = useState(statusTabOptions[0].id); + const totalCount = Object.values(statusCount).reduce((prev, cur) => prev + cur, 0); console.log(gameId); @@ -53,7 +56,7 @@ const ModalContents = ({ gameId, activeDate }: ModalContentsProps) => { />

예약 날짜

- {getDateStringKR(activeDate)} + {getDateStringKR(activeDate)} { @@ -63,6 +66,17 @@ const ModalContents = ({ gameId, activeDate }: ModalContentsProps) => { isSmall />
+
+

+ 예약 내역 + {totalCount} +

+
+
+ + 닫기 + +
); }; diff --git a/src/components/calendar/index.tsx b/src/components/calendar/index.tsx index 0bf4a498..379f713c 100644 --- a/src/components/calendar/index.tsx +++ b/src/components/calendar/index.tsx @@ -69,10 +69,6 @@ const Calendar = ({ gameId }: CalendarProps) => { setCurrentMonth(newMonth); }; - const handleToggleModal = (modalKey: string) => { - toggleClick(modalKey); - }; - const handleScheduleClick = (date: string) => { setActiveDate(date); toggleClick('scheduleModal'); @@ -112,9 +108,11 @@ const Calendar = ({ gameId }: CalendarProps) => { handleToggleModal('scheduleModal')} + onClose={() => toggleClick('scheduleModal')} title={'예약 정보'} - renderContent={} + renderContent={ + toggleClick('scheduleModal')} /> + } /> ); From 50fba756b01e9e12e00ab5bdae0a7edc453a2318 Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 13:48:39 +0900 Subject: [PATCH 06/18] =?UTF-8?q?feat:=20=EC=98=88=EC=95=BD=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=EB=8D=B0=EC=9D=B4=ED=84=B0=20=ED=85=8C=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20=EC=9C=84=ED=95=9C=20mock=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...> reservationDetailMockDataConfirmed.json} | 10 ++-- .../reservationDetailMockDataDeclined.json | 40 +++++++++++++ .../reservationDetailMockDataPending.json | 57 +++++++++++++++++++ ...eservationDetailMockDataPendingNoData.json | 5 ++ 4 files changed, 107 insertions(+), 5 deletions(-) rename src/constants/mockData/{reservationDetailMockData.json => reservationDetailMockDataConfirmed.json} (74%) create mode 100644 src/constants/mockData/reservationDetailMockDataDeclined.json create mode 100644 src/constants/mockData/reservationDetailMockDataPending.json create mode 100644 src/constants/mockData/reservationDetailMockDataPendingNoData.json diff --git a/src/constants/mockData/reservationDetailMockData.json b/src/constants/mockData/reservationDetailMockDataConfirmed.json similarity index 74% rename from src/constants/mockData/reservationDetailMockData.json rename to src/constants/mockData/reservationDetailMockDataConfirmed.json index a7a34d58..d2799b2d 100644 --- a/src/constants/mockData/reservationDetailMockData.json +++ b/src/constants/mockData/reservationDetailMockDataConfirmed.json @@ -1,18 +1,18 @@ { "cursorId": 0, - "totalCount": 3, + "totalCount": 1, "reservations": [ { "id": 1, - "nickname": "tester", + "nickname": "testerc", "userId": 0, - "teamId": "test", + "teamId": "testerc", "activityId": 0, "scheduleId": 0, - "status": "pending", + "status": "confirmed", "reviewSubmitted": false, "totalPrice": 0, - "headCount": 2, + "headCount": 1, "date": "2024-03-27", "startTime": "09:00", "endTime": "12:00", diff --git a/src/constants/mockData/reservationDetailMockDataDeclined.json b/src/constants/mockData/reservationDetailMockDataDeclined.json new file mode 100644 index 00000000..c8035b4b --- /dev/null +++ b/src/constants/mockData/reservationDetailMockDataDeclined.json @@ -0,0 +1,40 @@ +{ + "cursorId": 0, + "totalCount": 2, + "reservations": [ + { + "id": 1, + "nickname": "testerd", + "userId": 0, + "teamId": "testd", + "activityId": 0, + "scheduleId": 0, + "status": "declined", + "reviewSubmitted": false, + "totalPrice": 0, + "headCount": 10, + "date": "2024-03-27", + "startTime": "09:00", + "endTime": "12:00", + "createdAt": "2024-03-27T02:35:20.905Z", + "updatedAt": "2024-03-27T02:35:20.905Z" + }, + { + "id": 2, + "nickname": "testerd2", + "userId": 0, + "teamId": "testd2", + "activityId": 0, + "scheduleId": 0, + "status": "declined", + "reviewSubmitted": false, + "totalPrice": 0, + "headCount": 11, + "date": "2024-03-27", + "startTime": "09:00", + "endTime": "12:00", + "createdAt": "2024-03-27T02:35:20.905Z", + "updatedAt": "2024-03-27T02:35:20.905Z" + } + ] +} diff --git a/src/constants/mockData/reservationDetailMockDataPending.json b/src/constants/mockData/reservationDetailMockDataPending.json new file mode 100644 index 00000000..d5d4efe3 --- /dev/null +++ b/src/constants/mockData/reservationDetailMockDataPending.json @@ -0,0 +1,57 @@ +{ + "cursorId": 0, + "totalCount": 3, + "reservations": [ + { + "id": 1, + "nickname": "testerp", + "userId": 0, + "teamId": "testp", + "activityId": 0, + "scheduleId": 0, + "status": "pending", + "reviewSubmitted": false, + "totalPrice": 0, + "headCount": 2, + "date": "2024-03-27", + "startTime": "09:00", + "endTime": "12:00", + "createdAt": "2024-03-27T02:35:20.905Z", + "updatedAt": "2024-03-27T02:35:20.905Z" + }, + { + "id": 2, + "nickname": "testerp2", + "userId": 0, + "teamId": "testp2", + "activityId": 0, + "scheduleId": 0, + "status": "pending", + "reviewSubmitted": false, + "totalPrice": 0, + "headCount": 3, + "date": "2024-03-27", + "startTime": "09:00", + "endTime": "12:00", + "createdAt": "2024-03-27T02:35:20.905Z", + "updatedAt": "2024-03-27T02:35:20.905Z" + }, + { + "id": 3, + "nickname": "testerp3", + "userId": 0, + "teamId": "testp3", + "activityId": 0, + "scheduleId": 0, + "status": "pending", + "reviewSubmitted": false, + "totalPrice": 0, + "headCount": 4, + "date": "2024-03-27", + "startTime": "09:00", + "endTime": "12:00", + "createdAt": "2024-03-27T02:35:20.905Z", + "updatedAt": "2024-03-27T02:35:20.905Z" + } + ] +} diff --git a/src/constants/mockData/reservationDetailMockDataPendingNoData.json b/src/constants/mockData/reservationDetailMockDataPendingNoData.json new file mode 100644 index 00000000..ee594a7a --- /dev/null +++ b/src/constants/mockData/reservationDetailMockDataPendingNoData.json @@ -0,0 +1,5 @@ +{ + "cursorId": 0, + "totalCount": 0, + "reservations": [] +} From 48ccdcbcf88ea77e9049c65f448f7e8b173d82a6 Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 13:49:15 +0900 Subject: [PATCH 07/18] =?UTF-8?q?feat:=20=EC=98=88=EC=95=BD=20=EB=82=B4?= =?UTF-8?q?=EC=97=AD=20=EC=B9=B4=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calendar/ModalCard/ModalCard.module.scss | 32 ++++++++++++ src/components/calendar/ModalCard/index.tsx | 51 +++++++++++++++++++ .../calendar/ModalContents/index.tsx | 9 ++-- 3 files changed, 87 insertions(+), 5 deletions(-) create mode 100644 src/components/calendar/ModalCard/ModalCard.module.scss create mode 100644 src/components/calendar/ModalCard/index.tsx diff --git a/src/components/calendar/ModalCard/ModalCard.module.scss b/src/components/calendar/ModalCard/ModalCard.module.scss new file mode 100644 index 00000000..a2107411 --- /dev/null +++ b/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); + } +} diff --git a/src/components/calendar/ModalCard/index.tsx b/src/components/calendar/ModalCard/index.tsx new file mode 100644 index 00000000..33ff4c8a --- /dev/null +++ b/src/components/calendar/ModalCard/index.tsx @@ -0,0 +1,51 @@ +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; +}; + +const ModalCard = ({ nickName, headCount, status }: ModalCardProps) => { + return ( +
+
+
+ 닉네임 + {nickName} +
+
+ 인원 + {headCount}명 +
+
+
+ {status === 'pending' ? ( + + + 거절 + + + 승인 + + + ) : ( + + )} +
+
+ ); +}; + +export default ModalCard; diff --git a/src/components/calendar/ModalContents/index.tsx b/src/components/calendar/ModalContents/index.tsx index 2fae18f8..0c45d46d 100644 --- a/src/components/calendar/ModalContents/index.tsx +++ b/src/components/calendar/ModalContents/index.tsx @@ -41,8 +41,7 @@ const ModalContents = ({ gameId, activeDate, onClick }: ModalContentsProps) => { { id: 'declined', text: '거절', count: statusCount.declined }, ]; - const [selectedTabId, setSelectedTabId] = useState(statusTabOptions[0].id); - const totalCount = Object.values(statusCount).reduce((prev, cur) => prev + cur, 0); + const [selectedStatus, setSelectedStatus] = useState(statusTabOptions[0].id); console.log(gameId); @@ -51,8 +50,8 @@ const ModalContents = ({ gameId, activeDate, onClick }: ModalContentsProps) => { setSelectedTabId(selectedId as MyReservationsStatus)} + selectedTabId={selectedStatus} + onClick={(selectedId) => setSelectedStatus(selectedId as MyReservationsStatus)} />

예약 날짜

@@ -69,7 +68,7 @@ const ModalContents = ({ gameId, activeDate, onClick }: ModalContentsProps) => {

예약 내역 - {totalCount} + 0

From 9243217ac468c8283bc19ba24adc5851d70f142e Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 13:57:03 +0900 Subject: [PATCH 08/18] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calendar/ModalContents/ModalContents.module.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/calendar/ModalContents/ModalContents.module.scss b/src/components/calendar/ModalContents/ModalContents.module.scss index 2626e144..cfa38228 100644 --- a/src/components/calendar/ModalContents/ModalContents.module.scss +++ b/src/components/calendar/ModalContents/ModalContents.module.scss @@ -26,6 +26,15 @@ &-count { @include text-style(14, $primary, bold); } + + &-card { + @include column-flexbox(start, stretch, 0.8rem); + + @include no-scrollbar; + + overflow-y: scroll; + max-height: 24rem; + } } &-close { From 6b1e192889759d59871bc616fb5c834b731671fa Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 13:59:14 +0900 Subject: [PATCH 09/18] =?UTF-8?q?feat:=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=95=B8=EB=93=A4=EB=9F=AC=EB=A5=BC=20=ED=95=A8=EC=88=98?= =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calendar/ModalContents/index.tsx | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/calendar/ModalContents/index.tsx b/src/components/calendar/ModalContents/index.tsx index 0c45d46d..ff335e8b 100644 --- a/src/components/calendar/ModalContents/index.tsx +++ b/src/components/calendar/ModalContents/index.tsx @@ -4,6 +4,7 @@ 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'; @@ -43,6 +44,10 @@ const ModalContents = ({ gameId, activeDate, onClick }: ModalContentsProps) => { const [selectedStatus, setSelectedStatus] = useState(statusTabOptions[0].id); + const handleChangeScheduleId = (value: string | number) => { + setScheduleId(value as number); + }; + console.log(gameId); return ( @@ -56,20 +61,19 @@ const ModalContents = ({ gameId, activeDate, onClick }: ModalContentsProps) => {

예약 날짜

{getDateStringKR(activeDate)} - { - setScheduleId(value as number); - }} - color='yellow' - isSmall - /> +

예약 내역 0

+
+ + + + +
From a103f4d42d9cd202d71a33ae72d363e715b3160e Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 14:15:51 +0900 Subject: [PATCH 10/18] =?UTF-8?q?feat:=20=EC=98=88=EC=95=BD=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20(mock=EB=8D=B0=EC=9D=B4=ED=84=B0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calendar/ModalContents/index.tsx | 30 ++++++++++++++----- src/types/schedule.ts | 6 +++- 2 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/components/calendar/ModalContents/index.tsx b/src/components/calendar/ModalContents/index.tsx index ff335e8b..fe652e37 100644 --- a/src/components/calendar/ModalContents/index.tsx +++ b/src/components/calendar/ModalContents/index.tsx @@ -8,9 +8,13 @@ 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 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 { DailyReservationResponse, MyReservationsStatus, StatusTabOptions } from '@/types'; +import { DailyReservationResponse, DetailReservationResponse, MyReservationsStatus, StatusTabOptions } from '@/types'; import styles from './ModalContents.module.scss'; @@ -29,6 +33,13 @@ const ModalContents = ({ gameId, activeDate, onClick }: ModalContentsProps) => { '2024-04-01': DailyScheduleMockData['2024-04-01'], }; + const ReservationMockData: Record = { + '0-confirmed': reservationDetailMockDataConfirmed as DetailReservationResponse, + '0-declined': reservationDetailMockDataDeclined as DetailReservationResponse, + '0-pending': reservationDetailMockDataPending as DetailReservationResponse, + '1-pending': reservationDetailMockDataPendingNoData as DetailReservationResponse, + }; + const dropdownOptions = getScheduleDropdownOption(DailyMockData[activeDate]); const statusCountByScheduleId = getStatusCountByScheduleId(DailyMockData[activeDate]); @@ -44,6 +55,8 @@ const ModalContents = ({ gameId, activeDate, onClick }: ModalContentsProps) => { const [selectedStatus, setSelectedStatus] = useState(statusTabOptions[0].id); + const reservationData = ReservationMockData[`${scheduleId}-${selectedStatus}`]; + const handleChangeScheduleId = (value: string | number) => { setScheduleId(value as number); }; @@ -66,14 +79,15 @@ const ModalContents = ({ gameId, activeDate, onClick }: ModalContentsProps) => {

예약 내역 - 0 + {reservationData.totalCount}

-
- - - - -
+
    + {reservationData.reservations.map(({ nickname, headCount, status, id }) => ( +
  • + +
    • + ))} +
diff --git a/src/types/schedule.ts b/src/types/schedule.ts index 2e8fc0c3..48dbaa6b 100644 --- a/src/types/schedule.ts +++ b/src/types/schedule.ts @@ -33,7 +33,11 @@ export type DailyReservationResponse = { export type DetailReservationResponse = { cursorId: 0; totalCount: 0; - reservations: Omit[]; + reservations: ReservationDetail[]; +}; + +export type ReservationDetail = Omit & { + nickname: string; }; export type ReservationsByDate = Record; From d49c1e1d68f9305be3ea02e0425e116b1dbbe5ce Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 17:17:02 +0900 Subject: [PATCH 11/18] =?UTF-8?q?feat:=20=EC=98=88=EC=95=BD=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=97=86=EC=9D=84=EB=95=8C=20EmptyCard=20?= =?UTF-8?q?=EB=B3=B4=EC=9D=B4=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ModalContents/ModalContents.module.scss | 2 +- .../calendar/ModalContents/index.tsx | 19 ++++++++++++------- .../empty/EmptyCard/EmptyCard.module.scss | 4 ++++ .../layout/empty/EmptyCard/index.tsx | 5 +++-- 4 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/components/calendar/ModalContents/ModalContents.module.scss b/src/components/calendar/ModalContents/ModalContents.module.scss index cfa38228..fe523da0 100644 --- a/src/components/calendar/ModalContents/ModalContents.module.scss +++ b/src/components/calendar/ModalContents/ModalContents.module.scss @@ -33,7 +33,7 @@ @include no-scrollbar; overflow-y: scroll; - max-height: 24rem; + max-height: 23.2rem; } } diff --git a/src/components/calendar/ModalContents/index.tsx b/src/components/calendar/ModalContents/index.tsx index fe652e37..8c18368d 100644 --- a/src/components/calendar/ModalContents/index.tsx +++ b/src/components/calendar/ModalContents/index.tsx @@ -8,6 +8,7 @@ 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'; @@ -81,13 +82,17 @@ const ModalContents = ({ gameId, activeDate, onClick }: ModalContentsProps) => { 예약 내역 {reservationData.totalCount} -
    - {reservationData.reservations.map(({ nickname, headCount, status, id }) => ( -
  • - -
    • - ))} -
+ {reservationData.totalCount !== 0 ? ( +
    + {reservationData.reservations.map(({ nickname, headCount, status, id }) => ( +
  • + +
    • + ))} +
+ ) : ( + + )}
diff --git a/src/components/layout/empty/EmptyCard/EmptyCard.module.scss b/src/components/layout/empty/EmptyCard/EmptyCard.module.scss index 6f057011..58125192 100644 --- a/src/components/layout/empty/EmptyCard/EmptyCard.module.scss +++ b/src/components/layout/empty/EmptyCard/EmptyCard.module.scss @@ -9,4 +9,8 @@ background-color: $black70; border: 0.1rem dashed $gray50; border-radius: 0.8rem; + + &.small { + height: 11.2rem; + } } diff --git a/src/components/layout/empty/EmptyCard/index.tsx b/src/components/layout/empty/EmptyCard/index.tsx index 47d426c9..375656ae 100644 --- a/src/components/layout/empty/EmptyCard/index.tsx +++ b/src/components/layout/empty/EmptyCard/index.tsx @@ -10,13 +10,14 @@ const cx = classNames.bind(styles); type EmptyCardProps = { text: string; + isSmall?: boolean; }; const { url, alt } = SVGS.empty; -const EmptyCard = ({ text }: EmptyCardProps) => { +const EmptyCard = ({ text, isSmall }: EmptyCardProps) => { return ( -
+
{alt}
{text}
From 63a477cd7d508c4320d4042f5a942d61b7742eb2 Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 17:54:06 +0900 Subject: [PATCH 12/18] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=202=EA=B0=9C=20=EB=84=98=EC=9C=BC=EB=A9=B4?= =?UTF-8?q?=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EB=B3=B4=EC=9D=B4=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ModalContents/ModalContents.module.scss | 22 ++++++++++++++++--- .../calendar/ModalContents/index.tsx | 10 ++++----- 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/src/components/calendar/ModalContents/ModalContents.module.scss b/src/components/calendar/ModalContents/ModalContents.module.scss index fe523da0..2d74e218 100644 --- a/src/components/calendar/ModalContents/ModalContents.module.scss +++ b/src/components/calendar/ModalContents/ModalContents.module.scss @@ -30,10 +30,26 @@ &-card { @include column-flexbox(start, stretch, 0.8rem); - @include no-scrollbar; - - overflow-y: scroll; + 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; + } } } diff --git a/src/components/calendar/ModalContents/index.tsx b/src/components/calendar/ModalContents/index.tsx index 8c18368d..3cf9e9c7 100644 --- a/src/components/calendar/ModalContents/index.tsx +++ b/src/components/calendar/ModalContents/index.tsx @@ -56,7 +56,7 @@ const ModalContents = ({ gameId, activeDate, onClick }: ModalContentsProps) => { const [selectedStatus, setSelectedStatus] = useState(statusTabOptions[0].id); - const reservationData = ReservationMockData[`${scheduleId}-${selectedStatus}`]; + const { totalCount, reservations } = ReservationMockData[`${scheduleId}-${selectedStatus}`]; const handleChangeScheduleId = (value: string | number) => { setScheduleId(value as number); @@ -80,11 +80,11 @@ const ModalContents = ({ gameId, activeDate, onClick }: ModalContentsProps) => {

예약 내역 - {reservationData.totalCount} + {totalCount}

- {reservationData.totalCount !== 0 ? ( -
    - {reservationData.reservations.map(({ nickname, headCount, status, id }) => ( + {totalCount !== 0 ? ( +
      2 })}> + {reservations.map(({ nickname, headCount, status, id }) => (
      • From c9258dd82fd8f64c9e4176d5301cb4449685265d Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 18:02:42 +0900 Subject: [PATCH 13/18] =?UTF-8?q?feat:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EB=84=98=EC=B9=98?= =?UTF-8?q?=EB=A9=B4=20ellipse(...)=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Dropdown/Dropdown.module.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/commons/Dropdown/Dropdown.module.scss b/src/components/commons/Dropdown/Dropdown.module.scss index cfcc2409..f77865ed 100644 --- a/src/components/commons/Dropdown/Dropdown.module.scss +++ b/src/components/commons/Dropdown/Dropdown.module.scss @@ -21,10 +21,15 @@ cursor: pointer; + overflow: hidden; + width: 100%; height: 4.8rem; padding: 0 5.2rem 0 1.6rem; + text-overflow: ellipsis; + white-space: nowrap; + background: $input-background; border: 0.1rem solid $input-stroke; border-radius: 0.8rem; From 19191451fbc517373b1ef04325337d41d64f7c8f Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 19:16:39 +0900 Subject: [PATCH 14/18] =?UTF-8?q?feat:=20=EC=98=88=EC=95=BD=20=EC=8A=B9?= =?UTF-8?q?=EC=9D=B8/=EA=B1=B0=EC=A0=88=20=EB=88=84=EB=A5=B4=EB=A9=B4=20co?= =?UTF-8?q?nfirmModal=20=EC=97=B4=EB=A6=AC=EB=8F=84=EB=A1=9D=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/calendar/ModalCard/index.tsx | 7 +++-- .../calendar/ModalContents/index.tsx | 14 ++++++--- src/components/calendar/index.tsx | 31 +++++++++++++++++-- 3 files changed, 43 insertions(+), 9 deletions(-) diff --git a/src/components/calendar/ModalCard/index.tsx b/src/components/calendar/ModalCard/index.tsx index 33ff4c8a..14137505 100644 --- a/src/components/calendar/ModalCard/index.tsx +++ b/src/components/calendar/ModalCard/index.tsx @@ -15,9 +15,10 @@ type ModalCardProps = { nickName: string; headCount: number; status: MyReservationsStatus; + onClickButton: (text: string) => void; }; -const ModalCard = ({ nickName, headCount, status }: ModalCardProps) => { +const ModalCard = ({ nickName, headCount, status, onClickButton }: ModalCardProps) => { return (
      @@ -33,10 +34,10 @@ const ModalCard = ({ nickName, headCount, status }: ModalCardProps) => {
      {status === 'pending' ? ( - + onClickButton('거절')}> 거절 - + onClickButton('승인')}> 승인 diff --git a/src/components/calendar/ModalContents/index.tsx b/src/components/calendar/ModalContents/index.tsx index 3cf9e9c7..1ce4c726 100644 --- a/src/components/calendar/ModalContents/index.tsx +++ b/src/components/calendar/ModalContents/index.tsx @@ -24,10 +24,11 @@ const cx = classNames.bind(styles); type ModalContentsProps = { gameId: number; activeDate: string; - onClick: MouseEventHandler; + onClickCloseButton: MouseEventHandler; + onClickCardButton: (text: string) => void; }; -const ModalContents = ({ gameId, activeDate, onClick }: ModalContentsProps) => { +const ModalContents = ({ gameId, activeDate, onClickCloseButton, onClickCardButton }: ModalContentsProps) => { const DailyMockData: Record = { '2024-03-27': DailyScheduleMockData['2024-03-27'], '2024-03-30': DailyScheduleMockData['2024-03-30'], @@ -86,7 +87,12 @@ const ModalContents = ({ gameId, activeDate, onClick }: ModalContentsProps) => {
        2 })}> {reservations.map(({ nickname, headCount, status, id }) => (
      • - +
        • ))}
      @@ -95,7 +101,7 @@ const ModalContents = ({ gameId, activeDate, onClick }: ModalContentsProps) => { )}
      - + 닫기
      diff --git a/src/components/calendar/index.tsx b/src/components/calendar/index.tsx index 379f713c..a0bea4bf 100644 --- a/src/components/calendar/index.tsx +++ b/src/components/calendar/index.tsx @@ -8,7 +8,7 @@ import CalendarBody from '@/components/calendar/CalendarBody'; import CalendarHeader from '@/components/calendar/CalendarHeader'; import ListBody from '@/components/calendar/ListBody'; import ModalContents from '@/components/calendar/ModalContents'; -import { CommonModal } from '@/components/commons/modals'; +import { CommonModal, ConfirmModal, ModalButton } from '@/components/commons/modals'; import MockMonthlySchedule1 from '@/constants/mockData/myScheduleMockDataMonth1.json'; import MockMonthlySchedule2 from '@/constants/mockData/myScheduleMockDataMonth2.json'; import MockMonthlySchedule3 from '@/constants/mockData/myScheduleMockDataMonth3.json'; @@ -51,6 +51,7 @@ const Calendar = ({ gameId }: CalendarProps) => { const [currentMonth, setCurrentMonth] = useState(today.month); const [monthlySchedule, setMonthlySchedule] = useState([]); const [activeDate, setActiveDate] = useState(''); + const [confirmText, setConfirmText] = useState('승인'); const { multiState, toggleClick } = useMultiState(['scheduleModal, confirmModal']); const currentDeviceType = useDeviceType(); @@ -74,6 +75,11 @@ const Calendar = ({ gameId }: CalendarProps) => { toggleClick('scheduleModal'); }; + const handleConfirmClick = (text: string) => { + setConfirmText(text); + toggleClick('confirmModal'); + }; + useEffect(() => { if (currentDeviceType !== 'PC') setIsCalendar(false); }, [currentDeviceType]); @@ -111,7 +117,28 @@ const Calendar = ({ gameId }: CalendarProps) => { onClose={() => toggleClick('scheduleModal')} title={'예약 정보'} renderContent={ - toggleClick('scheduleModal')} /> + toggleClick('scheduleModal')} + onClickCardButton={handleConfirmClick} + /> + } + /> + toggleClick('confirmModal')} + state='WARNING' + title={`예약 신청을 ${confirmText}하시겠습니까?`} + desc={`한번 ${confirmText}한 예약은 되돌릴 수 없습니다.`} + renderButton={ + <> + toggleClick('confirmModal')}> + 확인 + + toggleClick('confirmModal')}>취소 + } /> From 5d907fbc1436b1e2777e1f6173b99a3d8637e69e Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 20:22:18 +0900 Subject: [PATCH 15/18] =?UTF-8?q?feat:=20=EC=98=88=EC=95=BD=20=ED=98=84?= =?UTF-8?q?=ED=99=A9=20=EB=AA=A8=EB=8B=AC=20=ED=83=9C=EB=B8=94=EB=A6=BF=20?= =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=EC=97=90=EC=84=9C=20=EA=BD=89=20?= =?UTF-8?q?=EC=B0=A8=EA=B2=8C=20=EA=B5=AC=ED=98=84=20(CommonModal=20?= =?UTF-8?q?=EC=88=98=EC=A0=95)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/calendar/index.tsx | 1 + .../commons/modals/CommonModal.module.scss | 35 +++++++++++++++++++ src/components/commons/modals/CommonModal.tsx | 18 ++++++++-- 3 files changed, 52 insertions(+), 2 deletions(-) diff --git a/src/components/calendar/index.tsx b/src/components/calendar/index.tsx index a0bea4bf..ca6c3ee1 100644 --- a/src/components/calendar/index.tsx +++ b/src/components/calendar/index.tsx @@ -116,6 +116,7 @@ const Calendar = ({ gameId }: CalendarProps) => { openModal={multiState.scheduleModal} onClose={() => toggleClick('scheduleModal')} title={'예약 정보'} + isResponsive renderContent={ ; title: string; renderContent: ReactNode; + isResponsive?: boolean; }; -export const CommonModal = ({ openModal, onClose, title, renderContent }: CommonModalProps) => { +export const CommonModal = ({ openModal, onClose, title, renderContent, isResponsive }: CommonModalProps) => { return (
      +
      + +

      {title}

      {renderContent}
      From ceef9e33d1d90f652aa1a9b102dee4cb82f4381f Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 20:50:24 +0900 Subject: [PATCH 16/18] =?UTF-8?q?feat:=20=ED=83=9C=EB=B8=94=EB=A6=BF=20?= =?UTF-8?q?=EC=9D=B4=ED=95=98=EC=97=90=EC=84=9C=20=EB=8B=AB=EA=B8=B0=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20large=20=EC=82=AC=EC=9D=B4=EC=A6=88?= =?UTF-8?q?=EB=A1=9C=20=ED=82=A4=EC=9A=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calendar/ModalContents/ModalContents.module.scss | 5 ++++- src/components/calendar/ModalContents/index.tsx | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/calendar/ModalContents/ModalContents.module.scss b/src/components/calendar/ModalContents/ModalContents.module.scss index 2d74e218..c8d2ed70 100644 --- a/src/components/calendar/ModalContents/ModalContents.module.scss +++ b/src/components/calendar/ModalContents/ModalContents.module.scss @@ -54,7 +54,10 @@ } &-close { - flex-grow: 0; + @include responsive(T) { + margin: 0; + } + margin: 0 auto; } } diff --git a/src/components/calendar/ModalContents/index.tsx b/src/components/calendar/ModalContents/index.tsx index 1ce4c726..fd883c76 100644 --- a/src/components/calendar/ModalContents/index.tsx +++ b/src/components/calendar/ModalContents/index.tsx @@ -14,6 +14,7 @@ import reservationDetailMockDataDeclined from '@/constants/mockData/reservationD 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'; @@ -57,6 +58,8 @@ const ModalContents = ({ gameId, activeDate, onClickCloseButton, onClickCardButt const [selectedStatus, setSelectedStatus] = useState(statusTabOptions[0].id); + const currentDeviceType = useDeviceType(); + const { totalCount, reservations } = ReservationMockData[`${scheduleId}-${selectedStatus}`]; const handleChangeScheduleId = (value: string | number) => { @@ -101,7 +104,7 @@ const ModalContents = ({ gameId, activeDate, onClickCloseButton, onClickCardButt )}
      - + 닫기
      From 55bfdb758a784c487ea33828ea4471201de4bbe4 Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 23:55:06 +0900 Subject: [PATCH 17/18] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=EC=B0=BD=20?= =?UTF-8?q?=ED=99=95=EC=9D=B8=EB=B2=84=ED=8A=BC=20=ED=83=9C=EB=B8=94?= =?UTF-8?q?=EB=A6=BF=20=EC=9D=B4=ED=95=98=EC=97=90=EC=84=9C=20=EB=B0=94?= =?UTF-8?q?=EB=8B=A5=EC=97=90=20=EB=B6=99=EA=B2=8C=EB=81=94=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ModalContents/ModalContents.module.scss | 9 ++++++++ .../commons/modals/CommonModal.module.scss | 22 ++++++++++++------- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/src/components/calendar/ModalContents/ModalContents.module.scss b/src/components/calendar/ModalContents/ModalContents.module.scss index c8d2ed70..7e82a232 100644 --- a/src/components/calendar/ModalContents/ModalContents.module.scss +++ b/src/components/calendar/ModalContents/ModalContents.module.scss @@ -1,6 +1,11 @@ .schedule-modal { &-container { @include column-flexbox(start, stretch, 1.6rem); + + @include responsive(T) { + justify-content: space-between; + height: 100%; + } } &-date { @@ -18,6 +23,10 @@ &-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); diff --git a/src/components/commons/modals/CommonModal.module.scss b/src/components/commons/modals/CommonModal.module.scss index b274d389..4652852b 100644 --- a/src/components/commons/modals/CommonModal.module.scss +++ b/src/components/commons/modals/CommonModal.module.scss @@ -81,18 +81,24 @@ &::after { display: none; } - } - .modal-mobile-nav { - width: 100%; - height: 5.6rem; - border-bottom: 0.1rem solid $opacity-white-10; - } + .modal-inner { + height: 100%; + } - .modal-header-title { - @include responsive(T) { + .modal-mobile-nav { + width: 100%; + height: 5.6rem; + border-bottom: 0.1rem solid $opacity-white-10; + } + + .modal-header-title { padding-top: 2.4rem; } + + .modal-content { + height: 100%; + } } } From 14207ffe9161b2a732563168b94c87d5c7cd20f4 Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Fri, 29 Mar 2024 08:16:56 +0900 Subject: [PATCH 18/18] =?UTF-8?q?refactor:=20=EC=BD=94=EB=93=9C=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calendar/ModalContents/index.tsx | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/src/components/calendar/ModalContents/index.tsx b/src/components/calendar/ModalContents/index.tsx index fd883c76..7b188bd6 100644 --- a/src/components/calendar/ModalContents/index.tsx +++ b/src/components/calendar/ModalContents/index.tsx @@ -37,10 +37,10 @@ const ModalContents = ({ gameId, activeDate, onClickCloseButton, onClickCardButt }; const ReservationMockData: Record = { - '0-confirmed': reservationDetailMockDataConfirmed as DetailReservationResponse, - '0-declined': reservationDetailMockDataDeclined as DetailReservationResponse, - '0-pending': reservationDetailMockDataPending as DetailReservationResponse, - '1-pending': reservationDetailMockDataPendingNoData as 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]); @@ -60,22 +60,19 @@ const ModalContents = ({ gameId, activeDate, onClickCloseButton, onClickCardButt const currentDeviceType = useDeviceType(); - const { totalCount, reservations } = ReservationMockData[`${scheduleId}-${selectedStatus}`]; + 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); }; - console.log(gameId); - return (
      - setSelectedStatus(selectedId as MyReservationsStatus)} - /> +

      예약 날짜

      {getDateStringKR(activeDate)}