pds-dev-kit-web-test 2.5.507 → 2.5.509

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -35,7 +35,7 @@
35
35
  "str_3892": "Sat",
36
36
  "str_3893": "Sun",
37
37
  "calendar_all_day": "All day",
38
- "str_calendar_schedule_more": "more",
38
+ "str_calendar_schedule_more": "{{count}} more",
39
39
  "str_calendar_today": "Today",
40
40
  "calendar_month_1": "Jan",
41
41
  "calendar_month_2": "Feb",
@@ -76,6 +76,11 @@
76
76
  "str_9071": "Please enter the text in the appropriate language for your country.",
77
77
  "str_original_text": "Original Text",
78
78
  "str_apply": "Apply",
79
- "str_cancel": "Cancel"
79
+ "str_cancel": "Cancel",
80
+ "str_calendar_weekly_date": "{{month}}-{{date}} {{day}}",
81
+ "str_fm_year": "Year",
82
+ "str_fm_month": "Month",
83
+ "str_fm_day": "Day",
84
+ "str_fm_week": "Week"
80
85
  }
81
86
  }
@@ -35,7 +35,7 @@
35
35
  "str_3892": "Sat",
36
36
  "str_3893": "Sun",
37
37
  "calendar_all_day": "Todo el día",
38
- "str_calendar_schedule_more": "más",
38
+ "str_calendar_schedule_more": "{{count}} más",
39
39
  "str_calendar_today": "Hoy",
40
40
  "calendar_month_1": "Ene",
41
41
  "calendar_month_2": "Feb",
@@ -75,6 +75,12 @@
75
75
  "str_9071": "Por favor, ingrese el texto en el idioma apropiado para su país.",
76
76
  "str_original_text": "Texto Original",
77
77
  "str_apply": "Aplicar",
78
- "str_cancel": "Cancelar"
78
+ "str_cancel": "Cancelar",
79
+ "calendar_date_format": "{{day}} ({{dayText}})",
80
+ "str_calendar_weekly_date": "{{month}}/{{date}} {{day}}",
81
+ "str_fm_year": "Año",
82
+ "str_fm_month": "Mes",
83
+ "str_fm_day": "Día",
84
+ "str_fm_week": "Principal"
79
85
  }
80
86
  }
@@ -35,7 +35,7 @@
35
35
  "str_3892": "Sat",
36
36
  "str_3893": "Sun",
37
37
  "calendar_all_day": "Buong araw",
38
- "str_calendar_schedule_more": "pa",
38
+ "str_calendar_schedule_more": "{{count}} pa",
39
39
  "str_calendar_today": "Ngayon",
40
40
  "calendar_month_1": "Ene",
41
41
  "calendar_month_2": "Peb",
@@ -75,6 +75,12 @@
75
75
  "str_9071": "Mangyaring ilagay ang teksto sa naaangkop na wika para sa inyong bansa.",
76
76
  "str_original_text": "Orihinal na Teksto",
77
77
  "str_apply": "Apply",
78
- "str_cancel": "Cancel"
78
+ "str_cancel": "Cancel",
79
+ "calendar_date_format": "{{day}} ({{dayText}})",
80
+ "str_calendar_weekly_date": "{{month}}/{{date}} {{day}}",
81
+ "str_fm_year": "Taon",
82
+ "str_fm_month": "Buwan",
83
+ "str_fm_day": "Araw",
84
+ "str_fm_week": "Linggo"
79
85
  }
80
86
  }
@@ -78,6 +78,11 @@ declare const locale: {
78
78
  str_original_text: string;
79
79
  str_apply: string;
80
80
  str_cancel: string;
81
+ str_calendar_weekly_date: string;
82
+ str_fm_year: string;
83
+ str_fm_month: string;
84
+ str_fm_day: string;
85
+ str_fm_week: string;
81
86
  };
82
87
  };
83
88
  readonly en: {
@@ -159,6 +164,11 @@ declare const locale: {
159
164
  str_original_text: string;
160
165
  str_apply: string;
161
166
  str_cancel: string;
167
+ str_calendar_weekly_date: string;
168
+ str_fm_year: string;
169
+ str_fm_month: string;
170
+ str_fm_day: string;
171
+ str_fm_week: string;
162
172
  };
163
173
  };
164
174
  readonly ja: {
@@ -240,6 +250,11 @@ declare const locale: {
240
250
  str_original_text: string;
241
251
  str_apply: string;
242
252
  str_cancel: string;
253
+ str_calendar_weekly_date: string;
254
+ str_fm_year: string;
255
+ str_fm_month: string;
256
+ str_fm_day: string;
257
+ str_fm_week: string;
243
258
  };
244
259
  };
245
260
  readonly es: {
@@ -320,6 +335,12 @@ declare const locale: {
320
335
  str_original_text: string;
321
336
  str_apply: string;
322
337
  str_cancel: string;
338
+ calendar_date_format: string;
339
+ str_calendar_weekly_date: string;
340
+ str_fm_year: string;
341
+ str_fm_month: string;
342
+ str_fm_day: string;
343
+ str_fm_week: string;
323
344
  };
324
345
  };
325
346
  readonly 'zh-cn': {
@@ -401,6 +422,11 @@ declare const locale: {
401
422
  str_original_text: string;
402
423
  str_apply: string;
403
424
  str_cancel: string;
425
+ str_calendar_weekly_date: string;
426
+ str_fm_year: string;
427
+ str_fm_month: string;
428
+ str_fm_day: string;
429
+ str_fm_week: string;
404
430
  };
405
431
  };
406
432
  readonly 'zh-tw': {
@@ -482,6 +508,11 @@ declare const locale: {
482
508
  str_original_text: string;
483
509
  str_apply: string;
484
510
  str_cancel: string;
511
+ str_calendar_weekly_date: string;
512
+ str_fm_year: string;
513
+ str_fm_month: string;
514
+ str_fm_day: string;
515
+ str_fm_week: string;
485
516
  };
486
517
  };
487
518
  readonly fil: {
@@ -562,6 +593,12 @@ declare const locale: {
562
593
  str_original_text: string;
563
594
  str_apply: string;
564
595
  str_cancel: string;
596
+ calendar_date_format: string;
597
+ str_calendar_weekly_date: string;
598
+ str_fm_year: string;
599
+ str_fm_month: string;
600
+ str_fm_day: string;
601
+ str_fm_week: string;
565
602
  };
566
603
  };
567
604
  };
@@ -35,7 +35,7 @@
35
35
  "str_3892": "土",
36
36
  "str_3893": "日",
37
37
  "calendar_all_day": "終日",
38
- "str_calendar_schedule_more": "件以上",
38
+ "str_calendar_schedule_more": "{{count}}件以上",
39
39
  "str_calendar_today": "今日",
40
40
  "calendar_month_1": "1月",
