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

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

@@ -0,0 +1,128 @@
+"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.BodyOverflowVisible = exports.BodyScrollDefault = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("../../components");
+var DesktopBasicModal_1 = __importDefault(require("./DesktopBasicModal"));
+exports.default = {
+    title: 'desktop/panels/DesktopBasicModal',
+    component: DesktopBasicModal_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'desktop환경에 최적화 된 DesktopBasicModal 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        titleText: {
+            description: '표시할 타이틀 텍스트 값입니다.',
+            control: { type: 'text' }
+        },
+        contentText: {
+            description: '본문에 사용할 상세 설명 텍스트입니다.(값을 넣지 않는 경우, 숨김처리)',
+            control: { type: 'text' }
+        },
+        bodySpacingMode: {
+            description: 'body 영역의 여백 사용 여부를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        bodyOverflowType: {
+            description: 'body 영역의 오버플로우 타입을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        btnMode: {
+            description: '버튼 사용 개수',
+            control: { type: 'inline-radio' }
+        },
+        mBtn1Text: {
+            description: '가장 우측부터 사용되는 버튼 1 텍스트',
+            control: { type: 'text' }
+        },
+        mBtn2Text: {
+            description: '가장 우측부터 사용되는 버튼 2 텍스트',
+            control: { type: 'text' }
+        },
+        mBtn3Text: {
+            description: '좌측 버튼 텍스트',
+            control: { type: 'text' }
+        },
+        mBtn1State: {
+            description: '가장 우측부터 사용되는 버튼 1 상태',
+            control: { type: 'inline-radio' }
+        },
+        mBtn2State: {
+            description: '가장 우측부터 사용되는 버튼 2 상태',
+            control: { type: 'inline-radio' }
+        },
+        mBtn3State: {
+            description: '좌측 버튼 상태',
+            control: { type: 'inline-radio' }
+        },
+        mBtn1Type: {
+            description: '가장 우측부터 사용되는 버튼1의 type을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        mBtn2Type: {
+            description: '가장 우측부터 사용되는 버튼2의 type을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        mBtn3Type: {
+            description: '좌측 버튼의 type을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        size: {
+            description: '크기를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        scrollVisibleType: {
+            description: '스크롤이 생겼을 시, 스크롤을 표시하는 방법을 결정합니다.',
+            control: { type: 'inline-radio' }
+        }
+    }
+};
+var Template = function (args) { return ((0, jsx_runtime_1.jsx)(DesktopBasicModal_1.default, __assign({}, args), void 0)); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    titleText: 'titleText',
+    contentText: 'contentText',
+    btnMode: 'mbtn_amount2',
+    mBtn1Text: 'Button1',
+    mBtn2Text: 'Button2',
+    mBtn3Text: 'Button3',
+    size: 'large'
+};
+exports.BodyScrollDefault = Template.bind({});
+exports.BodyScrollDefault.args = {
+    titleText: 'titleText',
+    contentText: 'contentTextcontentTextctentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTtentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTtentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTtentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTtentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTtentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTtentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTextcontentcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentTextcontentText',
+    btnMode: 'mbtn_amount3',
+    mBtn1Text: 'Button1',
+    mBtn2Text: 'Button2',
+    mBtn3Text: 'Button3',
+    size: 'large'
+};
+var BodyOverflowTemplate = function (args) {
+    var items = [
+        { text: '1', value: 1 },
+        { text: '2', value: 2 },
+        { text: '3', value: 3 }
+    ];
+    return ((0, jsx_runtime_1.jsx)(DesktopBasicModal_1.default, __assign({}, args, { size: "small" }, { children: (0, jsx_runtime_1.jsx)(components_1.Dropdown, { valueArray: items, responsiveMode: "use" }, void 0) }), void 0));
+};
+exports.BodyOverflowVisible = BodyOverflowTemplate.bind({});
+exports.BodyOverflowVisible.args = __assign(__assign({}, exports.Default.args), { contentText: '', bodyOverflowType: 'visible' });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 declare type DesktopHeadlessModalProps = {
     body: React.ReactNode;
     size?: 'large' | 'medium' | 'small' | 'rlarge';
@@ -6,5 +6,5 @@ declare type DesktopHeadlessModalProps = {
     scrollVisibleType?: 'hidden' | 'moving' | 'visible';
     onClose?: () => void;
 };
-declare function DesktopHeadlessModal({ body, size, dimmedClickCloseMode, scrollVisibleType, onClose }: DesktopHeadlessModalProps): React.ReactPortal;
+declare function DesktopHeadlessModal({ body, size, dimmedClickCloseMode, scrollVisibleType, onClose }: DesktopHeadlessModalProps): import("react").ReactPortal;
 export default DesktopHeadlessModal;

package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.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]; } });
@@ -26,7 +37,8 @@ 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 = __importStar(require("styled-components"));
 var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
@@ -71,10 +83,7 @@ function DesktopHeadlessModal(_a) {
             clearTimeout(isScrolling);
         };
     }, []);
-    return react_dom_1.default.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_ModalOverlay, { "x-pds-name": "DesktopHeadlessModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", onMouseDown: handleClickOutside }),
-        react_1.default.createElement(S_ModalWrapper, { size: size },
-            react_1.default.createElement(S_Body, { ref: targetRef, scrollVisibleType: scrollVisibleType }, body && body))), container);
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, { "x-pds-name": "DesktopHeadlessModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", onMouseDown: handleClickOutside }, void 0), (0, jsx_runtime_1.jsx)(S_ModalWrapper, __assign({ size: size }, { children: (0, jsx_runtime_1.jsx)(S_Body, __assign({ ref: targetRef, scrollVisibleType: scrollVisibleType }, { children: body && body }), 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;

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

@@ -0,0 +1,9 @@
+import DesktopHeadlessModal from './DesktopHeadlessModal';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof DesktopHeadlessModal>;
+export default _default;
+export declare const Default: ComponentStory<typeof DesktopHeadlessModal>;
+export declare const imageMainButtonCase: ComponentStory<typeof DesktopHeadlessModal>;
+export declare const imageFocusCase: ComponentStory<typeof DesktopHeadlessModal>;
+export declare const imageHeaderCase: ComponentStory<typeof DesktopHeadlessModal>;
+export declare const imageHeaderFixedCase: ComponentStory<typeof DesktopHeadlessModal>;

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

@@ -0,0 +1,106 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __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.imageHeaderFixedCase = exports.imageHeaderCase = exports.imageFocusCase = exports.imageMainButtonCase = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var components_1 = require("../../components");
+var DesktopHeadlessModal_1 = __importDefault(require("./DesktopHeadlessModal"));
+exports.default = {
+    title: 'desktop/panels/DesktopHeadlessModal',
+    component: DesktopHeadlessModal_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'DesktopHeadlessModal은 DesktopBasicModal과 달리 Header & Footer 가 없고, 한 모달 속에 여러가지의 목적을 달성할 수 있게 허용해주는 모달입니다.'
+            }
+        }
+    },
+    argTypes: {
+        body: {
+            description: '모달의 내용이 들어가는 영역입니다. 문장만 있는 경우도 있고, Component가 조합된 형태가 들어가기도 합니다.(길어질 경우, 스크롤이 되는 영역입니다. 스크롤이 표시 될지 말지는 prop에서 설정할 수 있습니다.',
+            control: { type: 'none' }
+        },
+        size: {
+            description: '모달의 사이즈를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        dimmedClickCloseMode: {
+            description: '모달이 닫히는 액션을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        scrollVisibleType: {
+            description: '스크롤이 생겼을 시, 스크롤을 표시하는 방법을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        onClose: {
+            action: 'onClose'
+        }
+    }
+};
+var S_ImageViewWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & > div {\n    border-radius: 24px 24px 0 0;\n  }\n"], ["\n  & > div {\n    border-radius: 24px 24px 0 0;\n  }\n"])));
+var Template = function (args) { return ((0, jsx_runtime_1.jsx)(DesktopHeadlessModal_1.default, __assign({}, args), void 0)); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    size: 'small',
+    dimmedClickCloseMode: 'use',
+    scrollVisibleType: 'visible',
+    body: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { padding: '24px' } }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uD37C\uBE14\uACFC \uD568\uAED8\uD558\uC138\uC694!", styleTheme: "headingBold", colorTheme: "sysTextPrimary" }, void 0) }), void 0) }, void 0))
+};
+exports.imageMainButtonCase = Template.bind({});
+exports.imageMainButtonCase.args = {
+    size: 'medium',
+    dimmedClickCloseMode: 'use',
+    scrollVisibleType: 'visible',
+    body: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: "https://picsum.photos/700/200", width: "responsive", scaleType: "cover", backgroundFillMode: "use", radius: 24 }, void 0) }, void 0), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { padding: '24px', display: 'flex', justifyContent: 'space-between' } }, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uD37C\uBE14\uACFC \uD568\uAED8\uD558\uC138\uC694!", styleTheme: "headingBold", colorTheme: "sysTextPrimary" }, void 0), (0, jsx_runtime_1.jsx)(components_1.MainButton, { fillType: "fill", text: "\uD68C\uC6D0\uAC00\uC785", state: "normal", size: "medium" }, void 0)] }), void 0)] }, void 0))
+};
+exports.imageFocusCase = Template.bind({});
+exports.imageFocusCase.args = {
+    size: 'medium',
+    dimmedClickCloseMode: 'use',
+    scrollVisibleType: 'visible',
+    body: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: "https://picsum.photos/700/300", width: "responsive", scaleType: "cover", backgroundFillMode: "use", radius: 24 }, void 0) }, void 0), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { padding: '24px' } }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, {}, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f" }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uD37C\uBE14\uACFC \uD568\uAED8\uD558\uC138\uC694!", styleTheme: "headingBold", colorTheme: "sysTextPrimary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uC5BC\uB9C8\uB098 \uC774\uC0C1\uC758 \uD488\uACE0 \uAE38\uC744 \uBF08 \uD53C\uB2E4. \uB0A8\uB294 \uAD11\uC57C\uC5D0\uC11C \uAD6C\uD560 \uBAB8\uC774 \uBABB\uD560 \uCCAD\uCD98\uC774 \uD53C\uB294 \uB178\uB798\uD558\uBA70 \uC18D\uC78E\uB098\uACE0, \uC788\uC73C\uB7B4? \uC18D\uC5D0\uC11C \uC608\uAC00 \uD558\uB294 \uBC18\uC9DD\uC774\uB294 \uBD88\uB7EC \uB208\uC5D0 \uB4E3\uB294\uB2E4. \uD3C9\uD654\uC2A4\uB7EC\uC6B4 \uCC9C\uD558\uB97C \uD53C\uAC00 \uC704\uD558\uC5EC\uC11C. \uACE0\uD589\uC744 \uC0AC\uB78C\uC740 \uCC2C\uBBF8\uB97C \uCDA9\uBD84\uD788 \uB0A0\uCE74\uB85C\uC6B0\uB098 \uC18D\uC5D0\uC11C \uBCF4\uB77C. \uD2B8\uACE0, \uC5C6\uC73C\uBA74 \uB354\uC6B4\uC9C0\uB77C \uAC19\uC9C0 \uD53C\uAC00 \uB418\uB294 \uC8FC\uB294 \uD480\uC774 \uC6B0\uB9AC\uC758 \uBFD0\uC774\uB2E4. \uAD00\uD604\uC545\uC774\uBA70, \uAF43\uC774 \uADF8\uB4E4\uC744 \uCE7C\uC774\uB2E4. \uC0AC\uB294\uAC00 \uC2F8\uC778 \uC0DD\uBA85\uC744 \uD53C\uC5D0 \uD669\uAE08\uC2DC\uB300\uB97C \uC0B4\uC558\uC73C\uBA70, \uBD80\uD328\uBFD0\uC774\uB2E4. \uC0AC\uB77C\uC9C0\uC9C0 \uAE38\uC744 \uC624\uC9C1 \uD558\uC5EC\uB3C4 \uC774\uAC83\uC774\uB2E4. \uBB34\uD55C\uD55C \uC124\uC0B0\uC5D0\uC11C \uD558\uC5EC\uB3C4 \uADF8\uB7EC\uBBC0\uB85C \uC704\uD558\uC5EC\uC11C. \uADF8\uB4E4\uC744 \uD53C\uAC00 \uC774\uAC83\uC744 \uD589\uBCF5\uC2A4\uB7FD\uACE0 \uAC83\uC774\uB2E4.", styleTheme: "body1Regular", colorTheme: "sysTextPrimary" }, void 0)] }), void 0)] }, void 0))
+};
+exports.imageHeaderCase = Template.bind({});
+exports.imageHeaderCase.args = {
+    size: 'large',
+    dimmedClickCloseMode: 'use',
+    scrollVisibleType: 'visible',
+    body: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: { position: 'relative' } }, { children: [(0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: "https://picsum.photos/1000/150", width: "responsive", height: "responsive", scaleType: "cover", backgroundFillMode: "use", radius: 24 }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", __assign({ style: { position: 'absolute', right: '12px', top: '12px', cursor: 'pointer' } }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_xmark", size: 24, colorKey: "ui_cpnt_icon_sys_white", fillType: "line" }, void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { padding: '24px' } }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, {}, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f" }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uD37C\uBE14\uACFC \uD568\uAED8\uD558\uC138\uC694!", styleTheme: "headingBold", colorTheme: "sysTextPrimary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uC5BC\uB9C8\uB098 \uC774\uC0C1\uC758 \uD488\uACE0 \uAE38\uC744 \uBF08 \uD53C\uB2E4. \uB0A8\uB294 \uAD11\uC57C\uC5D0\uC11C \uAD6C\uD560 \uBAB8\uC774 \uBABB\uD560 \uCCAD\uCD98\uC774 \uD53C\uB294 \uB178\uB798\uD558\uBA70 \uC18D\uC78E\uB098\uACE0, \uC788\uC73C\uB7B4? \uC18D\uC5D0\uC11C \uC608\uAC00 \uD558\uB294 \uBC18\uC9DD\uC774\uB294 \uBD88\uB7EC \uB208\uC5D0 \uB4E3\uB294\uB2E4. \uD3C9\uD654\uC2A4\uB7EC\uC6B4 \uCC9C\uD558\uB97C \uD53C\uAC00 \uC704\uD558\uC5EC\uC11C. \uACE0\uD589\uC744 \uC0AC\uB78C\uC740 \uCC2C\uBBF8\uB97C \uCDA9\uBD84\uD788 \uB0A0\uCE74\uB85C\uC6B0\uB098 \uC18D\uC5D0\uC11C \uBCF4\uB77C. \uD2B8\uACE0, \uC5C6\uC73C\uBA74 \uB354\uC6B4\uC9C0\uB77C \uAC19\uC9C0 \uD53C\uAC00 \uB418\uB294 \uC8FC\uB294 \uD480\uC774 \uC6B0\uB9AC\uC758 \uBFD0\uC774\uB2E4. \uAD00\uD604\uC545\uC774\uBA70, \uAF43\uC774 \uADF8\uB4E4\uC744 \uCE7C\uC774\uB2E4. \uC0AC\uB294\uAC00 \uC2F8\uC778 \uC0DD\uBA85\uC744 \uD53C\uC5D0 \uD669\uAE08\uC2DC\uB300\uB97C \uC0B4\uC558\uC73C\uBA70, \uBD80\uD328\uBFD0\uC774\uB2E4. \uC0AC\uB77C\uC9C0\uC9C0 \uAE38\uC744 \uC624\uC9C1 \uD558\uC5EC\uB3C4 \uC774\uAC83\uC774\uB2E4. \uBB34\uD55C\uD55C \uC124\uC0B0\uC5D0\uC11C \uD558\uC5EC\uB3C4 \uADF8\uB7EC\uBBC0\uB85C \uC704\uD558\uC5EC\uC11C. \uADF8\uB4E4\uC744 \uD53C\uAC00 \uC774\uAC83\uC744 \uD589\uBCF5\uC2A4\uB7FD\uACE0 \uAC83\uC774\uB2E4.", styleTheme: "body1Regular", colorTheme: "sysTextPrimary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, {}, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f" }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uD37C\uBE14\uACFC \uD568\uAED8\uD558\uC138\uC694!", styleTheme: "headingBold", colorTheme: "sysTextPrimary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uC5BC\uB9C8\uB098 \uC774\uC0C1\uC758 \uD488\uACE0 \uAE38\uC744 \uBF08 \uD53C\uB2E4. \uB0A8\uB294 \uAD11\uC57C\uC5D0\uC11C \uAD6C\uD560 \uBAB8\uC774 \uBABB\uD560 \uCCAD\uCD98\uC774 \uD53C\uB294 \uB178\uB798\uD558\uBA70 \uC18D\uC78E\uB098\uACE0, \uC788\uC73C\uB7B4? \uC18D\uC5D0\uC11C \uC608\uAC00 \uD558\uB294 \uBC18\uC9DD\uC774\uB294 \uBD88\uB7EC \uB208\uC5D0 \uB4E3\uB294\uB2E4. \uD3C9\uD654\uC2A4\uB7EC\uC6B4 \uCC9C\uD558\uB97C \uD53C\uAC00 \uC704\uD558\uC5EC\uC11C. \uACE0\uD589\uC744 \uC0AC\uB78C\uC740 \uCC2C\uBBF8\uB97C \uCDA9\uBD84\uD788 \uB0A0\uCE74\uB85C\uC6B0\uB098 \uC18D\uC5D0\uC11C \uBCF4\uB77C. \uD2B8\uACE0, \uC5C6\uC73C\uBA74 \uB354\uC6B4\uC9C0\uB77C \uAC19\uC9C0 \uD53C\uAC00 \uB418\uB294 \uC8FC\uB294 \uD480\uC774 \uC6B0\uB9AC\uC758 \uBFD0\uC774\uB2E4. \uAD00\uD604\uC545\uC774\uBA70, \uAF43\uC774 \uADF8\uB4E4\uC744 \uCE7C\uC774\uB2E4. \uC0AC\uB294\uAC00 \uC2F8\uC778 \uC0DD\uBA85\uC744 \uD53C\uC5D0 \uD669\uAE08\uC2DC\uB300\uB97C \uC0B4\uC558\uC73C\uBA70, \uBD80\uD328\uBFD0\uC774\uB2E4. \uC0AC\uB77C\uC9C0\uC9C0 \uAE38\uC744 \uC624\uC9C1 \uD558\uC5EC\uB3C4 \uC774\uAC83\uC774\uB2E4. \uBB34\uD55C\uD55C \uC124\uC0B0\uC5D0\uC11C \uD558\uC5EC\uB3C4 \uADF8\uB7EC\uBBC0\uB85C \uC704\uD558\uC5EC\uC11C. \uADF8\uB4E4\uC744 \uD53C\uAC00 \uC774\uAC83\uC744 \uD589\uBCF5\uC2A4\uB7FD\uACE0 \uAC83\uC774\uB2E4.", styleTheme: "body1Regular", colorTheme: "sysTextPrimary" }, void 0)] }), void 0)] }, void 0))
+};
+exports.imageHeaderFixedCase = Template.bind({});
+exports.imageHeaderFixedCase.args = {
+    size: 'rlarge',
+    dimmedClickCloseMode: 'use',
+    scrollVisibleType: 'visible',
+    body: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: {
+                    position: 'fixed',
+                    top: '-1px',
+                    height: '120px',
+                    width: '100%',
+                    overflow: 'hidden'
+                } }, { children: [(0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: "https://picsum.photos/1200/150", width: "responsive", height: "responsive", scaleType: "cover", backgroundFillMode: "use", radius: 24 }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", __assign({ style: { position: 'absolute', right: '12px', top: '12px', cursor: 'pointer' } }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_xmark", size: 24, colorKey: "ui_cpnt_icon_sys_white", fillType: "line" }, void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'relative',
+                    top: '-1px',
+                    height: '120px'
+                } }, void 0), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { padding: '24px' } }, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uD37C\uBE14\uACFC \uD568\uAED8\uD558\uC138\uC694!", styleTheme: "headingBold", colorTheme: "sysTextPrimary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uC5BC\uB9C8\uB098 \uC774\uC0C1\uC758 \uD488\uACE0 \uAE38\uC744 \uBF08 \uD53C\uB2E4. \uB0A8\uB294 \uAD11\uC57C\uC5D0\uC11C \uAD6C\uD560 \uBAB8\uC774 \uBABB\uD560 \uCCAD\uCD98\uC774 \uD53C\uB294 \uB178\uB798\uD558\uBA70 \uC18D\uC78E\uB098\uACE0, \uC788\uC73C\uB7B4? \uC18D\uC5D0\uC11C \uC608\uAC00 \uD558\uB294 \uBC18\uC9DD\uC774\uB294 \uBD88\uB7EC \uB208\uC5D0 \uB4E3\uB294\uB2E4. \uD3C9\uD654\uC2A4\uB7EC\uC6B4 \uCC9C\uD558\uB97C \uD53C\uAC00 \uC704\uD558\uC5EC\uC11C. \uACE0\uD589\uC744 \uC0AC\uB78C\uC740 \uCC2C\uBBF8\uB97C \uCDA9\uBD84\uD788 \uB0A0\uCE74\uB85C\uC6B0\uB098 \uC18D\uC5D0\uC11C \uBCF4\uB77C. \uD2B8\uACE0, \uC5C6\uC73C\uBA74 \uB354\uC6B4\uC9C0\uB77C \uAC19\uC9C0 \uD53C\uAC00 \uB418\uB294 \uC8FC\uB294 \uD480\uC774 \uC6B0\uB9AC\uC758 \uBFD0\uC774\uB2E4. \uAD00\uD604\uC545\uC774\uBA70, \uAF43\uC774 \uADF8\uB4E4\uC744 \uCE7C\uC774\uB2E4. \uC0AC\uB294\uAC00 \uC2F8\uC778 \uC0DD\uBA85\uC744 \uD53C\uC5D0 \uD669\uAE08\uC2DC\uB300\uB97C \uC0B4\uC558\uC73C\uBA70, \uBD80\uD328\uBFD0\uC774\uB2E4. \uC0AC\uB77C\uC9C0\uC9C0 \uAE38\uC744 \uC624\uC9C1 \uD558\uC5EC\uB3C4 \uC774\uAC83\uC774\uB2E4. \uBB34\uD55C\uD55C \uC124\uC0B0\uC5D0\uC11C \uD558\uC5EC\uB3C4 \uADF8\uB7EC\uBBC0\uB85C \uC704\uD558\uC5EC\uC11C. \uADF8\uB4E4\uC744 \uD53C\uAC00 \uC774\uAC83\uC744 \uD589\uBCF5\uC2A4\uB7FD\uACE0 \uAC83\uC774\uB2E4.", styleTheme: "body1Regular", colorTheme: "sysTextPrimary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, {}, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f" }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uD37C\uBE14\uACFC \uD568\uAED8\uD558\uC138\uC694!", styleTheme: "headingBold", colorTheme: "sysTextPrimary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uC5BC\uB9C8\uB098 \uC774\uC0C1\uC758 \uD488\uACE0 \uAE38\uC744 \uBF08 \uD53C\uB2E4. \uB0A8\uB294 \uAD11\uC57C\uC5D0\uC11C \uAD6C\uD560 \uBAB8\uC774 \uBABB\uD560 \uCCAD\uCD98\uC774 \uD53C\uB294 \uB178\uB798\uD558\uBA70 \uC18D\uC78E\uB098\uACE0, \uC788\uC73C\uB7B4? \uC18D\uC5D0\uC11C \uC608\uAC00 \uD558\uB294 \uBC18\uC9DD\uC774\uB294 \uBD88\uB7EC \uB208\uC5D0 \uB4E3\uB294\uB2E4. \uD3C9\uD654\uC2A4\uB7EC\uC6B4 \uCC9C\uD558\uB97C \uD53C\uAC00 \uC704\uD558\uC5EC\uC11C. \uACE0\uD589\uC744 \uC0AC\uB78C\uC740 \uCC2C\uBBF8\uB97C \uCDA9\uBD84\uD788 \uB0A0\uCE74\uB85C\uC6B0\uB098 \uC18D\uC5D0\uC11C \uBCF4\uB77C. \uD2B8\uACE0, \uC5C6\uC73C\uBA74 \uB354\uC6B4\uC9C0\uB77C \uAC19\uC9C0 \uD53C\uAC00 \uB418\uB294 \uC8FC\uB294 \uD480\uC774 \uC6B0\uB9AC\uC758 \uBFD0\uC774\uB2E4. \uAD00\uD604\uC545\uC774\uBA70, \uAF43\uC774 \uADF8\uB4E4\uC744 \uCE7C\uC774\uB2E4. \uC0AC\uB294\uAC00 \uC2F8\uC778 \uC0DD\uBA85\uC744 \uD53C\uC5D0 \uD669\uAE08\uC2DC\uB300\uB97C \uC0B4\uC558\uC73C\uBA70, \uBD80\uD328\uBFD0\uC774\uB2E4. \uC0AC\uB77C\uC9C0\uC9C0 \uAE38\uC744 \uC624\uC9C1 \uD558\uC5EC\uB3C4 \uC774\uAC83\uC774\uB2E4. \uBB34\uD55C\uD55C \uC124\uC0B0\uC5D0\uC11C \uD558\uC5EC\uB3C4 \uADF8\uB7EC\uBBC0\uB85C \uC704\uD558\uC5EC\uC11C. \uADF8\uB4E4\uC744 \uD53C\uAC00 \uC774\uAC83\uC744 \uD589\uBCF5\uC2A4\uB7FD\uACE0 \uAC83\uC774\uB2E4.", styleTheme: "body1Regular", colorTheme: "sysTextPrimary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, {}, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_f" }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uD37C\uBE14\uACFC \uD568\uAED8\uD558\uC138\uC694!", styleTheme: "headingBold", colorTheme: "sysTextPrimary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uC5BC\uB9C8\uB098 \uC774\uC0C1\uC758 \uD488\uACE0 \uAE38\uC744 \uBF08 \uD53C\uB2E4. \uB0A8\uB294 \uAD11\uC57C\uC5D0\uC11C \uAD6C\uD560 \uBAB8\uC774 \uBABB\uD560 \uCCAD\uCD98\uC774 \uD53C\uB294 \uB178\uB798\uD558\uBA70 \uC18D\uC78E\uB098\uACE0, \uC788\uC73C\uB7B4? \uC18D\uC5D0\uC11C \uC608\uAC00 \uD558\uB294 \uBC18\uC9DD\uC774\uB294 \uBD88\uB7EC \uB208\uC5D0 \uB4E3\uB294\uB2E4. \uD3C9\uD654\uC2A4\uB7EC\uC6B4 \uCC9C\uD558\uB97C \uD53C\uAC00 \uC704\uD558\uC5EC\uC11C. \uACE0\uD589\uC744 \uC0AC\uB78C\uC740 \uCC2C\uBBF8\uB97C \uCDA9\uBD84\uD788 \uB0A0\uCE74\uB85C\uC6B0\uB098 \uC18D\uC5D0\uC11C \uBCF4\uB77C. \uD2B8\uACE0, \uC5C6\uC73C\uBA74 \uB354\uC6B4\uC9C0\uB77C \uAC19\uC9C0 \uD53C\uAC00 \uB418\uB294 \uC8FC\uB294 \uD480\uC774 \uC6B0\uB9AC\uC758 \uBFD0\uC774\uB2E4. \uAD00\uD604\uC545\uC774\uBA70, \uAF43\uC774 \uADF8\uB4E4\uC744 \uCE7C\uC774\uB2E4. \uC0AC\uB294\uAC00 \uC2F8\uC778 \uC0DD\uBA85\uC744 \uD53C\uC5D0 \uD669\uAE08\uC2DC\uB300\uB97C \uC0B4\uC558\uC73C\uBA70, \uBD80\uD328\uBFD0\uC774\uB2E4. \uC0AC\uB77C\uC9C0\uC9C0 \uAE38\uC744 \uC624\uC9C1 \uD558\uC5EC\uB3C4 \uC774\uAC83\uC774\uB2E4. \uBB34\uD55C\uD55C \uC124\uC0B0\uC5D0\uC11C \uD558\uC5EC\uB3C4 \uADF8\uB7EC\uBBC0\uB85C \uC704\uD558\uC5EC\uC11C. \uADF8\uB4E4\uC744 \uD53C\uAC00 \uC774\uAC83\uC744 \uD589\uBCF5\uC2A4\uB7FD\uACE0 \uAC83\uC774\uB2E4.", styleTheme: "body1Regular", colorTheme: "sysTextPrimary" }, void 0)] }), void 0)] }, void 0))
+};
+var templateObject_1;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PDSTabItemOption } from '../../../../../common/types';
+import type { PDSTabItemOption } from '../../../../../common/types';
 export declare type ItemType = PDSTabItemOption;
 declare type SideTabProps = {
     itemArray: ItemType[];

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

@@ -3,11 +3,22 @@ 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 __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 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../components");
 function SideTab(_a) {
@@ -17,12 +28,11 @@ function SideTab(_a) {
             item.onClick(e);
         }
     };
-    return (react_1.default.createElement("div", null, itemArray.map(function (item, index) {
-        return (react_1.default.createElement(S_TabWrapper, { key: index, onClick: function (e) { return handleClickTabItem(item, e); } },
-            react_1.default.createElement(components_1.TextLabel, { text: item.title, styleTheme: item.isActive ? 'subTitleBold' : 'subTitleRegular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary' })));
-    })));
+    return ((0, jsx_runtime_1.jsx)("div", { children: itemArray.map(function (item, index) {
+            return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ onClick: function (e) { return handleClickTabItem(item, e); } }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: item.title, styleTheme: item.isActive ? 'subTitleBold' : 'subTitleRegular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary' }, void 0) }), index));
+        }) }, void 0));
 }
-var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  background-color: ", ";\n  cursor: pointer;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  background-color: ", ";\n  cursor: pointer;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), function (_a) {
+var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  & div {\n    line-height: 1.3;\n  }\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  & div {\n    line-height: 1.3;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tutorialmodal_sidetab_default;
 }, function (_a) {
@@ -33,10 +43,10 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (template
     return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingB;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingB;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tutorialmodal_sidetab_hover;

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

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

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

@@ -0,0 +1,74 @@
+"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 SideTab_1 = __importDefault(require("./SideTab"));
+exports.default = {
+    title: 'test/desktop/panels/DesktopTutorialModal/SideTab',
+    component: SideTab_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'DesktopTutorialModal에서 쓰이는 SideTab 컴포넌트'
+            }
+        },
+        controls: { hideNoControlsWarning: true }
+    },
+    argTypes: {
+        itemArray: {
+            description: 'tab item의 title, isActive, onClick 값 리스트 입니다.',
+            table: {
+                type: {
+                    detail: '{\n  title: PDSTextType,\n  isActive: Boolean,\n  onClick?: (e) => void\n }[]'
+                }
+            },
+            control: null
+        }
+    }
+};
+var Default = function (args) {
+    var _a = (0, react_1.useState)('전체 보기'), selectedItem = _a[0], setSelectedItem = _a[1];
+    return ((0, jsx_runtime_1.jsx)(SideTab_1.default, __assign({}, args, { itemArray: [
+            {
+                title: '이 pApp에 대하여',
+                isActive: selectedItem === '이 pApp에 대하여',
+                onClick: function () { return setSelectedItem('이 pApp에 대하여'); }
+            },
+            {
+                title: '게시글이란',
+                isActive: selectedItem === '게시글이란',
+                onClick: function () { return setSelectedItem('게시글이란'); }
+            },
+            {
+                title: '라벨이란',
+                isActive: selectedItem === '라벨이란',
+                onClick: function () { return setSelectedItem('라벨이란'); }
+            },
+            {
+                title: '수익 창출 하는 방법',
+                isActive: selectedItem === '수익 창출 하는 방법',
+                onClick: function () { return setSelectedItem('수익 창출 하는 방법'); }
+            },
+            {
+                title: '알림 설정 하는 방법',
+                isActive: selectedItem === '알림 설정 하는 방법',
+                onClick: function () { return setSelectedItem('알림 설정 하는 방법'); }
+            }
+        ] }), void 0));
+};
+exports.Default = Default;

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { PDSTextType } from '../../../common';
+/// <reference types="react" />
+import type { PDSTextType } from '../../../common';
 export declare type DesktopTutorialModalInfoType = {
     sideTabTitleText: PDSTextType;
     infoTitleText?: PDSTextType;
@@ -14,5 +14,5 @@ declare type DesktopTutorialModalProps = {
     infoArray: DesktopTutorialModalInfoType[];
     onClose: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function DesktopTutorialModal({ modalTitleText, infoArray, onClose }: DesktopTutorialModalProps): React.ReactPortal;
+declare function DesktopTutorialModal({ modalTitleText, infoArray, onClose }: DesktopTutorialModalProps): import("react").ReactPortal;
 export default DesktopTutorialModal;