npm - pds-dev-kit-web-test - Versions diffs - 0.0.16 → 0.0.17 - Mend

pds-dev-kit-web-test 0.0.16 → 0.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

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

@@ -1,7 +1,4 @@
 /// <reference types="react" />
-import { DynamicLayoutType } from './types';
-declare type DynamicLayoutProps = DynamicLayoutType & {
-    navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
-};
+import { DynamicLayoutProps } from './types';
 declare function DynamicLayout({ device, isPreview, sections, navigationHandler }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

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

@@ -10,8 +10,8 @@ var mobile_1 = require("./mobile");
 function DynamicLayout(_a) {
     var device = _a.device, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler;
     return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { isPreview: isPreview, navigationHandler: navigationHandler } }, {
-        UM: react_1.default.createElement(mobile_1.MobileWeb, { sections: sections }),
-        UW: react_1.default.createElement(desktop_1.DesktopWeb, { sections: sections })
+        MOBILE: react_1.default.createElement(mobile_1.MobileWeb, { sections: sections }),
+        DESKTOP: react_1.default.createElement(desktop_1.DesktopWeb, { sections: sections })
     }[device]));
 }
 exports.default = DynamicLayout;

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

@@ -28,89 +28,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var youtubeLinkParser_1 = __importDefault(require("../../../../utils/youtubeLinkParser"));
+var YouTubeIframeHelper_1 = require("../../../../utils/YouTubeIframeHelper");
 function YouTubeIframe(_a) {
     var id = _a.id, src = _a.src;
-    var _b = (0, react_1.useState)(true), isYoutubeLoading = _b[0], setIsYoutubeLoading = _b[1];
     var PLAYER_ID = "PLAYER_" + id;
-    var YOUTUBE_SCRIPT_ID = 'YOUTUBE_SCRIPT';
-    var YOUTUBE_SCRIPT_SRC = 'https://www.youtube.com/iframe_api';
     (0, react_1.useLayoutEffect)(function () {
-        var _a;
-        var youtubeScript = document.createElement('script');
-        youtubeScript.id = YOUTUBE_SCRIPT_ID;
-        youtubeScript.src = YOUTUBE_SCRIPT_SRC;
-        var firstScript = document.getElementsByTagName('script')[0];
-        (_a = firstScript.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(youtubeScript, firstScript);
-        youtubeScript.onload = function () {
-            var YT = window.YT;
-            YT.ready(function () {
-                onYouTubeIframeAPIReady();
-            });
-        };
-        return function () {
-            var youtubeScript = document.getElementById(YOUTUBE_SCRIPT_ID);
-            youtubeScript === null || youtubeScript === void 0 ? void 0 : youtubeScript.remove();
-        };
-    }, [src]);
-    function onYouTubeIframeAPIReady() {
-        try {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            var player = new window.YT.Player(PLAYER_ID, {
-                videoId: youtubeLinkParser_1.default.getId(src),
-                playerVars: {
-                    playsinline: 1,
-                    autoplay: 1,
-                    controls: 0
-                },
-                events: {
-                    onReady: onPlayerReady,
-                    onStateChange: onPlayerStateChange
-                }
-            });
-        }
-        catch (error) {
-            // eslint-disable-next-line no-console
-            console.error(error);
-        }
-    }
-    function onPlayerReady(event) {
-        event.target.mute();
-        event.target.playVideo();
-    }
-    function onPlayerStateChange(event) {
-        try {
-            var ENDED = 0;
-            var PLAYING = 1;
-            var TEMP_STOP = 2;
-            var BUFFERING = 3;
-            var data = event.data;
-            if (data === PLAYING) {
-                setTimeout(function () {
-                    setIsYoutubeLoading(false);
-                }, 100);
-            }
-            if (data === BUFFERING) {
-                setIsYoutubeLoading(true);
-            }
-            if (data === ENDED || data === TEMP_STOP) {
-                setIsYoutubeLoading(true);
-                event.target.playVideo();
-            }
-        }
-        catch (err) {
-            setIsYoutubeLoading(true);
-        }
-    }
+        YouTubeIframeHelper_1.YouTubeIframeHelper.getReady();
+        YouTubeIframeHelper_1.YouTubeIframeHelper.registerPlayer(PLAYER_ID, src);
+        return function () { return YouTubeIframeHelper_1.YouTubeIframeHelper.cleanUp(); };
+    }, [id, src]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        isYoutubeLoading && react_1.default.createElement(BlackScreen, null),
         react_1.default.createElement(S_IframeWrapper, null,
             react_1.default.createElement("div", { id: PLAYER_ID }))));
 }