41
41
  "calendar_month_2": "2月",
@@ -76,6 +76,11 @@
76
76
  "str_9071": "国に適した言語を入力してください。",
77
77
  "str_original_text": "原文",
78
78
  "str_apply": "適用",
79
- "str_cancel": "キャンセル"
79
+ "str_cancel": "キャンセル",
80
+ "str_calendar_weekly_date": "{{month}}月{{date}}日 ({{day}})",
81
+ "str_fm_year": "年",
82
+ "str_fm_month": "月",
83
+ "str_fm_day": "日",
84
+ "str_fm_week": "週"
80
85
  }
81
86
  }
@@ -35,7 +35,7 @@
35
35
  "str_3892": "토",
36
36
  "str_3893": "일",
37
37
  "calendar_all_day": "종일",
38
- "str_calendar_schedule_more": "개 더보기",
38
+ "str_calendar_schedule_more": "{{count}}개 더보기",
39
39
  "str_calendar_today": "오늘",
40
40
  "calendar_month_1": "1월",
41
41
  "calendar_month_2": "2월",
@@ -54,12 +54,12 @@
54
54
  "calendar_duration_hour": "시간",
55
55
  "calendar_duration_hours": "시간",
56
56
  "str_fm_datetime_noon": "정오",
57
- "str_calendar_daily_header": "{{year}}년 {{month}} {{day}}일",
57
+ "str_calendar_daily_header": "{{year}}년 {{month}} {{day}}일",
58
58
  "calendar_header_weekly_same_month": "{{month}} {{startDay}}일 - {{endDay}}일",
59
59
  "calendar_header_weekly_diff_month": "{{startMonth}} {{startDay}}일 - {{endMonth}} {{endDay}}일",
60
60
  "str_calendar_yearly_header": "{{year}}년",
61
- "str_calendar_monthly_header": "{{year}}년 {{month}}",
62
- "str_calendar_weekly_header": "{{year}}년 {{month}}",
61
+ "str_calendar_monthly_header": "{{year}}년 {{month}}",
62
+ "str_calendar_weekly_header": "{{year}}년 {{month}}",
63
63
  "calendar_view_monthly": "월간",
64
64
  "calendar_view_weekly": "주간",
65
65
  "calendar_view_daily": "일간",
@@ -76,6 +76,11 @@
76
76
  "str_9071": "국가에 맞는 언어를 입력해 주세요.",
77
77
  "str_original_text": "원문",
78
78
  "str_apply": "적용",
79
- "str_cancel": "취소"
79
+ "str_cancel": "취소",
80
+ "str_calendar_weekly_date": "{{month}}월 {{date}}일 ({{day}})",
81
+ "str_fm_year": "년",
82
+ "str_fm_month": "월",
83
+ "str_fm_day": "일",
84
+ "str_fm_week": "주"
80
85
  }
81
86
  }
@@ -35,7 +35,7 @@
35
35
  "str_3892": "Sat",
36
36
  "str_3893": "Sun",
37
37
  "calendar_all_day": "全天",
38
- "str_calendar_schedule_more": "更多",
38
+ "str_calendar_schedule_more": "{{count}} 更多",
39
39
  "str_calendar_today": "今天",
40
40
  "calendar_month_1": "1月",
41
41
  "calendar_month_2": "2月",
@@ -76,6 +76,11 @@
76
76
  "str_9071": "请输入适合您国家的语言。",
77
77
  "str_original_text": "原文",
78
78
  "str_apply": "应用",
79
- "str_cancel": "取消"
79
+ "str_cancel": "取消",
80
+ "str_calendar_weekly_date": "{{month}}月{{date}}日 ({{day}})",
81
+ "str_fm_year": "年份",
82
+ "str_fm_month": "月",
83
+ "str_fm_day": "日",
84
+ "str_fm_week": "周"
80
85
  }
81
86
  }
@@ -35,7 +35,7 @@
35
35
  "str_3892": "Sat",
36
36
  "str_3893": "Sun",
37
37
  "calendar_all_day": "全天",
38
- "str_calendar_schedule_more": "更多",
38
+ "str_calendar_schedule_more": "{{count}} 更多",
39
39
  "str_calendar_today": "今天",
40
40
  "calendar_month_1": "1月",
41
41
  "calendar_month_2": "2月",
@@ -76,6 +76,11 @@
76
76
  "str_9071": "請輸入適合您國家的語言。",
77
77
  "str_original_text": "原文",
78
78
  "str_apply": "應用",
79
- "str_cancel": "取消"
79
+ "str_cancel": "取消",
80
+ "str_calendar_weekly_date": "{{month}}月{{date}}日 ({{day}})",
81
+ "str_fm_year": "年份",
82
+ "str_fm_month": "月",
83
+ "str_fm_day": "日",
84
+ "str_fm_week": "週"
80
85
  }
81
86
  }
@@ -12,5 +12,5 @@ type BasicFormGroupProps = {
12
12
  multilingualBtnState?: 'normal' | 'disabled';
13
13
  multilingualConfig?: MultilingualConfig;
14
14
  };
15
- declare const _default: import("react").ForwardRefExoticComponent<BasicFormGroupProps & import("react").RefAttributes<HTMLInputElement>>;
15
+ declare const _default: import("react").ForwardRefExoticComponent<BasicFormGroupProps & import("react").RefAttributes<unknown>>;
16
16
  export default _default;
@@ -24,7 +24,7 @@ var components_1 = require("../../components");
24
24
  var MultilingualModal_1 = __importDefault(require("../../panels/MultilingualModal"));
25
25
  var components_2 = require("../../../hybrid/components");
26
26
  var styled_components_1 = __importDefault(require("styled-components"));
