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

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

@@ -3,30 +3,23 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-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 __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 });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_dom_1 = __importDefault(require("react-dom"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
@@ -64,75 +57,54 @@ function DesktopTutorialModal(_a) {
             onClick: function () { return setSelectedItem("" + data.sideTabTitleText + index); }
         };
     });
-    return react_dom_1.default.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_ModalOverlay, null),
-        react_1.default.createElement(S_ModalWrapper, { "x-pds-name": "DesktopTutorialModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop" },
-            react_1.default.createElement(S_LeftPanel, null,
-                react_1.default.createElement(S_Header, null,
-                    react_1.default.createElement(components_1.TextLabel, { text: modalTitleText, lineLimit: 2, ellipsisMode: "use", styleTheme: "headingBold" })),
-                react_1.default.createElement(S_SideTabWrapper, null,
-                    react_1.default.createElement(Components_1.SideTab, { itemArray: sideTabTitleArray }),
-                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_i" }))),
-            react_1.default.createElement(S_RightPanel, null, infoArray
-                .filter(function (data, index) { return selectedItem === "" + data.sideTabTitleText + index; })
-                .map(function (data) { return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(hybrid_1.ImageView, { src: data.imageSrc, shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", backgroundFillMode: "use" }),
-                react_1.default.createElement(S_InfoBox, null,
-                    react_1.default.createElement(components_1.TextLabel, { text: data.infoTitleText ? data.infoTitleText : data.sideTabTitleText, styleTheme: "subTitleBold" }),
-                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
-                    react_1.default.createElement(components_1.TextLabel, { text: data.infoDescText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary" })),
-                data.btnMode === 'btn_amount1' && (react_1.default.createElement(S_Footer, null,
-                    react_1.default.createElement(components_1.MainButton, { text: data.btn1Text, type: "button", size: "medium", onClick: data.onClickBtn1 }))))); })),
-            react_1.default.createElement(S_IconButtonWrapper, null,
-                react_1.default.createElement(components_1.IconButton, { shapeType: "circular", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_tutorialmodal", iconName: "ic_xmark", iconColorKey: "ui_cpnt_button_icon_white", onClick: handleClickCloseBtn })))), container);
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}, void 0), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "DesktopTutorialModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftPanel, { children: [(0, jsx_runtime_1.jsx)(S_Header, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: modalTitleText, lineLimit: 2, ellipsisMode: "use", styleTheme: "headingBold" }, void 0) }, void 0), (0, jsx_runtime_1.jsxs)(S_SideTabWrapper, { children: [(0, jsx_runtime_1.jsx)(Components_1.SideTab, { itemArray: sideTabTitleArray }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_i" }, void 0)] }, void 0)] }, void 0), infoArray
+                        .filter(function (data, index) { return selectedItem === "" + data.sideTabTitleText + index; })
+                        .map(function (data, index) { return ((0, jsx_runtime_1.jsxs)(S_RightPanel, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: data.imageSrc, shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", backgroundFillMode: "use" }, void 0), (0, jsx_runtime_1.jsxs)(S_InfoBox, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoTitleText ? data.infoTitleText : data.sideTabTitleText, styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: data.infoDescText, styleTheme: "body2Regular", colorTheme: "sysTextSecondary" }, void 0)] }, void 0), data.btnMode === 'btn_amount1' && ((0, jsx_runtime_1.jsx)(S_Footer, { children: (0, jsx_runtime_1.jsx)(components_1.MainButton, { text: data.btn1Text, type: "button", size: "medium", onClick: data.onClickBtn1 }, void 0) }, void 0))] }, "" + data.sideTabTitleText + index)); }), (0, jsx_runtime_1.jsx)(S_IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.IconButton, { shapeType: "circular", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_tutorialmodal", iconName: "ic_xmark", iconColorKey: "ui_cpnt_button_icon_white", onClick: handleClickCloseBtn }, void 0) }, void 0)] }), void 0)] }, void 0), container);
 }
 var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
 }, animationStyle_1.modalOverlayOnAni);
-var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  min-height: 560px;\n  height: 80vh;\n  max-height: 720px;\n  min-width: 960px;\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 50vw;\n  overflow: hidden;\n  display: flex;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  min-height: 560px;\n  height: 80vh;\n  max-height: 720px;\n  min-width: 960px;\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 50vw;\n  overflow: hidden;\n  display: flex;\n\n  ", "\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  display: flex;\n  height: 80vh;\n  left: 50%;\n  max-height: 720px;\n  min-height: 560px;\n  overflow: hidden;\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 960px;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  display: flex;\n  height: 80vh;\n  left: 50%;\n  max-height: 720px;\n  min-height: 560px;\n  overflow: hidden;\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 960px;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_modal_border;
 }, function (_a) {
     var theme = _a.theme;
     return theme.boxShadow.elevation5;
 }, animationStyle_1.modalOnAni);
-var S_LeftPanel = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 360px;\n  display: flex;\n  flex-direction: column;\n"], ["\n  width: 360px;\n  display: flex;\n  flex-direction: column;\n"])));
-var S_Header = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"])), function (_a) {
+var S_LeftPanel = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 240px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 240px;\n"])));
+var S_Header = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingF;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingF;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_SideTabWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow-y: auto;\n  flex: 1;\n"], ["\n  overflow-y: auto;\n  flex: 1;\n"])));
-var S_RightPanel = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 360px);\n  background-color: ", ";\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 360px);\n  background-color: ", ";\n"])), function (_a) {
+var S_SideTabWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  overflow-y: auto;\n"], ["\n  flex: 1;\n  overflow-y: auto;\n"])));
+var S_RightPanel = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tutorialmodal_info_base;
 });
-var S_InfoBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  overflow-y: overlay;\n  flex: 1;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  ", "\n"], ["\n  box-sizing: border-box;\n  overflow-y: overlay;\n  flex: 1;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  ", "\n"])), function (_a) {
+var S_InfoBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  flex: 1;\n  overflow-y: overlay;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n"], ["\n  box-sizing: border-box;\n  flex: 1;\n  overflow-y: overlay;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingF;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingF;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;
 }, scrollbarStyle_1.scrollbarStyle);
-var S_Footer = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-end;\n  min-height: 88px;\n  height: 88px;\n  box-sizing: border-box;\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"], ["\n  display: flex;\n  align-items: flex-end;\n  min-height: 88px;\n  height: 88px;\n  box-sizing: border-box;\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"])), function (_a) {
+var S_Footer = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: flex-end;\n  box-sizing: border-box;\n  display: flex;\n  height: 88px;\n  min-height: 88px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: flex-end;\n  box-sizing: border-box;\n  display: flex;\n  height: 88px;\n  min-height: 88px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;
 }, function (_a) {
@@ -142,7 +114,7 @@ var S_Footer = styled_components_1.default.div(templateObject_8 || (templateObje
     var theme = _a.theme;
     return theme.spacing.spacingF;
 });
-var S_IconButtonWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: fixed;\n  top: ", ";\n  right: ", ";\n"], ["\n  position: fixed;\n  top: ", ";\n  right: ", ";\n"])), function (_a) {
+var S_IconButtonWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: fixed;\n  right: ", ";\n  top: ", ";\n"], ["\n  position: fixed;\n  right: ", ";\n  top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {

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

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

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

@@ -0,0 +1,148 @@
+"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.Variation = exports.OverrideInfoTitleText = exports.NoButton = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-console */
+var DesktopTutorialModal_1 = __importDefault(require("./DesktopTutorialModal"));
+exports.default = {
+    title: 'desktop/panels/DesktopTutorialModal',
+    component: DesktopTutorialModal_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'DesktopTutorialModal은 어떠한 기능에 대해 사용자의 이해를 돕기 위해 단계별로 설명이 필요할 때 사용할 수 있는 모달입니다.'
+            }
+        }
+    },
+    argTypes: {
+        modalTitleText: {
+            description: '모달의 제목을 표시합니다.',
+            control: { type: 'string' }
+        },
+        infoArray: {
+            description: '모달의 정보와 관련된 요소들을 표시하는 array 형태의 값입니다.',
+            table: {
+                type: {
+                    detail: "{\n  sideTabTitleText: PDSTextType;\n  infoTitleText?: PDSTextType;\n  infoDescText?: PDSTextType;\n  imageSrc?: string;\n  btnMode?: 'none' | 'btn_amount1';\n  btn1Text?: PDSTextType;\n  onClickBtn1?: (e: React.MouseEvent<HTMLButtonElement>) => void\n }[]"
+                }
+            },
+            control: { type: 'object' }
+        },
+        onClose: {
+            description: '모달 내부 우측 상단에 위치한 X 버튼을 눌렀을 경우에 실행할 액션을 부여합니다.',
+            action: 'onClose',
+            control: { type: 'object' }
+        }
+    }
+};
+var Template = function (args) { return ((0, jsx_runtime_1.jsx)(DesktopTutorialModal_1.default, __assign({}, args), void 0)); };
+var defaultInfoArray = [
+    {
+        sideTabTitleText: 'sideTabTitleText',
+        infoDescText: 'infoDescText',
+        imageSrc: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80',
+        btnMode: 'btn_amount1',
+        btn1Text: 'btn1Text',
+        onClickBtn1: function () { return console.log('click1'); }
+    }
+];
+var noButtonInfoArray = [
+    {
+        sideTabTitleText: 'sideTabTitleText',
+        infoDescText: 'infoDescText',
+        imageSrc: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80',
+        btnMode: 'none'
+    }
+];
+var infoTitleTextInfoArray = [
+    {
+        sideTabTitleText: 'sideTabTitleText',
+        infoTitleText: 'infoTitleText',
+        infoDescText: 'infoDescText',
+        imageSrc: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80',
+        btnMode: 'btn_amount1',
+        btn1Text: 'btn1Text'
+    }
+];
+var infoArray = [
+    {
+        sideTabTitleText: '이 pApp에 대해서',
+        infoDescText: '영화,시리즈,애니메이션 등 다양한 콘텐츠로 OTT 서비스 화면을 구현합니다. 사용자는 시중의 스트리밍 서비스처럼 작품별로 콘텐츠를 선택해서 시청 가능하고 구매할 수 있습니다. 막대한 비용과 시간 걱정 없이 나만의 OTT 서비스를 구현해보세요.',
+        imageSrc: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80',
+        btnMode: 'btn_amount1',
+        btn1Text: '자세히 알아보기',
+        onClickBtn1: function () { return console.log('click1'); }
+    },
+    {
+        sideTabTitleText: '에피소드 업로드하기',
+        infoDescText: ' 에피소드는 작품을 구성하는 요소로 개별 동영상을 의미합니다. 에피소드를 작품에 추가하지 않으면 사용자에게 노출되지 않습니다. 여러 자막을 추가할 수 있어 글로벌한 사용자들이 더 다양한 언어로 에피소드를 즐길 수 있습니다.',
+        imageSrc: 'https://images.unsplash.com/photo-1586752488885-6ce47fdfd874?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1813&q=80',
+        btnMode: 'none'
+    },
+    {
+        sideTabTitleText: '작품 만들어보기',
+        infoTitleText: '나만의 작품 만들기 ',
+        infoDescText: '작품은 OTT를 구성하는 핵심 요소로 개별 에피소드를 묶어서 하나의 작품으로 제공합니다. 업로드한 에피소드를 원하는 순서대로 작품에 추가하면 사용자는 다음 에피소드를 자동으로 연속해서 시청할 수 있습니다. 작품에 라벨을 지정하면 사용자는 장르나 국가별로 나눠서 한눈에 볼 수 있습니다. 작품 정보에 감독,출연자,시놉시스 등의 정보를 입력하고 예고편 영상을 추가해서 나만의 작품을 만들어보세요.',
+        imageSrc: 'https://images.unsplash.com/photo-1467269204594-9661b134dd2b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80',
+        btnMode: 'btn_amount1',
+        btn1Text: '자세히 알아보기',
+        onClickBtn1: function () { return console.log('click3'); }
+    },
+    {
+        sideTabTitleText: '추가 수익 창출 방법',
+        infoDescText: 'OTT형 VOD pApp으로 수익을 창출하는 방법에는 두 가지가 있습니다. 첫 번째 방법은 유료이용권을 생성하여 유료 pApp으로 전환하는 것입니다. 설정한 금액을 지불한 구매자만 일정 기간동안 pApp을 이용할 수 있습니다. 두 번째는 작품이나 작품안의 일부 에피소드를 유료 콘텐츠로 판매할 수 있습니다. 사용자는 CP를 충전하여 유료 콘텐츠를 구매할 수 있습니다. 내가 만든 가치있는 작품들을 OTT 비즈니스로 활용하여 수익을 얻어보세요. ',
+        imageSrc: 'https://images.unsplash.com/photo-1520175480921-4edfa2983e0f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2067&q=80',
+        btnMode: 'none',
+        onClickBtn1: function () { return console.log('click4'); }
+    },
+    {
+        sideTabTitleText: '통계 데이터 확인하기',
+        infoDescText: '내 콘텐츠의 시청 정보를 분석하여 다양한 통계 데이터를 제공합니다. 내가 업로드한 에피소드와 작품의 누적 시청시간, 조회수를 제공해 순위를 매길 수 있어 사용자들의 선호도를 분석하거나 개선이 필요한 영역을 찾을 수 있습니다. 각종 데이터를 활용하여 콘텐츠 전략을 조정하고 더 높은 수익으로 이어질 수 있습니다.',
+        imageSrc: 'https://images.unsplash.com/photo-1509840841025-9088ba78a826?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80',
+        btnMode: 'btn_amount1',
+        btn1Text: '통계 데이터 보러가기',
+        onClickBtn1: function () { return console.log('click4'); }
+    },
+    {
+        sideTabTitleText: 'OTT형 VOD pApp 사용해보기',
+        infoDescText: '큰 비용 없이 나만의 OTT 비즈니스를 손쉽게 시작할 수 있습니다. 지금 바로 OTT형 VOD pApp을 사용해보세요.',
+        imageSrc: 'https://images.unsplash.com/photo-1633912343155-6073bc1075e9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80',
+        btnMode: 'btn_amount1',
+        btn1Text: 'pApp 사용하러 가기',
+        onClickBtn1: function () { return console.log('click4'); }
+    }
+];
+exports.Default = Template.bind({});
+exports.Default.args = {
+    modalTitleText: 'modalTitleText',
+    infoArray: defaultInfoArray
+};
+exports.NoButton = Template.bind({});
+exports.NoButton.args = {
+    modalTitleText: 'modalTitleText',
+    infoArray: noButtonInfoArray
+};
+exports.OverrideInfoTitleText = Template.bind({});
+exports.OverrideInfoTitleText.args = {
+    modalTitleText: 'modalTitleText',
+    infoArray: infoTitleTextInfoArray
+};
+exports.Variation = Template.bind({});
+exports.Variation.args = {
+    modalTitleText: 'OTT형VOD',
+    infoArray: infoArray
+};

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

@@ -1,3 +1,2 @@
-import { DesktopTutorialModalInfoType } from './DesktopTutorialModal';
+export type { DesktopTutorialModalInfoType } from './DesktopTutorialModal';
 export { default as DesktopTutorialModal } from './DesktopTutorialModal';
-export { DesktopTutorialModalInfoType };

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

@@ -1,5 +1,5 @@
-import React, { CSSProperties } from 'react';
-import { UiColors } from '../../../common';
+import type { UiColors } from '../../../common';
+import type { CSSProperties } from 'react';
 declare type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
 export declare type SectionSheetProps = {
     width: string;

package/dist/src/desktop/panels/SectionSheet/SectionSheet.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 styled_components_1 = __importStar(require("styled-components"));
 var backgroundColorTheme = {
     transparent: 'ui_cpnt_sheet_base_03',
@@ -64,7 +72,7 @@ function SectionSheet(_a) {
             onClick(e);
         }
     };
-    return (react_1.default.createElement(S_SectionSheet, { "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, children));
+    return ((0, jsx_runtime_1.jsx)(S_SectionSheet, __assign({ "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, { children: children }), void 0));
 }
 var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
     var $radius = _a.$radius;
@@ -93,27 +101,27 @@ var advancedCSS = (0, styled_components_1.css)(templateObject_6 || (templateObje
     var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
     return overrideBorderColorKey && theme[overrideBorderColorKey];
 });
-var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
-    var $width = _a.$width;
-    return $width;
-}, function (_a) {
-    var $height = _a.$height;
-    return $height;
-}, function (_a) {
+var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
     return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
+}, function (_a) {
+    var theme = _a.theme, $borderColorTheme = _a.$borderColorTheme;
+    return $borderColorTheme && theme[borderColorTheme[$borderColorTheme]];
 }, function (_a) {
     var borderMode = _a.borderMode;
     return (borderMode === 'use' ? 'solid' : 'none');
 }, function (_a) {
     var $borderWidth = _a.$borderWidth;
     return $borderWidth + "px";
-}, function (_a) {
-    var theme = _a.theme, $borderColorTheme = _a.$borderColorTheme;
-    return $borderColorTheme && theme[borderColorTheme[$borderColorTheme]];
 }, function (_a) {
     var hasOnClick = _a.hasOnClick;
     return (hasOnClick ? 'pointer' : 'default');
+}, function (_a) {
+    var $height = _a.$height;
+    return $height;
+}, function (_a) {
+    var $width = _a.$width;
+    return $width;
 }, function (_a) {
     var shapeType = _a.shapeType;
     return shapeType === 'round' && radiusStyle;

package/dist/src/desktop/panels/SectionSheet/SectionSheet.stories.d.ts

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

package/dist/src/desktop/panels/SectionSheet/SectionSheet.stories.js

@@ -0,0 +1,112 @@
+"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.UseCase1PostsSettingSection = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var hybrid_1 = require("../../../hybrid");
+var BasicFormGroup_1 = __importDefault(require("../../components/BasicFormGroup/BasicFormGroup"));
+var PageTitleTextGroup_1 = __importDefault(require("../../components/PageTitleTextGroup/PageTitleTextGroup"));
+var SectionSheet_1 = __importDefault(require("./SectionSheet"));
+exports.default = {
+    title: 'desktop/panels/SectionSheet',
+    component: SectionSheet_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'desktop환경에 최적화 된 SectionSheet 패널'
+            }
+        }
+    },
+    argTypes: {
+        width: {
+            description: '너비값을 입력합니다. (px, %, vw...)',
+            control: { type: 'text' }
+        },
+        height: {
+            description: '높이값을 입력합니다. (px, %, vh...)',
+            control: { type: 'text' }
+        },
+        backgroundColorTheme: {
+            description: '미리 부여되어 있는 색상으로 배경 컬러를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        overrideBackgroundColorKey: {
+            description: '미리 부여되어 있는 색상 외의 색상으로 배경 컬러를 결정합니다. (ui_로 정의된 컬러값)',
+            control: { type: 'select' }
+        },
+        borderMode: {
+            description: '라인의 사용여부를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        borderWidth: {
+            description: '라인의 굵기를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        borderColorTheme: {
+            description: '미리 부여되어 있는 색상으로 라인 컬러를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        overrideBorderColorKey: {
+            description: '미리 부여되어 있는 색상 외의 색상으로 라인 컬러를 결정합니다. (ui_로 정의된 컬러값)',
+            control: { type: 'select' }
+        },
+        shapeType: {
+            description: '형태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        radius: {
+            description: '모서리값을 결정합니다. (*shapeType : round 일 때만 적용됩니다.)',
+            control: { type: 'inline-radio' }
+        },
+        paddingTop: {
+            description: 'padding-top 값을 결정합니다.',
+            control: { type: 'radio' }
+        },
+        paddingRight: {
+            description: 'padding-right 값을 결정합니다.',
+            control: { type: 'radio' }
+        },
+        paddingBottom: {
+            description: 'padding-bottom 값을 결정합니다.',
+            control: { type: 'radio' }
+        },
+        paddingLeft: {
+            description: 'padding-left 값을 결정합니다.',
+            control: { type: 'radio' }
+        },
+        overrideCSS: {
+            description: '제공되어진 property와 value를 가지고 표현할 수 없는 경우를 자유롭게 기술하여 표현할 수 있습니다.'
+        },
+        children: {
+            description: 'sheet내부에 내용을 부여할 수 있습니다.'
+        },
+        onClick: {
+            description: '사용시에 마우스 포인터의 모양이 변경됩니다.',
+            action: 'onClick'
+        }
+    }
+};
+var Template = function (args) { return ((0, jsx_runtime_1.jsx)(SectionSheet_1.default, __assign({}, args, { onClick: undefined }), void 0)); };
+exports.Default = Template.bind({});
+var UseCaseTemplate = function (args) {
+    var _a = (0, react_1.useState)(false), isActive = _a[0], setIsActive = _a[1];
+    var handleToggleSwitch = function (value) {
+        setIsActive(value);
+    };
+    return ((0, jsx_runtime_1.jsxs)(SectionSheet_1.default, __assign({}, args, { onClick: undefined }, { children: [(0, jsx_runtime_1.jsx)(PageTitleTextGroup_1.default, { titleText: "\uAC8C\uC2DC\uAE00 \uBAA9\uB85D \uC124\uC815" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(BasicFormGroup_1.default, { titleText: "\uAC8C\uC2DC\uAE00 \uBAA9\uB85D \uBD84\uB9AC \uC0AC\uC6A9", descText: "\uAC8C\uC2DC\uAE00 \uBAA9\uB85D \uBD84\uB9AC\uB97C \uD65C\uC131\uD654 \uD558\uBA74 \uAD6C\uB3C5\uC790\uB4E4\uC774 \uC791\uC131\uD55C \uAC8C\uC2DC\uAE00\uACFC \uB530\uB85C \uBD84\uB9AC \uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.", inputForm: (0, jsx_runtime_1.jsx)(hybrid_1.Switch, { name: "separated", onClick: handleToggleSwitch, status: isActive ? 'on' : 'off' }, void 0) }, void 0)] }), void 0));
+};
+exports.UseCase1PostsSettingSection = UseCaseTemplate.bind({});

package/dist/src/hybrid/components/Divider/Divider.js

@@ -22,29 +22,26 @@ 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 styled_components_1 = __importStar(require("styled-components"));
 function Divider(_a) {
     var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
-    return (react_1.default.createElement(S_Divider, { "x-pds-name": "Divider", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme }));
+    return ((0, jsx_runtime_1.jsx)(S_Divider, { "x-pds-name": "Divider", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme }, void 0));
 }
-var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  background-color: ", ";\n  width: 100%;\n"], ["\n  height: ", ";\n  background-color: ", ";\n  width: 100%;\n"])), function (_a) {
-    var displayType = _a.displayType;
+var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: ", ";\n  width: 100%;\n"], ["\n  background-color: ", ";\n  height: ", ";\n  width: 100%;\n"])), function (_a) {
+    var displayType = _a.displayType, theme = _a.theme;
     return displayType &&
         {
-            line: '1px',
-            area: '16px'
+            line: theme.ui_cpnt_divider,
+            area: theme.ui_cpnt_divider_area
         }[displayType];
 }, function (_a) {
-    var displayType = _a.displayType, theme = _a.theme;
+    var displayType = _a.displayType;
     return displayType &&
         {
-            line: theme.ui_cpnt_divider,
-            area: theme.ui_cpnt_divider_area
+            line: '1px',
+            area: '16px'
         }[displayType];
 });
 var vertical = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  display: inline-block;\n  height: ", ";\n  width: 1px;\n"], ["\n  background-color: ", ";\n  display: inline-block;\n  height: ", ";\n  width: 1px;\n"])), function (_a) {

package/dist/src/hybrid/components/Divider/Divider.stories.d.ts

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