pds-dev-kit-web 2.2.205 → 2.2.207

package/dist/src/common/hooks/useParentResizeObserver.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useParentResizeObserver<T extends HTMLElement>(ref: React.RefObject<T>, callback: () => void, delay?: number): void;

package/dist/src/common/hooks/useParentResizeObserver.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useParentResizeObserver = void 0;
+var react_1 = require("react");
+var useResizeObserver_1 = require("./useResizeObserver");
+function useParentResizeObserver(ref, callback, delay) {
+    if (delay === void 0) { delay = 100; }
+    (0, react_1.useLayoutEffect)(function () {
+        var _a;
+        var parent = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!parent)
+            return;
+        var debouncedCallback = (0, useResizeObserver_1.debounce)(callback, delay);
+        var resizeObserver = new ResizeObserver(debouncedCallback);
+        resizeObserver.observe(parent);
+        callback();
+        return function () { return resizeObserver.disconnect(); };
+    }, [ref, callback]);
+}
+exports.useParentResizeObserver = useParentResizeObserver;

package/dist/src/common/hooks/useResizeObserver.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const debounce: (fn: () => void, delay: number) => () => void;
+export declare function useResizeObserver<T extends HTMLElement>(ref: React.RefObject<T>, callback: () => void, delay?: number): void;

package/dist/src/common/hooks/useResizeObserver.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResizeObserver = exports.debounce = void 0;
+var react_1 = require("react");
+var debounce = function (fn, delay) {
+    var timer = null;
+    return function () {
+        if (timer)
+            clearTimeout(timer);
+        timer = setTimeout(fn, delay);
+    };
+};
+exports.debounce = debounce;
+function useResizeObserver(ref, callback, delay) {
+    if (delay === void 0) { delay = 100; }
+    (0, react_1.useLayoutEffect)(function () {
+        var target = ref.current;
+        if (!target)
+            return;
+        var debouncedCallback = (0, exports.debounce)(callback, delay);
+        var resizeObserver = new ResizeObserver(debouncedCallback);
+        resizeObserver.observe(target);
+        callback();
+        return function () { return resizeObserver.disconnect(); };
+    }, [ref, callback, delay]);
+}
+exports.useResizeObserver = useResizeObserver;

package/dist/src/common/hooks/useWindowSize.d.ts

@@ -0,0 +1,4 @@
+export declare function useWindowSize(): {
+    width: number;
+    height: number;
+};

