pds-dev-kit-web-test 0.0.18 → 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/Item/Item.d.ts

@@ -6,7 +6,9 @@ declare function Item({ children, ...props }: IItem & {
     children: React.ReactNode;
 }): JSX.Element;
 declare namespace Item {
-    var Title: ({ text, color, ...textLabelProps }: IItemTitle & TextLabelProps) => JSX.Element;
+    var Title: ({ text, color, lineHeight, ...textLabelProps }: IItemTitle & TextLabelProps & {
+        lineHeight?: number | undefined;
+    }) => JSX.Element;
     var Description: ({ text, color, ...textLabelProps }: IItemDescription & TextLabelProps) => JSX.Element;
     var Image: ({ ...imageViewProps }: ImageViewProps) => JSX.Element;
     var Button: ({ buttonType, backgroundColor, textColor, text, linkType, src, linkMethod, state, borderColor }: IItemButton) => JSX.Element;

package/dist/src/sub/DynamicLayout/desktop/components/Item/Item.js

@@ -68,13 +68,16 @@ var S_Item = styled_components_1.default.div(templateObject_1 || (templateObject
     return isClickable && 'cursor : pointer;';
 });
 function Title(_a) {
-    var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
-    return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-item-element-name": "Title", color: color },
+    var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.5 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
+    return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-item-element-name": "Title", color: color, lineHeight: lineHeight },
         react_1.default.createElement(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
 }
-var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n  }\n"])), function (_a) {
+var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
+}, function (_a) {
+    var lineHeight = _a.lineHeight;
+    return lineHeight;
 });
 function Description(_a) {
     var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);

package/dist/src/sub/DynamicLayout/desktop/components/Section/Section.d.ts

@@ -9,7 +9,9 @@ declare namespace Section {
     var Title: ({ text, color, lineHeight, ...textLabelProps }: ISectionTitle & TextLabelProps & {
         lineHeight?: number | undefined;
     }) => JSX.Element;
-    var Description: ({ text, color, ...textLabelProps }: ISectionDescription & TextLabelProps) => JSX.Element;
+    var Description: ({ text, color, fontWeight, ...textLabelProps }: ISectionDescription & TextLabelProps & {
+        fontWeight?: string | undefined;
+    }) => JSX.Element;
     var Image: ({ ...imageViewProps }: ImageViewProps) => JSX.Element;
     var Button: ({ buttonType, backgroundColor, textColor, text, linkType, src, state, borderColor }: ISectionButton) => JSX.Element;
     var context: React.Context<ISection | null>;

package/dist/src/sub/DynamicLayout/desktop/components/Section/Section.js

@@ -85,16 +85,10 @@ function Background() {
             height: backgroundWrapper.offsetHeight
         };
         var isHorizontal = backgroundSize.width / backgroundSize.height > 1;
-        var isOverRatio = isHorizontal
-            ? backgroundSize.width / backgroundSize.height > 16 / 9
-            : backgroundSize.width / backgroundSize.height < 9 / 16;
-        var youtubeSize = isHorizontal
-            ? isOverRatio
-                ? { width: backgroundSize.width, height: backgroundSize.width * (9 / 16) }
-                : { width: backgroundSize.height * (16 / 9), height: backgroundSize.height }
-            : isOverRatio
-                ? { width: backgroundSize.height * (9 / 16), height: backgroundSize.height }
-                : { width: backgroundSize.width, height: backgroundSize.width * (16 / 9) };
+        var isOverRatio = backgroundSize.width / backgroundSize.height > 16 / 9;
+        var youtubeSize = isHorizontal && isOverRatio
+            ? { width: backgroundSize.width, height: backgroundSize.width * (9 / 16) }
+            : { width: backgroundSize.height * (16 / 9), height: backgroundSize.height };
         return youtubeSize;
     };
     (0, react_1.useEffect)(function () {
@@ -156,13 +150,16 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (t
 });
 // DESCRIPTION
 function Description(_a) {
-    var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
-    return (react_1.default.createElement(S_DescriptionStyleWrapper, { "x-dlayout-section-element-name": "Description", color: color },
+    var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
+    return (react_1.default.createElement(S_DescriptionStyleWrapper, { "x-dlayout-section-element-name": "Description", color: color, fontWeight: fontWeight },
         react_1.default.createElement(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
 }
-var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n  }\n"])), function (_a) {
+var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
+}, function (_a) {
+    var fontWeight = _a.fontWeight;
+    return fontWeight && "font-weight : " + fontWeight + ";";
 });
 // IMAGE
 function Image(_a) {

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,
@@ -111,6 +115,6 @@ var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateO
     var theme = _a.theme;
     return theme.ui_62;
 });
-var S_IframeWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  margin: auto;\n  max-width: 100%;\n  overflow: hidden;\n  pointer-events: none;\n\n  iframe {\n    border: 0;\n    height: 100%;\n    margin-left: -100%;\n    width: 300%;\n  }\n"], ["\n  height: 100%;\n  margin: auto;\n  max-width: 100%;\n  overflow: hidden;\n  pointer-events: none;\n\n  iframe {\n    border: 0;\n    height: 100%;\n    margin-left: -100%;\n    width: 300%;\n  }\n"])));
+var S_IframeWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: inherit;\n  margin: auto;\n  width: inherit;\n  overflow: hidden;\n  pointer-events: none;\n\n  iframe {\n    border: 0;\n    height: inherit;\n    width: inherit;\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n"], ["\n  height: inherit;\n  margin: auto;\n  width: inherit;\n  overflow: hidden;\n  pointer-events: none;\n\n  iframe {\n    border: 0;\n    height: inherit;\n    width: inherit;\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n"])));
 exports.default = YouTubeIframe;
 var templateObject_1, templateObject_2;

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, textAlign: "center", styleTheme: "headingBold" }))),
+                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,13 +78,13 @@ 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),
                         itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
                             react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive", shapeType: "rectangle" }))),
