pds-dev-kit-web 1.4.20 → 1.4.23

package/dist/src/common/components/Navigations/ContextTextLabelNav.d.ts

@@ -6,6 +6,7 @@ declare type Props = {
     text: string;
     openNewTab: boolean;
     preventLineChange?: boolean;
+    onClick?: () => void;
 };
-declare function TextLabelNav({ to, text, openNewTab, isActive, preventLineChange }: Props, ref: ForwardedRefType<HTMLAnchorElement>): JSX.Element;
+declare function TextLabelNav({ to, text, openNewTab, isActive, preventLineChange, onClick }: Props, ref: ForwardedRefType<HTMLAnchorElement>): JSX.Element;
 export default TextLabelNav;

package/dist/src/common/components/Navigations/ContextTextLabelNav.js

@@ -7,9 +7,9 @@ var react_1 = __importDefault(require("react"));
 var desktop_1 = require("../../../desktop");
 var NavLink_1 = __importDefault(require("./NavLink"));
 function TextLabelNav(_a, ref) {
-    var to = _a.to, text = _a.text, openNewTab = _a.openNewTab, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.preventLineChange, preventLineChange = _c === void 0 ? false : _c;
-    return preventLineChange ? (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab, style: { width: 'max-content' } },
-        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: "form2Regular", ellipsisMode: "use", lineLimit: 1 }))) : (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab },
+    var to = _a.to, text = _a.text, openNewTab = _a.openNewTab, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.preventLineChange, preventLineChange = _c === void 0 ? false : _c, onClick = _a.onClick;
+    return preventLineChange ? (react_1.default.createElement(NavLink_1.default, { onClick: onClick, ref: ref, to: to, openNewTab: openNewTab, style: { width: 'max-content' } },
+        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: "form2Regular", ellipsisMode: "use", lineLimit: 1 }))) : (react_1.default.createElement(NavLink_1.default, { onClick: onClick, ref: ref, to: to, openNewTab: openNewTab },
         react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: "form2Regular" })));
 }
 exports.default = TextLabelNav;

package/dist/src/common/hooks/useDetectOverflow.js

