pds-dev-kit-web-test 2.2.48 → 2.2.61

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

@@ -81,7 +81,7 @@ function DesktopHeaderBar(_a) {
     var leftButton2Mode = function () {
         switch (leftBtn2Mode) {
             case 'mbtn': {
-                return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: styleTheme === 'type_a' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { styleTheme: "secondary", size: "xsmall", text: leftBtn2Text, onClick: handleClickLeft2Btn })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "round", baseSize: "xsmall", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconFillType: "fill", iconSize: 16, iconName: "ic_light_bulb", iconColorKey: "ui_cpnt_button_icon_primary", fillType: "fill", onClick: handleClickLeft2Btn })] })) }));
+                return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: styleTheme === 'type_a' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { styleTheme: "secondary", size: "xsmall", text: leftBtn2Text, onClick: handleClickLeft2Btn })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "round", baseSize: "xsmall", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconFillType: "fill", iconSize: 16, iconName: "ic_question", iconColorKey: "ui_cpnt_button_icon_primary", fillType: "fill", onClick: handleClickLeft2Btn })] })) }));
             }
             case 'tbtn': {
                 return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { size: "xsmall", text: leftBtn2Text, onClick: handleClickLeft2Btn })] }));

package/dist/src/desktop/components/DynamicDesktopNavBar/blocks/SecondaryMenu.js