-                        itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, styleTheme: "subTitleBold" })),
+                        itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
                         itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
                             react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
                         itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
@@ -116,7 +117,7 @@ var S_CarouselBox = styled_components_1.default.div(templateObject_6 || (templat
  */
 var S_ItemImageBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.spacing.spacingE;
 });
 var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle;

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

@@ -57,15 +57,16 @@ 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" }))),
             description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-                react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Regular" }))),
+                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,13 +78,13 @@ 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),
                         itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
                             react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 16 }))),
-                        itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, styleTheme: "subTitleBold" })),
+                        itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
                         itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
                             react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
                         itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
@@ -116,7 +117,7 @@ var S_CarouselBox = styled_components_1.default.div(templateObject_6 || (templat
  */
 var S_ItemImageBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.spacing.spacingE;
 });
 var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle;

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

@@ -41,7 +41,7 @@ function TemplateA() {
             react_1.default.createElement(S_ContentsBodyWrapper, null,
                 title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })),
                 description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
-                    react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "headingBold" }))),
+                    react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
                 buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
                     react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))))));
 }

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

@@ -39,7 +39,7 @@ function TemplateB() {
             react_1.default.createElement(S_ContentsBodyWrapper, null,
                 title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })),
                 description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
-                    react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "headingBold" }))),
+                    react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
                 buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
                     react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))),
             sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,

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

@@ -52,20 +52,21 @@ 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", styleTheme: "headingBold" }))),
-        filteredItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, { totalItems: filteredItems.length }, filteredItems.map(function (item, index, self) {
+            react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }))),
+        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" })),
+                        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,
                             react_1.default.createElement(S_CustomDividerBox, null,
                                 react_1.default.createElement(S_CustomWidthDivider, null)),
@@ -104,7 +105,7 @@ var S_ItemWrapper = styled_components_1.default.div(templateObject_4 || (templat
 });
 var S_ItemImageBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin: ", " auto;\n"], ["\n  display: flex;\n  justify-content: center;\n  margin: ", " auto;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.spacing.spacingE;
 });
 var S_ItemBodyWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"])));
 var S_CustomDividerBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
@@ -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/Item/Item.d.ts

