From 31ca989bfb822c7629e7de8cacb826be2ad88918 Mon Sep 17 00:00:00 2001 From: Seok93 Date: Fri, 19 Jul 2024 15:12:50 +0900 Subject: [PATCH] =?UTF-8?q?UI:=20#51=20Calendar=20Custom=20Component=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/date.ts | 24 ++++++++++++++++++++ src/layouts/page/ProjectLayout.tsx | 2 +- src/pages/project/CalendarPage.tsx | 35 +++++++++++++++--------------- src/types/CustomEventType.tsx | 7 ++++++ 4 files changed, 49 insertions(+), 19 deletions(-) create mode 100644 src/constants/date.ts create mode 100644 src/types/CustomEventType.tsx diff --git a/src/constants/date.ts b/src/constants/date.ts new file mode 100644 index 00000000..b8e81e1d --- /dev/null +++ b/src/constants/date.ts @@ -0,0 +1,24 @@ +export enum LuxonMonth { + JANUARY = 1, + FEBRUARY, + MARCH, + APRIL, + MAY, + JUNE, + JULY, + AUGUST, + SEPTEMBER, + OCTOBER, + NOVEMBER, + DECEMBER, +} + +export enum LuxonWeekday { + MONDAY = 1, + TUESDAY, + WEDNESDAY, + THURSDAY, + FRIDAY, + SATURDAY, + SUNDAY, +} diff --git a/src/layouts/page/ProjectLayout.tsx b/src/layouts/page/ProjectLayout.tsx index 8891d530..f451cd1e 100644 --- a/src/layouts/page/ProjectLayout.tsx +++ b/src/layouts/page/ProjectLayout.tsx @@ -32,7 +32,7 @@ export default function ProjectLayout() {
-
+
  • (isActive ? 'text-main' : 'text-emphasis')}> diff --git a/src/pages/project/CalendarPage.tsx b/src/pages/project/CalendarPage.tsx index 41db0325..5ecbb29e 100644 --- a/src/pages/project/CalendarPage.tsx +++ b/src/pages/project/CalendarPage.tsx @@ -2,14 +2,15 @@ import { useCallback, useMemo, useState } from 'react'; import { DateTime, Settings } from 'luxon'; import { Calendar, luxonLocalizer, Views } from 'react-big-calendar'; import CalendarToolbar from '@components/task/calendar/CalendarToolbar'; -import CustomEvent, { CustomEvents } from '@components/task/calendar/CustomEvent'; import CustomDateHeader from '@components/task/calendar/CustomDateHeader'; +import CustomEventWrapper from '@components/task/calendar/CustomEventWrapper'; import useModal from '@hooks/useModal'; import ModalLayout from '@layouts/ModalLayout'; import ModalPortal from '@components/modal/ModalPortal'; import ModaFormButton from '@components/modal/ModaFormButton'; import { TASK_DUMMY } from '@mocks/mockData'; import { TaskListWithStatus, TaskWithStatus } from '@/types/TaskType'; +import { CustomEvent } from '@/types/CustomEventType'; import 'react-big-calendar/lib/css/react-big-calendar.css'; function getCalendarTask(statusTasks: TaskListWithStatus[]) { @@ -21,7 +22,6 @@ function getCalendarTask(statusTasks: TaskListWithStatus[]) { calendarTasks.push({ statusId, statusName, color, statusOrder, ...task }); }); }); - console.log(calendarTasks); return calendarTasks; } @@ -35,28 +35,29 @@ export default function CalendarPage() { const [selectedTask, setSelectedTask] = useState(); const [date, setDate] = useState(() => DateTime.now().toJSDate()); - const onNavigate = useCallback((newDate: Date) => setDate(newDate), [setDate]); + const handleNavigate = useCallback((newDate: Date) => setDate(newDate), [setDate]); const handleEventClick = (task: TaskWithStatus) => { setSelectedTask(task); openModal(); }; - const handleSelectEvent = (event: CustomEvents) => { + const handleSelectEvent = (event: CustomEvent) => { setSelectedTask(event?.task); openModal(); }; const handleSelectSlot = useCallback(({ start, end }: { start: Date; end: Date }) => { - console.log(`시작일: ${start}, 마감일: ${end}`); - alert('날짜가 선택되었어요!'); + alert(`시작일: ${start}, 마감일: ${end}`); }, []); + const handleEventPropGetter = () => ({ style: { padding: '0px', backgroundColor: 'inherit' } }); + const { views, components: customComponents } = useMemo( () => ({ views: [Views.MONTH], components: { - event: CustomEvent, + eventWrapper: CustomEventWrapper, month: { header: () => undefined, dateHeader: CustomDateHeader, @@ -78,23 +79,23 @@ export default function CalendarPage() { })) .sort((a, b) => a.start.getTime() - b.start.getTime()), }; + const startDate = state.events.length ? state.events[0].start : null; - // ToDo: 캘린더 스타일 변경을 위해 커스텀 컴포넌트 추가 + // ToDo: 프로젝트 기간 이외의 영역 처리 // ToDo: DnD, Resize 이벤트 추가 생각해보기 // ToDo: 할일 추가 모달 Form 작업 완료시 모달 컴포넌트 분리 - // ToDo: react-big-calendar CSS overwrite - // ToDo: 할일이 아예 없는 경우 처리 추가할 것 // ToDo: 캘린더 크기 전체적으로 조정 // ToDo: 코드 리팩토링 return ( -
    - +
    + ({ - style: { padding: '0px' }, - })} - // selectable - // onSelectSlot={handleSelectSlot} + eventPropGetter={handleEventPropGetter} + selectable + onSelectSlot={handleSelectSlot} /> {showModal && ( diff --git a/src/types/CustomEventType.tsx b/src/types/CustomEventType.tsx new file mode 100644 index 00000000..1fdb5401 --- /dev/null +++ b/src/types/CustomEventType.tsx @@ -0,0 +1,7 @@ +import { Event } from 'react-big-calendar'; +import { TaskWithStatus } from '@/types/TaskType'; + +export type CustomEvent = Event & { + task: TaskWithStatus; + handleEventClick: (task: TaskWithStatus) => void; +};