@@ -30,7 +30,7 @@ function useDetectOverflow(ref, detectOnResize) {
         else {
             setIsScrollBoxStart(false);
         }
-        if (Math.ceil(ref.node.scrollLeft + ref.node.clientWidth) === ref.node.scrollWidth) {
+        if (Math.abs(ref.node.scrollLeft + ref.node.clientWidth - ref.node.scrollWidth) <= 5) {
             setIsScrollBoxEnd(true);
         }
         else {

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -173,5 +173,7 @@
     "sys_base_dimmed_01": "black/opacity30",
     "sys_kakao": "kakaoyellow",
     "sys_border_line_12": "grey100",
-    "sys_component_base_08": "white"
+    "sys_component_base_08": "white",
+    "sys_text_social_login_01": "grey900",
+    "sys_text_social_login_02": "grey900"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -173,5 +173,7 @@
     "sys_base_dimmed_01": "white/opacity30",
     "sys_kakao": "kakaoyellow",
     "sys_border_line_12": "grey100",
-    "sys_component_base_08": "black"
+    "sys_component_base_08": "black",
+    "sys_text_social_login_01": "white",
+    "sys_text_social_login_02": "grey900"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -523,5 +523,8 @@
     "ui_45": "sys_component_base_08",
     "ui_46": "sys_base_dimmed_01",
     "ui_47": "sys_kakao",
-    "ui_cpnt_sheet_base_03": "sys_component_base_white_opacity00"
+    "ui_cpnt_sheet_base_03": "sys_component_base_white_opacity00",
+    "ui_48": "sys_text_social_login_01",
+    "ui_49": "sys_text_social_login_02",
+    "ui_50": "sys_text_white"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -235,6 +235,8 @@ declare const colorSet: {
         sys_kakao: string;
         sys_border_line_12: string;
         sys_component_base_08: string;
+        sys_text_social_login_01: string;
+        sys_text_social_login_02: string;
     };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
@@ -412,6 +414,8 @@ declare const colorSet: {
         sys_kakao: string;
         sys_border_line_12: string;
         sys_component_base_08: string;
+        sys_text_social_login_01: string;
+        sys_text_social_login_02: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -939,6 +943,9 @@ declare const colorSet: {
         ui_46: string;
         ui_47: string;
         ui_cpnt_sheet_base_03: string;
+        ui_48: string;
+        ui_49: string;
+        ui_50: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -524,4 +524,7 @@ export interface UITheme {
     ui_46: string;
     ui_47: string;
     ui_cpnt_sheet_base_03: string;
+    ui_48: string;
+    ui_49: string;
+    ui_50: string;
 }

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

@@ -23,6 +23,9 @@ declare type Props = {
     column10HeaderText?: TFunctionResult;
     column10Width?: ColumnWidthType;
     dropdownMode?: 'none' | 'dropdown_amount1' | 'dropdown_amount2' | 'dropdown_amount3';
+    dropdown1Value?: PDSValueOption;
+    dropdown2Value?: PDSValueOption;
+    dropdown3Value?: PDSValueOption;
     dropdown1DefaultText?: PDSValueOption;
     dropdown2DefaultText?: PDSValueOption;
     dropdown3DefaultText?: PDSValueOption;
@@ -72,5 +75,5 @@ declare type Props = {
     /** @deprecated onClickTBtn3를 대신 사용하세요. */
     onClickMBtn3?: () => void;
 };
-declare function AdminList({ selectionMode, headerRowMode, column2HeaderText, column3HeaderText, column3Width, column4HeaderText, column4Width, column5HeaderText, column5Width, column6HeaderText, column6Width, column7HeaderText, column7Width, column8HeaderText, column8Width, column9HeaderText, column9Width, column10HeaderText, column10Width, dropdownMode, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, quickActionBtnMode, quickActionBtn1Text, quickActionBtn2Text, quickActionBtn3Text, quickActionBtnType, quickActionBtn1State, quickActionBtn2State, quickActionBtn3State, tBtnMode, tBtn1Text, tBtn2Text, tBtn3Text, emptyText, scrollMode, scrollVisibleType, selectedIds, maintainIds, children, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickTBtn1, onClickTBtn2, onClickTBtn3, onClickQuickActionBtn1, onClickQuickActionBtn2, onClickQuickActionBtn3, onSelect, mBtnMode, mBtn1Text, mBtn2Text, mBtn3Text, onClickMBtn1, onClickMBtn2, onClickMBtn3 }: Props): JSX.Element;
+declare function AdminList({ selectionMode, headerRowMode, column2HeaderText, column3HeaderText, column3Width, column4HeaderText, column4Width, column5HeaderText, column5Width, column6HeaderText, column6Width, column7HeaderText, column7Width, column8HeaderText, column8Width, column9HeaderText, column9Width, column10HeaderText, column10Width, dropdownMode, dropdown1Value, dropdown2Value, dropdown3Value, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, quickActionBtnMode, quickActionBtn1Text, quickActionBtn2Text, quickActionBtn3Text, quickActionBtnType, quickActionBtn1State, quickActionBtn2State, quickActionBtn3State, tBtnMode, tBtn1Text, tBtn2Text, tBtn3Text, emptyText, scrollMode, scrollVisibleType, selectedIds, maintainIds, children, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickTBtn1, onClickTBtn2, onClickTBtn3, onClickQuickActionBtn1, onClickQuickActionBtn2, onClickQuickActionBtn3, onSelect, mBtnMode, mBtn1Text, mBtn2Text, mBtn3Text, onClickMBtn1, onClickMBtn2, onClickMBtn3 }: Props): JSX.Element;
 export default AdminList;

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

@@ -53,7 +53,7 @@ var TextLabel_1 = require("../TextLabel");
 var BulkActionBar_1 = __importDefault(require("./BulkActionBar"));
 var HeaderRow_1 = __importDefault(require("./HeaderRow"));
 function AdminList(_a) {
-    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, _c = _a.headerRowMode, headerRowMode = _c === void 0 ? 'use' : _c, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _d = _a.column3Width, column3Width = _d === void 0 ? 'small' : _d, column4HeaderText = _a.column4HeaderText, _e = _a.column4Width, column4Width = _e === void 0 ? 'small' : _e, column5HeaderText = _a.column5HeaderText, _f = _a.column5Width, column5Width = _f === void 0 ? 'small' : _f, column6HeaderText = _a.column6HeaderText, _g = _a.column6Width, column6Width = _g === void 0 ? 'small' : _g, column7HeaderText = _a.column7HeaderText, _h = _a.column7Width, column7Width = _h === void 0 ? 'small' : _h, column8HeaderText = _a.column8HeaderText, _j = _a.column8Width, column8Width = _j === void 0 ? 'small' : _j, column9HeaderText = _a.column9HeaderText, _k = _a.column9Width, column9Width = _k === void 0 ? 'small' : _k, column10HeaderText = _a.column10HeaderText, _l = _a.column10Width, column10Width = _l === void 0 ? 'small' : _l, _m = _a.dropdownMode, dropdownMode = _m === void 0 ? 'dropdown_amount1' : _m, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, _o = _a.quickActionBtnMode, quickActionBtnMode = _o === void 0 ? 'btn_amount2' : _o, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _p = _a.quickActionBtnType, quickActionBtnType = _p === void 0 ? 'fix' : _p, _q = _a.quickActionBtn1State, quickActionBtn1State = _q === void 0 ? 'normal' : _q, _r = _a.quickActionBtn2State, quickActionBtn2State = _r === void 0 ? 'normal' : _r, _s = _a.quickActionBtn3State, quickActionBtn3State = _s === void 0 ? 'normal' : _s, tBtnMode = _a.tBtnMode, tBtn1Text = _a.tBtn1Text, tBtn2Text = _a.tBtn2Text, tBtn3Text = _a.tBtn3Text, emptyText = _a.emptyText, _t = _a.scrollMode, scrollMode = _t === void 0 ? 'infinite' : _t, _u = _a.scrollVisibleType, scrollVisibleType = _u === void 0 ? 'moving' : _u, selectedIds = _a.selectedIds, maintainIds = _a.maintainIds, children = _a.children, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickTBtn1 = _a.onClickTBtn1, onClickTBtn2 = _a.onClickTBtn2, onClickTBtn3 = _a.onClickTBtn3, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onSelect = _a.onSelect, _v = _a.mBtnMode, mBtnMode = _v === void 0 ? 'mbtn_amount1' : _v, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3;
+    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, _c = _a.headerRowMode, headerRowMode = _c === void 0 ? 'use' : _c, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _d = _a.column3Width, column3Width = _d === void 0 ? 'small' : _d, column4HeaderText = _a.column4HeaderText, _e = _a.column4Width, column4Width = _e === void 0 ? 'small' : _e, column5HeaderText = _a.column5HeaderText, _f = _a.column5Width, column5Width = _f === void 0 ? 'small' : _f, column6HeaderText = _a.column6HeaderText, _g = _a.column6Width, column6Width = _g === void 0 ? 'small' : _g, column7HeaderText = _a.column7HeaderText, _h = _a.column7Width, column7Width = _h === void 0 ? 'small' : _h, column8HeaderText = _a.column8HeaderText, _j = _a.column8Width, column8Width = _j === void 0 ? 'small' : _j, column9HeaderText = _a.column9HeaderText, _k = _a.column9Width, column9Width = _k === void 0 ? 'small' : _k, column10HeaderText = _a.column10HeaderText, _l = _a.column10Width, column10Width = _l === void 0 ? 'small' : _l, _m = _a.dropdownMode, dropdownMode = _m === void 0 ? 'dropdown_amount1' : _m, dropdown1Value = _a.dropdown1Value, dropdown2Value = _a.dropdown2Value, dropdown3Value = _a.dropdown3Value, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, _o = _a.quickActionBtnMode, quickActionBtnMode = _o === void 0 ? 'btn_amount2' : _o, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _p = _a.quickActionBtnType, quickActionBtnType = _p === void 0 ? 'fix' : _p, _q = _a.quickActionBtn1State, quickActionBtn1State = _q === void 0 ? 'normal' : _q, _r = _a.quickActionBtn2State, quickActionBtn2State = _r === void 0 ? 'normal' : _r, _s = _a.quickActionBtn3State, quickActionBtn3State = _s === void 0 ? 'normal' : _s, tBtnMode = _a.tBtnMode, tBtn1Text = _a.tBtn1Text, tBtn2Text = _a.tBtn2Text, tBtn3Text = _a.tBtn3Text, emptyText = _a.emptyText, _t = _a.scrollMode, scrollMode = _t === void 0 ? 'infinite' : _t, _u = _a.scrollVisibleType, scrollVisibleType = _u === void 0 ? 'moving' : _u, selectedIds = _a.selectedIds, maintainIds = _a.maintainIds, children = _a.children, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickTBtn1 = _a.onClickTBtn1, onClickTBtn2 = _a.onClickTBtn2, onClickTBtn3 = _a.onClickTBtn3, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onSelect = _a.onSelect, _v = _a.mBtnMode, mBtnMode = _v === void 0 ? 'mbtn_amount1' : _v, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3;
     var selectAllMethods = (0, react_hook_form_1.useForm)();
     var checkboxMethods = (0, react_hook_form_1.useForm)();
     var isAllCheckboxSelected = (0, react_hook_form_1.useWatch)({ name: 'all', control: selectAllMethods.control });
@@ -202,7 +202,7 @@ function AdminList(_a) {
         }
     };
     return (react_1.default.createElement(S_AdminList, null,
-        isBulkActionBarOpen && (react_1.default.createElement(BulkActionBar_1.default, { itemCount: totalItemCount, dropdownMode: dropdownMode, dropdown1DefaultText: dropdown1DefaultText, dropdown2DefaultText: dropdown2DefaultText, dropdown3DefaultText: dropdown3DefaultText, dropdown1ValueArray: dropdown1ValueArray, dropdown2ValueArray: dropdown2ValueArray, dropdown3ValueArray: dropdown3ValueArray, tBtnMode: btnMode(), tBtn1Text: tBtn1Text || mBtn1Text, tBtn2Text: tBtn2Text || mBtn2Text, tBtn3Text: tBtn3Text || mBtn3Text, onChangeDropdown1: onChangeDropdown1, onChangeDropdown2: onChangeDropdown2, onChangeDropdown3: onChangeDropdown3, onClickTBtn1: onClickTBtn1 || onClickMBtn1, onClickTBtn2: onClickTBtn2 || onClickMBtn2, onClickTBtn3: onClickTBtn3 || onClickMBtn3 })),
+        isBulkActionBarOpen && (react_1.default.createElement(BulkActionBar_1.default, { itemCount: totalItemCount, dropdownMode: dropdownMode, dropdown1Value: dropdown1Value, dropdown2Value: dropdown2Value, dropdown3Value: dropdown3Value, dropdown1DefaultText: dropdown1DefaultText, dropdown2DefaultText: dropdown2DefaultText, dropdown3DefaultText: dropdown3DefaultText, dropdown1ValueArray: dropdown1ValueArray, dropdown2ValueArray: dropdown2ValueArray, dropdown3ValueArray: dropdown3ValueArray, tBtnMode: btnMode(), tBtn1Text: tBtn1Text || mBtn1Text, tBtn2Text: tBtn2Text || mBtn2Text, tBtn3Text: tBtn3Text || mBtn3Text, onChangeDropdown1: onChangeDropdown1, onChangeDropdown2: onChangeDropdown2, onChangeDropdown3: onChangeDropdown3, onClickTBtn1: onClickTBtn1 || onClickMBtn1, onClickTBtn2: onClickTBtn2 || onClickMBtn2, onClickTBtn3: onClickTBtn3 || onClickMBtn3 })),
         headerRowMode === 'use' && (react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, selectAllMethods),
             react_1.default.createElement("form", null,
                 react_1.default.createElement(HeaderRow_1.default, { selectionMode: selectionMode, column2HeaderText: column2HeaderText, column3HeaderText: column3HeaderText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), onClickSelectAllCheckbox: handleSelectAllCheckbox })))),

package/dist/src/desktop/components/AdminList/BulkActionBar.d.ts

@@ -4,6 +4,9 @@ import { PDSValueOption } from '../../../common';
 declare type Props = {
     itemCount?: number;
     dropdownMode: 'none' | 'dropdown_amount1' | 'dropdown_amount2' | 'dropdown_amount3';
+    dropdown1Value?: PDSValueOption;
+    dropdown2Value?: PDSValueOption;
+    dropdown3Value?: PDSValueOption;
     dropdown1DefaultText?: PDSValueOption;
     dropdown2DefaultText?: PDSValueOption;
     dropdown3DefaultText?: PDSValueOption;
@@ -21,5 +24,5 @@ declare type Props = {
     onClickTBtn2?: () => void;
     onClickTBtn3?: () => void;
 };
-declare function BulkActionBar({ itemCount, dropdownMode, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, tBtnMode, tBtn1Text, tBtn2Text, tBtn3Text, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickTBtn1, onClickTBtn2, onClickTBtn3 }: Props): JSX.Element;
+declare function BulkActionBar({ itemCount, dropdownMode, dropdown1Value, dropdown2Value, dropdown3Value, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, tBtnMode, tBtn1Text, tBtn2Text, tBtn3Text, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickTBtn1, onClickTBtn2, onClickTBtn3 }: Props): JSX.Element;
 export default BulkActionBar;

package/dist/src/desktop/components/AdminList/BulkActionBar.js

@@ -15,7 +15,7 @@ var Dropdown_1 = require("../Dropdown");
 var TextButton_1 = require("../TextButton");
 var TextLabel_1 = require("../TextLabel");
 function BulkActionBar(_a) {
-    var _b = _a.itemCount, itemCount = _b === void 0 ? 1 : _b, _c = _a.dropdownMode, dropdownMode = _c === void 0 ? 'dropdown_amount1' : _c, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, tBtnMode = _a.tBtnMode, tBtn1Text = _a.tBtn1Text, tBtn2Text = _a.tBtn2Text, tBtn3Text = _a.tBtn3Text, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickTBtn1 = _a.onClickTBtn1, onClickTBtn2 = _a.onClickTBtn2, onClickTBtn3 = _a.onClickTBtn3;
+    var _b = _a.itemCount, itemCount = _b === void 0 ? 1 : _b, _c = _a.dropdownMode, dropdownMode = _c === void 0 ? 'dropdown_amount1' : _c, dropdown1Value = _a.dropdown1Value, dropdown2Value = _a.dropdown2Value, dropdown3Value = _a.dropdown3Value, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, tBtnMode = _a.tBtnMode, tBtn1Text = _a.tBtn1Text, tBtn2Text = _a.tBtn2Text, tBtn3Text = _a.tBtn3Text, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickTBtn1 = _a.onClickTBtn1, onClickTBtn2 = _a.onClickTBtn2, onClickTBtn3 = _a.onClickTBtn3;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
     return (react_1.default.createElement(S_BulkActionBar, null,
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e", spacingType: "width" }),
@@ -27,14 +27,14 @@ function BulkActionBar(_a) {
         react_1.default.createElement(hybrid_1.Divider, { direction: "vertical", height: 16 }),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e", spacingType: "width" }),
         dropdownMode !== 'none' && (react_1.default.createElement(react_1.default.Fragment, null,
-            dropdown1ValueArray && (react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown1ValueArray, defaultValue: dropdown1DefaultText, onChange: onChangeDropdown1, size: "small", colorTheme: "dark" })),
+            dropdown1ValueArray && (react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown1ValueArray, defaultValue: dropdown1DefaultText, value: dropdown1Value, onChange: onChangeDropdown1, size: "small", colorTheme: "dark" })),
             (dropdownMode === 'dropdown_amount2' || dropdownMode === 'dropdown_amount3') &&
                 dropdown2ValueArray && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown2ValueArray, defaultValue: dropdown2DefaultText, onChange: onChangeDropdown2, size: "small", colorTheme: "dark" }))),
+                react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown2ValueArray, defaultValue: dropdown2DefaultText, value: dropdown2Value, onChange: onChangeDropdown2, size: "small", colorTheme: "dark" }))),
             dropdownMode === 'dropdown_amount3' && dropdown3ValueArray && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown3ValueArray, defaultValue: dropdown3DefaultText, onChange: onChangeDropdown3, size: "small", colorTheme: "dark" }))))),
