pds-dev-kit-web 1.3.9 → 1.3.12

package/dist/src/common/assets/icons/fill/Question.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import IconType from '../IconType';
+declare const Question: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default Question;

package/dist/src/common/assets/icons/fill/Question.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Question = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
+        react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M12.0001,2 C17.5231,2 22.0001,6.477 22.0001,12 C22.0001,17.523 17.5231,22 12.0001,22 C6.4771,22 2.0001,17.523 2.0001,12 C2.0001,6.477 6.4771,2 12.0001,2 Z M11.7876652,14.8317533 C11.432968,14.8317533 11.1366272,14.9408168 10.8986427,15.158944 C10.66157,15.3779367 10.5439455,15.6575203 10.5439455,15.9976948 C10.5439455,16.3378693 10.66157,16.6174529 10.8986427,16.8355801 C11.1366272,17.0545728 11.432968,17.1636364 11.7876652,17.1636364 C12.1414506,17.1636364 12.4377914,17.0545728 12.6748641,16.8355801 C12.9119368,16.6174529 13.0304731,16.3378693 13.0304731,15.9976948 C13.0304731,15.6575203 12.9119368,15.3779367 12.6748641,15.158944 C12.4377914,14.9408168 12.1414506,14.8317533 11.7876652,14.8317533 Z M11.8870534,6.8 C10.8940836,6.8 10.1071846,7.1393089 9.57285929,7.66558393 C9.27195935,7.96161363 9.15342301,8.18666545 9.05585848,8.51385618 C8.84066944,9.23661876 9.26284117,9.97669301 10.0533874,9.97669301 L10.0533874,9.97669301 L10.1199501,9.97669301 C10.5676527,9.97669301 10.9360272,9.74211977 11.087389,9.34914467 C11.1402744,9.21238241 11.1548635,9.12236168 11.2806944,8.95097606 C11.4338798,8.74237033 11.7119843,8.66100544 11.9754997,8.69649439 C12.4861178,8.76747227 12.7514568,9.03840004 12.7514568,9.73259835 C12.7514568,10.0173755 12.6666577,10.2787818 12.495236,10.5159518 C12.324726,10.7522562 12.0247379,10.9686522 11.7475452,11.2993053 C11.4183789,11.6905492 11.1986308,11.9952347 11.0655053,12.3414683 C10.8995545,12.7699323 10.8858772,13.0339354 10.8913481,13.2892827 C10.9032017,13.8389285 11.2907244,14.2379644 11.8706406,14.2379644 C12.4131723,14.2388283 12.7514568,13.9090408 12.8581395,13.3550671 C12.9593513,12.8244641 13.0933886,12.5846974 13.3104013,12.3683014 L13.3104013,12.3683014 L14.0754166,11.6299583 C14.3991119,11.3036332 14.6334492,10.9833671 14.7802519,10.6708913 C14.9270546,10.3584155 15,10.0113164 15,9.62872827 C15,8.75535409 14.7282782,8.08106421 14.1848347,7.6075898 C13.6413912,7.1341154 12.8754641,6.8 11.8870534,6.8 Z" })));
+};
+exports.default = Question;

package/dist/src/common/assets/icons/fill/index.d.ts

@@ -28,6 +28,7 @@ declare const fillIcons: {
     readonly ic_post_free: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_post_notice: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_post_social: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_question: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_reply: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_setting: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_speaker_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/fill/index.js

@@ -31,6 +31,7 @@ var Pin_1 = __importDefault(require("./Pin"));
 var PostFree_1 = __importDefault(require("./PostFree"));
 var PostNotice_1 = __importDefault(require("./PostNotice"));
 var PostSocial_1 = __importDefault(require("./PostSocial"));
+var Question_1 = __importDefault(require("./Question"));
 var Reply_1 = __importDefault(require("./Reply"));
 var Setting_1 = __importDefault(require("./Setting"));
 var SpeakerOff_1 = __importDefault(require("./SpeakerOff"));
@@ -81,6 +82,7 @@ var fillIcons = {
     ic_post_free: PostFree_1.default,
     ic_post_notice: PostNotice_1.default,
     ic_post_social: PostSocial_1.default,
+    ic_question: Question_1.default,
     ic_reply: Reply_1.default,
     ic_setting: Setting_1.default,
     ic_speaker_off: SpeakerOff_1.default,

package/dist/src/common/assets/icons/line/Requirement.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import IconType from '../IconType';
+declare const Requirement: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default Requirement;

package/dist/src/common/assets/icons/line/Requirement.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Requirement = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
+        react_1.default.createElement("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M11.9998204,19.6217475 L11.9998204,4.35 M19,16.0272646 L5,7.94412368 M19,7.94412368 L5,16.0272646" })));
+};
+exports.default = Requirement;

package/dist/src/common/assets/icons/line/index.d.ts

