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

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

@@ -50,8 +50,7 @@ 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 hybrid_1 = require("../../../../../hybrid");
-var mobile_1 = require("../../../../../mobile");
+var pdsOriginal_1 = require("../../../common/components/pdsOriginal");
 var dynamicLayoutContext_1 = require("../../../dynamicLayoutContext");
 var YouTubeIframe_1 = __importDefault(require("../common/YouTubeIframe"));
 // SECTION
@@ -121,7 +120,7 @@ function Background() {
     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" }));
+                return (react_1.default.createElement(pdsOriginal_1.ImageView, { src: backgroundMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }));
             // case 'VIDEO':
             // NOTE VIDEO타입 배경은 최초 scope에서 제외
             // return <></>;
@@ -154,8 +153,8 @@ var S_YoutubeContainer = styled_components_1.default.div(templateObject_5 || (te
 // TITLE
 function Title(_a) {
     var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.4 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
-    return (react_1.default.createElement(S_TitleStyleWrapper, { color: color, lineHeight: lineHeight },
-        react_1.default.createElement(mobile_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
+    return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-section-element-name": "Title", color: color, lineHeight: lineHeight },
+        react_1.default.createElement(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
 }
 var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
@@ -167,8 +166,8 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (t
 // DESCRIPTION
 function Description(_a) {
     var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
-    return (react_1.default.createElement(S_DescriptionStyleWrapper, { color: color, fontWeight: fontWeight },
-        react_1.default.createElement(mobile_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
+    return (react_1.default.createElement(S_DescriptionStyleWrapper, { "x-dlayout-section-element-name": "Description", color: color, fontWeight: fontWeight },
+        react_1.default.createElement(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
 }
 var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
@@ -180,7 +179,7 @@ var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_7
 // IMAGE
 function Image(_a) {
     var imageViewProps = __rest(_a, []);
-    return react_1.default.createElement(hybrid_1.ImageView, __assign({}, imageViewProps, { scaleType: "cover" }));
+    return react_1.default.createElement(pdsOriginal_1.ImageView, __assign({ "x-dlayout-section-element-name": "Image" }, imageViewProps, { scaleType: "cover" }));
 }
 // BUTTON
 function Button(_a) {
@@ -195,32 +194,32 @@ function Button(_a) {
     };
     switch (buttonType) {
         case 'A':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 0, state: state, type: buttonType },
-                react_1.default.createElement(mobile_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'B':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 6, state: state, type: buttonType },
-                react_1.default.createElement(mobile_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'C':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 14, state: state, type: buttonType },
-                react_1.default.createElement(mobile_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'D':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 24, state: state, type: buttonType },
-                react_1.default.createElement(mobile_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'E':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 0, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(mobile_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'F':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 6, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(mobile_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'G':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 14, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(mobile_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'H':
-            return (react_1.default.createElement(S_MainButtonBox, { backgroundColor: backgroundColor, color: textColor, radius: 24, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
-                react_1.default.createElement(mobile_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
+            return (react_1.default.createElement(S_MainButtonBox, { "x-dlayout-section-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType },
+                react_1.default.createElement(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton })));
         case 'I':
             return (react_1.default.createElement(S_TextButtonBox, { color: textColor, state: state },
-                react_1.default.createElement(mobile_1.M_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state })));
+                react_1.default.createElement(pdsOriginal_1.M_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state })));
         default:
             return react_1.default.createElement("button", { type: "button" }, "wrong type");
     }

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

@@ -28,12 +28,12 @@ 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 TouTubeLinkParser_1 = __importDefault(require("../../../common/utils/TouTubeLinkParser"));
 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_ID = "YOUTUBE_SCRIPT_" + id;
     var YOUTUBE_SCRIPT_SRC = 'https://www.youtube.com/iframe_api';
     (0, react_1.useLayoutEffect)(function () {
         var _a;
@@ -57,7 +57,7 @@ function YouTubeIframe(_a) {
         try {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             var player = new window.YT.Player(PLAYER_ID, {
-                videoId: youtubeLinkParser_1.default.getId(src),
+                videoId: TouTubeLinkParser_1.default.getId(src),
                 playerVars: {
                     playsinline: 1,
                     autoplay: 1,

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

@@ -30,7 +30,7 @@ var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function ContentsCarouselSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(components_1.Section, __assign({}, props),
+    return (react_1.default.createElement(components_1.Section, __assign({ "x-dlayout-section-type": "ContentsCarousel" }, props),
         react_1.default.createElement(TemplateMatcher, { styleTemplate: props.template })));
 }
 function TemplateMatcher(_a) {

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

@@ -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

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

@@ -30,7 +30,7 @@ var Section_1 = require("../../components/Section");
 var templates_1 = require("./templates");
 function ContentsSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(Section_1.Section, __assign({}, props),
+    return (react_1.default.createElement(Section_1.Section, __assign({ "x-dlayout-section-type": "Contents" }, props),
         react_1.default.createElement(TemplateMather, { styleTemplate: props.template })));
 }
 function TemplateMather(_a) {

package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/FooterSection.js

@@ -30,7 +30,7 @@ var Section_1 = __importDefault(require("../../components/Section/Section"));
 var templates_1 = require("./templates");
 function FooterSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(Section_1.default, __assign({}, props),
+    return (react_1.default.createElement(Section_1.default, __assign({ "x-dlayout-section-type": "Footer" }, props),
         react_1.default.createElement(TemplateMather, { styleTemplate: props.template })));
 }
 function TemplateMather(_a) {

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

@@ -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/InfoBoxSection.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ISection } from '../../../types';
-declare function ContentsSection({ ...props }: ISection): JSX.Element;
-export default ContentsSection;
+declare function InfoBoxSection({ ...props }: ISection): JSX.Element;
+export default InfoBoxSection;

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

@@ -28,9 +28,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var Section_1 = require("../../components/Section");
 var templates_1 = require("./templates");
-function ContentsSection(_a) {
+function InfoBoxSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(Section_1.Section, __assign({}, props),
+    return (react_1.default.createElement(Section_1.Section, __assign({ "x-dlayout-section-type": "InfoBox" }, props),
         react_1.default.createElement(TemplateMather, { styleTemplate: props.template })));
 }
 function TemplateMather(_a) {
@@ -42,4 +42,4 @@ function TemplateMather(_a) {
             return react_1.default.createElement("div", null, "wrong template type");
     }
 }
-exports.default = ContentsSection;
+exports.default = InfoBoxSection;

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

@@ -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/mobile/sections/IntroSection/IntroSection.js

@@ -30,7 +30,7 @@ var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function IntroSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(components_1.Section, __assign({}, props),
+    return (react_1.default.createElement(components_1.Section, __assign({ "x-dlayout-section-type": "Intro" }, props),
         react_1.default.createElement(TemplateMatcher, { styleTemplate: props.template })));
 }
 function TemplateMatcher(_a) {

package/dist/src/sub/DynamicLayout/types.d.ts

@@ -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/package.json

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

package/release-note.md

@@ -1,19 +1,8 @@
 # PDS-DEV-KIT-WEB-TEST Release Notes
-## [v0.0.16]
+## [v0.0.18]
 
 * sub
-  * DynamicLayout 디자인 디테일 수정
-    * desktop
-      * ContentSheet 타이틀 사이즈 48px 수정
-      * Footer -> 위아래 마진값 원래 값으로 돌리기 (64px)
-      * 캐러셀 섹션
-      * 아이템 제목과 본문 사이 간격 24px -> 12px
-      * 아이템 제목 styleTheme : subTitleBold로 적용
-      * 인포박스 섹션
-      * 아이템 타이틀 customFontSize : 22px로 적용
-      * 아이템 본문 styleTheme : body2Regular 적용
-    * mobile
-      * 인트로, 푸터 섹션 제외 섹션 본문 18px / font-weight : 600으로 수정
-      * 섹션 제목과 본문 사이 간격 16px -> 24px
-      * 캐러셀, 인포박스 "아이템" 본문 14px -> customFontSize : 15px로 수정
-      * 푸터 위아래 마진값 원래 값으로 돌리기
+  * DynamicLayout 수정
+    * 섹션 및 아이템 컴포넌트에 key값 부여
+    * YouTubeIframe 리팩토링했던 부분 롤백
+    * preview모드일때 HTML Reader에서 클릭이 되는 이슈 수정

package/dist/src/sub/utils/youtubeLinkParser.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var YoutubeLinkParser = /** @class */ (function () {
-    function YoutubeLinkParser() {
-    }
-    YoutubeLinkParser.getId = function (src) {
-        var _a;
-        var embedUrl = src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/);
-        var shareUrl = src.match(/youtu.be\/(.{11})/);
-        return (_a = (embedUrl || shareUrl)) === null || _a === void 0 ? void 0 : _a.pop();
-    };
-    YoutubeLinkParser.getThumbnailUrl = function (src) {
-        return "https://img.youtube.com/vi/" + YoutubeLinkParser.getId(src) + "/0.jpg";
-    };
-    YoutubeLinkParser.getEmbedUrl = function (src) {
-        return "https://www.youtube.com/embed/" + YoutubeLinkParser.getId(src);
-    };
-    YoutubeLinkParser.getEmbedUrlWithLoop = function (src) {
-        return "https://www.youtube.com/embed/" + YoutubeLinkParser.getId(src) + "?autoplay=1&mute=1&loop=1&color=white&controls=0&modestbranding=1&playsinline=1&rel=0&playlist=" + this.getId(src);
-    };
-    return YoutubeLinkParser;
-}());
-exports.default = YoutubeLinkParser;