pds-dev-kit-web-test 2.5.592 → 2.5.594

package/dist/src/desktop/components/Calendar/MonthlyView.js

@@ -0,0 +1,419 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MonthlyView = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var useResizeObserver_1 = require("../../../common/hooks/useResizeObserver");
+var useWindowSize_1 = require("../../../common/hooks/useWindowSize");
+var dateHelper_1 = require("../../../common/utils/dateHelper");
+var components_1 = require("../../../hybrid/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+var CalendarContext_1 = require("./CalendarContext");
+var calendarUtils_1 = require("./calendarUtils");
+var MultiWeekSchedulesLayer_1 = require("./MultiWeekSchedulesLayer");
+var MonthlyView = function (_a) {
+    var getDayTextByDate = _a.getDayTextByDate, startOfWeek = _a.startOfWeek, selectedDate = _a.selectedDate, selectedDates = _a.selectedDates, selectedSchedules = _a.selectedSchedules, dragStartDate = _a.dragStartDate, dragEndDate = _a.dragEndDate, isDragOverDate = _a.isDragOverDate, schedules = _a.schedules, getSchedulesForDate = _a.getSchedulesForDate, isToday = _a.isToday, isPastDate = _a.isPastDate, handleDateClick = _a.handleDateClick, handleScheduleClick = _a.handleScheduleClick, handleMouseUp = _a.handleMouseUp, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd, _b = _a.isDraggable, isDraggable = _b === void 0 ? false : _b, onSwitchToWeeklyView = _a.onSwitchToWeeklyView;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var renderScheduleItem = (0, CalendarContext_1.useCalendarContext)().renderScheduleItem;
+    var height = (0, useWindowSize_1.useWindowSize)().height;
+    var calendarCellRef = (0, react_1.useRef)(null);
+    var _c = (0, react_1.useState)(3), maxSchedulesPerDay = _c[0], setMaxSchedulesPerDay = _c[1];
+    var scheduleItemHeight = 22; // 스케줄 아이템 대략 높이
+    var days = (0, react_1.useMemo)(function () {
+        var monthDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
+        return dateHelper_1.DateHelper.getCalendarDatesForCalendar(monthDate, startOfWeek);
+    }, [selectedDate, startOfWeek]);
+    // 셀 높이 기반으로 최대 스케줄 개수 계산
+    var calculateMaxSchedules = (0, react_1.useCallback)(function () {
+        if (!calendarCellRef.current)
+            return;
+        var cellHeight = calendarCellRef.current.clientHeight;
+        var dateLabelHeight = 20; // 날짜 텍스트 영역
+        var moreTextHeight = scheduleItemHeight;
+        var availableHeight = cellHeight - dateLabelHeight - moreTextHeight;
+        var maxSchedulesWithMore = Math.floor(availableHeight / scheduleItemHeight);
+        // 최소 1개는 보여주되, 더보기를 고려한 개수로 설정
+        var calculatedMax = Math.max(1, maxSchedulesWithMore);
+        setMaxSchedulesPerDay(calculatedMax);
+    }, [scheduleItemHeight]);
+    // ResizeObserver로 크기 변경 감지
+    (0, useResizeObserver_1.useResizeObserver)(calendarCellRef, calculateMaxSchedules, 100);
+    // 창 크기 변경 시에도 재계산
+    (0, react_1.useLayoutEffect)(function () {
+        calculateMaxSchedules();
+    }, [height]);
+    // 캘린더 범위 계산
+    var getCalendarDateRange = (0, react_1.useCallback)(function (days) {
+        var calendarStart = new Date(days[0]);
+        var calendarEnd = new Date(days[days.length - 1]);
+        calendarStart.setHours(0, 0, 0, 0);
+        calendarEnd.setHours(0, 0, 0, 0);
+        return { calendarStart: calendarStart, calendarEnd: calendarEnd };
+    }, []);
+    // 다중일 스케줄 수집 및 필터링
+    var collectMultiDaySchedules = (0, react_1.useCallback)(function (days, getSchedulesForDate, calendarStart, calendarEnd) {
+        var allSchedules = new Map();
+        var processedScheduleIds = new Set();
+        days.forEach(function (date) {
+            var schedulesForDate = getSchedulesForDate(date);
+            schedulesForDate.forEach(function (schedule) {
+                // 이미 처리된 이벤트는 건너뛰기
+                if (processedScheduleIds.has(schedule.id)) {
+                    return;
+                }
+                var scheduleStart = new Date(schedule.startDate);
+                var scheduleEnd = new Date(schedule.endDate);
+                scheduleStart.setHours(0, 0, 0, 0);
+                scheduleEnd.setHours(0, 0, 0, 0);
+                // All day 이벤트이거나 다중 날짜 이벤트인지 확인
+                var isAllDay = (0, calendarUtils_1.calculateIsAllDay)(new Date(schedule.startDate), new Date(schedule.endDate));
+                var isMultiDay = scheduleStart.getTime() !== scheduleEnd.getTime();
+                if (isAllDay || isMultiDay) {
+                    // 이벤트가 현재 캘린더 범위와 교차하는지 확인
+                    var isIntersecting = !(scheduleEnd.getTime() < calendarStart.getTime() ||
+                        scheduleStart.getTime() > calendarEnd.getTime());
+                    if (isIntersecting) {
+                        allSchedules.set(schedule.id, schedule);
+                        processedScheduleIds.add(schedule.id);
+                    }
+                }
+            });
+        });
+        return Array.from(allSchedules.values());
+    }, []);
+    // 스케줄 정렬 (시작일 기준 오름차순, 기간 오름차순)
+    var sortSchedulesByStartAndDuration = (0, react_1.useCallback)(function (schedules) {
+        return schedules.sort(function (a, b) {
+            var aStart = new Date(a.startDate).getTime();
+            var bStart = new Date(b.startDate).getTime();
+            if (aStart !== bStart)
+                return aStart - bStart;
+            var aDur = new Date(a.endDate).getTime() - aStart;
+            var bDur = new Date(b.endDate).getTime() - bStart;
+            return aDur - bDur;
+        });
+    }, []);
+    // 스케줄의 그리드 위치 계산
+    var calculateScheduleGridPosition = (0, react_1.useCallback)(function (schedule, days, calendarStart, calendarEnd) {
+        var scheduleStart = new Date(schedule.startDate);
+        var scheduleEnd = new Date(schedule.endDate);
+        scheduleStart.setHours(0, 0, 0, 0);
+        scheduleEnd.setHours(0, 0, 0, 0);
+        // 캘린더 범위 내에서 표시할 실제 시작/끝 날짜 계산
+        var displayStart = new Date(Math.max(scheduleStart.getTime(), calendarStart.getTime()));
+        var displayEnd = new Date(Math.min(scheduleEnd.getTime(), calendarEnd.getTime()));
+        // 캘린더 그리드에서 시작과 끝 위치 찾기
+        var startIndex = days.findIndex(function (date) {
+            var d = new Date(date);
+            d.setHours(0, 0, 0, 0);
+            return d.getTime() === displayStart.getTime();
+        });
+        var endIndex = days.findIndex(function (date) {
+            var d = new Date(date);
+            d.setHours(0, 0, 0, 0);
+            return d.getTime() === displayEnd.getTime();
+        });
+        if (startIndex === -1 || endIndex === -1) {
+            return null;
+        }
+        return { startIndex: startIndex, endIndex: endIndex };
+    }, []);
+    // 행별 세그먼트 정보 계산
+    var calculateRowSegments = (0, react_1.useCallback)(function (startIndex, endIndex) {
+        var startRow = Math.floor(startIndex / 7) + 2;
+        var endRow = Math.floor(endIndex / 7) + 2;
+        var segments = [];
+        var getSegmentBounds = function (row, startRow, endRow, startIndex, endIndex) {
+            if (row === startRow && row === endRow) {
+                return [(startIndex % 7) + 1, (endIndex % 7) + 1];
+            }
+            if (row === startRow) {
+                return [(startIndex % 7) + 1, 7];
+            }
+            if (row === endRow) {
+                return [1, (endIndex % 7) + 1];
+            }
+            return [1, 7];
+        };
+        for (var row = startRow; row <= endRow; row += 1) {
+            var _a = getSegmentBounds(row, startRow, endRow, startIndex, endIndex), startCol = _a[0], endCol = _a[1];
+            segments.push({ row: row, startCol: startCol, endCol: endCol });
+        }
+        return segments;
+    }, []);
+    // 사용중인 행 정보를 수집
+    var collectUsedRows = (0, react_1.useCallback)(function (segments, rowColUsedRows) {
+        var usedRows = new Set();
+        segments.forEach(function (_a) {
+            var row = _a.row, startCol = _a.startCol, endCol = _a.endCol;
+            for (var col = startCol; col <= endCol; col += 1) {
+                var key = "".concat(row, "_").concat(col);
+                if (rowColUsedRows[key]) {
+                    rowColUsedRows[key].forEach(function (r) { return usedRows.add(r); });
+                }
+            }
+        });
+        return usedRows;
+    }, []);
+    // 가장 작은 빈 행 인덱스 찾기
+    var findAvailableRowIndex = (0, react_1.useCallback)(function (usedRows) {
+        var scheduleIndex = 0;
+        while (usedRows.has(scheduleIndex)) {
+            scheduleIndex += 1;
+        }
+        return scheduleIndex;
+    }, []);
+    // 행-열 사용 정보 업데이트
+    var updateRowColUsage = (0, react_1.useCallback)(function (segments, scheduleIndex, rowColUsedRows) {
+        segments.forEach(function (_a) {
+            var row = _a.row, startCol = _a.startCol, endCol = _a.endCol;
+            for (var col = startCol; col <= endCol; col += 1) {
+                var key = "".concat(row, "_").concat(col);
+                if (!rowColUsedRows[key])
+                    rowColUsedRows[key] = new Set();
+                rowColUsedRows[key].add(scheduleIndex);
+            }
+        });
+    }, []);
+    // 다중 이벤트 계산
+    var getMultiWeekSchedules = (0, react_1.useMemo)(function () {
+        var _a = getCalendarDateRange(days), calendarStart = _a.calendarStart, calendarEnd = _a.calendarEnd;
+        var multiDaySchedules = collectMultiDaySchedules(days, getSchedulesForDate, calendarStart, calendarEnd);
+        var sortedSchedules = sortSchedulesByStartAndDuration(multiDaySchedules);
+        var rowColUsedRows = {};
+        var multiWeekSchedules = [];
+        sortedSchedules.forEach(function (schedule) {
+            var scheduleStart = new Date(schedule.startDate);
+            var scheduleEnd = new Date(schedule.endDate);
+            scheduleStart.setHours(0, 0, 0, 0);
+            scheduleEnd.setHours(0, 0, 0, 0);
+            if (scheduleStart.getTime() !== scheduleEnd.getTime()) {
+                var gridPosition = calculateScheduleGridPosition(schedule, days, calendarStart, calendarEnd);
+                if (gridPosition) {
+                    var startIndex = gridPosition.startIndex, endIndex = gridPosition.endIndex;
+                    var segments = calculateRowSegments(startIndex, endIndex);
+                    segments.forEach(function (_a) {
+                        var row = _a.row, startCol = _a.startCol, endCol = _a.endCol;
+                        var usedRows = collectUsedRows([{ row: row, startCol: startCol, endCol: endCol }], rowColUsedRows);
+                        var scheduleIndex = findAvailableRowIndex(usedRows);
+                        updateRowColUsage([{ row: row, startCol: startCol, endCol: endCol }], scheduleIndex, rowColUsedRows);
+                        multiWeekSchedules.push({
+                            schedule: schedule,
+                            startRow: row,
+                            endRow: row,
+                            startCol: startCol,
+                            endCol: endCol,
+                            scheduleIndex: scheduleIndex
+                        });
+                    });
+                }
+            }
+        });
+        return multiWeekSchedules;
+    }, [
+        days,
+        getSchedulesForDate,
+        schedules,
+        getCalendarDateRange,
+        collectMultiDaySchedules,
+        sortSchedulesByStartAndDuration,
+        calculateScheduleGridPosition,
+        calculateRowSegments,
+        collectUsedRows,
+        findAvailableRowIndex,
+        updateRowColUsage
+    ]);
+    var getCalendarCellData = function (date, index) {
+        var daySchedules = getSchedulesForDate(date);
+        var row = Math.floor(index / 7) + 2; // 헤더 고려
+        var col = (index % 7) + 1;
+        // 멀티데이 스케줄: 이 날짜(row, col)에 걸쳐있는 multiWeekSchedules만 추출
+        var multiDayForCell = getMultiWeekSchedules.filter(function (multi) {
+            return (row >= multi.startRow &&
+                row <= multi.endRow &&
+                ((multi.startRow === multi.endRow && col >= multi.startCol && col <= multi.endCol) ||
+                    (multi.startRow !== multi.endRow &&
+                        ((row === multi.startRow && col >= multi.startCol) ||
+                            (row === multi.endRow && col <= multi.endCol) ||
+                            (row !== multi.startRow && row !== multi.endRow)))));
+        });
+        // rowIndex별로 그룹핑
+        var multiDayByRow = {};
+        multiDayForCell.forEach(function (multi) {
+            if (!multiDayByRow[multi.scheduleIndex])
+                multiDayByRow[multi.scheduleIndex] = [];
+            multiDayByRow[multi.scheduleIndex].push(multi);
+        });
+        // 단일 날짜 스케줄
+        var visibleSchedules = daySchedules.filter(function (schedule) {
+            var scheduleStart = new Date(schedule.startDate);
+            var scheduleEnd = new Date(schedule.endDate);
+            var checkDate = new Date(date);
+            scheduleStart.setHours(0, 0, 0, 0);
+            scheduleEnd.setHours(0, 0, 0, 0);
+            checkDate.setHours(0, 0, 0, 0);
+            if (scheduleStart.getTime() !== scheduleEnd.getTime()) {
+                return false;
+            }
+            return scheduleStart.getTime() === checkDate.getTime();
+        });
+        visibleSchedules.sort(function (a, b) {
+            var timeA = new Date(a.startDate).getTime();
+            var timeB = new Date(b.startDate).getTime();
+            return timeA - timeB;
+        });
+        // 멀티데이 row를 피해서 단일 스케줄 배치
+        var usedRows = new Set(Object.keys(multiDayByRow).map(Number));
+        var singleByRow = {};
+        var tryRow = 0;
+        for (var i = 0; i < visibleSchedules.length; i += 1) {
+            while (usedRows.has(tryRow)) {
+                tryRow += 1;
+            }
+            singleByRow[tryRow] = visibleSchedules[i];
+            usedRows.add(tryRow);
+            tryRow += 1;
+        }
+        // row index 기준으로 멀티데이+단일 스케줄 합치기
+        var allRows = [];
+        var allRowIndices = Array.from(new Set(__spreadArray(__spreadArray([], Object.keys(multiDayByRow).map(Number), true), Object.keys(singleByRow).map(Number), true))).sort(function (a, b) { return a - b; });
+        allRowIndices.forEach(function (rowIdx) {
+            var items = [];
+            if (multiDayByRow[rowIdx]) {
+                multiDayByRow[rowIdx].forEach(function (multi) { return items.push({ type: 'multi', data: multi }); });
+            }
+            if (singleByRow[rowIdx]) {
+                items.push({ type: 'single', data: singleByRow[rowIdx] });
+            }
+            allRows.push({ rowIndex: rowIdx, items: items });
+        });
+        var maxRows = maxSchedulesPerDay;
+        var visibleRows = allRows.filter(function (r) {
+            return r.rowIndex < maxRows;
+        });
+        var hiddenRows = allRows.filter(function (r) { return r.rowIndex >= maxRows; });
+        var hiddenSchedulesCount = hiddenRows.reduce(function (acc, r) { return acc + r.items.length; }, 0);
+        return { visibleRows: visibleRows, maxRows: maxRows, hiddenRows: hiddenRows, hiddenSchedulesCount: hiddenSchedulesCount };
+    };
+    // 시작 요일에 따라 정렬된 요일 헤더 생성
+    var orderedDayTexts = (function () {
+        var weekDates = [];
+        var today = new Date();
+        var startIndex = startOfWeek === 'monday' ? 1 : 0;
+        var firstDayOfWeek = new Date(today);
+        firstDayOfWeek.setDate(today.getDate() - ((today.getDay() - startIndex + 7) % 7));
+        for (var i = 0; i < 7; i += 1) {
+            var date = new Date(firstDayOfWeek);
+            date.setDate(firstDayOfWeek.getDate() + i);
+            weekDates.push(getDayTextByDate(date));
+        }
+        return weekDates;
+    })();
+    return ((0, jsx_runtime_1.jsxs)(S_MonthlyGrid, __assign({ "data-calendar-grid": true }, { children: [orderedDayTexts.map(function (day, index) { return ((0, jsx_runtime_1.jsx)(S_DayHeader, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", textAlign: "center", colorTheme: "sysTextSecondary", text: day }) }, "".concat(day, "-").concat(index))); }), days.map(function (date, index) {
+                var _a = getCalendarCellData(date, index), visibleRows = _a.visibleRows, maxRows = _a.maxRows, hiddenSchedulesCount = _a.hiddenSchedulesCount;
+                var isCellSelected = selectedDates.some(function (selectedDate) { return selectedDate.toDateString() === date.toDateString(); }) ||
+                    !!(dragStartDate &&
+                        dragEndDate &&
+                        date.getTime() >= Math.min(dragStartDate.getTime(), dragEndDate.getTime()) &&
+                        date.getTime() <= Math.max(dragStartDate.getTime(), dragEndDate.getTime()));
+                return ((0, jsx_runtime_1.jsxs)(S_CalendarCell, __assign({ ref: date.getMonth() === selectedDate.getMonth() && date.getDate() === 1
+                        ? calendarCellRef
+                        : undefined, "data-calendar-cell": true, "$isCurrentMonth": date.getMonth() === selectedDate.getMonth(), "$isToday": isToday(date), "$isSelected": isCellSelected, "$isPast": isPastDate(date), "$isDragOver": (isDragOverDate === null || isDragOverDate === void 0 ? void 0 : isDragOverDate.toDateString()) === date.toDateString(), onClick: function (e) { return handleDateClick(date, e); }, onMouseUp: handleMouseUp, onDragOver: function (e) { return handleDateDragOver(date, e); }, onDragLeave: handleDateDragLeave, onDrop: function (e) { return handleDateDrop(date, e); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: isToday(date) ? 'caption2Bold' : 'caption2Regular', textAlign: "center", colorTheme: isToday(date) ? 'sysTextBrandPrimary' : 'sysTextSecondary', text: date.getDate().toString() }), (0, jsx_runtime_1.jsxs)(S_SchedulesContainer, __assign({ "$multiWeekSchedulesCount": visibleRows.length, id: "schedule container" }, { children: [visibleRows.map(function (_a) {
+                                    var rowIndex = _a.rowIndex, items = _a.items;
+                                    return items.map(function (item) {
+                                        var schedule = item.data;
+                                        if (item.type === 'multi')
+                                            return;
+                                        // Schedule 타입인지 확인
+                                        if (!('id' in schedule &&
+                                            'title' in schedule &&
+                                            'startDate' in schedule &&
+                                            'endDate' in schedule)) {
+                                            return null;
+                                        }
+                                        return ((0, jsx_runtime_1.jsx)(S_VisibleRowContainer, __assign({ "$top": rowIndex * scheduleItemHeight }, { children: renderScheduleItem(schedule, {
+                                                onDragStart: function (e) { return handleScheduleDragStart === null || handleScheduleDragStart === void 0 ? void 0 : handleScheduleDragStart(schedule, e); },
+                                                onDragEnd: function () { return handleScheduleDragEnd === null || handleScheduleDragEnd === void 0 ? void 0 : handleScheduleDragEnd(); }
+                                            }) }), schedule.id));
+                                    });
+                                }), hiddenSchedulesCount > 0 && ((0, jsx_runtime_1.jsxs)(S_MoreSchedulesButton, __assign({ "$top": maxRows * scheduleItemHeight + 6, onClick: function (e) {
+                                        e.stopPropagation();
+                                        onSwitchToWeeklyView === null || onSwitchToWeeklyView === void 0 ? void 0 : onSwitchToWeeklyView(date);
+                                    } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t('str_calendar_schedule_more', { count: hiddenSchedulesCount }), styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })] })))] }))] }), index));
+            }), (0, jsx_runtime_1.jsx)(MultiWeekSchedulesLayer_1.MultiWeekSchedulesLayer, { multiWeekSchedules: getMultiWeekSchedules, selectedSchedules: selectedSchedules, handleScheduleClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, isDraggable: isDraggable, maxSchedulesPerDay: maxSchedulesPerDay })] })));
+};
+exports.MonthlyView = MonthlyView;
+var S_MonthlyGrid = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  gap: 0;\n  grid-template-columns: repeat(7, 1fr);\n  grid-template-rows: auto repeat(6, 1fr); /* \uD5E4\uB354\uB294 auto, \uB098\uBA38\uC9C0 6\uC8FC\uB294 \uB3D9\uC77C\uD55C \uB192\uC774 */\n  height: 100%; /* \uC140 \uAC04\uACA9\uC744 \uC81C\uAC70\uD558\uC5EC \uC774\uBCA4\uD2B8\uAC00 \uC5F0\uACB0\uB418\uC5B4 \uBCF4\uC774\uB3C4\uB85D */\n  overflow-x: hidden; /* \uADF8\uB9AC\uB4DC \uACBD\uACC4\uB97C \uB118\uB294 \uC694\uC18C\uB97C \uC228\uAE40 */\n  position: relative;\n"], ["\n  display: grid;\n  gap: 0;\n  grid-template-columns: repeat(7, 1fr);\n  grid-template-rows: auto repeat(6, 1fr); /* \uD5E4\uB354\uB294 auto, \uB098\uBA38\uC9C0 6\uC8FC\uB294 \uB3D9\uC77C\uD55C \uB192\uC774 */\n  height: 100%; /* \uC140 \uAC04\uACA9\uC744 \uC81C\uAC70\uD558\uC5EC \uC774\uBCA4\uD2B8\uAC00 \uC5F0\uACB0\uB418\uC5B4 \uBCF4\uC774\uB3C4\uB85D */\n  overflow-x: hidden; /* \uADF8\uB9AC\uB4DC \uACBD\uACC4\uB97C \uB118\uB294 \uC694\uC18C\uB97C \uC228\uAE40 */\n  position: relative;\n"])));
+var S_DayHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  padding: 12px 8px;\n  text-align: center;\n"], ["\n  border-bottom: 1px solid ", ";\n  padding: 12px 8px;\n  text-align: center;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
+});
+var S_CalendarCell = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  min-height: 80px;\n  min-width: 0;\n  overflow: hidden;\n  padding: 4px;\n  position: relative;\n  transition: background-color 0.2s;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:nth-child(7n + 1) {\n    border-left: 1px solid ", ";\n  }\n\n  &:nth-child(-n + 7) {\n    border-top: 1px solid ", ";\n  }\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  min-height: 80px;\n  min-width: 0;\n  overflow: hidden;\n  padding: 4px;\n  position: relative;\n  transition: background-color 0.2s;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:nth-child(7n + 1) {\n    border-left: 1px solid ", ";\n  }\n\n  &:nth-child(-n + 7) {\n    border-top: 1px solid ", ";\n  }\n"])), function (_a) {
+    var $isSelected = _a.$isSelected, theme = _a.theme;
+    if ($isSelected)
+        return theme.ui_cpnt_sheet_base;
+    return 'transparent';
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_sheet_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
+});
+var S_SchedulesContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  margin-top: 4px;\n  max-width: 100%;\n  overflow: visible;\n  position: relative;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  margin-top: 4px;\n  max-width: 100%;\n  overflow: visible;\n  position: relative;\n"])));
+var S_VisibleRowContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: ", "px;\n"], ["\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: ", "px;\n"])), function (_a) {
+    var $top = _a.$top;
+    return $top;
+});
+var S_MoreSchedulesButton = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: 2px;\n  bottom: 10px;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  outline: inherit;\n  position: absolute;\n  top: ", "px;\n  transition: background-color 0.2s ease;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: 2px;\n  bottom: 10px;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  outline: inherit;\n  position: absolute;\n  top: ", "px;\n  transition: background-color 0.2s ease;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textlabel_sys_brandprimary;
+}, function (_a) {
+    var $top = _a.$top;
+    return $top;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_sheet_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_sheet_base_02;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/desktop/components/Calendar/MultiWeekSchedulesLayer.d.ts

@@ -0,0 +1,21 @@
+import type { Schedule } from './types';
+import type React from 'react';
+export interface MultiWeekScheduleInfo {
+    schedule: Schedule;
+    startRow: number;
+    endRow: number;
+    startCol: number;
+    endCol: number;
+    scheduleIndex: number;
+}
+interface MultiWeekSchedulesLayerProps {
+    multiWeekSchedules: MultiWeekScheduleInfo[];
+    selectedSchedules: Schedule[];
+    handleScheduleClick?: (schedule: Schedule, e?: React.MouseEvent) => void;
+    handleScheduleDragStart?: (schedule: Schedule, e: React.DragEvent) => void;
+    handleScheduleDragEnd?: () => void;
+    isDraggable?: boolean;
+    maxSchedulesPerDay?: number;
+}
+export declare const MultiWeekSchedulesLayer: React.FC<MultiWeekSchedulesLayerProps>;
+export {};

package/dist/src/desktop/components/Calendar/MultiWeekSchedulesLayer.js

@@ -0,0 +1,186 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiWeekSchedulesLayer = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var useParentResizeObserver_1 = require("../../../common/hooks/useParentResizeObserver");
+var useWindowSize_1 = require("../../../common/hooks/useWindowSize");
+var styled_components_1 = __importDefault(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+var ScheduleItem_1 = require("./ScheduleItem");
+var MultiWeekSchedulesLayer = function (_a) {
+    var multiWeekSchedules = _a.multiWeekSchedules, selectedSchedules = _a.selectedSchedules, handleScheduleClick = _a.handleScheduleClick, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd, _b = _a.isDraggable, isDraggable = _b === void 0 ? false : _b, _c = _a.maxSchedulesPerDay, maxSchedulesPerDay = _c === void 0 ? 3 : _c;
+    var containerRef = (0, react_1.useRef)(null);
+    var _d = (0, react_1.useState)([]), cellPositions = _d[0], setCellPositions = _d[1];
+    var _e = (0, react_1.useState)([]), hiddenSchedules = _e[0], setHiddenSchedules = _e[1];
+    var height = (0, useWindowSize_1.useWindowSize)().height;
+    // 캘린더 셀들의 실제 위치를 계산하는 함수
+    var calculateCellPositions = (0, react_1.useCallback)(function () {
+        if (!containerRef.current)
+            return;
+        var gridContainer = containerRef.current.parentElement;
+        if (!gridContainer)
+            return;
+        // 헤더를 제외한 캘린더 셀들을 찾기
+        var calendarCells = gridContainer.querySelectorAll('[data-calendar-cell]');
+        var positions = [];
+        // 각 주(row)의 위치 정보 수집
+        for (var row = 0; row < 6; row += 1) {
+            var cellIndex = row * 7; // 각 주의 첫 번째 셀
+            var cell = calendarCells[cellIndex];
+            if (cell) {
+                var cellRect = cell.getBoundingClientRect();
+                var containerRect = gridContainer.getBoundingClientRect();
+                var relativeTop = cellRect.top - containerRect.top;
+                var dateLabelHeight = 24; // 날짜 라벨 대략 높이
+                positions.push({
+                    top: relativeTop + dateLabelHeight,
+                    height: cellRect.height - dateLabelHeight
+                });
+            }
+            else {
+                // 기본값 설정 (fallback)
+                positions.push({
+                    top: 60 + row * 120,
+                    height: 96
+                });
+            }
+        }
+        setCellPositions(positions);
+    }, []);
+    // ResizeObserver로 크기 변경 감지
+    (0, useParentResizeObserver_1.useParentResizeObserver)(containerRef, calculateCellPositions, 100);
+    // 창 크기 변경 시 재계산
+    (0, react_1.useLayoutEffect)(function () {
+        calculateCellPositions();
+    }, [height, calculateCellPositions]);
+    (0, react_1.useEffect)(function () {
+        // 각 row별로 스케줄 개수와 높이 제한 확인
+        var schedulesByRow = {};
+        multiWeekSchedules.forEach(function (scheduleInfo) {
+            var startRow = scheduleInfo.startRow, endRow = scheduleInfo.endRow;
+            for (var row = startRow; row <= endRow; row += 1) {
+                if (!schedulesByRow[row]) {
+                    schedulesByRow[row] = [];
+                }
+                schedulesByRow[row].push(scheduleInfo);
+            }
+        });
+        // 각 row(주)에서 높이 제한 확인 (실제로 보이는 줄 수와 전체 스케줄 수 모두 출력)
+        Object.keys(schedulesByRow).forEach(function (rowStr) {
+            var row = parseInt(rowStr, 10);
+            var schedules = schedulesByRow[row];
+            var rowSchedules = __spreadArray([], schedules, true);
+            if (rowSchedules.length > maxSchedulesPerDay) {
+                // row(주)를 날짜로 변환 (row 2가 첫 번째 주, row 3이 두 번째 주...)
+                var weekIndex = row - 2; // 헤더 제외
+                var today = new Date();
+                var startOfWeek = new Date(today);
+                startOfWeek.setDate(today.getDate() - today.getDay()); // 이번 주 일요일
+                var weekStart = new Date(startOfWeek);
+                weekStart.setDate(startOfWeek.getDate() + weekIndex * 7);
+                var weekEnd = new Date(weekStart);
+                weekEnd.setDate(weekStart.getDate() + 6);
+                // 최대 스케줄 개수를 초과하는 스케줄은 숨김 처리 (scheduleIndex기준, 0부터 시작)
+                setHiddenSchedules(__spreadArray([], rowSchedules, true).filter(function (rowSchedule) { return rowSchedule.scheduleIndex > maxSchedulesPerDay - 1; })
+                    .map(function (s) { return s.schedule.id.toString(); }));
+            }
+        });
+    }, [maxSchedulesPerDay]);
+    // 드래그 시작 핸들러를 함수로 분리
+    var handleDragStart = function (schedule, e) {
+        if (handleScheduleDragStart) {
+            handleScheduleDragStart(schedule, e);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(S_Layer, __assign({ ref: containerRef }, { children: multiWeekSchedules
+            .filter(function (s) { return !hiddenSchedules.includes(s.schedule.id.toString()); })
+            .map(function (_a) {
+            var schedule = _a.schedule, startRow = _a.startRow, endRow = _a.endRow, startCol = _a.startCol, endCol = _a.endCol, scheduleIndex = _a.scheduleIndex;
+            var isSameRow = startRow === endRow;
+            var isSelected = selectedSchedules.some(function (s) { return s.id === schedule.id; });
+            var uniqueKey = "multi-".concat(schedule.id, "-").concat(startRow, "-").concat(startCol, "-").concat(endCol);
+            if (isSameRow) {
+                return ((0, jsx_runtime_1.jsxs)(S_MultiWeekSchedule, __assign({ "$color": schedule.color, "$startRow": startRow, "$endRow": endRow, "$startCol": startCol, "$endCol": endCol, "$scheduleIndex": scheduleIndex, "$isSelected": isSelected, "$isDraggable": isDraggable, "$cellPositions": cellPositions, draggable: isDraggable, onDragStart: isDraggable ? function (e) { return handleDragStart(schedule, e); } : undefined, onDragEnd: isDraggable ? handleScheduleDragEnd : undefined, onClick: function (e) {
+                        e.stopPropagation();
+                        handleScheduleClick === null || handleScheduleClick === void 0 ? void 0 : handleScheduleClick(schedule, e);
+                    } }, { children: [(0, jsx_runtime_1.jsx)(ScheduleItem_1.S_Dot, { "$isSelected": isSelected }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: schedule.title, ellipsisMode: "use", colorTheme: isSelected ? 'sysTextWhite' : undefined })] }), uniqueKey));
+            }
+            // 여러 행에 걸친 이벤트 처리
+            var segments = [];
+            for (var row = startRow; row <= endRow; row += 1) {
+                var isFirstRow = row === startRow;
+                var isLastRow = row === endRow;
+                var segmentStartCol = isFirstRow ? startCol : 1;
+                var segmentEndCol = isLastRow ? endCol : 7;
+                segments.push((0, jsx_runtime_1.jsxs)(S_MultiWeekSchedule, __assign({ "$color": schedule.color, "$startRow": row, "$endRow": row, "$startCol": segmentStartCol, "$endCol": segmentEndCol, "$scheduleIndex": scheduleIndex, "$isSelected": isSelected, "$isDraggable": isDraggable, "$cellPositions": cellPositions, draggable: isDraggable, onDragStart: isDraggable
+                        ? function (e) {
+                            handleScheduleDragStart === null || handleScheduleDragStart === void 0 ? void 0 : handleScheduleDragStart(schedule, e);
+                        }
+                        : undefined, onDragEnd: isDraggable ? handleScheduleDragEnd : undefined, onClick: function (e) {
+                        e.stopPropagation();
+                        handleScheduleClick === null || handleScheduleClick === void 0 ? void 0 : handleScheduleClick(schedule, e);
+                    } }, { children: [(0, jsx_runtime_1.jsx)(ScheduleItem_1.S_Dot, { "$isSelected": isSelected }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Regular", text: schedule.title, ellipsisMode: "use", colorTheme: isSelected ? 'sysTextWhite' : undefined })] }), "".concat(uniqueKey, "-row-").concat(row)));
+            }
+            return segments;
+        }) })));
+};
+exports.MultiWeekSchedulesLayer = MultiWeekSchedulesLayer;
+var S_Layer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  left: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 10;\n\n  & > * {\n    pointer-events: auto;\n  }\n"], ["\n  height: 100%;\n  left: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 10;\n\n  & > * {\n    pointer-events: auto;\n  }\n"])));
+var S_MultiWeekSchedule = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 4px;\n  color: white;\n  cursor: ", ";\n  display: flex;\n  font-size: 12px;\n  height: 17px;\n  left: ", ";\n  padding: 2px 6px;\n  position: absolute;\n  top: ", ";\n  user-select: none;\n  width: ", ";\n  z-index: 10;\n\n  &:active {\n    background: ", ";\n    cursor: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 4px;\n  color: white;\n  cursor: ", ";\n  display: flex;\n  font-size: 12px;\n  height: 17px;\n  left: ", ";\n  padding: 2px 6px;\n  position: absolute;\n  top: ", ";\n  user-select: none;\n  width: ", ";\n  z-index: 10;\n\n  &:active {\n    background: ", ";\n    cursor: ", ";\n  }\n"])), function (props) {
+    return props.$isSelected ? props.theme.ui_cpnt_sheet_base_06 : props.theme.ui_cpnt_sheet_base;
+}, function (_a) {
+    var $isDraggable = _a.$isDraggable;
+    return ($isDraggable ? 'grab' : 'normal');
+}, function (props) { return "calc((".concat(props.$startCol - 1, ") * (100% / 7) + 4px)"); }, function (props) {
+    var $startRow = props.$startRow, $scheduleIndex = props.$scheduleIndex, $cellPositions = props.$cellPositions;
+    var rowIndex = $startRow - 2; // 헤더 행 제외 (첫 번째 캘린더 행이 row 2)
+    if (!$cellPositions ||
+        $cellPositions.length === 0 ||
+        rowIndex < 0 ||
+        rowIndex >= $cellPositions.length) {
+        // 기본값 (fallback)
+        var defaultTop = 60 + rowIndex * 100;
+        var scheduleSpacing_1 = ($scheduleIndex || 0) * 19;
+        return "".concat(defaultTop + scheduleSpacing_1, "px");
+    }
+    var cellPosition = $cellPositions[rowIndex];
+    var scheduleHeight = 16;
+    var scheduleSpacing = ($scheduleIndex || 0) * (scheduleHeight + 7);
+    var calculatedTop = cellPosition.top + scheduleSpacing;
+    return "".concat(calculatedTop, "px");
+}, function (props) { return "calc((".concat(props.$endCol - props.$startCol + 1, ") * (100% / 7) - 21px)"); }, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_sheet_base_06;
+}, function (_a) {
+    var $isDraggable = _a.$isDraggable;
+    return ($isDraggable ? 'grabbing' : 'normal');
+});
+var templateObject_1, templateObject_2;

package/dist/src/desktop/components/Calendar/ScheduleItem.d.ts

@@ -0,0 +1,25 @@
+import type { Schedule } from './types';
+import type React from 'react';
+export interface ScheduleItemExtraProps {
+    onDragStart?: (e: React.DragEvent) => void;
+    onDragEnd?: () => void;
+    onClick?: (e: React.MouseEvent) => void;
+    style?: React.CSSProperties;
+    className?: string;
+    [key: string]: unknown;
+}
+interface ScheduleItemProps {
+    schedule: Schedule;
+    extraProps?: ScheduleItemExtraProps;
+    onDragStart: (schedule: Schedule, e: React.DragEvent) => void;
+    onDragEnd: () => void;
+    onClick?: (schedule: Schedule, e?: React.MouseEvent) => void;
+    isSelected?: boolean;
+    isAllDay?: boolean;
+    isDraggable?: boolean;
+}
+export declare const ScheduleItem: React.FC<ScheduleItemProps>;
+export declare const S_Dot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $isSelected?: boolean | undefined;
+}, never>;
+export {};