npm - @causw/core - Versions diffs - 0.0.24 → 0.0.26 - Mend

@causw/core 0.0.24 → 0.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

package/dist/components/Calendar/Calendar.cjs CHANGED Viewed

@@ -23,12 +23,14 @@ const getEventRange = (event) => {
 		end: event.endDate ? parseDateStr(event.endDate) : start
 	};
 };
-const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new Date(), today = /* @__PURE__ */ new Date(), showToday = true, size, selectedStartDate, selectedEndDate, onDateClick, onEventClick, enableHover = false }) => {
-	const { wrapper, layoutContainer, header, navContainerLeft, navContainerRight, navButton, navIcon, caption, gridHeader, weekday, gridBody, cell, cellEmpty, eventList, eventItemHeight } = require_Calendar_styles.calendar({
+const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new Date(), today = /* @__PURE__ */ new Date(), showToday = true, size, selectedStartDate, selectedEndDate, onDateClick, onEventClick, onPrevMonth, onNextMonth, enableHover = false }) => {
+	const { wrapper, layoutContainer, header, navContainerLeft, navContainerRight, navButton, navIcon, caption, gridHeader, weekday, gridBody, cell, cellEmpty, eventList, eventItemHeight, moreBadge } = require_Calendar_styles.calendar({
 		size,
 		hoverEffect: enableHover
 	});
 	const [currentMonth, setCurrentMonth] = (0, react.useState)(defaultMonth);
+	const monthStart = (0, react.useMemo)(() => (0, date_fns.startOfMonth)(currentMonth), [currentMonth]);
+	const monthEnd = (0, react.useMemo)(() => (0, date_fns.endOfMonth)(currentMonth), [currentMonth]);
 	const totalDays = (0, date_fns.getDaysInMonth)(currentMonth);
 	const startDayIndex = (0, date_fns.getDay)((0, date_fns.startOfMonth)(currentMonth));
 	const weekDays = [
@@ -40,56 +42,88 @@ const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new D
 		"금",
 		"토"
 	];
-	const handlePrevMonth = () => setCurrentMonth((prev) => (0, date_fns.subMonths)(prev, 1));
-	const handleNextMonth = () => setCurrentMonth((prev) => (0, date_fns.addMonths)(prev, 1));
+	const handlePrevMonth = () => {
+		const newDate = (0, date_fns.subMonths)(currentMonth, 1);
+		setCurrentMonth(newDate);
+		onPrevMonth?.(newDate);
+	};
+	const handleNextMonth = () => {
+		const newDate = (0, date_fns.addMonths)(currentMonth, 1);
+		setCurrentMonth(newDate);
+		onNextMonth?.(newDate);
+	};
 	const eventsByDate = (0, react.useMemo)(() => {
 		const map = /* @__PURE__ */ new Map();
-		const mStart = (0, date_fns.startOfMonth)(currentMonth);
-		const mEnd = (0, date_fns.endOfMonth)(currentMonth);
-		const relevantEvents = events.filter((event) => {
-			const { start, end } = getEventRange(event);
-			return start <= mEnd && end >= mStart;
-		});
-		relevantEvents.sort((a, b) => {
-			const aRange = getEventRange(a);
-			const bRange = getEventRange(b);
-			const aDur = (0, date_fns.differenceInCalendarDays)(aRange.end, aRange.start);
-			const bDur = (0, date_fns.differenceInCalendarDays)(bRange.end, bRange.start);
-			if (bDur !== aDur) return bDur - aDur;
-			return aRange.start.getTime() - bRange.start.getTime();
-		});
-		for (const event of relevantEvents) {
-			const { start, end } = getEventRange(event);
-			let d = start < mStart ? mStart : start;
-			const eventEndDate = end > mEnd ? mEnd : end;
-			let slot = 0;
-			let found = false;
-			while (!found) {
-				let isFree = true;
-				let tempD = new Date(d);
-				while (tempD <= eventEndDate) {
-					const dateKey = formatDateStr(tempD);
-					if ((map.get(dateKey) || [])[slot]) {
-						isFree = false;
-						break;
+		const mStart = (0, date_fns.subDays)(monthStart, (0, date_fns.getDay)(monthStart));
+		const mEnd = (0, date_fns.addDays)(monthEnd, 6 - (0, date_fns.getDay)(monthEnd));
+		const weeks = [];
+		let curr = mStart;
+		while (curr <= mEnd) {
+			weeks.push({
+				start: curr,
+				end: (0, date_fns.addDays)(curr, 6)
+			});
+			curr = (0, date_fns.addDays)(curr, 7);
+		}
+		for (const week of weeks) {
+			const { start: wStart, end: wEnd } = week;
+			const weeklyEvents = events.filter((event) => {
+				const { start, end } = getEventRange(event);
+				return start <= wEnd && end >= wStart;
+			});
+			weeklyEvents.sort((a, b) => {
+				const aRange = getEventRange(a);
+				const bRange = getEventRange(b);
+				const aSegStart = aRange.start < wStart ? wStart : aRange.start;
+				const bSegStart = bRange.start < wStart ? wStart : bRange.start;
+				const startDiff = aSegStart.getTime() - bSegStart.getTime();
+				if (startDiff !== 0) return startDiff;
+				const aIsSingle = aRange.start.getTime() === aRange.end.getTime();
+				const bIsSingle = bRange.start.getTime() === bRange.end.getTime();
+				if (aIsSingle && !bIsSingle) return -1;
+				if (!aIsSingle && bIsSingle) return 1;
+				const aDur = (0, date_fns.differenceInCalendarDays)(aRange.end, aRange.start);
+				const bDur = (0, date_fns.differenceInCalendarDays)(bRange.end, bRange.start);
+				if (aDur !== bDur) return bDur - aDur;
+				return a.id.toString().localeCompare(b.id.toString());
+			});
+			for (const event of weeklyEvents) {
+				const { start, end } = getEventRange(event);
+				const segStart = start < wStart ? wStart : start;
+				const segEnd = end > wEnd ? wEnd : end;
+				let slot = 0;
+				let found = false;
+				while (!found) {
+					let isFree = true;
+					let tempD = new Date(segStart);
+					while (tempD <= segEnd) {
+						const dateKey = formatDateStr(tempD);
+						if ((map.get(dateKey) || [])[slot]) {
+							isFree = false;
+							break;
+						}
+						tempD = (0, date_fns.addDays)(tempD, 1);
 					}
-					tempD = (0, date_fns.addDays)(tempD, 1);
+					if (isFree) found = true;
+					else slot++;
+				}
+				let assignD = new Date(segStart);
+				while (assignD <= segEnd) {
+					const dateKey = formatDateStr(assignD);
+					const dailySlots = map.get(dateKey) || [];
+					while (dailySlots.length <= slot) dailySlots.push(null);
+					dailySlots[slot] = event;
+					map.set(dateKey, dailySlots);
+					assignD = (0, date_fns.addDays)(assignD, 1);
 				}
-				if (isFree) found = true;
-				else slot++;
-			}
-			let assignD = new Date(d);
-			while (assignD <= eventEndDate) {
-				const dateKey = formatDateStr(assignD);
-				const dailySlots = map.get(dateKey) || [];
-				while (dailySlots.length <= slot) dailySlots.push(null);
-				dailySlots[slot] = event;
-				map.set(dateKey, dailySlots);
-				assignD = (0, date_fns.addDays)(assignD, 1);
 			}
 		}
 		return map;
-	}, [currentMonth, events]);
+	}, [
+		monthStart,
+		monthEnd,
+		events
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		className: wrapper({ className }),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
@@ -143,7 +177,9 @@ const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new D
 						const day = i + 1;
 						const currentDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
 						const dateKey = formatDateStr(currentDate);
-						const daysEvents = eventsByDate.get(dateKey) || [];
+						const rawDaysEvents = eventsByDate.get(dateKey) || [];
+						const daysEvents = rawDaysEvents.slice(0, 4);
+						const extraCount = rawDaysEvents.slice(4).filter(Boolean).length;
 						const isToday = showToday && (0, date_fns.isSameDay)(currentDate, today);
 						const isStart = selectedStartDate && (0, date_fns.isSameDay)(currentDate, selectedStartDate);
 						const isEnd = selectedEndDate && (0, date_fns.isSameDay)(currentDate, selectedEndDate);
@@ -165,16 +201,18 @@ const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new D
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: require_Calendar_styles.calendar({ selectionState }).dayNumber(),
 								children: day
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Flex, {
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
 								className: eventList(),
-								children: daysEvents.map((ev, idx) => {
+								children: [daysEvents.map((ev, idx) => {
 									if (!ev) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: eventItemHeight() }, `empty-${idx}`);
 									const { start, end } = getEventRange(ev);
 									const currentDayIndex = (0, date_fns.getDay)(currentDate);
 									const weekStart = (0, date_fns.subDays)(currentDate, currentDayIndex);
 									const weekEnd = (0, date_fns.addDays)(currentDate, 6 - currentDayIndex);
-									const segmentStart = start < weekStart ? weekStart : start;
-									const segmentDuration = (0, date_fns.differenceInCalendarDays)(end > weekEnd ? weekEnd : end, segmentStart) + 1;
+									const boundedWeekStart = weekStart < monthStart ? monthStart : weekStart;
+									const boundedWeekEnd = weekEnd > monthEnd ? monthEnd : weekEnd;
+									const segmentStart = start < boundedWeekStart ? boundedWeekStart : start;
+									const segmentDuration = (0, date_fns.differenceInCalendarDays)(end > boundedWeekEnd ? boundedWeekEnd : end, segmentStart) + 1;
 									const indexInSegment = (0, date_fns.differenceInCalendarDays)(currentDate, segmentStart);
 									const startDateKey = formatDateStr(start);
 									const endDateKey = formatDateStr(end);
@@ -189,11 +227,11 @@ const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new D
 											e.stopPropagation();
 											onEventClick?.(ev);
 										},
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: bgBar() }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: bgBar() }), indexInSegment === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 											className: textLayer(),
 											style: {
 												width: `calc(${segmentDuration} * 100%)`,
-												left: `calc(-${indexInSegment} * 100%)`
+												left: 0
 											},
 											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 												className: textSpan(),
@@ -201,7 +239,14 @@ const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new D
 											})
 										})]
 									}, `${ev.id}-${idx}`);