+                react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown3ValueArray, defaultValue: dropdown3DefaultText, value: dropdown3Value, onChange: onChangeDropdown3, size: "small", colorTheme: "dark" }))))),
         tBtnMode !== 'none' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
             react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn1Text, onClick: onClickTBtn1, colorTheme: "white" }),

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

@@ -11,11 +11,11 @@ declare type Props = {
     defaultValue?: PDSValueOption;
     value?: PDSValueOption;
     responsiveMode?: 'none' | 'use';
-    selectionMode?: 'single' | 'multi';
     size?: 'large' | 'small';
     state?: 'normal' | 'read_only' | 'disabled';
     valueArray: DropDownValues[];
+    customWidth?: string;
     onChange?: (option: PDSValueOption) => void;
 };
-declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, selectionMode, size, state, valueArray, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, onChange }: Props): JSX.Element;
 export default Dropdown;

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

@@ -31,9 +31,13 @@ var ContextMenuItem_1 = require("../ContextMenuItem");
 var TextLabel_1 = require("../TextLabel");
 // TODO: selectionMode의 multi 기능 구현 추가 필요
 function Dropdown(_a) {
-    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, value = _a.value, defaultValue = _a.defaultValue, hintText = _a.hintText, _c = _a.maxHeightItemNumber, maxHeightItemNumber = _c === void 0 ? 5 : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.selectionMode, selectionMode = _e === void 0 ? 'single' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, valueArray = _a.valueArray, onChange = _a.onChange;
-    var _h = (0, react_1.useState)(false), isFocused = _h[0], setIsFocused = _h[1];
-    var _j = (0, react_1.useState)(defaultValue), selectedValue = _j[0], setSelectedValue = _j[1];
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, value = _a.value, defaultValue = _a.defaultValue, hintText = _a.hintText, _c = _a.maxHeightItemNumber, maxHeightItemNumber = _c === void 0 ? 5 : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, 
+    // selectionMode = 'single',
+    _e = _a.size, 
+    // selectionMode = 'single',
+    size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, onChange = _a.onChange;
+    var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
+    var _h = (0, react_1.useState)(defaultValue), selectedValue = _h[0], setSelectedValue = _h[1];
     (0, react_1.useEffect)(function () {
         if (defaultValue) {
             setSelectedValue(defaultValue);
@@ -144,8 +148,8 @@ function Dropdown(_a) {
         var LARGE_HEIGHT = 48;
         return LARGE_HEIGHT * maxHeightItemNumber;
     }, [size, maxHeightItemNumber]);
-    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode },
-        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode },
+    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth },
+        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth },
             react_1.default.createElement(S_TextLabel, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride() })),
             react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