-var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"])), function (_a) {
+var S_IframeWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  margin: auto;\n  max-width: 100%;\n  overflow: hidden;\n  pointer-events: none;\n  background-color: ", ";\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  background-color: ", ";\n\n  iframe {\n    border: 0;\n    height: 100%;\n    margin-left: -100%;\n    width: 300%;\n  }\n"])), function (_a) {
     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"])));
 exports.default = YouTubeIframe;
-var templateObject_1, templateObject_2;
+var templateObject_1;

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

@@ -77,12 +77,12 @@ function TemplateB() {
                         ? 'autoplay'
                         : carouselInfiniteLoopMode === 'USE'
                             ? 'loop'
-                            : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-16px" }, filteredItems.map(function (item) {
+                            : '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),
                         itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
-                            react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 24 }))),
+                            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" })),
                         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" }))),

package/dist/src/sub/DynamicLayout/dynamicLayoutContext.d.ts CHANGED Viewed

@@ -1,7 +1,3 @@
 /// <reference types="react" />
-import type { DynamicLayoutType } from './types';
-declare type DynamicLayoutProps = DynamicLayoutType & {
-    navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
-};
+import type { DynamicLayoutProps } from './types';
 export declare const dynamicLayoutContext: import("react").Context<Pick<DynamicLayoutProps, "isPreview" | "navigationHandler">>;
-export {};

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

@@ -28,89 +28,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var youtubeLinkParser_1 = __importDefault(require("../../../../utils/youtubeLinkParser"));
+var YouTubeIframeHelper_1 = require("../../../../utils/YouTubeIframeHelper");
 function YouTubeIframe(_a) {
     var id = _a.id, src = _a.src;
-    var _b = (0, react_1.useState)(true), isYoutubeLoading = _b[0], setIsYoutubeLoading = _b[1];
     var PLAYER_ID = "PLAYER_" + id;
-    var YOUTUBE_SCRIPT_ID = 'YOUTUBE_SCRIPT';
-    var YOUTUBE_SCRIPT_SRC = 'https://www.youtube.com/iframe_api';
     (0, react_1.useLayoutEffect)(function () {
-        var _a;
-        var youtubeScript = document.createElement('script');
-        youtubeScript.id = YOUTUBE_SCRIPT_ID;
-        youtubeScript.src = YOUTUBE_SCRIPT_SRC;
-        var firstScript = document.getElementsByTagName('script')[0];
-        (_a = firstScript.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(youtubeScript, firstScript);
-        youtubeScript.onload = function () {
-            var YT = window.YT;
-            YT.ready(function () {
-                onYouTubeIframeAPIReady();
-            });
-        };
-        return function () {
-            var youtubeScript = document.getElementById(YOUTUBE_SCRIPT_ID);
-            youtubeScript === null || youtubeScript === void 0 ? void 0 : youtubeScript.remove();
-        };
-    }, [src]);
-    function onYouTubeIframeAPIReady() {
-        try {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            var player = new window.YT.Player(PLAYER_ID, {
-                videoId: youtubeLinkParser_1.default.getId(src),
-                playerVars: {
-                    playsinline: 1,
-                    autoplay: 1,
-                    controls: 0
-                },
-                events: {
-                    onReady: onPlayerReady,
-                    onStateChange: onPlayerStateChange
-                }
-            });
-        }
-        catch (error) {
-            // eslint-disable-next-line no-console
-            console.error(error);
-        }
-    }
-    function onPlayerReady(event) {
-        event.target.mute();
-        event.target.playVideo();
-    }
-    function onPlayerStateChange(event) {
-        try {
-            var ENDED = 0;
-            var PLAYING = 1;
-            var TEMP_STOP = 2;
-            var BUFFERING = 3;
-            var data = event.data;
-            if (data === PLAYING) {
-                setTimeout(function () {
-                    setIsYoutubeLoading(false);
-                }, 100);
-            }
-            if (data === BUFFERING) {
-                setIsYoutubeLoading(true);
-            }
-            if (data === ENDED || data === TEMP_STOP) {
-                setIsYoutubeLoading(true);
-                event.target.playVideo();
-            }
-        }
-        catch (err) {
-            setIsYoutubeLoading(true);
-        }
-    }
+        YouTubeIframeHelper_1.YouTubeIframeHelper.getReady();
+        YouTubeIframeHelper_1.YouTubeIframeHelper.registerPlayer(PLAYER_ID, src);
+        return function () { return YouTubeIframeHelper_1.YouTubeIframeHelper.cleanUp(); };
+    }, [id, src]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        isYoutubeLoading && react_1.default.createElement(BlackScreen, null),
         react_1.default.createElement(S_IframeWrapper, null,
             react_1.default.createElement("div", { id: PLAYER_ID }))));
 }