27
- function BasicFormGroup(_a, ref) {
27
+ function BasicFormGroup(_a) {
28
28
  var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, _c = _a.headerSize, headerSize = _c === void 0 ? 'rlarge' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm, _d = _a.titleRequirementMode, titleRequirementMode = _d === void 0 ? 'none' : _d, _e = _a.multilingualBtnMode, multilingualBtnMode = _e === void 0 ? 'none' : _e, _f = _a.multilingualBtnState, multilingualBtnState = _f === void 0 ? 'normal' : _f, multilingualConfig = _a.multilingualConfig;
29
29
  var _g = (0, react_1.useState)(false), isMultiLanguageModalOpen = _g[0], setIsMultiLanguageModalOpen = _g[1];
30
30
  var _h = (0, react_1.useState)(false), hasMultilingualValues = _h[0], setHasMultilingualValues = _h[1];
@@ -69,7 +69,7 @@ function BasicFormGroup(_a, ref) {
69
69
  };
70
70
  return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [titleText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_TitleTextWrapper, __assign({ "$headerSize": headerSize }, { children: [(0, jsx_runtime_1.jsxs)(S_TitleText, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), titleRequirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }))] }), multilingualBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(S_MultilingualButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.IconButton, { iconFillType: "line", iconName: "ic_translate", baseSize: "small", shapeType: "round", baseColorKey: "ui_cpnt_button_fill_base_default", iconColorKey: hasMultilingualValues
71
71
  ? 'ui_cpnt_button_icon_primary'
72
- : 'ui_cpnt_button_icon_disabled', state: multilingualBtnState, onClick: multilingualBtnState === 'normal' ? handleLanguageButtonClick : undefined }) }))] })), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" })] })), multilingualBtnMode === 'use' && multilingualConfig && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { ref: ref, type: "hidden", id: "hiddenInput_".concat(multilingualConfig.hiddenInputId), name: multilingualConfig.hiddenInputId, value: hiddenInputValue }), (0, jsx_runtime_1.jsx)(MultilingualModal_1.default, { isOpen: isMultiLanguageModalOpen, onClose: handleLanguageModalClose, config: multilingualConfig, onHiddenInputUpdate: handleHiddenInputUpdate })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
72
+ : 'ui_cpnt_button_icon_disabled', state: multilingualBtnState, onClick: multilingualBtnState === 'normal' ? handleLanguageButtonClick : undefined }) }))] })), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" })] })), multilingualBtnMode === 'use' && multilingualConfig && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", id: "hiddenInput_".concat(multilingualConfig.hiddenInputId), name: multilingualConfig.hiddenInputId, value: hiddenInputValue }), (0, jsx_runtime_1.jsx)(MultilingualModal_1.default, { isOpen: isMultiLanguageModalOpen, onClose: handleLanguageModalClose, config: multilingualConfig, onHiddenInputUpdate: handleHiddenInputUpdate })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
73
73
  }
74
74
  var S_TitleTextWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: ", ";\n"], ["\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: ", ";\n"])), function (_a) {
75
75
  var $headerSize = _a.$headerSize;
@@ -43,25 +43,45 @@ var ScheduleItem_1 = require("./ScheduleItem");
43
43
  var WeeklyView_1 = require("./WeeklyView");
44
44
  var YearlyView_1 = require("./YearlyView");
