pds-dev-kit-web 2.0.9-alpha.0 → 2.0.9-alpha.2

package/dist/index.d.ts

@@ -25,6 +25,6 @@ export { M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_
 export { M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet };
 import { DynamicLayout } from './src/sub';
 export { DynamicLayout };
-import type { TypeOfSectionManifestSchema, TypeofSectionTemplate, TypeOfSectionContentMediaType, TypeOfSectionLinkType, TypeOfCarouselAutoplayMode, TypeOfCarouselInfiniteLoopMode, TypeOfBackgroundMediaType, TypeOfSectionButtonDesignType, TypeOfItemButtonDesignType, TypeOfItemManifestSchema, TypeOfItemLinkMethod, TypeOfItemLinkType, ISection, ISectionProperties, ISectionStyles, IItem, TypeOfSectionAction, TypeOfProgrammedItemActionButtonTextType, TypeOfItemToneType, IProgrammedSectionComponents, IProgrammedSectionPreviewData } from './src/sub/DynamicLayout/types';
-export { TypeOfSectionManifestSchema, TypeofSectionTemplate, TypeOfSectionContentMediaType, TypeOfSectionLinkType, TypeOfCarouselAutoplayMode, TypeOfCarouselInfiniteLoopMode, TypeOfBackgroundMediaType, TypeOfSectionButtonDesignType, TypeOfItemButtonDesignType, TypeOfItemManifestSchema, TypeOfItemLinkMethod, TypeOfItemLinkType, TypeOfSectionAction, ISection, ISectionProperties, ISectionStyles, IItem, TypeOfProgrammedItemActionButtonTextType, TypeOfItemToneType, IProgrammedSectionComponents, IProgrammedSectionPreviewData };
+import type { TypeOfSectionManifestSchema, TypeofSectionTemplate, TypeOfSectionContentMediaType, TypeOfSectionLinkType, TypeOfCarouselAutoplayMode, TypeOfCarouselInfiniteLoopMode, TypeOfBackgroundMediaType, TypeOfSectionButtonDesignType, TypeOfItemButtonDesignType, TypeOfItemManifestSchema, TypeOfItemLinkMethod, TypeOfItemLinkType, ISection, ISectionProperties, ISectionStyles, IItem, TypeOfSectionAction, TypeOfProgrammedItemActionButtonTextType, TypeOfItemToneType, IProgrammedSectionComponents } from './src/sub/DynamicLayout/types';
+export { TypeOfSectionManifestSchema, TypeofSectionTemplate, TypeOfSectionContentMediaType, TypeOfSectionLinkType, TypeOfCarouselAutoplayMode, TypeOfCarouselInfiniteLoopMode, TypeOfBackgroundMediaType, TypeOfSectionButtonDesignType, TypeOfItemButtonDesignType, TypeOfItemManifestSchema, TypeOfItemLinkMethod, TypeOfItemLinkType, TypeOfSectionAction, ISection, ISectionProperties, ISectionStyles, IItem, TypeOfProgrammedItemActionButtonTextType, TypeOfItemToneType, IProgrammedSectionComponents };
 export { AdminList, AdminListHeader, AdminListItem, BulkActionBar, ToolBar } from './src/sub';

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -292,5 +292,8 @@
     "sys_component_base_35": "darklightgreen500",
     "sys_component_base_36": "darkorange500",
     "sys_component_base_37": "darkpink300",
-    "sys_component_base_38": "darkorange300"
+    "sys_component_base_38": "darkorange300",
+    "sys_plan_base_01": "darkpastelblue300/opacity60",
+    "sys_plan_base_02": "darksoftpurple500/opacity60",
+    "sys_plan_base_03": "darkcoolpink500/opacity60"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -292,5 +292,8 @@
     "sys_component_base_35": "lightgreen500",
     "sys_component_base_36": "orange500",
     "sys_component_base_37": "pink300",
-    "sys_component_base_38": "orange300"
+    "sys_component_base_38": "orange300",
+    "sys_plan_base_01": "pastelblue300/opacity60",
+    "sys_plan_base_02": "softpurple500/opacity60",
+    "sys_plan_base_03": "coolpink500/opacity60"
 }

package/dist/src/common/styles/colorSet/SemanticColor.json

