pds-dev-kit-web 2.2.193 → 2.2.194

package/dist/src/core/pricing/service.js

@@ -0,0 +1,157 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PricingService = void 0;
+var i18next_1 = __importDefault(require("i18next"));
+var formatter_1 = require("./formatter");
+var policy_1 = require("./policy");
+var translator_1 = require("./translator");
+var types_1 = require("./types");
+var validator_1 = require("./validator");
+/**
+ * PricingService는 상품의 판매가, 할인, 통화 포맷 등 가격 관련 비즈니스 로직을 처리하는 도메인 서비스입니다
+ */
+var PricingService = /** @class */ (function () {
+    function PricingService() {
+        this.browserLanguage = null;
+    }
+    PricingService.getInstance = function () {
+        if (!PricingService.instance) {
+            PricingService.instance = new PricingService();
+        }
+        return PricingService.instance;
+    };
+    PricingService.init = function (browserLanguage) {
+        var instance = PricingService.getInstance();
+        instance.setBrowserLanguage(browserLanguage);
+    };
+    PricingService.prototype.setBrowserLanguage = function (locale) {
+        this.browserLanguage = locale;
+        translator_1.PricingTranslator.setBrowserLanguage(locale);
+    };
+    //-----------------------------------------------------------------------------
+    // 유틸리티
+    //-----------------------------------------------------------------------------
+    PricingService.getCurrency = function (currency) {
+        return types_1.CURRENCY_MAP[currency];
+    };
+    /**
+     * publ이 지원하는 통화인지 반환합니다
+     */
+    PricingService.isSupportedCurrency = function (currency) {
+        return policy_1.SUPPORTED_CURRENCIES.includes(currency);
+    };
+    /**
+     * 채널의 통화 가격 정책을 반환합니다
+     */
+    PricingService.getCurrencyPricePolicy = function (channelCode, currency) {
+        var _a;
+        return ((_a = policy_1.CHANNEL_CURRENCY_PRICE_POLICIES[channelCode]) !== null && _a !== void 0 ? _a : policy_1.DEFAULT_CURRENCY_PRICE_POLICIES[currency]);
+    };
+    /**
+     * 유저의 선호 통화 기본값을 반환합니다
+     */
+    PricingService.getDefaultPreferredCurrency = function (userCountryCode) {
+        // #1 사용자 국가 코드
+        if (userCountryCode) {
+            var currency = policy_1.CURRENCY_BY_LOCALE_MAP[userCountryCode];
+            if (currency) {
+                return currency;
+            }
+        }
+        // #2 채널 기준 통화
+        // const { channel } = PricingService.getInstance();
+        // if (!channel) {
+        //   throw new Error('PricingService::getDefaultPreferredCurrency error: INVALID_CHANNEL');
+        // }
+        //
+        // return channel.baseCurrency as CurrencyCode;
+        return types_1.CurrencyCode.USD;
+    };
+    /**
+     * 환율 변환 유틸리티
+     *
+     * @param amount 금액 (from 통화 기준)
+     * @param from 원래 통화
+     * @param to 변환할 대상 통화
+     * @param exchangeRates 기준 통화 대비 환율 테이블 (예: { USD: 1, KRW: 1300, EUR: 0.9 })
+     * @returns 환산된 금액 (소수점 반올림 포함)
+     */
+    PricingService.exchangePrice = function (amount, from, to, exchangeRates) {
+        var _a;
+        var fromRate = exchangeRates[from];
+        var toRate = exchangeRates[to];
+        if (!fromRate || !toRate) {
+            throw new Error("PricingService::exchangePrice error: Missing rate for currency: ".concat(!fromRate ? from : to));
+        }
+        var baseAmount = amount / fromRate; // 기준 통화로 환산
+        var targetAmount = baseAmount * toRate;
+        var decimalDigits = (_a = types_1.CURRENCY_MAP[to].decimalDigits) !== null && _a !== void 0 ? _a : 0;
+        return Number(targetAmount.toFixed(decimalDigits));
+    };
+    /**
+     * 기준 통화 상품 가격을 선호 통화 가격으로 변환합니다
+     * @param price 기준 통화의 상품 가격
+     * @param preferredCurrency 선호 통화
+     * @param exchangeRates 기준 통화 대비 환율 테이블
+     */
+    PricingService.convertToPreferredPrice = function (price, preferredCurrency, exchangeRates) {
+        return {
+            amount: PricingService.exchangePrice(Number(price.amount), price.currency, preferredCurrency, exchangeRates),
+            currency: preferredCurrency
+        };
+    };
+    /**
+     * 채널 가격 정책 기반의 PriceTextField Props를 반환합니다
+     */
+    PricingService.getPriceTextFieldProps = function (channelCode, options) {
+        var _a, _b, _c, _d;
+        var policy = PricingService.getCurrencyPricePolicy(channelCode, options.currency);
+        var useRequiredValidation = (_b = (_a = options.validation) === null || _a === void 0 ? void 0 : _a.useRequiredValidation) !== null && _b !== void 0 ? _b : 'use';
+        var customMinAmount = (_c = options.validation) === null || _c === void 0 ? void 0 : _c.customMinAmount;
+        var customMaxAmount = (_d = options.validation) === null || _d === void 0 ? void 0 : _d.customMaxAmount;
+        var validation = {};
+        // Required validation
+        if (useRequiredValidation === 'use') {
+            validation.required = i18next_1.default.t('str_please_enter_price');
+        }
+        else {
+            validation.required = false;
+        }
+        validation.validate = {
+            min: function (value) {
+                var _a, _b;
+                var minAmount = customMinAmount !== null && customMinAmount !== void 0 ? customMinAmount : (options.isPromotionPrice
+                    ? Math.min(Number(policy.minPayment.amount), Number((_b = (_a = policy.minPromotionPayment) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : policy.minPayment.amount))
+                    : Number(policy.minPayment.amount));
+                return PricingService.validate.min(value, {
+                    minAmount: minAmount,
+                    currency: options.currency
+                });
+            },
+            max: function (value) {
+                var maxAmount = customMaxAmount !== null && customMaxAmount !== void 0 ? customMaxAmount : Number(policy.maxPayment.amount);
+                return PricingService.validate.max(value, {
+                    maxAmount: maxAmount,
+                    currency: options.currency
+                });
+            },
+            format: function (value) {
+                return PricingService.validate.format(value, {
+                    paymentUnit: policy.paymentUnit,
+                    currency: options.currency
+                });
+            }
+        };
+        return {
+            validation: validation
+        };
+    };
+    PricingService.format = formatter_1.PricingFormatter;
+    PricingService.translate = translator_1.PricingTranslator;
+    PricingService.validate = validator_1.PricingValidator;
+    return PricingService;
+}());
+exports.PricingService = PricingService;

package/dist/src/core/pricing/translator.d.ts

@@ -0,0 +1,26 @@
+import type { CurrencyCodeType, Price } from './types';
+export interface PricingTranslateOptions {
+    friendly?: boolean;
+}
+export declare class PricingTranslator {
+    private static browserLanguage;
+    static setBrowserLanguage(browserLanguage: string): void;
+    /**
+     * 통화 표시가 금액 앞에 오는지 브라우저 언어 기준으로 판단합니다.
+     *
+     * @example
+     * isCurrencyLeading('en-US') // true → "USD 10"
+     * isCurrencyLeading('ko-KR') // false → "10 KRW"
+     */
+    static isCurrencyLeading(browserLanguage: string | null): boolean;
+    /**
+     * 통화 문자열을 반환합니다
+     * @example "KRW" 또는 "원"
+     */
+    static currency(code: CurrencyCodeType, opts?: PricingTranslateOptions): string;
+    /**
+     * 포맷된 금액과 통화 문자열을 결합합니다
+     * @example "10,000 KRW" 또는 "10,000원"
+     */
+    static priceWithCurrency(price: Price, opts?: PricingTranslateOptions): string;
+}

package/dist/src/core/pricing/translator.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PricingTranslator = void 0;
+var formatter_1 = require("./formatter");
+var types_1 = require("./types");
+var PricingTranslator = /** @class */ (function () {
+    function PricingTranslator() {
+    }
+    PricingTranslator.setBrowserLanguage = function (browserLanguage) {
+        PricingTranslator.browserLanguage = browserLanguage;
+    };
+    /**
+     * 통화 표시가 금액 앞에 오는지 브라우저 언어 기준으로 판단합니다.
+     *
+     * @example
+     * isCurrencyLeading('en-US') // true → "USD 10"
+     * isCurrencyLeading('ko-KR') // false → "10 KRW"
+     */
+    PricingTranslator.isCurrencyLeading = function (browserLanguage) {
+        if (!browserLanguage) {
+            return true;
+        }
+        return !['ko', 'ko-kr'].includes(browserLanguage.toLowerCase());
+    };
+    /**
+     * 통화 문자열을 반환합니다
+     * @example "KRW" 또는 "원"
+     */
+    PricingTranslator.currency = function (code, opts) {
+        var currency = types_1.CURRENCY_MAP[code];
+        return (opts === null || opts === void 0 ? void 0 : opts.friendly) ? currency.friendlyName() : currency.name;
+    };
+    /**
+     * 포맷된 금액과 통화 문자열을 결합합니다
+     * @example "10,000 KRW" 또는 "10,000원"
+     */
+    PricingTranslator.priceWithCurrency = function (price, opts) {
+        var formattedAmount = formatter_1.PricingFormatter.price(price);
+        var currencyString = PricingTranslator.currency(price.currency, opts);
+        if (PricingTranslator.isCurrencyLeading(PricingTranslator.browserLanguage)) {
+            return "".concat(currencyString, " ").concat(formattedAmount);
+        }
+        return (opts === null || opts === void 0 ? void 0 : opts.friendly)
+            ? "".concat(formattedAmount).concat(currencyString)
+            : "".concat(formattedAmount, " ").concat(currencyString);
+    };
+    PricingTranslator.browserLanguage = null;
+    return PricingTranslator;
+}());
+exports.PricingTranslator = PricingTranslator;

package/dist/src/core/pricing/types.d.ts

@@ -0,0 +1,18 @@
+export declare enum CurrencyCode {
+    KRW = "KRW",
+    USD = "USD",
+    JPY = "JPY"
+}
+export type CurrencyCodeType = CurrencyCode | string;
+export interface Currency {
+    code: CurrencyCode;
+    name: string;
+    friendlyName: () => string;
+    decimalDigits: number;
+}
+export declare const CURRENCY_MAP: Record<CurrencyCode, Currency>;
+export interface Price {
+    amount: number | string;
+    currency: CurrencyCodeType;
+}
+export type ExchangeRateMap = Partial<Record<CurrencyCode, number>>;

package/dist/src/core/pricing/types.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CURRENCY_MAP = exports.CurrencyCode = void 0;
+var i18next_1 = __importDefault(require("i18next"));
+var CurrencyCode;
+(function (CurrencyCode) {
+    CurrencyCode["KRW"] = "KRW";
+    CurrencyCode["USD"] = "USD";
+    CurrencyCode["JPY"] = "JPY";
+})(CurrencyCode = exports.CurrencyCode || (exports.CurrencyCode = {}));
+exports.CURRENCY_MAP = (_a = {},
+    _a[CurrencyCode.KRW] = {
+        code: CurrencyCode.KRW,
+        name: CurrencyCode.KRW,
+        friendlyName: function () { return i18next_1.default.t('str_friendly_currency_won'); },
+        decimalDigits: 0
+    },
+    _a[CurrencyCode.USD] = {
+        code: CurrencyCode.USD,
+        name: CurrencyCode.USD,
+        friendlyName: function () { return i18next_1.default.t('str_friendly_currency_dollar'); },
+        decimalDigits: 2
+    },
+    _a[CurrencyCode.JPY] = {
+        code: CurrencyCode.JPY,
+        name: CurrencyCode.JPY,
+        friendlyName: function () { return i18next_1.default.t('str_friendly_currency_jpy'); },
+        decimalDigits: 0
+    },
+    _a);

package/dist/src/core/pricing/validator.d.ts

@@ -0,0 +1,29 @@
+import type { PricingTranslateOptions } from './translator';
+import type { CurrencyCode } from './types';
+export declare class PricingValidator {
+    /**
+     * 최소 결제 금액 검증
+     * @returns i18n 오류 메시지 | undefined
+     */
+    static min(value: string, options: {
+        minAmount: number;
+        currency: CurrencyCode;
+    }): string | undefined;
+    /**
+     * 최대 결제 금액 검증
+     * @returns i18n 오류 메시지 | undefined
+     */
+    static max(value: string, options: {
+        maxAmount: number;
+        currency: CurrencyCode;
+    }): string | undefined;
+    /**
+     * 가격 형식 검증: 소수 자릿수 또는 결제 단위
+     * @returns i18n 오류 메시지 | undefined
+     */
+    static format(value: string, options: {
+        paymentUnit: number;
+        currency: CurrencyCode;
+        currencyTranslateOptions?: PricingTranslateOptions;
+    }): string | undefined;
+}

package/dist/src/core/pricing/validator.js

@@ -0,0 +1,105 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PricingValidator = void 0;
+var i18next_1 = __importDefault(require("i18next"));
+var formatter_1 = require("./formatter");
+var translator_1 = require("./translator");
+var types_1 = require("./types");
+var PricingValidator = /** @class */ (function () {
+    function PricingValidator() {
+    }
+    /**
+     * 최소 결제 금액 검증
+     * @returns i18n 오류 메시지 | undefined
+     */
+    PricingValidator.min = function (value, options) {
+        if (!value)
+            return undefined;
+        var amount = Number(value.replace(/,/g, ''));
+        if (isNaN(amount)) {
+            return i18next_1.default.t('str_please_enter_price');
+        }
+        if (amount < options.minAmount) {
+            return i18next_1.default.t('str_min_price', {
+                minPrice: formatter_1.PricingFormatter.price({
+                    amount: options.minAmount,
+                    currency: options.currency
+                }),
+                currency: translator_1.PricingTranslator.currency(options.currency)
+            });
+        }
+        return undefined;
+    };
+    /**
+     * 최대 결제 금액 검증
+     * @returns i18n 오류 메시지 | undefined
+     */
+    PricingValidator.max = function (value, options) {
+        if (!value)
+            return undefined;
+        var amount = Number(value.replace(/,/g, ''));
+        if (isNaN(amount)) {
+            return i18next_1.default.t('str_please_enter_price');
+        }
+        if (amount > options.maxAmount) {
+            return i18next_1.default.t('str_max_price', {
+                maxPrice: formatter_1.PricingFormatter.price({
+                    amount: options.maxAmount,
+                    currency: options.currency
+                }),
+                currency: translator_1.PricingTranslator.currency(options.currency)
+            });
+        }
+        return undefined;
+    };
+    /**
+     * 가격 형식 검증: 소수 자릿수 또는 결제 단위
+     * @returns i18n 오류 메시지 | undefined
+     */
+    PricingValidator.format = function (value, options) {
+        if (!value)
+            return undefined;
+        var amount = Number(value.replace(/,/g, ''));
+        if (isNaN(amount)) {
+            return i18next_1.default.t('str_please_enter_price');
+        }
+        var decimalDigits = types_1.CURRENCY_MAP[options.currency].decimalDigits;
+        // #1 소수점 자리수 검증
+        var _a = value.split('.'), fraction = _a[1];
+        if (fraction && fraction.length > decimalDigits) {
+            return i18next_1.default.t('str_price_unit', {
+                priceUnit: formatter_1.PricingFormatter.price({
+                    amount: options.paymentUnit,
+                    currency: options.currency
+                }),
+                currency: types_1.CURRENCY_MAP[options.currency].name
+            });
+        }
+        // #2 단위 검증
+        function isDivisible(amount, unit) {
+            var precision = Math.pow(10, Math.max(getDecimalPlaces(amount), getDecimalPlaces(unit)));
+            var intAmount = Math.round(amount * precision);
+            var intUnit = Math.round(unit * precision);
+            return intAmount % intUnit === 0;
+        }
+        function getDecimalPlaces(value) {
+            var decimalStr = value.toString().split('.')[1];
+            return decimalStr ? decimalStr.length : 0;
+        }
+        if (!isDivisible(amount, options.paymentUnit)) {
+            return i18next_1.default.t('str_price_unit', {
+                priceUnit: formatter_1.PricingFormatter.price({
+                    amount: options.paymentUnit,
+                    currency: options.currency
+                }),
+                currency: types_1.CURRENCY_MAP[options.currency].name
+            });
+        }
+        return undefined;
+    };
+    return PricingValidator;
+}());
+exports.PricingValidator = PricingValidator;

package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.d.ts

@@ -25,6 +25,7 @@ export type TextFieldBaseProps = {
     textSize: DesktopFontSize;
     customFontSize?: string;
     textWeight: FontWeight;
+    hintTextWeight?: FontWeight;
     fieldPaddingRight?: number;
     fieldPaddingLeft?: number;
     fieldHeight?: number;
@@ -45,8 +46,9 @@ export type TextFieldBaseProps = {
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
+    onDelete?: () => void;
     inputRef?: any;
     [x: string]: any;
 } & Record<string, any>;
-declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, colorTheme, min, max, maxLength, textSize, customFontSize, textWeight, fieldPaddingRight, fieldPaddingLeft, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, suffixText, suffixTextRightSpacingMode, isFocused, autoComplete, stepperMode, stepperRightSpacing, innerSpinButtonSize, step, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, inputRef, ...rest }: TextFieldBaseProps): JSX.Element;
+declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, colorTheme, min, max, maxLength, textSize, customFontSize, textWeight, hintTextWeight, fieldPaddingRight, fieldPaddingLeft, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, suffixText, suffixTextRightSpacingMode, isFocused, autoComplete, stepperMode, stepperRightSpacing, innerSpinButtonSize, step, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, onDelete, inputRef, ...rest }: TextFieldBaseProps): JSX.Element;
 export default TextFieldBase;