45
45
  var Calendar = function (_a) {
46
- var _b = _a.defaultViewType, defaultViewType = _b === void 0 ? 'MONTHLY' : _b, _c = _a.viewTypes, viewTypes = _c === void 0 ? ['MONTHLY', 'WEEKLY', 'DAILY', 'YEARLY'] : _c, _d = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _d === void 0 ? 'use' : _d, _e = _a.startOfWeek, startOfWeek = _e === void 0 ? 'sunday' : _e, _f = _a.todayBtnMode, todayBtnMode = _f === void 0 ? 'use' : _f, _g = _a.schedules, schedules = _g === void 0 ? [] : _g, config = _a.config, onActionDispatch = _a.onActionDispatch;
46
+ var _b;
47
+ 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 ? 'use' : _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;
48
+ // 다국어 키를 CalendarViewType으로 매핑하는 함수
49
+ var mapI18nKeyToViewType = function (key) {
50
+ switch (key) {
51
+ case 'str_fm_month':
52
+ return 'MONTHLY';
53
+ case 'str_fm_week':
54
+ return 'WEEKLY';
55
+ case 'str_fm_day':
56
+ return 'DAILY';
57
+ case 'str_fm_year':
58
+ return 'YEARLY';
59
+ default:
60
+ return key;
61
+ }
62
+ };
63
+ // 다국어 키를 받아서 내부적으로 매핑
64
+ var actualDefaultViewType = mapI18nKeyToViewType(defaultViewType);
65
+ var actualViewTypes = viewTypes.map(mapI18nKeyToViewType);
47
66
  var t = (0, react_i18next_1.useTranslation)().t;
48
- var _h = (0, react_1.useState)(defaultViewType), currentViewType = _h[0], setCurrentViewType = _h[1];
49
- var _j = (0, react_1.useState)(new Date()), selectedDate = _j[0], setSelectedDate = _j[1];
50
- var _k = (0, react_1.useState)(null), dragStartDate = _k[0], setDragStartDate = _k[1];
51
- var _l = (0, react_1.useState)(null), dragEndDate = _l[0], setDragEndDate = _l[1];
52
- var _m = (0, react_1.useState)(false), isDragging = _m[0], setIsDragging = _m[1];
53
- var _o = (0, react_1.useState)(null), draggedSchedule = _o[0], setDraggedSchedule = _o[1];
54
- var _p = (0, react_1.useState)(null), isDragOverDate = _p[0], setIsDragOverDate = _p[1];
55
- var _q = (0, react_1.useState)([]), selectedSchedules = _q[0], setSelectedSchedules = _q[1];
56
- var _r = (0, react_1.useState)([]), selectedDates = _r[0], setSelectedDates = _r[1];
57
- var _s = (0, react_1.useState)(null), lastSelectedDate = _s[0], setLastSelectedDate = _s[1];
67
+ var _j = (0, react_1.useState)(actualDefaultViewType), currentViewType = _j[0], setCurrentViewType = _j[1];
68
+ var _k = (0, react_1.useState)(new Date()), selectedDate = _k[0], setSelectedDate = _k[1];
69
+ var _l = (0, react_1.useState)(null), dragStartDate = _l[0], setDragStartDate = _l[1];
70
+ var _m = (0, react_1.useState)(null), dragEndDate = _m[0], setDragEndDate = _m[1];
71
+ var _o = (0, react_1.useState)(false), isDragging = _o[0], setIsDragging = _o[1];
72
+ var _p = (0, react_1.useState)(null), draggedSchedule = _p[0], setDraggedSchedule = _p[1];
73
+ var _q = (0, react_1.useState)(null), isDragOverDate = _q[0], setIsDragOverDate = _q[1];
74
+ var _r = (0, react_1.useState)([]), selectedSchedules = _r[0], setSelectedSchedules = _r[1];
75
+ var _s = (0, react_1.useState)([]), selectedDates = _s[0], setSelectedDates = _s[1];
76
+ var _t = (0, react_1.useState)(null), lastSelectedDate = _t[0], setLastSelectedDate = _t[1];
58
77
  // 오늘 날짜인지 확인
59
78
  var today = new Date();
60
79
  var isToday = function (date) { return dateHelper_1.DateHelper.isSameDay(date, today); };
80
+ var isDraggable = !!((_b = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _b === void 0 ? void 0 : _b.DRAG);
61
81
  // 과거 날짜인지 확인
62
82
  var isPastDate = (0, react_1.useCallback)(function (date) { return dateHelper_1.DateHelper.isBefore(date, today) && !dateHelper_1.DateHelper.isSameDay(date, today); }, [today]);
63
83
  // 뷰 타입에 따른 시작일과 종료일 계산
64
- var _t = (0, calendarUtils_1.calculateDateRange)(currentViewType, selectedDate), startDate = _t.startDate, endDate = _t.endDate;
84
+ var _u = (0, calendarUtils_1.calculateDateRange)(currentViewType, selectedDate), startDate = _u.startDate, endDate = _u.endDate;
65
85
  // 뷰 타입 변경 처리
66
86
  var handleViewTypeChange = (0, react_1.useCallback)(function (option) {
67
87
  var newViewType = option.value;
@@ -277,33 +297,19 @@ var Calendar = function (_a) {
277
297
  var getDayTextByDate = function (date) {
278
298
  return defaultDayTexts[date.getDay()];
279
299
  };
280
- var monthNames = (0, react_1.useMemo)(function () { return [
281
- t('calendar_month_1'),
282
- t('calendar_month_2'),
283
- t('calendar_month_3'),
284
- t('calendar_month_4'),
285
- t('calendar_month_5'),
286
- t('calendar_month_6'),
287
- t('calendar_month_7'),
288
- t('calendar_month_8'),
289
- t('calendar_month_9'),
290
- t('calendar_month_10'),
291
- t('calendar_month_11'),
292
- t('calendar_month_12')
293
- ]; }, [t]);
294
300
  // 뷰 타입을 위한 드롭다운 옵션 생성
295
301
  var viewTypeOptions = (0, react_1.useMemo)(function () {
296
302
  var viewTypeTextMap = {
297
- MONTHLY: t('calendar_view_monthly'),
298
- WEEKLY: t('calendar_view_weekly'),
299
- DAILY: t('calendar_view_daily'),
300
- YEARLY: t('calendar_view_yearly')
303
+ MONTHLY: t('str_fm_month'),
304
+ WEEKLY: t('str_fm_week'),
305
+ DAILY: t('str_fm_day'),
306
+ YEARLY: t('str_fm_year')
301
307
  };
302
- return viewTypes.map(function (viewType) { return ({
308
+ return actualViewTypes.map(function (viewType) { return ({
303
309
  text: viewTypeTextMap[viewType] || viewType,
304
310
  value: viewType
305
311
  }); });
306
- }, [viewTypes, t]);
312
+ }, [actualViewTypes, t]);
307
313
  // 특정 월의 캘린더 날짜 생성 (연간 보기용)
308
314
  var getMonthDates = (0, react_1.useCallback)(function (year, month) {
309
315
  var monthDate = new Date(year, month, 1);
@@ -359,31 +365,28 @@ var Calendar = function (_a) {
359
365
  }, [onActionDispatch, calendarUtils_1.calculateDateRange]);
360
366
  // 다중 일자 지원을 포함한 이벤트 아이템 렌더링
361
367
  var renderScheduleItem = function (schedule, extraProps) {
362
- var _a;
363
368
  if (extraProps === void 0) { extraProps = {}; }
364
369
  // isAllDay 계산
365
370
  var isAllDay = (0, calendarUtils_1.calculateIsAllDay)(new Date(schedule.startDate), new Date(schedule.endDate));
366
371
  var isSelected = selectedSchedules.some(function (s) { return s.id === schedule.id; });
367
- var isDraggable = !!((_a = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _a === void 0 ? void 0 : _a.DRAG);
368
372
  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 }));
369
373
  };
370
374
  // 뷰 타입에 따른 캘린더 콘텐츠 렌더링
371
375
  var renderCalendarContent = function () {
372
- var _a;
373
376
  switch (currentViewType) {
374
377
  case 'MONTHLY':
375
- 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, renderScheduleItem: renderScheduleItem, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, isDraggable: !!((_a = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _a === void 0 ? void 0 : _a.DRAG), onSwitchToWeeklyView: handleSwitchToWeeklyView }));
378
+ 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, renderScheduleItem: renderScheduleItem, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, isDraggable: isDraggable, onSwitchToWeeklyView: handleSwitchToWeeklyView }));
376
379
  case 'WEEKLY':
377
- return ((0, jsx_runtime_1.jsx)(WeeklyView_1.WeeklyView, { selectedDate: selectedDate, startOfWeek: startOfWeek, getDayTextByDate: getDayTextByDate, defaultViewType: currentViewType, displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, isToday: isToday, isDragOverDate: isDragOverDate, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, handleDateClick: handleDateClick, renderScheduleItem: renderScheduleItem, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd }));
380
+ return ((0, jsx_runtime_1.jsx)(WeeklyView_1.WeeklyView, { selectedDate: selectedDate, selectedSchedules: selectedSchedules, startOfWeek: startOfWeek, getDayTextByDate: getDayTextByDate, defaultViewType: currentViewType, displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, isToday: isToday, isDragOverDate: isDragOverDate, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, handleDateClick: handleDateClick, handleScheduleClick: handleScheduleClick, renderScheduleItem: renderScheduleItem, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, isDraggable: isDraggable }));
378
381
  case 'DAILY':
379
- return ((0, jsx_runtime_1.jsx)(DailyView_1.DailyView, { selectedDate: selectedDate, displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, renderScheduleItem: renderScheduleItem, handleDateClick: handleDateClick, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, isDragOverDate: isDragOverDate, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd }));
382
+ return ((0, jsx_runtime_1.jsx)(DailyView_1.DailyView, { selectedDate: selectedDate, selectedSchedules: selectedSchedules, displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, renderScheduleItem: renderScheduleItem, handleDateClick: handleDateClick, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, isDragOverDate: isDragOverDate, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, handleScheduleClick: handleScheduleClick }));
380
383
  case 'YEARLY':
381
384
  return ((0, jsx_runtime_1.jsx)(YearlyView_1.YearlyView, { selectedDate: selectedDate, getMonthDates: getMonthDates, getDayTextByDate: getDayTextByDate, startOfWeek: startOfWeek, isToday: isToday, handleDateClick: handleDateClick, getSchedulesForDate: getSchedulesForDate }));
382
385
  default:
383
386
  return null;
384
387
  }
385
388
  };
386
- return ((0, jsx_runtime_1.jsxs)(S_CalendarContainer, __assign({ "x-pds-name": "Calendar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onKeyDown: handleKeyDown, tabIndex: 0 }, { children: [(0, jsx_runtime_1.jsxs)(S_CalendarHeader, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "headingBold", textAlign: "center", text: (0, calendarUtils_1.getHeaderText)(currentViewType, selectedDate, t, monthNames) }), (0, jsx_runtime_1.jsxs)(S_LeftContainer, { children: [(0, jsx_runtime_1.jsx)(S_NavigationButton, __assign({ onClick: function () { return navigateDate('prev'); } }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_arrow_left", baseSize: "small", iconSize: 16, baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_icon_sys_grey_01" }) })), todayBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: t('str_calendar_today'), size: "small", colorTheme: "grey_01", onClick: handleTodayClick })), (0, jsx_runtime_1.jsx)(S_NavigationButton, __assign({ onClick: function () { return navigateDate('next'); } }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_arrow_right", baseSize: "small", iconSize: 16, baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_icon_sys_grey_01" }) })), (0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { size: "small", valueArray: viewTypeOptions, value: viewTypeOptions.find(function (option) { return option.value === currentViewType; }), onChange: handleViewTypeChange, customWidth: "120px" })] })] }), (0, jsx_runtime_1.jsx)(S_CalendarContent, { children: renderCalendarContent() })] })));
389
+ return ((0, jsx_runtime_1.jsxs)(S_CalendarContainer, __assign({ "x-pds-name": "Calendar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onKeyDown: handleKeyDown, tabIndex: 0 }, { children: [(0, jsx_runtime_1.jsxs)(S_CalendarHeader, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "headingBold", textAlign: "center", text: (0, calendarUtils_1.getHeaderText)(currentViewType, selectedDate, t) }), (0, jsx_runtime_1.jsxs)(S_LeftContainer, { children: [(0, jsx_runtime_1.jsx)(S_NavigationButton, __assign({ onClick: function () { return navigateDate('prev'); } }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_arrow_left", baseSize: "small", iconSize: 16, baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_icon_sys_grey_01" }) })), todayBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: t('str_calendar_today'), size: "small", colorTheme: "grey_01", onClick: handleTodayClick })), (0, jsx_runtime_1.jsx)(S_NavigationButton, __assign({ onClick: function () { return navigateDate('next'); } }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_arrow_right", baseSize: "small", iconSize: 16, baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_icon_sys_grey_01" }) })), (0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { size: "small", valueArray: viewTypeOptions, value: viewTypeOptions.find(function (option) { return option.value === currentViewType; }), onChange: handleViewTypeChange, customWidth: "120px" })] })] }), (0, jsx_runtime_1.jsx)(S_CalendarContent, { children: renderCalendarContent() })] })));
387
390
  };
388
391
  var S_CalendarContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 400px;\n outline: 0px;\n overflow: hidden;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 400px;\n outline: 0px;\n overflow: hidden;\n width: 100%;\n"])));
389
392
  var S_CalendarHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n gap: 16px;\n padding: 0px 0px 8px 0px;\n"], ["\n align-items: center;\n display: flex;\n gap: 16px;\n padding: 0px 0px 8px 0px;\n"])));
@@ -2,6 +2,7 @@ import type { Schedule, displayAllDayScheduleMode } from './types';
2
2
  import type { FC, MouseEvent, DragEvent } from 'react';
3
3
  interface DailyViewProps {
4
4
  selectedDate: Date;
5
+ selectedSchedules: Schedule[];
5
6
  displayAllDayScheduleMode?: displayAllDayScheduleMode;
6
7
  getSchedulesForDate: (date: Date) => Schedule[];
7
8
  isDragOverDate: Date | null;
@@ -12,6 +13,7 @@ interface DailyViewProps {
12
13
  renderScheduleItem: (schedule: Schedule, extraProps?: any) => React.ReactNode;
13
14
  handleScheduleDragStart: (schedule: Schedule, e: DragEvent) => void;
14
15
  handleScheduleDragEnd: () => void;
16
+ handleScheduleClick: (schedule: Schedule, e?: React.MouseEvent) => void;
15
17
  }
16
18
  export declare const DailyView: FC<DailyViewProps>;
17
19
  export {};
@@ -28,7 +28,7 @@ var CurrentTimeIndicator_1 = require("./CurrentTimeIndicator");
28
28
  var TimeBasedScheduleItem_1 = require("./TimeBasedScheduleItem");
29
29
  var timeFormatUtils_1 = require("./timeFormatUtils");
30
30
  var DailyView = function (_a) {
31
- var selectedDate = _a.selectedDate, _b = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _b === void 0 ? 'use' : _b, getSchedulesForDate = _a.getSchedulesForDate, isDragOverDate = _a.isDragOverDate, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, handleDateClick = _a.handleDateClick, renderScheduleItem = _a.renderScheduleItem, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd;
31
+ var selectedDate = _a.selectedDate, selectedSchedules = _a.selectedSchedules, _b = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _b === void 0 ? 'use' : _b, getSchedulesForDate = _a.getSchedulesForDate, isDragOverDate = _a.isDragOverDate, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, handleDateClick = _a.handleDateClick, renderScheduleItem = _a.renderScheduleItem, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd, handleScheduleClick = _a.handleScheduleClick;
32
32
  var i18n = (0, react_i18next_1.useTranslation)().i18n;
33
33
  var currentDateForDaily = [selectedDate][0];
34
34
  var HOURS_IN_DAY = Array.from({ length: 24 }, function (_, i) { return i; });
@@ -40,7 +40,7 @@ var DailyView = function (_a) {
40
40
  return ((0, jsx_runtime_1.jsxs)(S_DailyContainer, { children: [(0, jsx_runtime_1.jsx)(AllDaySchedulesSection_1.AllDaySchedulesSection, { calendarDates: [selectedDate], displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, renderScheduleItem: renderScheduleItem, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop }), (0, jsx_runtime_1.jsxs)(S_DailyTimeGrid, { children: [(0, jsx_runtime_1.jsx)(CurrentTimeIndicator_1.CurrentTimeIndicator, { show: true, leftOffset: "80px" }), HOURS_IN_DAY.map(function (hour) {
41
41
  var timeSlotDate = getTimeSlotDate(currentDateForDaily, hour);
42
42
  var isDragOver = (isDragOverDate === null || isDragOverDate === void 0 ? void 0 : isDragOverDate.getTime()) === timeSlotDate.getTime();
43
- 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, 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), handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd })) }))] }, hour));
43
+ 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, 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));
44
44
  })] })] }));
