pds-dev-kit-web 1.7.2 → 1.7.4

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

@@ -639,5 +639,7 @@
     "ui_cpnt_pagination_dot_border": "sys_border_line_01",
     "ui_63": "sys_facebook",
     "ui_64": "sys_text_white",
-    "ui_cpnt_sheet_border_04": "sys_border_line_02"
+    "ui_cpnt_sheet_border_04": "sys_border_line_02",
+    "ui_cpnt_button_fill_base_01": "sys_component_base_05",
+    "ui_cpnt_button_fill_base_hangup": "sys_component_base_red"
 }

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

@@ -1,4 +1,84 @@
 declare const colorSet: {
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
+        opacity50: string;
+        grey30: string;
+        opacity95: string;
+        darkgrey30: string;
+        opacity40: string;
+        kakaoyellow: string;
+        pastelblue500: string;
+        pastelpink500: string;
+        pastelorange500: string;
+        pastelgreen500: string;
+        pastelpurple500: string;
+        darkpastelblue500: string;
+        darkpastelpink500: string;
+        darkpastelorange500: string;
+        darkpastelgreen500: string;
+        darkpastelpurple500: string;
+        green30: string;
+        darkgreen30: string;
+        orange50: string;
+        darkorange50: string;
+        orange30: string;
+        darkorange30: string;
+        green50: string;
+        darkgreen50: string;
+        opacity90: string;
+        facebookblue: string;
+    };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -455,86 +535,6 @@ declare const colorSet: {
         sys_cpnt_sheet_base_06: string;
         sys_facebook: string;
     };
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
-        opacity50: string;
-        grey30: string;
-        opacity95: string;
-        darkgrey30: string;
-        opacity40: string;
-        kakaoyellow: string;
-        pastelblue500: string;
-        pastelpink500: string;
-        pastelorange500: string;
-        pastelgreen500: string;
-        pastelpurple500: string;
-        darkpastelblue500: string;
-        darkpastelpink500: string;
-        darkpastelorange500: string;
-        darkpastelgreen500: string;
-        darkpastelpurple500: string;
-        green30: string;
-        darkgreen30: string;
-        orange50: string;
-        darkorange50: string;
-        orange30: string;
-        darkorange30: string;
-        green50: string;
-        darkgreen50: string;
-        opacity90: string;
-        facebookblue: string;
-    };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
         ui_cpnt_button_fill_base_default: string;
@@ -1177,6 +1177,8 @@ declare const colorSet: {
         ui_63: string;
         ui_64: string;
         ui_cpnt_sheet_border_04: string;
+        ui_cpnt_button_fill_base_01: string;
+        ui_cpnt_button_fill_base_hangup: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
+var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
-var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
+    SemanticColor: SemanticColor_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
-    SemanticColor: SemanticColor_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

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

@@ -640,4 +640,6 @@ export interface UITheme {
     ui_63: string;
     ui_64: string;
     ui_cpnt_sheet_border_04: string;
+    ui_cpnt_button_fill_base_01: string;
+    ui_cpnt_button_fill_base_hangup: string;
 }

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

@@ -43,6 +43,7 @@ var hybrid_1 = require("../../../../../hybrid");
 var ContextMenuNavs_1 = require("../ContextMenuNavs");
 var DisplayOnlyMenuItemNav_1 = __importDefault(require("./components/DisplayOnlyMenuItemNav"));
 var InternalLinkMenuItemNav_1 = __importDefault(require("./components/InternalLinkMenuItemNav"));
+var PageMenuItemNav_1 = __importDefault(require("./components/PageMenuItemNav"));
 var PAppMenuItemNav_1 = __importDefault(require("./components/PAppMenuItemNav"));
 var WebMenuItemNav_1 = __importDefault(require("./components/WebMenuItemNav"));
 // NOTE: 서버에서 itemType으로 enum값이 잘 오면 아래 불필요한 케이스/default 간소화
@@ -61,6 +62,7 @@ function MenuItemNav(_a) {
             menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), showMenuAsIcon: showMenuAsIcon })),
             menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { openNewTab: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
             menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(InternalLinkMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
+            menu.menuItemType === 'NAV_PAGE' && menu.slug && (react_1.default.createElement(PageMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { slug: menu.slug }), showMenuAsIcon: showMenuAsIcon })),
             menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }), showMenuAsIcon: showMenuAsIcon })),
             isContextOpen && menu.parsedNodes.length > 0 && (react_1.default.createElement(ContextMenuNavs_1.ContextMenuNavs, { parentRef: ref }, menu.parsedNodes.map(function (nav, index) { return (react_1.default.createElement(ContextMenuNavs_1.ContextMenuItemNav, { key: index, menu: nav })); })))),
         showMenuAsIcon ? (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_b" })) : (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_f" }))));

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PageMenuItemNav.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ParsedNode } from '../../../types';
+declare type WithRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+declare type Props = {
+    menu: WithRequired<ParsedNode, 'slug'>;
+    showMenuAsIcon?: boolean;
+    isContextMenu?: boolean;
+};
+declare function PageMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
+export default PageMenuItemNav;

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

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_router_dom_1 = require("react-router-dom");
+var Navigations_1 = require("../../../../../../common/components/Navigations");
+var DynamicDesktopNavBar_1 = require("../../../DynamicDesktopNavBar");
+var IconNav_1 = __importDefault(require("../../IconNav"));
+var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
+function PageMenuItemNav(_a) {
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, _b = _a.isContextMenu, isContextMenu = _b === void 0 ? false : _b;
+    var _c = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext), basePath = _c.basePath, activeMode = _c.activeMode;
+    var activeMatch = (0, react_router_dom_1.useRouteMatch)(basePath + "/pages/:activeKey");
+    var isActive = (0, react_1.useMemo)(function () {
+        if (activeMode === 'BY_CLICK') {
+            return false;
+        }
+        return (activeMatch === null || activeMatch === void 0 ? void 0 : activeMatch.params.activeKey) === menu.slug;
+    }, [activeMode, menu, activeMatch]);
+    if (showMenuAsIcon) {
+        if (menu.iconSrc) {
+            return (react_1.default.createElement(ImageIconNav_1.default, { to: basePath + "/pages/" + menu.slug, iconSrc: menu.iconSrc, openNewTab: false }));
+        }
+        if (menu.iconName) {
+            return (react_1.default.createElement(IconNav_1.default, { to: basePath + "/pages/" + menu.slug, iconName: menu.iconName, openNewTab: false }));
+        }
+    }
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/pages/" + menu.slug, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/pages/" + menu.slug, text: menu.name }));
+}
+exports.default = PageMenuItemNav;

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