@@ -19,12 +19,77 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var smoothscroll_polyfill_1 = __importDefault(require("smoothscroll-polyfill"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var __1 = require("../../..");
+var hooks_1 = require("../../../../common/hooks");
 var MenuItemNav_1 = require("../components/MenuItemNav");
+// NOTE: safari-scroll-behavior-smooth polyfill
+smoothscroll_polyfill_1.default.polyfill();
+var DESKTOP_SCROLL_LEFT = 320;
 function SecondaryMenu(_a) {
     var menus = _a.menus, showMenuAsIcon = _a.showMenuAsIcon, style = _a.style;
-    return ((0, jsx_runtime_1.jsx)(S_Main_SecondaryMenu, __assign({ style: style }, { children: menus.map(function (menu, index) { return ((0, jsx_runtime_1.jsx)(MenuItemNav_1.MenuItemNav, { menu: menu, showMenuAsIcon: showMenuAsIcon }, index)); }) })));
+    var _b = (0, react_1.useState)({ node: null }), primaryRef = _b[0], setPrimaryRef = _b[1];
+    var primaryCallbackRef = (0, react_1.useCallback)(function (node) {
+        if (!node) {
+            return;
+        }
+        setPrimaryRef({ node: node });
+    }, [menus]);
+    (0, react_1.useEffect)(function () {
+        if (!primaryRef.node) {
+            return;
+        }
+        primaryRef.node.addEventListener('wheel', handleScroll);
+        function handleScroll(e) {
+            if (primaryRef.node) {
+                primaryRef.node.scrollTo({ left: primaryRef.node.scrollLeft + e.deltaY });
+            }
+        }
+        return function () {
+            if (!primaryRef.node) {
+                return;
+            }
+            primaryRef.node.removeEventListener('scroll', handleScroll);
+        };
+    }, [primaryRef]);
+    var _c = (0, hooks_1.useDetectOverflow)(primaryRef, true), trigger = _c.trigger, isOverflow = _c.isOverflow, isScrollBoxStart = _c.isScrollBoxStart, isScrollBoxEnd = _c.isScrollBoxEnd;
+    var onClickLeftButton = function () {
+        primaryRef.node &&
+            primaryRef.node.scroll({
+                left: primaryRef.node.scrollLeft - DESKTOP_SCROLL_LEFT,
+                behavior: 'smooth'
+            });
+    };
+    var onClickRightButton = function () {
+        primaryRef.node &&
+            primaryRef.node.scroll({
+                left: primaryRef.node.scrollLeft + DESKTOP_SCROLL_LEFT,
+                behavior: 'smooth'
+            });
+    };
+    return ((0, jsx_runtime_1.jsxs)(S_SecondaryMenu, __assign({ style: style }, { children: [isOverflow && !isScrollBoxStart && ((0, jsx_runtime_1.jsx)(S_LeftButtonWrapper, { children: (0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(__1.D_IconButton, { fillType: "fill", baseSize: "medium", baseColorKey: "ui_menu_background", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_button_icon_default", shapeType: "circular", iconSize: 20, onClick: onClickLeftButton }) }) })), (0, jsx_runtime_1.jsx)(S_Main_SecondaryMenu, __assign({ style: style, onScroll: function () { return trigger(); }, ref: primaryCallbackRef }, { children: menus.map(function (menu, index) { return ((0, jsx_runtime_1.jsx)(MenuItemNav_1.MenuItemNav, { menu: menu, showMenuAsIcon: showMenuAsIcon }, index)); }) })), isOverflow && !isScrollBoxEnd && ((0, jsx_runtime_1.jsx)(S_RightButtonWrapper, { children: (0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(__1.D_IconButton, { fillType: "fill", baseSize: "medium", baseColorKey: "ui_menu_background", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_button_icon_default", shapeType: "circular", iconSize: 20, onClick: onClickRightButton }) }) }))] })));
 }
-var S_Main_SecondaryMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: SECONDARY_MENU;\n"], ["\n  display: flex;\n  grid-area: SECONDARY_MENU;\n"])));
+var S_Main_SecondaryMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: SECONDARY_MENU;\n  overflow-x: auto;\n  overscroll-behavior-y: none;\n  width: max-content;\n\n  & > div:first-child {\n    margin-left: 32px;\n  }\n"], ["\n  display: flex;\n  grid-area: SECONDARY_MENU;\n  overflow-x: auto;\n  overscroll-behavior-y: none;\n  width: max-content;\n\n  & > div:first-child {\n    margin-left: 32px;\n  }\n"])));
+var S_SecondaryMenu = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  height: 48px;\n  max-height: 100%;\n  max-width: 100%;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n  width: 100%;\n"], ["\n  display: flex;\n  height: 48px;\n  max-height: 100%;\n  max-width: 100%;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n  width: 100%;\n"])));
+var S_RightButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  &::before {\n    background: ", ";\n    content: '';\n    display: block;\n    height: 100%;\n    pointer-events: none;\n    width: 50px;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  &::before {\n    background: ", ";\n    content: '';\n    display: block;\n    height: 100%;\n    pointer-events: none;\n    width: 50px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return "linear-gradient(to left, ".concat(theme.ui_menu_background, " 10%, ").concat(theme.ui_cpnt_pg_gradient_02, " 90%)");
+});
+var S_LeftButtonWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  left: 0;\n  position: absolute;\n\n  &::after {\n    background: ", ";\n    content: '';\n    display: block;\n    height: 100%;\n    pointer-events: none;\n    width: 50px;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  left: 0;\n  position: absolute;\n\n  &::after {\n    background: ", ";\n    content: '';\n    display: block;\n    height: 100%;\n    pointer-events: none;\n    width: 50px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return "linear-gradient(to right, ".concat(theme.ui_menu_background, " 20%, ").concat(theme.ui_cpnt_pg_gradient_02, " 80%)");
+});
+var S_ButtonWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  height: 50px;\n\n  & > button {\n    background-color: ", ";\n\n    * path {\n      stroke: ", ";\n    }\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  height: 50px;\n\n  & > button {\n    background-color: ", ";\n\n    * path {\n      stroke: ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_menu_background;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_menu_button_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_temp_grey_02;
+});
 exports.default = SecondaryMenu;
-var templateObject_1;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/DynamicDesktopNavBarTemplates.d.ts

@@ -237,7 +237,6 @@ declare class DynamicDesktopNavBarTemplates {
             style: {
                 width: string;
                 justifyContent: string;
-                paddingLeft: string;
             };
         };
         userProfileOptions: {

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/constants.d.ts

@@ -243,7 +243,6 @@ export declare const TEMPLATES_DATA: {
             style: {
                 width: string;
                 justifyContent: string;
-                paddingLeft: string;
             };
         };
         userProfileOptions: {

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/constants.js

@@ -74,7 +74,7 @@ exports.TEMPLATES_DATA = {
         showSecondaryMenu: false,
         primaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 5,
+            maxLength: 99,
             style: {
                 justifyContent: 'flex-end'
             }
@@ -188,7 +188,7 @@ exports.TEMPLATES_DATA = {
         showSecondaryMenu: false,
         primaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 5,
+            maxLength: 99,
             style: {
                 justifyContent: 'flex-end'
             }
@@ -235,18 +235,17 @@ exports.TEMPLATES_DATA = {
         showSecondaryMenu: true,
         primaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 3,
+            maxLength: 99,
             style: {
                 justifyContent: 'right'
             }
         },
         secondaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 2,
+            maxLength: 99,
             style: {
                 width: '100%',
-                justifyContent: 'left',
-                paddingLeft: '32px'
+                justifyContent: 'left'
             }
         },
         userProfileOptions: {

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { PDSTextType } from '../../../common';
+import type React from 'react';
 export type TextButtonProps = {
     text?: PDSTextType;
     size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
@@ -9,6 +9,7 @@ export type TextButtonProps = {
     state?: 'normal' | 'disabled';
     colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
 };
-declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
+declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, onKeyDown, ...rest }: TextButtonProps): JSX.Element;
 export default TextButton;

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

@@ -50,6 +50,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var TextLabel_1 = require("../TextLabel");
@@ -69,13 +70,25 @@ var textColor = {
     white2: 'sysTextWhite'
 };
 function TextButton(_a) {
-    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick"]);
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, onKeyDown = _a.onKeyDown, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick", "onKeyDown"]);
+    var buttonRef = (0, react_1.useRef)(null);
+    /**
+     * @when keydown 이벤트가 있을 때만
+     * @expected onKeyDown 이벤트가 작동하기 위해 버튼에 포커스를 맞춥니다.
+     */
+    (0, react_1.useEffect)(function () {
+        if (!onKeyDown)
+            return;
+        if (buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) {
+            buttonRef.current.focus();
+        }
+    }, []);
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
+    return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ ref: buttonRef, "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onKeyDown: onKeyDown, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var size = _a.size;

package/dist/src/desktop/panels/DesktopTutorialModal/DesktopTutorialModal.d.ts

@@ -12,7 +12,8 @@ export type DesktopTutorialModalInfoType = {
 type DesktopTutorialModalProps = {
     modalTitleText: PDSTextType;
     infoArray: DesktopTutorialModalInfoType[];
+    sequenceMode?: 'use' | 'none';
     onClose: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function DesktopTutorialModal({ modalTitleText, infoArray, onClose }: DesktopTutorialModalProps): import("react").ReactPortal;
+declare function DesktopTutorialModal({ modalTitleText, infoArray, sequenceMode, onClose }: DesktopTutorialModalProps): import("react").ReactPortal;
 export default DesktopTutorialModal;

package/dist/src/desktop/panels/DesktopTutorialModal/DesktopTutorialModal.js

@@ -28,7 +28,7 @@ var hybrid_1 = require("../../../hybrid");
 var components_1 = require("../../components");
 var Components_1 = require("./Components");
 function DesktopTutorialModal(_a) {
-    var modalTitleText = _a.modalTitleText, infoArray = _a.infoArray, onClose = _a.onClose;
+    var modalTitleText = _a.modalTitleText, infoArray = _a.infoArray, _b = _a.sequenceMode, sequenceMode = _b === void 0 ? 'use' : _b, onClose = _a.onClose;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
         modalRoot.setAttribute('id', 'DesktopTutorialModal');
@@ -44,12 +44,7 @@ function DesktopTutorialModal(_a) {
             root.removeChild(container);
         };
     }, []);
-    var handleClickCloseBtn = function (e) {
-        if (onClose) {
-            onClose(e);
-        }
-    };
-    var _b = (0, react_1.useState)("".concat(infoArray[0].sideTabTitleText, "0")), selectedItem = _b[0], setSelectedItem = _b[1];
+    var _c = (0, react_1.useState)("".concat(infoArray[0].sideTabTitleText, "0")), selectedItem = _c[0], setSelectedItem = _c[1];
     var sideTabTitleArray = infoArray.map(function (data, index) {
         return {
             title: data.sideTabTitleText,
@@ -57,15 +52,31 @@ function DesktopTutorialModal(_a) {
             onClick: function () { return setSelectedItem("".concat(data.sideTabTitleText).concat(index)); }
         };
     });
+    var lastIndex = infoArray.length - 1;
+    var numberPattern = /\d+$/;
+    var selectedItemIndexPart = selectedItem.match(numberPattern);
+    var selectedItemIndex = selectedItemIndexPart && parseInt(selectedItemIndexPart[0], 10);
+    var handleClickNextBtn = function () {
+        if (selectedItemIndexPart) {
+            var incrementedIndex = parseInt(selectedItemIndexPart[0], 10) + 1;
+            var newSelectedItem = "".concat(infoArray[incrementedIndex].sideTabTitleText).concat(incrementedIndex);
+            setSelectedItem(newSelectedItem);
+        }
+    };
+    var handleClickCloseBtn = function (e) {
+        if (onClose) {
+            onClose(e);
+        }
+    };
     return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "DesktopTutorialModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftPanel, { children: [(0, jsx_runtime_1.jsx)(S_Header, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: modalTitleText, lineLimit: 2, ellipsisMode: "use", styleTheme: "headingBold" }) }), (0, jsx_runtime_1.jsxs)(S_SideTabWrapper, { children: [(0, jsx_runtime_1.jsx)(Components_1.SideTab, { itemArray: sideTabTitleArray }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_i" })] })] }), infoArray
                         .filter(function (data, index) { return selectedItem === "".concat(data.sideTabTitleText).concat(index); })