45
45
  };
46
46
  exports.DailyView = DailyView;
@@ -23,6 +23,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
23
23
  var react_1 = require("react");
24
24
  var react_i18next_1 = require("react-i18next");
25
25
  var dateHelper_1 = require("../../../common/utils/dateHelper");
26
+ var components_1 = require("../../../hybrid/components");
26
27
  var styled_components_1 = __importDefault(require("styled-components"));
27
28
  var TextLabel_1 = require("../TextLabel");
28
29
  var calendarUtils_1 = require("./calendarUtils");
@@ -263,10 +264,10 @@ var MonthlyView = function (_a) {
263
264
  onDragStart: function (e) { return handleScheduleDragStart === null || handleScheduleDragStart === void 0 ? void 0 : handleScheduleDragStart(schedule, e); },
264
265
  onDragEnd: function () { return handleScheduleDragEnd === null || handleScheduleDragEnd === void 0 ? void 0 : handleScheduleDragEnd(); }
265
266
  });
266
- }), hiddenSchedulesCount > 0 && ((0, jsx_runtime_1.jsx)(S_MoreSchedulesButton, __assign({ onClick: function (e) {
267
+ }), hiddenSchedulesCount > 0 && ((0, jsx_runtime_1.jsxs)(S_MoreSchedulesButton, __assign({ onClick: function (e) {
267
268
  e.stopPropagation();
268
269
  onSwitchToWeeklyView === null || onSwitchToWeeklyView === void 0 ? void 0 : onSwitchToWeeklyView(date);
269
- } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: "".concat(hiddenSchedulesCount, " ").concat(t('str_calendar_schedule_more')), styleTheme: "caption2Regular" }) })))] }))] }), index));
270
+ } }, { 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));
270
271
  }), (0, jsx_runtime_1.jsx)(MultiWeekSchedulesLayer_1.MultiWeekSchedulesLayer, { multiWeekSchedules: getMultiWeekSchedules, selectedSchedules: selectedSchedules, handleScheduleClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, isDraggable: isDraggable })] })));