@@ -169,13 +173,16 @@ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 =
     var responsiveMode = _a.responsiveMode;
     return (responsiveMode === 'use' ? '100%' : '188px');
 });
-var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n"], ["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n"])), function (_a) {
+var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n\n  ", "\n"], ["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
             large: large,
             small: small
         }[size];
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";";
 });
 var colorThemeBackgroundReadOnly = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
@@ -241,7 +248,7 @@ var borderColor = (0, styled_components_1.css)(templateObject_10 || (templateObj
             return theme.ui_cpnt_dropdown_border_normal;
     }
 });
-var S_Select = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
+var S_Select = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
     var state = _a.state;
     switch (state) {
         case 'disabled':
@@ -278,6 +285,9 @@ var S_Select = styled_components_1.default.div(templateObject_11 || (templateObj
             large: large,
             small: small
         }[size];
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";";
 });
 var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"], ["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/IconNav.d.ts

@@ -4,6 +4,7 @@ declare type Props = {
     to: string;
     iconName: PDSIconType;
     openNewTab: boolean;
+    onClick?: () => void;
 };
-declare function IconNav({ to, iconName, openNewTab }: Props): JSX.Element;
+declare function IconNav({ to, iconName, openNewTab, onClick }: Props): JSX.Element;
 export default IconNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/IconNav.js