@@ -6,7 +6,9 @@ declare function Item({ children, ...props }: IItem & {
     children: React.ReactNode;
 }): JSX.Element;
 declare namespace Item {
-    var Title: ({ text, color, ...textLabelProps }: IItemTitle & TextLabelProps) => JSX.Element;
+    var Title: ({ text, color, lineHeight, ...textLabelProps }: IItemTitle & TextLabelProps & {
+        lineHeight?: number | undefined;
+    }) => JSX.Element;
     var Description: ({ text, color, ...textLabelProps }: IItemDescription & TextLabelProps) => JSX.Element;
     var Image: ({ ...imageViewProps }: ImageViewProps) => JSX.Element;
     var HTMLReader: ({ data, styleTheme, colorTheme, textAlign, color }: {

package/dist/src/sub/DynamicLayout/mobile/components/Item/Item.js

@@ -65,13 +65,16 @@ function Item(_a) {
 }
 var S_Item = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 function Title(_a) {
-    var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
-    return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-item-element-name": "Title", color: color },
+    var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.5 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
+    return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-item-element-name": "Title", color: color, lineHeight: lineHeight },
         react_1.default.createElement(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
 }
-var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n  }\n"])), function (_a) {
+var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
+}, function (_a) {
+    var lineHeight = _a.lineHeight;
+    return lineHeight;
 });
 function Description(_a) {
     var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);

package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.js

@@ -87,16 +87,10 @@ function Background() {
         if (backgroundSize.width * backgroundSize.height === 0)
             return { width: 0, height: 0 };
         var isHorizontal = backgroundSize.width / backgroundSize.height > 1;
-        var isOverRatio = isHorizontal
-            ? backgroundSize.width / backgroundSize.height > 16 / 9
-            : backgroundSize.width / backgroundSize.height < 9 / 16;
-        var youtubeSize = isHorizontal
-            ? isOverRatio
-                ? { width: backgroundSize.width, height: backgroundSize.width * (9 / 16) }
-                : { width: backgroundSize.height * (16 / 9), height: backgroundSize.height }
-            : isOverRatio
-                ? { width: backgroundSize.height * (9 / 16), height: backgroundSize.height }
-                : { width: backgroundSize.width, height: backgroundSize.width * (16 / 9) };
+        var isOverRatio = backgroundSize.width / backgroundSize.height > 16 / 9;
+        var youtubeSize = isHorizontal && isOverRatio
+            ? { width: backgroundSize.width, height: backgroundSize.width * (9 / 16) }
+            : { width: backgroundSize.height * (16 / 9), height: backgroundSize.height };
         return youtubeSize;
     };
     (0, react_1.useEffect)(function () {

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,
@@ -111,6 +115,6 @@ var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateO
     var theme = _a.theme;
     return theme.ui_62;
 });
-var S_IframeWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  margin: auto;\n  max-width: 100%;\n  overflow: hidden;\n  pointer-events: none;\n\n  /* NOTE \n  iframe \uAD8C\uC7A5 \uB113\uC774(width)\n  \uD654\uBA74 \uBE44\uC728 9:20 : 395% (Galaxy S20)\n  \uD654\uBA74 \uBE44\uC728 9:21 : 415% (Galaxy Fold)\n  */\n  iframe {\n    border: 0;\n    height: 100%;\n    width: 415%;\n    margin-left: -157.5%;\n  }\n"], ["\n  height: 100%;\n  margin: auto;\n  max-width: 100%;\n  overflow: hidden;\n  pointer-events: none;\n\n  /* NOTE \n  iframe \uAD8C\uC7A5 \uB113\uC774(width)\n  \uD654\uBA74 \uBE44\uC728 9:20 : 395% (Galaxy S20)\n  \uD654\uBA74 \uBE44\uC728 9:21 : 415% (Galaxy Fold)\n  */\n  iframe {\n    border: 0;\n    height: 100%;\n    width: 415%;\n    margin-left: -157.5%;\n  }\n"])));
+var S_IframeWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: inherit;\n  margin: auto;\n  width: inherit;\n  overflow: hidden;\n  pointer-events: none;\n\n  /* NOTE \n  iframe \uAD8C\uC7A5 \uB113\uC774(width)\n  \uD654\uBA74 \uBE44\uC728 9:20 : 395% (Galaxy S20)\n  \uD654\uBA74 \uBE44\uC728 9:21 : 415% (Galaxy Fold)\n  */\n  iframe {\n    border: 0;\n    height: inherit;\n    width: inherit;\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n"], ["\n  height: inherit;\n  margin: auto;\n  width: inherit;\n  overflow: hidden;\n  pointer-events: none;\n\n  /* NOTE \n  iframe \uAD8C\uC7A5 \uB113\uC774(width)\n  \uD654\uBA74 \uBE44\uC728 9:20 : 395% (Galaxy S20)\n  \uD654\uBA74 \uBE44\uC728 9:21 : 415% (Galaxy Fold)\n  */\n  iframe {\n    border: 0;\n    height: inherit;\n    width: inherit;\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n"])));
 exports.default = YouTubeIframe;
 var templateObject_1, templateObject_2;

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

@@ -57,27 +57,28 @@ 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" }))),
+            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),
                     itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
                         react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive", shapeType: "rectangle" }))),
-                    itemTitle && react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex }),
+                    itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })),
                     itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
-                        react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, customFontSize: "15px" }))),
+                        react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
                     itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
                         react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
             }))))));
@@ -107,20 +108,14 @@ var S_SectionButtonBox = styled_components_1.default.div(templateObject_4 || (te
     var theme = _a.theme;
     return theme.spacing.spacingF;
 });
