pds-dev-kit-web-test 2.5.519 → 2.5.520

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

@@ -0,0 +1,56 @@
+"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, _e = _a.isDraggable, isDraggable = _e === void 0 ? false : _e;
+    return ((0, jsx_runtime_1.jsxs)(S_ScheduleItem, __assign({ "$color": schedule.color, "$position": "single", "$isSelected": isSelected, "$isAllday": isAllDay, "$isDraggable": isDraggable, draggable: isDraggable, onDragStart: isDraggable ? function (e) { return onDragStart(schedule, e); } : undefined, onDragEnd: isDraggable ? onDragEnd : undefined, 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)(S_TextContainer, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: schedule.title, colorTheme: isSelected ? 'sysTextWhite' : undefined, ellipsisMode: "use", singleLineMode: "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: ", ";\n  display: flex;\n  flex-shrink: 1;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  padding: 2px 6px;\n  position: relative;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n\n  &:active {\n    background: ", ";\n    cursor: ", ";\n  }\n"], ["\n  align-items: center;\n  background: ", ";\n  border: ", ";\n  border-radius: 4px;\n  cursor: ", ";\n  display: flex;\n  flex-shrink: 1;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  padding: 2px 6px;\n  position: relative;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n\n  &:active {\n    background: ", ";\n    cursor: ", ";\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) : '2px solid transparent';
+}, function (_a) {
+    var $isDraggable = _a.$isDraggable;
+    return ($isDraggable ? 'grab' : 'default');
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_sheet_base_06;
+}, function (_a) {
+    var $isDraggable = _a.$isDraggable;
+    return ($isDraggable ? 'grabbing' : 'default');
+});
+var S_TextContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  max-width: 85%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* TextLabel \uB0B4\uBD80 \uC694\uC18C\uC5D0\uB3C4 \uD55C \uC904 \uC81C\uD55C \uC801\uC6A9 */\n  * {\n    line-height: 1 !important;\n    max-height: 1em !important;\n    overflow: hidden !important;\n    text-overflow: ellipsis !important;\n    white-space: nowrap !important;\n  }\n"], ["\n  flex: 1;\n  max-width: 85%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* TextLabel \uB0B4\uBD80 \uC694\uC18C\uC5D0\uB3C4 \uD55C \uC904 \uC81C\uD55C \uC801\uC6A9 */\n  * {\n    line-height: 1 !important;\n    max-height: 1em !important;\n    overflow: hidden !important;\n    text-overflow: ellipsis !important;\n    white-space: nowrap !important;\n  }\n"])));
+exports.S_Dot = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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, templateObject_3;

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

@@ -0,0 +1,12 @@
+import type { Schedule } from './types';
+import type React from 'react';
+interface TimeBasedScheduleItemProps {
+    schedules: Schedule[];
+    selectedSchedules: Schedule[];
+    isDraggable?: boolean;
+    onClick?: (schedule: Schedule, e?: React.MouseEvent) => void;
+    handleScheduleDragStart: (schedule: Schedule, e: React.DragEvent) => void;
+    handleScheduleDragEnd: () => void;
+}
+export declare const TimeBasedScheduleItem: React.FC<TimeBasedScheduleItemProps>;
+export {};

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

@@ -0,0 +1,184 @@
+"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.TimeBasedScheduleItem = 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 calendarUtils_1 = require("./calendarUtils");
+var timeFormatUtils_1 = require("./timeFormatUtils");
+var TimeBasedScheduleItem = function (_a) {
+    var schedules = _a.schedules, selectedSchedules = _a.selectedSchedules, _b = _a.isDraggable, isDraggable = _b === void 0 ? false : _b, onClick = _a.onClick, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd;
+    var _c = (0, react_i18next_1.useTranslation)(), i18n = _c.i18n, t = _c.t;
+    // 시간별 스케줄 계산 및 grid 위치 할당
+    var timedSchedulesWithGrid = (0, react_1.useMemo)(function () {
+        var filteredSchedules = schedules.filter(function (schedule) { return !(0, calendarUtils_1.calculateIsAllDay)(new Date(schedule.startDate), new Date(schedule.endDate)); });
+        // 시간 순으로 정렬 (시작 시간 기준, 시작시간이 같으면 duration이 짧은 순)
+        var sortedSchedules = __spreadArray([], filteredSchedules, true).sort(function (a, b) {
+            var startTimeA = new Date(a.startDate).getTime();
+            var startTimeB = new Date(b.startDate).getTime();
+            // 시작시간이 다르면 시작시간 기준으로 정렬
+            if (startTimeA !== startTimeB) {
+                return startTimeA - startTimeB;
+            }
+            // 시작시간이 같으면 duration이 짧은 순으로 정렬
+            var durationA = new Date(a.endDate).getTime() - startTimeA;
+            var durationB = new Date(b.endDate).getTime() - startTimeB;
+            return durationA - durationB;
+        });
+        var parent = new Map();
+        var find = function (x) {
+            var currentParent = parent.get(x);
+            if (currentParent !== undefined && currentParent !== x) {
+                var root = find(currentParent);
+                parent.set(x, root);
+                return root;
+            }
+            return x;
+        };
+        var union = function (x, y) {
+            var rootX = find(x);
+            var rootY = find(y);
+            if (rootX !== rootY) {
+                parent.set(rootX, rootY);
+            }
+        };
+        // 초기화: 각 스케줄을 자기 자신의 parent로 설정
+        sortedSchedules.forEach(function (schedule) {
+            parent.set(schedule.id, schedule.id);
+        });
+        // 겹치는 스케줄들을 연결
+        for (var i = 0; i < sortedSchedules.length; i += 1) {
+            for (var j = i + 1; j < sortedSchedules.length; j += 1) {
+                var schedule1 = sortedSchedules[i];
+                var schedule2 = sortedSchedules[j];
+                var start1 = new Date(schedule1.startDate).getTime();
+                var end1 = new Date(schedule1.endDate).getTime();
+                var start2 = new Date(schedule2.startDate).getTime();
+                var end2 = new Date(schedule2.endDate).getTime();
+                // 시간 겹침 확인: (start1 < end2) && (start2 < end1)
+                if (start1 < end2 && start2 < end1) {
+                    union(schedule1.id, schedule2.id);
+                }
+            }
+        }
+        // 같은 그룹에 속하는 스케줄들끼리 묶기
+        var groups = new Map();
+        sortedSchedules.forEach(function (schedule) {
+            var root = find(schedule.id);
+            if (!groups.has(root)) {
+                groups.set(root, []);
+            }
+            var group = groups.get(root);
+            if (group) {
+                group.push(schedule);
+            }
+        });
+        // 각 그룹 내에서 grid 위치 할당
+        var schedulesWithGrid = [];
+        groups.forEach(function (group) {
+            // 그룹 내에서 정렬
+            var sortedGroup = group.sort(function (a, b) {
+                var startTimeA = new Date(a.startDate).getTime();
+                var startTimeB = new Date(b.startDate).getTime();
+                if (startTimeA !== startTimeB) {
+                    return startTimeA - startTimeB;
+                }
+                var durationA = new Date(a.endDate).getTime() - startTimeA;
+                var durationB = new Date(b.endDate).getTime() - startTimeB;
+                return durationA - durationB;
+            });
+            var totalColumns = sortedGroup.length;
+            sortedGroup.forEach(function (schedule, index) {
+                schedulesWithGrid.push(__assign(__assign({}, schedule), { gridColumn: index, totalColumns: totalColumns }));
+            });
+        });
+        return schedulesWithGrid;
+    }, [schedules]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: timedSchedulesWithGrid.map(function (schedule) {
+            var isSelected = selectedSchedules.some(function (s) { return s.id === (schedule === null || schedule === void 0 ? void 0 : schedule.id); });
+            var startDate = new Date(schedule.startDate);
+            var endDate = new Date(schedule.endDate);
+            // 시간을 UTC에서 로컬 시간으로 변환
+            var localStartHour = startDate.getHours();
+            var localEndHour = endDate.getHours();
+            var localStartMinutes = startDate.getMinutes();
+            var localEndMinutes = endDate.getMinutes();
+            // 시작 시간과 끝 시간 계산 (분 단위)
+            var startMinutes = localStartHour * 60 + localStartMinutes;
+            var endMinutes = localEndHour * 60 + localEndMinutes;
+            var duration = Math.max(endMinutes - startMinutes, 30); // 최소 30분
+            // 픽셀 단위로 변환 (각 시간은 60px)
+            var top = (startMinutes / 60) * 60;
+            var height = (duration / 60) * 60;
+            return ((0, jsx_runtime_1.jsx)(S_ScheduleItem, __assign({ "$top": top, "$height": height, "$gridColumn": schedule.gridColumn, "$totalColumns": schedule.totalColumns, "$isSelected": isSelected, "$isDraggable": isDraggable, draggable: isDraggable, onClick: function (e) {
+                    e.stopPropagation();
+                    onClick === null || onClick === void 0 ? void 0 : onClick(schedule, e);
+                }, 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(); } }, { children: (0, jsx_runtime_1.jsxs)(S_ScheduleContent, { children: [(0, jsx_runtime_1.jsx)(S_ScheduleTime, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Regular", text: "".concat((0, timeFormatUtils_1.formatTimeWithLocale)(localStartHour, i18n.language, t)), ellipsisMode: "use", singleLineMode: "use", colorTheme: isSelected ? 'sysTextWhite' : undefined }) }), (0, jsx_runtime_1.jsx)(S_ScheduleTitle, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: schedule.title, ellipsisMode: "use", singleLineMode: "use", colorTheme: isSelected ? 'sysTextWhite' : undefined }) })] }) }), schedule.id));
+        }) }));
+};
+exports.TimeBasedScheduleItem = TimeBasedScheduleItem;
+var S_ScheduleItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  border: 1px solid ", ";\n  border-left: 2px solid ", ";\n  border-radius: 4px;\n  cursor: ", ";\n  height: ", "px;\n  left: ", ";\n  overflow: hidden;\n  position: absolute;\n  top: ", "px;\n  width: ", ";\n  z-index: 2;\n\n  &:active {\n    background: ", ";\n    cursor: ", ";\n  }\n"], ["\n  background: ", ";\n  border: 1px solid ", ";\n  border-left: 2px solid ", ";\n  border-radius: 4px;\n  cursor: ", ";\n  height: ", "px;\n  left: ", ";\n  overflow: hidden;\n  position: absolute;\n  top: ", "px;\n  width: ", ";\n  z-index: 2;\n\n  &:active {\n    background: ", ";\n    cursor: ", ";\n  }\n"])), function (props) {
+    if (props.$isSelected)
+        return props.theme.ui_cpnt_sheet_base_06;
+    return props.theme.ui_cpnt_sheet_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_temp_white;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_temp_grey_02;
+}, function (_a) {
+    var $isDraggable = _a.$isDraggable;
+    return ($isDraggable ? 'grab' : 'default');
+}, function (_a) {
+    var $height = _a.$height;
+    return $height - 2;
+}, function (_a) {
+    var $gridColumn = _a.$gridColumn, $totalColumns = _a.$totalColumns;
+    return "calc(".concat($gridColumn, " * (100% / ").concat($totalColumns, "))");
+}, function (_a) {
+    var $top = _a.$top;
+    return $top;
+}, function (_a) {
+    var $totalColumns = _a.$totalColumns;
+    return "calc(100% / ".concat($totalColumns, ")");
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_sheet_base_06;
+}, function (_a) {
+    var $isDraggable = _a.$isDraggable;
+    return ($isDraggable ? 'grabbing' : 'default');
+});
+var S_ScheduleContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 4px 6px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 4px 6px;\n"])));
+var S_ScheduleTitle = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-bottom: 2px;\n"], ["\n  margin-bottom: 2px;\n"])));
+var S_ScheduleTime = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-top: auto;\n"], ["\n  margin-top: auto;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { Schedule, displayAllDayScheduleMode } from './types';
+interface WeeklyViewProps {
+    selectedDate: Date;
+    selectedSchedules: Schedule[];
+    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;
+    isDraggable: boolean;
+    handleScheduleClick: (schedule: Schedule, e?: React.MouseEvent) => void;
+}
+export declare const WeeklyView: React.FC<WeeklyViewProps>;
+export {};

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

@@ -0,0 +1,118 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 = __importStar(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+var AllDaySchedulesSection_1 = require("./AllDaySchedulesSection");
+var CurrentTimeIndicator_1 = require("./CurrentTimeIndicator");
+var TimeBasedScheduleItem_1 = require("./TimeBasedScheduleItem");
+var timeFormatUtils_1 = require("./timeFormatUtils");
+var WeeklyView = function (_a) {
+    var selectedDate = _a.selectedDate, selectedSchedules = _a.selectedSchedules, startOfWeek = _a.startOfWeek, getDayTextByDate = _a.getDayTextByDate, defaultViewType = _a.defaultViewType, _b = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _b === void 0 ? 'none' : _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, isDraggable = _a.isDraggable, handleScheduleClick = _a.handleScheduleClick;
+    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('str_calendar_weekly_date', {
+                            month: date.getMonth() + 1,
+                            date: date.getDate(),
+                            day: dayText
+                        });
+                        return ((0, jsx_runtime_1.jsx)(S_WeeklyDayHeader, __assign({ "$isToday": isToday(date) }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { textAlign: "center", 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, __assign({ "$displayAllDayScheduleMode": displayAllDayScheduleMode }, { 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);
+                                    return ((0, jsx_runtime_1.jsx)(S_TimeSlot, __assign({ "$isDragOver": (isDragOverDate === null || isDragOverDate === void 0 ? void 0 : isDragOverDate.getTime()) === timeSlotDate.getTime(), "$isDraggable": isDraggable, 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: hour === 0 && ((0, jsx_runtime_1.jsx)(TimeBasedScheduleItem_1.TimeBasedScheduleItem, { schedules: getSchedulesForDate(date), selectedSchedules: selectedSchedules, isDraggable: isDraggable, onClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: 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_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n  overflow-y: auto;\n  position: relative;\n  ", "\n"], ["\n  flex: 1;\n  overflow-y: auto;\n  position: relative;\n  ", "\n"])), function (_a) {
+    var $displayAllDayScheduleMode = _a.$displayAllDayScheduleMode;
+    return $displayAllDayScheduleMode === 'none' && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      border-top: 1px solid ", ";\n    "], ["\n      border-top: 1px solid ", ";\n    "])), function (_a) {
+        var theme = _a.theme;
+        return theme.ui_cpnt_divider;
+    });
+});
+var S_TimeRow = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __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_8 || (templateObject_8 = __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_9 || (templateObject_9 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
+var S_TimeSlot = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  cursor: default;\n  min-width: 0;\n  overflow: visible;\n  position: relative;\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  cursor: default;\n  min-width: 0;\n  overflow: visible;\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, templateObject_10;

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

@@ -0,0 +1,12 @@
+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;
+    getSchedulesForDate: (date: Date) => any[];
+}
+export declare const YearlyView: React.FC<YearlyViewProps>;
+export {};

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

@@ -0,0 +1,76 @@
+"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, getSchedulesForDate = _a.getSchedulesForDate;
+    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);
+                                    var hasSchedule = getSchedulesForDate(date).length > 0;
+                                    return ((0, jsx_runtime_1.jsxs)(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) }), hasSchedule && (0, jsx_runtime_1.jsx)(S_Dot, {})] }), 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  flex-direction: column;\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  flex-direction: column;\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 S_Dot = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 50%;\n  height: 5px;\n  margin: 2px auto 0 auto;\n  width: 5px;\n"], ["\n  background: ", ";\n  border-radius: 50%;\n  height: 5px;\n  margin: 2px auto 0 auto;\n  width: 5px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_icon_sys_grey_02;
+});
+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/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) => string;
+export declare const toUTC: (date: Date | null | undefined) => string | null;

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

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toUTC = exports.getHeaderText = exports.calculateDateRange = exports.calculateIsAllDay = void 0;
+var dateHelper_1 = require("../../../common/utils/dateHelper");
+/**
+ * 일정이 종일 일정인지 확인하는 함수
+ * @param startDate 시작 날짜
+ * @param endDate 종료 날짜
+ * @returns 종일 일정 여부
+ */
+var calculateIsAllDay = function (startDate, endDate) {
+    // 시작 시간이 00:00:00(UTC)이고 종료 시간이 23:59:59(UTC)인 경우를 체크
+    var isStartAtMidnight = startDate.getUTCHours() === 0 &&
+        startDate.getUTCMinutes() === 0 &&
+        startDate.getUTCSeconds() === 0;
+    var isEndAtEndOfDay = endDate.getUTCHours() === 23 &&
+        endDate.getUTCMinutes() === 59 &&
+        endDate.getUTCSeconds() === 59;
+    // 시작 시간이 00:00:00(UTC)이고 종료 시간이 23:59:59(UTC)인 경우를 전체일로 간주
+    return isStartAtMidnight && isEndAtEndOfDay;
+};
+exports.calculateIsAllDay = calculateIsAllDay;
+var calculateDateRange = function (viewType, baseDate) {
+    switch (viewType) {
+        case 'DAILY':
+            return { startDate: baseDate, endDate: baseDate };
+        case 'WEEKLY': {
+            var start = new Date(baseDate);
+            start.setDate(baseDate.getDate() - baseDate.getDay());
+            var end = new Date(start);
+            end.setDate(start.getDate() + 6);
+            return { startDate: start, endDate: end };
+        }
+        case 'MONTHLY': {
+            var startDate = new Date(baseDate.getFullYear(), baseDate.getMonth(), 1);
+            // 실제 MonthlyView에서 보여지는 날짜 배열을 구함
+            var days = dateHelper_1.DateHelper.getCalendarDatesForCalendar(startDate, 'sunday');
+            return {
+                startDate: days[0],
+                endDate: days[days.length - 1]
+            };
+        }
+        case 'YEARLY':
+            return {
+                startDate: new Date(baseDate.getFullYear(), 0, 1),
+                endDate: new Date(baseDate.getFullYear(), 11, 31)
+            };
+        default:
+            return { startDate: baseDate, endDate: baseDate };
+    }
+};
+exports.calculateDateRange = calculateDateRange;
+/**
+ * 뷰 타입에 따른 헤더 텍스트를 반환하는 함수
+ * @param viewType 캘린더 뷰 타입 (DAILY, WEEKLY, MONTHLY, YEARLY)
+ * @param selectedDate 선택된 날짜
+ * @param t 다국어 변환 함수 (i18next)
+ * @param monthNames 월 이름 배열 (예: ['1월', '2월', ...])
+ * @param getDayTextByDate 날짜에 따른 요일 텍스트 반환 함수
+ * @returns 헤더에 표시할 텍스트
+ */
+var getHeaderText = function (viewType, selectedDate, t) {
+    var year = selectedDate.getFullYear();
+    var monthNumber = selectedDate.getMonth() + 1;
+    var day = selectedDate.getDate();
+    if (viewType === 'DAILY') {
+        return t('str_calendar_daily_header', { year: year, month: monthNumber, day: day });
+    }
+    if (viewType === 'WEEKLY') {
+        return t('str_calendar_weekly_header', { year: year, month: monthNumber });
+    }
+    if (viewType === 'MONTHLY') {
+        return t('str_calendar_monthly_header', { year: year, month: monthNumber });
+    }
+    if (viewType === 'YEARLY') {
+        return t('str_calendar_yearly_header', { year: year });
+    }
+    return '';
+};
+exports.getHeaderText = getHeaderText;
+// Date를 UTC 시간으로 변환
+var toUTC = function (date) {
+    if (!(date instanceof Date))
+        return null;
+    return date.toISOString();
+};
+exports.toUTC = toUTC;

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

@@ -0,0 +1 @@
+export declare const getLocaleFromLang: (lang: string) => string;