-                        .map(function (data, index) { return ((0, jsx_runtime_1.jsxs)(S_RightPanel, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: data.imageSrc, shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", backgroundFillMode: "use" }), (0, jsx_runtime_1.jsxs)(S_InfoBox, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoTitleText ? data.infoTitleText : data.sideTabTitleText, styleTheme: "headingBold" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoDescText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary" })] }), data.btnMode === 'btn_amount1' && ((0, jsx_runtime_1.jsx)(S_Footer, { children: (0, jsx_runtime_1.jsx)(components_1.MainButton, { text: data.btn1Text, type: "button", size: "medium", onClick: data.onClickBtn1 }) }))] }, "".concat(data.sideTabTitleText).concat(index))); }), (0, jsx_runtime_1.jsx)(S_IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.IconButton, { shapeType: "circular", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_tutorialmodal", iconName: "ic_xmark", iconColorKey: "ui_cpnt_button_icon_white", onClick: handleClickCloseBtn }) })] }))] }), container);
+                        .map(function (data, index) { return ((0, jsx_runtime_1.jsxs)(S_RightPanel, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: data.imageSrc, shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", backgroundFillMode: "use" }), (0, jsx_runtime_1.jsxs)(S_InfoBox, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoTitleText ? data.infoTitleText : data.sideTabTitleText, styleTheme: "headingBold" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoDescText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary" })] }), data.btnMode === 'btn_amount1' && ((0, jsx_runtime_1.jsx)(S_Footer, { children: (0, jsx_runtime_1.jsx)(components_1.MainButton, { text: data.btn1Text, type: "button", size: "medium", onClick: data.onClickBtn1 }) }))] }, "".concat(data.sideTabTitleText).concat(index))); }), (0, jsx_runtime_1.jsx)(S_IconButtonWrapper, { children: sequenceMode === 'use' && selectedItemIndex !== lastIndex ? ((0, jsx_runtime_1.jsx)(components_1.IconButton, { shapeType: "circular", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_tutorialmodal", iconName: "ic_arrow_right", iconColorKey: "ui_cpnt_button_icon_white", onClick: handleClickNextBtn })) : ((0, jsx_runtime_1.jsx)(components_1.IconButton, { shapeType: "circular", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_tutorialmodal", iconName: "ic_xmark", iconColorKey: "ui_cpnt_button_icon_white", onClick: handleClickCloseBtn })) })] }))] }), container);
 }
 var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
 }, animationStyle_1.modalOverlayOnAni);