-var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"])), function (_a) {
+var S_IframeWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  margin: auto;\n  max-width: 100%;\n  overflow: hidden;\n  pointer-events: none;\n  background-color: ", ";\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  background-color: ", ";\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"])), function (_a) {
     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"])));
 exports.default = YouTubeIframe;
-var templateObject_1, templateObject_2;
+var templateObject_1;

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

@@ -74,9 +74,9 @@ function TemplateA() {
                 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" }))),
-                    title && react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex }),
-                    description && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
+                        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 }),
+                    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" }))),
                     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 })))));

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

@@ -74,9 +74,9 @@ function TemplateB() {
                 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" }))),
-                    title && react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex }),
-                    description && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
+                        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 }),
+                    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" }))),
                     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 })))));

package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateA/TemplateA.js CHANGED Viewed

@@ -64,7 +64,7 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templa
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
+var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-align: left;\n  margin: ", " 0;\n"], ["\n  text-align: left;\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });

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

@@ -86,23 +86,14 @@ var S_ItemsWrapper = styled_components_1.default.div(templateObject_3 || (templa
     var theme = _a.theme;
     return theme.spacing.spacingG;
 });
-var S_ItemWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: ", " 0;\n\n  margin-top: ", ";\n"], ["\n  margin: ", " 0;\n\n  margin-top: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
-}, function (_a) {
-    var isFirstItem = _a.isFirstItem, theme = _a.theme;
-    if (isFirstItem) {
-        return 0;
-    }
-    return theme.spacing.spacingE;
-});
+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_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.spacingA;
+    return theme.spacing.spacingB;
 });
 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/types.d.ts CHANGED Viewed

@@ -153,16 +153,11 @@ export interface IItemDescription extends IDescription {
     text: string;
     color?: string;
 }
