pds-dev-kit-web-test 2.5.442 → 2.5.444

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

@@ -0,0 +1,222 @@
+"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.MonthlyView = void 0;
+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 TextLabel_1 = require("../TextLabel");
+var ScheduleItem_1 = require("./ScheduleItem");
+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, 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, renderScheduleItem = _a.renderScheduleItem, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var MAX_SCHEDULES_PER_DAY = 3;
+    var days = (function () {
+        var monthDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
+        return dateHelper_1.DateHelper.getCalendarDatesForCalendar(monthDate, startOfWeek);
+    })();
+    // 다중 이벤트 계산
+    var getMultiWeekSchedules = (0, react_1.useMemo)(function () {
+        var multiWeekSchedules = [];
+        var allSchedules = new Map();
+        days.forEach(function (date) {
+            var schedulesForDate = getSchedulesForDate(date);
+            schedulesForDate.forEach(function (schedule) {
+                // 종일 이벤트만 추가
+                if (schedule.isAllDay) {
+                    allSchedules.set(schedule.id, schedule);
+                }
+            });
+        });
+        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);
+            // 여러 날짜에 걸친 이벤트인지 확인
+            if (scheduleStart.getTime() !== scheduleEnd.getTime()) {
+                // 캘린더 그리드에서 시작과 끝 위치 찾기
+                var startIndex = days.findIndex(function (date) {
+                    var d = new Date(date);
+                    d.setHours(0, 0, 0, 0);
+                    return d.getTime() === scheduleStart.getTime();
+                });
+                var endIndex = days.findIndex(function (date) {
+                    var d = new Date(date);
+                    d.setHours(0, 0, 0, 0);
+                    return d.getTime() === scheduleEnd.getTime();
+                });
+                if (startIndex !== -1 && endIndex !== -1) {
+                    var startRow_1 = Math.floor(startIndex / 7) + 2; // 헤더(+1)와 0-based 인덱스(+1) 고려
+                    var endRow = Math.floor(endIndex / 7) + 2;
+                    var startCol = (startIndex % 7) + 1;
+                    var endCol = (endIndex % 7) + 1;
+                    // 이벤트가 겹치지 않도록 행별 인덱스 계산
+                    var existingSchedulesInRow = multiWeekSchedules.filter(function (e) { return e.startRow === startRow_1; }).length;
+                    multiWeekSchedules.push({
+                        schedule: schedule,
+                        startRow: startRow_1,
+                        endRow: endRow,
+                        startCol: startCol,
+                        endCol: endCol,
+                        scheduleIndex: existingSchedulesInRow
+                    });
+                }
+            }
+        });
+        return multiWeekSchedules;
+    }, [days, getSchedulesForDate]);
+    // 시작 요일에 따라 정렬된 요일 헤더 생성
+    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 daySchedules = getSchedulesForDate(date);
+                // 종일 이벤트와 시간 이벤트 분리
+                var allDaySchedules = daySchedules.filter(function (schedule) {
+                    if (!schedule.isAllDay)
+                        return false;
+                    var scheduleStart = new Date(schedule.startDate);
+                    var scheduleEnd = new Date(schedule.endDate);
+                    var checkDate = new Date(date);
+                    // 날짜 비교를 위해 시간을 00:00:00으로 설정
+                    scheduleStart.setHours(0, 0, 0, 0);
+                    scheduleEnd.setHours(0, 0, 0, 0);
+                    checkDate.setHours(0, 0, 0, 0);
+                    // 단일 날짜의 종일 이벤트만 포함
+                    return (scheduleStart.getTime() === scheduleEnd.getTime() &&
+                        scheduleStart.getTime() === checkDate.getTime());
+                });
+                var timeSchedules = daySchedules.filter(function (schedule) { return !schedule.isAllDay; });
+                // 시간 이벤트를 시작 시간순으로 정렬
+                timeSchedules.sort(function (a, b) {
+                    var timeA = new Date(a.startDate).getTime();
+                    var timeB = new Date(b.startDate).getTime();
+                    return timeA - timeB;
+                });
+                var visibleAllDaySchedules = allDaySchedules.slice(0, MAX_SCHEDULES_PER_DAY);
+                var visibleTimeSchedules = timeSchedules.slice(0, MAX_SCHEDULES_PER_DAY);
+                var hiddenSchedulesCount = daySchedules.length - (visibleAllDaySchedules.length + visibleTimeSchedules.length);
+                return ((0, jsx_runtime_1.jsxs)(S_CalendarCell, __assign({ "$isCurrentMonth": date.getMonth() === selectedDate.getMonth(), "$isToday": isToday(date), "$isSelected": 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())), "$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, { children: [visibleAllDaySchedules.map(function (schedule) {
+                                    return 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(); }
+                                    });
+                                }), visibleTimeSchedules.map(function (schedule) {
+                                    return 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(); }
+                                    });
+                                }), daySchedules.length >= 3 && hiddenSchedulesCount > 0 && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: "".concat(hiddenSchedulesCount, " ").concat(t('calendar_more_schedules')), styleTheme: "caption2Regular" }))] })] }), index));
+            }), getMultiWeekSchedules.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; });
+                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, draggable: true, onDragStart: function (e) {
+                            handleScheduleDragStart === null || handleScheduleDragStart === void 0 ? void 0 : handleScheduleDragStart(schedule, e);
+                        }, onDragEnd: handleScheduleDragEnd, 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 })] }), "multi-".concat(schedule.id)));
+                }
+                // 여러 행
+                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, draggable: true, onDragStart: function (e) {
+                            handleScheduleDragStart === null || handleScheduleDragStart === void 0 ? void 0 : handleScheduleDragStart(schedule, e);
+                        }, onDragEnd: handleScheduleDragEnd, 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 })] }), "multi-".concat(schedule.id, "-row-").concat(row)));
+                }
+                return segments;
+            })] })));
+};
+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  cursor: pointer;\n  min-height: 120px;\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  cursor: pointer;\n  min-height: 120px;\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  gap: 2px;\n  overflow: visible;\n  position: relative;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 2px;\n  overflow: visible;\n  position: relative;\n"])));
+var S_MultiWeekSchedule = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 4px;\n  color: white;\n  cursor: pointer;\n  display: flex;\n  font-size: 12px;\n  height: 20px; /* \uACE0\uC815 \uB192\uC774\uB85C \uC124\uC815 */\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: grabbing;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 4px;\n  color: white;\n  cursor: pointer;\n  display: flex;\n  font-size: 12px;\n  height: 20px; /* \uACE0\uC815 \uB192\uC774\uB85C \uC124\uC815 */\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: grabbing;\n  }\n"])), function (props) {
+    return props.$isSelected ? props.theme.ui_cpnt_sheet_base_06 : props.theme.ui_cpnt_sheet_base;
+}, function (props) { return "calc((".concat(props.$startCol - 1, ") * (100% / 7) + 4px)"); }, function (props) {
+    var rowNumber = props.$startRow - 2; // 0-based row (첫번째주=0, 두번째주=1, ...)
+    var dateMargin = 35; // 날짜 숫자 아래 여백
+    var scheduleSpacing = (props.$scheduleIndex || 0) * 24; // 이벤트 간격
+    // 각 주별 시작 위치
+    var weekStartPositions = [
+        44,
+        170,
+        300,
+        428,
+        559 // 5째 주
+    ];
+    var baseTop = weekStartPositions[rowNumber] || weekStartPositions[0];
+    return "calc(".concat(baseTop, "px + ").concat(dateMargin, "px + ").concat(scheduleSpacing, "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;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,16 @@
+import type { Schedule } from './types';
+import type React from 'react';
+interface ScheduleItemProps {
+    schedule: Schedule;
+    extraProps?: any;
+    onDragStart: (schedule: Schedule, e: React.DragEvent) => void;
+    onDragEnd: () => void;
+    onClick?: (schedule: Schedule, e?: React.MouseEvent) => void;
+    isSelected?: boolean;
+    isAllDay?: 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 {};

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

@@ -0,0 +1,49 @@
+"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.S_Dot = exports.ScheduleItem = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+var ScheduleItem = function (_a) {
+    var schedule = _a.schedule, _b = _a.extraProps, extraProps = _b === void 0 ? {} : _b, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, onClick = _a.onClick, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.isAllDay, isAllDay = _d === void 0 ? false : _d;
+    return ((0, jsx_runtime_1.jsxs)(S_ScheduleItem, __assign({ "$color": schedule.color, "$position": "single", "$isSelected": isSelected, "$isAllday": isAllDay, draggable: true, onDragStart: function (e) { return onDragStart(schedule, e); }, onDragEnd: onDragEnd, onClick: function (e) {
+            e.stopPropagation();
+            onClick === null || onClick === void 0 ? void 0 : onClick(schedule, e);
+        } }, extraProps, { children: [(0, jsx_runtime_1.jsx)(exports.S_Dot, { "$isSelected": isSelected }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Regular", text: schedule.title, colorTheme: isSelected ? 'sysTextWhite' : undefined, ellipsisMode: "use" })] }), schedule.id));
+};
+exports.ScheduleItem = ScheduleItem;
+var S_ScheduleItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border: ", ";\n  border-radius: 4px;\n  cursor: grab;\n  display: flex;\n  padding: 2px 6px;\n  position: relative;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n\n  &:active {\n    background: ", ";\n    cursor: grabbing;\n  }\n"], ["\n  align-items: center;\n  background: ", ";\n  border: ", ";\n  border-radius: 4px;\n  cursor: grab;\n  display: flex;\n  padding: 2px 6px;\n  position: relative;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n\n  &:active {\n    background: ", ";\n    cursor: grabbing;\n  }\n"])), function (props) {
+    if (props.$isSelected)
+        return props.theme.ui_cpnt_sheet_base_06;
+    if (props.$isAllday)
+        return props.theme.ui_cpnt_sheet_base;
+    return 'transparent';
+}, function (props) {
+    return props.$isSelected ? "2px solid ".concat(props.theme.ui_cpnt_sheet_base_06) : 'none';
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_sheet_base_06;
+});
+exports.S_Dot = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 50%;\n  height: 4px;\n  margin-right: 4px;\n  width: 4px;\n"], ["\n  background: ", ";\n  border-radius: 50%;\n  height: 4px;\n  margin-right: 4px;\n  width: 4px;\n"])), function (_a) {
+    var $isSelected = _a.$isSelected, theme = _a.theme;
+    return $isSelected ? theme.ui_cpnt_icon_sys_white : theme.ui_cpnt_icon_sys_grey_02;
+});
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { Schedule, displayAllDayScheduleMode } from './types';
+interface WeeklyViewProps {
+    selectedDate: Date;
+    startOfWeek: 'sunday' | 'monday';
+    getDayTextByDate: (date: Date) => string;
+    defaultViewType: string;
+    displayAllDayScheduleMode?: displayAllDayScheduleMode;
+    getSchedulesForDate: (date: Date) => Schedule[];
+    isToday: (date: Date) => boolean;
+    isDragOverDate: Date | null;
+    handleDateDragOver: (date: Date, e: React.DragEvent) => void;
+    handleDateDragLeave: () => void;
+    handleDateDrop: (date: Date, e: React.DragEvent) => void;
+    handleDateClick: (date: Date) => void;
+    renderScheduleItem: (schedule: Schedule, extraProps?: any) => React.ReactNode;
+    handleScheduleDragStart: (schedule: Schedule, e: React.DragEvent) => void;
+    handleScheduleDragEnd: () => void;
+}
+export declare const WeeklyView: React.FC<WeeklyViewProps>;
+export {};

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

@@ -0,0 +1,100 @@
+"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.WeeklyView = void 0;
+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 TextLabel_1 = require("../TextLabel");
+var AllDaySchedulesSection_1 = require("./AllDaySchedulesSection");
+var calendarUtils_1 = require("./calendarUtils");
+var CurrentTimeIndicator_1 = require("./CurrentTimeIndicator");
+var timeFormatUtils_1 = require("./timeFormatUtils");
+var WeeklyView = function (_a) {
+    var selectedDate = _a.selectedDate, startOfWeek = _a.startOfWeek, getDayTextByDate = _a.getDayTextByDate, defaultViewType = _a.defaultViewType, _b = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _b === void 0 ? 'use' : _b, getSchedulesForDate = _a.getSchedulesForDate, isToday = _a.isToday, isDragOverDate = _a.isDragOverDate, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, handleDateClick = _a.handleDateClick, renderScheduleItem = _a.renderScheduleItem, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd;
+    var _c = (0, react_i18next_1.useTranslation)(), t = _c.t, i18n = _c.i18n;
+    // Generate calendar dates for weekly view
+    var calendarDates = (0, react_1.useMemo)(function () {
+        var dates = [];
+        var startIndex = startOfWeek === 'monday' ? 1 : 0;
+        var offset = (selectedDate.getDay() - startIndex + 7) % 7;
+        var weekStart = dateHelper_1.DateHelper.addDays(selectedDate, -offset);
+        for (var i = 0; i < 7; i += 1) {
+            dates.push(dateHelper_1.DateHelper.addDays(weekStart, i));
+        }
+        return dates;
+    }, [selectedDate, startOfWeek]);
+    return ((0, jsx_runtime_1.jsxs)(S_WeeklyContainer, { children: [(0, jsx_runtime_1.jsxs)(S_WeeklyHeader, { children: [(0, jsx_runtime_1.jsx)(S_TimeColumnHeader, {}), calendarDates.map(function (date, index) {
+                        var dayText = getDayTextByDate(date);
+                        var dateText = t('calendar_date_format', {
+                            day: date.getDate(),
+                            dayText: dayText
+                        });
+                        return ((0, jsx_runtime_1.jsx)(S_WeeklyDayHeader, __assign({ "$isToday": isToday(date) }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", colorTheme: isToday(date) ? 'sysTextBrandPrimary' : 'sysTextTertiary', text: dateText }) }), index));
+                    })] }), (0, jsx_runtime_1.jsx)(AllDaySchedulesSection_1.AllDaySchedulesSection, { calendarDates: calendarDates, displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, renderScheduleItem: renderScheduleItem, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop }), (0, jsx_runtime_1.jsxs)(S_TimeGrid, { children: [(0, jsx_runtime_1.jsx)(CurrentTimeIndicator_1.CurrentTimeIndicator, { show: defaultViewType === 'WEEKLY' }), Array.from({ length: 24 }, function (_unused, hour) { return ((0, jsx_runtime_1.jsxs)(S_TimeRow, { children: [(0, jsx_runtime_1.jsx)(S_TimeLabel, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", colorTheme: "sysTextTertiary", text: (0, timeFormatUtils_1.formatTimeWithLocale)(hour, i18n.language, t) }) }), (0, jsx_runtime_1.jsx)(S_TimeSlots, { children: calendarDates.map(function (date, dayIndex) {
+                                    var timeSlotDate = new Date(date);
+                                    timeSlotDate.setHours(hour, 0, 0, 0);
+                                    var timedSchedules = getSchedulesForDate(date).filter(function (e) {
+                                        return !(0, calendarUtils_1.calculateIsAllDay)(new Date(e.startDate), new Date(e.endDate)) &&
+                                            new Date(e.startDate).getHours() === hour;
+                                    });
+                                    return ((0, jsx_runtime_1.jsx)(S_TimeSlot, __assign({ "$isDragOver": (isDragOverDate === null || isDragOverDate === void 0 ? void 0 : isDragOverDate.getTime()) === timeSlotDate.getTime(), onClick: function () {
+                                            var clickedDate = new Date(date);
+                                            clickedDate.setHours(hour, 0, 0, 0);
+                                            handleDateClick(clickedDate);
+                                        }, onDoubleClick: function () {
+                                            var clickedDate = new Date(date);
+                                            clickedDate.setHours(hour, 0, 0, 0);
+                                        }, onDragOver: function (e) { return handleDateDragOver(timeSlotDate, e); }, onDragLeave: handleDateDragLeave, onDrop: function (e) { return handleDateDrop(timeSlotDate, e); } }, { children: timedSchedules.map(function (schedule) {
+                                            return 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(); }
+                                            });
+                                        }) }), dayIndex));
+                                }) })] }, hour)); })] })] }));
+};
+exports.WeeklyView = WeeklyView;
+var S_WeeklyContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
+var S_WeeklyHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 80px repeat(7, 1fr);\n"], ["\n  display: grid;\n  grid-template-columns: 80px repeat(7, 1fr);\n"])));
+var S_TimeColumnHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+var S_WeeklyDayHeader = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 12px 8px;\n  text-align: center;\n"], ["\n  padding: 12px 8px;\n  text-align: center;\n"])));
+var S_TimeGrid = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  overflow-y: auto;\n  position: relative;\n"], ["\n  flex: 1;\n  overflow-y: auto;\n  position: relative;\n"])));
+var S_TimeRow = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 80px repeat(7, 1fr);\n  height: 60px;\n"], ["\n  display: grid;\n  grid-template-columns: 80px repeat(7, 1fr);\n  height: 60px;\n"])));
+var S_TimeLabel = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  display: flex;\n  justify-content: center;\n  padding: 8px;\n"], ["\n  align-items: center;\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  display: flex;\n  justify-content: center;\n  padding: 8px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
+});
+var S_TimeSlots = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
+var S_TimeSlot = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  cursor: pointer;\n  position: relative;\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  cursor: pointer;\n  position: relative;\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) { return (props.$isDragOver ? props.theme.ui_cpnt_sheet_base : '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;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -0,0 +1,11 @@
+import type React from 'react';
+interface YearlyViewProps {
+    selectedDate: Date;
+    getMonthDates: (year: number, month: number) => Date[];
+    getDayTextByDate: (date: Date) => string;
+    startOfWeek: 'sunday' | 'monday';
+    isToday: (date: Date) => boolean;
+    handleDateClick: (date: Date) => void;
+}
+export declare const YearlyView: React.FC<YearlyViewProps>;
+export {};

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

@@ -0,0 +1,71 @@
+"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.YearlyView = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_i18next_1 = require("react-i18next");
+var styled_components_1 = __importDefault(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+var YearlyView = function (_a) {
+    var selectedDate = _a.selectedDate, getMonthDates = _a.getMonthDates, getDayTextByDate = _a.getDayTextByDate, startOfWeek = _a.startOfWeek, isToday = _a.isToday, handleDateClick = _a.handleDateClick;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var currentYear = selectedDate.getFullYear();
+    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;
+    })();
+    var getDateColorTheme = function (isTodayDate) {
+        if (isTodayDate) {
+            return 'sysTextBrandPrimary';
+        }
+        return 'sysTextTertiary';
+    };
+    return ((0, jsx_runtime_1.jsx)(S_YearlyGrid, { children: Array.from({ length: 12 }, function (_unused, monthIndex) {
+            var monthDates = getMonthDates(currentYear, monthIndex);
+            return ((0, jsx_runtime_1.jsxs)(S_YearlyMonth, { children: [(0, jsx_runtime_1.jsx)(S_YearlyMonthHeader, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t("calendar_month_".concat(monthIndex + 1)), styleTheme: "body1Bold", colorTheme: "sysTextBrandPrimary" }) }), (0, jsx_runtime_1.jsxs)(S_YearlyMiniCalendar, { children: [(0, jsx_runtime_1.jsx)(S_YearlyDayHeaders, { children: orderedDayTexts.map(function (day, index) { return ((0, jsx_runtime_1.jsx)(S_YearlyDayHeader, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: day, styleTheme: "caption2Regular", textAlign: "center", colorTheme: "sysTextTertiary" }) }, "".concat(day, "-").concat(index))); }) }), (0, jsx_runtime_1.jsx)(S_YearlyDatesGrid, { children: monthDates.map(function (date, dateIndex) {
+                                    var isCurrentMonth = date.getMonth() === monthIndex;
+                                    var isTodayDate = isToday(date);
+                                    return ((0, jsx_runtime_1.jsx)(S_YearlyDateCell, __assign({ "$isToday": isTodayDate, "$isCurrentMonth": isCurrentMonth, onClick: function () { return handleDateClick(date); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: date.getDate().toString(), styleTheme: "caption2Regular", textAlign: "center", colorTheme: getDateColorTheme(isTodayDate) }) }), dateIndex));
+                                }) })] })] }, monthIndex));
+        }) }));
+};
+exports.YearlyView = YearlyView;
+// Styled Components
+var S_YearlyGrid = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  gap: 24px 32px;\n  grid-template-columns: repeat(4, 1fr);\n  margin: 0 auto;\n  max-width: 1200px;\n  padding: 24px;\n"], ["\n  display: grid;\n  gap: 24px 32px;\n  grid-template-columns: repeat(4, 1fr);\n  margin: 0 auto;\n  max-width: 1200px;\n  padding: 24px;\n"])));
+var S_YearlyMonth = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-width: 240px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-width: 240px;\n"])));
+var S_YearlyMonthHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-left: 4px;\n"], ["\n  padding-left: 4px;\n"])));
+var S_YearlyMiniCalendar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
+var S_YearlyDayHeaders = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: grid;\n  gap: 1px;\n  grid-template-columns: repeat(7, 1fr);\n"], ["\n  display: grid;\n  gap: 1px;\n  grid-template-columns: repeat(7, 1fr);\n"])));
+var S_YearlyDayHeader = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  min-height: 20px;\n  padding: 4px 2px;\n  text-align: center;\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  min-height: 20px;\n  padding: 4px 2px;\n  text-align: center;\n"])));
+var S_YearlyDatesGrid = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: grid;\n  gap: 1px;\n  grid-template-columns: repeat(7, 1fr);\n"], ["\n  display: grid;\n  gap: 1px;\n  grid-template-columns: repeat(7, 1fr);\n"])));
+var S_YearlyDateCell = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  min-height: 24px;\n  opacity: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  min-height: 24px;\n  opacity: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) { return (props.$isCurrentMonth ? 1 : 0.3); }, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_72;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -0,0 +1,24 @@
+import type { CalendarViewType } from './types';
+import type { TFunction } from 'i18next';
+/**
+ * 일정이 종일 일정인지 확인하는 함수
+ * @param startDate 시작 날짜
+ * @param endDate 종료 날짜
+ * @returns 종일 일정 여부
+ */
+export declare const calculateIsAllDay: (startDate: Date, endDate: Date) => boolean;
+export declare const calculateDateRange: (viewType: CalendarViewType, baseDate: Date) => {
+    startDate: Date;
+    endDate: Date;
+};
+/**
+ * 뷰 타입에 따른 헤더 텍스트를 반환하는 함수
+ * @param viewType 캘린더 뷰 타입 (DAILY, WEEKLY, MONTHLY, YEARLY)
+ * @param selectedDate 선택된 날짜
+ * @param t 다국어 변환 함수 (i18next)
+ * @param monthNames 월 이름 배열 (예: ['1월', '2월', ...])
+ * @param getDayTextByDate 날짜에 따른 요일 텍스트 반환 함수
+ * @returns 헤더에 표시할 텍스트
+ */
+export declare const getHeaderText: (viewType: CalendarViewType, selectedDate: Date, t: TFunction, monthNames: string[], getDayTextByDate: (date: Date) => string) => string;
+export declare const toUTC: (date: Date | null | undefined) => string | null;