package/dist/src/common/hooks/useWindowSize.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWindowSize = void 0;
+var react_1 = require("react");
+function useWindowSize() {
+    var _a = (0, react_1.useState)({
+        width: window.innerWidth,
+        height: window.innerHeight
+    }), size = _a[0], setSize = _a[1];
+    (0, react_1.useEffect)(function () {
+        var handleResize = function () {
+            setSize({
+                width: window.innerWidth,
+                height: window.innerHeight
+            });
+        };
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    return size;
+}
+exports.useWindowSize = useWindowSize;

package/dist/src/common/services/i18n/resources/en.json

@@ -51,6 +51,8 @@
         "calendar_month_12": "Dec",
         "str_fm_datetime_am": "{{hour}} AM",
         "str_fm_datetime_pm": "{{hour}} PM",
+        "str_fm_am": "AM",
+        "str_fm_pm": "PM",
         "calendar_duration_hour": " hour",
         "calendar_duration_hours": " hours",
         "str_fm_datetime_noon": "Noon",

package/dist/src/common/services/i18n/resources/es.json

@@ -51,6 +51,8 @@
         "calendar_month_12": "Dic",
         "str_fm_datetime_am": "{{hour}} AM",
         "str_fm_datetime_pm": "{{hour}} PM",
+        "str_fm_am": "AM",
+        "str_fm_pm": "PM",
         "calendar_duration_hour": " hora",
         "calendar_duration_hours": " horas",
         "str_fm_datetime_noon": "Mediodía",

package/dist/src/common/services/i18n/resources/fil.json

@@ -51,6 +51,8 @@
         "calendar_month_12": "Dis",
         "str_fm_datetime_am": "{{hour}} NU",
         "str_fm_datetime_pm": "{{hour}} NH",
+        "str_fm_am": "NU",
+        "str_fm_pm": "NH",
         "calendar_duration_hour": " oras",
         "calendar_duration_hours": " oras",
         "str_fm_datetime_noon": "Tanghali",

package/dist/src/common/services/i18n/resources/index.d.ts

@@ -52,6 +52,9 @@ declare const locale: {
             calendar_month_12: string;
             str_fm_datetime_am: string;
             str_fm_datetime_pm: string;
+            str_fm_am: string;
+            str_fm_pm: string;
+            str_fm_datetime_pm_only: string;
             calendar_duration_hour: string;
             calendar_duration_hours: string;
             str_fm_datetime_noon: string;
@@ -148,6 +151,8 @@ declare const locale: {
             calendar_month_12: string;
             str_fm_datetime_am: string;
             str_fm_datetime_pm: string;
+            str_fm_am: string;
+            str_fm_pm: string;
             calendar_duration_hour: string;
             calendar_duration_hours: string;
             str_fm_datetime_noon: string;
@@ -244,6 +249,8 @@ declare const locale: {
             calendar_month_12: string;
             str_fm_datetime_am: string;
             str_fm_datetime_pm: string;
+            str_fm_am: string;
+            str_fm_pm: string;
             calendar_duration_hour: string;
             calendar_duration_hours: string;
             str_fm_datetime_noon: string;
@@ -340,6 +347,8 @@ declare const locale: {
             calendar_month_12: string;
             str_fm_datetime_am: string;
             str_fm_datetime_pm: string;
+            str_fm_am: string;
+            str_fm_pm: string;
             calendar_duration_hour: string;
             calendar_duration_hours: string;
             str_fm_datetime_noon: string;
@@ -436,6 +445,8 @@ declare const locale: {
             calendar_month_12: string;
             str_fm_datetime_am: string;
             str_fm_datetime_pm: string;
+            str_fm_am: string;
+            str_fm_pm: string;
             calendar_duration_hour: string;
             calendar_duration_hours: string;
             str_fm_datetime_noon: string;
@@ -532,6 +543,8 @@ declare const locale: {
             calendar_month_12: string;
             str_fm_datetime_am: string;
             str_fm_datetime_pm: string;
+            str_fm_am: string;
+            str_fm_pm: string;
             calendar_duration_hour: string;
             calendar_duration_hours: string;
             str_fm_datetime_noon: string;
@@ -628,6 +641,8 @@ declare const locale: {
             calendar_month_12: string;
             str_fm_datetime_am: string;
             str_fm_datetime_pm: string;
+            str_fm_am: string;
+            str_fm_pm: string;
             calendar_duration_hour: string;
             calendar_duration_hours: string;
             str_fm_datetime_noon: string;

package/dist/src/common/services/i18n/resources/ja.json

@@ -51,6 +51,8 @@
         "calendar_month_12": "12月",
         "str_fm_datetime_am": "午前{{hour}}時",
         "str_fm_datetime_pm": "午後{{hour}}時",
+        "str_fm_am": "午前",
+        "str_fm_pm": "午後",
         "calendar_duration_hour": "時間",
         "calendar_duration_hours": "時間",
         "str_fm_datetime_noon": "昼",

package/dist/src/common/services/i18n/resources/ko.json

@@ -51,6 +51,9 @@
         "calendar_month_12": "12월",
         "str_fm_datetime_am": "오전 {{hour}}시",
         "str_fm_datetime_pm": "오후 {{hour}}시",
+        "str_fm_am": "오전",
+        "str_fm_pm": "오후",
+        "str_fm_datetime_pm_only": "오후",
         "calendar_duration_hour": "시간",
         "calendar_duration_hours": "시간",
         "str_fm_datetime_noon": "정오",

package/dist/src/common/services/i18n/resources/zh-cn.json

@@ -51,6 +51,8 @@
         "calendar_month_12": "12月",
         "str_fm_datetime_am": "上午{{hour}}时",
         "str_fm_datetime_pm": "下午{{hour}}时",
+        "str_fm_am": "上午",
+        "str_fm_pm": "下午",
         "calendar_duration_hour": "小时",
         "calendar_duration_hours": "小时",
         "str_fm_datetime_noon": "中午",

package/dist/src/common/services/i18n/resources/zh-tw.json

@@ -51,6 +51,8 @@
         "calendar_month_12": "12月",
         "str_fm_datetime_am": "上午{{hour}}時",
         "str_fm_datetime_pm": "下午{{hour}}時",
+        "str_fm_am": "上午",
+        "str_fm_pm": "下午",
         "calendar_duration_hour": "小時",
         "calendar_duration_hours": "小時",
         "str_fm_datetime_noon": "中午",

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

@@ -91,7 +91,7 @@ function BoxItem(_a) {
                 justifyContent: 'space-between',
                 maxWidth: '100%',
                 cursor: state === 'disabled' ? 'default' : selectionMode === 'use' ? 'pointer' : 'default'
-            } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { selected: selectState === 'selected', isIndeterminate: checkboxMode === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: titleText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : titleTextColorKey, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, ellipsisMode: "use", wordBreak: titleTextWordBreak })), descText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: descText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular", wordBreak: descTextWordBreak }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
+            } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { selected: selectState === 'selected', isIndeterminate: checkboxMode === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: titleText, colorOverride: state === 'disabled' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, ellipsisMode: "use", wordBreak: titleTextWordBreak })), descText && ((0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: descText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, ellipsisMode: "use", styleTheme: "caption1Regular", wordBreak: descTextWordBreak }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
                             (chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, iconSize: 20, state: state, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state, onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, state: state, onClick: handleIBtn1Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, state: state, onClick: handleIBtn2Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.D_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, state: state, onClick: handleIBtn3Click, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
 }
 var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n  width: 100%;\n"])), function (_a) {

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

@@ -388,11 +388,11 @@ var Calendar = function (_a) {
         // 유틸리티 함수
         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: (0, calendarUtils_1.getHeaderText)(currentViewType, selectedDate, t) }), (0, jsx_runtime_1.jsxs)(S_LeftContainer, { children: [(0, jsx_runtime_1.jsx)(S_NavigationButton, __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_NavigationButton, __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() })] })) })));