271
272
  };
272
273
  exports.MonthlyView = MonthlyView;
@@ -300,7 +301,7 @@ var S_SchedulesContainer = styled_components_1.default.div(templateObject_4 || (
300
301
  var _b = _a.$multiWeekSchedulesCount, $multiWeekSchedulesCount = _b === void 0 ? 0 : _b;
301
302
  return $multiWeekSchedulesCount * 28;
302
303
  });
303
- var S_MoreSchedulesButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: none;\n border: none;\n border-radius: 2px;\n color: ", ";\n cursor: pointer;\n font: inherit;\n outline: inherit;\n padding: 0;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"], ["\n background: none;\n border: none;\n border-radius: 2px;\n color: ", ";\n cursor: pointer;\n font: inherit;\n outline: inherit;\n padding: 0;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), function (_a) {
304
+ var S_MoreSchedulesButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background: none;\n border: none;\n border-radius: 2px;\n color: ", ";\n cursor: pointer;\n display: flex;\n outline: inherit;\n padding-top: 4px;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"], ["\n align-items: center;\n background: none;\n border: none;\n border-radius: 2px;\n color: ", ";\n cursor: pointer;\n display: flex;\n outline: inherit;\n padding-top: 4px;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), function (_a) {
304
305
  var theme = _a.theme;
305
306
  return theme.ui_cpnt_textlabel_sys_brandprimary;
306
307
  }, function (_a) {
@@ -2,6 +2,9 @@ import type { Schedule } from './types';
2
2
  import type React from 'react';
3
3
  interface TimeBasedScheduleItemProps {
4
4
  schedules: Schedule[];
5
+ selectedSchedules: Schedule[];
6
+ isDraggable?: boolean;
7
+ onClick?: (schedule: Schedule, e?: React.MouseEvent) => void;
5
8
  handleScheduleDragStart: (schedule: Schedule, e: React.DragEvent) => void;
6
9
  handleScheduleDragEnd: () => void;
7
10
  }
@@ -36,8 +36,8 @@ var TextLabel_1 = require("../TextLabel");
36
36
  var calendarUtils_1 = require("./calendarUtils");
37
37
  var timeFormatUtils_1 = require("./timeFormatUtils");
38
38
  var TimeBasedScheduleItem = function (_a) {
39
- var schedules = _a.schedules, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd;
40
- var _b = (0, react_i18next_1.useTranslation)(), i18n = _b.i18n, t = _b.t;
39
+ var schedules = _a.schedules, selectedSchedules = _a.selectedSchedules, _b = _a.isDraggable, isDraggable = _b === void 0 ? false : _b, onClick = _a.onClick, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd;
40
+ var _c = (0, react_i18next_1.useTranslation)(), i18n = _c.i18n, t = _c.t;
41
41
  // 시간별 스케줄 계산 및 grid 위치 할당
42
42
  var timedSchedulesWithGrid = (0, react_1.useMemo)(function () {
43
43
  var filteredSchedules = schedules.filter(function (schedule) { return !(0, calendarUtils_1.calculateIsAllDay)(new Date(schedule.startDate), new Date(schedule.endDate)); });
@@ -119,6 +119,7 @@ var TimeBasedScheduleItem = function (_a) {
119
119
  return schedulesWithGrid;
120
120
  }, [schedules]);
121
121
  return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: timedSchedulesWithGrid.map(function (schedule) {
122
+ var isSelected = selectedSchedules.some(function (s) { return s.id === (schedule === null || schedule === void 0 ? void 0 : schedule.id); });
122
123
  var startDate = new Date(schedule.startDate);
123
124
  var endDate = new Date(schedule.endDate);
124
125
  // 시간을 UTC에서 로컬 시간으로 변환
@@ -138,19 +139,26 @@ var TimeBasedScheduleItem = function (_a) {
138
139
  // 픽셀 단위로 변환 (각 시간은 60px)
139
140
  var top = (startMinutes / 60) * 60;
140
141
  var height = (duration / 60) * 60;
141
- return ((0, jsx_runtime_1.jsx)(S_ScheduleItem, __assign({ "$top": top, "$height": height, "$gridColumn": schedule.gridColumn, "$totalColumns": schedule.totalColumns, draggable: true, 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(); } }, { children: (0, jsx_runtime_1.jsxs)(S_ScheduleContent, { children: [(0, jsx_runtime_1.jsx)(S_ScheduleTime, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Regular", text: "".concat((0, timeFormatUtils_1.formatTimeWithLocale)(localStartHour, i18n.language, t), " (").concat(durationText, ")"), ellipsisMode: "use", singleLineMode: "use" }) }), (0, jsx_runtime_1.jsx)(S_ScheduleTitle, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: schedule.title, ellipsisMode: "use", singleLineMode: "use" }) })] }) }), schedule.id));
142
+ return ((0, jsx_runtime_1.jsx)(S_ScheduleItem, __assign({ "$top": top, "$height": height, "$gridColumn": schedule.gridColumn, "$totalColumns": schedule.totalColumns, "$isSelected": isSelected, "$isDraggable": isDraggable, draggable: isDraggable, onClick: function (e) {
143
+ e.stopPropagation();
144
+ onClick === null || onClick === void 0 ? void 0 : onClick(schedule, e);
145
+ }, 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(); } }, { children: (0, jsx_runtime_1.jsxs)(S_ScheduleContent, { children: [(0, jsx_runtime_1.jsx)(S_ScheduleTime, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Regular", text: "".concat((0, timeFormatUtils_1.formatTimeWithLocale)(localStartHour, i18n.language, t), " (").concat(durationText, ")"), ellipsisMode: "use", singleLineMode: "use" }) }), (0, jsx_runtime_1.jsx)(S_ScheduleTitle, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: schedule.title, ellipsisMode: "use", singleLineMode: "use" }) })] }) }), schedule.id));
142
146
  }) }));
143
147
  };
144
148
  exports.TimeBasedScheduleItem = TimeBasedScheduleItem;
145
- var S_ScheduleItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n border: 1px solid ", ";\n border-left: 2px solid ", ";\n border-radius: 4px;\n cursor: grab;\n height: ", "px;\n left: ", ";\n overflow: hidden;\n position: absolute;\n top: ", "px;\n width: ", ";\n z-index: 9;\n &:active {\n cursor: grabbing;\n }\n"], ["\n background: ", ";\n border: 1px solid ", ";\n border-left: 2px solid ", ";\n border-radius: 4px;\n cursor: grab;\n height: ", "px;\n left: ", ";\n overflow: hidden;\n position: absolute;\n top: ", "px;\n width: ", ";\n z-index: 9;\n &:active {\n cursor: grabbing;\n }\n"])), function (_a) {
146
- var theme = _a.theme;
147
- return theme.ui_cpnt_sheet_base;
149
+ var S_ScheduleItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n border: 1px solid ", ";\n border-left: 2px solid ", ";\n border-radius: 4px;\n cursor: ", ";\n height: ", "px;\n left: ", ";\n overflow: hidden;\n position: absolute;\n top: ", "px;\n width: ", ";\n z-index: 9;\n\n &:active {\n background: ", ";\n cursor: ", ";\n }\n"], ["\n background: ", ";\n border: 1px solid ", ";\n border-left: 2px solid ", ";\n border-radius: 4px;\n cursor: ", ";\n height: ", "px;\n left: ", ";\n overflow: hidden;\n position: absolute;\n top: ", "px;\n width: ", ";\n z-index: 9;\n\n &:active {\n background: ", ";\n cursor: ", ";\n }\n"])), function (props) {
150
+ if (props.$isSelected)
151
+ return props.theme.ui_cpnt_sheet_base_06;
152
+ return props.theme.ui_cpnt_sheet_base;
148
153
  }, function (_a) {
149
154
  var theme = _a.theme;
150
155
  return theme.ui_temp_white;
151
156
  }, function (_a) {
152
157
  var theme = _a.theme;
153
158
  return theme.ui_temp_grey_02;
159
+ }, function (_a) {
160
+ var $isDraggable = _a.$isDraggable;
161
+ return ($isDraggable ? 'grab' : 'default');
154
162
  }, function (_a) {
155
163
  var $height = _a.$height;
156
164
  return $height - 2;
@@ -163,6 +171,12 @@ var S_ScheduleItem = styled_components_1.default.div(templateObject_1 || (templa
163
171
  }, function (_a) {
164
172
  var $totalColumns = _a.$totalColumns;
165
173
  return "calc(100% / ".concat($totalColumns, ")");
174
+ }, function (_a) {
175
+ var theme = _a.theme;
176
+ return theme.ui_cpnt_sheet_base_06;
177
+ }, function (_a) {
178
+ var $isDraggable = _a.$isDraggable;
179
+ return ($isDraggable ? 'grabbing' : 'default');
166
180
  });
167
181
  var S_ScheduleContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n padding: 4px 6px;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n padding: 4px 6px;\n"])));
168
182
  var S_ScheduleTitle = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-bottom: 2px;\n"], ["\n margin-bottom: 2px;\n"])));
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import type { Schedule, displayAllDayScheduleMode } from './types';
3
3
  interface WeeklyViewProps {
4
4
  selectedDate: Date;
5
+ selectedSchedules: Schedule[];
5
6
  startOfWeek: 'sunday' | 'monday';
6
7
  getDayTextByDate: (date: Date) => string;
7
8
  defaultViewType: string;
@@ -16,6 +17,8 @@ interface WeeklyViewProps {
16
17
  renderScheduleItem: (schedule: Schedule, extraProps?: any) => React.ReactNode;
17
18
  handleScheduleDragStart: (schedule: Schedule, e: React.DragEvent) => void;
18
19
  handleScheduleDragEnd: () => void;
20
+ isDraggable: boolean;
21
+ handleScheduleClick: (schedule: Schedule, e?: React.MouseEvent) => void;
19
22
  }
20
23
  export declare const WeeklyView: React.FC<WeeklyViewProps>;
21
24
  export {};
@@ -30,7 +30,7 @@ var CurrentTimeIndicator_1 = require("./CurrentTimeIndicator");
30
30
  var TimeBasedScheduleItem_1 = require("./TimeBasedScheduleItem");
31
31
  var timeFormatUtils_1 = require("./timeFormatUtils");
32
32
  var WeeklyView = function (_a) {
33
- var selectedDate = _a.selectedDate, startOfWeek = _a.startOfWeek, getDayTextByDate = _a.getDayTextByDate, defaultViewType = _a.defaultViewType, _b = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _b === void 0 ? 'use' : _b, getSchedulesForDate = _a.getSchedulesForDate, isToday = _a.isToday, isDragOverDate = _a.isDragOverDate, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, handleDateClick = _a.handleDateClick, renderScheduleItem = _a.renderScheduleItem, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd;
33
+ var selectedDate = _a.selectedDate, selectedSchedules = _a.selectedSchedules, startOfWeek = _a.startOfWeek, getDayTextByDate = _a.getDayTextByDate, defaultViewType = _a.defaultViewType, _b = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _b === void 0 ? 'use' : _b, getSchedulesForDate = _a.getSchedulesForDate, isToday = _a.isToday, isDragOverDate = _a.isDragOverDate, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, handleDateClick = _a.handleDateClick, renderScheduleItem = _a.renderScheduleItem, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd, isDraggable = _a.isDraggable, handleScheduleClick = _a.handleScheduleClick;
34
34
  var _c = (0, react_i18next_1.useTranslation)(), t = _c.t, i18n = _c.i18n;
35
35
  // Generate calendar dates for weekly view
36
36
  var calendarDates = (0, react_1.useMemo)(function () {
@@ -45,22 +45,23 @@ var WeeklyView = function (_a) {
45
45
  }, [selectedDate, startOfWeek]);
46
46
  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) {
47
47
  var dayText = getDayTextByDate(date);
48
- var dateText = t('calendar_date_format', {
49
- day: date.getDate(),
50
- dayText: dayText
48
+ var dateText = t('str_calendar_weekly_date', {
49
+ month: date.getMonth() + 1,
50
+ date: date.getDate(),
51
+ day: dayText
51
52
  });
52
53
  return ((0, jsx_runtime_1.jsx)(S_WeeklyDayHeader, __assign({ "$isToday": isToday(date) }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", colorTheme: isToday(date) ? 'sysTextBrandPrimary' : 'sysTextTertiary', text: dateText }) }), index));
53
54
  })] }), (0, jsx_runtime_1.jsx)(AllDaySchedulesSection_1.AllDaySchedulesSection, { calendarDates: calendarDates, displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, renderScheduleItem: renderScheduleItem, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop }), (0, jsx_runtime_1.jsxs)(S_TimeGrid, { children: [(0, jsx_runtime_1.jsx)(CurrentTimeIndicator_1.CurrentTimeIndicator, { show: defaultViewType === 'WEEKLY' }), 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", colorTheme: "sysTextTertiary", text: (0, timeFormatUtils_1.formatTimeWithLocale)(hour, i18n.language, t) }) }), (0, jsx_runtime_1.jsx)(S_TimeSlots, { children: calendarDates.map(function (date, dayIndex) {
54
55
  var timeSlotDate = new Date(date);
55
56
  timeSlotDate.setHours(hour, 0, 0, 0);
56
- return ((0, jsx_runtime_1.jsx)(S_TimeSlot, __assign({ "$isDragOver": (isDragOverDate === null || isDragOverDate === void 0 ? void 0 : isDragOverDate.getTime()) === timeSlotDate.getTime(), onClick: function () {
57
+ return ((0, jsx_runtime_1.jsx)(S_TimeSlot, __assign({ "$isDragOver": (isDragOverDate === null || isDragOverDate === void 0 ? void 0 : isDragOverDate.getTime()) === timeSlotDate.getTime(), "$isDraggable": isDraggable, onClick: function () {
57
58
  var clickedDate = new Date(date);
58
59
  clickedDate.setHours(hour, 0, 0, 0);
59
60
  handleDateClick(clickedDate);
60
61
  }, onDoubleClick: function () {
61
62
  var clickedDate = new Date(date);
62
63
  clickedDate.setHours(hour, 0, 0, 0);
63
- }, 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(date), handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd })) }), dayIndex));
64
+ }, 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(date), selectedSchedules: selectedSchedules, isDraggable: isDraggable, onClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd })) }), dayIndex));
64
65
  }) })] }, hour)); })] })] }));
