pds-dev-kit-web 2.2.210 → 2.2.212

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

@@ -51,10 +51,12 @@ var CurrentTimeIndicator_1 = require("./CurrentTimeIndicator");
 var TimeBasedScheduleItem_1 = require("./TimeBasedScheduleItem");
 var timeFormatUtils_1 = require("./timeFormatUtils");
 var WeeklyView = function (_a) {
-    var startOfWeek = _a.startOfWeek;
+    var startOfWeek = _a.startOfWeek, schedules = _a.schedules, config = _a.config;
     var _b = (0, react_i18next_1.useTranslation)(), 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, handleScheduleDragStart = _c.handleScheduleDragStart, handleScheduleDragEnd = _c.handleScheduleDragEnd, isDraggable = _c.isDraggable, handleScheduleClick = _c.handleScheduleClick, getDayTextByDate = _c.getDayTextByDate;
-    // Generate calendar dates for weekly view
+    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 calendarDates = (0, react_1.useMemo)(function () {
         var dates = [];
         var startIndex = startOfWeek === 'monday' ? 1 : 0;
@@ -65,10 +67,108 @@ 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]);
     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 = [
+                            'Jan',
+                            'Feb',
+                            'Mar',
+                            'Apr',
+                            'May',
+                            'Jun',
+                            'Jul',
+                            'Aug',
+                            'Sep',
+                            'Oct',
+                            'Nov',
+                            'Dec'
+                        ];
+                        var isEnglish = i18n.language === 'en'; // i18n 인스턴스에서 현재 언어 확인
+                        var monthText = isEnglish ? monthNames[date.getMonth()] : date.getMonth() + 1;
                         var dateText = t('str_calendar_weekly_date', {
-                            month: date.getMonth() + 1,
+                            month: monthText,
                             date: date.getDate(),
                             day: dayText
                         });
@@ -77,7 +177,7 @@ var WeeklyView = function (_a) {
                                     var timeSlotDate = new Date(date);
                                     timeSlotDate.setHours(hour, 0, 0, 0);
                                     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, onClick: function () { return handleDateClick(date, {}); }, 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));
+                                    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));
                                 }) })] }, hour)); })] }))] }));
 };
 exports.WeeklyView = WeeklyView;
@@ -101,13 +201,19 @@ var S_TimeLabel = styled_components_1.default.div(templateObject_8 || (templateO
     return theme.ui_cpnt_divider;
 });
 var S_TimeSlots = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
-var S_TimeSlot = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __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) {
+var S_TimeSlot = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  cursor: ", ";\n  min-width: 0;\n  overflow: visible;\n  position: relative;\n  user-select: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  cursor: ", ";\n  min-width: 0;\n  overflow: visible;\n  position: relative;\n  user-select: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
+    if (props.$isInTimeDragRange)
+        return props.theme.ui_cpnt_sheet_base;
+    if (props.$isDragOver)
+        return props.theme.ui_cpnt_sheet_base;
+    return 'transparent';
+}, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_divider;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_divider;
-}, function (_a) {
+}, function (props) { return (props.$isTimeDragging ? 'grabbing' : 'default'); }, function (props) { return (props.$isTimeDragging ? 'none' : 'auto'); }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_sheet_base;
 });

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

@@ -1,7 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.toUTC = exports.getHeaderText = exports.calculateDateRange = exports.calculateIsAllDay = void 0;
+var i18n_1 = __importDefault(require("../../../common/services/i18n"));
 var dateHelper_1 = require("../../../common/utils/dateHelper");
+var constants_1 = require("./constants");
 /**
  * 일정이 종일 일정인지 확인하는 함수
  * @param startDate 시작 날짜
@@ -22,16 +27,16 @@ var calculateIsAllDay = function (startDate, endDate) {
 exports.calculateIsAllDay = calculateIsAllDay;
 var calculateDateRange = function (viewType, baseDate) {
     switch (viewType) {
-        case 'DAILY':
+        case 'str_fm_day':
             return { startDate: baseDate, endDate: baseDate };
-        case 'WEEKLY': {
+        case 'str_fm_week': {
             var start = new Date(baseDate);
             start.setDate(baseDate.getDate() - baseDate.getDay());
             var end = new Date(start);
             end.setDate(start.getDate() + 6);
             return { startDate: start, endDate: end };
         }
-        case 'MONTHLY': {
+        case 'str_fm_month': {
             var startDate = new Date(baseDate.getFullYear(), baseDate.getMonth(), 1);
             // 실제 MonthlyView에서 보여지는 날짜 배열을 구함
             var days = dateHelper_1.DateHelper.getCalendarDatesForCalendar(startDate, 'sunday');
@@ -40,7 +45,7 @@ var calculateDateRange = function (viewType, baseDate) {
                 endDate: days[days.length - 1]
             };
         }
-        case 'YEARLY':
+        case 'str_fm_year':
             return {
                 startDate: new Date(baseDate.getFullYear(), 0, 1),
                 endDate: new Date(baseDate.getFullYear(), 11, 31)
@@ -63,16 +68,21 @@ var getHeaderText = function (viewType, selectedDate, t) {
     var year = selectedDate.getFullYear();
     var monthNumber = selectedDate.getMonth() + 1;
     var day = selectedDate.getDate();
-    if (viewType === 'DAILY') {
+    var locale = (0, constants_1.getLocaleFromLang)(i18n_1.default.language);
+    // For English locale, use month names instead of numbers for WEEKLY and MONTHLY views
+    var monthValue = locale === 'en-US' && (viewType === 'str_fm_week' || viewType === 'str_fm_month')
+        ? t("calendar_month_".concat(monthNumber))
+        : monthNumber;
+    if (viewType === 'str_fm_day') {
         return t('str_calendar_daily_header', { year: year, month: monthNumber, day: day });
     }
-    if (viewType === 'WEEKLY') {
-        return t('str_calendar_weekly_header', { year: year, month: monthNumber });
+    if (viewType === 'str_fm_week') {
+        return t('str_calendar_weekly_header', { year: year, month: monthValue });
     }
-    if (viewType === 'MONTHLY') {
-        return t('str_calendar_monthly_header', { year: year, month: monthNumber });
+    if (viewType === 'str_fm_month') {
+        return t('str_calendar_monthly_header', { year: year, month: monthValue });
     }
-    if (viewType === 'YEARLY') {
+    if (viewType === 'str_fm_year') {
         return t('str_calendar_yearly_header', { year: year });
     }
     return '';

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export type CalendarViewType = 'MONTHLY' | 'WEEKLY' | 'DAILY' | 'YEARLY';
+export type CalendarViewType = 'str_fm_month' | 'str_fm_week' | 'str_fm_day' | 'str_fm_year';
 export type displayAllDayScheduleMode = 'none' | 'use';
 export type StartOfWeek = 'sunday' | 'monday';
 export type TodayBtnMode = 'none' | 'use';
-export type ActionType = 'CLICK' | 'CLICK_WITH_SHIFT_KEY_DOWN' | 'DELETE_KEY_DOWN' | 'DRAG' | 'DOUBLE_CLICK';
+export type ActionType = 'CLICK' | 'CLICK_WITH_SHIFT_KEY_DOWN' | 'DELETE_KEY_DOWN' | 'DRAG';
 export type TargetType = 'SCHEDULE' | 'DATE';
 export type Action = {
     action: ActionType;
@@ -40,8 +40,8 @@ export type CalendarAction = {
     };
 };
 export type CalendarProps = {
-    defaultViewType?: CalendarViewType | 'str_fm_month' | 'str_fm_week' | 'str_fm_day' | 'str_fm_year';
-    viewTypes?: (CalendarViewType | 'str_fm_month' | 'str_fm_week' | 'str_fm_day' | 'str_fm_year')[];
+    defaultViewType?: CalendarViewType;
+    viewTypes?: CalendarViewType[];
     displayAllDayScheduleMode?: displayAllDayScheduleMode;
     startOfWeek?: StartOfWeek;
     todayBtnMode?: TodayBtnMode;
@@ -59,3 +59,7 @@ export type EventItemProps = {
     onDoubleClick: (schedule: Schedule) => void;
     isSelected?: boolean;
 };
+export type TimeSelection = {
+    date: Date;
+    hour: number;
+};

package/dist/src/desktop/components/PriceTextField/PriceTextField.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Path } from 'react-hook-form';
-import { CurrencyCode, ExchangeRateMap } from '../../../core/pricing';
+import { CurrencyCode } from '../../../core/pricing';
 import type { IFormValues, PDSTextType } from '../../../common';
 import type { TextFieldBaseProps } from '../../common/components/TextFieldBase/TextFieldBase';
 export declare const DEFAULT_DECIMAL_PLACES: {
@@ -19,12 +19,13 @@ type Props = {
     baseCurrency?: CurrencyCode;
     currencies?: CurrencyCode[];
     decimalPlaces?: Record<string, number>;
-    exchangeRates?: ExchangeRateMap;
+    exchangeRates?: {
+        [key: string]: number;
+    };
     hintTextFontWeight?: 'normal' | 'bold';
     validation?: any;
     useRequiredValidation?: 'none' | 'use';
     useDotBadge?: 'none' | 'use';
-    returnType?: 'object' | 'string' | 'rawValue';
     deleteBtnMode?: 'none' | 'use';
     minPriceAmount?: string | number;
     onExChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
@@ -39,5 +40,5 @@ type Props = {
         displayValue: string;
     }) => void;
 } & Omit<Partial<TextFieldBaseProps>, 'textAlign' | 'preventBlankMode' | 'enterSubmitMode' | 'multiRows' | 'colorTheme'>;
-declare function PriceTextField({ name, hintText, defaultAmount, colorTheme, size, fontWeight, hintTextFontWeight, responsiveMode, state, dropdownState, customWidth, baseCurrency, currencies, decimalPlaces, exchangeRates, textAlign, validation, useRequiredValidation, useDotBadge, returnType, deleteBtnMode, minPriceAmount, onChange, onExChange, onBlur, onFocus, onTarget, onCurrencyChange, onValueChange }: Props): JSX.Element;
+declare function PriceTextField({ name, hintText, defaultAmount, colorTheme, size, fontWeight, hintTextFontWeight, responsiveMode, state, dropdownState, customWidth, baseCurrency, currencies, decimalPlaces, exchangeRates, textAlign, validation, useRequiredValidation, useDotBadge, deleteBtnMode, minPriceAmount, onChange, onExChange, onBlur, onFocus, onTarget, onCurrencyChange, onValueChange }: Props): JSX.Element;
 export default PriceTextField;

package/dist/src/desktop/components/PriceTextField/PriceTextField.js

@@ -66,18 +66,50 @@ exports.DEFAULT_DECIMAL_PLACES = {
 function PriceTextField(_a) {
     var _b;
     var _c;
-    var name = _a.name, hintText = _a.hintText, defaultAmount = _a.defaultAmount, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, _e = _a.size, size = _e === void 0 ? 'large' : _e, _f = _a.fontWeight, fontWeight = _f === void 0 ? 'bold' : _f, _g = _a.hintTextFontWeight, hintTextFontWeight = _g === void 0 ? 'normal' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.state, state = _j === void 0 ? 'normal' : _j, _k = _a.dropdownState, dropdownState = _k === void 0 ? 'normal' : _k, customWidth = _a.customWidth, _l = _a.baseCurrency, baseCurrency = _l === void 0 ? pricing_1.CurrencyCode.KRW : _l, _m = _a.currencies, currencies = _m === void 0 ? [pricing_1.CurrencyCode.KRW, pricing_1.CurrencyCode.USD] : _m, _o = _a.decimalPlaces, decimalPlaces = _o === void 0 ? exports.DEFAULT_DECIMAL_PLACES : _o, _p = _a.exchangeRates, exchangeRates = _p === void 0 ? (_b = {}, _b[pricing_1.CurrencyCode.KRW] = 1300, _b[pricing_1.CurrencyCode.USD] = 1, _b) : _p, _q = _a.textAlign, textAlign = _q === void 0 ? 'right' : _q, validation = _a.validation, _r = _a.useRequiredValidation, useRequiredValidation = _r === void 0 ? 'use' : _r, _s = _a.useDotBadge, useDotBadge = _s === void 0 ? 'use' : _s, _t = _a.returnType, returnType = _t === void 0 ? 'object' : _t, _u = _a.deleteBtnMode, deleteBtnMode = _u === void 0 ? 'use' : _u, minPriceAmount = _a.minPriceAmount, onChange = _a.onChange, onExChange = _a.onExChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onTarget = _a.onTarget, onCurrencyChange = _a.onCurrencyChange, onValueChange = _a.onValueChange;
+    var name = _a.name, hintText = _a.hintText, defaultAmount = _a.defaultAmount, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, _e = _a.size, size = _e === void 0 ? 'large' : _e, _f = _a.fontWeight, fontWeight = _f === void 0 ? 'bold' : _f, _g = _a.hintTextFontWeight, hintTextFontWeight = _g === void 0 ? 'normal' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.state, state = _j === void 0 ? 'normal' : _j, _k = _a.dropdownState, dropdownState = _k === void 0 ? 'normal' : _k, customWidth = _a.customWidth, _l = _a.baseCurrency, baseCurrency = _l === void 0 ? pricing_1.CurrencyCode.KRW : _l, _m = _a.currencies, currencies = _m === void 0 ? [pricing_1.CurrencyCode.KRW, pricing_1.CurrencyCode.USD] : _m, _o = _a.decimalPlaces, decimalPlaces = _o === void 0 ? exports.DEFAULT_DECIMAL_PLACES : _o, _p = _a.exchangeRates, exchangeRates = _p === void 0 ? (_b = {}, _b[pricing_1.CurrencyCode.KRW] = 1300, _b[pricing_1.CurrencyCode.USD] = 1, _b) : _p, _q = _a.textAlign, textAlign = _q === void 0 ? 'right' : _q, validation = _a.validation, _r = _a.useRequiredValidation, useRequiredValidation = _r === void 0 ? 'use' : _r, _s = _a.useDotBadge, useDotBadge = _s === void 0 ? 'use' : _s, _t = _a.deleteBtnMode, deleteBtnMode = _t === void 0 ? 'use' : _t, minPriceAmount = _a.minPriceAmount, onChange = _a.onChange, onExChange = _a.onExChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onTarget = _a.onTarget, onCurrencyChange = _a.onCurrencyChange, onValueChange = _a.onValueChange;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
-    var _v = (0, react_1.useState)(defaultAmount ? String(defaultAmount) : ''), baseCurrencyValue = _v[0], setBaseCurrencyValue = _v[1];
-    var _w = (0, react_1.useState)(''), displayValue = _w[0], setDisplayValue = _w[1];
-    var _x = (0, react_1.useState)(baseCurrency), selectedCurrency = _x[0], setSelectedCurrency = _x[1];
-    var _y = (0, react_1.useState)(false), isDropdownFocused = _y[0], setIsDropdownFocused = _y[1];
-    var _z = (0, react_1.useState)(false), isInputFocused = _z[0], setIsInputFocused = _z[1];
-    var _0 = (0, react_1.useState)(null), contextMenuSizeOffset = _0[0], setContextMenuSizeOffset = _0[1];
-    var _1 = (0, react_1.useState)(null), dropdownPositionOffset = _1[0], setDropdownPositionOffset = _1[1];
+    var _u = (0, react_1.useState)(defaultAmount ? String(defaultAmount) : ''), baseCurrencyValue = _u[0], setBaseCurrencyValue = _u[1];
+    var _v = (0, react_1.useState)(baseCurrency), selectedCurrency = _v[0], setSelectedCurrency = _v[1];
+    var _w = (0, react_1.useState)(false), isDropdownFocused = _w[0], setIsDropdownFocused = _w[1];
+    var _x = (0, react_1.useState)(false), isInputFocused = _x[0], setIsInputFocused = _x[1];
+    var _y = (0, react_1.useState)(null), contextMenuSizeOffset = _y[0], setContextMenuSizeOffset = _y[1];
+    var _z = (0, react_1.useState)(null), dropdownPositionOffset = _z[0], setDropdownPositionOffset = _z[1];
+    /** 입력 시 천 단위 콤마 추가 함수 */
+    var addCommas = function (value) {
+        if (!value)
+            return '';
+        var parts = value.split('.');
+        var integerPart = parts[0];
+        var decimalPart = parts[1];
+        // 정수 부분에 콤마 추가
+        var formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        // 소수점이 있으면 합치기
+        return decimalPart !== undefined ? "".concat(formattedInteger, ".").concat(decimalPart) : formattedInteger;
+    };
+    var displayValue = (0, react_1.useMemo)(function () {
+        if (!baseCurrencyValue || baseCurrencyValue === '') {
+            return '';
+        }
+        if (selectedCurrency === baseCurrency) {
+            return isInputFocused
+                ? addCommas(baseCurrencyValue)
+                : formatCurrency(Number(baseCurrencyValue), selectedCurrency, decimalPlaces);
+        }
+        var rate = exchangeRates[selectedCurrency] || 1;
+        var baseRate = exchangeRates[baseCurrency] || 1;
+        var convertedValue = (Number(baseCurrencyValue) / baseRate) * rate;
+        return formatCurrency(convertedValue, selectedCurrency, decimalPlaces);
+    }, [
+        baseCurrencyValue,
+        selectedCurrency,
+        baseCurrency,
+        exchangeRates,
+        decimalPlaces,
+        isInputFocused
+    ]);
     var contextMenuRef = (0, react_1.useRef)(null);
     var dropdownRef = (0, react_1.useRef)(null);
-    var _2 = (0, react_hook_form_1.useFormContext)(), register = _2.register, trigger = _2.trigger, errors = _2.formState.errors, setValue = _2.setValue;
+    var _0 = (0, react_hook_form_1.useFormContext)(), register = _0.register, trigger = _0.trigger, errors = _0.formState.errors, setValue = _0.setValue;
     /** 기본 validation */
     var defaultValidation = (0, react_1.useMemo)(function () {
         var validationConfig = {};
@@ -192,30 +224,13 @@ function PriceTextField(_a) {
     };
     // 환율 계산된 값 계산 (항상 baseCurrency 기준으로)
     var calculatedValue = (0, react_1.useMemo)(function () {
-        if (selectedCurrency === baseCurrency) {
+        if (!baseCurrencyValue || selectedCurrency === baseCurrency) {
             return Number(baseCurrencyValue);
         }
-        return pricing_1.PricingService.exchangePrice(Number(baseCurrencyValue), baseCurrency, selectedCurrency, exchangeRates);
-    }, [baseCurrencyValue, selectedCurrency, baseCurrency]);
-    /** 표시되는 값 설정 */
-    (0, react_1.useEffect)(function () {
-        if (isInputFocused && selectedCurrency === baseCurrency) {
-            setDisplayValue(addCommas(baseCurrencyValue) || '');
-        }
-        else if (!baseCurrencyValue || baseCurrencyValue === '') {
-            setDisplayValue('');
-        }
-        else {
-            setDisplayValue(formatCurrency(calculatedValue, selectedCurrency, decimalPlaces));
-        }
-    }, [
-        baseCurrencyValue,
-        calculatedValue,
-        selectedCurrency,
-        isInputFocused,
-        baseCurrency,
-        decimalPlaces
-    ]);
+        var rate = exchangeRates[selectedCurrency] || 1;
+        var baseRate = exchangeRates[baseCurrency] || 1;
+        return (Number(baseCurrencyValue) / baseRate) * rate;
+    }, [baseCurrencyValue, selectedCurrency, baseCurrency, exchangeRates]);
     /** 드롭다운 위치 업데이트 */
     (0, react_1.useEffect)(function () {
         if (!isDropdownFocused && contextMenuRef.current) {
@@ -245,36 +260,16 @@ function PriceTextField(_a) {
         }
         return formatCurrency(calculatedValue || 0, selectedCurrency, decimalPlaces);
     }, [baseCurrencyValue, calculatedValue, selectedCurrency, decimalPlaces]);
-    /** returnType에 따른 폼 값 */
-    var formValue = (0, react_1.useMemo)(function () {
-        if (!baseCurrencyValue || baseCurrencyValue === '') {
-            return '';
-        }
-        switch (returnType) {
-            case 'string':
-                return formattedValue;
-            case 'rawValue':
-                return baseCurrencyValue;
-            case 'object':
-            default:
-                return formattedValue;
-        }
-    }, [baseCurrencyValue, formattedValue, returnType]);
     /** 폼 값 업데이트 */
     (0, react_1.useEffect)(function () {
-        setValue(name, formValue);
-    }, [name, setValue, formValue]);
+        setValue(name, baseCurrencyValue);
+    }, [name, setValue, baseCurrencyValue]);
     /** onChange 콜백 처리 */
     (0, react_1.useEffect)(function () {
-        if (!onChange)
-            return;
-        if (!baseCurrencyValue || baseCurrencyValue === '') {
-            onChange('');
-            return;
+        if (onChange && baseCurrencyValue) {
+            onChange(baseCurrencyValue);
         }
-        var callbackValue = returnType === 'object' ? formattedValue : formValue;
-        onChange(callbackValue);
-    }, [onChange, baseCurrencyValue, formattedValue, formValue, returnType]);
+    }, [onChange, baseCurrencyValue]);
     /** onValueChange 콜백 처리 */
     (0, react_1.useEffect)(function () {
         if (!onValueChange)
@@ -289,18 +284,6 @@ function PriceTextField(_a) {
             displayValue: formattedValue
         });
     }, [baseCurrencyValue, selectedCurrency, calculatedValue, formattedValue]);
-    /** 입력 시 천 단위 콤마 추가 함수 */
-    var addCommas = function (value) {
-        if (!value)
-            return '';
-        var parts = value.split('.');
-        var integerPart = parts[0];
-        var decimalPart = parts[1];
-        // 정수 부분에 콤마 추가
-        var formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-        // 소수점이 있으면 합치기
-        return decimalPart !== undefined ? "".concat(formattedInteger, ".").concat(decimalPart) : formattedInteger;
-    };
     var handleChange = function (e) {
         var _a = e.target, value = _a.value, selectionStart = _a.selectionStart;
         var prevValue = displayValue;
@@ -434,13 +417,13 @@ function PriceTextField(_a) {
     };
     var handleDelete = (0, react_1.useCallback)(function () {
         setBaseCurrencyValue('');
-        setDisplayValue('');
         setValue(name, '');
     }, [name, setValue]);
     return ((0, jsx_runtime_1.jsxs)(S_PriceTextField, __assign({ "x-pds-name": "PriceTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", inputSize: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_ComponentBox, __assign({ inputSize: size, responsiveMode: responsiveMode, isFocused: isInputFocused, isError: Boolean(isError), state: state, customWidth: customWidth, isInputReadOnly: isInputReadOnly }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldBaseWrapper, __assign({ state: state, isError: Boolean(isError), isFocused: isInputFocused, inputSize: size, isInputReadOnly: isInputReadOnly }, { children: (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText ||
                                 t('str_channel_min_price', {
                                     channelMinPrice: pricing_1.PricingService.format.price({
-                                        amount: minPriceAmount || (baseCurrency === pricing_1.CurrencyCode.KRW ? 300 : 5),
+                                        amount: minPriceAmount ||
+                                            policy_1.DEFAULT_CURRENCY_PRICE_POLICIES[baseCurrency].minPayment.amount,
                                         currency: baseCurrency
                                     })
                                 }), value: displayValue, textAlign: textAlign, validation: finalValidation, textLineType: "single", inputType: "text", inputMode: "decimal", preventBlankMode: "all", enterSubmitMode: "none", state: isInputReadOnly ? 'read_only' : state, colorTheme: colorTheme, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 12 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isInputFocused, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onDelete: handleDelete }) })), (0, jsx_runtime_1.jsx)(S_DropdownWrapper, __assign({ ref: dropdownRef, inputSize: size, onClick: handleDropdownClick, onBlur: handleDropdownBlur, tabIndex: 0, isFocused: isDropdownFocused, state: dropdownState, isError: Boolean(isError) }, { children: (0, jsx_runtime_1.jsxs)(S_Select, __assign({ inputSize: size }, { children: [useDotBadge === 'use' && selectedCurrency === baseCurrency && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_Badge, {}), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: selectedCurrency, styleTheme: "form2Bold", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", customFontWeight: "bold", colorOverride: getDropdownTextColorKey(), lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isDropdownFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })) }))] })), isDropdownFocused &&

package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 import type { PDSTextType } from '../../../common';
 type DesktopBasicModalProps = {
     titleText: PDSTextType;
@@ -16,7 +17,7 @@ type DesktopBasicModalProps = {
     mBtn2Type?: 'button' | 'submit';
     mBtn3Type?: 'button' | 'submit';
     size?: 'large' | 'medium' | 'small' | 'rlarge';
-    scrollVisibleType?: 'hidden' | 'visible';
+    scrollVisibleType?: ScrollVisibleType;
     onClickMBtn1?: () => void;
     onClickMBtn2?: () => void;
     onClickMBtn3?: () => void;

package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.js

@@ -44,9 +44,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_dom_1 = __importDefault(require("react-dom"));
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var styled_components_1 = __importStar(require("styled-components"));
 var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
-var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var components_1 = require("../../components");
 function DesktopBasicModal(_a) {
     var titleText = _a.titleText, contentText = _a.contentText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, _c = _a.bodyOverflowType, bodyOverflowType = _c === void 0 ? 'overlay' : _c, _d = _a.btnMode, btnMode = _d === void 0 ? 'mbtn_amount2' : _d, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _e = _a.mBtn1State, mBtn1State = _e === void 0 ? 'normal' : _e, _f = _a.mBtn2State, mBtn2State = _f === void 0 ? 'normal' : _f, _g = _a.mBtn3State, mBtn3State = _g === void 0 ? 'normal' : _g, _h = _a.mBtn1Type, mBtn1Type = _h === void 0 ? 'button' : _h, _j = _a.mBtn2Type, mBtn2Type = _j === void 0 ? 'button' : _j, _k = _a.mBtn3Type, mBtn3Type = _k === void 0 ? 'button' : _k, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, _l = _a.size, size = _l === void 0 ? 'large' : _l, _m = _a.scrollVisibleType, scrollVisibleType = _m === void 0 ? 'visible' : _m, children = _a.children;
@@ -70,13 +70,12 @@ function DesktopBasicModal(_a) {
     var btn3Mode = ['mbtn_amount3'];
     return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "DesktopBasicModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", size: size }, { children: [(0, jsx_runtime_1.jsx)(S_Header, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" }) }), (0, jsx_runtime_1.jsxs)(S_Body, __assign({ bodySpacingMode: bodySpacingMode, bodyOverflowType: bodyOverflowType, scrollVisibleType: scrollVisibleType }, { children: [contentText && ((0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })), children && children] })), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [(0, jsx_runtime_1.jsx)(S_Left, { children: btn3Mode.includes(btnMode) && mBtn3Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: mBtn3Text, state: mBtn3State, type: mBtn3Type, size: "medium", onClick: onClickMBtn3 })) }), (0, jsx_runtime_1.jsxs)(S_Right, { children: [(0, jsx_runtime_1.jsx)(S_Btn2Wrapper, { children: btn2Mode.includes(btnMode) && mBtn2Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: mBtn2Text, state: mBtn2State, type: mBtn2Type, size: "medium", onClick: onClickMBtn2 })) }), btn1Mode.includes(btnMode) && mBtn1Text && ((0, jsx_runtime_1.jsx)(components_1.MainButton, { text: mBtn1Text, state: mBtn1State, type: mBtn1Type, size: "medium", onClick: onClickMBtn1 }))] })] })] }))] }), container);
 }
-var scrollInvisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-var S_ModalOverlay = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
+var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
 }, animationStyle_1.modalOverlayOnAni);
-var rlarge = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  max-width: 1400px;\n  min-width: 960px;\n"], ["\n  max-width: 1400px;\n  min-width: 960px;\n"])));
-var S_ModalWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+var rlarge = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-width: 1400px;\n  min-width: 960px;\n"], ["\n  max-width: 1400px;\n  min-width: 960px;\n"])));
+var S_ModalWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
 }, function (_a) {
@@ -98,16 +97,16 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_4 || (templa
     var size = _a.size;
     return size === 'rlarge' && rlarge;
 }, animationStyle_1.modalOnAni);
-var S_Left = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+var S_Left = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_Btn2Wrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+var S_Btn2Wrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_Right = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var S_Header = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+var S_Right = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_Header = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {
@@ -120,7 +119,7 @@ var S_Header = styled_components_1.default.div(templateObject_8 || (templateObje
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_Body = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  flex: 1;\n  max-height: 60vh;\n  overflow: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  flex: 1;\n  max-height: 60vh;\n  overflow: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var S_Body = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex: 1;\n  max-height: 60vh;\n  overflow: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n  ", ";\n"], ["\n  flex: 1;\n  max-height: 60vh;\n  overflow: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n  ", ";\n"])), function (_a) {
     var bodyOverflowType = _a.bodyOverflowType;
     return bodyOverflowType;
 }, function (_a) {
@@ -140,15 +139,14 @@ var S_Body = styled_components_1.default.div(templateObject_10 || (templateObjec
     return bodyOverflowType !== 'visible' &&
         scrollVisibleType &&
         {
-            moving: scrollInvisible,
             visible: scrollbarStyle_1.scrollbarStyle,
-            hidden: scrollInvisible
+            hidden: scrollbarStyle_1.scrollInvisible
         }[scrollVisibleType];
 }, function (_a) {
     var bodySpacingMode = _a.bodySpacingMode;
-    return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      padding-bottom: 0;\n      padding-left: 0;\n      padding-right: 0;\n    "], ["\n      padding-bottom: 0;\n      padding-left: 0;\n      padding-right: 0;\n    "])));
+    return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding-bottom: 0;\n      padding-left: 0;\n      padding-right: 0;\n    "], ["\n      padding-bottom: 0;\n      padding-left: 0;\n      padding-right: 0;\n    "])));
 });
-var S_Footer = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+var S_Footer = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_border;
 }, function (_a) {
@@ -165,4 +163,4 @@ var S_Footer = styled_components_1.default.div(templateObject_11 || (templateObj
     return theme.spacing.spacingD;
 });
 exports.default = DesktopBasicModal;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/src/desktop/panels/DesktopBasicModalWithTab/DesktopBasicModalWithTab.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 import type { PDSTextType } from '../../../common';
 export type DesktopBasicModalWithTabInfoType = {
     sideTabTitleText: PDSTextType;
@@ -9,6 +10,7 @@ type DesktopBasicModalWithTabProps = {
     size?: 'large' | 'medium';
     modalTitleText: PDSTextType;
     infoArray: DesktopBasicModalWithTabInfoType[];
+    scrollVisibleType?: ScrollVisibleType;
     btnMode?: 'btn_amount1' | 'btn_amount2' | 'btn_amount3';
     btn1Text: PDSTextType;
     btn2Text?: PDSTextType;
@@ -23,5 +25,5 @@ type DesktopBasicModalWithTabProps = {
     onClickBtn2?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onClickBtn3?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function DesktopBasicModalWithTab({ size, modalTitleText, infoArray, btnMode, btn1Text, btn2Text, btn3Text, btn1State, btn2State, btn3State, btn1Type, btn2Type, btn3Type, onClickBtn1, onClickBtn2, onClickBtn3 }: DesktopBasicModalWithTabProps): import("react").ReactPortal;
+declare function DesktopBasicModalWithTab({ size, modalTitleText, infoArray, scrollVisibleType, btnMode, btn1Text, btn2Text, btn3Text, btn1State, btn2State, btn3State, btn1Type, btn2Type, btn3Type, onClickBtn1, onClickBtn2, onClickBtn3 }: DesktopBasicModalWithTabProps): import("react").ReactPortal;
 export default DesktopBasicModalWithTab;