@@ -91,6 +91,7 @@ declare const lineIcons: {
     readonly ic_radio_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_radio_on: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_report: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_requirement: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_search: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_seller_info: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_seller_intro: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/line/index.js

@@ -94,6 +94,7 @@ var Question_1 = __importDefault(require("./Question"));
 var RadioOff_1 = __importDefault(require("./RadioOff"));
 var RadioOn_1 = __importDefault(require("./RadioOn"));
 var Report_1 = __importDefault(require("./Report"));
+var Requirement_1 = __importDefault(require("./Requirement"));
 var Search_1 = __importDefault(require("./Search"));
 var SellerInfo_1 = __importDefault(require("./SellerInfo"));
 var SellerIntro_1 = __importDefault(require("./SellerIntro"));
@@ -228,6 +229,7 @@ var lineIcons = {
     ic_radio_off: RadioOff_1.default,
     ic_radio_on: RadioOn_1.default,
     ic_report: Report_1.default,
+    ic_requirement: Requirement_1.default,
     ic_search: Search_1.default,
     ic_seller_info: SellerInfo_1.default,
     ic_seller_intro: SellerIntro_1.default,

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

@@ -150,5 +150,7 @@
     "usr_menu_background": "grey950",
     "sys_cpnt_base_white_opacity50": "white/opacity50",
     "sys_widget_dark_01": "grey950",
-    "usr_menu_background_gradient_opacity00": "grey950/opacity00"
+    "usr_menu_background_gradient_opacity00": "grey950/opacity00",
+    "sys_border_line_white": "white",
+    "sys_component_base_white_opacity10": "white/opacity10"
 }

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

@@ -150,5 +150,7 @@
     "usr_menu_background": "white",
     "sys_cpnt_base_white_opacity50": "white/opacity50",
     "sys_widget_dark_01": "grey900",
-    "usr_menu_background_gradient_opacity00": "white/opacity00"
+    "usr_menu_background_gradient_opacity00": "white/opacity00",
+    "sys_border_line_white": "white",
+    "sys_component_base_white_opacity10": "white/opacity10"
 }

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

@@ -312,7 +312,7 @@
     "ui_cpnt_modal_gradient_2": "sys_component_base_black",
     "ui_cpnt_list_icon_04": "sys_widget_white",
     "ui_cpnt_list_thumbnail_border": "sys_border_line_01",
-    "ui_cpnt_list_thumbnail_gradient_1": "sys_component_base_black",
+    "ui_cpnt_list_thumbnail_gradient_1": "sys_component_base_black_opacity80",
     "ui_cpnt_list_thumbnail_gradient_2": "sys_component_base_black_opacity00",
     "ui_cpnt_list_base_area_active": "sys_component_base_01",
     "ui_cpnt_contextmenu_base": "sys_component_base_02",
@@ -480,5 +480,11 @@
     "ui_menu_background": "usr_menu_background",
     "ui_cpnt_video_progress_base": "sys_cpnt_base_white_opacity50",
     "ui_cpnt_icon_sys_dark": "sys_widget_dark_01",
-    "ui_menu_background_gradient_opacity00": "usr_menu_background_gradient_opacity00"
+    "ui_menu_background_gradient_opacity00": "usr_menu_background_gradient_opacity00",
+    "ui_cpnt_dropdown_border_white_normal": "sys_border_line_white",
+    "ui_cpnt_dropdown_text_white_enabled": "sys_text_white",
+    "ui_cpnt_dropdown_text_white_hint": "sys_text_white",
+    "ui_cpnt_dropdown_icon_white_default": "sys_widget_white",
+    "ui_cpnt_dropdown_border_white_focus": "sys_border_line_03",
+    "ui_cpnt_dropdown_base_white_normal": "sys_component_base_white_opacity10"
 }

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

@@ -152,6 +152,8 @@ declare const colorSet: {
         sys_cpnt_base_white_opacity50: string;
         sys_widget_dark_01: string;
         usr_menu_background_gradient_opacity00: string;
+        sys_border_line_white: string;
+        sys_component_base_white_opacity10: string;
     };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
@@ -306,6 +308,8 @@ declare const colorSet: {
         sys_cpnt_base_white_opacity50: string;
         sys_widget_dark_01: string;
         usr_menu_background_gradient_opacity00: string;
+        sys_border_line_white: string;
+        sys_component_base_white_opacity10: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -790,6 +794,12 @@ declare const colorSet: {
         ui_cpnt_video_progress_base: string;
         ui_cpnt_icon_sys_dark: string;
         ui_menu_background_gradient_opacity00: string;
+        ui_cpnt_dropdown_border_white_normal: string;
+        ui_cpnt_dropdown_text_white_enabled: string;
+        ui_cpnt_dropdown_text_white_hint: string;
+        ui_cpnt_dropdown_icon_white_default: string;
+        ui_cpnt_dropdown_border_white_focus: string;
+        ui_cpnt_dropdown_base_white_normal: string;
     };
     readonly SemanticColor: {
         blue500: string;

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

@@ -481,4 +481,10 @@ export interface UITheme {
     ui_cpnt_video_progress_base: string;
     ui_cpnt_icon_sys_dark: string;
     ui_menu_background_gradient_opacity00: string;
+    ui_cpnt_dropdown_border_white_normal: string;
+    ui_cpnt_dropdown_text_white_enabled: string;
+    ui_cpnt_dropdown_text_white_hint: string;
+    ui_cpnt_dropdown_icon_white_default: string;
+    ui_cpnt_dropdown_border_white_focus: string;
+    ui_cpnt_dropdown_base_white_normal: string;
 }

package/dist/src/common/styles/theme.js

@@ -95,5 +95,5 @@ exports.spacing = {
     spacingM: '288px',
     spacingN: '320px'
 };
-var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK'));
+var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {}));
 exports.default = theme;

package/dist/src/common/styles/ui-colors.d.ts

@@ -5,4 +5,6 @@ declare global {
         PdsUtils: any;
     }
 }
-export declare const customTheme: (tone: string) => any;
+export declare const customTheme: (tone: string, palette?: {
+    [key: string]: string;
+} | undefined) => any;

package/dist/src/common/styles/ui-colors.js