65
66
  };
66
67
  exports.WeeklyView = WeeklyView;
@@ -78,7 +79,7 @@ var S_TimeLabel = styled_components_1.default.div(templateObject_7 || (templateO
78
79
  return theme.ui_cpnt_divider;
79
80
  });
80
81
  var S_TimeSlots = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: contents;\n"], ["\n display: contents;\n"])));
81
- var S_TimeSlot = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background: ", ";\n border-bottom: 1px solid ", ";\n border-right: 1px solid ", ";\n cursor: pointer;\n min-width: 0;\n overflow: visible;\n position: relative;\n\n &:hover {\n background: ", ";\n }\n"], ["\n background: ", ";\n border-bottom: 1px solid ", ";\n border-right: 1px solid ", ";\n cursor: pointer;\n min-width: 0;\n overflow: visible;\n position: relative;\n\n &:hover {\n background: ", ";\n }\n"])), function (props) { return (props.$isDragOver ? props.theme.ui_cpnt_sheet_base : 'transparent'); }, function (_a) {
82
+ var S_TimeSlot = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background: ", ";\n border-bottom: 1px solid ", ";\n border-right: 1px solid ", ";\n cursor: default;\n min-width: 0;\n overflow: visible;\n position: relative;\n\n &:hover {\n background: ", ";\n }\n"], ["\n background: ", ";\n border-bottom: 1px solid ", ";\n border-right: 1px solid ", ";\n cursor: default;\n min-width: 0;\n overflow: visible;\n position: relative;\n\n &:hover {\n background: ", ";\n }\n"])), function (props) { return (props.$isDragOver ? props.theme.ui_cpnt_sheet_base : 'transparent'); }, function (_a) {
82
83
  var theme = _a.theme;
