pds-dev-kit-web-test 2.5.627 → 2.5.628

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

@@ -37,18 +37,18 @@
         "str_calendar_all_day": "All day",
         "str_calendar_schedule_more": "{{count}} more",
         "str_calendar_today": "Today",
-        "calendar_month_1": "Jan",
-        "calendar_month_2": "Feb",
-        "calendar_month_3": "Mar",
-        "calendar_month_4": "Apr",
+        "calendar_month_1": "January",
+        "calendar_month_2": "February",
+        "calendar_month_3": "March",
+        "calendar_month_4": "April",
         "calendar_month_5": "May",
-        "calendar_month_6": "Jun",
-        "calendar_month_7": "Jul",
-        "calendar_month_8": "Aug",
-        "calendar_month_9": "Sep",
-        "calendar_month_10": "Oct",
-        "calendar_month_11": "Nov",
-        "calendar_month_12": "Dec",
+        "calendar_month_6": "June",
+        "calendar_month_7": "July",
+        "calendar_month_8": "August",
+        "calendar_month_9": "September",
+        "calendar_month_10": "October",
+        "calendar_month_11": "November",
+        "calendar_month_12": "December",
         "str_fm_datetime_am": "{{hour}} AM",
         "str_fm_datetime_pm": "{{hour}} PM",
         "str_fm_am": "AM",
@@ -60,14 +60,14 @@
         "calendar_header_weekly_same_month": "{{month}} {{startDay}} - {{endDay}}",
         "calendar_header_weekly_diff_month": "{{startMonth}} {{startDay}} - {{endMonth}} {{endDay}}",
         "str_calendar_yearly_header": "{{year}}",
-        "str_calendar_monthly_header": "{{month}}.{{year}}",
-        "str_calendar_weekly_header": "{{month}}.{{year}}",
+        "str_calendar_monthly_header": "{{month}} {{year}}",
+        "str_calendar_weekly_header": "{{month}} {{year}}",
         "calendar_view_monthly": "Monthly",
         "calendar_view_weekly": "Weekly",
         "calendar_view_daily": "Daily",
         "calendar_view_yearly": "Yearly",
         "calendar_date_format": "{{day}} ({{dayText}})",
-        "str_calendar_weekly_date": "{{month}}-{{date}} {{day}}",
+        "str_calendar_weekly_date": "{{month}} {{date}} ({{day}})",
         "str_fm_year": "Year",
         "str_fm_month": "Month",
         "str_fm_day": "Day",

package/dist/src/common/styles/theme.d.ts

@@ -113,5 +113,4 @@ export declare const language = "ko";
 declare const theme: DefaultTheme;
 type ToneType = 'DARK' | 'LIGHT';
 export declare const themeByGivenTone: (tone: ToneType) => any;
-export type AppTheme = ReturnType<typeof themeByGivenTone>;
 export default theme;

package/dist/src/common/styles/theme.js

@@ -125,6 +125,6 @@ exports.spacing = {
 };
 exports.language = 'ko';
 var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing, language: exports.language }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {}));
-var themeByGivenTone = function (tone) { return (__assign(__assign({}, (0, ui_colors_1.customTheme)(tone)), { fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing, language: exports.language, mode: tone === 'DARK' ? 'dark' : 'light' })); };
+var themeByGivenTone = function (tone) { return (__assign(__assign({}, (0, ui_colors_1.customTheme)(tone)), { fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing, language: exports.language })); };
 exports.themeByGivenTone = themeByGivenTone;
 exports.default = theme;

package/dist/src/core/pricing/translator.js