-var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  display: flex;\n  height: 80vh;\n  left: 50%;\n  max-height: 720px;\n  min-height: 560px;\n  overflow: hidden;\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 960px;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  display: flex;\n  height: 80vh;\n  left: 50%;\n  max-height: 720px;\n  min-height: 560px;\n  overflow: hidden;\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 960px;\n\n  ", "\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 80vh;\n  left: 50%;\n  max-height: 720px;\n  min-height: 560px;\n  overflow: hidden;\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 960px;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 80vh;\n  left: 50%;\n  max-height: 720px;\n  min-height: 560px;\n  overflow: hidden;\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 960px;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
 }, function (_a) {

package/dist/src/mobile/components/BasicListItem/RightBox/MainButton.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var components_1 = require("../../../../hybrid/components");
 var MainButton_1 = require("../../MainButton");
 var MainButton = function (_a) {
     var text = _a.text, state = _a.state, fill = _a.fill, onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: text, state: state, fillType: fill ? 'fill' : 'line', size: "small", onClick: onClick }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c", spacingType: "width" })] }));
+    return ((0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: text, state: state, fillType: fill ? 'fill' : 'line', size: "small", onClick: onClick }));
 };
 exports.default = MainButton;

package/dist/src/mobile/components/BasicListItem/RightBox/Switch.js