@@ -7,8 +7,8 @@ var react_1 = __importDefault(require("react"));
 var __1 = require("../../..");
 var Navigations_1 = require("../../../../common/components/Navigations");
 function IconNav(_a) {
-    var to = _a.to, iconName = _a.iconName, openNewTab = _a.openNewTab;
-    return (react_1.default.createElement(Navigations_1.NavLink, { to: to, openNewTab: openNewTab },
+    var to = _a.to, iconName = _a.iconName, openNewTab = _a.openNewTab, onClick = _a.onClick;
+    return (react_1.default.createElement(Navigations_1.NavLink, { onClick: onClick, to: to, openNewTab: openNewTab },
         react_1.default.createElement(__1.D_IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: iconName, iconFillType: "line", iconColorKey: "ui_menu_primarymenu_main", shapeType: "rectangle", iconSize: 24 })));
 }
 exports.default = IconNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/ImageIconNav.d.ts

@@ -3,6 +3,7 @@ declare type Props = {
     to: string;
     openNewTab: boolean;
     iconSrc: string;
+    onClick?: () => void;
 };
-declare function ImageIconNav({ to, openNewTab, iconSrc }: Props): JSX.Element;
+declare function ImageIconNav({ to, openNewTab, iconSrc, onClick }: Props): JSX.Element;
 export default ImageIconNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/ImageIconNav.js

@@ -12,8 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var Navigations_1 = require("../../../../common/components/Navigations");
 var hybrid_1 = require("../../../../hybrid");
 function ImageIconNav(_a) {
-    var to = _a.to, openNewTab = _a.openNewTab, iconSrc = _a.iconSrc;
-    return (react_1.default.createElement(Navigations_1.NavLink, { openNewTab: openNewTab, to: to },
+    var to = _a.to, openNewTab = _a.openNewTab, iconSrc = _a.iconSrc, onClick = _a.onClick;
+    return (react_1.default.createElement(Navigations_1.NavLink, { openNewTab: openNewTab, to: to, onClick: onClick },
         react_1.default.createElement(S_IconWrapper, null,
             react_1.default.createElement(hybrid_1.ImageView, { width: 24, ratio: "1_1", scaleType: "contain", src: iconSrc, shapeType: "rectangle" }))));
 }

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/InternalLinkMenuItemNav.js

@@ -47,13 +47,13 @@ function InternalLinkMenuItemNav(_a) {
     };
     if (showMenuAsIcon) {
         if (menu.iconSrc) {
-            return react_1.default.createElement(ImageIconNav_1.default, { to: internalPath, iconSrc: menu.iconSrc, openNewTab: false });
+            return (react_1.default.createElement(ImageIconNav_1.default, { onClick: onClickNav, to: internalPath, iconSrc: menu.iconSrc, openNewTab: false }));
         }
         if (menu.iconName) {
-            return react_1.default.createElement(IconNav_1.default, { to: internalPath, iconName: menu.iconName, openNewTab: false });
+            return (react_1.default.createElement(IconNav_1.default, { onClick: onClickNav, to: internalPath, iconName: menu.iconName, openNewTab: false }));
         }
     }
-    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { onClick: onClickNav, isActive: isActive, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name }));
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { onClick: onClickNav, isActive: isActive, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { onClick: onClickNav, isActive: isActive, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name }));
 }
 function getInternalLink(basePath, url) {
     var _a = new URL(url), pathname = _a.pathname, search = _a.search;

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

@@ -20,6 +20,7 @@ export declare type EditApplyTextFieldProps = {
     max?: number;
     maxLength?: number;
     min?: number;
+    customWidth?: string;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
@@ -29,5 +30,5 @@ export declare type EditApplyTextFieldProps = {
     /** @deprecated v1.5 해당 prop 대신 Form의 onSubmit을 사용하세요. */
     onClickSubmitBtn?: (...args: any) => any;
 };
-declare function EditApplyTextField({ name, hintText, defaultText, validation, preventBlankMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, max, maxLength, min, getInputValue, onBlur, onChange, onClickSubmitBtn, onFocus, onTarget }: EditApplyTextFieldProps): JSX.Element;
+declare function EditApplyTextField({ name, hintText, defaultText, validation, preventBlankMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, max, maxLength, min, customWidth, getInputValue, onBlur, onChange, onClickSubmitBtn, onFocus, onTarget }: EditApplyTextFieldProps): JSX.Element;
 export default EditApplyTextField;

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

@@ -32,7 +32,7 @@ var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 function EditApplyTextField(_a) {
     var _b;
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, _f = _a.textLineType, textLineType = _f === void 0 ? 'single' : _f, _g = _a.multiRows, multiRows = _g === void 0 ? 8 : _g, _h = _a.autoMinRows, autoMinRows = _h === void 0 ? 8 : _h, autoMaxRows = _a.autoMaxRows, _j = _a.inputType, inputType = _j === void 0 ? 'text' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, max = _a.max, maxLength = _a.maxLength, min = _a.min, getInputValue = _a.getInputValue, onBlur = _a.onBlur, onChange = _a.onChange, onClickSubmitBtn = _a.onClickSubmitBtn, onFocus = _a.onFocus, onTarget = _a.onTarget;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, _f = _a.textLineType, textLineType = _f === void 0 ? 'single' : _f, _g = _a.multiRows, multiRows = _g === void 0 ? 8 : _g, _h = _a.autoMinRows, autoMinRows = _h === void 0 ? 8 : _h, autoMaxRows = _a.autoMaxRows, _j = _a.inputType, inputType = _j === void 0 ? 'text' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, getInputValue = _a.getInputValue, onBlur = _a.onBlur, onChange = _a.onChange, onClickSubmitBtn = _a.onClickSubmitBtn, onFocus = _a.onFocus, onTarget = _a.onTarget;
     var _l = (0, react_hook_form_1.useFormContext)(), register = _l.register, setValue = _l.setValue, trigger = _l.trigger, watch = _l.watch, reset = _l.reset, _m = _l.formState, errors = _m.errors, isSubmitSuccessful = _m.isSubmitSuccessful;
     var _o = (0, react_1.useState)(false), isFocused = _o[0], setIsFocused = _o[1];
     var _p = (0, react_1.useState)(false), isOpen = _p[0], setIsOpen = _p[1];
@@ -148,18 +148,21 @@ function EditApplyTextField(_a) {
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_EditApplyTextFieldWrapper, { size: size, responsiveMode: responsiveMode },
+        react_1.default.createElement(S_EditApplyTextFieldWrapper, { size: size, responsiveMode: responsiveMode, customWidth: customWidth },
             react_1.default.createElement(S_EditApplyTextField, null,
-                react_1.default.createElement(S_S_TextFieldBaseWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state }, S_TextFieldBase()),
+                react_1.default.createElement(S_S_TextFieldBaseWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, customWidth: customWidth }, S_TextFieldBase()),
                 isOpen === true && (react_1.default.createElement(S_ButtonBox, null,
                     react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_xmark", fillType: "line", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_white", borderColorKey: "ui_cpnt_button_line_border_default", tabIndex: -1, onMouseDown: handleCancel }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
                     react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_check", fillType: "fill", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_on_primary", baseColorKey: "ui_cpnt_button_fill_base_primary", state: isError === true ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: handleMouseDown, type: "submit" })))),
             ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, { isFocused: isFocused }, errors[name].message))));
 }
-var S_EditApplyTextFieldWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n"], ["\n  width: ", ";\n"])), function (_a) {
+var S_EditApplyTextFieldWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n\n  ", "\n"], ["\n  width: ", ";\n\n  ", "\n"])), function (_a) {
     var size = _a.size, responsiveMode = _a.responsiveMode;
     return size === 'rlarge' || responsiveMode === 'use' ? '100%' : '432px';
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";";
 });
 var S_EditApplyTextField = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 var multi = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: auto;\n  padding: 14px;\n"], ["\n  height: auto;\n  padding: 14px;\n"])));
