pds-dev-kit-web-test 0.1.3 → 0.1.5

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __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]; } });
@@ -22,11 +33,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
@@ -43,20 +51,16 @@ function DesktopTabBar(_a) {
         };
         var textLabel_1 = function (item, isSubText) {
             if (isSubText) {
-                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
             }
             if (styleTheme === 'content') {
-                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
             }
             if (styleTheme === 'main') {
-                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
             }
         };
-        return (react_1.default.createElement(S_TabBarBox, { "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
-            react_1.default.createElement(S_MainTabBarSpace, null, itemArray.map(function (item) { return (react_1.default.createElement(S_MainTabItemBox, { key: item.title },
-                react_1.default.createElement(S_MainTabItemWrapper, { text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return handelClickTabItem_1(item, e); } }, textLabel_1(item, false)),
-                item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBarWrapper, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubTabItemWrapper, { key: subItem.title, text: subItem.title, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, textLabel_1(subItem, true))); }))))); })),
-            isSubTabBarActivated && react_1.default.createElement(S_SubTabBarSpace, null)));
+        return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, { children: itemArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, { children: [(0, jsx_runtime_1.jsx)(S_MainTabItemWrapper, __assign({ text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return handelClickTabItem_1(item, e); } }, { children: textLabel_1(item, false) }), void 0), item.isActive && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, { children: textLabel_1(subItem, true) }), subItem.title)); }) }, void 0))] }, item.title)); }) }, void 0), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, {}, void 0)] }), void 0));
     }
     if (textArray) {
         var isSubTabBarActivated = textArray.some(function (item) { return pathname.includes(item.path) && item.subArray; });
@@ -67,25 +71,21 @@ function DesktopTabBar(_a) {
         };
         var textLabel_2 = function (item, isSubText) {
             if (isSubText) {
-                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
             }
             if (styleTheme === 'content') {
-                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
             }
             if (styleTheme === 'main') {
-                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
             }
         };
-        return (react_1.default.createElement(S_TabBarBox, { "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
-            react_1.default.createElement(S_MainTabBarSpace, null, textArray.map(function (item) { return (react_1.default.createElement(S_MainTabItemBox, { key: item.path },
-                react_1.default.createElement(S_MainTabItemWrapper, { isActive: pathname.includes(item.path), styleTheme: styleTheme, text: item.title, onClick: function () { return handleClick_1(item); } }, textLabel_2(item, false)),
-                pathname.includes(item.path) && item.subArray && (react_1.default.createElement(S_SubTabBarWrapper, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubTabItemWrapper, { key: subItem.title, text: subItem.title, onClick: function () { return handleClick_1(subItem); } }, textLabel_2(subItem, true))); }))))); })),
-            isSubTabBarActivated && react_1.default.createElement(S_SubTabBarSpace, null)));
+        return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, { children: textArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, { children: [(0, jsx_runtime_1.jsx)(S_MainTabItemWrapper, __assign({ isActive: pathname.includes(item.path), styleTheme: styleTheme, text: item.title, onClick: function () { return handleClick_1(item); } }, { children: textLabel_2(item, false) }), void 0), pathname.includes(item.path) && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, onClick: function () { return handleClick_1(subItem); } }, { children: textLabel_2(subItem, true) }), subItem.title)); }) }, void 0))] }, item.path)); }) }, void 0), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, {}, void 0)] }), void 0));
     }
-    return react_1.default.createElement(react_1.default.Fragment, null);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
 }
 var S_TabBarBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var S_MainTabBarSpace = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  height: 40px;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  height: 40px;\n"])), function (_a) {
+var S_MainTabBarSpace = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 40px;\n  padding-left: ", ";\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 40px;\n  padding-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area;
 }, function (_a) {
@@ -95,7 +95,7 @@ var S_MainTabBarSpace = styled_components_1.default.div(templateObject_2 || (tem
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var tabIndicator = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    left: 0px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    left: 0px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
+var tabIndicator = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    left: 0px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    left: 0px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return styleTheme === 'content'
         ? theme.ui_cpnt_tabbar_border_active_indicator
@@ -105,7 +105,10 @@ var tabIndicator = (0, styled_components_1.css)(templateObject_3 || (templateObj
     return !isActive && "display: none;";
 });
 // NOTE: Tab item 활성화 시 text에 bold가 적용되는데, 이때 font-family에 따라 text 영역의 너비가 변경되어 시각적 변동을 일으키는 문제를 해결하기 위한 처리입니다.
-var textOffset = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > div::before {\n    font-weight: ", ";\n    display: block;\n    content: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    display: block;\n    content: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n"], ["\n  & > div::before {\n    font-weight: ", ";\n    display: block;\n    content: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    display: block;\n    content: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n"])), function (_a) {
+var textOffset = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > div::before {\n    content: ", ";\n    display: block;\n    font-weight: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n\n  & > div::after {\n    content: ", ";\n    display: block;\n    font-weight: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n"], ["\n  & > div::before {\n    content: ", ";\n    display: block;\n    font-weight: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n\n  & > div::after {\n    content: ", ";\n    display: block;\n    font-weight: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n"])), function (_a) {
+    var text = _a.text;
+    return "'" + text + "'";
+}, function (_a) {
     var theme = _a.theme;
     return theme.fontWeight.normal;
 }, function (_a) {
@@ -114,27 +117,24 @@ var textOffset = (0, styled_components_1.css)(templateObject_4 || (templateObjec
 }, function (_a) {
     var theme = _a.theme;
     return theme.fontWeight.bold;
-}, function (_a) {
-    var text = _a.text;
-    return "'" + text + "'";
 });
 var S_MainTabItemBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"], ["\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-end;\n  display: flex;\n  height: 100%;\n  box-sizing: border-box;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n  cursor: pointer;\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-end;\n  display: flex;\n  height: 100%;\n  box-sizing: border-box;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n  cursor: pointer;\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, tabIndicator, textOffset);
-var S_SubTabBarWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: max-content;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n"], ["\n  width: max-content;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n"])));
-var S_SubTabBarSpace = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 32px;\n  background-color: ", ";\n"], ["\n  height: 32px;\n  background-color: ", ";\n"])), function (_a) {
+var S_SubTabBarWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  bottom: -33px;\n  display: flex;\n  height: 32px;\n  left: 0px;\n  position: absolute;\n  width: max-content;\n"], ["\n  bottom: -33px;\n  display: flex;\n  height: 32px;\n  left: 0px;\n  position: absolute;\n  width: max-content;\n"])));
+var S_SubTabBarSpace = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 32px;\n"], ["\n  background-color: ", ";\n  height: 32px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area_sub;
 });
-var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"])), function (_a) {
+var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  margin-right: ", ";\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  margin-right: ", ";\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {

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

@@ -0,0 +1,7 @@
+import DesktopTabBar from './DesktopTabBar';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+declare const _default: ComponentMeta<typeof DesktopTabBar>;
+export default _default;
+export declare const MainDefault: ComponentStory<typeof DesktopTabBar>;
+export declare const SubDefault: ComponentStory<typeof DesktopTabBar>;
+export declare const ContentDefault: ComponentStory<typeof DesktopTabBar>;

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

@@ -0,0 +1,205 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentDefault = exports.SubDefault = exports.MainDefault = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_router_dom_1 = require("react-router-dom");
+var DesktopTabBar_1 = __importDefault(require("./DesktopTabBar"));
+exports.default = {
+    title: 'desktop/components/DesktopTabBar',
+    component: DesktopTabBar_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'desktop환경에 최적화 된 DesktopTabBar 컴포넌트'
+            }
+        },
+        controls: { hideNoControlsWarning: true }
+    },
+    argTypes: {
+        itemArray: {
+            description: 'tab item의 title, isActive, onClick 이벤트, subArray 값 리스트 입니다.',
+            control: null,
+            table: {
+                type: {
+                    detail: '{\n  title: PDSTextType,\n  isActive: Boolean,\n  onClick: () => void\n  subArray: PDSTabItemOption[]\n}[]'
+                }
+            }
+        },
+        styleTheme: {
+            description: 'tab item의 스타일 유형입니다.',
+            control: { type: 'inline-radio' }
+        },
+        textArray: {
+            description: '`deprecated v1.5.0` 해당 필드 대신 `itemArray`를 사용하세요.',
+            control: { type: 'array' },
+            table: {
+                category: 'deprecated'
+            }
+        }
+    },
+    decorators: [function (story) { return (0, jsx_runtime_1.jsx)(react_router_dom_1.HashRouter, { children: story() }, void 0); }]
+};
+var MainDefault = function (args) {
+    var _a = (0, react_1.useState)(''), selectedItem = _a[0], setSelectedItem = _a[1];
+    return ((0, jsx_runtime_1.jsx)(DesktopTabBar_1.default, __assign({}, args, { itemArray: [
+            {
+                title: '예약권',
+                isActive: selectedItem === '예약권',
+                onClick: function () { return setSelectedItem('예약권'); }
+            },
+            {
+                title: '일정 관리',
+                isActive: selectedItem === '일정 관리',
+                onClick: function () { return setSelectedItem('일정 관리'); }
+            },
+            {
+                title: '설정',
+                isActive: selectedItem === '설정',
+                onClick: function () { return setSelectedItem('설정'); }
+            }
+        ] }), void 0));
+};
+exports.MainDefault = MainDefault;
+exports.MainDefault.args = {
+    styleTheme: 'main'
+};
+var SubDefault = function (args) {
+    var _a = (0, react_1.useState)(''), selectedItem = _a[0], setSelectedItem = _a[1];
+    var _b = (0, react_1.useState)(''), selectedSubItem = _b[0], setSelectedSubItem = _b[1];
+    var handleClick = function (value, subItem) {
+        if (subItem === void 0) { subItem = false; }
+        if (subItem) {
+            setSelectedSubItem(value);
+        }
+        else {
+            setSelectedItem(value);
+            setSelectedSubItem('');
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(DesktopTabBar_1.default, __assign({}, args, { itemArray: [
+            {
+                title: '예약권',
+                isActive: selectedItem === '예약권',
+                onClick: function () { return handleClick('예약권'); },
+                subArray: [
+                    {
+                        title: '예약 링크',
+                        isActive: selectedSubItem === '예약 링크',
+                        onClick: function () { return handleClick('예약 링크', true); }
+                    },
+                    {
+                        title: '예약 가격',
+                        isActive: selectedSubItem === '예약 가격',
+                        onClick: function () { return handleClick('예약 가격', true); }
+                    },
+                    {
+                        title: '예약 설정',
+                        isActive: selectedSubItem === '예약 설정',
+                        onClick: function () { return handleClick('예약 설정', true); }
+                    }
+                ]
+            },
+            {
+                title: '일정 관리',
+                isActive: selectedItem === '일정 관리',
+                onClick: function () { return handleClick('일정 관리'); },
+                subArray: [
+                    {
+                        title: '일정표',
+                        isActive: selectedSubItem === '일정표',
+                        onClick: function () { return handleClick('일정표', true); }
+                    },
+                    {
+                        title: '일정 설정',
+                        isActive: selectedSubItem === '일정 설정',
+                        onClick: function () { return handleClick('일정 설정', true); }
+                    }
+                ]
+            },
+            {
+                title: '설정',
+                isActive: selectedItem === '설정',
+                onClick: function () { return handleClick('설정'); }
+            }
+        ] }), void 0));
+};
+exports.SubDefault = SubDefault;
+exports.SubDefault.args = {
+    styleTheme: 'main'
+};
+var ContentDefault = function () {
+    var _a = (0, react_1.useState)(''), selectedItem = _a[0], setSelectedItem = _a[1];
+    var _b = (0, react_1.useState)(''), selectedSubItem = _b[0], setSelectedSubItem = _b[1];
+    var handleClick = function (value, subItem) {
+        if (subItem === void 0) { subItem = false; }
+        if (subItem) {
+            setSelectedSubItem(value);
+        }
+        else {
+            setSelectedItem(value);
+            setSelectedSubItem('');
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(DesktopTabBar_1.default, { itemArray: [
+            {
+                title: '예약권',
+                isActive: selectedItem === '예약권',
+                onClick: function () { return handleClick('예약권'); },
+                subArray: [
+                    {
+                        title: '예약 링크',
+                        isActive: selectedSubItem === '예약 링크',
+                        onClick: function () { return handleClick('예약 링크', true); }
+                    },
+                    {
+                        title: '예약 가격',
+                        isActive: selectedSubItem === '예약 가격',
+                        onClick: function () { return handleClick('예약 가격', true); }
+                    },
+                    {
+                        title: '예약 설정',
+                        isActive: selectedSubItem === '예약 설정',
+                        onClick: function () { return handleClick('예약 설정', true); }
+                    }
+                ]
+            },
+            {
+                title: '일정 관리',
+                isActive: selectedItem === '일정 관리',
+                onClick: function () { return handleClick('일정 관리'); },
+                subArray: [
+                    {
+                        title: '일정표',
+                        isActive: selectedSubItem === '일정표',
+                        onClick: function () { return handleClick('일정표', true); }
+                    },
+                    {
+                        title: '일정 설정',
+                        isActive: selectedSubItem === '일정 설정',
+                        onClick: function () { return handleClick('일정 설정', true); }
+                    }
+                ]
+            },
+            {
+                title: '설정',
+                isActive: selectedItem === '설정',
+                onClick: function () { return handleClick('설정'); }
+            }
+        ], styleTheme: "content" }, void 0));
+};
+exports.ContentDefault = ContentDefault;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { TFunctionResult } from 'i18next';
-import { PDSValueOption } from '../../../common';
+import type { PDSValueOption } from '../../../common';
+import type { TFunctionResult } from 'i18next';
 declare type DropDownValues = PDSValueOption & {
     state?: 'normal' | 'disabled';
 };

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __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]; } });
@@ -23,7 +34,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+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 hybrid_1 = require("../../../hybrid");
@@ -164,15 +176,7 @@ function Dropdown(_a) {
         var LARGE_HEIGHT = 48;
         return LARGE_HEIGHT * maxHeightItemNumber;
     }, [size, maxHeightItemNumber]);
-    return (react_1.default.createElement(S_Dropdown, { "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "desktop", className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth },
-        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth },
-            react_1.default.createElement(S_TextLabel, { size: size, responsiveMode: responsiveMode },
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })),
-            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, customWidth: customWidth }, 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 }))); }))))));
+    return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "desktop", className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0)] }), void 0), isFocused && ((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: customWidth }, { children: valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, onClick: handleClickOption, state: el.state }, void 0) }, el.value)); }) }), void 0) }, void 0))] }), void 0));
 }
 var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n"], ["\n  flex: 1;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -298,7 +302,7 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_12 || (t
     }
 });
 var normalActionColor = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), backgroundHoverColor, backgroundActiveColor);
-var S_Select = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var S_Select = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var state = _a.state;
     switch (state) {
         case 'disabled':

package/dist/src/desktop/components/Dropdown/Dropdown.stories.d.ts

@@ -0,0 +1,5 @@
+import Dropdown from './Dropdown';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof Dropdown>;
+export default _default;
+export declare const Default: ComponentStory<typeof Dropdown>;

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

@@ -0,0 +1,164 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Dropdown_1 = __importDefault(require("./Dropdown"));
+exports.default = {
+    title: 'desktop/components/Dropdown',
+    component: Dropdown_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'desktop환경에 최적화 된 Dropdown 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        size: {
+            description: '요소의 크기를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        hintText: {
+            description: '선택 전 사용자에게 보여질 기본 텍스트입니다.(placeholder)',
+            control: { type: 'text' }
+        },
+        value: {
+            description: '드롭다운의 값입니다.'
+        },
+        defaultValue: {
+            description: '기본으로 표시할 값입니다.'
+        },
+        valueArray: {
+            description: '옵션으로 표시될 값들의 배열입니다.'
+        },
+        responsiveMode: {
+            description: 'width를 반응형으로 적용합니다.',
+            control: { type: 'inline-radio' }
+        },
+        state: {
+            description: '요소의 활성화 상태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        colorTheme: {
+            description: '컬러의 프리셋 테마입니다.',
+            control: { type: 'inline-radio' }
+        },
+        maxHeightItemNumber: {
+            description: '입력한 개수만큼 보이고 나머지는 스크롤이 됩니다.'
+        },
+        customWidth: {
+            description: '직접 지정한 Dropdown의 사이즈를 결정합니다. 내부에 있는 ContextMenu에도 customWidth가 자동부여됩니다. (단위도 함께 적어주어야 합니다.) (*반드시 디자인 검수후에 사용가능합니다.)',
+            control: { type: 'text' }
+        },
+        onChange: {
+            action: 'onChange'
+        }
+    }
+};
+var Template = function (args) {
+    var valueArray = args.valueArray, defaultValue = args.defaultValue;
+    var _a = (0, react_1.useState)(null), selectedOption = _a[0], setSelectedOption = _a[1];
+    var handleChange = function (option) {
+        if (option.value === 7) {
+            setSelectedOption(valueArray[3]);
+            return;
+        }
+        if (option.value === 4) {
+            setSelectedOption(null);
+            return;
+        }
+        setSelectedOption(option);
+    };
+    return ((0, jsx_runtime_1.jsx)(Dropdown_1.default, __assign({}, args, { defaultValue: defaultValue, value: selectedOption, onChange: handleChange }), void 0));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    size: 'large',
+    valueArray: [
+        {
+            text: '1',
+            value: 1
+        },
+        {
+            text: '2',
+            value: 2
+        },
+        {
+            text: '3',
+            value: 3,
+            state: 'disabled'
+        },
+        {
+            text: '4',
+            value: 4
+        },
+        {
+            text: '5',
+            value: 5
+        },
+        {
+            text: '6',
+            value: 6
+        },
+        {
+            text: '7',
+            value: 7
+        },
+        {
+            text: '8',
+            value: 8
+        },
+        {
+            text: '9',
+            value: 9
+        },
+        {
+            text: '10',
+            value: 10
+        },
+        {
+            text: '11',
+            value: 11
+        },
+        {
+            text: '12',
+            value: 12
+        },
+        {
+            text: '13',
+            value: 13
+        },
+        {
+            text: '14',
+            value: 14
+        },
+        {
+            text: '15',
+            value: 15
+        }
+    ],
+    hintText: 'Hint Text',
+    defaultValue: {
+        text: '12',
+        value: 12
+    },
+    responsiveMode: 'none',
+    state: 'normal',
+    colorTheme: 'none',
+    maxHeightItemNumber: 5
+};

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

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 import { BrandLogo, UserProfile } from './blocks';
 import { ActiveModeTypes } from './reducer';
 import { TemplateNamesType } from './templates';
-import { ParsedNode } from './types';
+import type { ParsedNode } from './types';
 declare type BrandLogo = {
     src: string;
     text: string;
@@ -29,6 +29,6 @@ declare type ContextProp = {
     activeMode: ActiveModeTypes;
     handleClickInternalMenuItemNav: (url: string) => void;
 };
-export declare const BasePathContext: React.Context<ContextProp>;
+export declare const BasePathContext: import("react").Context<ContextProp>;
 declare function DynamicDesktopNavBar({ isPreview, template, brandLogo, primaryMenus, secondaryMenus, userProfile, basePath, colorTheme }: Props): JSX.Element;
 export default DynamicDesktopNavBar;