@@ -28,20 +28,21 @@ function buildCascadedColors(lowLevel, highLevel, override) {
 // from server (원래는 비동기)
 var colorSetting = {
     tone: 'DARK',
-    customPalette: {
+    palette: {
         usr_good_job: '#999999'
     }
 };
 var phaseTwoJSON = colorSetting.tone === 'LIGHT' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark;
 // ui-color-build-phase
-var paletteColors = buildCascadedColors(colorSet_1.default.SemanticColor, phaseTwoJSON, colorSetting.customPalette);
+var paletteColors = buildCascadedColors(colorSet_1.default.SemanticColor, phaseTwoJSON, colorSetting.palette);
 exports.uiColors = buildCascadedColors(paletteColors, colorSet_1.default.UIColor);
 window.PdsUtils = {
     tone: 'DARK'
 };
-var customTheme = function (tone) {
+var customTheme = function (tone, palette) {
     window.PdsUtils.tone = tone;
-    var buildedColors = buildCascadedColors(buildCascadedColors(colorSet_1.default.SemanticColor, tone === 'LIGHT' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark, colorSetting.customPalette), colorSet_1.default.UIColor);
+    window.PdsUtils.palette = palette;
+    var buildedColors = buildCascadedColors(buildCascadedColors(colorSet_1.default.SemanticColor, tone === 'LIGHT' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark, palette), colorSet_1.default.UIColor);
     return buildedColors;
 };
 exports.customTheme = customTheme;

package/dist/src/common/types/{comopnents.d.ts → components.d.ts}

@@ -3,3 +3,8 @@ export declare type PDSValueOption = {
     text: PDSTextType;
     value: string | number | null | boolean;
 };
+export declare type PDSTabItemOption = {
+    title: PDSTextType;
+    isActive: boolean;
+    onClick?: () => void;
+};

package/dist/src/common/types/index.d.ts

@@ -3,4 +3,4 @@ export * from './icon';
 export * from './styled-components';
 export * from './text';
 export * from './uiColors';
-export * from './comopnents';
+export * from './components';

package/dist/src/common/types/index.js

@@ -15,4 +15,4 @@ __exportStar(require("./icon"), exports);
 __exportStar(require("./styled-components"), exports);
 __exportStar(require("./text"), exports);
 __exportStar(require("./uiColors"), exports);
-__exportStar(require("./comopnents"), exports);
+__exportStar(require("./components"), exports);

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

@@ -85,7 +85,7 @@ function AdminList(_a) {
         }
         setIsBulkActionBarOpen(true);
         selectedIds.forEach(function (val) { return checkboxMethods.setValue(val.toString(), true); });
-    }, [selectedIds]);
+    }, [selectedIds, maintainIds]);
     var handleSelectAllCheckbox = function () {
         var allIds = Object.keys(checkboxMethods.getValues()).map(function (id) { return Number(id); });
         var basicIds = allIds.filter(function (id) { return !(maintainIds === null || maintainIds === void 0 ? void 0 : maintainIds.includes(id)); });

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

@@ -3,6 +3,7 @@ import { PDSTextType } from '../../../common';
 declare type DesktopBasicModalProps = {
     titleText: PDSTextType;
     contentText?: PDSTextType;
+    bodySpacingMode?: 'none' | 'use';
     btnMode?: 'mbtn_amount1' | 'mbtn_amount2' | 'mbtn_amount3';
     mBtn1Text: PDSTextType;
     mBtn2Text?: PDSTextType;
@@ -19,5 +20,5 @@ declare type DesktopBasicModalProps = {
     onClickMBtn3?: () => void;
     children?: React.ReactNode;
 };
-declare function DesktopBasicModal({ titleText, contentText, btnMode, mBtn1Text, mBtn2Text, mBtn3Text, mBtn1State, mBtn2State, mBtn3State, mBtn1Type, mBtn2Type, mBtn3Type, onClickMBtn1, onClickMBtn2, onClickMBtn3, size, children }: DesktopBasicModalProps): React.ReactPortal;
+declare function DesktopBasicModal({ titleText, contentText, bodySpacingMode, btnMode, mBtn1Text, mBtn2Text, mBtn3Text, mBtn1State, mBtn2State, mBtn3State, mBtn1Type, mBtn2Type, mBtn3Type, onClickMBtn1, onClickMBtn2, onClickMBtn3, size, children }: DesktopBasicModalProps): React.ReactPortal;
 export default DesktopBasicModal;

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

@@ -28,12 +28,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var MainButton_1 = require("../MainButton");
 var TextLabel_1 = require("../TextLabel");
 function DesktopBasicModal(_a) {
-    var titleText = _a.titleText, contentText = _a.contentText, _b = _a.btnMode, btnMode = _b === void 0 ? 'mbtn_amount2' : _b, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _c = _a.mBtn1State, mBtn1State = _c === void 0 ? 'normal' : _c, _d = _a.mBtn2State, mBtn2State = _d === void 0 ? 'normal' : _d, _e = _a.mBtn3State, mBtn3State = _e === void 0 ? 'normal' : _e, _f = _a.mBtn1Type, mBtn1Type = _f === void 0 ? 'button' : _f, _g = _a.mBtn2Type, mBtn2Type = _g === void 0 ? 'button' : _g, _h = _a.mBtn3Type, mBtn3Type = _h === void 0 ? 'button' : _h, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, _j = _a.size, size = _j === void 0 ? 'large' : _j, children = _a.children;
+    var titleText = _a.titleText, contentText = _a.contentText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, _c = _a.btnMode, btnMode = _c === void 0 ? 'mbtn_amount2' : _c, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _d = _a.mBtn1State, mBtn1State = _d === void 0 ? 'normal' : _d, _e = _a.mBtn2State, mBtn2State = _e === void 0 ? 'normal' : _e, _f = _a.mBtn3State, mBtn3State = _f === void 0 ? 'normal' : _f, _g = _a.mBtn1Type, mBtn1Type = _g === void 0 ? 'button' : _g, _h = _a.mBtn2Type, mBtn2Type = _h === void 0 ? 'button' : _h, _j = _a.mBtn3Type, mBtn3Type = _j === void 0 ? 'button' : _j, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, _k = _a.size, size = _k === void 0 ? 'large' : _k, children = _a.children;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
         modalRoot.setAttribute('id', 'DesktopBasicModal');
@@ -57,7 +57,7 @@ function DesktopBasicModal(_a) {
         react_1.default.createElement(S_ModalWrapper, { size: size },
             react_1.default.createElement(S_Header, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" })),
-            react_1.default.createElement(S_Body, null,
+            react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode },
                 contentText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })),
                 children && children),
             react_1.default.createElement(hybrid_1.Divider, null),
@@ -87,7 +87,7 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
         medium: '688px',
         small: '400px'
     };
-    return sizes[size];
+    return size && sizes[size];
 });
 var S_Left = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -98,30 +98,33 @@ var S_Btn2Wrapper = styled_components_1.default.div(templateObject_4 || (templat
     return theme.spacing.spacingB;
 });
 var S_Right = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var S_Header = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0 ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n"], ["\n  margin: 0 ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n"])), function (_a) {
+var S_Header = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0 ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin: 0 ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingC;
+    return theme.spacing.spacingE;
 });
-var S_Body = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 1;\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  overflow: auto;\n"], ["\n  flex: 1;\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  overflow: auto;\n"])), function (_a) {
+var S_Body = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  flex: 1;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  overflow: auto;\n\n  ", "\n"], ["\n  flex: 1;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  overflow: auto;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.spacing.spacingF;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingF;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var bodySpacingMode = _a.bodySpacingMode;
+    return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin-bottom: 0;\n      margin-left: 0;\n      margin-right: 0;\n    "], ["\n      margin-bottom: 0;\n      margin-left: 0;\n      margin-right: 0;\n    "])));
 });
-var S_Footer = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (_a) {
+var S_Footer = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 }, function (_a) {
@@ -129,10 +132,10 @@ var S_Footer = styled_components_1.default.div(templateObject_8 || (templateObje
     return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingD;
 });
 exports.default = DesktopBasicModal;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -1,5 +1,8 @@
 /// <reference types="react" />
-import { PDSTextType } from '../../../common';
+import { PDSTabItemOption, PDSTextType } from '../../../common/types';
+declare type ItemArray = PDSTabItemOption & {
+    subArray?: PDSTabItemOption[];
+};
 declare type TextObj = {
     title: PDSTextType;
     path: string;
@@ -8,9 +11,11 @@ declare type TextObj = {
         path: string;
     }[];
 };
-declare type Props = {
-    textArray: TextObj[];
+declare type DesktopTabBarProps = {
+    itemArray?: ItemArray[];
     styleTheme?: 'main' | 'content';
+    /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
+    textArray?: TextObj[];
 };
-declare function DesktopTabBar({ textArray, styleTheme }: Props): JSX.Element;
+declare function DesktopTabBar({ itemArray, styleTheme, textArray }: DesktopTabBarProps): JSX.Element;
 export default DesktopTabBar;

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

@@ -31,36 +31,62 @@ var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function DesktopTabBar(_a) {
-    var textArray = _a.textArray, _b = _a.styleTheme, styleTheme = _b === void 0 ? 'main' : _b;
+    var itemArray = _a.itemArray, _b = _a.styleTheme, styleTheme = _b === void 0 ? 'main' : _b, textArray = _a.textArray;
     var history = (0, react_router_dom_1.useHistory)();
-    var pathname = window.location.pathname;
-    var handleClick = function (value) {
-        if (value) {
-            history.push(value.path);
-        }
-    };
-    var textLabel = function (value, isSubText) {
-        if (isSubText) {
-            return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
-        }
-        if (styleTheme === 'content') {
-            return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
-        }
-        if (styleTheme === 'main') {
-            return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
-        }
-    };
-    return (react_1.default.createElement(S_TabBox, null,
-        textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, isActive: pathname.includes(value.path), styleTheme: styleTheme },
-            react_1.default.createElement(S_TitleWrapper, { onClick: function () {
-                    handleClick(value);
-                } }, textLabel(value, false)),
-            value.subArray && pathname.includes(value.path) && (react_1.default.createElement(S_SubTabBox, null, value.subArray.map(function (subValue) { return (react_1.default.createElement(S_SubWrapper, { onClick: function () {
-                    handleClick(subValue);
-                }, key: subValue.path }, textLabel(subValue, true))); }))))); }),
-        textArray.map(function (value) {
-            return value.subArray && pathname.includes(value.path) && react_1.default.createElement(S_SubBackground, { key: value.path });
-        })));
+    var pathname = (0, react_router_dom_1.useLocation)().pathname;
+    if (itemArray) {
+        var handelClickTabItem_1 = function (item) {
+            if (item.onClick) {
+                item.onClick();
+            }
+        };
+        var textLabel_1 = function (item, isSubText) {
+            if (isSubText) {
+                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+            }
+            if (styleTheme === 'content') {
+                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+            }
+            if (styleTheme === 'main') {
+                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+            }
+        };
+        return (react_1.default.createElement(S_TabBox, null,
+            itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme },
+                react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function () { return handelClickTabItem_1(item); } }, textLabel_1(item, false)),
+                item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.title, text: subItem.title, onClick: function () { return handelClickTabItem_1(subItem); } }, textLabel_1(subItem, true))); }))))); }),
+            itemArray.map(function (item) { return item.isActive && item.subArray && react_1.default.createElement(S_SubBackground, { key: item.title }); })));
+    }
+    if (textArray) {
+        var handleClick_1 = function (value) {
+            if (value) {
+                history.push(value.path);
+            }
+        };
+        var textLabel_2 = function (item, isSubText) {
+            if (isSubText) {
+                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+            }
+            if (styleTheme === 'content') {
+                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+            }
+            if (styleTheme === 'main') {
+                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+            }
+        };
+        return (react_1.default.createElement(S_TabBox, null,
+            textArray.map(function (item) { return (react_1.default.createElement(S_TabWrapper, { key: item.path, isActive: pathname.includes(item.path), styleTheme: styleTheme },
+                react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function () {
+                        handleClick_1(item);
+                    } }, textLabel_2(item, false)),
+                item.subArray && pathname.includes(item.path) && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.path, text: subItem.title, onClick: function () {
+                        handleClick_1(subItem);
+                    } }, textLabel_2(subItem, true))); }))))); }),
+            textArray.map(function (item) {
+                return item.subArray && pathname.includes(item.path) && react_1.default.createElement(S_SubBackground, { key: item.path });
+            })));
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null);
 }
 var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-end;\n  box-sizing: border-box;\n  justify-content: center;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  align-items: flex-end;\n  box-sizing: border-box;\n  justify-content: center;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -74,15 +100,26 @@ var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObje
     var isActive = _a.isActive;
     return !isActive && "display: none;";
 });
-var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), mediumStyle);
-var S_TitleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  min-width: 100%;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n"], ["\n  cursor: pointer;\n  min-width: 100%;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n"])), function (_a) {
+// NOTE: Tab item 활성화 시 text에 bold가 적용되는데, 이때 font-family에 따라 text 영역의 너비가 변경되어 시각적 변동을 일으키는 문제를 해결하기 위한 처리입니다.
+var textOffset = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  content: ", ";\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n"], ["\n  display: block;\n  content: ", ";\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n"])), function (_a) {
+    var text = _a.text;
+    return "'" + text + "'";
+});
+var S_TabWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), mediumStyle);
+var S_TitleWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n\n  & > div::before {\n    font-weight: ", ";\n    ", "\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    ", "\n  }\n"], ["\n  cursor: pointer;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n\n  & > div::before {\n    font-weight: ", ";\n    ", "\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    ", "\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
-});
-var S_TabBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  position: relative;\n  height: 40px;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  position: relative;\n  height: 40px;\n"])), function (_a) {
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.normal;
+}, textOffset, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.bold;
+}, textOffset);
+var S_TabBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  position: relative;\n  height: 40px;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  position: relative;\n  height: 40px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area;
 }, function (_a) {
@@ -92,17 +129,23 @@ var S_TabBox = styled_components_1.default.div(templateObject_4 || (templateObje
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_SubBackground = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  height: 32px;\n  background-color: ", ";\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n"], ["\n  width: 100%;\n  height: 32px;\n  background-color: ", ";\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n"])), function (_a) {
+var S_SubBackground = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100%;\n  height: 32px;\n  background-color: ", ";\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n"], ["\n  width: 100%;\n  height: 32px;\n  background-color: ", ";\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area_sub;
 });
-var S_SubTabBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100vw;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n  z-index: 1;\n"], ["\n  width: 100vw;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n  z-index: 1;\n"])));
-var S_SubWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n"], ["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (_a) {
+var S_SubTabBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100vw;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n  z-index: 1;\n"], ["\n  width: 100vw;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n  z-index: 1;\n"])));
+var S_SubWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  & > div::before {\n    font-weight: ", ";\n    ", "\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    ", "\n  }\n"], ["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  & > div::before {\n    font-weight: ", ";\n    ", "\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    ", "\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
-});
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.normal;
+}, textOffset, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.bold;
+}, textOffset);
 exports.default = DesktopTabBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -14,6 +14,7 @@ export declare type TextLabelProps = {
     userSelectMode?: 'none' | 'use';
     customFontSize?: string;
     customFontWeight?: 'bold' | 'regular';
+    textDecorationType?: 'none' | 'line_through';
 };
 export declare type TextStyleProps = {
     textAlign?: 'left' | 'center' | 'right';
@@ -27,6 +28,7 @@ export declare type TextStyleProps = {
     userSelectMode?: 'none' | 'use';
     customFontSize?: string;
     customFontWeight?: 'bold' | 'regular';
+    textDecorationType?: 'none' | 'line_through';
 };
-declare function TextLabel({ text, tooltipText, tooltipPosition, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight }: TextLabelProps): JSX.Element;
+declare function TextLabel({ text, tooltipText, tooltipPosition, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight, textDecorationType }: TextLabelProps): JSX.Element;
 export default TextLabel;

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

@@ -28,12 +28,12 @@ var styled_components_1 = __importStar(require("styled-components"));
 var common_1 = require("../../../common");
 var hybrid_1 = require("../../../hybrid");
 function TextLabel(_a) {
-    var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'right_bottom' : _b, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, _d = _a.styleTheme, styleTheme = _d === void 0 ? 'body2Bold' : _d, colorOverride = _a.colorOverride, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'sysTextPrimary' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit, _h = _a.userSelectMode, userSelectMode = _h === void 0 ? 'none' : _h, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight;
-    var _j = (0, react_1.useState)(false), isTooltipOpen = _j[0], setIsTooltipOpen = _j[1];
+    var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'right_bottom' : _b, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, _d = _a.styleTheme, styleTheme = _d === void 0 ? 'body2Bold' : _d, colorOverride = _a.colorOverride, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'sysTextPrimary' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit, _h = _a.userSelectMode, userSelectMode = _h === void 0 ? 'none' : _h, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _j = _a.textDecorationType, textDecorationType = _j === void 0 ? 'none' : _j;
+    var _k = (0, react_1.useState)(false), isTooltipOpen = _k[0], setIsTooltipOpen = _k[1];
     var handleTooltipToggle = function (value) {
         setIsTooltipOpen(value);
     };
-    return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight },
+    return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType },
         text,
         tooltipText && (react_1.default.createElement(S_TooltipBox, { styleTheme: styleTheme },
             react_1.default.createElement(S_IconWrapper, { onMouseEnter: function () { return handleTooltipToggle(true); }, onMouseLeave: function () { return handleTooltipToggle(false); } },
@@ -270,7 +270,7 @@ var tooltipLeftTop = (0, styled_components_1.css)(templateObject_32 || (template
 var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  right: 0;\n  top: 20px;\n"], ["\n  right: 0;\n  top: 20px;\n"])));
 var tooltipRightTop = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  left: 0;\n  bottom: 20px;\n"], ["\n  left: 0;\n  bottom: 20px;\n"])));
 var tooltipRightBottom = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  left: 0;\n  top: 20px;\n"], ["\n  left: 0;\n  top: 20px;\n"])));
-var S_TextLabel = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {
@@ -327,6 +327,13 @@ var S_TextLabel = styled_components_1.default.div(templateObject_36 || (template
 }, function (_a) {
     var userSelectMode = _a.userSelectMode;
     return userSelectMode === 'none' && userSelectModeStyle;
+}, function (_a) {
+    var textDecorationType = _a.textDecorationType;
+    return textDecorationType &&
+        {
+            none: '',
+            line_through: 'text-decoration: line-through;'
+        }[textDecorationType];
 });
 var S_TooltipBox = styled_components_1.default.div(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  display: inline-block;\n  margin-left: ", ";\n  position: relative;\n\n  ", ";\n"], ["\n  display: inline-block;\n  margin-left: ", ";\n  position: relative;\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,12 +1,14 @@
 /// <reference types="react" />
-import { PDSTextType } from '../../../common';
+import { PDSTabItemOption, PDSTextType } from '../../../common/types';
 declare type TextObj = {
     path: string;
     title: PDSTextType;
 };
-export declare type UserDesktopTabBarProps = {
-    textArray: TextObj[];
+declare type UserDesktopTabBarProps = {
+    itemArray?: PDSTabItemOption[];
     styleTheme?: 'main';
+    /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
+    textArray?: TextObj[];
 };
-declare function UserDesktopTabBar({ textArray, styleTheme }: UserDesktopTabBarProps): JSX.Element;
+declare function UserDesktopTabBar({ itemArray, styleTheme, textArray }: UserDesktopTabBarProps): JSX.Element;
 export default UserDesktopTabBar;

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

@@ -31,21 +31,37 @@ var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function UserDesktopTabBar(_a) {
-    var textArray = _a.textArray, _b = _a.styleTheme, styleTheme = _b === void 0 ? 'main' : _b;
+    var itemArray = _a.itemArray, _b = _a.styleTheme, styleTheme = _b === void 0 ? 'main' : _b, textArray = _a.textArray;
     var history = (0, react_router_dom_1.useHistory)();
-    var pathname = window.location.pathname;
-    var handleClick = function (value) {
-        if (value) {
-            history.push(value.path);
-        }
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, styleTheme: styleTheme, isActive: pathname === value.path, onClick: function () {
-                handleClick(value);
+    var pathname = (0, react_router_dom_1.useLocation)().pathname;
+    if (itemArray) {
+        var handleClickTabItem_1 = function (item) {
+            if (item.onClick) {
+                item.onClick();
+            }
+        };
+        return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function () { return handleClickTabItem_1(item); } },
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); })));
+    }
+    if (textArray) {
+        var handleClick_1 = function (value) {
+            if (value) {
+                history.push(value.path);
+            }
+        };
+        return (react_1.default.createElement(S_TabBar, null, textArray.map(function (item) { return (react_1.default.createElement(S_TabWrapper, { key: item.path, styleTheme: styleTheme, isActive: pathname === item.path, onClick: function () {
+                handleClick_1(item);
             } },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'body2Bold' : 'body2Regular', colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); }))));
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, styleTheme: pathname === item.path ? 'body2Bold' : 'body2Regular', colorTheme: pathname === item.path ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); })));
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null);
 }
-var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+// NOTE: Tab item 활성화 시 text에 bold가 적용되는데, 이때 font-family에 따라 text 영역의 너비가 변경되어 시각적 변동을 일으키는 문제를 해결하기 위한 처리입니다.
+var textOffset = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  content: ", ";\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n"], ["\n  display: block;\n  content: ", ";\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n"])), function (_a) {
+    var text = _a.text;
+    return "'" + text + "'";
+});
+var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  & > div::before {\n    font-weight: ", ";\n    ", "\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    ", "\n  }\n"], ["\n  ", "\n\n  & > div::before {\n    font-weight: ", ";\n    ", "\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    ", "\n  }\n"])), function (_a) {
     var styleTheme = _a.styleTheme;
     switch (styleTheme) {
         case 'main':
@@ -53,8 +69,14 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (template
         default:
             return mainStyle;
     }
-});
-var mainStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  background-color: ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  background-color: ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.normal;
+}, textOffset, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.bold;
+}, textOffset);
+var mainStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  background-color: ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  background-color: ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
@@ -67,7 +89,7 @@ var mainStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject
     var isActive = _a.isActive;
     return !isActive && "display: none;";
 });
-var S_TabBar = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"])), function (_a) {
+var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area;
 }, function (_a) {
@@ -75,4 +97,4 @@ var S_TabBar = styled_components_1.default.div(templateObject_3 || (templateObje
     return theme.ui_cpnt_divider;
 });
 exports.default = UserDesktopTabBar;
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -2,11 +2,12 @@ import React from 'react';
 import { PDSTextType } from '../../../common';
 declare type MobileBasicModalProps = {
     titleText: PDSTextType;
+    bodySpacingMode?: 'none' | 'use';
     contentText?: PDSTextType;
     mBtnText?: PDSTextType;
     onClickMBtn?: () => void;
     onClickXMarkIcon?: () => void;
     children?: React.ReactNode;
 };
-declare function MobileBasicModal({ titleText, contentText, mBtnText, onClickMBtn, onClickXMarkIcon, children }: MobileBasicModalProps): React.ReactPortal;
+declare function MobileBasicModal({ titleText, bodySpacingMode, contentText, mBtnText, onClickMBtn, onClickXMarkIcon, children }: MobileBasicModalProps): React.ReactPortal;
 export default MobileBasicModal;

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

@@ -28,12 +28,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var IconButton_1 = require("../IconButton");
 var MainButton_1 = require("../MainButton");
 var TextLabel_1 = require("../TextLabel");
 function MobileBasicModal(_a) {
-    var titleText = _a.titleText, contentText = _a.contentText, mBtnText = _a.mBtnText, onClickMBtn = _a.onClickMBtn, onClickXMarkIcon = _a.onClickXMarkIcon, children = _a.children;
+    var titleText = _a.titleText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, contentText = _a.contentText, mBtnText = _a.mBtnText, onClickMBtn = _a.onClickMBtn, onClickXMarkIcon = _a.onClickXMarkIcon, children = _a.children;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
         modalRoot.setAttribute('id', 'MobileBasicModal');
@@ -56,7 +56,7 @@ function MobileBasicModal(_a) {
                 react_1.default.createElement(S_TitleWrapper, null,
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" })),
                 react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 24, shapeType: "rectangle", iconName: "ic_xmark", iconColorKey: "ui_cpnt_modal_header_icon_02", iconFillType: "line", onClick: onClickXMarkIcon })),
-            react_1.default.createElement(S_Body, null,
+            react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode },
                 contentText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })),
                 children && children),
             react_1.default.createElement(S_Footer, null, mBtnText && react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, size: "rlarge", onClick: onClickMBtn })))), container);
@@ -65,7 +65,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templa
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
 });
-var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n\n  max-height: 720px;\n  width: calc(100% - 48px);\n  max-width: 560px;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n\n  max-height: 720px;\n  width: calc(100% - 48px);\n  max-width: 560px;\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  left: 50%;\n  max-height: 720px;\n  max-width: 560px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(100% - 48px);\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  left: 50%;\n  max-height: 720px;\n  max-width: 560px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(100% - 48px);\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
 }, function (_a) {
@@ -75,13 +75,13 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
     var theme = _a.theme;
     return theme.boxShadow.elevation4;
 });
-var S_Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-bottom: ", ";\n  display: flex;\n  justify-content: space-between;\n"], ["\n  padding-bottom: ", ";\n  display: flex;\n  justify-content: space-between;\n"])), function (_a) {
+var S_Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-top: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n  overflow-y: scroll;\n  max-height: 480px;\n"], ["\n  padding-top: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n  overflow-y: scroll;\n  max-height: 480px;\n"])), function (_a) {
+var S_Body = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  max-height: 480px;\n  overflow-y: scroll;\n  padding-top: ", ";\n\n  ", "\n"], ["\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  max-height: 480px;\n  overflow-y: scroll;\n  padding-top: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingC;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
@@ -90,11 +90,14 @@ var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject
     return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var bodySpacingMode = _a.bodySpacingMode;
+    return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      margin-bottom: 0;\n      margin-left: 0;\n      margin-right: 0;\n    "], ["\n      margin-bottom: 0;\n      margin-left: 0;\n      margin-right: 0;\n    "])));
 });
-var S_Footer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding-top: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding-top: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n"])), function (_a) {
+var S_Footer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  padding-top: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
@@ -103,17 +106,17 @@ var S_Footer = styled_components_1.default.div(templateObject_5 || (templateObje
     return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingD;
 });
-var S_TitleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-right: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n"], ["\n  margin-right: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n"])), function (_a) {
+var S_TitleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n"], ["\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingB;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingB;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
 exports.default = MobileBasicModal;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -1,11 +1,13 @@
 /// <reference types="react" />
-import { PDSTextType } from '../../../common';
+import { PDSTabItemOption, PDSTextType } from '../../../common/types';
 declare type TextObj = {
     path: string;
     title: PDSTextType;
 };
-export declare type MobileTabBarProps = {
-    textArray: TextObj[];
+declare type MobileTabBarProps = {
+    itemArray?: PDSTabItemOption[];
+    /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
+    textArray?: TextObj[];
 };
-declare function MobileTabBar({ textArray }: MobileTabBarProps): JSX.Element;
+declare function MobileTabBar({ itemArray, textArray }: MobileTabBarProps): JSX.Element;
 export default MobileTabBar;

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

@@ -12,19 +12,28 @@ var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function MobileTabBar(_a) {
-    var textArray = _a.textArray;
+    var itemArray = _a.itemArray, textArray = _a.textArray;
     var history = (0, react_router_dom_1.useHistory)();
-    var pathname = window.location.pathname;
-    var handleClick = function (value) {
-        if (value) {
-            history.push(value.path);
-        }
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, isActive: pathname === value.path, onClick: function () {
-                handleClick(value);
-            } },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: "body2Bold", colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); }))));
+    var pathname = (0, react_router_dom_1.useLocation)().pathname;
+    if (itemArray) {
+        var handleClickTabItem_1 = function (item) {
+            if (item.onClick) {
+                item.onClick();
+            }
+        };
+        return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, onClick: function () { return handleClickTabItem_1(item); } },
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); })));
+    }
+    if (textArray) {
+        var handleClick_1 = function (value) {
+            if (value) {
+                history.push(value.path);
+            }
+        };
+        return (react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } },
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); })));
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null);
 }
 var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  background-color: ", ";\n  padding: 0 ", ";\n  flex: 1;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  background-color: ", ";\n  padding: 0 ", ";\n  flex: 1;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
     var isActive = _a.isActive, theme = _a.theme;

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

@@ -12,6 +12,7 @@ export declare type TextLabelProps = {
     userSelectMode?: 'none' | 'use';
     customFontSize?: string;
     customFontWeight?: 'bold' | 'regular';
+    textDecorationType?: 'none' | 'line_through';
 };
 export declare type TextStyleProps = {
     textAlign?: 'left' | 'center' | 'right';
@@ -24,6 +25,7 @@ export declare type TextStyleProps = {
     userSelectMode?: 'none' | 'use';
     customFontSize?: string;
     customFontWeight?: 'bold' | 'regular';
+    textDecorationType?: 'none' | 'line_through';
 };
-declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight }: TextLabelProps): JSX.Element;
+declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight, textDecorationType }: TextLabelProps): JSX.Element;
 export default TextLabel;

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

@@ -30,8 +30,8 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var common_1 = require("../../../common");
 function TextLabel(_a) {
-    var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.singleLineMode, singleLineMode = _e === void 0 ? 'none' : _e, _f = _a.ellipsisMode, ellipsisMode = _f === void 0 ? 'none' : _f, lineLimit = _a.lineLimit, _g = _a.userSelectMode, userSelectMode = _g === void 0 ? 'none' : _g, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight;
-    return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight }, text));
+    var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.singleLineMode, singleLineMode = _e === void 0 ? 'none' : _e, _f = _a.ellipsisMode, ellipsisMode = _f === void 0 ? 'none' : _f, lineLimit = _a.lineLimit, _g = _a.userSelectMode, userSelectMode = _g === void 0 ? 'none' : _g, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _h = _a.textDecorationType, textDecorationType = _h === void 0 ? 'none' : _h;
+    return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType }, text));
 }
 var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -259,7 +259,7 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_30 || (templateO
     return lineLimit;
 });
 var userSelectModeStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"], ["\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"])));
-var S_TextLabel = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {
@@ -316,6 +316,13 @@ var S_TextLabel = styled_components_1.default.div(templateObject_32 || (template
 }, function (_a) {
     var userSelectMode = _a.userSelectMode;
     return userSelectMode === 'none' && userSelectModeStyle;
+}, function (_a) {
+    var textDecorationType = _a.textDecorationType;
+    return textDecorationType &&
+        {
+            none: '',
+            line_through: 'text-decoration: line-through;'
+        }[textDecorationType];
 });
 exports.default = TextLabel;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;

package/package.json

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

package/release-note.md

@@ -1,24 +1,20 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v1.3.9]
+## [v1.3.12]
 
 ### Component
-* AdminList
-  * selectionMode의 value변경 (‘none’ | ‘use’ 에서 'none' | ‘single’ | 'multi'로 변경)
-  * 전체선택 체크박스를 해제할 시 maintain 되어야 하는 아이템의 체크박스를 유지하게 수정
-  * quickActionBtnType이 ‘fix’ 일 경우 퀵 액션 버튼이 호버했을 시에만 버튼이 보여지게 수정
-* Dropdown
-  * selectMode?: 'one' | 'multi'; -> selectionMode?: 'single' | 'multi’;로 변경 (문구의 통일성 위해)
-* DesktopBasicModal
-  * prop추가
-    * mBtn1Type
-    * mBtn2Type
-    * mBtn3Type
 * Icon
-  * line icon value추가
-    * ic_folder
-    * ic_download
-    * ic_arrow_left_thin
-    * ic_arrow_right_thin
+  * ic_requirement(line) 추가
+  * ic_question(fill) 추가
+* TextLabel
+  * textDecorationType prop 추가
+* DesktopTabBar
+  * itemArray prop 추가 (onClick과 isActive를 통해 TabBar를 핸들링 할 수 있습니다.)
+  * 텍스트 중심 안맞고, 시각적 변동이 일어나던 부분 수정
+* UserDesktopTabBar
+  * itemArray prop 추가 (onClick과 isActive를 통해 TabBar를 핸들링 할 수 있습니다.)
+  * 텍스트 중심 안맞고, 시각적 변동이 일어나던 부분 수정
+* MobileTabBar
+  * itemArray prop 추가 (onClick과 isActive를 통해 TabBar를 핸들링 할 수 있습니다.)
 
 ### Color
-* 컬러 키 값 22.04.28 21시 43분 기준 싱크
+* 컬러 키 값 22.05.10 14시 10분 기준 싱크