Skip to content

Commit

Permalink
(#58) 스케줄 캘린더 컴포넌트 레이아웃, 로직 변경
Browse files Browse the repository at this point in the history
  • Loading branch information
JinJu committed Dec 12, 2023
1 parent 40f91e4 commit 99c42a2
Show file tree
Hide file tree
Showing 6 changed files with 163 additions and 94 deletions.
10 changes: 5 additions & 5 deletions src/core/components/Calendar/DatePickerCalendar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,24 +30,24 @@ export const useDatePickerCalendar = (): UseDatePickerCalendarResponse => {
const [ periodDateArray, setPeriodDateArray ] = useState<string[]>([]);

const onDateClick = useCallback((variants: DatePickerType, afterAllDate: boolean, calendarDate: CalendarDateDto) => {
const curruntDate = calendarDate.dayjs.format("YYYY-MM-DD");
const currentDate = calendarDate.dayjs.format("YYYY-MM-DD");
const newPeriodDates = periodDates;

if ((periodDates.startDate && periodDates.endDate) || afterAllDate) {
newPeriodDates.startDate = curruntDate;
newPeriodDates.startDate = currentDate;
newPeriodDates.endDate = "";
return;
}

if (variants === "period" && periodDates.startDate) {
if (!dayjs(periodDates.startDate).isAfter(calendarDate.dayjs)) {
newPeriodDates.endDate = curruntDate;
newPeriodDates.endDate = currentDate;
} else {
newPeriodDates.startDate = curruntDate;
newPeriodDates.startDate = currentDate;
newPeriodDates.endDate = "";
}
} else {
newPeriodDates.startDate = curruntDate;
newPeriodDates.startDate = currentDate;
newPeriodDates.endDate = "";
}
}, [periodDates]);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,22 +21,66 @@ export const Default = () => {
}, [selectedDate]);

return (
<div className = {"w-screen"}>
<div className = {"w-screen h-[1000px]"}>
<ScheduleCalendar
markedDates = {[
{ "2023-12-01": ["방학"] },
{ "2023-12-02": [undefined] },
{ "2023-12-03": [undefined] },
{ "2023-12-04": [undefined] },
{ "2023-12-05": [undefined] },
{ "2023-12-06": [undefined] },
{ "2023-12-07": [undefined] },
{ "2023-12-08": [undefined] },
{ "2023-12-09": [undefined] },
{ "2023-12-10": [undefined] },
{ "2023-12-11": [undefined] },
{ "2023-12-15": ["정식 전환일"] },
]}
schedulesData = {{
"2023-11-30": {
quantity: 10,
markedDates: ["특강"],
},
"2023-12-01": {
quantity: 10,
markedDates: ["방학"],
},
"2023-12-02": {
quantity: 10,
markedDates: [undefined],
},
"2023-12-03": {
quantity: 10,
markedDates: [undefined],
},
"2023-12-04": {
quantity: 10,
markedDates: [undefined],
},
"2023-12-05": {
quantity: 10,
markedDates: [undefined],
},
"2023-12-06": {
quantity: 10,
markedDates: [ undefined, "견학" ],
},
"2023-12-07": {
quantity: 10,
markedDates: [undefined],
},
"2023-12-08": {
quantity: 10,
markedDates: [undefined],
},
"2023-12-09": {
quantity: 10,
markedDates: [undefined],
},
"2023-12-10": {
quantity: 10,
markedDates: [undefined],
},
"2023-12-11": {
quantity: 10,
markedDates: [undefined],
},
"2023-12-12": {
quantity: 10,
markedDates: [undefined],
},
"2023-12-15": {
quantity: 10,
markedDates: ["정식 전환일"],
},
}}
onDateClick = {onDateClick}
/>
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/core/components/Calendar/ScheduleCalendar/index.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { CalendarDayComponent } from "@/core/components/Calendar/ScheduleCalendar/subs/CalendarDayComponent";
import { CalendarComponentProps } from "@/core/components/Calendar/ScheduleCalendar/types/CalendarComponentProps";
import { useCalendar } from "@/core/components/Calendar/common/hooks/useCalendar";
import { CalendarWeekDayComponent } from "@/core/components/Calendar/common/subs/CalendarWeekdayComponent";
import { CalendarHeader } from "@/core/components/Calendar/common/subs/CalendarHeader";
import { CalendarDayComponent } from "@/core/components/Calendar/ScheduleCalendar/subs/ComponentDayComponent";
import { CalendarComponentProps } from "@/core/components/Calendar/ScheduleCalendar/types/CalendarComponentProps";
import { CalendarWeekDayComponent } from "@/core/components/Calendar/common/subs/CalendarWeekdayComponent";

const ScheduleCalendar = ({
markedDates,
schedulesData,
onDateClick,
}: CalendarComponentProps) => {
const { models, operations } = useCalendar();
Expand All @@ -19,7 +19,7 @@ const ScheduleCalendar = ({
/>
<CalendarWeekDayComponent />
<CalendarDayComponent
markedDates = {markedDates}
schedulesData = {schedulesData}
calendarDates = {models.calendarDates}
onDateClick = {onDateClick}
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import clsx from "clsx";

import { CalendarComponentProps } from "@/core/components/Calendar/ScheduleCalendar/types/CalendarComponentProps";
import { CalendarDateDto } from "@/core/components/Calendar/common/types/CalendarDateDto";
import Typography from "@/core/components/Typography";

interface CalendarDayComponentProps extends CalendarComponentProps {
calendarDates: CalendarDateDto[][];
}

export const CalendarDayComponent = ({
schedulesData,
calendarDates,
onDateClick,
}: CalendarDayComponentProps) => {
return(
<>
{ calendarDates.map((calendarWeekDates: CalendarDateDto[], index) => (
<div
key = {index}
className = {"grid grid-cols-7 min-w-full w-full flex-1"}
>
{calendarWeekDates.map((calendarDate: CalendarDateDto, index: number) => {
return (
<button
key = {index}
type = "button"
disabled = {!calendarDate.isThisMonth}
className = "flex-v-stack items-center h-full text-center"
onClick = {(): void => {
const currentDate: string = calendarDate.dayjs.format("YYYY-MM-DD");
onDateClick(currentDate);
}}
>
<div
className = {clsx("relative flex justify-center items-center h-8",
{
"w-8 rounded-full bg-gray-03": calendarDate.isToday,
"text-gray-03": !calendarDate.isThisMonth,
},
)}
>
<Typography
text = {`${calendarDate.dayjs.date()}`}
theme = "body-01-bold"
className = "text-inherit"
/>
{schedulesData && Object.keys(schedulesData).map((scheduleDate, index) => (
scheduleDate === calendarDate.dayjs.format("YYYY-MM-DD") &&
<Typography
key = {index}
text = {`(${schedulesData?.[scheduleDate].quantity})`}
className = "absolute top-[3px] end-0 translate-x-[calc(100%+0.625rem)]"
color = {`${!calendarDate.isThisMonth ? "gray-03" : "primary-03"}`}
/>
))}
</div>
{schedulesData && Object.keys(schedulesData).map(markedDate => (
markedDate === calendarDate.dayjs.format("YYYY-MM-DD") &&
<div className = "flex-v-stack gap-1 w-full pt-1" key = {markedDate}>
{
schedulesData?.[markedDate].markedDates?.map((markedDateValue, index) => (
<div
key = {index}
className = {`${!calendarDate.isThisMonth ? "bg-gray-00 text-primary-00" : "bg-primary-00 text-primary-02"}`}
>
&nbsp;
<Typography
theme = "body-02-bold"
text = {markedDateValue === undefined ? "" : markedDateValue}
className = "text-inherit"
/>
&nbsp;
</div>
))
}
</div>
))}
</button>
);
})}
</div>
))}
</>
);
};

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@

export interface MarkedDatesProps {
[date: string]: string[] | undefined[];
markedDates?: (string | undefined)[];
quantity?: number;
}

export interface SchedulesDataProps {
[date: string]: MarkedDatesProps;
}

export interface CalendarComponentProps {
markedDates?: MarkedDatesProps[];
schedulesData?: SchedulesDataProps;
onDateClick: (date: string) => void;
}

0 comments on commit 99c42a2

Please sign in to comment.