@@ -102,5 +102,11 @@
     "red30": "#FFE4E4",
     "orange300": "#FFA638",
     "darkorange300": "#F5A33E",
-    "darkpink300": "#FB718E"
+    "darkpink300": "#FB718E",
+    "pastelblue300": "#8DCFFF",
+    "darkpastelblue300": "#81BFED",
+    "softpurple500": "#A58CFF",
+    "darksoftpurple500": "#9B80FC",
+    "coolpink500": "#FF85FC",
+    "darkcoolpink500": "#EF7AEC"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -759,5 +759,10 @@
     "ui_cpnt_badge_base_new": "sys_component_base_35",
     "ui_cpnt_badge_base_sale": "sys_component_base_36",
     "ui_cpnt_badge_base_timesale": "sys_component_base_37",
-    "ui_cpnt_badge_base_best": "sys_component_base_38"
+    "ui_cpnt_badge_base_best": "sys_component_base_38",
+    "ui_cpnt_badge_base_recommended": "sys_component_base_green",
+    "ui_plan_base_01": "sys_plan_base_01",
+    "ui_plan_base_02": "sys_plan_base_02",
+    "ui_plan_base_03": "sys_plan_base_03",
+    "ui_cpnt_sheet_border_08": "sys_border_line_05"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -104,8 +104,14 @@ declare const colorSet: {
         orange300: string;
         darkorange300: string;
         darkpink300: string;
+        pastelblue300: string;
+        darkpastelblue300: string;
+        softpurple500: string;
+        darksoftpurple500: string;
+        coolpink500: string;
+        darkcoolpink500: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -400,8 +406,11 @@ declare const colorSet: {
         sys_component_base_36: string;
         sys_component_base_37: string;
         sys_component_base_38: string;
+        sys_plan_base_01: string;
+        sys_plan_base_02: string;
+        sys_plan_base_03: string;
     };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -696,6 +705,9 @@ declare const colorSet: {
         sys_component_base_36: string;
         sys_component_base_37: string;
         sys_component_base_38: string;
+        sys_plan_base_01: string;
+        sys_plan_base_02: string;
+        sys_plan_base_03: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1459,6 +1471,11 @@ declare const colorSet: {
         ui_cpnt_badge_base_sale: string;
         ui_cpnt_badge_base_timesale: string;
         ui_cpnt_badge_base_best: string;
+        ui_cpnt_badge_base_recommended: string;
+        ui_plan_base_01: string;
+        ui_plan_base_02: string;
+        ui_plan_base_03: string;
+        ui_cpnt_sheet_border_08: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
-var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
+var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -760,4 +760,9 @@ export interface UITheme {
     ui_cpnt_badge_base_sale: string;
     ui_cpnt_badge_base_timesale: string;
     ui_cpnt_badge_base_best: string;
+    ui_cpnt_badge_base_recommended: string;
+    ui_plan_base_01: string;
+    ui_plan_base_02: string;
+    ui_plan_base_03: string;
+    ui_cpnt_sheet_border_08: string;
 }

package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, programmedSectionPreviewData }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

package/dist/src/sub/DynamicLayout/DynamicLayout.js

@@ -25,7 +25,7 @@ var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, programmedSectionPreviewData = _a.programmedSectionPreviewData;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .sort(function (a, b) { return a.order - b.order; });
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
@@ -35,8 +35,7 @@ function DynamicLayout(_a) {
             isPreview: isPreview,
             navigationHandler: navigationHandler,
             sectionActionHandler: sectionActionHandler,
-            programmedSectionComponents: programmedSectionComponents,
-            programmedSectionPreviewData: programmedSectionPreviewData
+            programmedSectionComponents: programmedSectionComponents
         } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection }, void 0)), mode !== 'EDIT' &&
                 (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] }), void 0));
 }

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/GlobalFixedOverlay/GlobalFixedOverlay.js

@@ -9,15 +9,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var Section_1 = require("../../../../../DynamicLayout/components/Section");
 var dynamicLayoutContext_1 = require("../../../../../DynamicLayout/dynamicLayoutContext");
 var styled_components_1 = __importDefault(require("styled-components"));
 var MembershipSectionGlobalFixedOverlay_1 = require("./MembershipSectionGlobalFixedOverlay");
 function GlobalFixedOverlay(_a) {
     var filteredSortedSection = _a.filteredSortedSection;
-    var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, programmedSectionPreviewData = _b.programmedSectionPreviewData;
-    if (!programmedSectionPreviewData) {
+    var device = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).device;
+    var section = (0, react_1.useContext)(Section_1.sectionContext);
+    if (!section || !section.programData) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }
+    var programmedSectionPreviewData = section.programData.preview.resource.real.membershipDisplay;
     var showMembershipFixedOverlay = getShowMembershipFixedOverlay({
         filteredSortedSection: filteredSortedSection,
         programmedSectionPreviewData: programmedSectionPreviewData,
@@ -29,12 +32,10 @@ var S_GlobalFixedOverlay = styled_components_1.default.div(templateObject_1 || (
 function getShowMembershipFixedOverlay(_a) {
     var filteredSortedSection = _a.filteredSortedSection, programmedSectionPreviewData = _a.programmedSectionPreviewData, device = _a.device;
     var membershipSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'PRG_MEMBERSHIP_DISPLAY'; });
-    if (!programmedSectionPreviewData.MEMBERSHIP_DISPLAY ||
-        !membershipSection ||
-        device !== 'MOBILE') {
+    if (!programmedSectionPreviewData || !membershipSection || device !== 'MOBILE') {
         return null;
     }
-    var connectedMemberships = programmedSectionPreviewData.MEMBERSHIP_DISPLAY.connectedMemberships;
+    var connectedMemberships = programmedSectionPreviewData.connectedMemberships;
     var styles = membershipSection.styles;
     var orderedConnectedMemberships = connectedMemberships.sort(function (a, b) { return a.order - b.order; });
     var showMembershipFixedOverlay = {

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/components/GlobalFixedOverlay/MembershipSectionGlobalFixedOverlay/MembershipSectionGlobalFixedOverlay.js

@@ -57,7 +57,7 @@ function MembershipSectionGlobalFixedOverlay(_a) {
         }
         return connectedSubscriptionProducts.length > 0
             ? t('str_5339', {
-                price: connectedSubscriptionProducts[0].subscriptionProduct.fee
+                price: connectedSubscriptionProducts[0].subscriptionProduct.fee.amount
             })
             : t('str_5300');
     }, [isBottomSheetOpen, programmedItemActionButtonTextType, connectedSubscriptionProducts]);

package/dist/src/sub/DynamicLayout/mock_samplePage.d.ts

@@ -1,4 +1,4 @@
-import type { IMembershipDisplay, ISection } from './types';
+import type { ISection } from './types';
 export declare const samplePageIntroSection: ISection;
 export declare const samplePageContentsCarouselSection: ISection;
 export declare const samplePageIntroSection2: ISection;
@@ -8,5 +8,4 @@ export declare const samplePageIntroSection3: ISection;
 export declare const samplePageFooterSection: ISection;
 export declare const samplePageFullscreenIframeSection: ISection;
 export declare const samplePageMembershipSection: ISection;
-export declare const samplePageMemberships: IMembershipDisplay;
 export declare const samplePage: ISection[];

package/dist/src/sub/DynamicLayout/mock_samplePage.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.samplePage = exports.samplePageMemberships = exports.samplePageMembershipSection = exports.samplePageFullscreenIframeSection = exports.samplePageFooterSection = exports.samplePageIntroSection3 = exports.samplePageInfoBoxSection = exports.samplePageContentsSection = exports.samplePageIntroSection2 = exports.samplePageContentsCarouselSection = exports.samplePageIntroSection = void 0;
+exports.samplePage = exports.samplePageMembershipSection = exports.samplePageFullscreenIframeSection = exports.samplePageFooterSection = exports.samplePageIntroSection3 = exports.samplePageInfoBoxSection = exports.samplePageContentsSection = exports.samplePageIntroSection2 = exports.samplePageContentsCarouselSection = exports.samplePageIntroSection = void 0;
 exports.samplePageIntroSection = {
     type: 'DESIGNED',
     display: true,
@@ -1026,21 +1026,18 @@ exports.samplePageFullscreenIframeSection = {
     updatedAt: '2023-01-06T09:05:45'
 };
 exports.samplePageMembershipSection = {
+    display: true,
     type: 'PROGRAMMED',
     program: 'MEMBERSHIP_DISPLAY',
-    display: true,
-    dynamicLayoutSectionItems: null,
-    id: 15,
-    insertedAt: '2023-01-06T09:05:45',
+    dynamicLayoutSectionItems: [],
+    id: 116642,
     manifest: {
         availableProperties: [
             'title',
             'description',
             'button_alpha_label',
             'button_alpha_link_type',
-            'button_alpha_link_src',
-            'section_content_media_type',
-            'section_content_media_src'
+            'button_alpha_link_src'
         ],
         availableStyles: [
             'title_color_in_hex',
@@ -1080,125 +1077,140 @@ exports.samplePageMembershipSection = {
         carouselAutoplayTime: 3,
         carouselInfiniteLoopMode: 'NO_USE',
         description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
-        itemLinkMethod: 'CLICK_BUTTON_IN_ITEM',
         sectionContentMediaSrc: '',
         sectionContentMediaType: 'IMAGE',
         title: 'Lorem Ipsum',
-        multiPurposeUrl: 'https://app.publr.co/'
+        multiPurposeUrl: 'https://app.publr.co/',
+        itemLinkMethod: 'NONE'
     },
     styles: {
-        backgroundColorInHex: '#FF1D973B',
+        backgroundColorInHex: '#4A5D78AB',
         backgroundMediaSrc: '',
         backgroundMediaType: 'IMAGE',
         backgroundOverlayColorInHex: '#FFFFFF00',
-        buttonAlphaBackgroundColorInHex: '#FFC0CBFF',
+        buttonAlphaBackgroundColorInHex: '#313131FF',
         buttonAlphaDesignType: 'C',
         buttonAlphaLabelColorInHex: '#f5efd9FF',
-        buttonBravoBackgroundColorInHex: '#FFC0CBFF',
+        buttonBravoBackgroundColorInHex: '#313131FF',
         buttonBravoDesignType: 'E',
         buttonBravoLabelColorInHex: '#FFFFFFFF',
         buttonCharlieBackgroundColorInHex: '#465FF000',
         buttonCharlieDesignType: 'E',
         buttonCharlieLabelColorInHex: '#FFFFFFFF',
-        buttonDeltaBackgroundColorInHex: '#FFC0CBFF',
+        buttonDeltaBackgroundColorInHex: '#313131FF',
         buttonDeltaDesignType: 'A',
         buttonDeltaLabelColorInHex: '#FFFFFFFF',
-        buttonEchoBackgroundColorInHex: '#FFC0CBFF',
+        buttonEchoBackgroundColorInHex: '#313131FF',
         buttonEchoDesignType: 'A',
         buttonEchoLabelColorInHex: '#FFFFFFFF',
-        descriptionColorInHex: '#FEECD8FF',
-        itemButtonBackgroundColorInHex: '#FFC0CBFF',
+        descriptionColorInHex: '#DEECFFA6',
+        itemButtonBackgroundColorInHex: '#313131FF',
         itemButtonDesignType: 'A',
         itemButtonLabelColorInHex: '#FFFFFFFF',
         itemDescriptionColorInHex: '#68686BFF',
         itemTitleColorInHex: '#1E1E20FF',
-        itemHighlightingColorInHex: '#FF1D97FF',
+        titleColorInHex: '#DEECFFFF',
+        itemHighlightingColorInHex: '#313131FF',
         itemToneType: 'LIGHT',
-        titleColorInHex: '#F8FFACFF',
         programmedItemActionButtonTextType: 'A'
     },
-    template: 'PRG_MEMBERSHIP_DISPLAY_B',
-    updatedAt: '2023-01-06T09:05:45'
-};
-exports.samplePageMemberships = {
-    id: 1,
-    mdid: "MEMBERSHIP_DISPLAY_MD_ID",
-    title: "MEMBERSHIP_DISPLAY_MD_TITLE",
-    isDefault: true,
-    connectedMemberships: Array.from({ length: 6 }, function (_, i) {
-        var alphabet = ['A', 'B', 'C', 'D', 'E', 'F'];
-        var cardImage = [
-            'https://cdn.dev.publishingkit.net/7f3f7a31-023b-4852-9a11-cbac31d25d93',
-            'https://cdn.dev.publishingkit.net/c8973261-6c2a-4833-9b9f-20ee355647e4',
-            'https://cdn.dev.publishingkit.net/8e585c93-9591-4300-ad93-d002560cbeae',
-            'https://cdn.dev.publishingkit.net/4aaa2811-b3ff-435c-b50a-9486376ab230',
-            'https://cdn.dev.publishingkit.net/5111c33c-07ba-4b91-8eb6-9975f4cd906a',
-            'https://cdn.dev.publishingkit.net/16ac0a8a-acb1-465b-960c-6be66f2a04e8.jpg'
-        ];
-        var getOverlayType = function () {
-            if (i % 3 === 1)
-                return 'SOLID';
-            if (i % 3 === 2)
-                return 'GRADIENT';
-            return 'NONE';
-        };
-        var getDesignSchema = function () {
-            if (i % 3 === 1)
-                return 'B';
-            if (i % 3 === 2)
-                return 'C';
-            return 'A';
-        };
-        return {
-            id: i + 1,
-            order: i,
-            mdid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_MD_ID",
-            mid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_M_ID",
-            membership: {
-                id: i + 1,
-                type: 'GENERAL',
-                mid: "MEMBERSHIP_" + alphabet[i] + "_MID",
-                title: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
-                insertedAt: '2023-01-06T09:05:45',
-                updatedAt: '2023-01-06T09:05:45',
-                membershipCardTemplate: {
-                    backgroundImageSrc: cardImage[i],
-                    logoImageSrc: 'https://publ-upload-local.s3.ap-northeast-2.amazonaws.com/e11d1a92-a1c0-4faa-b341-13a32f21828d_image',
-                    overlayType: getOverlayType(),
-                    overlayColorPrimary: '#FFC0CB',
-                    overlayColorSecondary: '#313131',
-                    designSchema: getDesignSchema()
-                },
-                membershipBenefitInfo: {
-                    benefitAlpha: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
-                    benefitBravo: 'Lorem ipsum dolor sit amet. Et magnam molestiae.',
-                    benefitCharlie: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
-                    benefitDelta: 'Lorem ipsum dolor sit amet. Et magnam molestiae.',
-                    benefitEcho: 'Lorem ipsum dolor sit amet. Et magnam molestiae.'
-                },
-                totalSubscriptionProducts: 3
-            },
-            connectedSubscriptionProducts: Array.from({ length: 5 }, function (_, i) {
-                return {
-                    id: i + 1,
-                    order: i,
-                    connectedMembershipId: i + 1,
-                    subscriptionProductId: i + 1,
-                    subscriptionProduct: {
-                        id: i + 1,
-                        type: 'COUPON_ONCE_FINITE',
-                        title: '청춘이 황금시대를 우리의 같은 무엇을',
-                        alias: "CONNECTED_SUBSCRIPTION_PRODUCTS_" + alphabet[i] + "_ALIAS",
-                        expiryPeriodInDays: 7,
-                        isDeactivated: i % 2 === 0,
-                        fee: 5000,
-                        insertedAt: '2023-01-06T09:05:45',
-                        updatedAt: '2023-01-06T09:05:45'
+    template: 'PRG_MEMBERSHIP_DISPLAY_A',
+    programData: {
+        mdid: 'mdid',
+        preview: {
+            availableResources: ['REAL.MEMBERSHIP_DISPLAY'],
+            resource: {
+                mock: {},
+                real: {
+                    membershipDisplay: {
+                        id: 1,
+                        mdid: "MEMBERSHIP_DISPLAY_MD_ID",
+                        title: "MEMBERSHIP_DISPLAY_MD_TITLE",
+                        isDefault: true,
+                        connectedMemberships: Array.from({ length: 6 }, function (_, i) {
+                            var alphabet = ['A', 'B', 'C', 'D', 'E', 'F'];
+                            var cardImage = [
+                                'https://cdn.dev.publishingkit.net/7f3f7a31-023b-4852-9a11-cbac31d25d93',
+                                'https://cdn.dev.publishingkit.net/c8973261-6c2a-4833-9b9f-20ee355647e4',
+                                'https://cdn.dev.publishingkit.net/8e585c93-9591-4300-ad93-d002560cbeae',
+                                'https://cdn.dev.publishingkit.net/4aaa2811-b3ff-435c-b50a-9486376ab230',
+                                'https://cdn.dev.publishingkit.net/5111c33c-07ba-4b91-8eb6-9975f4cd906a',
+                                'https://cdn.dev.publishingkit.net/16ac0a8a-acb1-465b-960c-6be66f2a04e8.jpg'
+                            ];
+                            var getOverlayType = function () {
+                                if (i % 3 === 1)
+                                    return 'SOLID';
+                                if (i % 3 === 2)
+                                    return 'GRADIENT';
+                                return 'NONE';
+                            };
+                            var getDesignSchema = function () {
+                                if (i % 3 === 1)
+                                    return 'B';
+                                if (i % 3 === 2)
+                                    return 'C';
+                                return 'A';
+                            };
+                            return {
+                                id: i + 1,
+                                order: i,
+                                mdid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_MD_ID",
+                                mid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_M_ID",
+                                membership: {
+                                    id: i + 1,
+                                    type: 'GENERAL',
+                                    mid: "MEMBERSHIP_" + alphabet[i] + "_MID",
+                                    title: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
+                                    insertedAt: '2023-01-06T09:05:45',
+                                    updatedAt: '2023-01-06T09:05:45',
+                                    membershipCardTemplate: {
+                                        backgroundImageSrc: cardImage[i],
+                                        logoImageSrc: 'https://publ-upload-local.s3.ap-northeast-2.amazonaws.com/e11d1a92-a1c0-4faa-b341-13a32f21828d_image',
+                                        overlayType: getOverlayType(),
+                                        overlayColorPrimary: '#FFC0CB',
+                                        overlayColorSecondary: '#313131',
+                                        designSchema: getDesignSchema()
+                                    },
+                                    membershipBenefitInfo: {
+                                        benefitAlpha: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
+                                        benefitBravo: 'Lorem ipsum dolor sit amet. Et magnam molestiae.',
+                                        benefitCharlie: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
+                                        benefitDelta: 'Lorem ipsum dolor sit amet. Et magnam molestiae.',
+                                        benefitEcho: 'Lorem ipsum dolor sit amet. Et magnam molestiae.'
+                                    },
+                                    totalSubscriptionProducts: 3
+                                },
+                                connectedSubscriptionProducts: Array.from({ length: 5 }, function (_, i) {
+                                    return {
+                                        id: i + 1,
+                                        order: i,
+                                        connectedMembershipId: i + 1,
+                                        subscriptionProductId: i + 1,
+                                        subscriptionProduct: {
+                                            id: i + 1,
+                                            type: 'COUPON_ONCE_FINITE',
+                                            title: '청춘이 황금시대를 우리의 같은 무엇을',
+                                            alias: "CONNECTED_SUBSCRIPTION_PRODUCTS_" + alphabet[i] + "_ALIAS",
+                                            expiryPeriodInDays: 7,
+                                            isDeactivated: i % 2 === 0,
+                                            fee: {
+                                                currency: 'KRW',
+                                                amount: '10,000'
+                                            },
+                                            insertedAt: '2023-01-06T09:05:45',
+                                            updatedAt: '2023-01-06T09:05:45'
+                                        }
+                                    };
+                                })
+                            };
+                        })
                     }
-                };
-            })
-        };
-    })
+                }
+            }
+        }
+    },
+    insertedAt: '2023-01-30T10:24:35',
+    updatedAt: '2023-01-30T10:24:35'
 };
 exports.samplePage = [
     exports.samplePageIntroSection,

package/dist/src/sub/DynamicLayout/mock_storybook.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
 import type DynamicLayout from './DynamicLayout';
-import type { IProgrammedSectionPreviewData } from './types';
 export declare const SampleSectionsMock: React.ComponentProps<typeof DynamicLayout>['sections'];
 export declare const MembershipSectionsMock: React.ComponentProps<typeof DynamicLayout>['sections'];
-export declare const MembershipPreviewDataMock: IProgrammedSectionPreviewData;