+        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: (0, calendarUtils_1.getHeaderText)(currentViewType, selectedDate, t) }), (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_NavigationButton = styled_components_1.default.button(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_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;

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

@@ -31,6 +31,8 @@ exports.MonthlyView = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
+var useResizeObserver_1 = require("../../../common/hooks/useResizeObserver");
+var useWindowSize_1 = require("../../../common/hooks/useWindowSize");
 var dateHelper_1 = require("../../../common/utils/dateHelper");
 var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importDefault(require("styled-components"));
@@ -42,6 +44,7 @@ var MonthlyView = function (_a) {
     var getDayTextByDate = _a.getDayTextByDate, startOfWeek = _a.startOfWeek, selectedDate = _a.selectedDate, selectedDates = _a.selectedDates, selectedSchedules = _a.selectedSchedules, dragStartDate = _a.dragStartDate, dragEndDate = _a.dragEndDate, isDragOverDate = _a.isDragOverDate, schedules = _a.schedules, getSchedulesForDate = _a.getSchedulesForDate, isToday = _a.isToday, isPastDate = _a.isPastDate, handleDateClick = _a.handleDateClick, handleScheduleClick = _a.handleScheduleClick, handleMouseUp = _a.handleMouseUp, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd, _b = _a.isDraggable, isDraggable = _b === void 0 ? false : _b, onSwitchToWeeklyView = _a.onSwitchToWeeklyView;
     var t = (0, react_i18next_1.useTranslation)().t;
     var renderScheduleItem = (0, CalendarContext_1.useCalendarContext)().renderScheduleItem;
+    var height = (0, useWindowSize_1.useWindowSize)().height;
     var calendarCellRef = (0, react_1.useRef)(null);
     var _c = (0, react_1.useState)(3), maxSchedulesPerDay = _c[0], setMaxSchedulesPerDay = _c[1];
     var scheduleItemHeight = 22; // 스케줄 아이템 대략 높이
@@ -55,48 +58,31 @@ var MonthlyView = function (_a) {
             return;
         var cellHeight = calendarCellRef.current.clientHeight;
         var dateLabelHeight = 20; // 날짜 텍스트 영역
-        var cellPadding = 8; // 상하 패딩 (4px * 2)
-        var moreTextHeight = scheduleItemHeight; // "더보기" 텍스트 높이
-        var availableHeight = cellHeight - dateLabelHeight - cellPadding;
-        var maxSchedulesWithMore = Math.floor((availableHeight - moreTextHeight) / scheduleItemHeight);
+        var moreTextHeight = scheduleItemHeight;
+        var availableHeight = cellHeight - dateLabelHeight - moreTextHeight;
+        var maxSchedulesWithMore = Math.floor(availableHeight / scheduleItemHeight);
         // 최소 1개는 보여주되, 더보기를 고려한 개수로 설정
         var calculatedMax = Math.max(1, maxSchedulesWithMore);
         setMaxSchedulesPerDay(calculatedMax);
     }, [scheduleItemHeight]);
     // ResizeObserver로 크기 변경 감지
-    (0, react_1.useLayoutEffect)(function () {
-        if (!calendarCellRef.current)
-            return;
-        var resizeObserver = new ResizeObserver(function () {
-            calculateMaxSchedules();
-        });
-        resizeObserver.observe(calendarCellRef.current);
-        // 초기 계산
-        calculateMaxSchedules();
-        return function () {
-            resizeObserver.disconnect();
-        };
-    }, [calculateMaxSchedules]);
+    (0, useResizeObserver_1.useResizeObserver)(calendarCellRef, calculateMaxSchedules, 100);
     // 창 크기 변경 시에도 재계산
     (0, react_1.useLayoutEffect)(function () {
-        var handleResize = function () {
-            setTimeout(calculateMaxSchedules, 0);
-        };
-        window.addEventListener('resize', handleResize);
-        return function () { return window.removeEventListener('resize', handleResize); };
-    }, [calculateMaxSchedules]);
-    // 다중 이벤트 계산
-    var getMultiWeekSchedules = (0, react_1.useMemo)(function () {
-        // 개선: 날짜별(row, col) -> 사용중인 row set을 관리
-        var rowColUsedRows = {};
-        var multiWeekSchedules = [];
-        var allSchedules = new Map();
-        var processedScheduleIds = new Set();
-        // 캘린더에 표시되는 전체 날짜 범위 계산
+        calculateMaxSchedules();
+    }, [height]);
+    // 캘린더 범위 계산
+    var getCalendarDateRange = (0, react_1.useCallback)(function (days) {
         var calendarStart = new Date(days[0]);
         var calendarEnd = new Date(days[days.length - 1]);
         calendarStart.setHours(0, 0, 0, 0);
         calendarEnd.setHours(0, 0, 0, 0);
+        return { calendarStart: calendarStart, calendarEnd: calendarEnd };
+    }, []);
+    // 다중일 스케줄 수집 및 필터링
+    var collectMultiDaySchedules = (0, react_1.useCallback)(function (days, getSchedulesForDate, calendarStart, calendarEnd) {
+        var allSchedules = new Map();
+        var processedScheduleIds = new Set();
         days.forEach(function (date) {
             var schedulesForDate = getSchedulesForDate(date);
             schedulesForDate.forEach(function (schedule) {
@@ -122,8 +108,11 @@ var MonthlyView = function (_a) {
                 }
             });
         });
-        // 개선: 멀티데이 스케줄을 시작일 기준 오름차순, duration 오름차순으로 정렬
-        var sortedMultiDaySchedules = Array.from(allSchedules.values()).sort(function (a, b) {
+        return Array.from(allSchedules.values());
+    }, []);
+    // 스케줄 정렬 (시작일 기준 오름차순, 기간 오름차순)
+    var sortSchedulesByStartAndDuration = (0, react_1.useCallback)(function (schedules) {
+        return schedules.sort(function (a, b) {
             var aStart = new Date(a.startDate).getTime();
             var bStart = new Date(b.startDate).getTime();
             if (aStart !== bStart)
@@ -132,88 +121,137 @@ var MonthlyView = function (_a) {
             var bDur = new Date(b.endDate).getTime() - bStart;
             return aDur - bDur;
         });
-        // 개선: 각 멀티데이 스케줄마다, 차지하는 모든 날짜(row, col)에서 사용중인 row를 체크하여, 가장 작은 빈 row에만 할당
-        sortedMultiDaySchedules.forEach(function (schedule) {
+    }, []);
+    // 스케줄의 그리드 위치 계산
+    var calculateScheduleGridPosition = (0, react_1.useCallback)(function (schedule, days, calendarStart, calendarEnd) {
+        var scheduleStart = new Date(schedule.startDate);
+        var scheduleEnd = new Date(schedule.endDate);
+        scheduleStart.setHours(0, 0, 0, 0);
+        scheduleEnd.setHours(0, 0, 0, 0);
+        // 캘린더 범위 내에서 표시할 실제 시작/끝 날짜 계산
+        var displayStart = new Date(Math.max(scheduleStart.getTime(), calendarStart.getTime()));
+        var displayEnd = new Date(Math.min(scheduleEnd.getTime(), calendarEnd.getTime()));
+        // 캘린더 그리드에서 시작과 끝 위치 찾기
+        var startIndex = days.findIndex(function (date) {
+            var d = new Date(date);
+            d.setHours(0, 0, 0, 0);
+            return d.getTime() === displayStart.getTime();
+        });
+        var endIndex = days.findIndex(function (date) {
+            var d = new Date(date);
+            d.setHours(0, 0, 0, 0);
+            return d.getTime() === displayEnd.getTime();
+        });
+        if (startIndex === -1 || endIndex === -1) {
+            return null;
+        }
+        return { startIndex: startIndex, endIndex: endIndex };
+    }, []);
+    // 행별 세그먼트 정보 계산
+    var calculateRowSegments = (0, react_1.useCallback)(function (startIndex, endIndex) {
+        var startRow = Math.floor(startIndex / 7) + 2;
+        var endRow = Math.floor(endIndex / 7) + 2;
+        var segments = [];
+        var getSegmentBounds = function (row, startRow, endRow, startIndex, endIndex) {
+            if (row === startRow && row === endRow) {
+                return [(startIndex % 7) + 1, (endIndex % 7) + 1];
+            }
+            if (row === startRow) {
+                return [(startIndex % 7) + 1, 7];
+            }
+            if (row === endRow) {
+                return [1, (endIndex % 7) + 1];
+            }
+            return [1, 7];
+        };
+        for (var row = startRow; row <= endRow; row += 1) {
+            var _a = getSegmentBounds(row, startRow, endRow, startIndex, endIndex), startCol = _a[0], endCol = _a[1];
+            segments.push({ row: row, startCol: startCol, endCol: endCol });
+        }
+        return segments;
+    }, []);
+    // 사용중인 행 정보를 수집
+    var collectUsedRows = (0, react_1.useCallback)(function (segments, rowColUsedRows) {
+        var usedRows = new Set();
+        segments.forEach(function (_a) {
+            var row = _a.row, startCol = _a.startCol, endCol = _a.endCol;
+            for (var col = startCol; col <= endCol; col += 1) {
+                var key = "".concat(row, "_").concat(col);
+                if (rowColUsedRows[key]) {
+                    rowColUsedRows[key].forEach(function (r) { return usedRows.add(r); });
+                }
+            }
+        });
+        return usedRows;
+    }, []);
+    // 가장 작은 빈 행 인덱스 찾기
+    var findAvailableRowIndex = (0, react_1.useCallback)(function (usedRows) {
+        var scheduleIndex = 0;
+        while (usedRows.has(scheduleIndex)) {
+            scheduleIndex += 1;
+        }
+        return scheduleIndex;
+    }, []);
+    // 행-열 사용 정보 업데이트
+    var updateRowColUsage = (0, react_1.useCallback)(function (segments, scheduleIndex, rowColUsedRows) {
+        segments.forEach(function (_a) {
+            var row = _a.row, startCol = _a.startCol, endCol = _a.endCol;
+            for (var col = startCol; col <= endCol; col += 1) {
+                var key = "".concat(row, "_").concat(col);
+                if (!rowColUsedRows[key])
+                    rowColUsedRows[key] = new Set();
+                rowColUsedRows[key].add(scheduleIndex);
+            }
+        });
+    }, []);
+    // 다중 이벤트 계산
+    var getMultiWeekSchedules = (0, react_1.useMemo)(function () {
+        var _a = getCalendarDateRange(days), calendarStart = _a.calendarStart, calendarEnd = _a.calendarEnd;
+        var multiDaySchedules = collectMultiDaySchedules(days, getSchedulesForDate, calendarStart, calendarEnd);
+        var sortedSchedules = sortSchedulesByStartAndDuration(multiDaySchedules);
+        var rowColUsedRows = {};
+        var multiWeekSchedules = [];
+        sortedSchedules.forEach(function (schedule) {
             var scheduleStart = new Date(schedule.startDate);
             var scheduleEnd = new Date(schedule.endDate);
             scheduleStart.setHours(0, 0, 0, 0);
             scheduleEnd.setHours(0, 0, 0, 0);
             if (scheduleStart.getTime() !== scheduleEnd.getTime()) {
-                // 캘린더 범위 내에서 표시할 실제 시작/끝 날짜 계산
-                var displayStart_1 = new Date(Math.max(scheduleStart.getTime(), calendarStart.getTime()));
-                var displayEnd_1 = new Date(Math.min(scheduleEnd.getTime(), calendarEnd.getTime()));
-                // 캘린더 그리드에서 시작과 끝 위치 찾기
-                var startIndex = days.findIndex(function (date) {
-                    var d = new Date(date);
-                    d.setHours(0, 0, 0, 0);
-                    return d.getTime() === displayStart_1.getTime();
-                });
-                var endIndex = days.findIndex(function (date) {
-                    var d = new Date(date);
-                    d.setHours(0, 0, 0, 0);
-                    return d.getTime() === displayEnd_1.getTime();
-                });
-                if (startIndex !== -1 && endIndex !== -1) {
-                    var startRow = Math.floor(startIndex / 7) + 2;
-                    var endRow = Math.floor(endIndex / 7) + 2;
-                    var _loop_1 = function (row) {
-                        var isFirstRow = row === startRow;
-                        var isLastRow = row === endRow;
-                        var segmentStartCol = void 0;
-                        var segmentEndCol = void 0;
-                        if (isFirstRow && isLastRow) {
-                            segmentStartCol = (startIndex % 7) + 1;
-                            segmentEndCol = (endIndex % 7) + 1;
-                        }
-                        else if (isFirstRow) {
-                            segmentStartCol = (startIndex % 7) + 1;
-                            segmentEndCol = 7;
-                        }
-                        else if (isLastRow) {
-                            segmentStartCol = 1;
-                            segmentEndCol = (endIndex % 7) + 1;
-                        }
-                        else {
-                            segmentStartCol = 1;
-                            segmentEndCol = 7;
-                        }
-                        // 개선: 이 스케줄이 차지하는 날짜(row, col) 전체에서 사용중인 row set을 합침
-                        var usedRows = new Set();
-                        for (var col = segmentStartCol; col <= segmentEndCol; col += 1) {
-                            var key = "".concat(row, "_").concat(col);
-                            if (rowColUsedRows[key]) {
-                                rowColUsedRows[key].forEach(function (r) { return usedRows.add(r); });
-                            }
-                        }
-                        // 가장 작은 빈 row를 찾음
-                        var scheduleIndex = 0;
-                        while (usedRows.has(scheduleIndex)) {
-                            scheduleIndex += 1;
-                        }
-                        // 이 스케줄이 차지하는 모든 날짜(row, col)에 scheduleIndex를 기록
-                        for (var col = segmentStartCol; col <= segmentEndCol; col += 1) {
-                            var key = "".concat(row, "_").concat(col);
-                            if (!rowColUsedRows[key])
-                                rowColUsedRows[key] = new Set();
-                            rowColUsedRows[key].add(scheduleIndex);
-                        }
+                var gridPosition = calculateScheduleGridPosition(schedule, days, calendarStart, calendarEnd);
+                if (gridPosition) {
+                    var startIndex = gridPosition.startIndex, endIndex = gridPosition.endIndex;
+                    var segments = calculateRowSegments(startIndex, endIndex);
+                    segments.forEach(function (_a) {
+                        var row = _a.row, startCol = _a.startCol, endCol = _a.endCol;
+                        var usedRows = collectUsedRows([{ row: row, startCol: startCol, endCol: endCol }], rowColUsedRows);
+                        var scheduleIndex = findAvailableRowIndex(usedRows);
+                        updateRowColUsage([{ row: row, startCol: startCol, endCol: endCol }], scheduleIndex, rowColUsedRows);
                         multiWeekSchedules.push({
                             schedule: schedule,
                             startRow: row,
                             endRow: row,
-                            startCol: segmentStartCol,
-                            endCol: segmentEndCol,
+                            startCol: startCol,
+                            endCol: endCol,
                             scheduleIndex: scheduleIndex
                         });
-                    };
-                    for (var row = startRow; row <= endRow; row += 1) {
-                        _loop_1(row);
-                    }
+                    });
                 }
             }
         });
         return multiWeekSchedules;
-    }, [days, getSchedulesForDate, schedules]);
+    }, [
+        days,
+        getSchedulesForDate,
+        schedules,
+        getCalendarDateRange,
+        collectMultiDaySchedules,
+        sortSchedulesByStartAndDuration,
+        calculateScheduleGridPosition,
+        calculateRowSegments,
+        collectUsedRows,
+        findAvailableRowIndex,
+        updateRowColUsage
+    ]);
     var getCalendarCellData = function (date, index) {
         var daySchedules = getSchedulesForDate(date);
         var row = Math.floor(index / 7) + 2; // 헤더 고려

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

@@ -30,6 +30,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultiWeekSchedulesLayer = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var useParentResizeObserver_1 = require("../../../common/hooks/useParentResizeObserver");
+var useWindowSize_1 = require("../../../common/hooks/useWindowSize");
 var styled_components_1 = __importDefault(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 var ScheduleItem_1 = require("./ScheduleItem");
@@ -38,6 +40,7 @@ var MultiWeekSchedulesLayer = function (_a) {
     var containerRef = (0, react_1.useRef)(null);
     var _d = (0, react_1.useState)([]), cellPositions = _d[0], setCellPositions = _d[1];
     var _e = (0, react_1.useState)([]), hiddenSchedules = _e[0], setHiddenSchedules = _e[1];
+    var height = (0, useWindowSize_1.useWindowSize)().height;
     // 캘린더 셀들의 실제 위치를 계산하는 함수
     var calculateCellPositions = (0, react_1.useCallback)(function () {
         if (!containerRef.current)
@@ -73,30 +76,11 @@ var MultiWeekSchedulesLayer = function (_a) {
         setCellPositions(positions);
     }, []);
     // ResizeObserver로 크기 변경 감지
+    (0, useParentResizeObserver_1.useParentResizeObserver)(containerRef, calculateCellPositions, 100);
+    // 창 크기 변경 시 재계산
     (0, react_1.useLayoutEffect)(function () {
-        if (!containerRef.current)
-            return;
-        var gridContainer = containerRef.current.parentElement;
-        if (!gridContainer)
-            return;
-        var resizeObserver = new ResizeObserver(function () {
-            calculateCellPositions();
-        });
-        resizeObserver.observe(gridContainer);
-        // 초기 계산
         calculateCellPositions();
-        return function () {
-            resizeObserver.disconnect();
-        };
-    }, [calculateCellPositions]);
-    // 창 크기 변경 시에도 재계산
-    (0, react_1.useLayoutEffect)(function () {
-        var handleResize = function () {
-            setTimeout(calculateCellPositions, 0);
-        };
-        window.addEventListener('resize', handleResize);
-        return function () { return window.removeEventListener('resize', handleResize); };
-    }, [calculateCellPositions]);
+    }, [height, calculateCellPositions]);
     (0, react_1.useEffect)(function () {
         // 각 row별로 스케줄 개수와 높이 제한 확인
         var schedulesByRow = {};
@@ -109,18 +93,13 @@ var MultiWeekSchedulesLayer = function (_a) {
                 schedulesByRow[row].push(scheduleInfo);
             }
         });
-        // 각 row에서 높이 제한 확인 (실제로 보이는 줄 수와 전체 스케줄 수 모두 출력)
+        // 각 row(주)에서 높이 제한 확인 (실제로 보이는 줄 수와 전체 스케줄 수 모두 출력)
         Object.keys(schedulesByRow).forEach(function (rowStr) {
             var row = parseInt(rowStr, 10);
             var schedules = schedulesByRow[row];
-            // scheduleIndex별로 한 줄에 하나씩만!
-            var rowIndexMap = {};
-            schedules.forEach(function (s) {
-                rowIndexMap[s.scheduleIndex] = s;
-            });
-            var rowSchedules = Object.values(rowIndexMap);
+            var rowSchedules = __spreadArray([], schedules, true);
             if (rowSchedules.length > maxSchedulesPerDay) {
-                // row를 날짜로 변환 (row 2가 첫 번째 주, row 3이 두 번째 주...)
+                // row(주)를 날짜로 변환 (row 2가 첫 번째 주, row 3이 두 번째 주...)
                 var weekIndex = row - 2; // 헤더 제외
                 var today = new Date();
                 var startOfWeek = new Date(today);
@@ -129,11 +108,18 @@ var MultiWeekSchedulesLayer = function (_a) {
                 weekStart.setDate(startOfWeek.getDate() + weekIndex * 7);
                 var weekEnd = new Date(weekStart);
                 weekEnd.setDate(weekStart.getDate() + 6);
-                setHiddenSchedules(__spreadArray([], rowSchedules, true).filter(function (_, index) { return index > maxSchedulesPerDay - 1; })
+                // 최대 스케줄 개수를 초과하는 스케줄은 숨김 처리 (scheduleIndex기준, 0부터 시작)
+                setHiddenSchedules(__spreadArray([], rowSchedules, true).filter(function (rowSchedule) { return rowSchedule.scheduleIndex > maxSchedulesPerDay - 1; })
                     .map(function (s) { return s.schedule.id.toString(); }));
             }
         });
     }, [maxSchedulesPerDay]);
+    // 드래그 시작 핸들러를 함수로 분리
+    var handleDragStart = function (schedule, e) {
+        if (handleScheduleDragStart) {
+            handleScheduleDragStart(schedule, e);
+        }
+    };
     return ((0, jsx_runtime_1.jsx)(S_Layer, __assign({ ref: containerRef }, { children: multiWeekSchedules
             .filter(function (s) { return !hiddenSchedules.includes(s.schedule.id.toString()); })
             .map(function (_a) {
@@ -142,11 +128,7 @@ var MultiWeekSchedulesLayer = function (_a) {
             var isSelected = selectedSchedules.some(function (s) { return s.id === schedule.id; });
             var uniqueKey = "multi-".concat(schedule.id, "-").concat(startRow, "-").concat(startCol, "-").concat(endCol);
             if (isSameRow) {
-                return ((0, jsx_runtime_1.jsxs)(S_MultiWeekSchedule, __assign({ "$color": schedule.color, "$startRow": startRow, "$endRow": endRow, "$startCol": startCol, "$endCol": endCol, "$scheduleIndex": scheduleIndex, "$isSelected": isSelected, "$isDraggable": isDraggable, "$cellPositions": cellPositions, draggable: isDraggable, onDragStart: isDraggable
-                        ? function (e) {
-                            handleScheduleDragStart === null || handleScheduleDragStart === void 0 ? void 0 : handleScheduleDragStart(schedule, e);
-                        }
-                        : undefined, onDragEnd: isDraggable ? handleScheduleDragEnd : undefined, onClick: function (e) {
+                return ((0, jsx_runtime_1.jsxs)(S_MultiWeekSchedule, __assign({ "$color": schedule.color, "$startRow": startRow, "$endRow": endRow, "$startCol": startCol, "$endCol": endCol, "$scheduleIndex": scheduleIndex, "$isSelected": isSelected, "$isDraggable": isDraggable, "$cellPositions": cellPositions, draggable: isDraggable, onDragStart: isDraggable ? function (e) { return handleDragStart(schedule, e); } : undefined, onDragEnd: isDraggable ? handleScheduleDragEnd : undefined, onClick: function (e) {
                         e.stopPropagation();
                         handleScheduleClick === null || handleScheduleClick === void 0 ? void 0 : handleScheduleClick(schedule, e);
                     } }, { children: [(0, jsx_runtime_1.jsx)(ScheduleItem_1.S_Dot, { "$isSelected": isSelected }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: schedule.title, ellipsisMode: "use", colorTheme: isSelected ? 'sysTextWhite' : undefined })] }), uniqueKey));

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

@@ -37,23 +37,21 @@ var formatTimeWithLocale = function (hour, minute, currentLang, t) {
     if (currentLang === 'ko') {
         var minuteStr = minute.toString().padStart(2, '0');
         if (hour === 12) {
-            return minute === 0
-                ? t('str_fm_datetime_noon')
-                : "12:".concat(minuteStr, " ").concat(t('str_fm_datetime_noon'));
+            return minute === 0 ? t('str_fm_datetime_noon') : "".concat(t('str_fm_pm'), " 12:").concat(minuteStr);
         }
         if (hour < 12) {
             if (hour === 0) {
                 return minute === 0
                     ? "".concat(t('str_fm_datetime_am', { hour: 12 }))
-                    : "12:".concat(minuteStr, " ").concat(t('str_fm_datetime_am', { hour: 12 }));
+                    : "".concat(t('str_fm_am'), " 12:").concat(minuteStr);
             }
             return minute === 0
                 ? "".concat(t('str_fm_datetime_am', { hour: hour }))
-                : "".concat(hour, ":").concat(minuteStr, " ").concat(t('str_fm_datetime_am', { hour: hour }));
+                : "".concat(t('str_fm_am'), " ").concat(hour, ":").concat(minuteStr);
         }
         return minute === 0
             ? "".concat(t('str_fm_datetime_pm', { hour: hour - 12 }))
-            : "".concat(hour - 12, ":").concat(minuteStr, " ").concat(t('str_fm_datetime_pm', { hour: hour - 12 }));
+            : "".concat(t('str_fm_pm'), " ").concat(hour - 12, ":").concat(minuteStr);
     }
     // 다른 언어의 경우 기본 formatHour 함수 사용
     return (0, exports.formatHour)(hour, minute, currentLang);

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js

@@ -93,7 +93,7 @@ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_11 ||
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  width: 864px;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  width: 864px;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  scrollbar-width: auto !important;\n  ", ";\n  ", ";\n  width: 864px;\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  scrollbar-width: auto !important;\n  ", ";\n  ", ";\n  width: 864px;\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer01_background;
 }, function (_a) {

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFB.js

@@ -50,7 +50,7 @@ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  width: 864px;\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  width: 864px;\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  scrollbar-width: auto !important;\n  width: 864px;\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  scrollbar-width: auto !important;\n  width: 864px;\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer01_background;
 }, function (_a) {

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFE.js

@@ -60,7 +60,7 @@ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_11 ||
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  scrollbar-width: auto !important;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  scrollbar-width: auto !important;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer01_background;
 }, function (_a) {

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFL.js

@@ -61,7 +61,7 @@ var WFL_4Area2Style = (0, styled_components_1.css)(templateObject_12 || (templat
 var WFL_1Content2Style = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
 var WFL_2Content2Style = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
 var S_Box = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n"], ["\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px 0 0 24px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 480px;\n\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px 0 0 24px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 480px;\n\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px 0 0 24px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  scrollbar-width: auto !important;\n\n  ", ";\n  ", ";\n\n  width: 480px;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px 0 0 24px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  scrollbar-width: auto !important;\n\n  ", ";\n  ", ";\n\n  width: 480px;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer01_background;
 }, function (_a) {
@@ -75,8 +75,8 @@ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_16 ||
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: ".concat(containerColor);
-}, scrollbarStyle_1.scrollbarStyle);
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 0 24px 24px 0;\n  width: 672px;\n\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  border-radius: 0 24px 24px 0;\n  width: 672px;\n\n  ", ";\n  ", ";\n"])), function (_a) {
+}, scrollbarStyle_1.scrollbarWithPaddingStyle);
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 0 24px 24px 0;\n\n  scrollbar-width: auto !important;\n\n  ", ";\n  ", ";\n\n  width: 672px;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 0 24px 24px 0;\n\n  scrollbar-width: auto !important;\n\n  ", ";\n  ", ";\n\n  width: 672px;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer02_background;
 }, function (_a) {
@@ -90,12 +90,15 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_17 ||
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: ".concat(containerColor);
-});
+}, scrollbarStyle_1.scrollbarWithPaddingStyle);
 var S_ContentsArea1 = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: ".concat(areaColor);
 });
-var S_ContentsArea2 = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  box-sizing: border-box;\n\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-left: ", ";\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-left: ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WFL_1: WFL_1Area2Style,

package/dist/src/mobile/components/BoxItem/BoxItem.js

@@ -90,7 +90,7 @@ function BoxItem(_a) {
                 alignItems: 'center',
                 justifyContent: 'space-between',
                 cursor: state === 'disabled' ? 'default' : selectionMode === 'use' ? 'pointer' : 'default'
-            } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { selected: selectState === 'selected', isIndeterminate: checkboxMode === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: titleText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : titleTextColorKey, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, wordBreak: titleTextWordBreak, ellipsisMode: "use" })), descText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: descText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, wordBreak: descTextWordBreak, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
+            } }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' || chipMode === 'use' }, { children: [checkboxMode !== 'none' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { selected: selectState === 'selected', isIndeterminate: checkboxMode === 'indeterminate' })), imageMode === 'use' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { shape: imageShapeType, src: imageSrc, width: imageWidth, ratio: imageRatio, scaleType: imageScaleType })), (0, jsx_runtime_1.jsxs)(S_TextGroup, { children: [titleText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: titleText, colorOverride: state === 'disabled' ? undefined : titleTextColorKey, colorTheme: state === 'disabled' ? 'sysTextTertiary' : undefined, styleTheme: titleFontSize, lineLimit: titleTextLineLimit, wordBreak: titleTextWordBreak, ellipsisMode: "use" })), descText && ((0, jsx_runtime_1.jsx)(index_1.M_TextLabel, { text: descText, colorOverride: state === 'disabled' ? 'ui_cpnt_textlabel_sys_secondary' : descTextColorKey, lineLimit: descLineLimit, wordBreak: descTextWordBreak, ellipsisMode: "use", styleTheme: "caption1Regular" }))] })] })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [displayType !== 'none' ||
                             (chipMode === 'use' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })), chipMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: chipText, overrideBackgroundColorKey: chipOverrideBackgroundColorKey, displayType: "information", overrideTextColorKey: chipOverrideTextColorKey }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', baseSize: "medium", fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", shapeType: "rectangle" })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] })), displayType === 'ibtn_amount3' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn1IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, onClick: handleIBtn1Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn2IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, onClick: handleIBtn2Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" }), (0, jsx_runtime_1.jsx)(index_1.M_IconButton, { iconName: iBtn3IconName || 'ic_arrow_right', fillType: "fill", iconFillType: iBtn3IconFillType, iconColorKey: iBtn3IconColorKey, onClick: handleIBtn3Click, state: state, iconSize: 20, baseColorKey: "ui_cpnt_button_fill_base_transparent", borderColorKey: "ui_cpnt_button_fill_base_transparent", baseSize: "medium", shapeType: "rectangle" })] }))] }), indicatorMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", fillType: "line", size: 20, colorKey: "ui_cpnt_icon_sys_grey_01" })] }))] })] })) })));
 }
 var S_BoxItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n  width: 100%;\n"])), function (_a) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.2.205",
+  "version": "2.2.207",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,7 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.205]
+## [v2.2.207]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1311] 캘린더 배포 이후 수정사항 반영
-* [PDS-1245] 다국어 배포 이후 수정사항 반영
+* [PDS-1336] BoxItem state : disabled일 때, 스펙 수정 건 , 레이아웃에 스크롤 추가