-								})
+								}), extraCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: moreBadge(),
+									children: [
+										"+",
+										extraCount,
+										"개"
+									]
+								})]
 							})]
 						}, day);
 					})]

package/dist/components/Calendar/Calendar.d.cts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { CalendarVariants, EventBarStylesVariants } from "./Calendar.styles.cjs";
-import * as react_jsx_runtime76 from "react/jsx-runtime";
+import * as react_jsx_runtime47 from "react/jsx-runtime";
 //#region src/components/Calendar/Calendar.d.ts
 type CalendarEvent = {
@@ -19,6 +19,8 @@ interface CalendarProps extends CalendarVariants {
   selectedEndDate?: Date;
   onDateClick?: (date: Date) => void;
   onEventClick?: (event: CalendarEvent) => void;
+  onPrevMonth?: (date: Date) => void;
+  onNextMonth?: (date: Date) => void;
   enableHover?: boolean;
 }
 declare const Calendar: {
@@ -33,8 +35,10 @@ declare const Calendar: {
     selectedEndDate,
     onDateClick,
     onEventClick,
+    onPrevMonth,
+    onNextMonth,
     enableHover
-  }: CalendarProps): react_jsx_runtime76.JSX.Element;
+  }: CalendarProps): react_jsx_runtime47.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/components/Calendar/Calendar.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.d.cts","names":[],"sources":["../../../src/components/Calendar/Calendar.tsx"],"mappings":";;;;KA8BY,aAAA;EACV,EAAA;EACA,KAAA;EACA,SAAA;EACA,OAAA;EACA,IAAA,EAAM,WAAA,CAAY,sBAAA;AAAA;AAAA,UAGH,aAAA,SAAsB,gBAAA;EACrC,SAAA;EACA,MAAA,GAAS,aAAA;EACT,YAAA,GAAe,IAAA;EACf,KAAA,GAAQ,IAAA;EACR,SAAA;EACA,iBAAA,GAAoB,IAAA;EACpB,eAAA,GAAkB,IAAA;EAClB,WAAA,IAAe,IAAA,EAAM,IAAA;EACrB,YAAA,IAAgB,KAAA,EAAO,aAAA;EACvB,WAAA;AAAA;AAAA,cAeW,QAAA;EAAA~~;;;;;;;;;;;;KAYV~~,aAAA,GAAa,mBAAA,CAAA,GAAA,CAAA,OAAA"}
1	+ {"version":3,"file":"Calendar.d.cts","names":[],"sources":["../../../src/components/Calendar/Calendar.tsx"],"mappings":";;;;KA8BY,aAAA;EACV,EAAA;EACA,KAAA;EACA,SAAA;EACA,OAAA;EACA,IAAA,EAAM,WAAA,CAAY,sBAAA;AAAA;AAAA,UAGH,aAAA,SAAsB,gBAAA;EACrC,SAAA;EACA,MAAA,GAAS,aAAA;EACT,YAAA,GAAe,IAAA;EACf,KAAA,GAAQ,IAAA;EACR,SAAA;EACA,iBAAA,GAAoB,IAAA;EACpB,eAAA,GAAkB,IAAA;EAClB,WAAA,IAAe,IAAA,EAAM,IAAA;EACrB,YAAA,IAAgB,KAAA,EAAO,aAAA;EACvB,WAAA,IAAe,IAAA,EAAM,IAAA;EACrB,WAAA,IAAe,IAAA,EAAM,IAAA;EACrB,WAAA;AAAA;AAAA,cAeW,QAAA;EAAA;;;;;;;;;;;;;;KAcV,aAAA,GAAa,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/Calendar/Calendar.d.mts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { CalendarVariants, EventBarStylesVariants } from "./Calendar.styles.mjs";
-import * as react_jsx_runtime81 from "react/jsx-runtime";
+import * as react_jsx_runtime55 from "react/jsx-runtime";
 //#region src/components/Calendar/Calendar.d.ts
 type CalendarEvent = {
@@ -19,6 +19,8 @@ interface CalendarProps extends CalendarVariants {
   selectedEndDate?: Date;
   onDateClick?: (date: Date) => void;
   onEventClick?: (event: CalendarEvent) => void;
+  onPrevMonth?: (date: Date) => void;
+  onNextMonth?: (date: Date) => void;
   enableHover?: boolean;
 }
 declare const Calendar: {
@@ -33,8 +35,10 @@ declare const Calendar: {
     selectedEndDate,
     onDateClick,
     onEventClick,
+    onPrevMonth,
+    onNextMonth,
     enableHover
-  }: CalendarProps): react_jsx_runtime81.JSX.Element;
+  }: CalendarProps): react_jsx_runtime55.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/components/Calendar/Calendar.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.d.mts","names":[],"sources":["../../../src/components/Calendar/Calendar.tsx"],"mappings":";;;;KA8BY,aAAA;EACV,EAAA;EACA,KAAA;EACA,SAAA;EACA,OAAA;EACA,IAAA,EAAM,WAAA,CAAY,sBAAA;AAAA;AAAA,UAGH,aAAA,SAAsB,gBAAA;EACrC,SAAA;EACA,MAAA,GAAS,aAAA;EACT,YAAA,GAAe,IAAA;EACf,KAAA,GAAQ,IAAA;EACR,SAAA;EACA,iBAAA,GAAoB,IAAA;EACpB,eAAA,GAAkB,IAAA;EAClB,WAAA,IAAe,IAAA,EAAM,IAAA;EACrB,YAAA,IAAgB,KAAA,EAAO,aAAA;EACvB,WAAA;AAAA;AAAA,cAeW,QAAA;EAAA~~;;;;;;;;;;;;KAYV~~,aAAA,GAAa,mBAAA,CAAA,GAAA,CAAA,OAAA"}
1	+ {"version":3,"file":"Calendar.d.mts","names":[],"sources":["../../../src/components/Calendar/Calendar.tsx"],"mappings":";;;;KA8BY,aAAA;EACV,EAAA;EACA,KAAA;EACA,SAAA;EACA,OAAA;EACA,IAAA,EAAM,WAAA,CAAY,sBAAA;AAAA;AAAA,UAGH,aAAA,SAAsB,gBAAA;EACrC,SAAA;EACA,MAAA,GAAS,aAAA;EACT,YAAA,GAAe,IAAA;EACf,KAAA,GAAQ,IAAA;EACR,SAAA;EACA,iBAAA,GAAoB,IAAA;EACpB,eAAA,GAAkB,IAAA;EAClB,WAAA,IAAe,IAAA,EAAM,IAAA;EACrB,YAAA,IAAgB,KAAA,EAAO,aAAA;EACvB,WAAA,IAAe,IAAA,EAAM,IAAA;EACrB,WAAA,IAAe,IAAA,EAAM,IAAA;EACrB,WAAA;AAAA;AAAA,cAeW,QAAA;EAAA;;;;;;;;;;;;;;KAcV,aAAA,GAAa,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/Calendar/Calendar.mjs CHANGED Viewed

@@ -22,12 +22,14 @@ const getEventRange = (event) => {
 		end: event.endDate ? parseDateStr(event.endDate) : start
 	};
 };