@@ -8,7 +8,8 @@ export declare type ParsedNode = {
     iconName?: PDSIconType;
     visibilityLevel: string;
     pAppCode?: string;
+    slug?: string;
     conversionLinkSrc?: string;
     parsedNodes: Array<ParsedNode>;
 };
-export declare type menuItemTypes = 'NAV_P_APP' | 'WEB_LINK' | 'INTERNAL_LINK' | 'DISPLAY_ONLY';
+export declare type menuItemTypes = 'NAV_P_APP' | 'WEB_LINK' | 'INTERNAL_LINK' | 'DISPLAY_ONLY' | 'NAV_PAGE';

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

@@ -2,7 +2,7 @@ import { MutableRefObject } from 'react';
 export declare type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
+    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;

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

@@ -40,6 +40,7 @@ var ContentsContainer = function (_a) {
         WTL_1: (react_1.default.createElement(variation_1.WTL, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
         WTM_1: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
         WTM_2: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WTM_3: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_3", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
         WTN_1: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1 })),
         WTN_2: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_2", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1 })),
         WTN_3: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_3", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1 })),

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare type WTMProps = {
     content1?: JSX.Element;
-    layoutType: 'WTM_1' | 'WTM_2';
+    layoutType: 'WTM_1' | 'WTM_2' | 'WTM_3';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;

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

@@ -22,7 +22,8 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
     var layoutType = _a.layoutType;
     return ({
         WTM_1: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
-        WTM_2: 'height: 100%;'
+        WTM_2: 'height: 100%;',
+        WTM_3: 'height: 100%;overflow-x: hidden;overflow-y: auto;'
     }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
@@ -32,7 +33,8 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templa
     var layoutType = _a.layoutType;
     return ({
         WTM_1: 'padding-bottom: 88px;',
-        WTM_2: 'height: 100%;'
+        WTM_2: 'height: 100%;',
+        WTM_3: ''
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;
@@ -42,7 +44,8 @@ var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateOb
     var layoutType = _a.layoutType;
     return ({
         WTM_1: '',
-        WTM_2: 'height: 100%;overflow: hidden;'
+        WTM_2: 'height: 100%;overflow: hidden;',
+        WTM_3: ''
     }[layoutType]);
 });
 exports.default = WTM;

package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts

@@ -1,6 +1,6 @@
 import React, { MutableRefObject } from 'react';
 export declare type ContainersBoxProps = {
-    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
+    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
     pageMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;
     subMenuContent?: JSX.Element;

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

@@ -65,6 +65,7 @@ var ContainersBox = function (_a) {
             WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
+            WTM_3: react_1.default.createElement(react_1.default.Fragment, null),
             WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTN_2: react_1.default.createElement(react_1.default.Fragment, null),
             WTN_3: react_1.default.createElement(react_1.default.Fragment, null),
@@ -111,6 +112,7 @@ var ContainersBox = function (_a) {
                 WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTM_3: react_1.default.createElement(react_1.default.Fragment, null),
                 WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTN_2: react_1.default.createElement(react_1.default.Fragment, null),
                 WTN_3: react_1.default.createElement(react_1.default.Fragment, null),
@@ -156,6 +158,7 @@ var ContainersBox = function (_a) {
                 WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTM_3: react_1.default.createElement(react_1.default.Fragment, null),
                 WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTN_2: react_1.default.createElement(react_1.default.Fragment, null),
                 WTN_3: react_1.default.createElement(react_1.default.Fragment, null),
@@ -202,6 +205,7 @@ var ContainersBox = function (_a) {
                     WTL_1: '',
                     WTM_1: '',
                     WTM_2: '',
+                    WTM_3: '',
                     WTN_1: '',
                     WTN_2: '',
                     WTN_3: '',

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/ContentsContainer.d.ts

@@ -2,7 +2,7 @@
 export declare type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'MSA_1' | 'MSB_1' | 'MSC_1' | 'MSC_2' | 'MSD_1' | 'MSE_1' | 'MSF_1' | 'MSF_2' | 'MSG_1' | 'MSH_1';
+    layoutType: 'MSA_1' | 'MSA_2' | 'MSB_1' | 'MSC_1' | 'MSC_2' | 'MSD_1' | 'MSE_1' | 'MSF_1' | 'MSF_2' | 'MSG_1' | 'MSH_1';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/ContentsContainer.js

@@ -8,7 +8,8 @@ var variation_1 = require("./variation");
 var ContentsContainer = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     return (react_1.default.createElement(react_1.default.Fragment, null, {
-        MSA_1: (react_1.default.createElement(variation_1.MSA, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        MSA_1: (react_1.default.createElement(variation_1.MSA, { layoutType: "MSA_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        MSA_2: (react_1.default.createElement(variation_1.MSA, { layoutType: "MSA_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
         MSB_1: (react_1.default.createElement(variation_1.MSB, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
         MSC_1: (react_1.default.createElement(variation_1.MSC, { layoutType: "MSC_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
         MSC_2: (react_1.default.createElement(variation_1.MSC, { layoutType: "MSC_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSA.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 export declare type MSAProps = {
     content1?: JSX.Element;
+    layoutType: 'MSA_1' | 'MSA_2';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;
 };
-declare const MSA: ({ content1, containerColor, areaColor, isLoadingContainer1 }: MSAProps) => JSX.Element;
+declare const MSA: ({ content1, layoutType, containerColor, areaColor, isLoadingContainer1 }: MSAProps) => JSX.Element;
 export default MSA;

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSA.js

@@ -11,8 +11,8 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MSA = function (_a) {
-    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
-    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA", containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA", areaColor: areaColor },
+    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
+    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA", layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA", layoutType: layoutType, areaColor: areaColor },
         react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MSA" }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"])), function (_a) {
@@ -22,7 +22,13 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 360px;\n  ", ";\n  ", ";\n"], ["\n  min-width: 360px;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        MSA_1: 'padding-bottom: 88px;',
+        MSA_2: ''
+    }[layoutType]);
+}, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });

package/dist/src/mobile/layout/LayoutMS/ContainersBox/ContainersBox.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type ContainersBoxProps = {
-    layoutType: 'MSA_1' | 'MSB_1' | 'MSC_1' | 'MSC_2' | 'MSD_1' | 'MSE_1' | 'MSF_1' | 'MSF_2' | 'MSG_1' | 'MSH_1';
+    layoutType: 'MSA_1' | 'MSA_2' | 'MSB_1' | 'MSC_1' | 'MSC_2' | 'MSD_1' | 'MSE_1' | 'MSF_1' | 'MSF_2' | 'MSG_1' | 'MSH_1';
     tabContent?: JSX.Element;
     content1?: JSX.Element;
     content2?: JSX.Element;

package/dist/src/mobile/layout/LayoutMS/ContainersBox/ContainersBox.js

@@ -15,6 +15,7 @@ var ContainersBox = function (_a) {
     return (react_1.default.createElement(S_ContainersBox, null,
         {
             MSA_1: react_1.default.createElement(react_1.default.Fragment, null),
+            MSA_2: react_1.default.createElement(react_1.default.Fragment, null),
             MSB_1: react_1.default.createElement(react_1.default.Fragment, null),
             MSC_1: react_1.default.createElement(react_1.default.Fragment, null),
             MSC_2: react_1.default.createElement(react_1.default.Fragment, null),

package/package.json

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

package/release-note.md

@@ -1,10 +1,8 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v1.7.2]
+## [v1.7.4]
 
-### Component
-* BasicChatListItem
-  * titleText의 max-width를 120, min-width를 56으로 변경
-* Icon
-  * ic_analytics_search_tools line icon 추가
-  * ic_dynamic_layout line icon 추가
-  * ic_pages line icon 추가
+### Layout
+* WTM_3 생성
+* MSA_2 생성
+### Color
+* 컬러 키 값 22.12.29 12시 51분 기준 싱크