pds-dev-kit-web-test 2.5.705 → 2.5.707

package/dist/src/common/styles/ToneTest/ToneTest.js

@@ -1,16 +1,18 @@
 "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 __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);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_router_dom_1 = require("react-router-dom");
@@ -19,365 +21,385 @@ var desktop_1 = require("../../../desktop");
 var components_1 = require("../../../desktop/components");
 var hybrid_1 = require("../../../hybrid");
 var theme_1 = require("../theme");
-var mocks = [
-    {
-        conversionLinkSrc: 'https://www.naver.com/',
-        iconSrc: '',
-        menuItemType: 'WEB_LINK',
-        name: 'Default VOD',
-        iconName: 'ic_language',
-        pAppCode: 'C00001',
-        parsedNodes: [
-            {
-                conversionLinkSrc: '',
-                iconSrc: '',
-                menuItemType: 'NAV_P_APP',
-                name: 'Timeline is Timeline but Timeline',
-                pAppCode: 'A00001',
-                parsedNodes: [],
-                type: 'GENERAL_NODE',
-                visibilityLevel: 'SUBSCRIBER'
-            },
-            {
-                conversionLinkSrc: '',
-                iconSrc: '',
-                menuItemType: 'NAV_P_APP',
-                name: 'Notice',
-                pAppCode: 'A00002',
-                parsedNodes: [],
-                type: 'GENERAL_NODE',
-                visibilityLevel: 'SUBSCRIBER'
-            }
-        ],
-        type: 'GENERAL_NODE',
-        visibilityLevel: 'SUBSCRIBER'
-    },
-    {
-        conversionLinkSrc: '',
-        iconSrc: '',
-        iconName: 'ic_chat',
-        menuItemType: 'NAV_P_APP',
-        name: 'Free Board',
-        pAppCode: 'A00003',
-        parsedNodes: [
-            {
-                conversionLinkSrc: '',
-                iconSrc: '',
-                menuItemType: 'NAV_P_APP',
-                name: 'Event Live',
-                pAppCode: 'C00005',
-                parsedNodes: [],
-                type: 'GENERAL_NODE',
-                visibilityLevel: 'SUBSCRIBER'
-            },
-            {
-                conversionLinkSrc: '',
-                iconSrc: '',
-                menuItemType: 'NAV_P_APP',
-                name: 'Polleeee',
-                pAppCode: 'A00007',
-                parsedNodes: [],
-                type: 'GENERAL_NODE',
-                visibilityLevel: 'SUBSCRIBER'
-            }
-        ],
-        type: 'GENERAL_NODE',
-        visibilityLevel: 'SUBSCRIBER'
-    },
-    {
-        conversionLinkSrc: '',
-        iconSrc: '',
-        iconName: 'ic_camera',
-        menuItemType: 'NAV_P_APP',
-        name: 'Class VOD',
-        pAppCode: 'C00007',
-        parsedNodes: [
-            {
-                conversionLinkSrc: '',
-                iconSrc: '',
-                menuItemType: 'NAV_P_APP',
-                name: '이것은30자팹네임입니다.팹팹팹팹팹팹팹팹팹팹팹팹팹팹팹팹팹',
-                pAppCode: 'C00006',
-                parsedNodes: [],
-                type: 'GENERAL_NODE',
-                visibilityLevel: 'SUBSCRIBER'
-            },
-            {
-                conversionLinkSrc: '',
-                iconSrc: '',
-                menuItemType: 'NAV_P_APP',
-                name: 'Inquiry Board',
-                pAppCode: 'A00005',
-                parsedNodes: [],
-                type: 'GENERAL_NODE',
-                visibilityLevel: 'SUBSCRIBER'
-            }
-        ],
-        type: 'GENERAL_NODE',
-        visibilityLevel: 'SUBSCRIBER'
-    },
-    {
-        conversionLinkSrc: '',
-        iconSrc: '',
-        menuItemType: 'NAV_P_APP',
-        name: 'Welcome Page',
-        pAppCode: 'B00006',
-        parsedNodes: [],
-        type: 'GENERAL_NODE',
-        visibilityLevel: 'SUBSCRIBER'
-    },
-    {
-        conversionLinkSrc: '',
-        iconSrc: '',
-        menuItemType: 'NAV_P_APP',
-        name: 'Photobook',
-        pAppCode: 'B00005',
-        parsedNodes: [
-            {
-                conversionLinkSrc: '',
-                iconSrc: '',
-                menuItemType: 'NAV_P_APP',
-                name: 'Book a consultation',
-                pAppCode: 'E00001',
-                parsedNodes: [],
-                type: 'GENERAL_NODE',
-                visibilityLevel: 'SUBSCRIBER'
-            }
-        ],
-        type: 'GENERAL_NODE',
-        visibilityLevel: 'SUBSCRIBER'
-    },
-    {
-        conversionLinkSrc: '',
-        iconSrc: '',
-        menuItemType: 'NAV_P_APP',
-        name: 'OTT Type VOD',
-        pAppCode: 'C00002',
-        parsedNodes: [],
-        type: 'GENERAL_NODE',
-        visibilityLevel: 'SUBSCRIBER'
-    },
-    {
-        conversionLinkSrc: '',
-        iconSrc: '',
-        menuItemType: 'NAV_P_APP',
-        name: 'Outlink pApp',
-        pAppCode: 'B00002',
-        parsedNodes: [
-            {
-                conversionLinkSrc: '',
-                iconSrc: '',
-                menuItemType: 'NAV_P_APP',
-                name: 'OTT Type VR VOD',
-                pAppCode: 'C00013',
-                parsedNodes: [],
-                type: 'GENERAL_NODE',
-                visibilityLevel: 'SUBSCRIBER'
-            }
-        ],
-        type: 'GENERAL_NODE',
-        visibilityLevel: 'SUBSCRIBER'
-    },
-    {
-        conversionLinkSrc: '',
-        iconSrc: '',
-        menuItemType: 'NAV_P_APP',
-        name: 'Outlink pApp',
-        pAppCode: 'B00002',
-        parsedNodes: [
-            {
-                conversionLinkSrc: '',
-                iconSrc: '',
-                menuItemType: 'NAV_P_APP',
-                name: 'OTT Type VR VOD',
-                pAppCode: 'C00013',
-                parsedNodes: [],
-                type: 'GENERAL_NODE',
-                visibilityLevel: 'SUBSCRIBER'
-            }
-        ],
-        type: 'GENERAL_NODE',
-        visibilityLevel: 'SUBSCRIBER'
-    },
-    {
-        conversionLinkSrc: '',
-        iconSrc: '',
-        menuItemType: 'NAV_P_APP',
-        name: 'Outlink pApp',
-        pAppCode: 'B00002',
-        parsedNodes: [
-            {
-                conversionLinkSrc: '',
-                iconSrc: '',
-                menuItemType: 'NAV_P_APP',
-                name: 'OTT Type VR VOD',
-                pAppCode: 'C00013',
-                parsedNodes: [],
-                type: 'GENERAL_NODE',
-                visibilityLevel: 'SUBSCRIBER'
-            }
-        ],
-        type: 'GENERAL_NODE',
-        visibilityLevel: 'SUBSCRIBER'
-    },
-    {
-        conversionLinkSrc: '',
-        iconSrc: '',
-        menuItemType: 'NAV_P_APP',
-        name: 'Outlink pApp',
-        pAppCode: 'B00002',
-        parsedNodes: [
-            {
-                conversionLinkSrc: '',
-                iconSrc: '',
-                menuItemType: 'NAV_P_APP',
-                name: 'OTT Type VR VOD',
-                pAppCode: 'C00013',
-                parsedNodes: [],
-                type: 'GENERAL_NODE',
-                visibilityLevel: 'SUBSCRIBER'
-            }
-        ],
-        type: 'GENERAL_NODE',
-        visibilityLevel: 'SUBSCRIBER'
-    },
-    {
-        conversionLinkSrc: '',
-        iconSrc: '',
-        menuItemType: 'NAV_P_APP',
-        name: 'Outlink pApp',
-        pAppCode: 'B00002',
-        parsedNodes: [
-            {
-                conversionLinkSrc: '',
-                iconSrc: '',
-                menuItemType: 'NAV_P_APP',
-                name: 'OTT Type VR VOD',
-                pAppCode: 'C00013',
-                parsedNodes: [],
-                type: 'GENERAL_NODE',
-                visibilityLevel: 'SUBSCRIBER'
-            }
-        ],
-        type: 'GENERAL_NODE',
-        visibilityLevel: 'SUBSCRIBER'
-    },
-    {
-        conversionLinkSrc: '',
-        iconSrc: '',
-        menuItemType: 'NAV_P_APP',
-        name: 'Outlink pApp',
-        pAppCode: 'B00002',
-        parsedNodes: [
-            {
-                conversionLinkSrc: '',
-                iconSrc: '',
-                menuItemType: 'NAV_P_APP',
-                name: 'OTT Type VR VOD',
-                pAppCode: 'C00013',
-                parsedNodes: [],
-                type: 'GENERAL_NODE',
-                visibilityLevel: 'SUBSCRIBER'
-            }
-        ],
-        type: 'GENERAL_NODE',
-        visibilityLevel: 'SUBSCRIBER'
-    },
-    {
-        conversionLinkSrc: '',
-        iconSrc: '',
-        menuItemType: 'NAV_P_APP',
-        name: 'Outlink pApp',
-        pAppCode: 'B00002',
-        parsedNodes: [
-            {
-                conversionLinkSrc: '',
-                iconSrc: '',
-                menuItemType: 'NAV_P_APP',
-                name: 'OTT Type VR VOD',
-                pAppCode: 'C00013',
-                parsedNodes: [],
-                type: 'GENERAL_NODE',
-                visibilityLevel: 'SUBSCRIBER'
-            }
-        ],
-        type: 'GENERAL_NODE',
-        visibilityLevel: 'SUBSCRIBER'
-    },
-    {
-        conversionLinkSrc: '',
-        iconSrc: '',
-        menuItemType: 'NAV_P_APP',
-        name: 'Outlink pApp',
-        pAppCode: 'B00002',
-        parsedNodes: [
-            {
-                conversionLinkSrc: '',
-                iconSrc: '',
-                menuItemType: 'NAV_P_APP',
-                name: 'OTT Type VR VOD',
-                pAppCode: 'C00013',
-                parsedNodes: [],
-                type: 'GENERAL_NODE',
-                visibilityLevel: 'SUBSCRIBER'
-            }
-        ],
-        type: 'GENERAL_NODE',
-        visibilityLevel: 'SUBSCRIBER'
-    },
-    {
-        conversionLinkSrc: '',
-        iconSrc: '',
-        menuItemType: 'NAV_P_APP',
-        name: 'Outlink pApp',
-        pAppCode: 'B00002',
-        parsedNodes: [
-            {
-                conversionLinkSrc: '',
-                iconSrc: '',
-                menuItemType: 'NAV_P_APP',
-                name: 'OTT Type VR VOD',
-                pAppCode: 'C00013',
-                parsedNodes: [],
-                type: 'GENERAL_NODE',
-                visibilityLevel: 'SUBSCRIBER'
-            }
-        ],
-        type: 'GENERAL_NODE',
-        visibilityLevel: 'SUBSCRIBER'
-    }
-];
+var mocks = [{
+  conversionLinkSrc: 'https://www.naver.com/',
+  iconSrc: '',
+  menuItemType: 'WEB_LINK',
+  name: 'Default VOD',
+  iconName: 'ic_language',
+  pAppCode: 'C00001',
+  parsedNodes: [{
+    conversionLinkSrc: '',
+    iconSrc: '',
+    menuItemType: 'NAV_P_APP',
+    name: 'Timeline is Timeline but Timeline',
+    pAppCode: 'A00001',
+    parsedNodes: [],
+    type: 'GENERAL_NODE',
+    visibilityLevel: 'SUBSCRIBER'
+  }, {
+    conversionLinkSrc: '',
+    iconSrc: '',
+    menuItemType: 'NAV_P_APP',
+    name: 'Notice',
+    pAppCode: 'A00002',
+    parsedNodes: [],
+    type: 'GENERAL_NODE',
+    visibilityLevel: 'SUBSCRIBER'
+  }],
+  type: 'GENERAL_NODE',
+  visibilityLevel: 'SUBSCRIBER'
+}, {
+  conversionLinkSrc: '',
+  iconSrc: '',
+  iconName: 'ic_chat',
+  menuItemType: 'NAV_P_APP',
+  name: 'Free Board',
+  pAppCode: 'A00003',
+  parsedNodes: [{
+    conversionLinkSrc: '',
+    iconSrc: '',
+    menuItemType: 'NAV_P_APP',
+    name: 'Event Live',
+    pAppCode: 'C00005',
+    parsedNodes: [],
+    type: 'GENERAL_NODE',
+    visibilityLevel: 'SUBSCRIBER'
+  }, {
+    conversionLinkSrc: '',
+    iconSrc: '',
+    menuItemType: 'NAV_P_APP',
+    name: 'Polleeee',
+    pAppCode: 'A00007',
+    parsedNodes: [],
+    type: 'GENERAL_NODE',
+    visibilityLevel: 'SUBSCRIBER'
+  }],
+  type: 'GENERAL_NODE',
+  visibilityLevel: 'SUBSCRIBER'
+}, {
+  conversionLinkSrc: '',
+  iconSrc: '',
+  iconName: 'ic_camera',
+  menuItemType: 'NAV_P_APP',
+  name: 'Class VOD',
+  pAppCode: 'C00007',
+  parsedNodes: [{
+    conversionLinkSrc: '',
+    iconSrc: '',
+    menuItemType: 'NAV_P_APP',
+    name: '이것은30자팹네임입니다.팹팹팹팹팹팹팹팹팹팹팹팹팹팹팹팹팹',
+    pAppCode: 'C00006',
+    parsedNodes: [],
+    type: 'GENERAL_NODE',
+    visibilityLevel: 'SUBSCRIBER'
+  }, {
+    conversionLinkSrc: '',
+    iconSrc: '',
+    menuItemType: 'NAV_P_APP',
+    name: 'Inquiry Board',
+    pAppCode: 'A00005',
+    parsedNodes: [],
+    type: 'GENERAL_NODE',
+    visibilityLevel: 'SUBSCRIBER'
+  }],
+  type: 'GENERAL_NODE',
+  visibilityLevel: 'SUBSCRIBER'
+}, {
+  conversionLinkSrc: '',
+  iconSrc: '',
+  menuItemType: 'NAV_P_APP',
+  name: 'Welcome Page',
+  pAppCode: 'B00006',
+  parsedNodes: [],
+  type: 'GENERAL_NODE',
+  visibilityLevel: 'SUBSCRIBER'
+}, {
+  conversionLinkSrc: '',
+  iconSrc: '',
+  menuItemType: 'NAV_P_APP',
+  name: 'Photobook',
+  pAppCode: 'B00005',
+  parsedNodes: [{
+    conversionLinkSrc: '',
+    iconSrc: '',
+    menuItemType: 'NAV_P_APP',
+    name: 'Book a consultation',
+    pAppCode: 'E00001',
+    parsedNodes: [],
+    type: 'GENERAL_NODE',
+    visibilityLevel: 'SUBSCRIBER'
+  }],
+  type: 'GENERAL_NODE',
+  visibilityLevel: 'SUBSCRIBER'
+}, {
+  conversionLinkSrc: '',
+  iconSrc: '',
+  menuItemType: 'NAV_P_APP',
+  name: 'OTT Type VOD',
+  pAppCode: 'C00002',
+  parsedNodes: [],
+  type: 'GENERAL_NODE',
+  visibilityLevel: 'SUBSCRIBER'
+}, {
+  conversionLinkSrc: '',
+  iconSrc: '',
+  menuItemType: 'NAV_P_APP',
+  name: 'Outlink pApp',
+  pAppCode: 'B00002',
+  parsedNodes: [{
+    conversionLinkSrc: '',
+    iconSrc: '',
+    menuItemType: 'NAV_P_APP',
+    name: 'OTT Type VR VOD',
+    pAppCode: 'C00013',
+    parsedNodes: [],
+    type: 'GENERAL_NODE',
+    visibilityLevel: 'SUBSCRIBER'
+  }],
+  type: 'GENERAL_NODE',
+  visibilityLevel: 'SUBSCRIBER'
+}, {
+  conversionLinkSrc: '',
+  iconSrc: '',
+  menuItemType: 'NAV_P_APP',
+  name: 'Outlink pApp',
+  pAppCode: 'B00002',
+  parsedNodes: [{
+    conversionLinkSrc: '',
+    iconSrc: '',
+    menuItemType: 'NAV_P_APP',
+    name: 'OTT Type VR VOD',
+    pAppCode: 'C00013',
+    parsedNodes: [],
+    type: 'GENERAL_NODE',
+    visibilityLevel: 'SUBSCRIBER'
+  }],
+  type: 'GENERAL_NODE',
+  visibilityLevel: 'SUBSCRIBER'
+}, {
+  conversionLinkSrc: '',
+  iconSrc: '',
+  menuItemType: 'NAV_P_APP',
+  name: 'Outlink pApp',
+  pAppCode: 'B00002',
+  parsedNodes: [{
+    conversionLinkSrc: '',
+    iconSrc: '',
+    menuItemType: 'NAV_P_APP',
+    name: 'OTT Type VR VOD',
+    pAppCode: 'C00013',
+    parsedNodes: [],
+    type: 'GENERAL_NODE',
+    visibilityLevel: 'SUBSCRIBER'
+  }],
+  type: 'GENERAL_NODE',
+  visibilityLevel: 'SUBSCRIBER'
+}, {
+  conversionLinkSrc: '',
+  iconSrc: '',
+  menuItemType: 'NAV_P_APP',
+  name: 'Outlink pApp',
+  pAppCode: 'B00002',
+  parsedNodes: [{
+    conversionLinkSrc: '',
+    iconSrc: '',
+    menuItemType: 'NAV_P_APP',
+    name: 'OTT Type VR VOD',
+    pAppCode: 'C00013',
+    parsedNodes: [],
+    type: 'GENERAL_NODE',
+    visibilityLevel: 'SUBSCRIBER'
+  }],
+  type: 'GENERAL_NODE',
+  visibilityLevel: 'SUBSCRIBER'
+}, {
+  conversionLinkSrc: '',
+  iconSrc: '',
+  menuItemType: 'NAV_P_APP',
+  name: 'Outlink pApp',
+  pAppCode: 'B00002',
+  parsedNodes: [{
+    conversionLinkSrc: '',
+    iconSrc: '',
+    menuItemType: 'NAV_P_APP',
+    name: 'OTT Type VR VOD',
+    pAppCode: 'C00013',
+    parsedNodes: [],
+    type: 'GENERAL_NODE',
+    visibilityLevel: 'SUBSCRIBER'
+  }],
+  type: 'GENERAL_NODE',
+  visibilityLevel: 'SUBSCRIBER'
+}, {
+  conversionLinkSrc: '',
+  iconSrc: '',
+  menuItemType: 'NAV_P_APP',
+  name: 'Outlink pApp',
+  pAppCode: 'B00002',
+  parsedNodes: [{
+    conversionLinkSrc: '',
+    iconSrc: '',
+    menuItemType: 'NAV_P_APP',
+    name: 'OTT Type VR VOD',
+    pAppCode: 'C00013',
+    parsedNodes: [],
+    type: 'GENERAL_NODE',
+    visibilityLevel: 'SUBSCRIBER'
+  }],
+  type: 'GENERAL_NODE',
+  visibilityLevel: 'SUBSCRIBER'
+}, {
+  conversionLinkSrc: '',
+  iconSrc: '',
+  menuItemType: 'NAV_P_APP',
+  name: 'Outlink pApp',
+  pAppCode: 'B00002',
+  parsedNodes: [{
+    conversionLinkSrc: '',
+    iconSrc: '',
+    menuItemType: 'NAV_P_APP',
+    name: 'OTT Type VR VOD',
+    pAppCode: 'C00013',
+    parsedNodes: [],
+    type: 'GENERAL_NODE',
+    visibilityLevel: 'SUBSCRIBER'
+  }],
+  type: 'GENERAL_NODE',
+  visibilityLevel: 'SUBSCRIBER'
+}, {
+  conversionLinkSrc: '',
+  iconSrc: '',
+  menuItemType: 'NAV_P_APP',
+  name: 'Outlink pApp',
+  pAppCode: 'B00002',
+  parsedNodes: [{
+    conversionLinkSrc: '',
+    iconSrc: '',
+    menuItemType: 'NAV_P_APP',
+    name: 'OTT Type VR VOD',
+    pAppCode: 'C00013',
+    parsedNodes: [],
+    type: 'GENERAL_NODE',
+    visibilityLevel: 'SUBSCRIBER'
+  }],
+  type: 'GENERAL_NODE',
+  visibilityLevel: 'SUBSCRIBER'
+}, {
+  conversionLinkSrc: '',
+  iconSrc: '',
+  menuItemType: 'NAV_P_APP',
+  name: 'Outlink pApp',
+  pAppCode: 'B00002',
+  parsedNodes: [{
+    conversionLinkSrc: '',
+    iconSrc: '',
+    menuItemType: 'NAV_P_APP',
+    name: 'OTT Type VR VOD',
+    pAppCode: 'C00013',
+    parsedNodes: [],
+    type: 'GENERAL_NODE',
+    visibilityLevel: 'SUBSCRIBER'
+  }],
+  type: 'GENERAL_NODE',
+  visibilityLevel: 'SUBSCRIBER'
+}];
 function ToneTest() {
-    var _a = (0, react_1.useState)('LIGHT'), customTone = _a[0], setTone = _a[1];
-    var changeTone = function () {
-        if (customTone === 'LIGHT') {
-            setTone('DARK');
-        }
-        else {
-            setTone('LIGHT');
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.BrowserRouter, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_1.MainButton, { iconName: "ic_arrow_round_left", text: "Toggle Tone", onClick: changeTone, styleTheme: "secondary" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uC774\uACF3\uC740 toggled\uB41C tone\uC744 \uB530\uB974\uB294 \uBD80\uBD84\uC785\uB2C8\uB2E4." }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, __assign({ theme: (0, theme_1.themeByGivenTone)(customTone) }, { children: (0, jsx_runtime_1.jsx)(desktop_1.D_DynamicDesktopNavBar, { isPreview: true, brandLogo: {
-                            src: 'http://i.imgur.com/zVKjblJ.png',
-                            text: 'PEPSI',
-                            href: '/'
-                        }, userProfile: {
-                            src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL5qfISvgI8p95f3w5lZN9XNwYh1mRiIqEaQ&usqp=CAU',
-                            href: '/'
-                        }, primaryMenus: mocks, secondaryMenus: mocks, template: "W1_0005", basePath: "/channels/invitation" }) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uC774\uACF3\uC740 toggled\uB41C tone\uC758 \uC601\uD5A5\uC744 \uBC1B\uC9C0 \uC54A\uACE0 transparent \uC801\uC6A9 \uB41C \uBD80\uBD84\uC785\uB2C8\uB2E4." }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, __assign({ theme: (0, theme_1.themeByGivenTone)(customTone) }, { children: (0, jsx_runtime_1.jsx)(desktop_1.D_DynamicDesktopNavBar, { isPreview: true, brandLogo: {
-                            src: 'http://i.imgur.com/zVKjblJ.png',
-                            text: 'PEPSI',
-                            href: '/'
-                        }, userProfile: {
-                            src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL5qfISvgI8p95f3w5lZN9XNwYh1mRiIqEaQ&usqp=CAU',
-                            href: '/'
-                        }, primaryMenus: mocks, secondaryMenus: mocks, template: "W1_0005", basePath: "/channels/invitation", colorTheme: "transparent" }) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_e" }), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, {}), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uC774\uACF3\uC740 \uAE30\uBCF8 tone\uC744 \uB530\uB974\uB294 \uBD80\uBD84\uC785\uB2C8\uB2E4." }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(desktop_1.D_DynamicDesktopNavBar, { isPreview: true, brandLogo: {
-                        src: 'http://i.imgur.com/zVKjblJ.png',
-                        text: 'PEPSI',
-                        href: '/'
-                    }, userProfile: {
-                        src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL5qfISvgI8p95f3w5lZN9XNwYh1mRiIqEaQ&usqp=CAU',
-                        href: '/'
-                    }, primaryMenus: mocks, secondaryMenus: mocks, template: "W1_0005", basePath: "/channels/invitation" })] }) }));
+  var _a = (0, react_1.useState)('LIGHT'),
+    customTone = _a[0],
+    setTone = _a[1];
+  var changeTone = function () {
+    if (customTone === 'LIGHT') {
+      setTone('DARK');
+    } else {
+      setTone('LIGHT');
+    }
+  };
+  return (0, jsx_runtime_1.jsx)("div", {
+    children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.BrowserRouter, {
+      children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, {
+        size: "spacing_d"
+      }), (0, jsx_runtime_1.jsx)(components_1.MainButton, {
+        iconName: "ic_arrow_round_left",
+        text: "Toggle Tone",
+        onClick: changeTone,
+        styleTheme: "secondary"
+      }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, {
+        size: "spacing_d"
+      }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, {
+        text: "\uC774\uACF3\uC740 toggled\uB41C tone\uC744 \uB530\uB974\uB294 \uBD80\uBD84\uC785\uB2C8\uB2E4."
+      }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, {
+        size: "spacing_d"
+      }), (0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, __assign({
+        theme: (0, theme_1.themeByGivenTone)(customTone)
+      }, {
+        children: (0, jsx_runtime_1.jsx)(desktop_1.D_DynamicDesktopNavBar, {
+          isPreview: true,
+          brandLogo: {
+            src: 'http://i.imgur.com/zVKjblJ.png',
+            text: 'PEPSI',
+            href: '/'
+          },
+          userProfile: {
+            src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL5qfISvgI8p95f3w5lZN9XNwYh1mRiIqEaQ&usqp=CAU',
+            href: '/'
+          },
+          primaryMenus: mocks,
+          secondaryMenus: mocks,
+          template: "W1_0005",
+          basePath: "/channels/invitation"
+        })
+      })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, {
+        size: "spacing_d"
+      }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, {
+        text: "\uC774\uACF3\uC740 toggled\uB41C tone\uC758 \uC601\uD5A5\uC744 \uBC1B\uC9C0 \uC54A\uACE0 transparent \uC801\uC6A9 \uB41C \uBD80\uBD84\uC785\uB2C8\uB2E4."
+      }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, {
+        size: "spacing_d"
+      }), (0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, __assign({
+        theme: (0, theme_1.themeByGivenTone)(customTone)
+      }, {
+        children: (0, jsx_runtime_1.jsx)(desktop_1.D_DynamicDesktopNavBar, {
+          isPreview: true,
+          brandLogo: {
+            src: 'http://i.imgur.com/zVKjblJ.png',
+            text: 'PEPSI',
+            href: '/'
+          },
+          userProfile: {
+            src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL5qfISvgI8p95f3w5lZN9XNwYh1mRiIqEaQ&usqp=CAU',
+            href: '/'
+          },
+          primaryMenus: mocks,
+          secondaryMenus: mocks,
+          template: "W1_0005",
+          basePath: "/channels/invitation",
+          colorTheme: "transparent"
+        })
+      })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, {
+        size: "spacing_e"
+      }), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, {}), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, {
+        size: "spacing_d"
+      }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, {
+        text: "\uC774\uACF3\uC740 \uAE30\uBCF8 tone\uC744 \uB530\uB974\uB294 \uBD80\uBD84\uC785\uB2C8\uB2E4."
+      }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, {
+        size: "spacing_d"
+      }), (0, jsx_runtime_1.jsx)(desktop_1.D_DynamicDesktopNavBar, {
+        isPreview: true,
+        brandLogo: {
+          src: 'http://i.imgur.com/zVKjblJ.png',
+          text: 'PEPSI',
+          href: '/'
+        },
+        userProfile: {
+          src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL5qfISvgI8p95f3w5lZN9XNwYh1mRiIqEaQ&usqp=CAU',
+          href: '/'
+        },
+        primaryMenus: mocks,
+        secondaryMenus: mocks,
+        template: "W1_0005",
+        basePath: "/channels/invitation"
+      })]
+    })
+  });
 }
-exports.default = ToneTest;
+exports.default = ToneTest;