pds-dev-kit-web-test 2.2.99 → 2.2.244

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

@@ -0,0 +1,134 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AllDaySchedulesSection = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var styled_components_1 = __importDefault(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+var CalendarContext_1 = require("./CalendarContext");
+var calendarUtils_1 = require("./calendarUtils");
+var AllDaySchedulesSection = function (_a) {
+    var calendarDates = _a.calendarDates, _b = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _b === void 0 ? 'use' : _b, getSchedulesForDate = _a.getSchedulesForDate, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var renderScheduleItem = (0, CalendarContext_1.useCalendarContext)().renderScheduleItem;
+    // 다중 날짜 종일 이벤트 계산
+    var multiDayAllDaySchedules = (0, react_1.useMemo)(function () {
+        var allSchedules = new Map();
+        var multiDaySchedules = [];
+        // 모든 종일 이벤트 수집
+        calendarDates.forEach(function (date) {
+            var schedulesForDate = getSchedulesForDate(date);
+            schedulesForDate.forEach(function (schedule) {
+                if (!(0, calendarUtils_1.calculateIsAllDay)(new Date(schedule.startDate), new Date(schedule.endDate))) {
+                    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);
+                // 단일 날짜 종일 이벤트는 제외
+                if (scheduleStart.getTime() === scheduleEnd.getTime()) {
+                    return;
+                }
+                allSchedules.set(schedule.id, schedule);
+            });
+        });
+        // 주간 뷰의 시작/끝 날짜 계산
+        var weekStart = new Date(calendarDates[0]);
+        var weekEnd = new Date(calendarDates[calendarDates.length - 1]);
+        weekStart.setHours(0, 0, 0, 0);
+        weekEnd.setHours(0, 0, 0, 0);
+        // 다중 날짜 이벤트의 위치 계산
+        var scheduleIndexCounter = 0;
+        allSchedules.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);
+            // 이벤트가 현재 주와 교차하지 않으면 건너뛰기
+            var isIntersecting = !(scheduleEnd.getTime() < weekStart.getTime() || scheduleStart.getTime() > weekEnd.getTime());
+            if (!isIntersecting) {
+                return;
+            }
+            // 표시할 실제 시작/끝 날짜 계산 (주간 뷰 범위 내로 제한)
+            var displayStart = new Date(Math.max(scheduleStart.getTime(), weekStart.getTime()));
+            var displayEnd = new Date(Math.min(scheduleEnd.getTime(), weekEnd.getTime()));
+            // 시작과 끝 컬럼 찾기
+            var startIndex = calendarDates.findIndex(function (date) {
+                var d = new Date(date);
+                d.setHours(0, 0, 0, 0);
+                return d.getTime() === displayStart.getTime();
+            });
+            var endIndex = calendarDates.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;
+            }
+            var startCol = startIndex + 2; // 라벨 컬럼(1) + 0-based 인덱스 보정
+            var endCol = endIndex + 2;
+            multiDaySchedules.push({
+                schedule: schedule,
+                startCol: startCol,
+                endCol: endCol,
+                scheduleIndex: scheduleIndexCounter
+            });
+            scheduleIndexCounter += 1;
+        });
+        return multiDaySchedules;
+    }, [calendarDates, getSchedulesForDate]);
+    if (displayAllDayScheduleMode === 'none') {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(S_WeeklyAllDaySection, __assign({ "$rowCount": Math.max(1, multiDayAllDaySchedules.length) }, { children: [(0, jsx_runtime_1.jsx)(S_AllDayLabel, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption1Regular", colorTheme: "sysTextTertiary", text: t('calendar_all_day') }) }), (0, jsx_runtime_1.jsx)(S_WeeklyAllDayGrid, { children: calendarDates.map(function (date, index) {
+                    // 단일 날짜 종일 이벤트만 표시
+                    var singleDayAllDaySchedules = getSchedulesForDate(date).filter(function (schedule) {
+                        var isAllDay = (0, calendarUtils_1.calculateIsAllDay)(new Date(schedule.startDate), new Date(schedule.endDate));
+                        if (!isAllDay)
+                            return false;
+                        var scheduleStart = new Date(schedule.startDate);
+                        var scheduleEnd = new Date(schedule.endDate);
+                        scheduleStart.setHours(0, 0, 0, 0);
+                        scheduleEnd.setHours(0, 0, 0, 0);
+                        // 단일 날짜 종일 이벤트만 포함
+                        return scheduleStart.getTime() === scheduleEnd.getTime();
+                    });
+                    return ((0, jsx_runtime_1.jsx)(S_WeeklyAllDayCell, __assign({ onDragOver: function (e) { return handleDateDragOver(date, e); }, onDragLeave: handleDateDragLeave, onDrop: function (e) { return handleDateDrop(date, e); } }, { children: singleDayAllDaySchedules.map(function (schedule) { return renderScheduleItem(schedule); }) }), index));
+                }) }), multiDayAllDaySchedules.map(function (_a) {
+                var schedule = _a.schedule, startCol = _a.startCol, endCol = _a.endCol, scheduleIndex = _a.scheduleIndex;
+                return ((0, jsx_runtime_1.jsx)(S_MultiDayAllDaySchedule, __assign({ "$startCol": startCol, "$endCol": endCol, "$scheduleIndex": scheduleIndex }, { children: renderScheduleItem(schedule) }), "multi-".concat(schedule.id)));
+            })] })));
+};
+exports.AllDaySchedulesSection = AllDaySchedulesSection;
+var S_WeeklyAllDaySection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  display: grid;\n  grid-template-columns: 80px repeat(7, 1fr);\n  grid-template-rows: repeat(", ", 24px);\n  min-height: 40px;\n  position: relative;\n"], ["\n  border-bottom: 1px solid ", ";\n  display: grid;\n  grid-template-columns: 80px repeat(7, 1fr);\n  grid-template-rows: repeat(", ", 24px);\n  min-height: 40px;\n  position: relative;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
+}, function (props) { return props.$rowCount; });
+var S_AllDayLabel = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding: 8px;\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding: 8px;\n"])));
+var S_WeeklyAllDayGrid = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
+var S_WeeklyAllDayCell = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 2px;\n  padding: 4px;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 2px;\n  padding: 4px;\n"])));
+var S_MultiDayAllDaySchedule = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  grid-area: ", ";\n  margin: 2px;\n  position: relative;\n  z-index: 10;\n"], ["\n  grid-area: ", ";\n  margin: 2px;\n  position: relative;\n  z-index: 10;\n"])), function (props) {
+    return "".concat(1 + props.$scheduleIndex, " / ").concat(props.$startCol, " / ").concat(2 + props.$scheduleIndex, " / ").concat(props.$endCol + 1);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { CalendarProps } from './types';
+declare const Calendar: React.FC<CalendarProps>;
+export default Calendar;

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

