pds-dev-kit-web-test 0.0.13 → 0.0.14

package/dist/index.d.ts

@@ -19,3 +19,7 @@ export { LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox };
 export { LayoutMS, MSNavigationContainer, MSContainersBox };
 export { M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_FloatingActionButton, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_LottieReactionButton, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };
 export { M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet };
+import { DynamicLayout } from './src/sub';
+export { DynamicLayout };
+import { TypeOfSectionManifestSchema, TypeofSectionTemplate, TypeOfSectionContentMediaType, TypeOfSectionLinkType, TypeOfCarouselAutoplayMode, TypeOfCarouselInfiniteLoopMode, TypeOfBackgroundMediaType, TypeOfSectionButtonDesignType, TypeOfItemButtonDesignType, TypeOfItemManifestSchema, TypeOfItemLinkMethod, TypeOfItemLinkType, ISection, ISectionProperties, ISectionStyles, IItem } from './src/sub/DynamicLayout/types';
+export { TypeOfSectionManifestSchema, TypeofSectionTemplate, TypeOfSectionContentMediaType, TypeOfSectionLinkType, TypeOfCarouselAutoplayMode, TypeOfCarouselInfiniteLoopMode, TypeOfBackgroundMediaType, TypeOfSectionButtonDesignType, TypeOfItemButtonDesignType, TypeOfItemManifestSchema, TypeOfItemLinkMethod, TypeOfItemLinkType, ISection, ISectionProperties, ISectionStyles, IItem };

package/dist/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
 exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_SectionSheet = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = void 0;
-exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = void 0;
+exports.DynamicLayout = exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = void 0;
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 // common
@@ -146,3 +146,7 @@ Object.defineProperty(exports, "M_AnnotationSheet", { enumerable: true, get: fun
 Object.defineProperty(exports, "M_ContentSheet", { enumerable: true, get: function () { return mobile_1.M_ContentSheet; } });
 Object.defineProperty(exports, "M_MobileBasicModal", { enumerable: true, get: function () { return mobile_1.M_MobileBasicModal; } });
 Object.defineProperty(exports, "M_SectionSheet", { enumerable: true, get: function () { return mobile_1.M_SectionSheet; } });
+// sub
+// dynamicLayout
+var sub_1 = require("./src/sub");
+Object.defineProperty(exports, "DynamicLayout", { enumerable: true, get: function () { return sub_1.DynamicLayout; } });

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

@@ -234,7 +234,7 @@ var S_Content = styled_components_1.default.div(templateObject_6 || (templateObj
         }[colorTheme];
 }, function (_a) {
     var color = _a.color;
-    return color && "color: " + color;
+    return color && "color: " + color + ";";
 }, function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;

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

@@ -61,7 +61,7 @@ function Section(_a) {
     return (react_1.default.createElement(sectionContext.Provider, { value: props },
         react_1.default.createElement(S_MarginCollapsingBoundary, null,
             react_1.default.createElement(S_Section, null,
-                props.styles.backgroundMediaType && react_1.default.createElement(Background, null),
+                react_1.default.createElement(Background, null),
                 children))));
 }
 var S_MarginCollapsingBoundary = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
@@ -109,7 +109,7 @@ function Background() {
             window.removeEventListener('resize', onResize);
         };
     }, []);
-    var background = (0, react_1.useMemo)(function () {
+    var backgroundMedia = (0, react_1.useMemo)(function () {
         switch (backgroundMediaType) {
             case 'IMAGE':
                 return (react_1.default.createElement(hybrid_1.ImageView, { src: backgroundMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }));
@@ -117,13 +117,14 @@ function Background() {
             //   // NOTE VIDEO타입 배경은 최초 scope에서 제외
             //   return <></>;
             case 'YOUTUBE':
-                return (react_1.default.createElement(S_YoutubeContainer, __assign({}, youtubeSize), backgroundMediaSrc && react_1.default.createElement(YouTubeIframe_1.default, { id: id, src: backgroundMediaSrc })));
+                return (react_1.default.createElement(S_YoutubeContainer, __assign({}, youtubeSize),
+                    react_1.default.createElement(YouTubeIframe_1.default, { id: id, src: backgroundMediaSrc })));
             default:
                 return react_1.default.createElement(react_1.default.Fragment, null);
         }
     }, [youtubeSize]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_BackgroundWrapper, { ref: backgroundRef, color: backgroundColorInHex }, backgroundMediaSrc && background),
+        react_1.default.createElement(S_BackgroundWrapper, { ref: backgroundRef, color: backgroundColorInHex }, backgroundMediaSrc && backgroundMedia),
         react_1.default.createElement(S_BackgroundOverlay, { color: backgroundOverlayColorInHex })));
 }
 var S_BackgroundWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  z-index: -2;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n"], ["\n  z-index: -2;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n"])), function (_a) {

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

