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

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/dist/src/desktop/panels/LocalizedContentModal/LocalizedContentModal.js

@@ -92,7 +92,6 @@ function LocalizedContentModal(_a) {
     var form = (0, react_hook_form_1.useForm)({
         defaultValues: initialValues
     });
-    // 컴포넌트 내부에서
     var watchedValues = (0, react_hook_form_1.useWatch)({
         control: form.control
     });
@@ -135,6 +134,9 @@ function LocalizedContentModal(_a) {
             }
         });
     }); };
+    var handleDelete = function (code) {
+        form.setValue(code, '');
+    };
     var handleApply = function () {
         var formValues = form.getValues();
         if (onApply) {
@@ -145,9 +147,6 @@ function LocalizedContentModal(_a) {
     var handleCancel = function () {
         onClose();
     };
-    var handleDelete = function (code) {
-        form.setValue(code, '');
-    };
     if (!isOpen)
         return null;
     return ((0, jsx_runtime_1.jsx)(DesktopBasicModal_1.DesktopBasicModal, __assign({ titleText: t('str_multilingual_settings'), btnMode: readonly ? 'mbtn_amount1' : 'mbtn_amount2', mBtn1Text: readonly ? t('str_confirm') : t('str_apply'), mBtn2Text: t('str_cancel'), size: size, onClickMBtn1: handleApply, onClickMBtn2: handleCancel }, { children: (0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, __assign({}, form, { children: [originalText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: t('str_original_text'), wordBreak: "keep_all", styleTheme: "subTitleBold", colorTheme: "sysTextPrimary" }), originalFieldType === 'text' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: textFieldLineType === 'tinyeditor' ? ((0, jsx_runtime_1.jsx)(S_ReadonlyContent, { children: (0, jsx_runtime_1.jsx)(HTMLReader_1.HTMLReader, { data: originalText }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: originalText, wordBreak: "keep_all", styleTheme: "body2Regular", colorTheme: "sysTextPrimary" })] })) })), originalFieldType === 'image' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_3.ImageView, __assign({ width: "responsive", height: "responsive" }, imageConfig, { src: originalText }))] })), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" }), (0, jsx_runtime_1.jsx)(components_2.Divider, {}), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" })] })), visibleLanguages === null || visibleLanguages === void 0 ? void 0 : visibleLanguages.map(function (languageCode, index) {

package/package.json

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

package/release-note.md

@@ -1,7 +1,7 @@
-# PDS-DEV-KIT-WEB-TEST Release Notes
-## [v2.7.2]
+# PDS-DEV-KIT-WEB Release Notes
+## [v2.7.3]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
 
-* [FIX] LocalizedContentModal initialValues가 리렌더링 시마다 reset되지 않도록 수정
+* [PDS-1346] 캘린더 시간선, enum수정, 구조 리팩토링

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

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