@@ -0,0 +1,437 @@
+"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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var dateHelper_1 = require("../../../common/utils/dateHelper");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Dropdown_1 = require("../Dropdown");
+var IconButton_1 = require("../IconButton");
+var TextButton_1 = require("../TextButton");
+var TextLabel_1 = require("../TextLabel");
+var CalendarContext_1 = require("./CalendarContext");
+var calendarUtils_1 = require("./calendarUtils");
+var constants_1 = require("./constants");
+var DailyView_1 = require("./DailyView");
+var MonthlyView_1 = require("./MonthlyView");
+var WeeklyView_1 = require("./WeeklyView");
+var YearlyView_1 = require("./YearlyView");
+var Calendar = function (_a) {
+    var _b;
+    var _c = _a.defaultViewType, defaultViewType = _c === void 0 ? 'str_fm_month' : _c, _d = _a.viewTypes, viewTypes = _d === void 0 ? ['str_fm_month', 'str_fm_week', 'str_fm_day', 'str_fm_year'] : _d, _e = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _e === void 0 ? 'none' : _e, _f = _a.startOfWeek, startOfWeek = _f === void 0 ? 'sunday' : _f, _g = _a.todayBtnMode, todayBtnMode = _g === void 0 ? 'use' : _g, _h = _a.schedules, schedules = _h === void 0 ? [] : _h, config = _a.config, onActionDispatch = _a.onActionDispatch;
+    var _j = (0, react_i18next_1.useTranslation)('translation'), t = _j.t, i18n = _j.i18n;
+    var _k = (0, react_1.useState)(defaultViewType), currentViewType = _k[0], setCurrentViewType = _k[1];
+    var _l = (0, react_1.useState)(new Date()), selectedDate = _l[0], setSelectedDate = _l[1];
+    var _m = (0, react_1.useState)(null), dragStartDate = _m[0], setDragStartDate = _m[1];
+    var _o = (0, react_1.useState)(null), dragEndDate = _o[0], setDragEndDate = _o[1];
+    var _p = (0, react_1.useState)(false), isDragging = _p[0], setIsDragging = _p[1];
+    var _q = (0, react_1.useState)(null), draggedSchedule = _q[0], setDraggedSchedule = _q[1];
+    var _r = (0, react_1.useState)(null), isDragOverDate = _r[0], setIsDragOverDate = _r[1];
+    var _s = (0, react_1.useState)([]), selectedSchedules = _s[0], setSelectedSchedules = _s[1];
+    var _t = (0, react_1.useState)([]), selectedDates = _t[0], setSelectedDates = _t[1];
+    var _u = (0, react_1.useState)(null), lastSelectedDate = _u[0], setLastSelectedDate = _u[1];
+    // 오늘 날짜인지 확인
+    var today = new Date();
+    var isToday = function (date) { return dateHelper_1.DateHelper.isSameDay(date, today); };
+    var isDraggable = !!((_b = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _b === void 0 ? void 0 : _b.DRAG);
+    // 과거 날짜인지 확인
+    var isPastDate = (0, react_1.useCallback)(function (date) { return dateHelper_1.DateHelper.isBefore(date, today) && !dateHelper_1.DateHelper.isSameDay(date, today); }, [today]);
+    // 뷰 타입에 따른 시작일과 종료일 계산
+    var _v = (0, calendarUtils_1.calculateDateRange)(currentViewType, selectedDate), startDate = _v.startDate, endDate = _v.endDate;
+    // 뷰 타입 변경 처리
+    var handleViewTypeChange = (0, react_1.useCallback)(function (option) {
+        var newViewType = option.value;
+        setCurrentViewType(newViewType);
+        // 새로운 뷰 타입 기준으로 startDate와 endDate 계산
+        var _a = (0, calendarUtils_1.calculateDateRange)(newViewType, selectedDate), newStartDate = _a.startDate, newEndDate = _a.endDate;
+        onActionDispatch === null || onActionDispatch === void 0 ? void 0 : onActionDispatch({
+            type: 'CALENDAR_TYPE_CHANGE',
+            payload: {
+                type: newViewType,
+                startDate: (0, calendarUtils_1.toUTC)(newStartDate),
+                endDate: (0, calendarUtils_1.toUTC)(newEndDate)
+            }
+        });
+    }, [selectedDate, onActionDispatch, calendarUtils_1.calculateDateRange]);
+    // "오늘" 버튼 클릭 이벤트
+    var handleTodayClick = (0, react_1.useCallback)(function () {
+        setSelectedDate(today);
+        // 오늘 날짜 기준으로 startDate와 endDate 계산
+        var _a = (0, calendarUtils_1.calculateDateRange)(currentViewType, today), newStartDate = _a.startDate, newEndDate = _a.endDate;
+        onActionDispatch === null || onActionDispatch === void 0 ? void 0 : onActionDispatch({
+            type: 'TODAY_BUTTON_CLICK',
+            payload: {
+                startDate: (0, calendarUtils_1.toUTC)(newStartDate),
+                endDate: (0, calendarUtils_1.toUTC)(newEndDate)
+            }
+        });
+    }, [today, currentViewType, onActionDispatch, calendarUtils_1.calculateDateRange]);
+    // 이전/다음 이동 함수
+    var navigateDate = (0, react_1.useCallback)(function (direction) {
+        var increment = direction === 'next' ? 1 : -1;
+        var getNewDateByViewType = function (viewType) {
+            switch (viewType) {
+                case 'str_fm_day':
+                    return dateHelper_1.DateHelper.addDays(selectedDate, increment);
+                case 'str_fm_week':
+                    return dateHelper_1.DateHelper.addDays(selectedDate, increment * 7);
+                case 'str_fm_month':
+                    return dateHelper_1.DateHelper.addMonths(selectedDate, increment);
+                case 'str_fm_year':
+                    return new Date(selectedDate.getFullYear() + increment, selectedDate.getMonth(), selectedDate.getDate());
+                default:
+                    return selectedDate;
+            }
+        };
+        var newDate = getNewDateByViewType(currentViewType);
+        setSelectedDate(newDate);
+        // 새로운 날짜 기준으로 startDate와 endDate 계산
+        var _a = (0, calendarUtils_1.calculateDateRange)(currentViewType, newDate), newStartDate = _a.startDate, newEndDate = _a.endDate;
+        onActionDispatch === null || onActionDispatch === void 0 ? void 0 : onActionDispatch({
+            type: direction === 'prev' ? 'PREV_BUTTON_CLICK' : 'NEXT_BUTTON_CLICK',
+            payload: {
+                startDate: (0, calendarUtils_1.toUTC)(newStartDate),
+                endDate: (0, calendarUtils_1.toUTC)(newEndDate)
+            }
+        });
+    }, [selectedDate, currentViewType, onActionDispatch, calendarUtils_1.calculateDateRange]);
+    // 특정 날짜의 이벤트 가져오기
+    var getSchedulesForDate = (0, react_1.useCallback)(function (date) {
+        return schedules.filter(function (schedule) {
+            var scheduleStart = new Date(schedule.startDate);
+            var scheduleEnd = new Date(schedule.endDate);
+            var targetDate = new Date(date);
+            // 정확한 날짜 비교를 위해 시간을 일 시작으로 설정
+            scheduleStart.setHours(0, 0, 0, 0);
+            scheduleEnd.setHours(23, 59, 59, 999);
+            targetDate.setHours(0, 0, 0, 0);
+            // 대상 날짜가 이벤트 날짜 범위 내에 있는지 확인
+            return targetDate >= scheduleStart && targetDate <= scheduleEnd;
+        });
+    }, [schedules]);
+    // 날짜 클릭 이벤트 (일반 클릭, shift 클릭 둘다 포함)
+    var handleDateClick = (0, react_1.useCallback)(function (date, e) {
+        var _a, _b, _c, _d, _e, _f;
+        var isShiftClick = ((_a = config === null || config === void 0 ? void 0 : config.DATE) === null || _a === void 0 ? void 0 : _a.CLICK_WITH_SHIFT_KEY_DOWN) && (e === null || e === void 0 ? void 0 : e.shiftKey);
+        var isNormalClick = ((_b = config === null || config === void 0 ? void 0 : config.DATE) === null || _b === void 0 ? void 0 : _b.CLICK) && !(e === null || e === void 0 ? void 0 : e.shiftKey);
+        var getDateKey = function (d) { return "".concat(d.getFullYear(), "-").concat(d.getMonth(), "-").concat(d.getDate()); };
+        var clickedDateKey = getDateKey(date);
+        // shift 클릭 처리
+        if (isShiftClick) {
+            var newSelectedDates = selectedDates.some(function (d) { return getDateKey(d) === clickedDateKey; })
+                ? selectedDates.filter(function (d) { return getDateKey(d) !== clickedDateKey; })
+                : __spreadArray(__spreadArray([], selectedDates, true), [date], false);
+            setSelectedDates(newSelectedDates);
+            setLastSelectedDate(date);
+            (_d = (_c = config === null || config === void 0 ? void 0 : config.DATE) === null || _c === void 0 ? void 0 : _c.CLICK_WITH_SHIFT_KEY_DOWN) === null || _d === void 0 ? void 0 : _d.call(_c, {
+                action: 'CLICK_WITH_SHIFT_KEY_DOWN',
+                target: 'DATE',
+                dates: newSelectedDates,
+                startDate: (0, calendarUtils_1.toUTC)(startDate),
+                endDate: (0, calendarUtils_1.toUTC)(endDate)
+            });
+        }
+        setSelectedDate(date);
+        // 일반 클릭 처리
+        if (isNormalClick) {
+            (_f = (_e = config === null || config === void 0 ? void 0 : config.DATE) === null || _e === void 0 ? void 0 : _e.CLICK) === null || _f === void 0 ? void 0 : _f.call(_e, {
+                action: 'CLICK',
+                target: 'DATE',
+                date: date,
+                startDate: (0, calendarUtils_1.toUTC)(startDate),
+                endDate: (0, calendarUtils_1.toUTC)(endDate)
+            });
+        }
+    }, [isPastDate, config, lastSelectedDate, selectedDates, startDate, endDate]);
+    // 날짜 범위 선택을 위한 마우스 이벤트 처리
+    var handleMouseUp = (0, react_1.useCallback)(function () {
+        setIsDragging(false);
+        setDragStartDate(null);
+        setDragEndDate(null);
+    }, [isDragging, dragStartDate, dragEndDate]);
+    // 날짜 드래그 이벤트 처리
+    var handleDateDrag = (0, react_1.useCallback)(function (action) {
+        var _a, _b;
+        if (action.action === 'DRAG' && action.target === 'DATE') {
+            // 선택된 스케줄들을 selectedSchedules state에 반영
+            if (action.schedules && action.schedules.length > 0) {
+                setSelectedSchedules(action.schedules);
+            }
+            else {
+                setSelectedSchedules([]);
+            }
+            // 원래 config.DATE.DRAG 콜백이 있다면 호출
+            (_b = (_a = config === null || config === void 0 ? void 0 : config.DATE) === null || _a === void 0 ? void 0 : _a.DRAG) === null || _b === void 0 ? void 0 : _b.call(_a, action);
+        }
+    }, [config]);
+    // 이벤트 드래그 핸들러
+    var handleScheduleDragStart = (0, react_1.useCallback)(function (schedule, e) {
+        setDraggedSchedule(schedule);
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', schedule.id.toString());
+        // 더 정확한 드롭 계산을 위한 오프셋 정보 저장
+        var scheduleStartDate = new Date(schedule.startDate);
+        scheduleStartDate.setHours(0, 0, 0, 0);
+        // 원본 이벤트 시작 시간을 dataTransfer에 저장
+        e.dataTransfer.setData('scheduleStartTime', scheduleStartDate.getTime().toString());
+    }, []);
+    // 이벤트 드래그 종료 이벤트
+    var handleScheduleDragEnd = (0, react_1.useCallback)(function () {
+        setDraggedSchedule(null);
+        setIsDragOverDate(null);
+    }, []);
+    // 날짜 드래그 오버 이벤트
+    var handleDateDragOver = (0, react_1.useCallback)(function (date, e) {
+        if (!draggedSchedule) {
+            return;
+        }
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        setIsDragOverDate(date);
+    }, [draggedSchedule]);
+    // 날짜 드래그 떼기
+    var handleDateDragLeave = (0, react_1.useCallback)(function () {
+        setIsDragOverDate(null);
+    }, []);
+    // 삭제 키 이벤트 처리
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        var _a, _b;
+        if ((e.key === 'Backspace' || e.key === 'Delete') &&
+            (selectedSchedules.length > 0 || selectedDates.length > 0)) {
+            // config 콜백이 있으면 호출
+            (_b = (_a = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _a === void 0 ? void 0 : _a.DELETE_KEY_DOWN) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                action: 'DELETE_KEY_DOWN',
+                target: 'SCHEDULE',
+                schedules: selectedSchedules,
+                startDate: (0, calendarUtils_1.toUTC)(startDate),
+                endDate: (0, calendarUtils_1.toUTC)(endDate)
+            });
+            // 항상 선택된 스케줄들 해제
+            setSelectedSchedules([]);
+            setSelectedDates([]);
+            // 브라우저 기본 동작 방지 (뒤로가기 등)
+            e.preventDefault();
+        }
+    }, [config, selectedSchedules, startDate, endDate]);
+    // 날짜 드래그 놓기
+    var handleDateDrop = (0, react_1.useCallback)(function (date, e) {
+        var _a, _b, _c;
+        e.preventDefault();
+        if (!draggedSchedule) {
+            return;
+        }
+        if (!((_a = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _a === void 0 ? void 0 : _a.DRAG)) {
+            return;
+        }
+        var originalStartDate = new Date(draggedSchedule.startDate);
+        var originalEndDate = new Date(draggedSchedule.endDate);
+        var duration = originalEndDate.getTime() - originalStartDate.getTime();
+        var getAdjustedStartDate = function () {
+            var baseDate = new Date(date);
+            if (currentViewType === 'str_fm_month') {
+                var target = e.target;
+                var gridContainer = target.closest('[data-calendar-grid]');
+                if (gridContainer) {
+                    var gridRect = gridContainer.getBoundingClientRect();
+                    var cellWidth = gridRect.width / 7;
+                    var clickedColumn = Math.floor((e.clientX - gridRect.left) / cellWidth);
+                    var dropDayOfWeek = baseDate.getDay();
+                    var columnOffset = clickedColumn - dropDayOfWeek;
+                    var actualDropDate = new Date(baseDate);
+                    actualDropDate.setDate(baseDate.getDate() + columnOffset);
+                    actualDropDate.setHours(originalStartDate.getHours(), originalStartDate.getMinutes(), 0, 0);
+                    return actualDropDate;
+                }
+            }
+            // 공통 처리 (WEEKLY, DAILY, fallback)
+            baseDate.setHours(originalStartDate.getHours(), originalStartDate.getMinutes(), 0, 0);
+            return baseDate;
+        };
+        var newStartDate = getAdjustedStartDate();
+        var newEndDate = new Date(newStartDate.getTime() + duration);
+        var updatedSchedule = __assign(__assign({}, draggedSchedule), { startDate: newStartDate, endDate: newEndDate });
+        (_c = (_b = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _b === void 0 ? void 0 : _b.DRAG) === null || _c === void 0 ? void 0 : _c.call(_b, {
+            action: 'DRAG',
+            target: 'SCHEDULE',
+            schedule: updatedSchedule,
+            startDate: (0, calendarUtils_1.toUTC)(startDate),
+            endDate: (0, calendarUtils_1.toUTC)(endDate)
+        });
+        setIsDragOverDate(null);
+    }, [draggedSchedule, config, currentViewType]);
+    var defaultDayTexts = (0, react_1.useMemo)(function () { return [
+        t('str_3893'),
+        t('str_3887'),
+        t('str_3888'),
+        t('str_3889'),
+        t('str_3890'),
+        t('str_3891'),
+        t('str_3892') // 토 -  6
+    ]; }, [t]);
+    // 날짜의 실제 요일에 따른 요일 텍스트 가져오기
+    var getDayTextByDate = function (date) {
+        return defaultDayTexts[date.getDay()];
+    };
+    // 뷰 타입을 위한 드롭다운 옵션 생성
+    var viewTypeOptions = (0, react_1.useMemo)(function () {
+        return viewTypes.map(function (viewType) { return ({
+            text: t(viewType),
+            value: viewType
+        }); });
+    }, [viewTypes, t]);
+    // 특정 월의 캘린더 날짜 생성 (연간 보기용)
+    var getMonthDates = (0, react_1.useCallback)(function (year, month) {
+        var monthDate = new Date(year, month, 1);
+        return dateHelper_1.DateHelper.getCalendarDates(monthDate, startOfWeek);
+    }, [startOfWeek]);
+    // 스케줄 클릭 (일반 클릭, shift 클릭 둘다 포함)
+    var handleScheduleClick = function (schedule, e) {
+        var _a, _b, _c, _d, _e, _f;
+        var isShiftClick = ((_a = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _a === void 0 ? void 0 : _a.CLICK_WITH_SHIFT_KEY_DOWN) && (e === null || e === void 0 ? void 0 : e.shiftKey);
+        var isNormalClick = ((_b = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _b === void 0 ? void 0 : _b.CLICK) && !(e === null || e === void 0 ? void 0 : e.shiftKey);
+        var isSelected = selectedSchedules.some(function (s) { return s.id === (schedule === null || schedule === void 0 ? void 0 : schedule.id); });
+        if (isShiftClick) {
+            var newSelectedSchedules = isSelected
+                ? selectedSchedules.filter(function (s) { return s.id !== (schedule === null || schedule === void 0 ? void 0 : schedule.id); })
+                : __spreadArray(__spreadArray([], selectedSchedules, true), [schedule], false).filter(function (s) { return s !== undefined; });
+            setSelectedSchedules(newSelectedSchedules);
+            (_d = (_c = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _c === void 0 ? void 0 : _c.CLICK_WITH_SHIFT_KEY_DOWN) === null || _d === void 0 ? void 0 : _d.call(_c, {
+                action: 'CLICK_WITH_SHIFT_KEY_DOWN',
+                target: 'SCHEDULE',
+                schedules: newSelectedSchedules,
+                startDate: (0, calendarUtils_1.toUTC)(startDate),
+                endDate: (0, calendarUtils_1.toUTC)(endDate)
+            });
+            return;
+        }
+        if (isNormalClick) {
+            // 일반 클릭 시 해당 스케줄만 선택
+            setSelectedSchedules([schedule]);
+            (_f = (_e = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _e === void 0 ? void 0 : _e.CLICK) === null || _f === void 0 ? void 0 : _f.call(_e, {
+                action: 'CLICK',
+                target: 'SCHEDULE',
+                schedule: schedule,
+                startDate: (0, calendarUtils_1.toUTC)(startDate),
+                endDate: (0, calendarUtils_1.toUTC)(endDate)
+            });
+            return;
+        }
+    };
+    // 주간 뷰로 전환하는 핸들러
+    var handleSwitchToWeeklyView = (0, react_1.useCallback)(function (date) {
+        setCurrentViewType('str_fm_week');
+        setSelectedDate(date);
+        // 주간 뷰로 전환할 때의 startDate와 endDate 계산
+        var _a = (0, calendarUtils_1.calculateDateRange)('str_fm_week', date), newStartDate = _a.startDate, newEndDate = _a.endDate;
+        onActionDispatch === null || onActionDispatch === void 0 ? void 0 : onActionDispatch({
+            type: 'CALENDAR_TYPE_CHANGE',
+            payload: {
+                type: 'str_fm_week',
+                startDate: (0, calendarUtils_1.toUTC)(newStartDate),
+                endDate: (0, calendarUtils_1.toUTC)(newEndDate)
+            }
+        });
+    }, [onActionDispatch, calendarUtils_1.calculateDateRange]);
+    var getMonthStringKey = function (monthNumber) {
+        var monthKeys = [
+            'str_month_january',
+            'str_month_february',
+            'str_month_march',
+            'str_month_april',
+            'str_month_may',
+            'str_month_june',
+            'str_month_july',
+            'str_month_august',
+            'str_month_september',
+            'str_month_october',
+            'str_month_november',
+            'str_month_december'
+        ];
+        return monthKeys[monthNumber - 1];
+    };
+    var getHeaderText = function (viewType, selectedDate) {
+        var year = selectedDate.getFullYear();
+        var monthNumber = selectedDate.getMonth() + 1;
+        var day = selectedDate.getDate();
+        var locale = (0, constants_1.getLocaleFromLang)(i18n.language);
+        if (viewType === 'str_fm_day') {
+            return t('str_calendar_daily_header', { year: year, month: monthNumber, day: day });
+        }
+        if (viewType === 'str_fm_week') {
+            return t('str_calendar_weekly_header', {
+                year: year,
+                month: locale === 'en-US' ? t(getMonthStringKey(monthNumber)) : monthNumber
+            });
+        }
+        if (viewType === 'str_fm_month') {
+            return t('str_calendar_monthly_header', {
+                year: year,
+                month: locale === 'en-US' ? t(getMonthStringKey(monthNumber)) : monthNumber
+            });
+        }
+        if (viewType === 'str_fm_year') {
+            return t('str_calendar_yearly_header', { year: year });
+        }
+        return '';
+    };
+    // 뷰 타입에 따른 캘린더 콘텐츠 렌더링
+    var renderCalendarContent = function () {
+        switch (currentViewType) {
+            case 'str_fm_month':
+                return ((0, jsx_runtime_1.jsx)(MonthlyView_1.MonthlyView, { getDayTextByDate: getDayTextByDate, startOfWeek: startOfWeek, selectedDate: selectedDate, selectedDates: selectedDates, dragStartDate: dragStartDate, selectedSchedules: selectedSchedules, dragEndDate: dragEndDate, isDragOverDate: isDragOverDate, schedules: schedules, getSchedulesForDate: getSchedulesForDate, isToday: isToday, isPastDate: isPastDate, handleDateClick: handleDateClick, handleScheduleClick: handleScheduleClick, handleMouseUp: handleMouseUp, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, isDraggable: isDraggable, onSwitchToWeeklyView: handleSwitchToWeeklyView, config: config }));
+            case 'str_fm_week':
+                return (0, jsx_runtime_1.jsx)(WeeklyView_1.WeeklyView, { startOfWeek: startOfWeek, schedules: schedules, config: config });
+            case 'str_fm_day':
+                return (0, jsx_runtime_1.jsx)(DailyView_1.DailyView, { schedules: schedules, config: config });
+            case 'str_fm_year':
+                return ((0, jsx_runtime_1.jsx)(YearlyView_1.YearlyView, { selectedDate: selectedDate, getMonthDates: getMonthDates, getDayTextByDate: getDayTextByDate, startOfWeek: startOfWeek, isToday: isToday, handleDateClick: handleDateClick, getSchedulesForDate: getSchedulesForDate }));
+            default:
+                return null;
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(CalendarContext_1.CalendarProvider
+    // 스케줄 관련
+    , __assign({ 
+        // 스케줄 관련
+        selectedSchedules: selectedSchedules, isDraggable: isDraggable, handleScheduleClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, 
+        // 날짜 관련
+        handleDateClick: handleDateClick, handleDateDrag: handleDateDrag, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, 
+        // 유틸리티 함수
+        getSchedulesForDate: getSchedulesForDate, isToday: isToday, isPastDate: isPastDate, getDayTextByDate: getDayTextByDate, 
+        // 상태값
+        isDragOverDate: isDragOverDate, selectedDate: selectedDate, displayAllDayScheduleMode: displayAllDayScheduleMode }, { children: (0, jsx_runtime_1.jsxs)(S_CalendarContainer, __assign({ "x-pds-name": "Calendar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onKeyDown: handleKeyDown, tabIndex: 0 }, { children: [(0, jsx_runtime_1.jsxs)(S_CalendarHeader, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "headingBold", textAlign: "center", text: getHeaderText(currentViewType, selectedDate) }), (0, jsx_runtime_1.jsxs)(S_LeftContainer, { children: [(0, jsx_runtime_1.jsx)(S_NavigationButtonContainer, __assign({ onClick: function () { return navigateDate('prev'); } }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_arrow_left", baseSize: "small", iconSize: 16, baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_icon_sys_grey_01" }) })), todayBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: t('str_calendar_today'), size: "small", colorTheme: "grey_01", onClick: handleTodayClick })), (0, jsx_runtime_1.jsx)(S_NavigationButtonContainer, __assign({ onClick: function () { return navigateDate('next'); } }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_arrow_right", baseSize: "small", iconSize: 16, baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_icon_sys_grey_01" }) })), (0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { size: "small", valueArray: viewTypeOptions, value: viewTypeOptions.find(function (option) { return option.value === currentViewType; }), onChange: handleViewTypeChange, customWidth: "120px" })] })] }), (0, jsx_runtime_1.jsx)(S_CalendarContent, { children: renderCalendarContent() })] })) })));
+};
+var S_CalendarContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 400px;\n  outline: 0px;\n  overflow: hidden;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 400px;\n  outline: 0px;\n  overflow: hidden;\n  width: 100%;\n"])));
+var S_CalendarHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n  padding: 0px 0px 8px 0px;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n  padding: 0px 0px 8px 0px;\n"])));
+var S_NavigationButtonContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  width: 32px;\n"], ["\n  align-items: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  width: 32px;\n"])));
+var S_LeftContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n  margin-left: auto;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n  margin-left: auto;\n"])));
+var S_CalendarContent = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  overflow: auto;\n"], ["\n  flex: 1;\n  overflow: auto;\n"])));
+exports.default = Calendar;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { Schedule, displayAllDayScheduleMode, Action } from './types';
+export interface ScheduleItemExtraProps {
+    onDragStart?: (e: React.DragEvent) => void;
+    onDragEnd?: () => void;
+    onClick?: (e: React.MouseEvent) => void;
+    style?: React.CSSProperties;
+    className?: string;
+    [key: string]: unknown;
+}
+interface CalendarContextValue {
+    renderScheduleItem: (schedule: Schedule, extraProps?: ScheduleItemExtraProps) => React.ReactNode;
+    handleScheduleClick: (schedule: Schedule, e?: React.MouseEvent) => void;
+    handleScheduleDragStart: (schedule: Schedule, e: React.DragEvent) => void;
+    handleScheduleDragEnd: () => void;
+    handleDateClick: (date: Date, e: React.MouseEvent) => void;
+    handleDateDrag: (action: Action) => void;
+    handleDateDragOver: (date: Date, e: React.DragEvent) => void;
+    handleDateDragLeave: () => void;
+    handleDateDrop: (date: Date, e: React.DragEvent) => void;
+    getSchedulesForDate: (date: Date) => Schedule[];
+    isToday: (date: Date) => boolean;
+    isPastDate: (date: Date) => boolean;
+    getDayTextByDate: (date: Date) => string;
+    selectedSchedules: Schedule[];
+    isDragOverDate: Date | null;
+    selectedDate: Date;
+    displayAllDayScheduleMode: displayAllDayScheduleMode;
+    isDraggable: boolean;
+}
+export declare const useCalendarContext: () => CalendarContextValue;
+interface CalendarProviderProps {
+    children: React.ReactNode;
+    selectedSchedules: Schedule[];
+    isDraggable: boolean;
+    handleScheduleClick: (schedule: Schedule, e?: React.MouseEvent) => void;
+    handleScheduleDragStart: (schedule: Schedule, e: React.DragEvent) => void;
+    handleScheduleDragEnd: () => void;
+    handleDateClick: (date: Date, e: React.MouseEvent) => void;
+    handleDateDrag: (action: Action) => void;
+    handleDateDragOver: (date: Date, e: React.DragEvent) => void;
+    handleDateDragLeave: () => void;
+    handleDateDrop: (date: Date, e: React.DragEvent) => void;
+    getSchedulesForDate: (date: Date) => Schedule[];
+    isToday: (date: Date) => boolean;
+    isPastDate: (date: Date) => boolean;
+    getDayTextByDate: (date: Date) => string;
+    isDragOverDate: Date | null;
+    selectedDate: Date;
+    displayAllDayScheduleMode: displayAllDayScheduleMode;
+}
+export declare const CalendarProvider: React.FC<CalendarProviderProps>;
+export {};