pds-dev-kit-web 1.3.11 → 1.3.14

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

@@ -124,9 +124,10 @@ function AdminListItem(_a) {
         react_1.default.createElement(S_SelectionColumn, { rowSize: rowSize }, selectionMode === 'multi' && (react_1.default.createElement(S_Selection, null,
             react_1.default.createElement(Checkbox_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' ? 'disabled' : 'normal' })))),
         react_1.default.createElement(S_ImageColumn, { rowSize: rowSize },
-            column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && (react_1.default.createElement(S_ImageWrapper, null,
+            column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && (react_1.default.createElement(S_ImageWrapper, { rowSize: rowSize },
                 react_1.default.createElement(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageShapeType === 'circular' ? 64 : 120, ratio: imageRatio, scaleType: "cover", radius: imageShapeType === 'round' ? imageRadius : undefined }))),
-            (rowSize === 'low' || rowSize === 'medium') && (react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 2 })),
+            (rowSize === 'low' || rowSize === 'medium') && (react_1.default.createElement(S_Column, null,
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 2 }))),
             rowSize === 'high' && (react_1.default.createElement(S_TextWrapper, { ref: contentRef, hasScroll: hasScroll },
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary" })))),
         column3Text && (react_1.default.createElement(S_Column, { columnSize: column3TextWidth },
@@ -180,11 +181,14 @@ var S_QuickActionButton = styled_components_1.default.div(templateObject_12 || (
     return (disabled ? 'default' : 'pointer');
 });
 var S_Selection = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  width: 40px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  width: 40px;\n"])));
-var S_ImageWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+var S_ImageWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  margin-right: ", ";\n\n  ", "\n"], ["\n  margin-right: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
+}, function (_a) {
+    var rowSize = _a.rowSize;
+    return rowSize === 'high' && (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      align-items: center;\n      display: flex;\n      height: 100%;\n    "], ["\n      align-items: center;\n      display: flex;\n      height: 100%;\n    "])));
 });
-var S_ImageColumn = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  flex: 1;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n"], ["\n  flex: 1;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n"])), function (_a) {
+var S_ImageColumn = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  flex: 1;\n  overflow: auto;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n"], ["\n  flex: 1;\n  overflow: auto;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme, rowSize = _a.rowSize;
     return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
 }, function (_a) {
@@ -199,14 +203,13 @@ var S_ImageColumn = styled_components_1.default.div(templateObject_17 || (templa
 }, function (_a) {
     var rowSize = _a.rowSize;
     return rowSize === 'high'
-        ? (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n          box-sizing: border-box;\n          height: 200px;\n        "], ["\n          box-sizing: border-box;\n          height: 200px;\n        "]))) : (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n          align-items: center;\n          display: flex;\n        "], ["\n          align-items: center;\n          display: flex;\n        "])));
+        ? (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n          box-sizing: border-box;\n          display: flex;\n          height: 200px;\n        "], ["\n          box-sizing: border-box;\n          display: flex;\n          height: 200px;\n        "]))) : (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n          align-items: center;\n          display: flex;\n        "], ["\n          align-items: center;\n          display: flex;\n        "])));
 });
-var S_TextWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  height: 100%;\n\n  ", "\n"], ["\n  height: 100%;\n\n  ", "\n"])), function (_a) {
+var S_TextWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  height: 100%;\n  overflow: auto;\n\n  ", "\n"], ["\n  height: 100%;\n  overflow: auto;\n\n  ", "\n"])), function (_a) {
     var hasScroll = _a.hasScroll;
-    return hasScroll
-        ? (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n          & > div {\n            height: 100%;\n            overflow-y: auto;\n          }\n        "], ["\n          & > div {\n            height: 100%;\n            overflow-y: auto;\n          }\n        "]))) : (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n          align-items: center;\n          display: flex;\n        "], ["\n          align-items: center;\n          display: flex;\n        "])));
+    return !hasScroll && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      align-items: center;\n      display: flex;\n    "], ["\n      align-items: center;\n      display: flex;\n    "])));
 });
-var S_Column = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding: ", ";\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding: ", ";\n\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_Column = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  overflow: auto;\n  padding: ", ";\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  overflow: auto;\n  padding: ", ";\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {

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/FloatingActionButton/FloatingActionButton.js

@@ -34,9 +34,6 @@ var TextLabel_1 = require("../TextLabel");
 // textColorKey?: string;
 // baseColorKey?: string;
 // borderColorKey?: string;
-// NOTE : PDS 문서 1.2 버전에서 업데이트 예정인 props
-// displayType?: 'icon_only' | 'text_only' | 'icon_text';
-// state?: 'normal' | 'disabled';
 function FloatingActionButton(_a) {
     var text = _a.text, _b = _a.displayType, displayType = _b === void 0 ? 'icon_text' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.fontWeight, fontWeight = _d === void 0 ? 'bold' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, iconName = _a.iconName, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
     var handleClick = function () {
@@ -71,9 +68,12 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
+var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  box-shadow: ", ";\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  box-shadow: ", ";\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.boxShadow.elevation3;
 }, function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');

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,16 +28,16 @@ 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); } },
-                react_1.default.createElement(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "line" })),
+                react_1.default.createElement(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: "ui_cpnt_icon_sys_grey_03" })),
             react_1.default.createElement(S_TooltipWrapper, { className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition }, "" + tooltipText)))));
 }
 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) {
@@ -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/desktop/layout/LayoutWS/LayoutWS.js

@@ -17,6 +17,6 @@ var LayoutWS = function (_a) {
 };
 var S_LayoutWS = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100vh;\n  width: 100vw;\n  min-width: 1200px;\n"], ["\n  display: flex;\n  height: 100vh;\n  width: 100vw;\n  min-width: 1200px;\n"])));
 var S_LeftWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
-var S_RightWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /* width: calc(100% - 240px); */\n  width: 100%;\n"], ["\n  /* width: calc(100% - 240px); */\n  width: 100%;\n"])));
+var S_RightWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  overflow: hidden;\n"])));
 exports.default = LayoutWS;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/desktop/layout/LayoutWT/Containers/PageMenuContainer/variation/TopPageMenu.js

@@ -65,6 +65,6 @@ var S_TopPageMenuArea = styled_components_1.default.div(templateObject_3 || (tem
     var areaLine = _a.areaLine;
     return areaLine && areaLineStyle;
 });
-var S_TopPageMenuContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  min-height: 64px;\n"], ["\n  min-height: 64px;\n"])));
+var S_TopPageMenuContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  min-height: 48px;\n"], ["\n  min-height: 48px;\n"])));
 exports.default = TopPageMenu;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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;