@@ -28,7 +28,10 @@ var PricingTranslator = /** @class */ (function () {
      */
     PricingTranslator.currency = function (code, opts) {
         var currency = types_1.CURRENCY_MAP[code];
-        return (opts === null || opts === void 0 ? void 0 : opts.friendly) ? currency.friendlyName(opts.translation) : currency.name;
+        if (opts === null || opts === void 0 ? void 0 : opts.friendly) {
+            return currency.friendlyName(opts.translation);
+        }
+        return currency.name;
     };
     /**
      * 포맷된 금액과 통화 문자열을 결합합니다
@@ -40,13 +43,9 @@ var PricingTranslator = /** @class */ (function () {
         if (PricingTranslator.isCurrencyLeading(PricingTranslator.browserLanguage)) {
             return "".concat(currencyString, " ").concat(formattedAmount);
         }
-        // KRW만 friendly 대응
-        if (price.currency === types_1.CurrencyCode.KRW) {
-            return (opts === null || opts === void 0 ? void 0 : opts.friendly)
-                ? "".concat(formattedAmount).concat(currencyString)
-                : "".concat(formattedAmount, " ").concat(currencyString);
-        }
-        return "".concat(formattedAmount, " ").concat(currencyString);
+        return (opts === null || opts === void 0 ? void 0 : opts.friendly)
+            ? "".concat(formattedAmount).concat(currencyString)
+            : "".concat(formattedAmount, " ").concat(currencyString);
     };
     PricingTranslator.browserLanguage = null;
     return PricingTranslator;

package/dist/src/core/pricing/types.js

@@ -19,7 +19,7 @@ exports.CURRENCY_MAP = (_a = {},
     _a[CurrencyCode.USD] = {
         code: CurrencyCode.USD,
         name: CurrencyCode.USD,
-        friendlyName: function () { return CurrencyCode.USD; },
+        friendlyName: translateFriendlyName('str_friendly_currency_dollar'),
         decimalDigits: 2
     },
     _a[CurrencyCode.JPY] = {

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' ? 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' ||
+            } }, { 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' ||
                             (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

@@ -44,27 +44,9 @@ var WeeklyView_1 = require("./WeeklyView");
 var YearlyView_1 = require("./YearlyView");
 var Calendar = function (_a) {
     var _b;
-    var _c = _a.defaultViewType, defaultViewType = _c === void 0 ? 'MONTHLY' : _c, _d = _a.viewTypes, viewTypes = _d === void 0 ? ['MONTHLY', 'WEEKLY', 'DAILY', 'YEARLY'] : _d, _e = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _e === void 0 ? 'none' : _e, _f = _a.startOfWeek, startOfWeek = _f === void 0 ? 'sunday' : _f, _g = _a.todayBtnMode, todayBtnMode = _g === void 0 ? 'use' : _g, _h = _a.schedules, schedules = _h === void 0 ? [] : _h, config = _a.config, onActionDispatch = _a.onActionDispatch;
-    // 다국어 키를 CalendarViewType으로 매핑하는 함수
-    var mapI18nKeyToViewType = function (key) {
-        switch (key) {
-            case 'str_fm_month':
-                return 'MONTHLY';
-            case 'str_fm_week':
-                return 'WEEKLY';
-            case 'str_fm_day':
-                return 'DAILY';
-            case 'str_fm_year':
-                return 'YEARLY';
-            default:
-                return key;
-        }
-    };
-    // 다국어 키를 받아서 내부적으로 매핑
-    var actualDefaultViewType = mapI18nKeyToViewType(defaultViewType);
-    var actualViewTypes = viewTypes.map(mapI18nKeyToViewType);
+    var _c = _a.defaultViewType, defaultViewType = _c === void 0 ? 'str_fm_month' : _c, _d = _a.viewTypes, viewTypes = _d === void 0 ? ['str_fm_month', 'str_fm_week', 'str_fm_day', 'str_fm_year'] : _d, _e = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _e === void 0 ? 'none' : _e, _f = _a.startOfWeek, startOfWeek = _f === void 0 ? 'sunday' : _f, _g = _a.todayBtnMode, todayBtnMode = _g === void 0 ? 'use' : _g, _h = _a.schedules, schedules = _h === void 0 ? [] : _h, config = _a.config, onActionDispatch = _a.onActionDispatch;
     var t = (0, react_i18next_1.useTranslation)().t;
-    var _j = (0, react_1.useState)(actualDefaultViewType), currentViewType = _j[0], setCurrentViewType = _j[1];
+    var _j = (0, react_1.useState)(defaultViewType), currentViewType = _j[0], setCurrentViewType = _j[1];
     var _k = (0, react_1.useState)(new Date()), selectedDate = _k[0], setSelectedDate = _k[1];
     var _l = (0, react_1.useState)(null), dragStartDate = _l[0], setDragStartDate = _l[1];
     var _m = (0, react_1.useState)(null), dragEndDate = _m[0], setDragEndDate = _m[1];
@@ -115,13 +97,13 @@ var Calendar = function (_a) {
         var increment = direction === 'next' ? 1 : -1;
         var getNewDateByViewType = function (viewType) {
             switch (viewType) {
-                case 'DAILY':
+                case 'str_fm_day':
                     return dateHelper_1.DateHelper.addDays(selectedDate, increment);
-                case 'WEEKLY':
+                case 'str_fm_week':
                     return dateHelper_1.DateHelper.addDays(selectedDate, increment * 7);
-                case 'MONTHLY':
+                case 'str_fm_month':
                     return dateHelper_1.DateHelper.addMonths(selectedDate, increment);
-                case 'YEARLY':
+                case 'str_fm_year':
                     return new Date(selectedDate.getFullYear() + increment, selectedDate.getMonth(), selectedDate.getDate());
                 default:
                     return selectedDate;
@@ -193,6 +175,21 @@ var Calendar = function (_a) {
         setDragStartDate(null);
         setDragEndDate(null);
     }, [isDragging, dragStartDate, dragEndDate]);
+    // 날짜 드래그 이벤트 처리
+    var handleDateDrag = (0, react_1.useCallback)(function (action) {
+        var _a, _b;
+        if (action.action === 'DRAG' && action.target === 'DATE') {
+            // 선택된 스케줄들을 selectedSchedules state에 반영
+            if (action.schedules && action.schedules.length > 0) {
+                setSelectedSchedules(action.schedules);
+            }
+            else {
+                setSelectedSchedules([]);
+            }
+            // 원래 config.DATE.DRAG 콜백이 있다면 호출
+            (_b = (_a = config === null || config === void 0 ? void 0 : config.DATE) === null || _a === void 0 ? void 0 : _a.DRAG) === null || _b === void 0 ? void 0 : _b.call(_a, action);
+        }
+    }, [config]);
     // 이벤트 드래그 핸들러
     var handleScheduleDragStart = (0, react_1.useCallback)(function (schedule, e) {
         setDraggedSchedule(schedule);
@@ -224,20 +221,24 @@ var Calendar = function (_a) {
     }, []);
     // 삭제 키 이벤트 처리
     var handleKeyDown = (0, react_1.useCallback)(function (e) {
-        var _a, _b, _c;
-        if (e.key === 'Backspace' &&
-            selectedSchedules.length > 0 &&
-            ((_a = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _a === void 0 ? void 0 : _a.DELETE_KEY_DOWN)) {
-            (_c = (_b = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _b === void 0 ? void 0 : _b.DELETE_KEY_DOWN) === null || _c === void 0 ? void 0 : _c.call(_b, {
+        var _a, _b;
+        if ((e.key === 'Backspace' || e.key === 'Delete') &&
+            (selectedSchedules.length > 0 || selectedDates.length > 0)) {
+            // config 콜백이 있으면 호출
+            (_b = (_a = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _a === void 0 ? void 0 : _a.DELETE_KEY_DOWN) === null || _b === void 0 ? void 0 : _b.call(_a, {
                 action: 'DELETE_KEY_DOWN',
                 target: 'SCHEDULE',
                 schedules: selectedSchedules,
                 startDate: (0, calendarUtils_1.toUTC)(startDate),
                 endDate: (0, calendarUtils_1.toUTC)(endDate)
             });
+            // 항상 선택된 스케줄들 해제
             setSelectedSchedules([]);
+            setSelectedDates([]);
+            // 브라우저 기본 동작 방지 (뒤로가기 등)
+            e.preventDefault();
         }
-    }, [config, selectedSchedules]);
+    }, [config, selectedSchedules, startDate, endDate]);
     // 날짜 드래그 놓기
     var handleDateDrop = (0, react_1.useCallback)(function (date, e) {
         var _a, _b, _c;
@@ -253,7 +254,7 @@ var Calendar = function (_a) {
         var duration = originalEndDate.getTime() - originalStartDate.getTime();
         var getAdjustedStartDate = function () {
             var baseDate = new Date(date);
-            if (currentViewType === 'MONTHLY') {
+            if (currentViewType === 'str_fm_month') {
                 var target = e.target;
                 var gridContainer = target.closest('[data-calendar-grid]');
                 if (gridContainer) {
@@ -299,17 +300,11 @@ var Calendar = function (_a) {
     };
     // 뷰 타입을 위한 드롭다운 옵션 생성
     var viewTypeOptions = (0, react_1.useMemo)(function () {
-        var viewTypeTextMap = {
-            MONTHLY: t('str_fm_month'),
-            WEEKLY: t('str_fm_week'),
-            DAILY: t('str_fm_day'),
-            YEARLY: t('str_fm_year')
-        };
-        return actualViewTypes.map(function (viewType) { return ({
-            text: viewTypeTextMap[viewType] || viewType,
+        return viewTypes.map(function (viewType) { return ({
+            text: t(viewType),
             value: viewType
         }); });
-    }, [actualViewTypes, t]);
+    }, [viewTypes, t]);
     // 특정 월의 캘린더 날짜 생성 (연간 보기용)
     var getMonthDates = (0, react_1.useCallback)(function (year, month) {
         var monthDate = new Date(year, month, 1);
@@ -350,14 +345,14 @@ var Calendar = function (_a) {
     };
     // 주간 뷰로 전환하는 핸들러
     var handleSwitchToWeeklyView = (0, react_1.useCallback)(function (date) {
-        setCurrentViewType('WEEKLY');
+        setCurrentViewType('str_fm_week');
         setSelectedDate(date);
         // 주간 뷰로 전환할 때의 startDate와 endDate 계산
-        var _a = (0, calendarUtils_1.calculateDateRange)('WEEKLY', date), newStartDate = _a.startDate, newEndDate = _a.endDate;
+        var _a = (0, calendarUtils_1.calculateDateRange)('str_fm_week', date), newStartDate = _a.startDate, newEndDate = _a.endDate;
         onActionDispatch === null || onActionDispatch === void 0 ? void 0 : onActionDispatch({
             type: 'CALENDAR_TYPE_CHANGE',
             payload: {
-                type: 'WEEKLY',
+                type: 'str_fm_week',
                 startDate: (0, calendarUtils_1.toUTC)(newStartDate),
                 endDate: (0, calendarUtils_1.toUTC)(newEndDate)
             }
@@ -366,13 +361,13 @@ var Calendar = function (_a) {
     // 뷰 타입에 따른 캘린더 콘텐츠 렌더링
     var renderCalendarContent = function () {
         switch (currentViewType) {
-            case 'MONTHLY':
-                return ((0, jsx_runtime_1.jsx)(MonthlyView_1.MonthlyView, { getDayTextByDate: getDayTextByDate, startOfWeek: startOfWeek, selectedDate: selectedDate, selectedDates: selectedDates, dragStartDate: dragStartDate, selectedSchedules: selectedSchedules, dragEndDate: dragEndDate, isDragOverDate: isDragOverDate, schedules: schedules, getSchedulesForDate: getSchedulesForDate, isToday: isToday, isPastDate: isPastDate, handleDateClick: handleDateClick, handleScheduleClick: handleScheduleClick, handleMouseUp: handleMouseUp, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, isDraggable: isDraggable, onSwitchToWeeklyView: handleSwitchToWeeklyView }));
-            case 'WEEKLY':
-                return (0, jsx_runtime_1.jsx)(WeeklyView_1.WeeklyView, { startOfWeek: startOfWeek });
-            case 'DAILY':
-                return (0, jsx_runtime_1.jsx)(DailyView_1.DailyView, {});
-            case 'YEARLY':
+            case 'str_fm_month':
+                return ((0, jsx_runtime_1.jsx)(MonthlyView_1.MonthlyView, { getDayTextByDate: getDayTextByDate, startOfWeek: startOfWeek, selectedDate: selectedDate, selectedDates: selectedDates, dragStartDate: dragStartDate, selectedSchedules: selectedSchedules, dragEndDate: dragEndDate, isDragOverDate: isDragOverDate, schedules: schedules, getSchedulesForDate: getSchedulesForDate, isToday: isToday, isPastDate: isPastDate, handleDateClick: handleDateClick, handleScheduleClick: handleScheduleClick, handleMouseUp: handleMouseUp, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, isDraggable: isDraggable, onSwitchToWeeklyView: handleSwitchToWeeklyView, config: config }));
+            case 'str_fm_week':
+                return (0, jsx_runtime_1.jsx)(WeeklyView_1.WeeklyView, { startOfWeek: startOfWeek, schedules: schedules, config: config });
+            case 'str_fm_day':
+                return (0, jsx_runtime_1.jsx)(DailyView_1.DailyView, { schedules: schedules, config: config });
+            case 'str_fm_year':
                 return ((0, jsx_runtime_1.jsx)(YearlyView_1.YearlyView, { selectedDate: selectedDate, getMonthDates: getMonthDates, getDayTextByDate: getDayTextByDate, startOfWeek: startOfWeek, isToday: isToday, handleDateClick: handleDateClick, getSchedulesForDate: getSchedulesForDate }));
             default:
                 return null;
@@ -384,7 +379,7 @@ var Calendar = function (_a) {
         // 스케줄 관련
         selectedSchedules: selectedSchedules, isDraggable: isDraggable, handleScheduleClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, 
         // 날짜 관련
-        handleDateClick: handleDateClick, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, 
+        handleDateClick: handleDateClick, handleDateDrag: handleDateDrag, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, 
         // 유틸리티 함수
         getSchedulesForDate: getSchedulesForDate, isToday: isToday, isPastDate: isPastDate, getDayTextByDate: getDayTextByDate, 
         // 상태값

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Schedule, displayAllDayScheduleMode } from './types';
+import type { Schedule, displayAllDayScheduleMode, Action } from './types';
 export interface ScheduleItemExtraProps {
     onDragStart?: (e: React.DragEvent) => void;
     onDragEnd?: () => void;
@@ -14,6 +14,7 @@ interface CalendarContextValue {
     handleScheduleDragStart: (schedule: Schedule, e: React.DragEvent) => void;
     handleScheduleDragEnd: () => void;
     handleDateClick: (date: Date, e: React.MouseEvent) => void;
+    handleDateDrag: (action: Action) => void;
     handleDateDragOver: (date: Date, e: React.DragEvent) => void;
     handleDateDragLeave: () => void;
     handleDateDrop: (date: Date, e: React.DragEvent) => void;
@@ -36,6 +37,7 @@ interface CalendarProviderProps {
     handleScheduleDragStart: (schedule: Schedule, e: React.DragEvent) => void;
     handleScheduleDragEnd: () => void;
     handleDateClick: (date: Date, e: React.MouseEvent) => void;
+    handleDateDrag: (action: Action) => void;
     handleDateDragOver: (date: Date, e: React.DragEvent) => void;
     handleDateDragLeave: () => void;
     handleDateDrop: (date: Date, e: React.DragEvent) => void;

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

@@ -30,7 +30,7 @@ var CalendarProvider = function (_a) {
     // 스케줄 관련
     selectedSchedules = _a.selectedSchedules, isDraggable = _a.isDraggable, handleScheduleClick = _a.handleScheduleClick, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd, 
     // 날짜 관련
-    handleDateClick = _a.handleDateClick, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, 
+    handleDateClick = _a.handleDateClick, handleDateDrag = _a.handleDateDrag, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, 
     // 유틸리티 함수
     getSchedulesForDate = _a.getSchedulesForDate, isToday = _a.isToday, isPastDate = _a.isPastDate, getDayTextByDate = _a.getDayTextByDate, 
     // 상태값
@@ -56,6 +56,7 @@ var CalendarProvider = function (_a) {
         handleScheduleDragEnd: handleScheduleDragEnd,
         // 날짜 이벤트 핸들러
         handleDateClick: handleDateClick,
+        handleDateDrag: handleDateDrag,
         handleDateDragOver: handleDateDragOver,
         handleDateDragLeave: handleDateDragLeave,
         handleDateDrop: handleDateDrop,

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

@@ -1,2 +1,8 @@
-/// <reference types="react" />
-export declare const DailyView: () => JSX.Element;
+import React from 'react';
+import type { Schedule } from './types';
+interface DailyViewProps {
+    schedules: Schedule[];
+    config?: any;
+}
+export declare const DailyView: React.FC<DailyViewProps>;
+export {};

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

@@ -40,6 +40,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DailyView = 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 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
@@ -48,9 +49,14 @@ var CalendarContext_1 = require("./CalendarContext");
 var CurrentTimeIndicator_1 = require("./CurrentTimeIndicator");
 var TimeBasedScheduleItem_1 = require("./TimeBasedScheduleItem");
 var timeFormatUtils_1 = require("./timeFormatUtils");
-var DailyView = function () {
+var DailyView = function (_a) {
+    var schedules = _a.schedules, config = _a.config;
     var i18n = (0, react_i18next_1.useTranslation)().i18n;
-    var _a = (0, CalendarContext_1.useCalendarContext)(), selectedDate = _a.selectedDate, selectedSchedules = _a.selectedSchedules, displayAllDayScheduleMode = _a.displayAllDayScheduleMode, getSchedulesForDate = _a.getSchedulesForDate, isDragOverDate = _a.isDragOverDate, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, handleDateClick = _a.handleDateClick, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd, handleScheduleClick = _a.handleScheduleClick;
+    var _b = (0, CalendarContext_1.useCalendarContext)(), selectedDate = _b.selectedDate, selectedSchedules = _b.selectedSchedules, displayAllDayScheduleMode = _b.displayAllDayScheduleMode, getSchedulesForDate = _b.getSchedulesForDate, isDragOverDate = _b.isDragOverDate, handleDateDragOver = _b.handleDateDragOver, handleDateDragLeave = _b.handleDateDragLeave, handleDateDrop = _b.handleDateDrop, handleDateClick = _b.handleDateClick, handleDateDrag = _b.handleDateDrag, handleScheduleDragStart = _b.handleScheduleDragStart, handleScheduleDragEnd = _b.handleScheduleDragEnd, handleScheduleClick = _b.handleScheduleClick;
+    // 시간 드래그 상태
+    var _c = (0, react_1.useState)(null), timeSelectionStart = _c[0], setTimeSelectionStart = _c[1];
+    var _d = (0, react_1.useState)(null), timeSelectionEnd = _d[0], setTimeSelectionEnd = _d[1];
+    var _e = (0, react_1.useState)(false), isTimeDragging = _e[0], setIsTimeDragging = _e[1];
     var currentDateForDaily = [selectedDate][0];
     var HOURS_IN_DAY = Array.from({ length: 24 }, function (_, i) { return i; });
     var getTimeSlotDate = function (baseDate, hour) {
@@ -58,10 +64,79 @@ var DailyView = function () {
         date.setHours(hour, 0, 0, 0);
         return date;
     };
+    // 시간 드래그 시작
+    var handleTimeMouseDown = (0, react_1.useCallback)(function (hour, e) {
+        var _a;
+        if (!((_a = config === null || config === void 0 ? void 0 : config.DATE) === null || _a === void 0 ? void 0 : _a.DRAG))
+            return;
+        e.preventDefault();
+        setTimeSelectionStart(hour);
+        setTimeSelectionEnd(hour);
+        setIsTimeDragging(true);
+    }, [config]);
+    // 시간 드래그 중
+    var handleTimeMouseEnter = (0, react_1.useCallback)(function (hour) {
+        if (!isTimeDragging)
+            return;
+        setTimeSelectionEnd(hour);
+    }, [isTimeDragging]);
+    // 드래그 종료 시 콜백 호출
+    (0, react_1.useEffect)(function () {
+        var handleMouseUp = function () {
+            var _a;
+            if (isTimeDragging &&
+                timeSelectionStart !== null &&
+                timeSelectionEnd !== null &&
+                ((_a = config === null || config === void 0 ? void 0 : config.DATE) === null || _a === void 0 ? void 0 : _a.DRAG)) {
+                // 선택된 시간 범위 계산
+                var startHour = Math.min(timeSelectionStart, timeSelectionEnd);
+                var endHour = Math.max(timeSelectionStart, timeSelectionEnd);
+                var startDateTime_1 = new Date(selectedDate);
+                startDateTime_1.setHours(startHour, 0, 0, 0);
+                var endDateTime_1 = new Date(selectedDate);
+                endDateTime_1.setHours(endHour, 59, 59, 999);
+                // 선택된 시간 범위에 포함되는 스케줄들 찾기
+                var schedulesInRange_1 = [];
+                schedules.forEach(function (schedule) {
+                    var scheduleStart = new Date(schedule.startDate);
+                    var scheduleEnd = new Date(schedule.endDate);
+                    // 스케줄이 선택된 시간 범위와 겹치는지 확인
+                    if (scheduleStart <= endDateTime_1 && scheduleEnd >= startDateTime_1) {
+                        schedulesInRange_1.push(schedule);
+                    }
+                });
+                // 선택된 날짜 (현재 날짜만)
+                var selectedDates = [new Date(selectedDate)];
+                handleDateDrag({
+                    action: 'DRAG',
+                    target: 'DATE',
+                    dates: selectedDates,
+                    schedules: schedulesInRange_1,
+                    startDate: startDateTime_1.toISOString(),
+                    endDate: endDateTime_1.toISOString()
+                });
+            }
+            setIsTimeDragging(false);
+            setTimeSelectionStart(null);
+            setTimeSelectionEnd(null);
+        };
+        if (isTimeDragging) {
+            document.addEventListener('mouseup', handleMouseUp);
+            return function () { return document.removeEventListener('mouseup', handleMouseUp); };
+        }
+    }, [isTimeDragging, timeSelectionStart, timeSelectionEnd, config, schedules, selectedDate]);
+    // 선택한 시간이 드래그 범위에 포함되는지 확인
+    var isTimeSlotInDragRange = (0, react_1.useCallback)(function (hour) {
+        if (timeSelectionStart === null || timeSelectionEnd === null)
+            return false;
+        var startHour = Math.min(timeSelectionStart, timeSelectionEnd);
+        var endHour = Math.max(timeSelectionStart, timeSelectionEnd);
+        return hour >= startHour && hour <= endHour;
+    }, [timeSelectionStart, timeSelectionEnd]);
     return ((0, jsx_runtime_1.jsxs)(S_DailyContainer, { children: [(0, jsx_runtime_1.jsx)(AllDaySchedulesSection_1.AllDaySchedulesSection, { calendarDates: [selectedDate], displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop }), (0, jsx_runtime_1.jsxs)(S_DailyTimeGrid, __assign({ "$displayAllDayScheduleMode": displayAllDayScheduleMode }, { children: [(0, jsx_runtime_1.jsx)(CurrentTimeIndicator_1.CurrentTimeIndicator, { show: true, leftOffset: "80px" }), HOURS_IN_DAY.map(function (hour) {
                         var timeSlotDate = getTimeSlotDate(currentDateForDaily, hour);
                         var isDragOver = (isDragOverDate === null || isDragOverDate === void 0 ? void 0 : isDragOverDate.getTime()) === timeSlotDate.getTime();
-                        return ((0, jsx_runtime_1.jsxs)(S_DailyTimeRow, { children: [(0, jsx_runtime_1.jsx)(S_DailyTimeLabel, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: (0, timeFormatUtils_1.formatHour)(hour, 0, i18n.language), colorTheme: "sysTextTertiary" }) }), (0, jsx_runtime_1.jsx)(S_DailyTimeSlot, __assign({ "$isDragOver": isDragOver, onClick: function () { return handleDateClick(timeSlotDate, {}); }, 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(currentDateForDaily), selectedSchedules: selectedSchedules, onClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd })) }))] }, hour));
+                        return ((0, jsx_runtime_1.jsxs)(S_DailyTimeRow, { children: [(0, jsx_runtime_1.jsx)(S_DailyTimeLabel, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: (0, timeFormatUtils_1.formatHour)(hour, 0, i18n.language), colorTheme: "sysTextTertiary" }) }), (0, jsx_runtime_1.jsx)(S_DailyTimeSlot, __assign({ "$isDragOver": isDragOver, "$isInTimeDragRange": isTimeSlotInDragRange(hour), "$isTimeDragging": isTimeDragging, onClick: function () { return handleDateClick(timeSlotDate, {}); }, onDragOver: function (e) { return handleDateDragOver(timeSlotDate, e); }, onDragLeave: handleDateDragLeave, onDrop: function (e) { return handleDateDrop(timeSlotDate, e); }, onMouseDown: function (e) { return handleTimeMouseDown(hour, e); }, onMouseEnter: function () { return handleTimeMouseEnter(hour); } }, { children: hour === 0 && ((0, jsx_runtime_1.jsx)(TimeBasedScheduleItem_1.TimeBasedScheduleItem, { schedules: getSchedulesForDate(currentDateForDaily), selectedSchedules: selectedSchedules, onClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd })) }))] }, hour));
                     })] }))] }));
 };
 exports.DailyView = DailyView;
@@ -74,18 +149,24 @@ var S_DailyTimeGrid = styled_components_1.default.div(templateObject_3 || (templ
     });
 });
 var S_DailyTimeRow = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  min-height: 60px;\n"], ["\n  display: flex;\n  min-height: 60px;\n"])));
-var S_DailyTimeLabel = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  display: flex;\n  justify-content: center;\n  min-width: 80px;\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  min-width: 80px;\n  padding: 8px;\n"])), function (_a) {
+var S_DailyTimeLabel = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  display: flex;\n  justify-content: center;\n  min-width: 63px;\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  min-width: 63px;\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_DailyTimeSlot = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  cursor: pointer;\n  flex: 1;\n  min-width: 0;\n  overflow: visible;\n  padding: 4px;\n  position: relative;\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  cursor: pointer;\n  flex: 1;\n  min-width: 0;\n  overflow: visible;\n  padding: 4px;\n  position: relative;\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) { return (props.$isDragOver ? props.theme.ui_72 : 'transparent'); }, function (_a) {
+var S_DailyTimeSlot = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  cursor: ", ";\n  flex: 1;\n  min-width: 0;\n  overflow: visible;\n  padding: 4px;\n  position: relative;\n  user-select: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  cursor: ", ";\n  flex: 1;\n  min-width: 0;\n  overflow: visible;\n  padding: 4px;\n  position: relative;\n  user-select: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
+    if (props.$isInTimeDragRange)
+        return props.theme.ui_cpnt_sheet_base;
+    if (props.$isDragOver)
+        return props.theme.ui_cpnt_sheet_base;
+    return 'transparent';
+}, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_divider;
-}, function (_a) {
+}, function (props) { return (props.$isTimeDragging ? 'grabbing' : 'pointer'); }, function (props) { return (props.$isTimeDragging ? 'none' : 'auto'); }, function (_a) {
     var theme = _a.theme;
-    return theme.ui_72;
+    return theme.ui_cpnt_sheet_base;
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -1,4 +1,4 @@
-import type { Schedule } from './types';
+import type { Schedule, Config } from './types';
 import type React from 'react';
 interface MonthlyViewProps {
     getDayTextByDate: (date: Date) => string;
@@ -23,6 +23,7 @@ interface MonthlyViewProps {
     handleScheduleDragEnd?: () => void;
     isDraggable?: boolean;
     onSwitchToWeeklyView?: (date: Date) => void;
+    config?: Config;
 }
 export declare const MonthlyView: React.FC<MonthlyViewProps>;
 export {};