pds-dev-kit-web-test 2.7.2 → 2.7.3

package/dist/src/desktop/components/Calendar/{CalendarContext.js → context/CalendarContext.js}

@@ -14,8 +14,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalendarProvider = exports.useCalendarContext = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var calendarUtils_1 = require("./calendarUtils");
-var ScheduleItem_1 = require("./ScheduleItem");
+var utils_1 = require("../utils");
 var CalendarContext = (0, react_1.createContext)(null);
 var useCalendarContext = function () {
     var context = (0, react_1.useContext)(CalendarContext);
@@ -35,21 +34,7 @@ var CalendarProvider = function (_a) {
     getSchedulesForDate = _a.getSchedulesForDate, isToday = _a.isToday, isPastDate = _a.isPastDate, getDayTextByDate = _a.getDayTextByDate, 
     // 상태값
     isDragOverDate = _a.isDragOverDate, selectedDate = _a.selectedDate, displayAllDayScheduleMode = _a.displayAllDayScheduleMode;
-    var renderScheduleItem = (0, react_1.useCallback)(function (schedule, extraProps) {
-        if (extraProps === void 0) { extraProps = {}; }
-        var isAllDay = (0, calendarUtils_1.calculateIsAllDay)(new Date(schedule.startDate), new Date(schedule.endDate));
-        var isSelected = selectedSchedules.some(function (s) { return s.id === schedule.id; });
-        return ((0, jsx_runtime_1.jsx)(ScheduleItem_1.ScheduleItem, { schedule: schedule, extraProps: extraProps, onDragStart: handleScheduleDragStart, onDragEnd: handleScheduleDragEnd, onClick: handleScheduleClick, isSelected: isSelected, isAllDay: isAllDay, isDraggable: isDraggable }));
-    }, [
-        selectedSchedules,
-        isDraggable,
-        handleScheduleClick,
-        handleScheduleDragStart,
-        handleScheduleDragEnd
-    ]);
     var value = {
-        // 스케줄 렌더링 관련
-        renderScheduleItem: renderScheduleItem,
         // 스케줄 이벤트 핸들러
         handleScheduleClick: handleScheduleClick,
         handleScheduleDragStart: handleScheduleDragStart,
@@ -65,6 +50,7 @@ var CalendarProvider = function (_a) {
         isToday: isToday,
         isPastDate: isPastDate,
         getDayTextByDate: getDayTextByDate,
+        calculateIsAllDay: utils_1.calculateIsAllDay,
         // 상태값
         selectedSchedules: selectedSchedules,
         isDragOverDate: isDragOverDate,

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

@@ -0,0 +1,16 @@
+import type { Action, Schedule } from '../types/types';
+type TimeSlot = {
+    date: Date;
+    hour: number;
+};
+export declare function useTimeDragSelection({ enabled, schedules, onComplete }: {
+    enabled: boolean;
+    schedules: Schedule[];
+    onComplete: (action: Action) => void;
+}): {
+    onMouseDown: (slot: TimeSlot, e: React.MouseEvent) => void;
+    onMouseEnter: (slot: TimeSlot) => void;
+    isSlotInRange: (slot: TimeSlot) => boolean;
+    dragging: boolean;
+};
+export {};

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimeDragSelection = void 0;
+// src/desktop/components/Calendar/hooks/useTimeDragSelection.ts
+var react_1 = require("react");
+function useTimeDragSelection(_a) {
+    var enabled = _a.enabled, schedules = _a.schedules, onComplete = _a.onComplete;
+    var _b = (0, react_1.useState)(null), start = _b[0], setStart = _b[1];
+    var _c = (0, react_1.useState)(null), end = _c[0], setEnd = _c[1];
+    var _d = (0, react_1.useState)(false), dragging = _d[0], setDragging = _d[1];
+    var toStartOfSlot = function (slot) {
+        var d = new Date(slot.date);
+        d.setHours(slot.hour, 0, 0, 0);
+        return d;
+    };
+    var toEndOfSlot = function (slot) {
+        var d = new Date(slot.date);
+        d.setHours(slot.hour, 59, 59, 999);
+        return d;
+    };
+    var onMouseDown = (0, react_1.useCallback)(function (slot, e) {
+        if (!enabled)
+            return;
+        e.preventDefault();
+        setStart(slot);
+        setEnd(slot);
+        setDragging(true);
+    }, [enabled]);
+    var onMouseEnter = (0, react_1.useCallback)(function (slot) {
+        if (!dragging)
+            return;
+        setEnd(slot);
+    }, [dragging]);
+    var isSlotInRange = (0, react_1.useCallback)(function (slot) {
+        if (!start || !end)
+            return false;
+        var t = toStartOfSlot(slot).getTime();
+        var a = Math.min(toStartOfSlot(start).getTime(), toStartOfSlot(end).getTime());
+        var b = Math.max(toEndOfSlot(start).getTime(), toEndOfSlot(end).getTime());
+        return t >= a && t <= b;
+    }, [start, end]);
+    (0, react_1.useEffect)(function () {
+        if (!dragging)
+            return;
+        var handleMouseUp = function () {
+            if (dragging && start && end && enabled) {
+                var actualStart_1 = new Date(Math.min(toStartOfSlot(start).getTime(), toStartOfSlot(end).getTime()));
+                var actualEnd_1 = new Date(Math.max(toEndOfSlot(start).getTime(), toEndOfSlot(end).getTime()));
+                var schedulesInRange = schedules.filter(function (s) {
+                    var s0 = new Date(s.startDate);
+                    var s1 = new Date(s.endDate);
+                    return s0 <= actualEnd_1 && s1 >= actualStart_1;
+                });
+                var selectedDates = [];
+                var cur = new Date(actualStart_1);
+                cur.setHours(0, 0, 0, 0);
+                var last = new Date(actualEnd_1);
+                last.setHours(0, 0, 0, 0);
+                while (cur <= last) {
+                    selectedDates.push(new Date(cur));
+                    cur.setDate(cur.getDate() + 1);
+                }
+                onComplete({
+                    action: 'DRAG',
+                    target: 'DATE',
+                    dates: selectedDates,
+                    schedules: schedulesInRange,
+                    startDate: actualStart_1.toISOString(),
+                    endDate: actualEnd_1.toISOString()
+                });
+            }
+            setDragging(false);
+            setStart(null);
+            setEnd(null);
+        };
+        document.addEventListener('mouseup', handleMouseUp);
+        return function () { return document.removeEventListener('mouseup', handleMouseUp); };
+    }, [dragging, start, end, enabled, schedules, onComplete]);
+    return { onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, isSlotInRange: isSlotInRange, dragging: dragging };
+}
+exports.useTimeDragSelection = useTimeDragSelection;

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

@@ -1,14 +1,9 @@
-export { AllDaySchedulesSection } from './AllDaySchedulesSection';
+export * from './types/types';
+export * from './context/CalendarContext';
 export { default as Calendar } from './Calendar';
-export { CalendarProvider, useCalendarContext } from './CalendarContext';
-export { DailyView } from './DailyView';
-export { MonthlyView } from './MonthlyView';
-export { ScheduleItem } from './ScheduleItem';
-export { TimeBasedScheduleItem } from './TimeBasedScheduleItem';
-export { WeeklyView } from './WeeklyView';
-export { YearlyView } from './YearlyView';
-export * from './timeFormatUtils';
-export type { CalendarProps, Schedule, CalendarViewType, displayAllDayScheduleMode, StartOfWeek, TodayBtnMode, Config, CalendarAction } from './types';
-export { getLocaleFromLang } from './constants';
-export type { ScheduleItemExtraProps } from './ScheduleItem';
-export type { ScheduleItemExtraProps as CalendarContextExtraProps } from './CalendarContext';
+export * from './views/DailyView';
+export * from './views/WeeklyView';
+export * from './views/MonthlyView';
+export * from './views/YearlyView';
+export { default as CurrentTimeIndicator } from './components/CurrentTimeIndicator';
+export * from './components/Schedule';

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

@@ -17,26 +17,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLocaleFromLang = exports.YearlyView = exports.WeeklyView = exports.TimeBasedScheduleItem = exports.ScheduleItem = exports.MonthlyView = exports.DailyView = exports.useCalendarContext = exports.CalendarProvider = exports.Calendar = exports.AllDaySchedulesSection = void 0;
-var AllDaySchedulesSection_1 = require("./AllDaySchedulesSection");
-Object.defineProperty(exports, "AllDaySchedulesSection", { enumerable: true, get: function () { return AllDaySchedulesSection_1.AllDaySchedulesSection; } });
-var Calendar_1 = require("./Calendar");
+exports.CurrentTimeIndicator = exports.Calendar = void 0;
+__exportStar(require("./types/types"), exports);
+__exportStar(require("./context/CalendarContext"), exports);
+var Calendar_1 = require("./Calendar"); // 필요 시
 Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return __importDefault(Calendar_1).default; } });
-var CalendarContext_1 = require("./CalendarContext");
-Object.defineProperty(exports, "CalendarProvider", { enumerable: true, get: function () { return CalendarContext_1.CalendarProvider; } });
-Object.defineProperty(exports, "useCalendarContext", { enumerable: true, get: function () { return CalendarContext_1.useCalendarContext; } });
-var DailyView_1 = require("./DailyView");
-Object.defineProperty(exports, "DailyView", { enumerable: true, get: function () { return DailyView_1.DailyView; } });
-var MonthlyView_1 = require("./MonthlyView");
-Object.defineProperty(exports, "MonthlyView", { enumerable: true, get: function () { return MonthlyView_1.MonthlyView; } });
-var ScheduleItem_1 = require("./ScheduleItem");
-Object.defineProperty(exports, "ScheduleItem", { enumerable: true, get: function () { return ScheduleItem_1.ScheduleItem; } });
-var TimeBasedScheduleItem_1 = require("./TimeBasedScheduleItem");
-Object.defineProperty(exports, "TimeBasedScheduleItem", { enumerable: true, get: function () { return TimeBasedScheduleItem_1.TimeBasedScheduleItem; } });
-var WeeklyView_1 = require("./WeeklyView");
-Object.defineProperty(exports, "WeeklyView", { enumerable: true, get: function () { return WeeklyView_1.WeeklyView; } });
-var YearlyView_1 = require("./YearlyView");
-Object.defineProperty(exports, "YearlyView", { enumerable: true, get: function () { return YearlyView_1.YearlyView; } });
-__exportStar(require("./timeFormatUtils"), exports);
-var constants_1 = require("./constants");
-Object.defineProperty(exports, "getLocaleFromLang", { enumerable: true, get: function () { return constants_1.getLocaleFromLang; } });
+__exportStar(require("./views/DailyView"), exports);
+__exportStar(require("./views/WeeklyView"), exports);
+__exportStar(require("./views/MonthlyView"), exports);
+__exportStar(require("./views/YearlyView"), exports);
+var CurrentTimeIndicator_1 = require("./components/CurrentTimeIndicator");
+Object.defineProperty(exports, "CurrentTimeIndicator", { enumerable: true, get: function () { return __importDefault(CurrentTimeIndicator_1).default; } });
+__exportStar(require("./components/Schedule"), exports);

package/dist/src/desktop/components/Calendar/{types.d.ts → types/types.d.ts}

@@ -1,5 +1,10 @@
 /// <reference types="react" />
-export type CalendarViewType = 'str_fm_month' | 'str_fm_week' | 'str_fm_day' | 'str_fm_year';
+export declare enum CalendarViewType {
+    MONTH = "month",
+    WEEK = "week",
+    DAY = "day",
+    YEAR = "year"
+}
 export type displayAllDayScheduleMode = 'none' | 'use';
 export type StartOfWeek = 'sunday' | 'monday';
 export type TodayBtnMode = 'none' | 'use';

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarViewType = void 0;
+var CalendarViewType;
+(function (CalendarViewType) {
+    CalendarViewType["MONTH"] = "month";
+    CalendarViewType["WEEK"] = "week";
+    CalendarViewType["DAY"] = "day";
+    CalendarViewType["YEAR"] = "year";
+})(CalendarViewType = exports.CalendarViewType || (exports.CalendarViewType = {}));

package/dist/src/desktop/components/Calendar/{calendarUtils.d.ts → utils/calendarUtils.d.ts}

@@ -1,4 +1,4 @@
-import type { CalendarViewType } from './types';
+import { CalendarViewType } from '../types/types';
 /**
  * 일정이 종일 일정인지 확인하는 함수
  * @param startDate 시작 날짜

package/dist/src/desktop/components/Calendar/{calendarUtils.js → utils/calendarUtils.js}

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.toUTC = exports.calculateDateRange = exports.calculateIsAllDay = void 0;
-var dateHelper_1 = require("../../../common/utils/dateHelper");
+var dateHelper_1 = require("../../../../common/utils/dateHelper");
+var types_1 = require("../types/types");
 /**
  * 일정이 종일 일정인지 확인하는 함수
  * @param startDate 시작 날짜
@@ -22,16 +23,16 @@ var calculateIsAllDay = function (startDate, endDate) {
 exports.calculateIsAllDay = calculateIsAllDay;
 var calculateDateRange = function (viewType, baseDate) {
     switch (viewType) {
-        case 'str_fm_day':
+        case types_1.CalendarViewType.DAY:
             return { startDate: baseDate, endDate: baseDate };
-        case 'str_fm_week': {
+        case types_1.CalendarViewType.WEEK: {
             var start = new Date(baseDate);
             start.setDate(baseDate.getDate() - baseDate.getDay());
             var end = new Date(start);
             end.setDate(start.getDate() + 6);
             return { startDate: start, endDate: end };
         }
-        case 'str_fm_month': {
+        case types_1.CalendarViewType.MONTH: {
             var startDate = new Date(baseDate.getFullYear(), baseDate.getMonth(), 1);
             // 실제 MonthlyView에서 보여지는 날짜 배열을 구함
             var days = dateHelper_1.DateHelper.getCalendarDatesForCalendar(startDate, 'sunday');
@@ -40,7 +41,7 @@ var calculateDateRange = function (viewType, baseDate) {
                 endDate: days[days.length - 1]
             };
         }
-        case 'str_fm_year':
+        case types_1.CalendarViewType.YEAR:
             return {
                 startDate: new Date(baseDate.getFullYear(), 0, 1),
                 endDate: new Date(baseDate.getFullYear(), 11, 31)

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

@@ -0,0 +1,2 @@
+export * from './timeFormatUtils';
+export * from './calendarUtils';

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./timeFormatUtils"), exports);
+__exportStar(require("./calendarUtils"), exports);

package/dist/src/desktop/components/Calendar/{DailyView.d.ts → views/DailyView.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Schedule } from './types';
+import type { Schedule } from '../types/types';
 interface DailyViewProps {
     schedules: Schedule[];
     config?: any;

package/dist/src/desktop/components/Calendar/{DailyView.js → views/DailyView.js}

@@ -37,26 +37,26 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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");
-var AllDaySchedulesSection_1 = require("./AllDaySchedulesSection");
-var CalendarContext_1 = require("./CalendarContext");
-var CurrentTimeIndicator_1 = require("./CurrentTimeIndicator");
-var TimeBasedScheduleItem_1 = require("./TimeBasedScheduleItem");
-var timeFormatUtils_1 = require("./timeFormatUtils");
+var TextLabel_1 = require("../../TextLabel");
+var CurrentTimeIndicator_1 = __importDefault(require("../components/CurrentTimeIndicator"));
+var Schedule_1 = require("../components/Schedule");
+var CalendarContext_1 = require("../context/CalendarContext");
+var useTimeDragSelection_1 = require("../hooks/useTimeDragSelection");
+var timeFormatUtils_1 = require("../utils/timeFormatUtils");
 var DailyView = function (_a) {
+    var _b, _c;
     var schedules = _a.schedules, config = _a.config;
     var i18n = (0, react_i18next_1.useTranslation)('translation').i18n;
-    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 _d = (0, CalendarContext_1.useCalendarContext)(), selectedDate = _d.selectedDate, selectedSchedules = _d.selectedSchedules, displayAllDayScheduleMode = _d.displayAllDayScheduleMode, getSchedulesForDate = _d.getSchedulesForDate, isDragOverDate = _d.isDragOverDate, handleDateDragOver = _d.handleDateDragOver, handleDateDragLeave = _d.handleDateDragLeave, handleDateDrop = _d.handleDateDrop, handleDateClick = _d.handleDateClick, handleDateDrag = _d.handleDateDrag, handleScheduleDragStart = _d.handleScheduleDragStart, handleScheduleDragEnd = _d.handleScheduleDragEnd, handleScheduleClick = _d.handleScheduleClick;
     var currentDateForDaily = [selectedDate][0];
     var HOURS_IN_DAY = Array.from({ length: 24 }, function (_, i) { return i; });
     var getTimeSlotDate = function (baseDate, hour) {
@@ -64,79 +64,23 @@ var DailyView = function (_a) {
         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) {
+    // useTimeDragSelection hook 사용
+    var _e = (0, useTimeDragSelection_1.useTimeDragSelection)({
+        enabled: (_c = (_b = config === null || config === void 0 ? void 0 : config.DATE) === null || _b === void 0 ? void 0 : _b.DRAG) !== null && _c !== void 0 ? _c : false,
+        schedules: schedules,
+        onComplete: handleDateDrag
+    }), onMouseDown = _e.onMouseDown, onMouseEnter = _e.onMouseEnter, isSlotInRange = _e.isSlotInRange, dragging = _e.dragging;
+    // 시간 슬롯을 위한 헬퍼 함수
+    var createTimeSlot = (0, react_1.useCallback)(function (hour) { return ({
+        date: new Date(selectedDate),
+        hour: hour
+    }); }, [selectedDate]);
+    return ((0, jsx_runtime_1.jsxs)(S_DailyContainer, { children: [(0, jsx_runtime_1.jsx)(Schedule_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.default, { show: true, leftOffset: "80px" }), HOURS_IN_DAY.map(function (hour) {
                         var timeSlotDate = getTimeSlotDate(currentDateForDaily, hour);
+                        var timeSlot = createTimeSlot(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, "$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));
+                        var isInDragRange = isSlotInRange(timeSlot);
+                        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": isInDragRange, "$isTimeDragging": dragging, 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 onMouseDown(timeSlot, e); }, onMouseEnter: function () { return onMouseEnter(timeSlot); } }, { children: hour === 0 && ((0, jsx_runtime_1.jsx)(Schedule_1.TimeBasedScheduleItem, { schedules: getSchedulesForDate(currentDateForDaily), selectedSchedules: selectedSchedules, onClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd })) }))] }, hour));
                     })] }))] }));
 };
 exports.DailyView = DailyView;

package/dist/src/desktop/components/Calendar/{MonthlyView.d.ts → views/MonthlyView.d.ts}

@@ -1,4 +1,4 @@
-import type { Schedule, Config } from './types';
+import type { Schedule, Config } from '../types/types';
 import type React from 'react';
 interface MonthlyViewProps {
     getDayTextByDate: (date: Date) => string;

package/dist/src/desktop/components/Calendar/{MonthlyView.js → views/MonthlyView.js}

@@ -31,19 +31,18 @@ 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 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"));
-var TextLabel_1 = require("../TextLabel");
-var CalendarContext_1 = require("./CalendarContext");
-var calendarUtils_1 = require("./calendarUtils");
-var MultiWeekSchedulesLayer_1 = require("./MultiWeekSchedulesLayer");
+var TextLabel_1 = require("../../TextLabel");
+var Schedule_1 = require("../components/Schedule");
+var CalendarContext_1 = require("../context/CalendarContext");
 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, config = _a.config;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
-    var _c = (0, CalendarContext_1.useCalendarContext)(), renderScheduleItem = _c.renderScheduleItem, handleDateDrag = _c.handleDateDrag;
+    var _c = (0, CalendarContext_1.useCalendarContext)(), handleDateDrag = _c.handleDateDrag, calculateIsAllDay = _c.calculateIsAllDay;
     var height = (0, useWindowSize_1.useWindowSize)().height;
     var calendarCellRef = (0, react_1.useRef)(null);
     var _d = (0, react_1.useState)(3), maxSchedulesPerDay = _d[0], setMaxSchedulesPerDay = _d[1];
@@ -163,7 +162,7 @@ var MonthlyView = function (_a) {
                 scheduleStart.setHours(0, 0, 0, 0);
                 scheduleEnd.setHours(0, 0, 0, 0);
                 // All day 이벤트이거나 다중 날짜 이벤트인지 확인
-                var isAllDay = (0, calendarUtils_1.calculateIsAllDay)(new Date(schedule.startDate), new Date(schedule.endDate));
+                var isAllDay = calculateIsAllDay(new Date(schedule.startDate), new Date(schedule.endDate));
                 var isMultiDay = scheduleStart.getTime() !== scheduleEnd.getTime();
                 if (isAllDay || isMultiDay) {
                     // 이벤트가 현재 캘린더 범위와 교차하는지 확인
@@ -432,16 +431,24 @@ var MonthlyView = function (_a) {
                                             'endDate' in schedule)) {
                                             return null;
                                         }
-                                        return ((0, jsx_runtime_1.jsx)(S_VisibleRowContainer, __assign({ "$top": rowIndex * scheduleItemHeight }, { children: renderScheduleItem(schedule, {
-                                                onDragStart: function (e) { return handleScheduleDragStart === null || handleScheduleDragStart === void 0 ? void 0 : handleScheduleDragStart(schedule, e); },
-                                                onDragEnd: function () { return handleScheduleDragEnd === null || handleScheduleDragEnd === void 0 ? void 0 : handleScheduleDragEnd(); }
-                                            }) }), schedule.id));
+                                        return ((0, jsx_runtime_1.jsx)(S_VisibleRowContainer, __assign({ "$top": rowIndex * scheduleItemHeight }, { children: (0, jsx_runtime_1.jsx)(Schedule_1.ScheduleItem, { schedule: schedule, extraProps: {
+                                                    onDragStart: function (e) {
+                                                        return handleScheduleDragStart === null || handleScheduleDragStart === void 0 ? void 0 : handleScheduleDragStart(schedule, e);
+                                                    },
+                                                    onDragEnd: function () { return handleScheduleDragEnd === null || handleScheduleDragEnd === void 0 ? void 0 : handleScheduleDragEnd(); }
+                                                }, onDragStart: handleScheduleDragStart ||
+                                                    (function () {
+                                                        /* no-op */
+                                                    }), onDragEnd: handleScheduleDragEnd ||
+                                                    (function () {
+                                                        /* no-op */
+                                                    }), onClick: handleScheduleClick, isSelected: selectedSchedules.some(function (s) { return s.id === schedule.id; }), isAllDay: calculateIsAllDay(new Date(schedule.startDate), new Date(schedule.endDate)), isDraggable: isDraggable }) }), schedule.id));
                                     });
                                 }), hiddenSchedulesCount > 0 && ((0, jsx_runtime_1.jsxs)(S_MoreSchedulesButton, __assign({ "$top": maxRows * scheduleItemHeight + 6, onClick: function (e) {
                                         e.stopPropagation();
                                         onSwitchToWeeklyView === null || onSwitchToWeeklyView === void 0 ? void 0 : onSwitchToWeeklyView(date);
                                     } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t('str_calendar_schedule_more', { count: hiddenSchedulesCount }), styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })] })))] }))] }), index));