@@ -12,7 +12,7 @@ var components_1 = require("../../../../hybrid/components");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Switch = function (_a) {
     var name = _a.name, state = _a.state, status = _a.status, onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsxs)(S_SwitchWrapper, { children: [(0, jsx_runtime_1.jsx)(components_1.Switch, { name: name, state: state, status: status, onClick: onClick }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c", spacingType: "width" })] }));
+    return ((0, jsx_runtime_1.jsx)(S_SwitchWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.Switch, { name: name, state: state, status: status, onClick: onClick }) }));
 };
 var S_SwitchWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  min-height: 32px;\n  min-width: 68px;\n  position: relative;\n  right: 0;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  min-height: 32px;\n  min-width: 68px;\n  position: relative;\n  right: 0;\n"])));
 exports.default = Switch;

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

@@ -65,13 +65,23 @@ function ContextMenuItem(_a) {
     if (state === 'disabled') {
         textColorTheme = 'sysTextTertiary';
     }
+    var descTextColorTheme;
+    if (isSelected) {
+        descTextColorTheme = 'sysTextTertiary';
+    }
+    if (!isSelected && state === 'normal') {
+        descTextColorTheme = 'sysTextTertiary';
+    }
+    if (state === 'disabled') {
+        descTextColorTheme = 'sysTextTertiary';
+    }
     var getIconColorKey = function () {
         if (state === 'disabled') {
             return 'ui_cpnt_dropdown_display_icon_disabled';
         }
         return 'ui_cpnt_dropdown_display_icon_normal';
     };
-    return ((0, jsx_runtime_1.jsxs)(S_ContextMenuItem, __assign({ "x-pds-name": "ContextMenuItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, onClick: handleClick, selected: isSelected, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { size: size === 'small' ? 20 : 24, iconName: option.iconName, fillType: option.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), ' '] })), (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.text) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text || text, styleTheme: option.fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] })));
+    return ((0, jsx_runtime_1.jsxs)(S_ContextMenuItem, __assign({ "x-pds-name": "ContextMenuItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, onClick: handleClick, selected: isSelected, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftSide, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { size: size === 'small' ? 20 : 24, iconName: option.iconName, fillType: option.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), ' '] })), (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.text) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text || text, styleTheme: option.fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] }), (0, jsx_runtime_1.jsx)(S_RightSide, { children: (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.descText) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.descText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: descTextColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all", textAlign: "right" })) })] })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  height: 48px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -85,7 +95,7 @@ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 =
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, selected = _a.selected;
     return selected
         ? theme.ui_cpnt_contextmenu_menu_base_selected
@@ -97,5 +107,7 @@ var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (temp
     var size = _a.size;
     return size && { large: large, medium: medium, small: small }[size];
 });
+var S_LeftSide = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
+var S_RightSide = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
 exports.default = ContextMenuItem;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, shortcutKeyMode, dynamicLayoutRef }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