@@ -231,7 +234,7 @@ var disabled = (0, styled_components_1.css)(templateObject_9 || (templateObject_
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_border_disabled;
 });
-var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", "\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var state = _a.state;
     return (state === 'disabled' ? 'not-allowed' : 'text');
 }, function (_a) {
@@ -250,6 +253,9 @@ var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_10
             read_only: read_only,
             disabled: disabled
         }[state];
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";";
 });
 var S_Error = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  text-align: left;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  text-align: left;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -12,8 +12,9 @@ declare type SelectProps = {
     size?: 'large' | 'medium' | 'small' | 'rlarge';
     responsiveMode?: 'none' | 'use';
     state?: 'normal' | 'read_only' | 'disabled';
-    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
     colorTheme?: 'none' | 'dark';
+    customWidth?: string;
+    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 };
-declare function Select({ hintText, defaultValue, value, valueArray, size, responsiveMode, state, onChange, colorTheme }: SelectProps): JSX.Element;
+declare function Select({ hintText, defaultValue, value, valueArray, size, responsiveMode, state, colorTheme, customWidth, onChange }: SelectProps): JSX.Element;
 export default Select;

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

@@ -32,7 +32,7 @@ var hybrid_1 = require("../../../hybrid");
 var HINT = 'HINT_VALUE';
 function Select(_a) {
     var _b;
-    var hintText = _a.hintText, defaultValue = _a.defaultValue, value = _a.value, valueArray = _a.valueArray, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, onChange = _a.onChange, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f;
+    var hintText = _a.hintText, defaultValue = _a.defaultValue, value = _a.value, valueArray = _a.valueArray, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, customWidth = _a.customWidth, onChange = _a.onChange;
     var handleChange = function (e) {
         if (onChange) {
             onChange(e);
@@ -54,7 +54,7 @@ function Select(_a) {
             return 'ui_cpnt_select_icon_01';
         }
     };
-    return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, tabIndex: 0 },
+    return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth },
         react_1.default.createElement(S_Icon_Wrapper, { state: state },
             react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() })),
         react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined },
@@ -92,7 +92,7 @@ var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
     var theme = _a.theme;
     return theme.ui_cpnt_select_text_darktheme_enabled;
 });
-var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  z-index: 0;\n\n  ", "\n  ", ";\n"], ["\n  position: relative;\n  z-index: 0;\n\n  ", "\n  ", ";\n"])), function (_a) {
+var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  z-index: 0;\n\n  ", "\n  ", ";\n  ", "\n"], ["\n  position: relative;\n  z-index: 0;\n\n  ", "\n  ", ";\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -104,6 +104,9 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
 }, function (_a) {
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";";
 });
 var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n  pointer-events: none;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n  pointer-events: none;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -27,6 +27,7 @@ export declare type TextFieldProps = {
     max?: number;
     maxLength?: number;
     min?: number;
+    customWidth?: string;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onClickIBtn1?: () => void;
@@ -35,5 +36,5 @@ export declare type TextFieldProps = {
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onTarget }: TextFieldProps): JSX.Element;
+declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;

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

@@ -31,7 +31,7 @@ var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 function TextField(_a) {
     var _b;
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
     var iconThemeColorNoneObj = {
         normal: 'ui_cpnt_button_icon_default',
         read_only: 'ui_cpnt_button_icon_default',
@@ -115,11 +115,11 @@ function TextField(_a) {
                             }[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 })))));
         }
     };
-    return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode },
-        react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
+    return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode, customWidth: customWidth },
+        react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme, customWidth: customWidth }, S_TextField()),
         ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, errors[name].message)));
 }
-var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -131,6 +131,9 @@ var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templa
 }, function (_a) {
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";";
 });
 var multi = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n  padding: 14px;\n"], ["\n  height: auto;\n  padding: 14px;\n"])));
 var auto = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"], ["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"])), function (_a) {
@@ -224,7 +227,7 @@ var dark_disabled = (0, styled_components_1.css)(templateObject_12 || (templateO
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_border_darktheme_normal;
 });
-var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var state = _a.state;
     return (state === 'disabled' ? 'not-allowed' : 'text');
 }, function (_a) {
@@ -257,6 +260,9 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (t
 }, function (_a) {
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";";
 });
 var S_IconBox = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var S_Error = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"])), function (_a) {

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js

@@ -42,8 +42,8 @@ var ContentsContainer = function (_a) {
         WTN_1: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTN_2: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTN_3: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_3", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTO_1: (react_1.default.createElement(variation_1.WTO, { layoutType: "WTO_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTP_1: (react_1.default.createElement(variation_1.WTP, { layoutType: "WTP_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        WTO_1: (react_1.default.createElement(variation_1.WTO, { layoutType: "WTO_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
+        WTP_1: (react_1.default.createElement(variation_1.WTP, { layoutType: "WTP_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
         WTQ_1: (react_1.default.createElement(variation_1.WTQ, { layoutType: "WTQ_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
         WTS_1: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
         WTS_2: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref }))

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTO.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
+import { MutableRefObject } from 'react';
 export declare type WTOProps = {
     content1?: JSX.Element;
     layoutType: 'WTO_1';
     containerColor?: string;
     areaColor?: string;
+    container1Ref?: MutableRefObject<HTMLDivElement | null>;
 };
-declare const WTO: ({ content1, layoutType, containerColor, areaColor }: WTOProps) => JSX.Element;
+declare const WTO: ({ content1, layoutType, containerColor, areaColor, container1Ref }: WTOProps) => JSX.Element;
 export default WTO;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTO.js

@@ -10,29 +10,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var WTO = function (_a) {
-    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
+    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, container1Ref = _a.container1Ref;
+    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref },
         react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
             react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 664px;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 664px;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 664px;\n  width: calc(50% + 184px);\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 664px;\n  width: calc(50% + 184px);\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-// TODO: Area단에 height: 100%; overflow: auto; 추가와 padding-bottom: 88px; 삭제 된 것은 무한 스크롤 대응위한 임시 방편입니다.
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  ", ";\n"])), function (_a) {
-    var areaColor = _a.areaColor;
-    return "background-color: " + areaColor;
-});
-// TODO: Content단에 height: 100%; 추가는 무한 스크롤 대응위한 임시 방편입니다.
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  height: 100%;\n"], ["\n  ", ";\n  height: 100%;\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WTO_1: 'width: 664px;'
     }[layoutType]);
+}, function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
 });
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = WTO;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTP.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
+import { MutableRefObject } from 'react';
 export declare type WTPProps = {
     content1?: JSX.Element;
     layoutType: 'WTP_1';
     containerColor?: string;
     areaColor?: string;
+    container1Ref?: MutableRefObject<HTMLDivElement | null>;
 };