-const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new Date(), today = /* @__PURE__ */ new Date(), showToday = true, size, selectedStartDate, selectedEndDate, onDateClick, onEventClick, enableHover = false }) => {
-	const { wrapper, layoutContainer, header, navContainerLeft, navContainerRight, navButton, navIcon, caption, gridHeader, weekday, gridBody, cell, cellEmpty, eventList, eventItemHeight } = calendar({
+const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new Date(), today = /* @__PURE__ */ new Date(), showToday = true, size, selectedStartDate, selectedEndDate, onDateClick, onEventClick, onPrevMonth, onNextMonth, enableHover = false }) => {
+	const { wrapper, layoutContainer, header, navContainerLeft, navContainerRight, navButton, navIcon, caption, gridHeader, weekday, gridBody, cell, cellEmpty, eventList, eventItemHeight, moreBadge } = calendar({
 		size,
 		hoverEffect: enableHover
 	});
 	const [currentMonth, setCurrentMonth] = useState(defaultMonth);
+	const monthStart = useMemo(() => startOfMonth(currentMonth), [currentMonth]);
+	const monthEnd = useMemo(() => endOfMonth(currentMonth), [currentMonth]);
 	const totalDays = getDaysInMonth(currentMonth);
 	const startDayIndex = getDay(startOfMonth(currentMonth));
 	const weekDays = [
@@ -39,56 +41,88 @@ const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new D
 		"금",
 		"토"
 	];
-	const handlePrevMonth = () => setCurrentMonth((prev) => subMonths(prev, 1));
-	const handleNextMonth = () => setCurrentMonth((prev) => addMonths(prev, 1));
+	const handlePrevMonth = () => {
+		const newDate = subMonths(currentMonth, 1);
+		setCurrentMonth(newDate);
+		onPrevMonth?.(newDate);
+	};
+	const handleNextMonth = () => {
+		const newDate = addMonths(currentMonth, 1);
+		setCurrentMonth(newDate);
+		onNextMonth?.(newDate);
+	};
 	const eventsByDate = useMemo(() => {
 		const map = /* @__PURE__ */ new Map();
-		const mStart = startOfMonth(currentMonth);
-		const mEnd = endOfMonth(currentMonth);
-		const relevantEvents = events.filter((event) => {
-			const { start, end } = getEventRange(event);
-			return start <= mEnd && end >= mStart;
-		});
-		relevantEvents.sort((a, b) => {
-			const aRange = getEventRange(a);
-			const bRange = getEventRange(b);
-			const aDur = differenceInCalendarDays(aRange.end, aRange.start);
-			const bDur = differenceInCalendarDays(bRange.end, bRange.start);
-			if (bDur !== aDur) return bDur - aDur;
-			return aRange.start.getTime() - bRange.start.getTime();
-		});
-		for (const event of relevantEvents) {
-			const { start, end } = getEventRange(event);
-			let d = start < mStart ? mStart : start;
-			const eventEndDate = end > mEnd ? mEnd : end;
-			let slot = 0;
-			let found = false;
-			while (!found) {
-				let isFree = true;
-				let tempD = new Date(d);
-				while (tempD <= eventEndDate) {
-					const dateKey = formatDateStr(tempD);
-					if ((map.get(dateKey) || [])[slot]) {
-						isFree = false;
-						break;
+		const mStart = subDays(monthStart, getDay(monthStart));
+		const mEnd = addDays(monthEnd, 6 - getDay(monthEnd));
+		const weeks = [];
+		let curr = mStart;
+		while (curr <= mEnd) {
+			weeks.push({
+				start: curr,
+				end: addDays(curr, 6)
+			});
+			curr = addDays(curr, 7);
+		}
+		for (const week of weeks) {
+			const { start: wStart, end: wEnd } = week;
+			const weeklyEvents = events.filter((event) => {
+				const { start, end } = getEventRange(event);
+				return start <= wEnd && end >= wStart;
+			});
+			weeklyEvents.sort((a, b) => {
+				const aRange = getEventRange(a);
+				const bRange = getEventRange(b);
+				const aSegStart = aRange.start < wStart ? wStart : aRange.start;
+				const bSegStart = bRange.start < wStart ? wStart : bRange.start;
+				const startDiff = aSegStart.getTime() - bSegStart.getTime();
+				if (startDiff !== 0) return startDiff;
+				const aIsSingle = aRange.start.getTime() === aRange.end.getTime();
+				const bIsSingle = bRange.start.getTime() === bRange.end.getTime();
+				if (aIsSingle && !bIsSingle) return -1;
+				if (!aIsSingle && bIsSingle) return 1;
+				const aDur = differenceInCalendarDays(aRange.end, aRange.start);
+				const bDur = differenceInCalendarDays(bRange.end, bRange.start);
+				if (aDur !== bDur) return bDur - aDur;
+				return a.id.toString().localeCompare(b.id.toString());
+			});
+			for (const event of weeklyEvents) {
+				const { start, end } = getEventRange(event);
+				const segStart = start < wStart ? wStart : start;
+				const segEnd = end > wEnd ? wEnd : end;
+				let slot = 0;
+				let found = false;
+				while (!found) {
+					let isFree = true;
+					let tempD = new Date(segStart);
+					while (tempD <= segEnd) {
+						const dateKey = formatDateStr(tempD);
+						if ((map.get(dateKey) || [])[slot]) {
+							isFree = false;
+							break;
+						}
+						tempD = addDays(tempD, 1);
 					}
-					tempD = addDays(tempD, 1);
+					if (isFree) found = true;
+					else slot++;
+				}
+				let assignD = new Date(segStart);
+				while (assignD <= segEnd) {
+					const dateKey = formatDateStr(assignD);
+					const dailySlots = map.get(dateKey) || [];
+					while (dailySlots.length <= slot) dailySlots.push(null);
+					dailySlots[slot] = event;
+					map.set(dateKey, dailySlots);
+					assignD = addDays(assignD, 1);
 				}
-				if (isFree) found = true;
-				else slot++;
-			}
-			let assignD = new Date(d);
-			while (assignD <= eventEndDate) {
-				const dateKey = formatDateStr(assignD);
-				const dailySlots = map.get(dateKey) || [];
-				while (dailySlots.length <= slot) dailySlots.push(null);
-				dailySlots[slot] = event;
-				map.set(dateKey, dailySlots);
-				assignD = addDays(assignD, 1);
 			}
 		}
 		return map;
-	}, [currentMonth, events]);
+	}, [
+		monthStart,
+		monthEnd,
+		events
+	]);
 	return /* @__PURE__ */ jsx(Box, {
 		className: wrapper({ className }),
 		children: /* @__PURE__ */ jsxs(Box, {
@@ -142,7 +176,9 @@ const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new D
 						const day = i + 1;
 						const currentDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
 						const dateKey = formatDateStr(currentDate);
-						const daysEvents = eventsByDate.get(dateKey) || [];
+						const rawDaysEvents = eventsByDate.get(dateKey) || [];
+						const daysEvents = rawDaysEvents.slice(0, 4);
+						const extraCount = rawDaysEvents.slice(4).filter(Boolean).length;
 						const isToday = showToday && isSameDay(currentDate, today);
 						const isStart = selectedStartDate && isSameDay(currentDate, selectedStartDate);
 						const isEnd = selectedEndDate && isSameDay(currentDate, selectedEndDate);
@@ -164,16 +200,18 @@ const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new D
 							children: [/* @__PURE__ */ jsx("span", {
 								className: calendar({ selectionState }).dayNumber(),
 								children: day
-							}), /* @__PURE__ */ jsx(Flex, {
+							}), /* @__PURE__ */ jsxs(Flex, {
 								className: eventList(),
-								children: daysEvents.map((ev, idx) => {
+								children: [daysEvents.map((ev, idx) => {
 									if (!ev) return /* @__PURE__ */ jsx("div", { className: eventItemHeight() }, `empty-${idx}`);
 									const { start, end } = getEventRange(ev);
 									const currentDayIndex = getDay(currentDate);
 									const weekStart = subDays(currentDate, currentDayIndex);
 									const weekEnd = addDays(currentDate, 6 - currentDayIndex);
-									const segmentStart = start < weekStart ? weekStart : start;
-									const segmentDuration = differenceInCalendarDays(end > weekEnd ? weekEnd : end, segmentStart) + 1;
+									const boundedWeekStart = weekStart < monthStart ? monthStart : weekStart;
+									const boundedWeekEnd = weekEnd > monthEnd ? monthEnd : weekEnd;
+									const segmentStart = start < boundedWeekStart ? boundedWeekStart : start;
+									const segmentDuration = differenceInCalendarDays(end > boundedWeekEnd ? boundedWeekEnd : end, segmentStart) + 1;
 									const indexInSegment = differenceInCalendarDays(currentDate, segmentStart);
 									const startDateKey = formatDateStr(start);
 									const endDateKey = formatDateStr(end);
@@ -188,11 +226,11 @@ const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new D
 											e.stopPropagation();
 											onEventClick?.(ev);
 										},
-										children: [/* @__PURE__ */ jsx("div", { className: bgBar() }), /* @__PURE__ */ jsx("div", {
+										children: [/* @__PURE__ */ jsx("div", { className: bgBar() }), indexInSegment === 0 && /* @__PURE__ */ jsx("div", {
 											className: textLayer(),
 											style: {
 												width: `calc(${segmentDuration} * 100%)`,
-												left: `calc(-${indexInSegment} * 100%)`
+												left: 0
 											},
 											children: /* @__PURE__ */ jsx("span", {
 												className: textSpan(),
@@ -200,7 +238,14 @@ const Calendar = ({ className, events = [], defaultMonth = /* @__PURE__ */ new D
 											})
 										})]
 									}, `${ev.id}-${idx}`);
-								})
+								}), extraCount > 0 && /* @__PURE__ */ jsxs("div", {
+									className: moreBadge(),
+									children: [
+										"+",
+										extraCount,
+										"개"
+									]
+								})]
 							})]
 						}, day);
 					})]

package/dist/components/Calendar/Calendar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.mjs","names":[],"sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport {\n format,\n addMonths,\n subMonths,\n startOfMonth,\n endOfMonth,\n addDays,\n subDays,\n getDay,\n getDaysInMonth,\n isSameDay,\n isWithinInterval,\n differenceInCalendarDays,\n} from 'date-fns';\nimport { ko } from 'date-fns/locale';\n\nimport { Box } from '../Box';\nimport { Flex } from '../Flex';\nimport { Grid } from '../Grid';\nimport { ChevronLeft, ChevronRight } from '@causw/icons';\n\nimport {\n calendar,\n eventBarStyles,\n type EventBarStylesVariants,\n type CalendarVariants,\n} from './Calendar.styles';\nimport { mergeStyles } from '../../utils';\n\nexport type CalendarEvent = {\n id: string \| number;\n title: string;\n startDate: string;\n endDate?: string;\n type: NonNullable<EventBarStylesVariants['type']>;\n};\n\nexport interface CalendarProps extends CalendarVariants {\n className?: string;\n events?: CalendarEvent[];\n defaultMonth?: Date;\n today?: Date;\n showToday?: boolean;\n selectedStartDate?: Date;\n selectedEndDate?: Date;\n onDateClick?: (date: Date) => void;\n onEventClick?: (event: CalendarEvent) => void;\n enableHover?: boolean;\n}\n\nconst parseDateStr = (dateStr: string) => {\n const [y, m, d] = dateStr.split('-').map(Number);\n return new Date(y, m - 1, d);\n};\nconst formatDateStr = (date: Date) => format(date, 'yyyy-MM-dd');\n\nconst getEventRange = (event: CalendarEvent) => {\n const start = parseDateStr(event.startDate);\n const end = event.endDate ? parseDateStr(event.endDate) : start;\n return { start, end };\n};\n\nexport const Calendar = ({\n className,\n events = [],\n defaultMonth = new Date(),\n today = new Date(),\n showToday = true,\n size,\n selectedStartDate,\n selectedEndDate,\n onDateClick,\n onEventClick,\n enableHover = false,\n}: CalendarProps) => {\n const {\n wrapper,\n layoutContainer,\n header,\n navContainerLeft,\n navContainerRight,\n navButton,\n navIcon,\n caption,\n gridHeader,\n weekday,\n gridBody,\n cell,\n cellEmpty,\n eventList,\n eventItemHeight,\n } = calendar({ size, hoverEffect: enableHover });\n\n const [currentMonth, setCurrentMonth] = useState(defaultMonth);\n const totalDays = getDaysInMonth(currentMonth);\n const startDayIndex = getDay(startOfMonth(currentMonth));\n const weekDays = ['일', '월', '화', '수', '목', '금', '토'];\n\n const handlePrevMonth = () => setCurrentMonth((prev) => subMonths(prev, 1));\n const handleNextMonth = () => setCurrentMonth((prev) => addMonths(prev, 1));\n\n const eventsByDate = useMemo(() => {\n const map = new Map<string, (CalendarEvent \| null)[]>();\n const mStart = startOfMonth(currentMonth);\n const mEnd = endOfMonth(currentMonth);\n\n const relevantEvents = events.filter((event) => {\n const { start, end } = getEventRange(event);\n return start <= mEnd && end >= mStart;\n });\n\n relevantEvents.sort((a, b) => {\n const aRange = getEventRange(a);\n const bRange = getEventRange(b);\n const aDur = differenceInCalendarDays(aRange.end, aRange.start);\n const bDur = differenceInCalendarDays(bRange.end, bRange.start);\n if (bDur !== aDur) return bDur - aDur;\n return aRange.start.getTime() - bRange.start.getTime();\n });\n\n for (const event of relevantEvents) {\n const { start, end } = getEventRange(event);\n let d = start < mStart ? mStart : start;\n const eventEndDate = end > mEnd ? mEnd : end;\n\n let slot = 0;\n let found = false;\n while (!found) {\n let isFree = true;\n let tempD = new Date(d);\n while (tempD <= eventEndDate) {\n const dateKey = formatDateStr(tempD);\n const dailySlots = map.get(dateKey) \|\| [];\n if (dailySlots[slot]) {\n isFree = false;\n break;\n }\n tempD = addDays(tempD, 1);\n }\n if (isFree) found = true;\n else slot++;\n }\n\n let assignD = new Date(d);\n while (assignD <= eventEndDate) {\n const dateKey = formatDateStr(assignD);\n const dailySlots = map.get(dateKey) \|\| [];\n\n while (dailySlots.length <= slot) dailySlots.push(null);\n dailySlots[slot] = event;\n map.set(dateKey, dailySlots);\n assignD = addDays(assignD, 1);\n }\n }\n return map;\n }, [currentMonth, events]);\n\n return (\n <Box className={wrapper({ className })}>\n <Box className={layoutContainer()}>\n <Grid columns={7} className={header()}>\n <Flex className={navContainerLeft()}>\n <button\n onClick={handlePrevMonth}\n className={navButton()}\n type=\"button\"\n >\n <ChevronLeft className={navIcon()} />\n </button>\n </Flex>\n <Box className=\"col-span-5 flex items-center justify-center\">\n <span className={caption()}>\n {format(currentMonth, 'yyyy년 M월', { locale: ko })}\n </span>\n </Box>\n <Flex className={navContainerRight()}>\n <button\n onClick={handleNextMonth}\n className={navButton()}\n type=\"button\"\n >\n <ChevronRight className={navIcon()} />\n </button>\n </Flex>\n </Grid>\n\n <Grid columns={7} className={gridHeader()}>\n {weekDays.map((day) => (\n <Flex\n key={day}\n justify=\"center\"\n align=\"center\"\n className={weekday()}\n >\n {day}\n </Flex>\n ))}\n </Grid>\n\n <Grid columns={7} className={gridBody()}>\n {Array.from({ length: startDayIndex }).map((_, i) => (\n <Box key={`empty-${i}`} className={cellEmpty()} />\n ))}\n\n {Array.from({ length: totalDays }).map((_, i) => {\n const day = i + 1;\n const currentDate = new Date(\n currentMonth.getFullYear(),\n currentMonth.getMonth(),\n day,\n );\n const dateKey = formatDateStr(currentDate);\n\n const daysEvents = eventsByDate.get(dateKey) \|\| [];\n\n const isToday = showToday && isSameDay(currentDate, today);\n const isStart =\n selectedStartDate && isSameDay(currentDate, selectedStartDate);\n const isEnd =\n selectedEndDate && isSameDay(currentDate, selectedEndDate);\n const isBetween =\n selectedStartDate &&\n selectedEndDate &&\n isWithinInterval(currentDate, {\n start: selectedStartDate,\n end: selectedEndDate,\n }) &&\n !isStart &&\n !isEnd;\n\n let selectionState:\n \| 'none'\n \| 'today'\n \| 'selected'\n \| 'range'\n \| 'rangeStart'\n \| 'rangeEnd' = 'none';\n if (isStart) selectionState = 'selected';\n else if (isEnd) selectionState = 'selected';\n else if (isBetween) selectionState = 'range';\n else if (isToday) selectionState = 'today';\n\n return (\n <Flex\n key={day}\n direction=\"column\"\n align=\"center\"\n justify=\"start\"\n className={cell()}\n onClick={() => onDateClick?.(currentDate)}\n >\n <span className={calendar({ selectionState }).dayNumber()}>\n {day}\n </span>\n <Flex className={eventList()}>\n {daysEvents.map((ev, idx) => {\n if (!ev) {\n return (\n <div\n key={`empty-${idx}`}\n className={eventItemHeight()}\n />\n );\n }\n\n const { start, end } = getEventRange(ev);\n const currentDayIndex = getDay(currentDate);\n const weekStart = subDays(currentDate, currentDayIndex);\n const weekEnd = addDays(currentDate, 6 - currentDayIndex);\n const segmentStart = start < weekStart ? weekStart : start;\n const segmentEnd = end > weekEnd ? weekEnd : end;\n const segmentDuration =\n differenceInCalendarDays(segmentEnd, segmentStart) + 1;\n const indexInSegment = differenceInCalendarDays(\n currentDate,\n segmentStart,\n );\n\n const startDateKey = formatDateStr(start);\n const endDateKey = formatDateStr(end);\n const isStartEvent = dateKey === startDateKey;\n const isEndEvent = dateKey === endDateKey;\n const isSingleDay = startDateKey === endDateKey;\n const blockPosition = isSingleDay\n ? 'single'\n : isStartEvent\n ? 'start'\n : isEndEvent\n ? 'end'\n : 'middle';\n const {\n wrapper: eventWrapper,\n bgBar,\n textLayer,\n textSpan,\n } = eventBarStyles({\n type: ev.type,\n position: blockPosition,\n });\n\n return (\n <div\n key={`${ev.id}-${idx}`}\n className={mergeStyles(\n eventWrapper(),\n eventItemHeight(),\n )}\n onClick={(e) => {\n e.stopPropagation();\n onEventClick?.(ev);\n }}\n >\n <div className={bgBar()} />\n\n <div\n className={textLayer()}\n style={{\n width: `calc(${segmentDuration} * 100%)`,\n left: `calc(-${indexInSegment} * 100%)`,\n }}\n >\n <span className={textSpan()}>{ev.title}</span>\n </div>\n </div>\n );\n })}\n </Flex>\n </Flex>\n );\n })}\n </Grid>\n </Box>\n </Box>\n );\n};\nCalendar.displayName = 'Calendar';\n"],"mappings":"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"}
1	+ {"version":3,"file":"Calendar.mjs","names":[],"sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport {\n format,\n addMonths,\n subMonths,\n startOfMonth,\n endOfMonth,\n addDays,\n subDays,\n getDay,\n getDaysInMonth,\n isSameDay,\n isWithinInterval,\n differenceInCalendarDays,\n} from 'date-fns';\nimport { ko } from 'date-fns/locale';\n\nimport { Box } from '../Box';\nimport { Flex } from '../Flex';\nimport { Grid } from '../Grid';\nimport { ChevronLeft, ChevronRight } from '@causw/icons';\n\nimport {\n calendar,\n eventBarStyles,\n type EventBarStylesVariants,\n type CalendarVariants,\n} from './Calendar.styles';\nimport { mergeStyles } from '../../utils';\n\nexport type CalendarEvent = {\n id: string \| number;\n title: string;\n startDate: string;\n endDate?: string;\n type: NonNullable<EventBarStylesVariants['type']>;\n};\n\nexport interface CalendarProps extends CalendarVariants {\n className?: string;\n events?: CalendarEvent[];\n defaultMonth?: Date;\n today?: Date;\n showToday?: boolean;\n selectedStartDate?: Date;\n selectedEndDate?: Date;\n onDateClick?: (date: Date) => void;\n onEventClick?: (event: CalendarEvent) => void;\n onPrevMonth?: (date: Date) => void;\n onNextMonth?: (date: Date) => void;\n enableHover?: boolean;\n}\n\nconst parseDateStr = (dateStr: string) => {\n const [y, m, d] = dateStr.split('-').map(Number);\n return new Date(y, m - 1, d);\n};\nconst formatDateStr = (date: Date) => format(date, 'yyyy-MM-dd');\n\nconst getEventRange = (event: CalendarEvent) => {\n const start = parseDateStr(event.startDate);\n const end = event.endDate ? parseDateStr(event.endDate) : start;\n return { start, end };\n};\n\nexport const Calendar = ({\n className,\n events = [],\n defaultMonth = new Date(),\n today = new Date(),\n showToday = true,\n size,\n selectedStartDate,\n selectedEndDate,\n onDateClick,\n onEventClick,\n onPrevMonth,\n onNextMonth,\n enableHover = false,\n}: CalendarProps) => {\n const {\n wrapper,\n layoutContainer,\n header,\n navContainerLeft,\n navContainerRight,\n navButton,\n navIcon,\n caption,\n gridHeader,\n weekday,\n gridBody,\n cell,\n cellEmpty,\n eventList,\n eventItemHeight,\n moreBadge,\n } = calendar({ size, hoverEffect: enableHover });\n\n const [currentMonth, setCurrentMonth] = useState(defaultMonth);\n\n const monthStart = useMemo(() => startOfMonth(currentMonth), [currentMonth]);\n const monthEnd = useMemo(() => endOfMonth(currentMonth), [currentMonth]);\n\n const totalDays = getDaysInMonth(currentMonth);\n const startDayIndex = getDay(startOfMonth(currentMonth));\n const weekDays = ['일', '월', '화', '수', '목', '금', '토'];\n\n const handlePrevMonth = () => {\n const newDate = subMonths(currentMonth, 1);\n setCurrentMonth(newDate);\n onPrevMonth?.(newDate);\n };\n const handleNextMonth = () => {\n const newDate = addMonths(currentMonth, 1);\n setCurrentMonth(newDate);\n onNextMonth?.(newDate);\n };\n const eventsByDate = useMemo(() => {\n const map = new Map<string, (CalendarEvent \| null)[]>();\n const mStart = subDays(monthStart, getDay(monthStart));\n const mEnd = addDays(monthEnd, 6 - getDay(monthEnd));\n\n const weeks: { start: Date; end: Date }[] = [];\n let curr = mStart;\n while (curr <= mEnd) {\n weeks.push({ start: curr, end: addDays(curr, 6) });\n curr = addDays(curr, 7);\n }\n\n for (const week of weeks) {\n const { start: wStart, end: wEnd } = week;\n\n const weeklyEvents = events.filter((event) => {\n const { start, end } = getEventRange(event);\n return start <= wEnd && end >= wStart;\n });\n\n weeklyEvents.sort((a, b) => {\n const aRange = getEventRange(a);\n const bRange = getEventRange(b);\n\n const aSegStart = aRange.start < wStart ? wStart : aRange.start;\n const bSegStart = bRange.start < wStart ? wStart : bRange.start;\n const startDiff = aSegStart.getTime() - bSegStart.getTime();\n if (startDiff !== 0) return startDiff;\n\n const aIsSingle = aRange.start.getTime() === aRange.end.getTime();\n const bIsSingle = bRange.start.getTime() === bRange.end.getTime();\n if (aIsSingle && !bIsSingle) return -1;\n if (!aIsSingle && bIsSingle) return 1;\n\n const aDur = differenceInCalendarDays(aRange.end, aRange.start);\n const bDur = differenceInCalendarDays(bRange.end, bRange.start);\n if (aDur !== bDur) return bDur - aDur;\n\n return a.id.toString().localeCompare(b.id.toString());\n });\n\n for (const event of weeklyEvents) {\n const { start, end } = getEventRange(event);\n const segStart = start < wStart ? wStart : start;\n const segEnd = end > wEnd ? wEnd : end;\n\n let slot = 0;\n let found = false;\n while (!found) {\n let isFree = true;\n let tempD = new Date(segStart);\n while (tempD <= segEnd) {\n const dateKey = formatDateStr(tempD);\n const dailySlots = map.get(dateKey) \|\| [];\n if (dailySlots[slot]) {\n isFree = false;\n break;\n }\n tempD = addDays(tempD, 1);\n }\n if (isFree) found = true;\n else slot++;\n }\n\n let assignD = new Date(segStart);\n while (assignD <= segEnd) {\n const dateKey = formatDateStr(assignD);\n const dailySlots = map.get(dateKey) \|\| [];\n while (dailySlots.length <= slot) dailySlots.push(null);\n dailySlots[slot] = event;\n map.set(dateKey, dailySlots);\n assignD = addDays(assignD, 1);\n }\n }\n }\n return map;\n }, [monthStart, monthEnd, events]);\n return (\n <Box className={wrapper({ className })}>\n <Box className={layoutContainer()}>\n <Grid columns={7} className={header()}>\n <Flex className={navContainerLeft()}>\n <button\n onClick={handlePrevMonth}\n className={navButton()}\n type=\"button\"\n >\n <ChevronLeft className={navIcon()} />\n </button>\n </Flex>\n <Box className=\"col-span-5 flex items-center justify-center\">\n <span className={caption()}>\n {format(currentMonth, 'yyyy년 M월', { locale: ko })}\n </span>\n </Box>\n <Flex className={navContainerRight()}>\n <button\n onClick={handleNextMonth}\n className={navButton()}\n type=\"button\"\n >\n <ChevronRight className={navIcon()} />\n </button>\n </Flex>\n </Grid>\n\n <Grid columns={7} className={gridHeader()}>\n {weekDays.map((day) => (\n <Flex\n key={day}\n justify=\"center\"\n align=\"center\"\n className={weekday()}\n >\n {day}\n </Flex>\n ))}\n </Grid>\n\n <Grid columns={7} className={gridBody()}>\n {Array.from({ length: startDayIndex }).map((_, i) => (\n <Box key={`empty-${i}`} className={cellEmpty()} />\n ))}\n\n {Array.from({ length: totalDays }).map((_, i) => {\n const day = i + 1;\n const currentDate = new Date(\n currentMonth.getFullYear(),\n currentMonth.getMonth(),\n day,\n );\n const dateKey = formatDateStr(currentDate);\n\n const rawDaysEvents = eventsByDate.get(dateKey) \|\| [];\n const daysEvents = rawDaysEvents.slice(0, 4);\n const extraCount = rawDaysEvents.slice(4).filter(Boolean).length;\n\n const isToday = showToday && isSameDay(currentDate, today);\n const isStart =\n selectedStartDate && isSameDay(currentDate, selectedStartDate);\n const isEnd =\n selectedEndDate && isSameDay(currentDate, selectedEndDate);\n const isBetween =\n selectedStartDate &&\n selectedEndDate &&\n isWithinInterval(currentDate, {\n start: selectedStartDate,\n end: selectedEndDate,\n }) &&\n !isStart &&\n !isEnd;\n\n let selectionState:\n \| 'none'\n \| 'today'\n \| 'selected'\n \| 'range'\n \| 'rangeStart'\n \| 'rangeEnd' = 'none';\n if (isStart) selectionState = 'selected';\n else if (isEnd) selectionState = 'selected';\n else if (isBetween) selectionState = 'range';\n else if (isToday) selectionState = 'today';\n\n return (\n <Flex\n key={day}\n direction=\"column\"\n align=\"center\"\n justify=\"start\"\n className={cell()}\n onClick={() => onDateClick?.(currentDate)}\n >\n <span className={calendar({ selectionState }).dayNumber()}>\n {day}\n </span>\n <Flex className={eventList()}>\n {daysEvents.map((ev, idx) => {\n if (!ev) {\n return (\n <div\n key={`empty-${idx}`}\n className={eventItemHeight()}\n />\n );\n }\n\n const { start, end } = getEventRange(ev);\n const currentDayIndex = getDay(currentDate);\n const weekStart = subDays(currentDate, currentDayIndex);\n const weekEnd = addDays(currentDate, 6 - currentDayIndex);\n\n const boundedWeekStart =\n weekStart < monthStart ? monthStart : weekStart;\n const boundedWeekEnd =\n weekEnd > monthEnd ? monthEnd : weekEnd;\n\n const segmentStart =\n start < boundedWeekStart ? boundedWeekStart : start;\n const segmentEnd =\n end > boundedWeekEnd ? boundedWeekEnd : end;\n\n const segmentDuration =\n differenceInCalendarDays(segmentEnd, segmentStart) + 1;\n const indexInSegment = differenceInCalendarDays(\n currentDate,\n segmentStart,\n );\n\n const startDateKey = formatDateStr(start);\n const endDateKey = formatDateStr(end);\n const isStartEvent = dateKey === startDateKey;\n const isEndEvent = dateKey === endDateKey;\n const isSingleDay = startDateKey === endDateKey;\n\n const blockPosition: 'single' \| 'start' \| 'end' \| 'middle' =\n isSingleDay\n ? 'single'\n : isStartEvent\n ? 'start'\n : isEndEvent\n ? 'end'\n : 'middle';\n const {\n wrapper: eventWrapper,\n bgBar,\n textLayer,\n textSpan,\n } = eventBarStyles({\n type: ev.type,\n position: blockPosition,\n });\n\n return (\n <div\n key={`${ev.id}-${idx}`}\n className={mergeStyles(\n eventWrapper(),\n eventItemHeight(),\n )}\n onClick={(e) => {\n e.stopPropagation();\n onEventClick?.(ev);\n }}\n >\n <div className={bgBar()} />\n {indexInSegment === 0 && (\n <div\n className={textLayer()}\n style={{\n width: `calc(${segmentDuration} * 100%)`,\n left: 0,\n }}\n >\n <span className={textSpan()}>{ev.title}</span>\n </div>\n )}\n </div>\n );\n })}\n\n {extraCount > 0 && (\n <div className={moreBadge()}>+{extraCount}개</div>\n )}\n </Flex>\n </Flex>\n );\n })}\n </Grid>\n </Box>\n </Box>\n );\n};\nCalendar.displayName = 'Calendar';\n"],"mappings":"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"}

package/dist/components/Calendar/Calendar.styles.cjs CHANGED Viewed

@@ -11,7 +11,7 @@ const SPACING = {
 const calendar = (0, tailwind_variants.tv)({
 	slots: {
 		wrapper: [
-			"bg-white rounded-[20px] shadow-sm border border-gray-100 flex flex-col items-center gap-2",
+			"bg-white rounded-[20px] border border-gray-100 flex flex-col items-center gap-2",
 			"w-full min-w-[328px] max-w-[804px]",
 			"py-4 px-2 md:py-10"
 		],
@@ -28,14 +28,9 @@ const calendar = (0, tailwind_variants.tv)({
 		cell: "relative group gap-1 min-h-[52px] md:min-h-[56px] cursor-pointer rounded-lg transition-colors",
 		cellEmpty: "min-h-[52px] md:min-h-[56px]",
 		dayNumber: "w-7 h-7 flex items-center justify-center rounded-full text-[15px] font-semibold leading-[1.6] tracking-[-0.02em] z-10 select-none transition-colors",
-		eventList: [
-			"w-full flex flex-col gap-1",
-			"max-h-[88px] overflow-y-auto",
-			"[&::-webkit-scrollbar]:hidden",
-			"[-ms-overflow-style:none]",
-			"[scrollbar-width:none]"
-		],
-		eventItemHeight: "min-h-[20px] h-auto flex-shrink-0 cursor-pointer"
+		eventList: ["w-full flex flex-col gap-1"],
+		eventItemHeight: "min-h-[20px] h-auto flex-shrink-0 cursor-pointer",
+		moreBadge: "text-[11px] font-medium tracking-[-0.02em] leading-tight cursor-default text-gray-500 select-none flex items-center justify-center py-[2px] rounded   w-[95%] mx-auto"
 	},
 	variants: {
 		size: {