pds-dev-kit-web-test 0.0.19 → 0.0.20

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

@@ -224,5 +224,8 @@
     "sys_cpnt_sheet_base_04": "darkblue500",
     "sys_cpnt_sheet_base_05": "grey950",
     "sys_cpnt_sheet_base_06": "darkgreen500",
-    "sys_facebook": "facebookblue"
+    "sys_facebook": "facebookblue",
+    "sys_component_base_19": "white/opacity65",
+    "sys_cpnt_pagination_dot_01": "white",
+    "sys_cpnt_pagination_dot_02": "white/opacity50"
 }

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

@@ -224,5 +224,8 @@
     "sys_cpnt_sheet_base_04": "blue500",
     "sys_cpnt_sheet_base_05": "grey950",
     "sys_cpnt_sheet_base_06": "green500",
-    "sys_facebook": "facebookblue"
+    "sys_facebook": "facebookblue",
+    "sys_component_base_19": "white/opacity65",
+    "sys_cpnt_pagination_dot_01": "grey400",
+    "sys_cpnt_pagination_dot_02": "white/opacity50"
 }

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

@@ -634,12 +634,17 @@
     "ui_cpnt_sheet_base_06": "sys_cpnt_sheet_base_04",
     "ui_cpnt_sheet_base_07": "sys_cpnt_sheet_base_05",
     "ui_cpnt_sheet_base_08": "sys_cpnt_sheet_base_06",
-    "ui_cpnt_pagination_dot_01": "sys_widget_white",
-    "ui_cpnt_pagination_dot_02": "sys_cpnt_base_white_opacity50",
-    "ui_cpnt_pagination_dot_border": "sys_border_line_01",
+    "ui_cpnt_pagination_dot_01": "sys_cpnt_pagination_dot_01",
+    "ui_cpnt_pagination_dot_02": "sys_cpnt_pagination_dot_02",
+    "ui_cpnt_pagination_dot_border": "sys_border_line_02",
     "ui_63": "sys_facebook",
     "ui_64": "sys_text_white",
     "ui_cpnt_sheet_border_04": "sys_border_line_02",
     "ui_cpnt_button_fill_base_01": "sys_component_base_05",
-    "ui_cpnt_button_fill_base_hangup": "sys_component_base_red"
+    "ui_cpnt_button_fill_base_hangup": "sys_component_base_red",
+    "ui_cpnt_refund_text_status_issued": "sys_widget_orange_01",
+    "ui_cpnt_refund_text_status_refunded": "sys_widget_success_01",
+    "ui_cpnt_divider_white_01": "sys_component_base_19",
+    "ui_cpnt_timer_base_01": "sys_background_dimmed",
+    "ui_cpnt_timer_base_timeup": "sys_component_base_17"
 }

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

@@ -306,6 +306,9 @@ declare const colorSet: {
         sys_cpnt_sheet_base_05: string;
         sys_cpnt_sheet_base_06: string;
         sys_facebook: string;
+        sys_component_base_19: string;
+        sys_cpnt_pagination_dot_01: string;
+        sys_cpnt_pagination_dot_02: string;
     };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
@@ -534,6 +537,9 @@ declare const colorSet: {
         sys_cpnt_sheet_base_05: string;
         sys_cpnt_sheet_base_06: string;
         sys_facebook: string;
+        sys_component_base_19: string;
+        sys_cpnt_pagination_dot_01: string;
+        sys_cpnt_pagination_dot_02: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1179,6 +1185,11 @@ declare const colorSet: {
         ui_cpnt_sheet_border_04: string;
         ui_cpnt_button_fill_base_01: string;
         ui_cpnt_button_fill_base_hangup: string;
+        ui_cpnt_refund_text_status_issued: string;
+        ui_cpnt_refund_text_status_refunded: string;
+        ui_cpnt_divider_white_01: string;
+        ui_cpnt_timer_base_01: string;
+        ui_cpnt_timer_base_timeup: string;
     };
 };
 export default colorSet;

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

@@ -642,4 +642,9 @@ export interface UITheme {
     ui_cpnt_sheet_border_04: string;
     ui_cpnt_button_fill_base_01: string;
     ui_cpnt_button_fill_base_hangup: string;
+    ui_cpnt_refund_text_status_issued: string;
+    ui_cpnt_refund_text_status_refunded: string;
+    ui_cpnt_divider_white_01: string;
+    ui_cpnt_timer_base_01: string;
+    ui_cpnt_timer_base_timeup: string;
 }

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

@@ -1,4 +1,13 @@
 "use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,9 +18,11 @@ var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 var mobile_1 = require("./mobile");
 function DynamicLayout(_a) {
     var device = _a.device, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler;
+    var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
+        .sort(function (a, b) { return a.order - b.order; });
     return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { isPreview: isPreview, navigationHandler: navigationHandler } }, {
-        MOBILE: react_1.default.createElement(mobile_1.MobileWeb, { sections: sections }),
-        DESKTOP: react_1.default.createElement(desktop_1.DesktopWeb, { sections: sections })
+        MOBILE: react_1.default.createElement(mobile_1.MobileWeb, { sections: filteredSortedSection }),
+        DESKTOP: react_1.default.createElement(desktop_1.DesktopWeb, { sections: filteredSortedSection })
     }[device]));
 }
 exports.default = DynamicLayout;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/PaletteColor_Dark.json

@@ -224,5 +224,8 @@
     "sys_cpnt_sheet_base_04": "darkblue500",
     "sys_cpnt_sheet_base_05": "grey950",
     "sys_cpnt_sheet_base_06": "darkgreen500",
-    "sys_facebook": "facebookblue"
+    "sys_facebook": "facebookblue",
+    "sys_component_base_19": "white/opacity65",
+    "sys_cpnt_pagination_dot_01": "white",
+    "sys_cpnt_pagination_dot_02": "white/opacity50"
 }

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/PaletteColor_light.json

@@ -224,5 +224,8 @@
     "sys_cpnt_sheet_base_04": "blue500",
     "sys_cpnt_sheet_base_05": "grey950",
     "sys_cpnt_sheet_base_06": "green500",
-    "sys_facebook": "facebookblue"
+    "sys_facebook": "facebookblue",
+    "sys_component_base_19": "white/opacity65",
+    "sys_cpnt_pagination_dot_01": "grey400",
+    "sys_cpnt_pagination_dot_02": "white/opacity50"
 }

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/UIColor.json

@@ -634,10 +634,17 @@
     "ui_cpnt_sheet_base_06": "sys_cpnt_sheet_base_04",
     "ui_cpnt_sheet_base_07": "sys_cpnt_sheet_base_05",
     "ui_cpnt_sheet_base_08": "sys_cpnt_sheet_base_06",
-    "ui_cpnt_pagination_dot_01": "sys_widget_white",
-    "ui_cpnt_pagination_dot_02": "sys_cpnt_base_white_opacity50",
-    "ui_cpnt_pagination_dot_border": "sys_border_line_01",
+    "ui_cpnt_pagination_dot_01": "sys_cpnt_pagination_dot_01",
+    "ui_cpnt_pagination_dot_02": "sys_cpnt_pagination_dot_02",
+    "ui_cpnt_pagination_dot_border": "sys_border_line_02",
     "ui_63": "sys_facebook",
     "ui_64": "sys_text_white",
-    "ui_cpnt_sheet_border_04": "sys_border_line_02"
+    "ui_cpnt_sheet_border_04": "sys_border_line_02",
+    "ui_cpnt_button_fill_base_01": "sys_component_base_05",
+    "ui_cpnt_button_fill_base_hangup": "sys_component_base_red",
+    "ui_cpnt_refund_text_status_issued": "sys_widget_orange_01",
+    "ui_cpnt_refund_text_status_refunded": "sys_widget_success_01",
+    "ui_cpnt_divider_white_01": "sys_component_base_19",
+    "ui_cpnt_timer_base_01": "sys_background_dimmed",
+    "ui_cpnt_timer_base_timeup": "sys_component_base_17"
 }

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/index.d.ts

@@ -1,4 +1,84 @@
 declare const colorSet: {
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
+        opacity50: string;
+        grey30: string;
+        opacity95: string;
+        darkgrey30: string;
+        opacity40: string;
+        kakaoyellow: string;
+        pastelblue500: string;
+        pastelpink500: string;
+        pastelorange500: string;
+        pastelgreen500: string;
+        pastelpurple500: string;
+        darkpastelblue500: string;
+        darkpastelpink500: string;
+        darkpastelorange500: string;
+        darkpastelgreen500: string;
+        darkpastelpurple500: string;
+        green30: string;
+        darkgreen30: string;
+        orange50: string;
+        darkorange50: string;
+        orange30: string;
+        darkorange30: string;
+        green50: string;
+        darkgreen50: string;
+        opacity90: string;
+        facebookblue: string;
+    };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -226,6 +306,9 @@ declare const colorSet: {
         sys_cpnt_sheet_base_05: string;
         sys_cpnt_sheet_base_06: string;
         sys_facebook: string;
+        sys_component_base_19: string;
+        sys_cpnt_pagination_dot_01: string;
+        sys_cpnt_pagination_dot_02: string;
     };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
@@ -454,86 +537,9 @@ declare const colorSet: {
         sys_cpnt_sheet_base_05: string;
         sys_cpnt_sheet_base_06: string;
         sys_facebook: string;
-    };
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
-        opacity50: string;
-        grey30: string;
-        opacity95: string;
-        darkgrey30: string;
-        opacity40: string;
-        kakaoyellow: string;
-        pastelblue500: string;
-        pastelpink500: string;
-        pastelorange500: string;
-        pastelgreen500: string;
-        pastelpurple500: string;
-        darkpastelblue500: string;
-        darkpastelpink500: string;
-        darkpastelorange500: string;
-        darkpastelgreen500: string;
-        darkpastelpurple500: string;
-        green30: string;
-        darkgreen30: string;
-        orange50: string;
-        darkorange50: string;
-        orange30: string;
-        darkorange30: string;
-        green50: string;
-        darkgreen50: string;
-        opacity90: string;
-        facebookblue: string;
+        sys_component_base_19: string;
+        sys_cpnt_pagination_dot_01: string;
+        sys_cpnt_pagination_dot_02: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1177,6 +1183,13 @@ declare const colorSet: {
         ui_63: string;
         ui_64: string;
         ui_cpnt_sheet_border_04: string;
+        ui_cpnt_button_fill_base_01: string;
+        ui_cpnt_button_fill_base_hangup: string;
+        ui_cpnt_refund_text_status_issued: string;
+        ui_cpnt_refund_text_status_refunded: string;
+        ui_cpnt_divider_white_01: string;
+        ui_cpnt_timer_base_01: string;
+        ui_cpnt_timer_base_timeup: string;
     };
 };
 export default colorSet;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/index.js

@@ -4,14 +4,14 @@ 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 SemanticColor_json_1 = __importDefault(require("./SemanticColor.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,
-    SemanticColor: SemanticColor_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/ui-type.d.ts

@@ -640,4 +640,11 @@ export interface UITheme {
     ui_63: string;
     ui_64: string;
     ui_cpnt_sheet_border_04: string;
+    ui_cpnt_button_fill_base_01: string;
+    ui_cpnt_button_fill_base_hangup: string;
+    ui_cpnt_refund_text_status_issued: string;
+    ui_cpnt_refund_text_status_refunded: string;
+    ui_cpnt_divider_white_01: string;
+    ui_cpnt_timer_base_01: string;
+    ui_cpnt_timer_base_timeup: string;
 }

package/dist/src/sub/DynamicLayout/desktop/components/common/YouTubeIframe.js

@@ -61,7 +61,11 @@ function YouTubeIframe(_a) {
                 playerVars: {
                     playsinline: 1,
                     autoplay: 1,
-                    controls: 0
+                    controls: 0,
+                    iv_load_policy: 3,
+                    listType: 'playlist',
+                    playlist: TouTubeLinkParser_1.default.getId(src),
+                    loop: 1
                 },
                 events: {
                     onReady: onPlayerReady,

package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js

@@ -57,15 +57,16 @@ function TemplateA() {
                     !!item.properties.linkSrc);
         })
         : [];
-    return (react_1.default.createElement(S_Wrapper, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
+    var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
+    return (react_1.default.createElement(S_Wrapper, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 },
         react_1.default.createElement(S_ContentsArea, null,
             title && (react_1.default.createElement(S_SectionTitleBox, null,
                 react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" }))),
             description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-                react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
+                react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }))),
             buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
                 react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
-            filteredItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
+            filteredSortedItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
                 react_1.default.createElement(components_1.Carousel, { spaceBetween: 24, slidesPerView: 3, slidesPerGroup: 1, breakpoints: {
                         1301: {
                             slidesPerView: 4
@@ -77,7 +78,7 @@ function TemplateA() {
                         ? 'autoplay'
                         : carouselInfiniteLoopMode === 'USE'
                             ? 'loop'
-                            : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-24px" }, filteredItems.map(function (item) {
+                            : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-24px" }, filteredSortedItems.map(function (item) {
                     var id = item.id;
                     var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkMethod = _a.linkMethod, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
                     return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),

package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js

@@ -57,7 +57,8 @@ function TemplateB() {
                     !!item.properties.linkSrc);
         })
         : [];
-    return (react_1.default.createElement(S_Wrapper, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
+    var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
+    return (react_1.default.createElement(S_Wrapper, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 },
         react_1.default.createElement(S_ContentsArea, null,
             title && (react_1.default.createElement(S_SectionTitleBox, null,
                 react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" }))),
@@ -65,7 +66,7 @@ function TemplateB() {
                 react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }))),
             buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
                 react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
-            filteredItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
+            filteredSortedItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
                 react_1.default.createElement(components_1.Carousel, { spaceBetween: 42, slidesPerView: 3, slidesPerGroup: 1, breakpoints: {
                         1301: {
                             slidesPerView: 4
@@ -77,7 +78,7 @@ function TemplateB() {
                         ? 'autoplay'
                         : carouselInfiniteLoopMode === 'USE'
                             ? 'loop'
-                            : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-24px" }, filteredItems.map(function (item) {
+                            : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-24px" }, filteredSortedItems.map(function (item) {
                     var id = item.id;
                     var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkMethod = _a.linkMethod, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
                     return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),

package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/templates/TemplateA/TemplateA.js

@@ -52,18 +52,19 @@ function TemplateA() {
                 (!!item.properties.imageSrc || !!item.properties.title || !!item.properties.description);
         })
         : [];
-    var hasNothing = !title && !description && !buttonAlphaLinkSrc && filteredItems.length <= 0;
+    var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
+    var hasNothing = !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length <= 0;
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
         title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" })),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
             react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }))),
-        filteredItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, { totalItems: filteredItems.length }, filteredItems.map(function (item, index, self) {
+        filteredSortedItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, { totalItems: filteredSortedItems.length }, filteredSortedItems.map(function (item, index, self) {
             var id = item.id;
             var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc;
             return (react_1.default.createElement(S_ItemWrapper, { key: id, isFirstItem: index === 0, totalItems: self.length },
                 react_1.default.createElement(Item_1.Item, __assign({}, item),
                     itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
-                        react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 120, ratio: "1_1", shapeType: "rectangle", scaleType: "cover" }))),
+                        react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 120, ratio: "1_1", shapeType: "rectangle", scaleType: "contain" }))),
                     react_1.default.createElement(S_ItemBodyWrapper, null,
                         itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
                         itemDescription && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -113,7 +114,7 @@ var S_CustomDividerBox = styled_components_1.default.div(templateObject_7 || (te
 });
 var S_CustomWidthDivider = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 24px;\n  height: 3px;\n  background-color: ", ";\n"], ["\n  width: 24px;\n  height: 3px;\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_divider_white_opacity30;
+    return theme.ui_cpnt_divider_white_01;
 });
 var S_ButtonBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"], ["\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/sub/DynamicLayout/mobile/components/common/YouTubeIframe.js

@@ -61,7 +61,11 @@ function YouTubeIframe(_a) {
                 playerVars: {
                     playsinline: 1,
                     autoplay: 1,
-                    controls: 0
+                    controls: 0,
+                    iv_load_policy: 3,
+                    listType: 'playlist',
+                    playlist: TouTubeLinkParser_1.default.getId(src),
+                    loop: 1
                 },
                 events: {
                     onReady: onPlayerReady,

package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js

@@ -57,19 +57,20 @@ function TemplateA() {
                     !!item.properties.linkSrc);
         })
         : [];
-    return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
+    var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
+    return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 },
         title && (react_1.default.createElement(S_SectionTitleBox, null,
             react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }))),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
             react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
         buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
             react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
-        filteredItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
+        filteredSortedItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
             react_1.default.createElement(components_1.Carousel, { spaceBetween: 16, slidesPerView: 2, mode: carouselAutoplayMode === 'AUTO'
                     ? 'autoplay'
                     : carouselInfiniteLoopMode === 'USE'
                         ? 'loop'
-                        : 'normal', autoplayDelay: carouselAutoplayTime, paginationSpacing: [48, 24] }, filteredItems.map(function (item) {
+                        : 'normal', autoplayDelay: carouselAutoplayTime, paginationSpacing: [48, 24] }, filteredSortedItems.map(function (item) {
                 var id = item.id;
                 var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkMethod = _a.linkMethod, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
                 return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),

package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js

@@ -57,19 +57,20 @@ function TemplateB() {
                     !!item.properties.linkSrc);
         })
         : [];
-    return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
+    var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
+    return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 },
         title && (react_1.default.createElement(S_SectionTitleBox, null,
             react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }))),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
             react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
         buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
             react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
-        filteredItems && (react_1.default.createElement(S_CarouselBox, null,
+        filteredSortedItems && (react_1.default.createElement(S_CarouselBox, null,
             react_1.default.createElement(components_1.Carousel, { spaceBetween: 24, slidesPerView: 1, mode: carouselAutoplayMode === 'AUTO'
                     ? 'autoplay'
                     : carouselInfiniteLoopMode === 'USE'
                         ? 'loop'
-                        : 'normal', autoplayDelay: carouselAutoplayTime, paginationSpacing: [48, 24] }, filteredItems.map(function (item) {
+                        : 'normal', autoplayDelay: carouselAutoplayTime, paginationSpacing: [48, 24] }, filteredSortedItems.map(function (item) {
                 var id = item.id;
                 var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkMethod = _a.linkMethod, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
                 return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),

package/dist/src/sub/DynamicLayout/mobile/sections/InfoBoxSection/templates/TemplateA/TemplateA.js

@@ -52,18 +52,19 @@ function TemplateA() {
                 (!!item.properties.imageSrc || !!item.properties.title || !!item.properties.description);
         })
         : [];
-    var hasNothing = !title && !description && !buttonAlphaLinkSrc && filteredItems.length <= 0;
+    var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
+    var hasNothing = !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length <= 0;
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
         title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 })),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
             react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
-        filteredItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, null, filteredItems.map(function (item, index) {
+        filteredSortedItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, null, filteredSortedItems.map(function (item, index) {
             var id = item.id;
             var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc;
             return (react_1.default.createElement(S_ItemWrapper, { isFirstItem: index === 0, key: id },
                 react_1.default.createElement(Item_1.Item, __assign({}, item),
                     itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
-                        react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 80, ratio: "1_1", scaleType: "cover" }))),
+                        react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 80, ratio: "1_1", scaleType: "contain" }))),
                     itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })),
                     itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, null,
                         react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body2Regular" }))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,24 +1,9 @@
 # PDS-DEV-KIT-WEB-TEST Release Notes
-## [v0.0.19]
+## [v0.0.20]
 
 * sub
-  * DynamicLayout 유튜브 배경의 비율 조정 (세로로 긴 섹션에서 제대로 표시되지 않는 이슈 픽스)
-  * DynamicLayout 디자인 디테일 수정
-    * mobile IntroSection 의 콘텐츠 영역의 넓이 조정 (띄어쓰기 없는 텍스트가 화면밖으로 넘어가는 이슈 픽스)
-    * desktop 콘텐츠 캐러셀 섹션 / 인포박스 섹션
-      * 섹션 본문
-      * 아이템 제목
-      * 아이템 이미지와 제목 사이 간격 spacing-d -> spacing-e로 수정
-    * desktop 콘텐트 섹션
-      * 섹션 본문
-    * mobile 인트로 섹션
-      * 섹션 제목
-    * mobile 콘텐츠 캐러셀 / 인포박스 섹션
-      * 섹션 제목
-      * 아이템 제목
-      * 아이템 본문
-      * 아이템 이미지와 제목 사이 간격 spacing-c -> 18px로 수정
-      * 아이템 제목과 아이템 본문 사이 간격 spacing-b -> spacing-c로 수정
-      * 섹션과 아이템 사이 간격 spacing-g -> 56px로 수정
-    * 콘텐트 섹션
-      * 섹션 제목
+  * DynamicLayout 수정
+    * 인포박스섹션의 디바이더 컬러키 변경
+    * 섹션 및 아이템 순서 정렬과 필터 적용
+    * 컨텐츠 캐러셀 섹션의 내용 중앙 정렬
+    * 유튜브 연관 동영상 뜨는 이슈 수정