package/dist/src/sub/DynamicLayout/DynamicLayout.js

@@ -25,7 +25,7 @@ var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, shortcutKeyMode = _a.shortcutKeyMode, dynamicLayoutRef = _a.dynamicLayoutRef;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .sort(function (a, b) { return a.order - b.order; });
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
@@ -36,8 +36,9 @@ function DynamicLayout(_a) {
             navigationHandler: navigationHandler,
             sectionActionHandler: sectionActionHandler,
             editingSectionId: editingSectionId,
-            programmedSectionComponents: programmedSectionComponents
-        } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
+            programmedSectionComponents: programmedSectionComponents,
+            shortcutKeyMode: shortcutKeyMode
+        } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { dynamicLayoutRef: dynamicLayoutRef, editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
                 (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] })));
 }
 exports.default = DynamicLayout;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import type { ISection } from '../../types';
-export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, editingSectionId, onClickEditSection }: {
+import type { DynamicLayoutProps, ISection } from '../../types';
+export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, editingSectionId, dynamicLayoutRef, onClickEditSection }: {
     filteredSortedSection: ISection[];
     scrollDownTargetSectionId?: number;
     editingSectionId?: number;
+    dynamicLayoutRef: DynamicLayoutProps['dynamicLayoutRef'];
     onClickEditSection: (section: ISection) => void;
 }): JSX.Element;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.js

@@ -26,19 +26,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var sections_1 = require("../../../DynamicLayout/sections");
 var SectionBox_1 = __importDefault(require("./SectionBox"));
 function EditModeSectionMatcher(_a) {
-    var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, onClickEditSection = _a.onClickEditSection;
+    var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, dynamicLayoutRef = _a.dynamicLayoutRef, onClickEditSection = _a.onClickEditSection;
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iframeSection ? ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isIframeSection: true, isEditing: editingSectionId === iframeSection.id, scrollIntoThisSection: iframeSection.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(iframeSection); } }, { children: (0, jsx_runtime_1.jsx)(Matcher, __assign({}, iframeSection)) }), iframeSection.id)) : (filteredSortedSection.map(function (section) { return ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(section); } }, { children: (0, jsx_runtime_1.jsx)(Matcher, __assign({}, section)) }), section.id)); })) }));
+    var _b = (0, react_1.useState)(null), selectedSectionRef = _b[0], setSelectedSectionRef = _b[1];
+    var refCallback = (0, react_1.useCallback)(function (node) {
+        setSelectedSectionRef(node);
+    }, []);
+    (0, react_1.useImperativeHandle)(dynamicLayoutRef, function () {
+        return {
+            selectCB: function (cb) {
+                selectedSectionRef === null || selectedSectionRef === void 0 ? void 0 : selectedSectionRef.selectCB(cb);
+            },
+            selectCBInBulk: function (cbIds) {
+                selectedSectionRef === null || selectedSectionRef === void 0 ? void 0 : selectedSectionRef.selectCBInBulk(cbIds);
+            }
+        };
+    }, [selectedSectionRef]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iframeSection ? ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isIframeSection: true, isEditing: editingSectionId === iframeSection.id, scrollIntoThisSection: iframeSection.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(iframeSection); } }, { children: (0, jsx_runtime_1.jsx)(DesignedSectionsMatcher, __assign({}, iframeSection)) }), iframeSection.id)) : (filteredSortedSection.map(function (section) { return ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(section); } }, { children: section.type === 'CUSTOM' ? ((0, jsx_runtime_1.jsx)(sections_1.CustomSection, __assign({}, section, { ref: editingSectionId === section.id ? refCallback : null }))) : ((0, jsx_runtime_1.jsx)(DesignedSectionsMatcher, __assign({}, section))) }), section.id)); })) }));
 }
 exports.default = EditModeSectionMatcher;