-declare const WTP: ({ content1, layoutType, containerColor, areaColor }: WTPProps) => JSX.Element;
+declare const WTP: ({ content1, layoutType, containerColor, areaColor, container1Ref }: WTPProps) => JSX.Element;
 export default WTP;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTP.js

@@ -10,29 +10,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var WTP = function (_a) {
-    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
+    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, container1Ref = _a.container1Ref;
+    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref },
         react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
             react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 664px;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 664px;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 664px;\n  width: calc(50% + 184px);\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 664px;\n  width: calc(50% + 184px);\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-// TODO: Area단에 height: 100%; overflow: auto; 추가와 padding-bottom: 88px; 삭제 된 것은 무한 스크롤 대응위한 임시 방편입니다.
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  ", ";\n"])), function (_a) {
-    var areaColor = _a.areaColor;
-    return "background-color: " + areaColor;
-});
-// TODO: Content단에 height: 100%; 추가는 무한 스크롤 대응위한 임시 방편입니다.
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  height: 100%;\n"], ["\n  ", ";\n  height: 100%;\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WTP_1: 'width: 664px;'
     }[layoutType]);
+}, function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
 });
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = WTP;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTQ.js

@@ -19,26 +19,26 @@ var WTQ = function (_a) {
             react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
                 react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2)))));
 };
-var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n  justify-content: center;\n"], ["\n  display: flex;\n  height: 100%;\n  justify-content: center;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  max-width: 760px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  flex: 1;\n  height: 100%;\n  width: 760px;\n  ", ";\n"], ["\n  background-color: ", ";\n  max-width: 760px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  flex: 1;\n  height: 100%;\n  width: 760px;\n  ", ";\n"])), function (_a) {
+var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: end;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: calc(50% + 220px);\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: end;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: calc(50% + 220px);\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 320px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  width: 320px;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 320px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  width: 320px;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: calc(50% - 220px);\n  ", ";\n"], ["\n  background-color: ", ";\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: calc(50% - 220px);\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer02_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-bottom: 88px;\n  max-width: 760px;\n  width: 760px;\n  ", ";\n"], ["\n  padding-bottom: 88px;\n  max-width: 760px;\n  width: 760px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-bottom: 88px;\n  min-width: 320px;\n  width: 320px;\n  ", ";\n"], ["\n  padding-bottom: 88px;\n  min-width: 320px;\n  width: 320px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });

package/dist/src/desktop/layout/LayoutWT/Containers/SubMenuContainer/variation/LeftSubMenu.js

@@ -15,7 +15,7 @@ var LeftSubMenu = function (_a) {
         react_1.default.createElement(S_LeftSubMenuArea, { areaColor: areaColor },
             react_1.default.createElement(S_LeftSubMenuContent, null, children))));
 };
-var S_LeftSubMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  min-width: 296px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 296px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+var S_LeftSubMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: flex-end;\n  height: 100%;\n  min-width: 296px;\n  width: calc(50% - 184px);\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: flex-end;\n  height: 100%;\n  min-width: 296px;\n  width: calc(50% - 184px);\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_pagemenucontainer_background;
 }, function (_a) {

package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js

@@ -192,8 +192,8 @@ var ContainersBox = function (_a) {
                     WTN_1: '',
                     WTN_2: '',
                     WTN_3: '',
-                    WTO_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent })),
-                    WTP_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent })),
+                    WTO_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent, containerColor: containerColor, areaColor: areaColor })),
+                    WTP_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent, containerColor: containerColor, areaColor: areaColor })),
                     WTQ_1: '',
                     WTS_1: '',
                     WTS_2: ''
@@ -202,13 +202,10 @@ var ContainersBox = function (_a) {
 };
 var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n"])));
 var S_RightBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n"])));
-var centerStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  // TODO: WTO_1, WTP_1, WTQ_1 \uC720\uD615\uC744 \uC704\uD574 \uC784\uC2DC\uB85C backgroundColor\uB97C \uBD80\uC5EC\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uBD80\uBD84 \uAE30\uD68D \uCCA0\uD559 \uAC1C\uC120\uC774 \uB418\uBA74 \uBCC0\uACBD\uB418\uC5B4\uC57C \uD568.\n  background-color: ", ";\n"], ["\n  display: flex;\n  justify-content: center;\n  // TODO: WTO_1, WTP_1, WTQ_1 \uC720\uD615\uC744 \uC704\uD574 \uC784\uC2DC\uB85C backgroundColor\uB97C \uBD80\uC5EC\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uBD80\uBD84 \uAE30\uD68D \uCCA0\uD559 \uAC1C\uC120\uC774 \uB418\uBA74 \uBCC0\uACBD\uB418\uC5B4\uC57C \uD568.\n  background-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_contentscontainer01_background;
-});
+var flexStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var S_BottomWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n  ", ";\n"], ["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
-    return layoutType === 'WTO_1' || layoutType === 'WTP_1' || layoutType === 'WTQ_1' ? centerStyle : '';
+    return (layoutType === 'WTO_1' || layoutType === 'WTP_1') && flexStyle;
 });
 exports.default = ContainersBox;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -11,11 +11,11 @@ declare type Props = {
     hintText?: TFunctionResult;
     maxHeightItemNumber?: number;
     responsiveMode?: 'none' | 'use';
-    selectionMode?: 'single' | 'multi';
     size?: 'large' | 'small';
     state?: 'normal' | 'read_only' | 'disabled';
     valueArray: DropDownValues[];
+    customWidth?: string;
     onChange?: (option: PDSValueOption) => void;
 };
-declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, selectionMode, size, state, valueArray, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, onChange }: Props): JSX.Element;
 export default Dropdown;

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