-var S_CarouselBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
-});
+var S_CarouselBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: 56px 0;\n"], ["\n  margin: 56px 0;\n"])));
 /** NOTE: X00001에서는 margin collapsing으로 스페이싱을 처리하는 것이 원칙이나,
  * Swiper 라이브러리가 각 슬라이드 아이템에 flexbox를 쓰고 있어서 이곳만 예외적으로 styled component로 스페이싱을 처리했습니다.
  */
-var S_ItemImageBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
-});
+var S_ItemImageBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-bottom: 18px;\n"], ["\n  margin-bottom: 18px;\n"])));
 var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle;
-    return (hasImage || hasTitle) && theme.spacing.spacingB;
+    return (hasImage || hasTitle) && theme.spacing.spacingC;
 });
 var S_ItemButtonBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle, hasDescription = _a.hasDescription;

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

@@ -57,27 +57,28 @@ 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" }))),
+            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),
                     itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
                         react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 16 }))),
-                    itemTitle && react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex }),
+                    itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })),
                     itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
-                        react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, customFontSize: "15px" }))),
+                        react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
                     itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
                         react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
             }))))));
@@ -107,20 +108,14 @@ var S_SectionButtonBox = styled_components_1.default.div(templateObject_4 || (te
     var theme = _a.theme;
     return theme.spacing.spacingF;
 });
-var S_CarouselBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
-});
+var S_CarouselBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: 56px 0;\n"], ["\n  margin: 56px 0;\n"])));
 /** NOTE: X00001에서는 margin collapsing으로 스페이싱을 처리하는 것이 원칙이나,
  * Swiper 라이브러리가 각 슬라이드 아이템에 flexbox를 쓰고 있어서 이곳만 예외적으로 styled component로 스페이싱을 처리했습니다.
  */
-var S_ItemImageBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
-});
+var S_ItemImageBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-bottom: 18px;\n"], ["\n  margin-bottom: 18px;\n"])));
 var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle;
-    return (hasImage || hasTitle) && theme.spacing.spacingB;
+    return (hasImage || hasTitle) && theme.spacing.spacingC;
 });
 var S_ItemButtonBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle, hasDescription = _a.hasDescription;

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

@@ -38,7 +38,7 @@ function TemplateA() {
         sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
             react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover", shapeType: "rectangle" }))))),
         title && (react_1.default.createElement(S_SectionTitleBox, null,
-            react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold" }))),
+            react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, 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, customFontSize: "18px", fontWeight: "600" }))),
         buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,

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

@@ -35,7 +35,7 @@ function TemplateB() {
     var _b = sectionContext.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, buttonAlphaDesignType = _b.buttonAlphaDesignType, buttonAlphaLabelColorInHex = _b.buttonAlphaLabelColorInHex, buttonAlphaBackgroundColorInHex = _b.buttonAlphaBackgroundColorInHex;
     var hasNothing = !sectionContentMediaSrc && !title && !description && !buttonAlphaLinkSrc;
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
-        title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold" })),
+        title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, 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, customFontSize: "18px", fontWeight: "600" }))),
         sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,

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

@@ -52,21 +52,22 @@ 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" })),
+        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" }))),
-                    itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center" })),
+                        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", customFontSize: "15px" }))))));
+                        react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body2Regular" }))))));
         }))),
         buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
             react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
@@ -82,18 +83,12 @@ var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_2 |
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_ItemsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
-});
+var S_ItemsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 56px 0;\n"], ["\n  margin: 56px 0;\n"])));
 var S_ItemWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 40px 0;\n"], ["\n  margin: 40px 0;\n"])));
-var S_ItemImageBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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;
-    return theme.spacing.spacingC;
-});
+var S_ItemImageBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin: 18px 0;\n"], ["\n  display: flex;\n  justify-content: center;\n  margin: 18px 0;\n"])));
 var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingB;
+    return theme.spacing.spacingC;
 });
 var S_ButtonBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __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/sections/IntroSection/templates/TemplateA/TemplateA.js

