pds-dev-kit-web-test 0.0.3 → 0.0.6

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

@@ -31,14 +31,19 @@ var ContextMenuItem_1 = require("../ContextMenuItem");
 var TextLabel_1 = require("../TextLabel");
 // TODO: selectionMode의 multi 기능 구현 추가 필요
 function Dropdown(_a) {
-    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, defaultValue = _a.defaultValue, hintText = _a.hintText, _c = _a.maxHeightItemNumber, maxHeightItemNumber = _c === void 0 ? 5 : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.selectionMode, selectionMode = _e === void 0 ? 'single' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, valueArray = _a.valueArray, onChange = _a.onChange;
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, value = _a.value, defaultValue = _a.defaultValue, hintText = _a.hintText, _c = _a.maxHeightItemNumber, maxHeightItemNumber = _c === void 0 ? 5 : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.selectionMode, selectionMode = _e === void 0 ? 'single' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, valueArray = _a.valueArray, onChange = _a.onChange;
     var _h = (0, react_1.useState)(false), isFocused = _h[0], setIsFocused = _h[1];
-    var _j = (0, react_1.useState)(defaultValue), selectedOption = _j[0], setSelectedOption = _j[1];
+    var _j = (0, react_1.useState)(defaultValue), selectedValue = _j[0], setSelectedValue = _j[1];
     (0, react_1.useEffect)(function () {
         if (defaultValue) {
-            setSelectedOption(defaultValue);
+            setSelectedValue(defaultValue);
         }
     }, [defaultValue]);
+    (0, react_1.useEffect)(function () {
+        if (value) {
+            setSelectedValue(value);
+        }
+    }, [value]);
     var handleClick = function () {
         if (state === 'disabled' || state === 'read_only') {
             return;
@@ -51,8 +56,10 @@ function Dropdown(_a) {
         }
     };
     var handleClickOption = function (option) {
-        setSelectedOption(option);
         setIsFocused(false);
+        if (!value) {
+            setSelectedValue(option);
+        }
         if (onChange) {
             onChange(option);
         }
@@ -140,11 +147,12 @@ function Dropdown(_a) {
     return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode },
         react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode },
             react_1.default.createElement(S_TextLabel, null,
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride() })),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride() })),
             react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" })),
         isFocused && (react_1.default.createElement(S_ContextMenuWrapper, null,
-            react_1.default.createElement(ContextMenu_1.ContextMenu, { autoWidthMode: "use", maxHeight: maxHeight }, valueArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, size: size, isSelected: el.value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value), onClick: handleClickOption, state: el.state })); }))))));
+            react_1.default.createElement(ContextMenu_1.ContextMenu, { autoWidthMode: "use", maxHeight: maxHeight }, valueArray.map(function (el) { return (react_1.default.createElement(react_1.Fragment, { key: el.value },
+                react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, onClick: handleClickOption, state: el.state }))); }))))));
 }
 var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  flex: 1;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BrandLogo, UserProfile } from './blocks';
-import { DynamicDesktopTemplateType } from './templates/types';
+import { ActiveModeTypes } from './reducer';
+import { TemplateNamesType } from './templates';
 import { ParsedNode } from './types';
 declare type BrandLogo = {
     src: string;
@@ -17,11 +18,14 @@ export declare type Props = {
     userProfile: UserProfile;
     primaryMenus: ParsedNode[];
     secondaryMenus: ParsedNode[] | null;
-    template: DynamicDesktopTemplateType;
+    template: TemplateNamesType;
     basePath: string;
 };
-export declare const BasePathContext: React.Context<{
+declare type ContextProp = {
     basePath: string;
-}>;
+    activeMode: ActiveModeTypes;
+    handleClickInternalMenuItemNav: (url: string) => void;
+};
+export declare const BasePathContext: React.Context<ContextProp>;
 declare function DynamicDesktopNavBar({ isPreview, template, brandLogo, primaryMenus, secondaryMenus, userProfile, basePath }: Props): JSX.Element;
 export default DynamicDesktopNavBar;

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

@@ -31,23 +31,45 @@ var react_1 = __importStar(require("react"));
 var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
 var BoxLayout_1 = require("../../../common/components/BoxLayout");
+var hooks_1 = require("../../../common/hooks");
 var blocks_1 = require("./blocks");
+var reducer_1 = __importStar(require("./reducer"));
+var templates_1 = require("./templates");
 exports.BasePathContext = (0, react_1.createContext)({
-    basePath: ''
+    basePath: '',
+    activeMode: 'BY_URL',
+    handleClickInternalMenuItemNav: function () {
+        // NOTE: noop function
+        return;
+    }
 });
 function DynamicDesktopNavBar(_a) {
     var _b = _a.isPreview, isPreview = _b === void 0 ? false : _b, template = _a.template, brandLogo = _a.brandLogo, primaryMenus = _a.primaryMenus, secondaryMenus = _a.secondaryMenus, userProfile = _a.userProfile, basePath = _a.basePath;
-    var gridStyle = template.gridStyle, gridTemplate = template.gridTemplate, showSecondaryMenu = template.showSecondaryMenu, primaryMenuOptions = template.primaryMenuOptions, secondaryMenuOptions = template.secondaryMenuOptions, userProfileOptions = template.userProfileOptions;
+    var _c = templates_1.DynamicDesktopNavBarTemplates.getTemplate(template), gridStyle = _c.gridStyle, gridTemplate = _c.gridTemplate, showSecondaryMenu = _c.showSecondaryMenu, primaryMenuOptions = _c.primaryMenuOptions, secondaryMenuOptions = _c.secondaryMenuOptions, userProfileOptions = _c.userProfileOptions;
+    var _d = (0, react_1.useReducer)(reducer_1.default, reducer_1.defaultValue), state = _d[0], dispatch = _d[1];
+    var location = (0, react_router_dom_1.useLocation)();
+    var prevLocation = (0, hooks_1.usePrevious)(location.pathname + location.search);
+    (0, react_1.useEffect)(function () {
+        var currentLocation = location.pathname + location.search;
+        if (currentLocation === state.clickedURL) {
+            return;
+        }
+        if (currentLocation !== prevLocation) {
+            dispatch({ type: 'URL_CHANGED' });
+        }
+    }, [location.pathname, location.search]);
     var slicedPrimaryMenus = (0, react_1.useMemo)(function () { return primaryMenus === null || primaryMenus === void 0 ? void 0 : primaryMenus.slice(0, primaryMenuOptions.maxLength); }, [primaryMenus, primaryMenuOptions]);
     var slicedSecondaryMenus = (0, react_1.useMemo)(function () { var _a; return (_a = secondaryMenus === null || secondaryMenus === void 0 ? void 0 : secondaryMenus.slice(0, secondaryMenuOptions.maxLength)) !== null && _a !== void 0 ? _a : []; }, [secondaryMenus, secondaryMenuOptions]);
-    return (react_1.default.createElement(exports.BasePathContext.Provider, { value: { basePath: basePath } },
-        react_1.default.createElement(react_router_dom_1.BrowserRouter, { basename: basePath },
-            react_1.default.createElement(S_DynamicDesktopNavBar, { isPreview: isPreview },
-                react_1.default.createElement(S_Grid, { className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: gridStyle },
-                    react_1.default.createElement(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text }),
-                    react_1.default.createElement(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }),
-                    showSecondaryMenu && (react_1.default.createElement(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })),
-                    react_1.default.createElement(blocks_1.UserProfile, { src: userProfile.src, to: userProfile.href, style: userProfileOptions.style }))))));
+    function handleClickInternalMenuItemNav(url) {
+        dispatch({ type: 'INTERNAL_CLICKED', payload: { clickedURL: url } });
+    }
+    return (react_1.default.createElement(exports.BasePathContext.Provider, { value: { basePath: basePath, activeMode: state.mode, handleClickInternalMenuItemNav: handleClickInternalMenuItemNav } },
+        react_1.default.createElement(S_DynamicDesktopNavBar, { isPreview: isPreview },
+            react_1.default.createElement(S_Grid, { className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: gridStyle },
+                react_1.default.createElement(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text }),
+                react_1.default.createElement(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }),
+                showSecondaryMenu && (react_1.default.createElement(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })),
+                react_1.default.createElement(blocks_1.UserProfile, { src: userProfile.src, to: userProfile.href, style: userProfileOptions.style })))));
 }
 var S_Grid = (0, styled_components_1.default)(BoxLayout_1.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  justify-items: center;\n  gap: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  justify-items: center;\n  gap: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -80,7 +80,7 @@ function PrimaryMenu(_a) {
         isOverflow && !isScrollBoxStart && (react_1.default.createElement(S_LeftButtonWrapper, null,
             react_1.default.createElement(S_ButtonWrapper, null,
                 react_1.default.createElement(__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 })))),
-        react_1.default.createElement(S_Main_PrimaryMenu, { onScroll: function () { return trigger(); }, ref: primaryCallbackRef }, menus.map(function (menu, index) { return (react_1.default.createElement(MenuItemNav_1.MenuItemNav, { key: index, menu: menu, showMenuAsIcon: showMenuAsIcon })); })),
+        react_1.default.createElement(S_Main_PrimaryMenu, { onScroll: function () { return trigger(); }, ref: primaryCallbackRef }, menus.map(function (menu, index) { return (react_1.default.createElement(MenuItemNav_1.MenuItemNav, { index: index, key: index, menu: menu, showMenuAsIcon: showMenuAsIcon })); })),
         isOverflow && !isScrollBoxEnd && (react_1.default.createElement(S_RightButtonWrapper, null,
             react_1.default.createElement(S_ButtonWrapper, null,
                 react_1.default.createElement(__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 }))))));

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

@@ -12,7 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var MenuItemNav_1 = require("../components/MenuItemNav");
 function SecondaryMenu(_a) {
     var menus = _a.menus, showMenuAsIcon = _a.showMenuAsIcon, style = _a.style;
-    return (react_1.default.createElement(S_Main_SecondaryMenu, { style: style }, menus.map(function (menu, index) { return (react_1.default.createElement(MenuItemNav_1.MenuItemNav, { key: index, menu: menu, showMenuAsIcon: showMenuAsIcon })); })));
+    return (react_1.default.createElement(S_Main_SecondaryMenu, { style: style }, menus.map(function (menu, index) { return (react_1.default.createElement(MenuItemNav_1.MenuItemNav, { index: index, key: index, menu: menu, showMenuAsIcon: showMenuAsIcon })); })));
 }
 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"])));
 exports.default = SecondaryMenu;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/ContextMenuNavs/ContextMenuItemNav.js

@@ -39,13 +39,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var DisplayOnlyMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/DisplayOnlyMenuItemNav"));
+var InternalLinkMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/InternalLinkMenuItemNav"));
 var PAppMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/PAppMenuItemNav"));
 var WebMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/WebMenuItemNav"));
 function ContextMenuItemNavBox(_a) {
     var menu = _a.menu;
     return (react_1.default.createElement(S_ContextMenuItem, { size: "small" },
-        menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }) })),
-        menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) }))));
+        menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), isContextMenu: true })),
+        menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { openNewTab: true, isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
+        menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(InternalLinkMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
+        menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }) }))));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  padding: 0 ", ";\n"], ["\n  height: 48px;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -31,17 +31,31 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var ContextMenu_1 = require("../../../ContextMenu");
 function ContextMenuNavs(_a) {
     var parentRef = _a.parentRef, children = _a.children;
-    var contextRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)({ top: 0, left: 0 }), position = _b[0], setPosition = _b[1];
+    var _b = (0, react_1.useState)(null), contextRef = _b[0], setContextRef = _b[1];
+    var contextCallbackRef = (0, react_1.useCallback)(function (node) {
+        if (!node) {
+            return;
+        }
+        setContextRef(node);
+    }, []);
+    var _c = (0, react_1.useState)({ top: 0, left: 0 }), position = _c[0], setPosition = _c[1];
     (0, react_1.useLayoutEffect)(function () {
         if (!parentRef.current) {
             return;
         }
         var PARENT_HEIGHT = 48;
         var _a = parentRef.current.getBoundingClientRect(), top = _a.top, left = _a.left;
-        setPosition({ top: top + PARENT_HEIGHT, left: left });
-    }, [parentRef]);
-    return (react_1.default.createElement(S_AbsoluteWrapper, { ref: contextRef, style: { top: position.top, left: position.left } },
+        if (!contextRef) {
+            setPosition({ top: top + PARENT_HEIGHT, left: left });
+            return;
+        }
+        var contextBound = contextRef.getBoundingClientRect();
+        if (contextRef.getBoundingClientRect().right > window.innerWidth) {
+            setPosition({ top: top + PARENT_HEIGHT, left: window.innerWidth - contextBound.width });
+            return;
+        }
+    }, [parentRef, contextRef]);
+    return (react_1.default.createElement(S_AbsoluteWrapper, { ref: contextCallbackRef, style: { top: position.top, left: position.left } },
         react_1.default.createElement(ContextMenu_1.ContextMenu, null, children)));
 }
 var S_AbsoluteWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n\n  /* NOTE: contents layer */\n  z-index: 90;\n"], ["\n  position: fixed;\n\n  /* NOTE: contents layer */\n  z-index: 90;\n"])));

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

@@ -3,6 +3,7 @@ import { PDSIconType } from '../../../../common';
 declare type Props = {
     to: string;
     iconName: PDSIconType;
+    openNewTab: boolean;
 };
-declare function IconNav({ to, iconName }: Props): JSX.Element;
+declare function IconNav({ to, iconName, openNewTab }: Props): JSX.Element;
 export default IconNav;

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

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

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

@@ -17,6 +17,6 @@ function LogoNav(_a) {
         react_1.default.createElement(S_Box, null, logoSrc ? (react_1.default.createElement(S_Logo, { src: logoSrc })) : (react_1.default.createElement(__1.D_TextLabel, { text: fallbackText, styleTheme: "headingBold", ellipsisMode: "use", lineLimit: 1 })))));
 }
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: 180px;\n  display: flex;\n  align-items: center;\n"], ["\n  height: 48px;\n  width: 180px;\n  display: flex;\n  align-items: center;\n"])));
-var S_Logo = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: 100%;\n  object-fit: contain;\n  object-position: left;\n"], ["\n  max-height: 100%;\n  object-fit: contain;\n  object-position: left;\n"])));
+var S_Logo = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n  object-position: left;\n"], ["\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n  object-position: left;\n"])));
 exports.default = LogoNav;
 var templateObject_1, templateObject_2;

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

@@ -3,6 +3,7 @@ import { ParsedNode } from '../../types';
 declare type Props = {
     menu: ParsedNode;
     showMenuAsIcon: boolean;
+    index: number;
 };
-declare function MenuItemNav({ menu, showMenuAsIcon }: Props): JSX.Element;
+declare function MenuItemNav({ menu, showMenuAsIcon, index }: Props): JSX.Element;
 export default MenuItemNav;

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

@@ -41,11 +41,13 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 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 PAppMenuItemNav_1 = __importDefault(require("./components/PAppMenuItemNav"));
 var WebMenuItemNav_1 = __importDefault(require("./components/WebMenuItemNav"));
 // NOTE: 서버에서 itemType으로 enum값이 잘 오면 아래 불필요한 케이스/default 간소화
 function MenuItemNav(_a) {
-    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon;
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, index = _a.index;
     var ref = (0, react_1.useRef)(null);
     var _b = (0, react_1.useState)(false), isContextOpen = _b[0], setIsContextOpen = _b[1];
     var handleMouseOver = (0, react_1.useCallback)(function () {
@@ -54,12 +56,18 @@ function MenuItemNav(_a) {
     var handleMouseOut = (0, react_1.useCallback)(function () {
         setIsContextOpen(false);
     }, []);
-    return (react_1.default.createElement(S_Box, { ref: ref, onMouseOver: handleMouseOver, onMouseLeave: handleMouseOut, onWheel: handleMouseOut, showMenuAsIcon: showMenuAsIcon },
-        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, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
-        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" })),
-        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 })); })))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_Box, { ref: ref, onMouseOver: handleMouseOver, onMouseLeave: handleMouseOut, onWheel: handleMouseOut, showMenuAsIcon: showMenuAsIcon, type: menu.menuItemType },
+            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, { index: index, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), 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" }))));
 }
-var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n"])));
+var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n"], ["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n"])), function (_a) {
+    var type = _a.type;
+    return (type === 'DISPLAY_ONLY' ? 'default' : 'pointer');
+});
 exports.default = MenuItemNav;
 var templateObject_1;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/DisplayOnlyMenuItemNav.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, 'conversionLinkSrc'>;
+    showMenuAsIcon?: boolean;
+    isContextMenu?: boolean;
+};
+declare function DisplayOnlyMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
+export default DisplayOnlyMenuItemNav;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Navigations_1 = require("../../../../../../common/components/Navigations");
+var IconNav_1 = __importDefault(require("../../IconNav"));
+var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
+function DisplayOnlyMenuItemNav(_a) {
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu;
+    if (showMenuAsIcon) {
+        if (menu.iconSrc) {
+            return (react_1.default.createElement(DeactivateLinkBox, null,
+                react_1.default.createElement(ImageIconNav_1.default, { to: menu.conversionLinkSrc, iconSrc: menu.iconSrc, openNewTab: false })));
+        }
+        if (menu.iconName) {
+            return (react_1.default.createElement(DeactivateLinkBox, null,
+                react_1.default.createElement(IconNav_1.default, { to: menu.conversionLinkSrc, iconName: menu.iconName, openNewTab: false })));
+        }
+    }
+    return (react_1.default.createElement(DeactivateLinkBox, null, isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: false, to: menu.conversionLinkSrc, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: false, to: menu.conversionLinkSrc, text: menu.name }))));
+}
+var DeactivateLinkBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: none;\n  width: max-content;\n"], ["\n  pointer-events: none;\n  width: max-content;\n"])));
+exports.default = DisplayOnlyMenuItemNav;
+var templateObject_1;

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

@@ -0,0 +1,13 @@
+/// <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, 'conversionLinkSrc'>;
+    showMenuAsIcon?: boolean;
+    isContextMenu?: boolean;
+    index?: number;
+};
+declare function InternalLinkMenuItemNav({ menu, showMenuAsIcon, isContextMenu, index }: Props): JSX.Element;
+export default InternalLinkMenuItemNav;

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

@@ -0,0 +1,65 @@
+"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 InternalLinkMenuItemNav(_a) {
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu, index = _a.index;
+    var location = (0, react_router_dom_1.useLocation)();
+    var _b = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext), basePath = _b.basePath, activeMode = _b.activeMode, handleClickInternalMenuItemNav = _b.handleClickInternalMenuItemNav;
+    var _c = getInternalLink(basePath, menu.conversionLinkSrc), internalPath = _c.internalPath, pathname = _c.pathname, search = _c.search;
+    var isActive = (0, react_1.useMemo)(function () {
+        if (activeMode === 'BY_URL') {
+            return false;
+        }
+        if (pathname + search === location.pathname + location.search) {
+            return true;
+        }
+        return false;
+    }, [activeMode, location]);
+    var onClickNav = function () {
+        handleClickInternalMenuItemNav(internalPath);
+    };
+    if (showMenuAsIcon) {
+        if (menu.iconSrc) {
+            return react_1.default.createElement(ImageIconNav_1.default, { to: internalPath, iconSrc: menu.iconSrc, openNewTab: false });
+        }
+        if (menu.iconName) {
+            return react_1.default.createElement(IconNav_1.default, { to: internalPath, iconName: menu.iconName, openNewTab: false });
+        }
+    }
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { onClick: onClickNav, isActive: isActive, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name }));
+}
+function getInternalLink(basePath, url) {
+    var _a = new URL(url), pathname = _a.pathname, search = _a.search;
+    var splitPath = pathname.split(basePath).pop();
+    var PAPP_CODE_INDEX = 1;
+    var pAppCode = splitPath === null || splitPath === void 0 ? void 0 : splitPath.split('/')[PAPP_CODE_INDEX];
+    return { internalPath: basePath + splitPath + search, pAppCode: pAppCode, pathname: pathname, search: search };
+}
+exports.default = InternalLinkMenuItemNav;

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

@@ -6,6 +6,8 @@ declare type WithRequired<T, K extends keyof T> = T & {
 declare type Props = {
     menu: WithRequired<ParsedNode, 'pAppCode'>;
     showMenuAsIcon?: boolean;
+    isContextMenu?: boolean;
+    index?: number;
 };
-declare function PAppMenuItemNav({ menu, showMenuAsIcon }: Props): JSX.Element;
+declare function PAppMenuItemNav({ menu, showMenuAsIcon, isContextMenu, index }: Props): JSX.Element;
 export default PAppMenuItemNav;

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

@@ -24,26 +24,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_router_dom_1 = require("react-router-dom");
-var TextLabelNav_1 = __importDefault(require("../../../../../../common/components/Navigations/TextLabelNav"));
+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 PAppMenuItemNav(_a) {
-    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon;
-    var basePath = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext).basePath;
-    var match = (0, react_router_dom_1.useRouteMatch)("" + basePath);
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, _b = _a.isContextMenu, isContextMenu = _b === void 0 ? false : _b, index = _a.index;
+    var _c = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext), basePath = _c.basePath, activeMode = _c.activeMode;
     var activeMatch = (0, react_router_dom_1.useRouteMatch)(basePath + "/: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.pAppCode;
-    }, [match, activeMatch]);
+    }, [activeMode, menu, activeMatch]);
     if (showMenuAsIcon) {
         if (menu.iconSrc) {
-            return react_1.default.createElement(ImageIconNav_1.default, { to: "/" + menu.pAppCode, iconSrc: menu.iconSrc, openNewTab: false });
+            return (react_1.default.createElement(ImageIconNav_1.default, { to: basePath + "/" + menu.pAppCode, iconSrc: menu.iconSrc, openNewTab: false }));
         }
         if (menu.iconName) {
-            return react_1.default.createElement(IconNav_1.default, { to: "/" + menu.pAppCode, iconName: menu.iconName });
+            return (react_1.default.createElement(IconNav_1.default, { to: basePath + "/" + menu.pAppCode, iconName: menu.iconName, openNewTab: false }));
         }
     }
-    return (react_1.default.createElement(TextLabelNav_1.default, { isActive: isActive, preventLineChange: true, openNewTab: false, to: "/" + menu.pAppCode, text: menu.name }));
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/" + menu.pAppCode, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/" + menu.pAppCode, text: menu.name }));
 }
 exports.default = PAppMenuItemNav;

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

@@ -6,6 +6,8 @@ declare type WithRequired<T, K extends keyof T> = T & {
 declare type Props = {
     menu: WithRequired<ParsedNode, 'conversionLinkSrc'>;
     showMenuAsIcon?: boolean;
+    isContextMenu?: boolean;
+    openNewTab: boolean;
 };
-declare function WebMenuItemNav({ menu, showMenuAsIcon }: Props): JSX.Element;
+declare function WebMenuItemNav({ menu, showMenuAsIcon, isContextMenu, openNewTab }: Props): JSX.Element;
 export default WebMenuItemNav;

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

@@ -4,19 +4,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var TextLabelNav_1 = __importDefault(require("../../../../../../common/components/Navigations/TextLabelNav"));
+var Navigations_1 = require("../../../../../../common/components/Navigations");
 var IconNav_1 = __importDefault(require("../../IconNav"));
 var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
 function WebMenuItemNav(_a) {
-    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon;
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu, openNewTab = _a.openNewTab;
     if (showMenuAsIcon) {
         if (menu.iconSrc) {
-            return react_1.default.createElement(ImageIconNav_1.default, { to: menu.conversionLinkSrc, iconSrc: menu.iconSrc, openNewTab: true });
+            return (react_1.default.createElement(ImageIconNav_1.default, { to: menu.conversionLinkSrc, iconSrc: menu.iconSrc, openNewTab: openNewTab }));
         }
         if (menu.iconName) {
-            return react_1.default.createElement(IconNav_1.default, { to: "/" + menu.pAppCode, iconName: menu.iconName });
+            return (react_1.default.createElement(IconNav_1.default, { to: menu.conversionLinkSrc, iconName: menu.iconName, openNewTab: openNewTab }));
         }
     }
-    return react_1.default.createElement(TextLabelNav_1.default, { preventLineChange: true, openNewTab: true, to: menu.conversionLinkSrc, text: menu.name });
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: openNewTab, to: menu.conversionLinkSrc, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: openNewTab, to: menu.conversionLinkSrc, text: menu.name }));
 }
 exports.default = WebMenuItemNav;

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

@@ -1 +1,2 @@
 export { default as DynamicDesktopNavBar } from './DynamicDesktopNavBar';
+export { DynamicDesktopNavBarTemplates } from './templates';

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

@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DynamicDesktopNavBar = void 0;
+exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = void 0;
 var DynamicDesktopNavBar_1 = require("./DynamicDesktopNavBar");
 Object.defineProperty(exports, "DynamicDesktopNavBar", { enumerable: true, get: function () { return __importDefault(DynamicDesktopNavBar_1).default; } });
+var templates_1 = require("./templates");
+Object.defineProperty(exports, "DynamicDesktopNavBarTemplates", { enumerable: true, get: function () { return templates_1.DynamicDesktopNavBarTemplates; } });

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

@@ -0,0 +1,16 @@
+export declare type ActiveModeTypes = 'BY_URL' | 'BY_CLICK';
+declare type ActionType = {
+    type: 'INTERNAL_CLICKED';
+    payload: {
+        clickedURL: string;
+    };
+} | {
+    type: 'URL_CHANGED';
+};
+declare type DefaultValueState = {
+    mode: ActiveModeTypes;
+    clickedURL: string;
+};
+export declare const defaultValue: DefaultValueState;
+export default function reducer(state: DefaultValueState, action: ActionType): DefaultValueState;
+export {};

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultValue = void 0;
+exports.defaultValue = { mode: 'BY_URL', clickedURL: '' };
+function reducer(state, action) {
+    switch (action.type) {
+        case 'INTERNAL_CLICKED': {
+            return {
+                mode: 'BY_CLICK',
+                clickedURL: action.payload.clickedURL
+            };
+        }
+        case 'URL_CHANGED': {
+            return {
+                mode: 'BY_URL',
+                clickedURL: ''
+            };
+        }
+        default:
+            return exports.defaultValue;
+    }
+}
+exports.default = reducer;