@@ -31,9 +31,13 @@ var ContextMenuItem_1 = require("../ContextMenuItem");
 var TextLabel_1 = require("../TextLabel");
 // TODO: selectionMode의 multi 기능 구현 추가 필요
 function Dropdown(_a) {
-    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, value = _a.value, defaultValue = _a.defaultValue, hintText = _a.hintText, _c = _a.maxHeightItemNumber, maxHeightItemNumber = _c === void 0 ? 5 : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.selectionMode, selectionMode = _e === void 0 ? 'single' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, valueArray = _a.valueArray, onChange = _a.onChange;
-    var _h = (0, react_1.useState)(false), isFocused = _h[0], setIsFocused = _h[1];
-    var _j = (0, react_1.useState)(defaultValue), selectedValue = _j[0], setSelectedValue = _j[1];
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, value = _a.value, defaultValue = _a.defaultValue, hintText = _a.hintText, _c = _a.maxHeightItemNumber, maxHeightItemNumber = _c === void 0 ? 5 : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, 
+    // selectionMode = 'single',
+    _e = _a.size, 
+    // selectionMode = 'single',
+    size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, onChange = _a.onChange;
+    var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
+    var _h = (0, react_1.useState)(defaultValue), selectedValue = _h[0], setSelectedValue = _h[1];
     (0, react_1.useEffect)(function () {
         if (defaultValue) {
             setSelectedValue(defaultValue);
@@ -144,8 +148,8 @@ function Dropdown(_a) {
         var LARGE_HEIGHT = 48;
         return LARGE_HEIGHT * maxHeightItemNumber;
     }, [size, maxHeightItemNumber]);
-    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode },
-        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode },
+    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth },
+        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth },
             react_1.default.createElement(S_TextLabel, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride() })),
             react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
@@ -169,13 +173,16 @@ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 =
     var responsiveMode = _a.responsiveMode;
     return (responsiveMode === 'use' ? '100%' : '188px');
 });
-var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n"], ["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n"])), function (_a) {
+var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n\n  ", "\n"], ["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
             large: large,
             small: small
         }[size];
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";";
 });
 var colorThemeBackgroundReadOnly = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
@@ -241,7 +248,7 @@ var borderColor = (0, styled_components_1.css)(templateObject_10 || (templateObj
             return theme.ui_cpnt_dropdown_border_normal;
     }
 });
-var S_Select = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
+var S_Select = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
     var state = _a.state;
     switch (state) {
         case 'disabled':
@@ -268,6 +275,9 @@ var S_Select = styled_components_1.default.div(templateObject_11 || (templateObj
             large: large,
             small: small
         }[size];
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";";
 });
 var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"], ["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -12,8 +12,9 @@ declare type SelectProps = {
     size?: 'large' | 'medium' | 'small' | 'rlarge';
     responsiveMode?: 'none' | 'use';
     state?: 'normal' | 'read_only' | 'disabled';
-    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
     colorTheme?: 'none' | 'dark';
+    customWidth?: string;
+    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 };
-declare function Select({ hintText, defaultValue, value, valueArray, size, responsiveMode, state, onChange, colorTheme }: SelectProps): JSX.Element;
+declare function Select({ hintText, defaultValue, value, valueArray, size, responsiveMode, state, colorTheme, customWidth, onChange }: SelectProps): JSX.Element;
 export default Select;

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

@@ -32,7 +32,7 @@ var hybrid_1 = require("../../../hybrid");
 var HINT = 'HINT_VALUE';
 function Select(_a) {
     var _b;
-    var hintText = _a.hintText, defaultValue = _a.defaultValue, value = _a.value, valueArray = _a.valueArray, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, onChange = _a.onChange, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f;
+    var hintText = _a.hintText, defaultValue = _a.defaultValue, value = _a.value, valueArray = _a.valueArray, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, customWidth = _a.customWidth, onChange = _a.onChange;
     var handleChange = function (e) {
         if (onChange) {
             onChange(e);
@@ -50,7 +50,7 @@ function Select(_a) {
         }
         return 'ui_cpnt_select_icon_01';
     };
-    return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, tabIndex: 0 },
+    return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth },
         react_1.default.createElement(S_Icon_Wrapper, { state: state },
             react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() })),
         react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined },
@@ -88,7 +88,7 @@ var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
     var theme = _a.theme;
     return theme.ui_cpnt_select_text_darktheme_enabled;
 });
-var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  z-index: 0;\n\n  ", "\n  ", ";\n"], ["\n  position: relative;\n  z-index: 0;\n\n  ", "\n  ", ";\n"])), function (_a) {
+var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  z-index: 0;\n\n  ", "\n  ", ";\n  ", "\n"], ["\n  position: relative;\n  z-index: 0;\n\n  ", "\n  ", ";\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -100,6 +100,9 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
 }, function (_a) {
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";";
 });
 var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -27,6 +27,7 @@ export declare type TextFieldProps = {
     max?: number;
     maxLength?: number;
     min?: number;
+    customWidth?: string;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onClickIBtn1?: () => void;
@@ -35,5 +36,5 @@ export declare type TextFieldProps = {
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onTarget }: TextFieldProps): JSX.Element;
+declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;

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

@@ -31,7 +31,7 @@ var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 function TextField(_a) {
     var _b;
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
     var iconThemeColorNoneObj = {
         normal: 'ui_cpnt_button_icon_default',
         read_only: 'ui_cpnt_button_icon_default',
@@ -115,11 +115,11 @@ function TextField(_a) {
                             }[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 })))));
         }
     };
-    return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode },
-        react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
+    return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode, customWidth: customWidth },
+        react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme, customWidth: customWidth }, S_TextField()),
         ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, errors[name].message)));
 }
-var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -131,6 +131,9 @@ var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templa
 }, function (_a) {
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";";
 });
 var multi = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n  padding: 14px;\n"], ["\n  height: auto;\n  padding: 14px;\n"])));
 var auto = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"], ["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"])), function (_a) {
@@ -224,7 +227,7 @@ var dark_disabled = (0, styled_components_1.css)(templateObject_12 || (templateO
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_border_darktheme_normal;
 });
-var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -254,6 +257,9 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (t
 }, function (_a) {
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";";
 });
 var S_IconBox = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var S_Error = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"])), function (_a) {

package/package.json

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

package/release-note.md

@@ -1,16 +1,5 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v1.4.20]
+## [v1.4.23]
 
-### Component
-* Divider
-  * vertical로 쓰일 경우 배경색 추가
-* DynamicDesktopNavBar
-  * 활성화 관련 개선
-    * 자체적으로 BY_CLICK와 BY_URL 상태를 가지도록 변경
-* Select
-  * value를 사용할 경우 초기값이 '' 나 0으로 올때에 대한 방어 처리
-* Icon
-  * ic_ghost value 추가
-  * ic_payment_free_trial value 추가
-  * ic_payment_onetime 형태 변경
-  * ic_payment_regularly 형태 변경
+### Color
+* 컬러 키 값 22.07.04 19시 50분 기준 싱크