package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js

@@ -61,11 +61,11 @@ var common_1 = require("../../../../common");
 var IconButton_1 = require("../../../components/IconButton");
 var constants_1 = require("./constants");
 function TextFieldBase(_a) {
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, inputMode = _a.inputMode, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, customFontSize = _a.customFontSize, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, fieldPaddingRight = _a.fieldPaddingRight, fieldPaddingLeft = _a.fieldPaddingLeft, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, suffixText = _a.suffixText, _r = _a.suffixTextRightSpacingMode, suffixTextRightSpacingMode = _r === void 0 ? 'none' : _r, isFocused = _a.isFocused, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.stepperMode, stepperMode = _t === void 0 ? 'none' : _t, _u = _a.stepperRightSpacing, stepperRightSpacing = _u === void 0 ? 1 : _u, _v = _a.innerSpinButtonSize, innerSpinButtonSize = _v === void 0 ? 16 : _v, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, inputRef = _a.inputRef, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "inputMode", "state", "colorTheme", "min", "max", "maxLength", "textSize", "customFontSize", "textWeight", "fieldPaddingRight", "fieldPaddingLeft", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "suffixText", "suffixTextRightSpacingMode", "isFocused", "autoComplete", "stepperMode", "stepperRightSpacing", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget", "inputRef"]);
-    var _w = (0, react_hook_form_1.useFormContext)(), register = _w.register, setValue = _w.setValue, getValues = _w.getValues, clearErrors = _w.clearErrors;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, inputMode = _a.inputMode, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, customFontSize = _a.customFontSize, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, _m = _a.hintTextWeight, hintTextWeight = _m === void 0 ? 'normal' : _m, fieldPaddingRight = _a.fieldPaddingRight, fieldPaddingLeft = _a.fieldPaddingLeft, _o = _a.fieldHeight, fieldHeight = _o === void 0 ? 48 : _o, _p = _a.deleteIconMode, deleteIconMode = _p === void 0 ? 'use' : _p, _q = _a.deleteIconSize, deleteIconSize = _q === void 0 ? 20 : _q, _r = _a.deleteIconColor, deleteIconColor = _r === void 0 ? 'ui_cpnt_button_icon_disabled' : _r, suffixText = _a.suffixText, _s = _a.suffixTextRightSpacingMode, suffixTextRightSpacingMode = _s === void 0 ? 'none' : _s, isFocused = _a.isFocused, _t = _a.autoComplete, autoComplete = _t === void 0 ? 'on' : _t, _u = _a.stepperMode, stepperMode = _u === void 0 ? 'none' : _u, _v = _a.stepperRightSpacing, stepperRightSpacing = _v === void 0 ? 1 : _v, _w = _a.innerSpinButtonSize, innerSpinButtonSize = _w === void 0 ? 16 : _w, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, onDelete = _a.onDelete, inputRef = _a.inputRef, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "inputMode", "state", "colorTheme", "min", "max", "maxLength", "textSize", "customFontSize", "textWeight", "hintTextWeight", "fieldPaddingRight", "fieldPaddingLeft", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "suffixText", "suffixTextRightSpacingMode", "isFocused", "autoComplete", "stepperMode", "stepperRightSpacing", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget", "onDelete", "inputRef"]);
+    var _x = (0, react_hook_form_1.useFormContext)(), register = _x.register, setValue = _x.setValue, getValues = _x.getValues, clearErrors = _x.clearErrors;
     var timeout;
     var suffixTextRef = (0, react_1.useRef)(null);
-    var _x = (0, react_1.useState)(0), suffixTextWidth = _x[0], setSuffixTextWidth = _x[1];
+    var _y = (0, react_1.useState)(0), suffixTextWidth = _y[0], setSuffixTextWidth = _y[1];
     // NOTE suffixText가 변할때마다 suffixText가 차지하는 너비를 알아내어 suffixTextWidth에 담는다.
     (0, react_1.useEffect)(function () {
         var calculateDivWidth = function () {
@@ -165,7 +165,7 @@ function TextFieldBase(_a) {
         }
     }
     var textAreaRef = (0, react_1.useRef)(null);
-    var _y = register(name, validation), ref = _y.ref, refRest = __rest(_y, ["ref"]);
+    var _z = register(name, validation), ref = _z.ref, refRest = __rest(_z, ["ref"]);
     (0, react_1.useEffect)(function () {
         if (textAreaRef === null || textAreaRef.current === null) {
             return;
@@ -205,7 +205,12 @@ function TextFieldBase(_a) {
         textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
     }, []);
     function deleteValue() {
-        setValue(name, '', { shouldDirty: true });
+        if (onDelete) {
+            onDelete();
+        }
+        else {
+            setValue(name, '', { shouldDirty: true });
+        }
     }
     // NOTE: input의 type이 number일때, e나 E의 경우 숫자로 취급되어 입력이 가능하지만, publ의 기획상 막아야하기 때문에 생성한 함수
     var preventEKeyword = function (e) {
@@ -226,7 +231,7 @@ function TextFieldBase(_a) {
     }
     var S_TextFieldBase = function () {
         if (textLineType === 'single') {
-            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize, isFocused: isFocused, stepperRightSpacing: stepperRightSpacing }, { children: [(0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_up_stepper", fillType: "fill", size: innerSpinButtonSize }), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize })] }))), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, inputMode: inputMode, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, deleteIconMode: deleteIconMode, suffixText: suffixText, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing, isFocused: isFocused, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
+            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize, isFocused: isFocused, stepperRightSpacing: stepperRightSpacing }, { children: [(0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_up_stepper", fillType: "fill", size: innerSpinButtonSize }), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize })] }))), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, inputMode: inputMode, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, hintTextWeight: hintTextWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, deleteIconMode: deleteIconMode, suffixText: suffixText, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing, isFocused: isFocused, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
                             ref(e);
                             if (inputRef) {
                                 inputRef.current = e;
@@ -234,7 +239,7 @@ function TextFieldBase(_a) {
                         } })), (deleteIconMode === 'use' || suffixText) && ((0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, innerSpinButtonSize: innerSpinButtonSize }, { children: [deleteIconMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ innerSpinButtonSize: innerSpinButtonSize, deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, isFocused: isFocused, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing }, { children: isFocused && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue })) }))), suffixText && ((0, jsx_runtime_1.jsxs)(S_SuffixTextBox, __assign({ ref: suffixTextRef }, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", colorOverride: stepperMode === 'use' && isFocused ? 'ui_106' : undefined, textAlign: "right", singleLineMode: "use" }), suffixTextRightSpacingMode === 'use' && ((0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }))] })))] })))] }));
         }
         if (textLineType === 'multi') {
-            return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
+            return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, hintTextWeight: hintTextWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
                     ref(e);
                     if (inputRef) {
                         inputRef.current = e;
@@ -242,7 +247,7 @@ function TextFieldBase(_a) {
                 } })));
         }
         if (textLineType === 'auto') {
-            return ((0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
+            return ((0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, customFontSize: customFontSize, textWeight: textWeight, hintTextWeight: hintTextWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
                     ref(e);
                     if (textAreaRef) {
                         textAreaRef.current = e;
@@ -355,8 +360,8 @@ var basicStyle = (0, styled_components_1.css)(templateObject_9 || (templateObjec
     var textSize = _a.textSize, customFontSize = _a.customFontSize;
     return customFontSize ? customFontSize : common_1.desktopFontSize[textSize];
 }, function (_a) {
-    var textWeight = _a.textWeight;
-    return common_1.fontWeight[textWeight];
+    var textWeight = _a.textWeight, hintTextWeight = _a.hintTextWeight;
+    return common_1.fontWeight[hintTextWeight || textWeight];
 }, function (_a) {
     var textSize = _a.textSize;
     return common_1.desktopLineHeight[textSize];
@@ -467,7 +472,7 @@ var stepper = (0, styled_components_1.css)(templateObject_13 || (templateObject_
     }
     return;
 });
-var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  -webkit-appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"], ["\n  -webkit-appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"])), function (_a) {
+var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  -webkit-appearance: none;\n  appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"], ["\n  -webkit-appearance: none;\n  appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"])), function (_a) {
     var innerSpinButtonSize = _a.innerSpinButtonSize;
     return innerSpinButtonSize && "".concat(innerSpinButtonSize * 2, "px");
 }, function (_a) {

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

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { Path } from 'react-hook-form';
+import { CurrencyCode, ExchangeRateMap } from '../../../core/pricing';
+import type { IFormValues, PDSTextType } from '../../../common';
+import type { TextFieldBaseProps } from '../../common/components/TextFieldBase/TextFieldBase';
+export declare const DEFAULT_DECIMAL_PLACES: {
+    readonly KRW: 0;
+    readonly USD: 2;
+};
+type Props = {
+    name: Path<IFormValues>;
+    hintText?: PDSTextType;
+    defaultAmount?: number;
+    size?: 'large' | 'rlarge';
+    responsiveMode?: 'none' | 'use';
+    state?: 'normal' | 'read_only' | 'disabled';
+    dropdownState?: 'normal' | 'read_only' | 'disabled';
+    customWidth?: string;
+    baseCurrency?: CurrencyCode;
+    currencies?: CurrencyCode[];
+    decimalPlaces?: Record<string, number>;
+    exchangeRates?: ExchangeRateMap;
+    hintTextFontWeight?: 'normal' | 'bold';
+    validation?: any;
+    useRequiredValidation?: 'none' | 'use';
+    returnType?: 'object' | 'string' | 'rawValue';
+    deleteBtnMode?: 'none' | 'use';
+    minPriceAmount?: string | number;
+    onChange?: (value: string) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
+    onCurrencyChange?: (selectedCurrency: string) => void;
+    onValueChange?: (data: {
+        selectedCurrency: string;
+        baseCurrencyValue: number;
+        calculatedValue: number;
+        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;
+export default PriceTextField;