pds-dev-kit-web 2.2.245 → 2.2.248

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

@@ -42,21 +42,20 @@ exports.WeeklyView = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
-var dateHelper_1 = require("../../../common/utils/dateHelper");
+var dateHelper_1 = require("../../../../common/utils/dateHelper");
 var styled_components_1 = __importStar(require("styled-components"));
-var TextLabel_1 = require("../TextLabel");
-var AllDaySchedulesSection_1 = require("./AllDaySchedulesSection");
-var 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 = require("../components/CurrentTimeIndicator/CurrentTimeIndicator");
+var Schedule_1 = require("../components/Schedule");
+var AllDaySchedulesSection_1 = require("../components/Schedule/AllDaySchedulesSection");
+var CalendarContext_1 = require("../context/CalendarContext");
+var useTimeDragSelection_1 = require("../hooks/useTimeDragSelection");
+var timeFormatUtils_1 = require("../utils/timeFormatUtils");
 var WeeklyView = function (_a) {
+    var _b, _c;
     var startOfWeek = _a.startOfWeek, schedules = _a.schedules, config = _a.config;
-    var _b = (0, react_i18next_1.useTranslation)('translation'), t = _b.t, i18n = _b.i18n;
-    var _c = (0, CalendarContext_1.useCalendarContext)(), selectedDate = _c.selectedDate, selectedSchedules = _c.selectedSchedules, displayAllDayScheduleMode = _c.displayAllDayScheduleMode, getSchedulesForDate = _c.getSchedulesForDate, isToday = _c.isToday, isDragOverDate = _c.isDragOverDate, handleDateDragOver = _c.handleDateDragOver, handleDateDragLeave = _c.handleDateDragLeave, handleDateDrop = _c.handleDateDrop, handleDateClick = _c.handleDateClick, handleDateDrag = _c.handleDateDrag, handleScheduleDragStart = _c.handleScheduleDragStart, handleScheduleDragEnd = _c.handleScheduleDragEnd, isDraggable = _c.isDraggable, handleScheduleClick = _c.handleScheduleClick, getDayTextByDate = _c.getDayTextByDate;
-    var _d = (0, react_1.useState)(null), timeSelectionStart = _d[0], setTimeSelectionStart = _d[1];
-    var _e = (0, react_1.useState)(null), timeSelectionEnd = _e[0], setTimeSelectionEnd = _e[1];
-    var _f = (0, react_1.useState)(false), isTimeDragging = _f[0], setIsTimeDragging = _f[1];
+    var _d = (0, react_i18next_1.useTranslation)('translation'), t = _d.t, i18n = _d.i18n;
+    var _e = (0, CalendarContext_1.useCalendarContext)(), selectedDate = _e.selectedDate, selectedSchedules = _e.selectedSchedules, displayAllDayScheduleMode = _e.displayAllDayScheduleMode, getSchedulesForDate = _e.getSchedulesForDate, isToday = _e.isToday, isDragOverDate = _e.isDragOverDate, handleDateDragOver = _e.handleDateDragOver, handleDateDragLeave = _e.handleDateDragLeave, handleDateDrop = _e.handleDateDrop, handleDateClick = _e.handleDateClick, handleDateDrag = _e.handleDateDrag, handleScheduleDragStart = _e.handleScheduleDragStart, handleScheduleDragEnd = _e.handleScheduleDragEnd, isDraggable = _e.isDraggable, handleScheduleClick = _e.handleScheduleClick, getDayTextByDate = _e.getDayTextByDate;
     var calendarDates = (0, react_1.useMemo)(function () {
         var dates = [];
         var startIndex = startOfWeek === 'monday' ? 1 : 0;
@@ -67,88 +66,17 @@ var WeeklyView = function (_a) {
         }
         return dates;
     }, [selectedDate, startOfWeek]);
-    // 시간 드래그 시작
-    var handleTimeMouseDown = (0, react_1.useCallback)(function (date, 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();
-        var selection = { date: date, hour: hour };
-        setTimeSelectionStart(selection);
-        setTimeSelectionEnd(selection);
-        setIsTimeDragging(true);
-    }, [config]);
-    // 시간 드래그 중
-    var handleTimeMouseEnter = (0, react_1.useCallback)(function (date, hour) {
-        if (!isTimeDragging)
-            return;
-        setTimeSelectionEnd({ date: date, hour: hour });
-    }, [isTimeDragging]);
-    // 드래그 종료 시 콜백 호출
-    (0, react_1.useEffect)(function () {
-        var handleMouseUp = function () {
-            var _a;
-            if (isTimeDragging && timeSelectionStart && timeSelectionEnd && ((_a = config === null || config === void 0 ? void 0 : config.DATE) === null || _a === void 0 ? void 0 : _a.DRAG)) {
-                // 선택된 시간 범위 계산
-                var startDateTime = new Date(timeSelectionStart.date);
-                startDateTime.setHours(timeSelectionStart.hour, 0, 0, 0);
-                var endDateTime = new Date(timeSelectionEnd.date);
-                endDateTime.setHours(timeSelectionEnd.hour, 59, 59, 999);
-                // 실제 시작/종료 시간 (순서 보정)
-                var actualStartTime_1 = new Date(Math.min(startDateTime.getTime(), endDateTime.getTime()));
-                var actualEndTime_1 = new Date(Math.max(startDateTime.getTime(), endDateTime.getTime()));
-                // 선택된 시간 범위에 포함되는 스케줄들 찾기
-                var schedulesInRange_1 = [];
-                schedules.forEach(function (schedule) {
-                    var scheduleStart = new Date(schedule.startDate);
-                    var scheduleEnd = new Date(schedule.endDate);
-                    // 스케줄이 선택된 시간 범위와 겹치는지 확인
-                    if (scheduleStart <= actualEndTime_1 && scheduleEnd >= actualStartTime_1) {
-                        schedulesInRange_1.push(schedule);
-                    }
-                });
-                // 선택된 날짜들 생성 (시간 범위에 포함된 모든 날짜)
-                var selectedDates = [];
-                var currentDate = new Date(actualStartTime_1);
-                currentDate.setHours(0, 0, 0, 0);
-                var endDate = new Date(actualEndTime_1);
-                endDate.setHours(0, 0, 0, 0);
-                while (currentDate <= endDate) {
-                    selectedDates.push(new Date(currentDate));
-                    currentDate.setDate(currentDate.getDate() + 1);
-                }
-                handleDateDrag({
-                    action: 'DRAG',
-                    target: 'DATE',
-                    dates: selectedDates,
-                    schedules: schedulesInRange_1,
-                    startDate: actualStartTime_1.toISOString(),
-                    endDate: actualEndTime_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]);
-    // 선택한 시간이 드래그 범위에 포함되는지 확인
-    var isTimeSlotInDragRange = (0, react_1.useCallback)(function (date, hour) {
-        if (!timeSelectionStart || !timeSelectionEnd)
-            return false;
-        var slotDateTime = new Date(date);
-        slotDateTime.setHours(hour, 0, 0, 0);
-        var startDateTime = new Date(timeSelectionStart.date);
-        startDateTime.setHours(timeSelectionStart.hour, 0, 0, 0);
-        var endDateTime = new Date(timeSelectionEnd.date);
-        endDateTime.setHours(timeSelectionEnd.hour, 0, 0, 0);
-        var actualStartTime = Math.min(startDateTime.getTime(), endDateTime.getTime());
-        var actualEndTime = Math.max(startDateTime.getTime(), endDateTime.getTime());
-        return slotDateTime.getTime() >= actualStartTime && slotDateTime.getTime() <= actualEndTime;
-    }, [timeSelectionStart, timeSelectionEnd]);
+    // useTimeDragSelection hook 사용
+    var _f = (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 = _f.onMouseDown, onMouseEnter = _f.onMouseEnter, isSlotInRange = _f.isSlotInRange, dragging = _f.dragging;
+    // 시간 슬롯을 위한 헬퍼 함수
+    var createTimeSlot = (0, react_1.useCallback)(function (date, hour) { return ({
+        date: new Date(date),
+        hour: hour
+    }); }, []);
     return ((0, jsx_runtime_1.jsxs)(S_WeeklyContainer, { children: [(0, jsx_runtime_1.jsxs)(S_WeeklyHeader, { children: [(0, jsx_runtime_1.jsx)(S_TimeColumnHeader, {}), calendarDates.map(function (date, index) {
                         var dayText = getDayTextByDate(date);
                         var monthNames = [
@@ -176,8 +104,10 @@ var WeeklyView = function (_a) {
                     })] }), (0, jsx_runtime_1.jsx)(AllDaySchedulesSection_1.AllDaySchedulesSection, { calendarDates: calendarDates, displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop }), (0, jsx_runtime_1.jsxs)(S_WeeklyTimeGrid, __assign({ "$displayAllDayScheduleMode": displayAllDayScheduleMode }, { children: [(0, jsx_runtime_1.jsx)(CurrentTimeIndicator_1.CurrentTimeIndicator, { show: true, leftOffset: "80px" }), Array.from({ length: 24 }, function (_unused, hour) { return ((0, jsx_runtime_1.jsxs)(S_TimeRow, { children: [(0, jsx_runtime_1.jsx)(S_TimeLabel, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: (0, timeFormatUtils_1.formatTimeWithLocale)(hour, 0, i18n.language, t), colorTheme: "sysTextTertiary" }) }), (0, jsx_runtime_1.jsx)(S_TimeSlots, { children: calendarDates.map(function (date, dayIndex) {
                                     var timeSlotDate = new Date(date);
                                     timeSlotDate.setHours(hour, 0, 0, 0);
+                                    var timeSlot = createTimeSlot(date, hour);
                                     var isDragOver = (isDragOverDate === null || isDragOverDate === void 0 ? void 0 : isDragOverDate.getTime()) === timeSlotDate.getTime();
-                                    return ((0, jsx_runtime_1.jsx)(S_TimeSlot, __assign({ "$isDragOver": isDragOver, "$isDraggable": isDraggable, "$isInTimeDragRange": isTimeSlotInDragRange(date, hour), "$isTimeDragging": isTimeDragging, onClick: function () { return handleDateClick(date, {}); }, onDragOver: function (e) { return handleDateDragOver(timeSlotDate, e); }, onDragLeave: handleDateDragLeave, onDrop: function (e) { return handleDateDrop(timeSlotDate, e); }, onMouseDown: function (e) { return handleTimeMouseDown(date, hour, e); }, onMouseEnter: function () { return handleTimeMouseEnter(date, hour); } }, { children: hour === 0 && ((0, jsx_runtime_1.jsx)(TimeBasedScheduleItem_1.TimeBasedScheduleItem, { schedules: getSchedulesForDate(date), selectedSchedules: selectedSchedules, isDraggable: isDraggable, onClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd })) }), dayIndex));
+                                    var isInDragRange = isSlotInRange(timeSlot);
+                                    return ((0, jsx_runtime_1.jsx)(S_TimeSlot, __assign({ "$isDragOver": isDragOver, "$isDraggable": isDraggable, "$isInTimeDragRange": isInDragRange, "$isTimeDragging": dragging, onClick: function () { return handleDateClick(date, {}); }, 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(date), selectedSchedules: selectedSchedules, isDraggable: isDraggable, onClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd })) }), dayIndex));
                                 }) })] }, hour)); })] }))] }));
 };
 exports.WeeklyView = WeeklyView;

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

@@ -1,4 +1,4 @@
-import type { Schedule } from './types';
+import type { Schedule } from '../types/types';
 import type React from 'react';
 interface YearlyViewProps {
     selectedDate: Date;

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

@@ -22,7 +22,8 @@ exports.YearlyView = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_i18next_1 = require("react-i18next");
 var styled_components_1 = __importDefault(require("styled-components"));
-var TextLabel_1 = require("../TextLabel");
+var TextLabel_1 = require("../../TextLabel");
+var constants_1 = require("../constants");
 var YearlyView = function (_a) {
     var selectedDate = _a.selectedDate, getMonthDates = _a.getMonthDates, getDayTextByDate = _a.getDayTextByDate, startOfWeek = _a.startOfWeek, isToday = _a.isToday, handleDateClick = _a.handleDateClick, getSchedulesForDate = _a.getSchedulesForDate;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
@@ -48,7 +49,7 @@ var YearlyView = function (_a) {
     };
     return ((0, jsx_runtime_1.jsx)(S_YearlyGrid, { children: Array.from({ length: 12 }, function (_unused, monthIndex) {
             var monthDates = getMonthDates(currentYear, monthIndex);
-            return ((0, jsx_runtime_1.jsxs)(S_YearlyMonth, { children: [(0, jsx_runtime_1.jsx)(S_YearlyMonthHeader, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t("calendar_month_".concat(monthIndex + 1)), styleTheme: "body1Bold", colorTheme: "sysTextBrandPrimary" }) }), (0, jsx_runtime_1.jsxs)(S_YearlyMiniCalendar, { children: [(0, jsx_runtime_1.jsx)(S_YearlyDayHeaders, { children: orderedDayTexts.map(function (day, index) { return ((0, jsx_runtime_1.jsx)(S_YearlyDayHeader, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: day, styleTheme: "caption2Regular", textAlign: "center", colorTheme: "sysTextTertiary" }) }, "".concat(day, "-").concat(index))); }) }), (0, jsx_runtime_1.jsx)(S_YearlyDatesGrid, { children: monthDates.map(function (date, dateIndex) {
+            return ((0, jsx_runtime_1.jsxs)(S_YearlyMonth, { children: [(0, jsx_runtime_1.jsx)(S_YearlyMonthHeader, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t((0, constants_1.getMonthStringKey)(monthIndex + 1)), styleTheme: "body1Bold", colorTheme: "sysTextBrandPrimary" }) }), (0, jsx_runtime_1.jsxs)(S_YearlyMiniCalendar, { children: [(0, jsx_runtime_1.jsx)(S_YearlyDayHeaders, { children: orderedDayTexts.map(function (day, index) { return ((0, jsx_runtime_1.jsx)(S_YearlyDayHeader, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: day, styleTheme: "caption2Regular", textAlign: "center", colorTheme: "sysTextTertiary" }) }, "".concat(day, "-").concat(index))); }) }), (0, jsx_runtime_1.jsx)(S_YearlyDatesGrid, { children: monthDates.map(function (date, dateIndex) {
                                     var isCurrentMonth = date.getMonth() === monthIndex;
                                     var isTodayDate = isToday(date);
                                     var hasSchedule = getSchedulesForDate(date).length > 0;

package/package.json

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

package/release-note.md

@@ -1,7 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.245]
+## [v2.2.248]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
 
-* LocalizedButton - 이미지 업로드 및 삭제 시 이미지뷰 리렌더링 되도록 수정
+* [PDS-1346] dependency recycle 에러 수정

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

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });