pds-dev-kit-web 2.2.200 → 2.2.201

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

@@ -14,7 +14,7 @@ type Props = {
     size?: 'large' | 'rlarge';
     responsiveMode?: 'none' | 'use';
     state?: 'normal' | 'read_only' | 'disabled';
-    dropdownState?: 'normal' | 'read_only' | 'disabled';
+    dropdownState?: 'normal' | 'read_only';
     customWidth?: string;
     baseCurrency?: CurrencyCode;
     currencies?: CurrencyCode[];
@@ -23,6 +23,7 @@ type Props = {
     hintTextFontWeight?: 'normal' | 'bold';
     validation?: any;
     useRequiredValidation?: 'none' | 'use';
+    useDotBadge?: 'none' | 'use';
     returnType?: 'object' | 'string' | 'rawValue';
     deleteBtnMode?: 'none' | 'use';
     minPriceAmount?: string | number;
@@ -38,5 +39,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, 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, returnType, deleteBtnMode, minPriceAmount, onChange, onExChange, onBlur, onFocus, onTarget, onCurrencyChange, onValueChange }: Props): JSX.Element;
 export default PriceTextField;

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

@@ -65,18 +65,18 @@ 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.returnType, returnType = _s === void 0 ? 'object' : _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 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 t = (0, react_i18next_1.useTranslation)('translation').t;
-    var _u = (0, react_1.useState)(defaultAmount ? String(defaultAmount) : ''), baseCurrencyValue = _u[0], setBaseCurrencyValue = _u[1];
-    var _v = (0, react_1.useState)(''), displayValue = _v[0], setDisplayValue = _v[1];
-    var _w = (0, react_1.useState)(baseCurrency), selectedCurrency = _w[0], setSelectedCurrency = _w[1];
-    var _x = (0, react_1.useState)(false), isDropdownFocused = _x[0], setIsDropdownFocused = _x[1];
-    var _y = (0, react_1.useState)(false), isInputFocused = _y[0], setIsInputFocused = _y[1];
-    var _z = (0, react_1.useState)(null), contextMenuSizeOffset = _z[0], setContextMenuSizeOffset = _z[1];
-    var _0 = (0, react_1.useState)(null), dropdownPositionOffset = _0[0], setDropdownPositionOffset = _0[1];
+    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 contextMenuRef = (0, react_1.useRef)(null);
     var dropdownRef = (0, react_1.useRef)(null);
-    var _1 = (0, react_hook_form_1.useFormContext)(), register = _1.register, trigger = _1.trigger, errors = _1.formState.errors, setValue = _1.setValue;
+    var _2 = (0, react_hook_form_1.useFormContext)(), register = _2.register, trigger = _2.trigger, errors = _2.formState.errors, setValue = _2.setValue;
     /** 기본 validation */
     var defaultValidation = (0, react_1.useMemo)(function () {
         var validationConfig = {};
@@ -364,22 +364,40 @@ function PriceTextField(_a) {
     }
     var getArrowIconColorKey = function () {
         if (colorTheme === 'dark') {
-            if (dropdownState === 'disabled' || dropdownState === 'read_only') {
+            if (dropdownState === 'read_only') {
                 return 'ui_cpnt_dropdown_text_darktheme_disabled';
             }
             return 'ui_cpnt_dropdown_icon_darktheme_default';
         }
         if (colorTheme === 'transparent') {
-            if (dropdownState === 'disabled' || dropdownState === 'read_only') {
+            if (dropdownState === 'read_only') {
                 return 'ui_cpnt_dropdown_icon_02';
             }
             return 'ui_cpnt_dropdown_icon_white_default';
         }
-        if (dropdownState === 'disabled' || dropdownState === 'read_only') {
+        if (dropdownState === 'read_only') {
             return 'ui_cpnt_dropdown_icon_02';
         }
         return 'ui_cpnt_dropdown_icon_01';
     };
+    var getDropdownTextColorKey = function () {
+        if (colorTheme === 'dark') {
+            if (dropdownState === 'read_only') {
+                return 'ui_cpnt_button_text_darktheme_default';
+            }
+            return 'ui_cpnt_button_text_darktheme_enabled';
+        }
+        if (colorTheme === 'transparent') {
+            if (dropdownState === 'read_only') {
+                return 'ui_cpnt_button_text_disabled';
+            }
+            return 'ui_cpnt_button_text_enabled';
+        }
+        if (dropdownState === 'read_only') {
+            return 'ui_cpnt_button_text_disabled';
+        }
+        return 'ui_cpnt_button_text_enabled';
+    };
     var getDropdownContextMenuCustomWidth = function () {
         var _a;
         if (customWidth) {
@@ -391,7 +409,7 @@ function PriceTextField(_a) {
         return '';
     };
     var handleDropdownClick = function () {
-        if (dropdownState === 'disabled' || dropdownState === 'read_only') {
+        if (dropdownState === 'read_only') {
             return;
         }
         setIsDropdownFocused(!isDropdownFocused);
@@ -422,7 +440,7 @@ function PriceTextField(_a) {
                                         amount: minPriceAmount || (baseCurrency === pricing_1.CurrencyCode.KRW ? 300 : 5),
                                         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: [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: "form2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", 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 &&
+                                }), 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 &&
                 (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", customWidth: getDropdownContextMenuCustomWidth() }, { children: currencyOptions.map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleCurrencySelect(el); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: "large", isSelected: selectedCurrency === el.currency, state: el.state, displayType: "text_only" }) }), el.value)); }) })) })), document.body), ((_c = (0, types_1.getErrorByName)(errors, name)) === null || _c === void 0 ? void 0 : _c.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, { children: (0, types_1.getErrorByName)(errors, name).message }))] })));
 }
 var S_PriceTextField = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {

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

@@ -14,7 +14,7 @@ type Props = {
     size?: 'large' | 'rlarge';
     responsiveMode?: 'none' | 'use';
     state?: 'normal' | 'read_only' | 'disabled';
-    dropdownState?: 'normal' | 'read_only' | 'disabled';
+    dropdownState?: 'normal' | 'read_only';
     customWidth?: string;
     baseCurrency?: CurrencyCode;
     currencies?: CurrencyCode[];
@@ -23,6 +23,7 @@ type Props = {
     hintTextFontWeight?: 'normal' | 'bold';
     validation?: any;
     useRequiredValidation?: 'none' | 'use';
+    useDotBadge?: 'none' | 'use';
     returnType?: 'object' | 'string' | 'rawValue';
     deleteBtnMode?: 'none' | 'use';
     minPriceAmount?: string | number;
@@ -37,5 +38,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, returnType, deleteBtnMode, minPriceAmount, onChange, 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, returnType, deleteBtnMode, minPriceAmount, onChange, onBlur, onFocus, onTarget, onCurrencyChange, onValueChange }: Props): JSX.Element;
 export default PriceTextField;

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

@@ -65,18 +65,18 @@ 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.returnType, returnType = _s === void 0 ? 'object' : _s, _t = _a.deleteBtnMode, deleteBtnMode = _t === void 0 ? 'use' : _t, minPriceAmount = _a.minPriceAmount, onChange = _a.onChange, 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.returnType, returnType = _t === void 0 ? 'object' : _t, _u = _a.deleteBtnMode, deleteBtnMode = _u === void 0 ? 'use' : _u, minPriceAmount = _a.minPriceAmount, onChange = _a.onChange, 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 _u = (0, react_1.useState)(defaultAmount ? String(defaultAmount) : ''), baseCurrencyValue = _u[0], setBaseCurrencyValue = _u[1];
-    var _v = (0, react_1.useState)(''), displayValue = _v[0], setDisplayValue = _v[1];
-    var _w = (0, react_1.useState)(baseCurrency), selectedCurrency = _w[0], setSelectedCurrency = _w[1];
-    var _x = (0, react_1.useState)(false), isDropdownFocused = _x[0], setIsDropdownFocused = _x[1];
-    var _y = (0, react_1.useState)(false), isInputFocused = _y[0], setIsInputFocused = _y[1];
-    var _z = (0, react_1.useState)(null), contextMenuSizeOffset = _z[0], setContextMenuSizeOffset = _z[1];
-    var _0 = (0, react_1.useState)(null), dropdownPositionOffset = _0[0], setDropdownPositionOffset = _0[1];
+    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 contextMenuRef = (0, react_1.useRef)(null);
     var dropdownRef = (0, react_1.useRef)(null);
-    var _1 = (0, react_hook_form_1.useFormContext)(), register = _1.register, trigger = _1.trigger, errors = _1.formState.errors, setValue = _1.setValue;
+    var _2 = (0, react_hook_form_1.useFormContext)(), register = _2.register, trigger = _2.trigger, errors = _2.formState.errors, setValue = _2.setValue;
     /** 기본 validation */
     var defaultValidation = (0, react_1.useMemo)(function () {
         var validationConfig = {};
@@ -361,22 +361,40 @@ function PriceTextField(_a) {
     }
     var getArrowIconColorKey = function () {
         if (colorTheme === 'dark') {
-            if (dropdownState === 'disabled' || dropdownState === 'read_only') {
+            if (dropdownState === 'read_only') {
                 return 'ui_cpnt_dropdown_text_darktheme_disabled';
             }
             return 'ui_cpnt_dropdown_icon_darktheme_default';
         }
         if (colorTheme === 'transparent') {
-            if (dropdownState === 'disabled' || dropdownState === 'read_only') {
+            if (dropdownState === 'read_only') {
                 return 'ui_cpnt_dropdown_icon_02';
             }
             return 'ui_cpnt_dropdown_icon_white_default';
         }
-        if (dropdownState === 'disabled' || dropdownState === 'read_only') {
+        if (dropdownState === 'read_only') {
             return 'ui_cpnt_dropdown_icon_02';
         }
         return 'ui_cpnt_dropdown_icon_01';
     };
+    var getDropdownTextColorKey = function () {
+        if (colorTheme === 'dark') {
+            if (dropdownState === 'read_only') {
+                return 'ui_cpnt_button_text_darktheme_default';
+            }
+            return 'ui_cpnt_button_text_darktheme_enabled';
+        }
+        if (colorTheme === 'transparent') {
+            if (dropdownState === 'read_only') {
+                return 'ui_cpnt_button_text_disabled';
+            }
+            return 'ui_cpnt_button_text_enabled';
+        }
+        if (dropdownState === 'read_only') {
+            return 'ui_cpnt_button_text_disabled';
+        }
+        return 'ui_cpnt_button_text_enabled';
+    };
     var getDropdownContextMenuCustomWidth = function () {
         var _a;
         if (customWidth) {
@@ -388,7 +406,7 @@ function PriceTextField(_a) {
         return '';
     };
     var handleDropdownClick = function () {
-        if (dropdownState === 'disabled' || dropdownState === 'read_only') {
+        if (dropdownState === 'read_only') {
             return;
         }
         setIsDropdownFocused(!isDropdownFocused);
@@ -419,7 +437,7 @@ function PriceTextField(_a) {
                                         amount: minPriceAmount || (baseCurrency === pricing_1.CurrencyCode.KRW ? 300 : 5),
                                         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: [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: "form2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", 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 &&
+                                }), 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 &&
                 (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", customWidth: getDropdownContextMenuCustomWidth() }, { children: currencyOptions.map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleCurrencySelect(el); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: "large", isSelected: selectedCurrency === el.currency, state: el.state, displayType: "text_only" }) }), el.value)); }) })) })), document.body), ((_c = (0, types_1.getErrorByName)(errors, name)) === null || _c === void 0 ? void 0 : _c.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, { children: (0, types_1.getErrorByName)(errors, name).message }))] })));
 }
 var S_PriceTextField = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {

package/package.json

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

package/release-note.md

@@ -1,6 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.200]
+## [v2.2.201]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1334] 스크롤 유무에 따라 레이아웃 밀림 이슈 해결
+* PriceTextField Dropdown 옵션 수정
+* currency exchangeRate 사용 방법 스토리 추가