-function Matcher(_a) {
+function DesignedSectionsMatcher(_a) {
     var props = __rest(_a, []);
-    if (props.type === 'CUSTOM') {
-        return (0, jsx_runtime_1.jsx)(sections_1.CustomSection, __assign({}, props));
-    }
     var schema = props.manifest.schema;
     switch (schema) {
         case 'BASE_INTRO':

package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackground.js

@@ -30,8 +30,9 @@ function CustomSectionBackground(_a) {
     var context = (0, react_1.useContext)(sectionContext_1.sectionContext);
     var id = context.id, jsonProperties = context.jsonProperties;
     var backgroundRef = (0, react_1.useRef)(null);
-    var _c = jsonProperties || {}, CB_STYLE_PROP_BGOVERLAY = _c.CB_STYLE_PROP_BGOVERLAY, CB_STYLE_PROP_BGMEDIA = _c.CB_STYLE_PROP_BGMEDIA;
-    var _d = (0, util_1.parseJsonProperties)(jsonProperties, isMobile ? 'MOBILE' : 'DESKTOP'), style = _d.style, overlayStyle = _d.overlayStyle, effect = _d.effect;
+    var data = jsonProperties.data;
+    var CB_STYLE_PROP_BGOVERLAY = data.CB_STYLE_PROP_BGOVERLAY, CB_STYLE_PROP_BGMEDIA = data.CB_STYLE_PROP_BGMEDIA;
+    var _c = (0, util_1.parseJsonProperties)(data, isMobile ? 'MOBILE' : 'DESKTOP'), style = _c.style, overlayStyle = _c.overlayStyle, effect = _c.effect;
     var isOverlay = getIsOverlay(isMobile, CB_STYLE_PROP_BGOVERLAY);
     var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
     var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);

package/dist/src/sub/DynamicLayout/hooks/useCustomSectionShortcut/useCustomSectionShortcut.d.ts

@@ -0,0 +1,6 @@
+export declare const CUSTOMSECTION_SHORTCUT_KEYS: string[];
+export type CustomSectionShortcutType = 'BULK_SELECT' | 'COLLISION_SELECT' | 'SELECT_ALL' | null;
+declare function useCustomSectionShortcut(): {
+    shortcut: CustomSectionShortcutType;
+};
+export default useCustomSectionShortcut;

package/dist/src/sub/DynamicLayout/hooks/useCustomSectionShortcut/useCustomSectionShortcut.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CUSTOMSECTION_SHORTCUT_KEYS = void 0;
+var react_1 = require("react");
+exports.CUSTOMSECTION_SHORTCUT_KEYS = ['Shift', 'Meta', 'A', 'ㅁ'];
+function useCustomSectionShortcut() {
+    var _a = (0, react_1.useState)(null), shortcut = _a[0], setShortcut = _a[1];
+    (0, react_1.useEffect)(function () {
+        var keys = new Map();
+        function onKeyDown(e) {
+            if (!exports.CUSTOMSECTION_SHORTCUT_KEYS.includes(e.key)) {
+                return;
+            }
+            keys.set(e.key, true);
+            var isShiftOn = keys.get('Shift');
+            var isMetaOn = keys.get('Meta');
+            var isAOn = keys.get('A') || keys.get('ㅁ');
+            if (isShiftOn && isAOn) {
+                setShortcut('SELECT_ALL');
+                return;
+            }
+            if (isShiftOn && isMetaOn) {
+                setShortcut('COLLISION_SELECT');
+                return;
+            }
+            if (isShiftOn) {
+                setShortcut('BULK_SELECT');
+            }
+        }
+        function onKeyUp(e) {
+            if (e.key === 'a') {
+                keys.delete('A');
+            }
+            else {
+                keys.delete(e.key);
+            }
+            setShortcut(null);
+        }
+        document.addEventListener('keydown', onKeyDown);
+        document.addEventListener('keyup', onKeyUp);
+        return function () {
+            document.removeEventListener('keydown', onKeyDown);
+            document.removeEventListener('keyup', onKeyUp);
+        };
+    }, []);
+    return {
+        shortcut: shortcut
+    };
+}
+exports.default = useCustomSectionShortcut;