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

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/Carousel.js

@@ -53,7 +53,7 @@ function Carousel(_a) {
             return;
         }
         setTargetMode(mode);
-    }, [slidesPerView, mode]);
+    }, [slidesPerView, mode, children]);
     return (react_1.default.createElement(S_Carousel, null,
         react_1.default.createElement(S_SwiperStyleWrapper, null,
             react_1.default.createElement(react_2.Swiper, { modules: [swiper_1.Navigation, swiper_1.Autoplay], centerInsufficientSlides: true, spaceBetween: spaceBetween, slidesPerView: slidesPerView, slidesPerGroup: slidesPerGroup, breakpoints: breakpoints, loop: targetMode === 'loop' || targetMode === 'autoplay', autoplay: targetMode === 'autoplay'

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/ContentsSection/templates/TemplateA/TemplateA.js

@@ -34,23 +34,40 @@ function TemplateA() {
     var _a = sectionContext.properties, sectionContentMediaType = _a.sectionContentMediaType, sectionContentMediaSrc = _a.sectionContentMediaSrc, title = _a.title, description = _a.description, buttonAlphaLabel = _a.buttonAlphaLabel, buttonAlphaLinkSrc = _a.buttonAlphaLinkSrc, buttonAlphaLinkType = _a.buttonAlphaLinkType;
     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;
+    var _c = (0, react_1.useState)(360), imageHeight = _c[0], setImageHeight = _c[1];
+    var contentsBodyRef = (0, react_1.useRef)(null);
+    var handleResize = function () {
+        var _a;
+        var contentsBodyHeight = (_a = contentsBodyRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+        setImageHeight(contentsBodyHeight !== null && contentsBodyHeight !== void 0 ? contentsBodyHeight : 360);
+    };
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('resize', handleResize);
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [contentsBodyRef]);
     return (react_1.default.createElement(S_ContentsAreaBox, { hasNothing: hasNothing },
         react_1.default.createElement(S_ContentsArea, null,
-            sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
+            sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, { height: imageHeight },
                 react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }))))),
             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, 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 })))))));
+                react_1.default.createElement("div", { ref: contentsBodyRef },
+                    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, 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 }))))))));
 }
 var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
     return (hasNothing ? 0 : '160px');
 });
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"])));
-var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-right: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-right: ", ";\n"])), function (_a) {
+var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: ", "px;\n  min-height: 360px;\n  margin-right: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: ", "px;\n  min-height: 360px;\n  margin-right: ", ";\n"])), function (_a) {
+    var height = _a.height;
+    return height;
+}, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingI;
 });

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

@@ -34,15 +34,29 @@ function TemplateB() {
     var _a = sectionContext.properties, sectionContentMediaType = _a.sectionContentMediaType, sectionContentMediaSrc = _a.sectionContentMediaSrc, title = _a.title, description = _a.description, buttonAlphaLabel = _a.buttonAlphaLabel, buttonAlphaLinkType = _a.buttonAlphaLinkType, buttonAlphaLinkSrc = _a.buttonAlphaLinkSrc;
     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;
+    var _c = (0, react_1.useState)(360), imageHeight = _c[0], setImageHeight = _c[1];
+    var contentsBodyRef = (0, react_1.useRef)(null);
+    var handleResize = function () {
+        var _a;
+        var contentsBodyHeight = (_a = contentsBodyRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+        setImageHeight(contentsBodyHeight !== null && contentsBodyHeight !== void 0 ? contentsBodyHeight : 360);
+    };
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('resize', handleResize);
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [contentsBodyRef]);
     return (react_1.default.createElement(S_ContentsAreaBox, { hasNothing: hasNothing },
         react_1.default.createElement(S_ContentsArea, null,
             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, 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,
+                react_1.default.createElement("div", { ref: contentsBodyRef },
+                    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, 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, { height: imageHeight },
                 react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }))))))));
 }
 var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"])), function (_a) {
@@ -50,7 +64,10 @@ var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (tem
     return (hasNothing ? 0 : '160px');
 });
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"])));
-var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-left: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-left: ", ";\n"])), function (_a) {
+var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: ", "px;\n  min-height: 360px;\n  margin-left: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: ", "px;\n  min-height: 360px;\n  margin-left: ", ";\n"])), function (_a) {
+    var height = _a.height;
+    return height;
+}, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingI;
 });

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.21",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -90,7 +90,6 @@
     "@types/styled-components": "^5.1.9",
     "@typescript-eslint/parser": "^4.33.0",
     "chromatic": "^6.0.6",
-    "css-loader": "^4.3.0",
     "dotenv-cli": "^4.0.0",
     "eslint": "^7.27.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -102,7 +101,6 @@
     "prettier": "^2.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "style-loader": "^2.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^22.0.0",

package/release-note.md

@@ -1,24 +1,19 @@
 # PDS-DEV-KIT-WEB-TEST Release Notes
-## [v0.0.19]
+## [v0.0.21]
 
-* sub
-  * DynamicLayout 유튜브 배경의 비율 조정 (세로로 긴 섹션에서 제대로 표시되지 않는 이슈 픽스)
-  * DynamicLayout 디자인 디테일 수정
-    * mobile IntroSection 의 콘텐츠 영역의 넓이 조정 (띄어쓰기 없는 텍스트가 화면밖으로 넘어가는 이슈 픽스)
-    * desktop 콘텐츠 캐러셀 섹션 / 인포박스 섹션
-      * 섹션 본문
-      * 아이템 제목
-      * 아이템 이미지와 제목 사이 간격 spacing-d -> spacing-e로 수정
-    * desktop 콘텐트 섹션
-      * 섹션 본문
-    * mobile 인트로 섹션
-      * 섹션 제목
-    * mobile 콘텐츠 캐러셀 / 인포박스 섹션
-      * 섹션 제목
-      * 아이템 제목
-      * 아이템 본문
-      * 아이템 이미지와 제목 사이 간격 spacing-c -> 18px로 수정
-      * 아이템 제목과 아이템 본문 사이 간격 spacing-b -> spacing-c로 수정
-      * 섹션과 아이템 사이 간격 spacing-g -> 56px로 수정
-    * 콘텐트 섹션
-      * 섹션 제목
+### common
+* movement 폴더 생성
+### Component단에 transition 또는 animation 부여
+* AdminListItem
+* DesktopAlertDialog
+* EditApplyTextField
+* FloatingActionButton
+* MainButton
+* TextField
+* UploadMainButton
+* ContentSheet
+* DesktopBasicModal
+### panel단에 transition 또는 animation 부여
+* ContentSheet
+* DesktopBasicModal
+* DesktopHeadlessModal