-            }), (0, jsx_runtime_1.jsx)(MultiWeekSchedulesLayer_1.MultiWeekSchedulesLayer, { multiWeekSchedules: getMultiWeekSchedules, selectedSchedules: selectedSchedules, handleScheduleClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, isDraggable: isDraggable, maxSchedulesPerDay: maxSchedulesPerDay })] })));
+            }), (0, jsx_runtime_1.jsx)(Schedule_1.MultiWeekSchedulesLayer, { multiWeekSchedules: getMultiWeekSchedules, selectedSchedules: selectedSchedules, handleScheduleClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, isDraggable: isDraggable, maxSchedulesPerDay: maxSchedulesPerDay })] })));
 };
 exports.MonthlyView = MonthlyView;
 var S_MonthlyGrid = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  gap: 0;\n  grid-template-columns: repeat(7, 1fr);\n  grid-template-rows: auto repeat(6, 1fr); /* \uD5E4\uB354\uB294 auto, \uB098\uBA38\uC9C0 6\uC8FC\uB294 \uB3D9\uC77C\uD55C \uB192\uC774 */\n  height: 100%; /* \uC140 \uAC04\uACA9\uC744 \uC81C\uAC70\uD558\uC5EC \uC774\uBCA4\uD2B8\uAC00 \uC5F0\uACB0\uB418\uC5B4 \uBCF4\uC774\uB3C4\uB85D */\n  overflow-x: hidden; /* \uADF8\uB9AC\uB4DC \uACBD\uACC4\uB97C \uB118\uB294 \uC694\uC18C\uB97C \uC228\uAE40 */\n  position: relative;\n"], ["\n  display: grid;\n  gap: 0;\n  grid-template-columns: repeat(7, 1fr);\n  grid-template-rows: auto repeat(6, 1fr); /* \uD5E4\uB354\uB294 auto, \uB098\uBA38\uC9C0 6\uC8FC\uB294 \uB3D9\uC77C\uD55C \uB192\uC774 */\n  height: 100%; /* \uC140 \uAC04\uACA9\uC744 \uC81C\uAC70\uD558\uC5EC \uC774\uBCA4\uD2B8\uAC00 \uC5F0\uACB0\uB418\uC5B4 \uBCF4\uC774\uB3C4\uB85D */\n  overflow-x: hidden; /* \uADF8\uB9AC\uB4DC \uACBD\uACC4\uB97C \uB118\uB294 \uC694\uC18C\uB97C \uC228\uAE40 */\n  position: relative;\n"])));

package/dist/src/desktop/components/Calendar/{WeeklyView.d.ts → views/WeeklyView.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Schedule } from './types';
+import type { Schedule } from '../types/types';
 interface WeeklyViewProps {
     startOfWeek: 'sunday' | 'monday';
     schedules: Schedule[];