@@ -39,16 +39,30 @@ function Carousel(_a) {
     var _f = (0, react_1.useState)(true), isLocked = _f[0], setIsLocked = _f[1];
     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: mode === 'loop' || mode === 'autoplay', autoplay: mode === 'autoplay' ? { delay: autoplayDelay, disableOnInteraction: false } : undefined, onSwiper: function (swiper) {
+            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: mode === 'loop' || mode === 'autoplay', autoplay: mode === 'autoplay'
+                    ? { delay: autoplayDelay * 1000, disableOnInteraction: false }
+                    : undefined, onSwiper: function (swiper) {
                     swiperRef.current = swiper;
                     setIsBeginning(swiper.isBeginning);
                     setIsEnd(swiper.isEnd);
                 }, onSlideChange: function (swiper) {
-                    setIsBeginning(swiper.isBeginning);
-                    setIsEnd(swiper.isEnd);
+                    if (swiper.params.loop) {
+                        setIsBeginning(false);
+                        setIsEnd(false);
+                    }
+                    else {
+                        setIsBeginning(swiper.isBeginning);
+                        setIsEnd(swiper.isEnd);
+                    }
                 }, onToEdge: function (swiper) {
-                    setIsBeginning(swiper.isBeginning);
-                    setIsEnd(swiper.isEnd);
+                    if (swiper.params.loop) {
+                        setIsBeginning(false);
+                        setIsEnd(false);
+                    }
+                    else {
+                        setIsBeginning(swiper.isBeginning);
+                        setIsEnd(swiper.isEnd);
+                    }
                 }, onLock: function () {
                     setIsLocked(true);
                 }, onUnlock: function () {

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

@@ -46,6 +46,7 @@ function TemplateA() {
     var _b = sectionContext.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, itemTitleColorInHex = _b.itemTitleColorInHex, itemDescriptionColorInHex = _b.itemDescriptionColorInHex;
     var _c = sectionContext.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType;
     var _d = sectionContext.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, itemButtonDesignType = _d.itemButtonDesignType, itemButtonBackgroundColorInHex = _d.itemButtonBackgroundColorInHex, itemButtonLabelColorInHex = _d.itemButtonLabelColorInHex;
+    var _e = sectionContext.properties, carouselAutoplayMode = _e.carouselAutoplayMode, carouselAutoplayTime = _e.carouselAutoplayTime, carouselInfiniteLoopMode = _e.carouselInfiniteLoopMode;
     var dynamicLayoutSectionItems = sectionContext.dynamicLayoutSectionItems;
     var filteredItems = dynamicLayoutSectionItems
         ? dynamicLayoutSectionItems.filter(function (item) {
@@ -74,7 +75,11 @@ function TemplateA() {
                             slidesPerView: 5,
                             slidesPerGroup: 5
                         }
-                    }, buttonSpacing: "-24px" }, filteredItems.map(function (item) {
+                    }, mode: carouselAutoplayMode === 'AUTO'
+                        ? 'autoplay'
+                        : carouselInfiniteLoopMode === 'USE'
+                            ? 'loop'
+                            : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-24px" }, filteredItems.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

@@ -48,6 +48,7 @@ function TemplateB() {
     var _c = sectionContext.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType;
     var _d = sectionContext.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, itemButtonDesignType = _d.itemButtonDesignType, itemButtonBackgroundColorInHex = _d.itemButtonBackgroundColorInHex, itemButtonLabelColorInHex = _d.itemButtonLabelColorInHex;
     var dynamicLayoutSectionItems = sectionContext.dynamicLayoutSectionItems;
+    var _e = sectionContext.properties, carouselAutoplayMode = _e.carouselAutoplayMode, carouselAutoplayTime = _e.carouselAutoplayTime, carouselInfiniteLoopMode = _e.carouselInfiniteLoopMode;
     var filteredItems = dynamicLayoutSectionItems
         ? dynamicLayoutSectionItems.filter(function (item) {
             return item.display &&
@@ -75,7 +76,11 @@ function TemplateB() {
                             slidesPerView: 5,
                             slidesPerGroup: 5
                         }
-                    }, buttonSpacing: "-16px" }, filteredItems.map(function (item) {
+                    }, mode: carouselAutoplayMode === 'AUTO'
+                        ? 'autoplay'
+                        : carouselInfiniteLoopMode === 'USE'
+                            ? 'loop'
+                            : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-16px" }, filteredItems.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/IntroSection/templates/TemplateC/TemplateC.js

@@ -46,7 +46,7 @@ function TemplateC() {
                     buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
                     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  height: 90vh;\n  display: flex;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: 90vh;\n  display: flex;\n  justify-content: center;\n"])));
+var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 80vh;\n  display: flex;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: 80vh;\n  display: flex;\n  justify-content: center;\n"])));
 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  display: flex;\n  align-items: center;\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  display: flex;\n  align-items: center;\n"])));
 var S_ContentsBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  max-width: 800px;\n"], ["\n  max-width: 800px;\n"])));
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {

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

@@ -46,8 +46,8 @@ function TemplateD() {
                     buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
                     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  height: 90vh;\n  display: flex;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: 90vh;\n  display: flex;\n  justify-content: center;\n"])));
-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  display: flex;\n  align-items: center;\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  display: flex;\n  align-items: center;\n"])));
+var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 80vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  width: 100%;\n  height: 80vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+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  margin: 0 auto;\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  margin: 0 auto;\n"])));
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasTitle = _a.hasTitle;
     return hasTitle && theme.spacing.spacingF;

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

@@ -231,7 +231,7 @@ var S_Content = styled_components_1.default.div(templateObject_6 || (templateObj
         }[colorTheme];
 }, function (_a) {
     var color = _a.color;
-    return color && "color: " + color;
+    return color && "color: " + color + ";";
 }, function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;

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

@@ -61,7 +61,7 @@ function Section(_a) {
     return (react_1.default.createElement(sectionContext.Provider, { value: props },
         react_1.default.createElement(S_MarginCollapsingBoundary, null,
             react_1.default.createElement(S_Section, null,
-                props.styles.backgroundMediaType && react_1.default.createElement(Background, null),
+                react_1.default.createElement(Background, null),
                 children))));
 }
 var S_MarginCollapsingBoundary = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
@@ -118,7 +118,7 @@ function Background() {
             (_a = backgroundRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchmove', onTouchMove);
         };
     }, []);
-    var background = (0, react_1.useMemo)(function () {
+    var backgroundMedia = (0, react_1.useMemo)(function () {
         switch (backgroundMediaType) {
             case 'IMAGE':
                 return (react_1.default.createElement(hybrid_1.ImageView, { src: backgroundMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }));
@@ -126,13 +126,14 @@ function Background() {
             // NOTE VIDEO타입 배경은 최초 scope에서 제외
             // return <></>;
             case 'YOUTUBE':
-                return (react_1.default.createElement(S_YoutubeContainer, __assign({}, youtubeSize), backgroundMediaSrc && react_1.default.createElement(YouTubeIframe_1.default, { id: id, src: backgroundMediaSrc })));
+                return (react_1.default.createElement(S_YoutubeContainer, __assign({}, youtubeSize),
+                    react_1.default.createElement(YouTubeIframe_1.default, { id: id, src: backgroundMediaSrc })));
             default:
                 return react_1.default.createElement(react_1.default.Fragment, null);
         }
     }, [youtubeSize]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_BackgroundWrapper, { ref: backgroundRef, color: backgroundColorInHex }, background),
+        react_1.default.createElement(S_BackgroundWrapper, { ref: backgroundRef, color: backgroundColorInHex }, backgroundMediaSrc && backgroundMedia),
         react_1.default.createElement(S_BackgroundOverlay, { color: backgroundOverlayColorInHex })));
 }
 var S_BackgroundWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  z-index: -2;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n"], ["\n  z-index: -2;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n"])), function (_a) {

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

@@ -40,7 +40,9 @@ function Carousel(_a) {
     };
     return (react_1.default.createElement(S_Carousel, null,
         react_1.default.createElement(S_SwiperStyleWrapper, { paginationSpacing: paginationSpacing },
-            react_1.default.createElement(react_2.Swiper, { modules: [swiper_1.Pagination, swiper_1.Autoplay], spaceBetween: spaceBetween, slidesPerView: slidesPerView, slidesPerGroup: slidesPerView, allowTouchMove: true, pagination: paginationOptions, loop: mode === 'loop' || mode === 'autoplay', autoplay: mode === 'autoplay' ? { delay: autoplayDelay, disableOnInteraction: false } : undefined, onSwiper: function (swiper) {
+            react_1.default.createElement(react_2.Swiper, { modules: [swiper_1.Pagination, swiper_1.Autoplay], spaceBetween: spaceBetween, slidesPerView: slidesPerView, slidesPerGroup: slidesPerView, allowTouchMove: true, pagination: paginationOptions, loop: mode === 'loop' || mode === 'autoplay', autoplay: mode === 'autoplay'
+                    ? { delay: autoplayDelay * 1000, disableOnInteraction: false }
+                    : undefined, onSwiper: function (swiper) {
                     paginationRef.current = swiper;
                 } },
                 react_1.default.Children.map(children, function (child) {

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

@@ -46,6 +46,7 @@ function TemplateA() {
     var _b = sectionContext.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, itemTitleColorInHex = _b.itemTitleColorInHex, itemDescriptionColorInHex = _b.itemDescriptionColorInHex;
     var _c = sectionContext.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType;
     var _d = sectionContext.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, itemButtonDesignType = _d.itemButtonDesignType, itemButtonBackgroundColorInHex = _d.itemButtonBackgroundColorInHex, itemButtonLabelColorInHex = _d.itemButtonLabelColorInHex;
+    var _e = sectionContext.properties, carouselAutoplayMode = _e.carouselAutoplayMode, carouselAutoplayTime = _e.carouselAutoplayTime, carouselInfiniteLoopMode = _e.carouselInfiniteLoopMode;
     var dynamicLayoutSectionItems = sectionContext.dynamicLayoutSectionItems;
     var filteredItems = dynamicLayoutSectionItems
         ? dynamicLayoutSectionItems.filter(function (item) {
@@ -64,7 +65,11 @@ function TemplateA() {
         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,
-            react_1.default.createElement(components_1.Carousel, { spaceBetween: 16, slidesPerView: 2, paginationSpacing: [48, 24] }, filteredItems.map(function (item) {
+            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) {
                 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

@@ -46,6 +46,7 @@ function TemplateB() {
     var _b = sectionContext.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, itemTitleColorInHex = _b.itemTitleColorInHex, itemDescriptionColorInHex = _b.itemDescriptionColorInHex;
     var _c = sectionContext.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType;
     var _d = sectionContext.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, itemButtonDesignType = _d.itemButtonDesignType, itemButtonBackgroundColorInHex = _d.itemButtonBackgroundColorInHex, itemButtonLabelColorInHex = _d.itemButtonLabelColorInHex;
+    var _e = sectionContext.properties, carouselAutoplayMode = _e.carouselAutoplayMode, carouselAutoplayTime = _e.carouselAutoplayTime, carouselInfiniteLoopMode = _e.carouselInfiniteLoopMode;
     var dynamicLayoutSectionItems = sectionContext.dynamicLayoutSectionItems;
     var filteredItems = dynamicLayoutSectionItems
         ? dynamicLayoutSectionItems.filter(function (item) {
@@ -64,7 +65,11 @@ function TemplateB() {
         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,
-            react_1.default.createElement(components_1.Carousel, { spaceBetween: 24, slidesPerView: 1, paginationSpacing: [48, 24] }, filteredItems.map(function (item) {
+            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) {
                 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/package.json

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

package/release-note.md

@@ -1,5 +1,10 @@
 # PDS-DEV-KIT-WEB-TEST Release Notes
-## [v0.0.13]
+## [v0.0.14]
 
 * sub
-  * DynamicLayout 생성
+  * DynamicLayout 수정
+    * <chore> export dynamicLayout on index
+    * <fix> DynamicLayout-ContentsCarouselSection: use carousel playmode
+    * <fix> DynamicLayout-IntroSection:fix height of templateC,B
+    * <fix> DynamicLayout: fix Section background
+    * <fix> DynamicLayout: fix HTMLReader font color