83
84
  return theme.ui_cpnt_divider;
84
85
  }, function (_a) {
@@ -20,5 +20,5 @@ export declare const calculateDateRange: (viewType: CalendarViewType, baseDate:
20
20
  * @param getDayTextByDate 날짜에 따른 요일 텍스트 반환 함수
21
21
  * @returns 헤더에 표시할 텍스트
22
22
  */
23
- export declare const getHeaderText: (viewType: CalendarViewType, selectedDate: Date, t: TFunction, monthNames: string[]) => string;
23
+ export declare const getHeaderText: (viewType: CalendarViewType, selectedDate: Date, t: TFunction) => string;
24
24
  export declare const toUTC: (date: Date | null | undefined) => string | null;
@@ -59,18 +59,18 @@ exports.calculateDateRange = calculateDateRange;
59
59
  * @param getDayTextByDate 날짜에 따른 요일 텍스트 반환 함수
60
60
  * @returns 헤더에 표시할 텍스트
61
61
  */
62
- var getHeaderText = function (viewType, selectedDate, t, monthNames) {
62
+ var getHeaderText = function (viewType, selectedDate, t) {
63
63
  var year = selectedDate.getFullYear();
64
- var month = monthNames[selectedDate.getMonth()];
64
+ var monthNumber = selectedDate.getMonth() + 1;
65
65
  var day = selectedDate.getDate();
66
66
  if (viewType === 'DAILY') {
67
- return t('str_calendar_daily_header', { year: year, month: month, day: day });
67
+ return t('str_calendar_daily_header', { year: year, month: monthNumber, day: day });
68
68
  }
69
69
  if (viewType === 'WEEKLY') {
70
- return t('str_calendar_weekly_header', { year: year, month: month });
70
+ return t('str_calendar_weekly_header', { year: year, month: monthNumber });
71
71
  }
72
72
  if (viewType === 'MONTHLY') {
73
- return t('str_calendar_monthly_header', { year: year, month: month });
73
+ return t('str_calendar_monthly_header', { year: year, month: monthNumber });
74
74
  }
75
75
  if (viewType === 'YEARLY') {
76
76
  return t('str_calendar_yearly_header', { year: year });
@@ -40,8 +40,8 @@ export type CalendarAction = {
40
40
  };
41
41
  };
42
42
  export type CalendarProps = {
43
- defaultViewType?: CalendarViewType;
44
- viewTypes?: CalendarViewType[];
43
+ defaultViewType?: CalendarViewType | 'str_fm_month' | 'str_fm_week' | 'str_fm_day' | 'str_fm_year';
44
+ viewTypes?: (CalendarViewType | 'str_fm_month' | 'str_fm_week' | 'str_fm_day' | 'str_fm_year')[];
45
45
  displayAllDayScheduleMode?: displayAllDayScheduleMode;
46
46
  startOfWeek?: StartOfWeek;
47
47
  todayBtnMode?: TodayBtnMode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.5.507",
3
+ "version": "2.5.509",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",