-export declare type SectionTemplateNamesType = 'INTRO' | 'CONTENTS' | 'FOOTER' | 'CONTENTS_CAROUSEL' | 'INFO_BOX';
-export declare type ConversionType = {
-    type: 'BUTTON' | 'CONTENTS' | 'NONE';
-    conversionUrl: string;
-    buttonText: string;
-};
-export declare type DynamicLayoutType = {
-    device: 'UW' | 'UM';
+export declare type DynamicLayoutProps = {
+    device: 'DESKTOP' | 'MOBILE';
     isPreview: boolean;
     sections: ISection[];
+    navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
 };
 export declare const MOCK_DATA: ISection[];
 export {};

package/dist/src/sub/utils/YouTubeIframeHelper.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+export declare class YouTubeIframeHelper {
+    static players: {
+        id: string;
+        src: string;
+    }[];
+    static getReady(): void;
+    static cleanUp(): void;
+    static registerPlayer(playerId: string, src: string): void;
+    private static onYouTubeIframeAPIReady;
+    private static onPlayerReady;
+    private static onPlayerStateChange;
+    private static concealPlayer;
+    private static revealPlayer;
+}

package/dist/src/sub/utils/YouTubeIframeHelper.js ADDED Viewed

@@ -0,0 +1,109 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YouTubeIframeHelper = void 0;
+var youtubeLinkParser_1 = __importDefault(require("./youtubeLinkParser"));
+var YOUTUBE_SCRIPT_ID = 'YOUTUBE_SCRIPT';
+var YOUTUBE_SCRIPT_SRC = 'https://www.youtube.com/iframe_api';
+var YouTubeIframeHelper = /** @class */ (function () {
+    function YouTubeIframeHelper() {
+    }
+    YouTubeIframeHelper.getReady = function () {
+        var _this = this;
+        var _a;
+        var script = document.getElementById(YOUTUBE_SCRIPT_ID);
+        if (!script) {
+            var newScript = document.createElement('script');
+            newScript.id = YOUTUBE_SCRIPT_ID;
+            newScript.src = YOUTUBE_SCRIPT_SRC;
+            var firstScript = document.getElementsByTagName('script')[0];
+            (_a = firstScript.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newScript, firstScript);
+            newScript.onload = function () {
+                var YT = window.YT;
+                YT.ready(function () {
+                    _this.onYouTubeIframeAPIReady();
+                });
+            };
+        }
+    };
+    YouTubeIframeHelper.cleanUp = function () {
+        var script = document.getElementById(YOUTUBE_SCRIPT_ID);
+        script === null || script === void 0 ? void 0 : script.remove();
+        this.players = [];
+    };
+    YouTubeIframeHelper.registerPlayer = function (playerId, src) {
+        this.players.push({ id: playerId, src: src });
+    };
+    YouTubeIframeHelper.onYouTubeIframeAPIReady = function () {
+        var _this = this;
+        this.players.forEach(function (player) {
+            try {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                var newPlayer = new window.YT.Player(player.id, {
+                    videoId: youtubeLinkParser_1.default.getId(player.src),
+                    playerVars: {
+                        playsinline: 1,
+                        autoplay: 1,
+                        controls: 0
+                    },
+                    events: {
+                        onReady: _this.onPlayerReady,
+                        onStateChange: _this.onPlayerStateChange
+                    }
+                });
+            }
+            catch (error) {
+                // eslint-disable-next-line no-console
+                console.error(error);
+            }
+        });
+    };
+    YouTubeIframeHelper.onPlayerReady = function (event) {
+        event.target.mute();
+        event.target.playVideo();
+        var player = event.target.h;
+        YouTubeIframeHelper.concealPlayer(player);
+    };
+    YouTubeIframeHelper.onPlayerStateChange = function (event) {
+        var UNSTARTED = -1;
+        var ENDED = 0;
+        var PLAYING = 1;
+        var PAUSED = 2;
+        var BUFFERING = 3;
+        // const CUED = 5; 동영상이 신호를 받고 재생할 준비가 되었을 때,
+        var stateCode = event.data;
+        var player = event.target.h;
+        try {
+            switch (stateCode) {
+                case PLAYING:
+                    YouTubeIframeHelper.revealPlayer(player);
+                    break;
+                case UNSTARTED:
+                case BUFFERING:
+                    YouTubeIframeHelper.concealPlayer(player);
+                    break;
+                case ENDED:
+                case PAUSED:
+                    YouTubeIframeHelper.concealPlayer(player);
+                    event.target.playVideo();
+                    break;
+            }
+        }
+        catch (err) {
+            YouTubeIframeHelper.concealPlayer(player);
+        }
+    };
+    YouTubeIframeHelper.concealPlayer = function (player) {
+        player.style.display = 'none';
+        return;
+    };
+    YouTubeIframeHelper.revealPlayer = function (player) {
+        player.style.display = 'initial';
+        return;
+    };
+    YouTubeIframeHelper.players = [];
+    return YouTubeIframeHelper;
+}());
+exports.YouTubeIframeHelper = YouTubeIframeHelper;

package/package.json CHANGED Viewed

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

package/release-note.md CHANGED Viewed

@@ -1,19 +1,12 @@
 # PDS-DEV-KIT-WEB-TEST Release Notes
-## [v0.0.16]
+## [v0.0.17]
 * sub
+  * DynamicLayout 유튜브쪽 문제 해결
   * DynamicLayout 디자인 디테일 수정
-    * desktop
-      * ContentSheet 타이틀 사이즈 48px 수정
-      * Footer -> 위아래 마진값 원래 값으로 돌리기 (64px)
-      * 캐러셀 섹션
-      * 아이템 제목과 본문 사이 간격 24px -> 12px
-      * 아이템 제목 styleTheme : subTitleBold로 적용
-      * 인포박스 섹션
-      * 아이템 타이틀 customFontSize : 22px로 적용
-      * 아이템 본문 styleTheme : body2Regular 적용
     * mobile
-      * 인트로, 푸터 섹션 제외 섹션 본문 18px / font-weight : 600으로 수정
-      * 섹션 제목과 본문 사이 간격 16px -> 24px
-      * 캐러셀, 인포박스 "아이템" 본문 14px -> customFontSize : 15px로 수정
-      * 푸터 위아래 마진값 원래 값으로 돌리기
+      * 캐러셀 섹션 2번 타입 아이템 본문이 보이지 않던 부분 수정
+      * 푸터 정렬이 제대로 안되는 이슈 수정
+      * 인포박스 아이템
+        * 제목과 본문사이 spacing-a -> spacing-b
+        * 아이템 사이 간격 spacing-e -> 40px