@@ -45,7 +45,7 @@ function TemplateA() {
     }, []);
     return (react_1.default.createElement(S_FullScreenWrapper, { vh: vh },
         react_1.default.createElement(S_ContentsArea, null,
-            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "40px", customFontWeight: "bold", lineHeight: 1.2 })),
+            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "37px", customFontWeight: "bold", lineHeight: 1.3 })),
             description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                 react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Bold" }))),
             (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -57,7 +57,7 @@ var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (t
     var vh = _a.vh;
     return vh * 100;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  margin: ", " ", ";\n"], ["\n  width: 100%;\n  margin: ", " ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  box-sizing: border-box;\n  margin: ", " 0;\n  padding: 0 ", ";\n"], ["\n  width: 100%;\n  box-sizing: border-box;\n  margin: ", " 0;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingG;
 }, function (_a) {

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

@@ -45,7 +45,7 @@ function TemplateB() {
     }, []);
     return (react_1.default.createElement(S_FullScreenWrapper, { vh: vh },
         react_1.default.createElement(S_ContentsArea, null,
-            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "headingBold", lineHeight: 1.2 })),
+            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "37px", customFontWeight: "bold", lineHeight: 1.3 })),
             description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                 react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "body2Bold" }))),
             (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -57,7 +57,7 @@ var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (t
     var vh = _a.vh;
     return vh * 100;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  margin: ", " ", ";\n"], ["\n  width: 100%;\n  margin: ", " ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  box-sizing: border-box;\n  margin: ", " 0;\n  padding: 0 ", ";\n"], ["\n  width: 100%;\n  box-sizing: border-box;\n  margin: ", " 0;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingG;
 }, function (_a) {

package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateC/TemplateC.js

@@ -37,7 +37,7 @@ function TemplateC() {
     var _d = context.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, buttonBravoDesignType = _d.buttonBravoDesignType, buttonBravoBackgroundColorInHex = _d.buttonBravoBackgroundColorInHex, buttonBravoLabelColorInHex = _d.buttonBravoLabelColorInHex, buttonCharlieDesignType = _d.buttonCharlieDesignType, buttonCharlieBackgroundColorInHex = _d.buttonCharlieBackgroundColorInHex, buttonCharlieLabelColorInHex = _d.buttonCharlieLabelColorInHex;
     return (react_1.default.createElement(S_FullScreenWrapper, null,
         react_1.default.createElement(S_ContentsArea, null,
-            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "displayBold", lineHeight: 1.2 })),
+            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "37px", customFontWeight: "bold", lineHeight: 1.3 })),
             description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                 react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "body1Bold" }))),
             (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -46,7 +46,7 @@ function TemplateC() {
                 buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex })))))));
 }
 var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-height: 80vh;\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  min-height: 80vh;\n  display: flex;\n  align-items: center;\n"])));
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  margin: ", " ", ";\n"], ["\n  width: 100%;\n  margin: ", " ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  box-sizing: border-box;\n  margin: ", " 0;\n  padding: 0 ", ";\n"], ["\n  width: 100%;\n  box-sizing: border-box;\n  margin: ", " 0;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingG;
 }, function (_a) {

package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateD/TemplateD.js

@@ -37,7 +37,7 @@ function TemplateD() {
     var _d = context.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, buttonBravoDesignType = _d.buttonBravoDesignType, buttonBravoBackgroundColorInHex = _d.buttonBravoBackgroundColorInHex, buttonBravoLabelColorInHex = _d.buttonBravoLabelColorInHex, buttonCharlieDesignType = _d.buttonCharlieDesignType, buttonCharlieBackgroundColorInHex = _d.buttonCharlieBackgroundColorInHex, buttonCharlieLabelColorInHex = _d.buttonCharlieLabelColorInHex;
     return (react_1.default.createElement(S_FullScreenWrapper, null,
         react_1.default.createElement(S_ContentsArea, null,
-            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "displayBold", lineHeight: 1.2 })),
+            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "37px", customFontWeight: "bold", lineHeight: 1.3 })),
             description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                 react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Bold" }))),
             (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -46,7 +46,7 @@ function TemplateD() {
                 buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex })))))));
 }
 var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-height: 80vh;\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  min-height: 80vh;\n  display: flex;\n  align-items: center;\n"])));
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin: ", " ", ";\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin: ", " ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  box-sizing: border-box;\n  margin: ", " 0;\n  padding: 0 ", ";\n"], ["\n  width: 100%;\n  box-sizing: border-box;\n  margin: ", " 0;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingG;
 }, function (_a) {

package/package.json

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

package/release-note.md

@@ -1,8 +1,9 @@
 # PDS-DEV-KIT-WEB-TEST Release Notes
-## [v0.0.18]
+## [v0.0.20]
 
 * sub
   * DynamicLayout 수정
-    * 섹션 및 아이템 컴포넌트에 key값 부여
-    * YouTubeIframe 리팩토링했던 부분 롤백
-    * preview모드일때 HTML Reader에서 클릭이 되는 이슈 수정
+    * 인포박스섹션의 디바이더 컬러키 변경
+    * 섹션 및 아이템 순서 정렬과 필터 적용
+    * 컨텐츠 캐러셀 섹션의 내용 중앙 정렬
+    * 유튜브 연관 동영상 뜨는 이슈 수정