pds-dev-kit-web-test 0.0.15 → 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 (25) hide show
  1. package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts +1 -4
  2. package/dist/src/sub/DynamicLayout/DynamicLayout.js +2 -2
  3. package/dist/src/sub/DynamicLayout/desktop/components/common/YouTubeIframe.js +7 -74
  4. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js +1 -1
  5. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js +3 -5
  6. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateB/TemplateB.js +1 -1
  7. package/dist/src/sub/DynamicLayout/desktop/sections/FooterSection/templates/TemplateA/TemplateA.js +4 -1
  8. package/dist/src/sub/DynamicLayout/desktop/sections/FooterSection/templates/TemplateB/TemplateB.js +4 -1
  9. package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/templates/TemplateA/TemplateA.js +2 -2
  10. package/dist/src/sub/DynamicLayout/dynamicLayoutContext.d.ts +1 -5
  11. package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.d.ts +3 -1
  12. package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.js +6 -3
  13. package/dist/src/sub/DynamicLayout/mobile/components/common/YouTubeIframe.js +7 -74
  14. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js +7 -7
  15. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js +7 -7
  16. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateA/TemplateA.js +3 -3
  17. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateB/TemplateB.js +2 -2
  18. package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateA/TemplateA.js +3 -3
  19. package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateB/TemplateB.js +2 -2
  20. package/dist/src/sub/DynamicLayout/mobile/sections/InfoBoxSection/templates/TemplateA/TemplateA.js +5 -14
  21. package/dist/src/sub/DynamicLayout/types.d.ts +3 -8
  22. package/dist/src/sub/utils/YouTubeIframeHelper.d.ts +14 -0
  23. package/dist/src/sub/utils/YouTubeIframeHelper.js +109 -0
  24. package/package.json +1 -1
  25. package/release-note.md +7 -15
package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts CHANGED
@@ -1,7 +1,4 @@
1
1
  /// <reference types="react" />
2
- import { DynamicLayoutType } from './types';
3
- declare type DynamicLayoutProps = DynamicLayoutType & {
4
- navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
5
- };
2
+ import { DynamicLayoutProps } from './types';
6
3
  declare function DynamicLayout({ device, isPreview, sections, navigationHandler }: DynamicLayoutProps): JSX.Element;
7
4
  export default DynamicLayout;
package/dist/src/sub/DynamicLayout/DynamicLayout.js CHANGED
@@ -10,8 +10,8 @@ var mobile_1 = require("./mobile");
10
10
  function DynamicLayout(_a) {
11
11
  var device = _a.device, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler;
12
12
  return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { isPreview: isPreview, navigationHandler: navigationHandler } }, {
13
- UM: react_1.default.createElement(mobile_1.MobileWeb, { sections: sections }),
14
- UW: react_1.default.createElement(desktop_1.DesktopWeb, { sections: sections })
13
+ MOBILE: react_1.default.createElement(mobile_1.MobileWeb, { sections: sections }),
14
+ DESKTOP: react_1.default.createElement(desktop_1.DesktopWeb, { sections: sections })
15
15
  }[device]));
16
16
  }
17
17
  exports.default = DynamicLayout;
package/dist/src/sub/DynamicLayout/desktop/components/common/YouTubeIframe.js CHANGED
@@ -28,89 +28,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importStar(require("react"));
30
30
  var styled_components_1 = __importDefault(require("styled-components"));
31
- var youtubeLinkParser_1 = __importDefault(require("../../../../utils/youtubeLinkParser"));
31
+ var YouTubeIframeHelper_1 = require("../../../../utils/YouTubeIframeHelper");
32
32
  function YouTubeIframe(_a) {
33
33
  var id = _a.id, src = _a.src;
34
- var _b = (0, react_1.useState)(true), isYoutubeLoading = _b[0], setIsYoutubeLoading = _b[1];
35
34
  var PLAYER_ID = "PLAYER_" + id;
36
- var YOUTUBE_SCRIPT_ID = 'YOUTUBE_SCRIPT';
37
- var YOUTUBE_SCRIPT_SRC = 'https://www.youtube.com/iframe_api';
38
35
  (0, react_1.useLayoutEffect)(function () {
39
- var _a;
40
- var youtubeScript = document.createElement('script');
41
- youtubeScript.id = YOUTUBE_SCRIPT_ID;
42
- youtubeScript.src = YOUTUBE_SCRIPT_SRC;
43
- var firstScript = document.getElementsByTagName('script')[0];
44
- (_a = firstScript.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(youtubeScript, firstScript);
45
- youtubeScript.onload = function () {
46
- var YT = window.YT;
47
- YT.ready(function () {
48
- onYouTubeIframeAPIReady();
49
- });
50
- };
51
- return function () {
52
- var youtubeScript = document.getElementById(YOUTUBE_SCRIPT_ID);
53
- youtubeScript === null || youtubeScript === void 0 ? void 0 : youtubeScript.remove();
54
- };
55
- }, [src]);
56
- function onYouTubeIframeAPIReady() {
57
- try {
58
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
59
- var player = new window.YT.Player(PLAYER_ID, {
60
- videoId: youtubeLinkParser_1.default.getId(src),
61
- playerVars: {
62
- playsinline: 1,
63
- autoplay: 1,
64
- controls: 0
65
- },
66
- events: {
67
- onReady: onPlayerReady,
68
- onStateChange: onPlayerStateChange
69
- }
70
- });
71
- }
72
- catch (error) {
73
- // eslint-disable-next-line no-console
74
- console.error(error);
75
- }
76
- }
77
- function onPlayerReady(event) {
78
- event.target.mute();
79
- event.target.playVideo();
80
- }
81
- function onPlayerStateChange(event) {
82
- try {
83
- var ENDED = 0;
84
- var PLAYING = 1;
85
- var TEMP_STOP = 2;
86
- var BUFFERING = 3;
87
- var data = event.data;
88
- if (data === PLAYING) {
89
- setTimeout(function () {
90
- setIsYoutubeLoading(false);
91
- }, 100);
92
- }
93
- if (data === BUFFERING) {
94
- setIsYoutubeLoading(true);
95
- }
96
- if (data === ENDED || data === TEMP_STOP) {
97
- setIsYoutubeLoading(true);
98
- event.target.playVideo();
99
- }
100
- }
101
- catch (err) {
102
- setIsYoutubeLoading(true);
103
- }
104
- }
36
+ YouTubeIframeHelper_1.YouTubeIframeHelper.getReady();
37
+ YouTubeIframeHelper_1.YouTubeIframeHelper.registerPlayer(PLAYER_ID, src);
38
+ return function () { return YouTubeIframeHelper_1.YouTubeIframeHelper.cleanUp(); };
39
+ }, [id, src]);
105
40
  return (react_1.default.createElement(react_1.default.Fragment, null,
106
- isYoutubeLoading && react_1.default.createElement(BlackScreen, null),
107
41
  react_1.default.createElement(S_IframeWrapper, null,
108
42
  react_1.default.createElement("div", { id: PLAYER_ID }))));
109
43
  }
110
- 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) {
44
+ 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) {
111
45
  var theme = _a.theme;
112
46
  return theme.ui_62;
113
47
  });
114
- 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"])));
115
48
  exports.default = YouTubeIframe;
116
- var templateObject_1, templateObject_2;
49
+ var templateObject_1;
package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js CHANGED
@@ -83,7 +83,7 @@ function TemplateA() {
83
83
  return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
84
84
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
85
85
  react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive", shapeType: "rectangle" }))),
86
- itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, styleTheme: "body1Bold" })),
86
+ itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, styleTheme: "subTitleBold" })),
87
87
  itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
88
88
  react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
89
89
  itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js CHANGED
@@ -39,7 +39,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
40
  var react_1 = __importStar(require("react"));
41
41
  var styled_components_1 = __importDefault(require("styled-components"));
42
- var hybrid_1 = require("../../../../../../../hybrid");
43
42
  var components_1 = require("../../../../components");
44
43
  function TemplateB() {
45
44
  var sectionContext = (0, react_1.useContext)(components_1.Section.context);
@@ -78,15 +77,14 @@ function TemplateB() {
78
77
  ? 'autoplay'
79
78
  : carouselInfiniteLoopMode === 'USE'
80
79
  ? 'loop'
81
- : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-16px" }, filteredItems.map(function (item) {
80
+ : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-24px" }, filteredItems.map(function (item) {
82
81
  var id = item.id;
83
82
  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;
84
83
  return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
85
84
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
86
- react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 24 }))),
87
- itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, styleTheme: "body2Bold" })),
85
+ react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 16 }))),
86
+ itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, styleTheme: "subTitleBold" })),
88
87
  itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
89
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c" }),
90
88
  react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
91
89
  itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
92
90
  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/desktop/sections/ContentsSection/templates/TemplateB/TemplateB.js CHANGED
@@ -37,7 +37,7 @@ function TemplateB() {
37
37
  return (react_1.default.createElement(S_ContentsAreaBox, { hasNothing: hasNothing },
38
38
  react_1.default.createElement(S_ContentsArea, null,
39
39
  react_1.default.createElement(S_ContentsBodyWrapper, null,
40
- title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "60px", customFontWeight: "bold" })),
40
+ title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })),
41
41
  description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
42
42
  react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "headingBold" }))),
43
43
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
package/dist/src/sub/DynamicLayout/desktop/sections/FooterSection/templates/TemplateA/TemplateA.js CHANGED
@@ -57,7 +57,10 @@ function TemplateA() {
57
57
  react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
58
58
  filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex }))))));
59
59
  }
60
- var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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: 160px auto;\n ", "\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: 160px auto;\n ", "\n"])), function (_a) {
60
+ var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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: ", " auto;\n ", "\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: ", " auto;\n ", "\n"])), function (_a) {
61
+ var theme = _a.theme;
62
+ return theme.spacing.spacingH;
63
+ }, function (_a) {
61
64
  var hasNothing = _a.hasNothing;
62
65
  return hasNothing && 'margin: 0';
63
66
  });
package/dist/src/sub/DynamicLayout/desktop/sections/FooterSection/templates/TemplateB/TemplateB.js CHANGED
@@ -57,7 +57,10 @@ function TemplateB() {
57
57
  react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
58
58
  filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex, textAlign: "center" }))))));
59
59
  }
60
- var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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: 160px auto;\n ", "\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: 160px auto;\n ", "\n"])), function (_a) {
60
+ var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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: ", " auto;\n ", "\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: ", " auto;\n ", "\n"])), function (_a) {
61
+ var theme = _a.theme;
62
+ return theme.spacing.spacingH;
63
+ }, function (_a) {
61
64
  var hasNothing = _a.hasNothing;
62
65
  return hasNothing && 'margin: 0';
63
66
  });
package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/templates/TemplateA/TemplateA.js CHANGED
@@ -65,11 +65,11 @@ function TemplateA() {
65
65
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
66
66
  react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 120, ratio: "1_1", shapeType: "rectangle", scaleType: "cover" }))),
67
67
  react_1.default.createElement(S_ItemBodyWrapper, null,
68
- itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", styleTheme: "headingBold" })),
68
+ itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "22px", customFontWeight: "bold" })),
69
69
  itemDescription && (react_1.default.createElement(react_1.default.Fragment, null,
70
70
  react_1.default.createElement(S_CustomDividerBox, null,
71
71
  react_1.default.createElement(S_CustomWidthDivider, null)),
72
- react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body1Regular" })))))));
72
+ react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body2Regular" })))))));
73
73
  }))),
74
74
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
75
75
  react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
package/dist/src/sub/DynamicLayout/dynamicLayoutContext.d.ts CHANGED
@@ -1,7 +1,3 @@
1
1
  /// <reference types="react" />
2
- import type { DynamicLayoutType } from './types';
3
- declare type DynamicLayoutProps = DynamicLayoutType & {
4
- navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
5
- };
2
+ import type { DynamicLayoutProps } from './types';
6
3
  export declare const dynamicLayoutContext: import("react").Context<Pick<DynamicLayoutProps, "isPreview" | "navigationHandler">>;
7
- export {};
package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.d.ts CHANGED
@@ -9,7 +9,9 @@ declare namespace Section {
9
9
  var Title: ({ text, color, lineHeight, ...textLabelProps }: ISectionTitle & TextLabelProps & {
10
10
  lineHeight?: number | undefined;
11
11
  }) => JSX.Element;
12
- var Description: ({ text, color, ...textLabelProps }: ISectionDescription & TextLabelProps) => JSX.Element;
12
+ var Description: ({ text, color, fontWeight, ...textLabelProps }: ISectionDescription & TextLabelProps & {
13
+ fontWeight?: string | undefined;
14
+ }) => JSX.Element;
13
15
  var Image: ({ ...imageViewProps }: ImageViewProps) => JSX.Element;
14
16
  var Button: ({ buttonType, backgroundColor, textColor, text, linkType, src, state, borderColor }: ISectionButton) => JSX.Element;
15
17
  var context: React.Context<ISection | null>;
package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.js CHANGED
@@ -166,13 +166,16 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (t
166
166
  });
167
167
  // DESCRIPTION
168
168
  function Description(_a) {
169
- var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
170
- return (react_1.default.createElement(S_DescriptionStyleWrapper, { color: color },
169
+ var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
170
+ return (react_1.default.createElement(S_DescriptionStyleWrapper, { color: color, fontWeight: fontWeight },
171
171
  react_1.default.createElement(mobile_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
172
172
  }
173
- var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n & > div {\n color: ", ";\n }\n"], ["\n & > div {\n color: ", ";\n }\n"])), function (_a) {
173
+ 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) {
174
174
  var color = _a.color;
175
175
  return color;
176
+ }, function (_a) {
177
+ var fontWeight = _a.fontWeight;
178
+ return fontWeight && "font-weight : " + fontWeight + ";";
176
179
  });
177
180
  // IMAGE
178
181
  function Image(_a) {
package/dist/src/sub/DynamicLayout/mobile/components/common/YouTubeIframe.js CHANGED
@@ -28,89 +28,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importStar(require("react"));
30
30
  var styled_components_1 = __importDefault(require("styled-components"));
31
- var youtubeLinkParser_1 = __importDefault(require("../../../../utils/youtubeLinkParser"));
31
+ var YouTubeIframeHelper_1 = require("../../../../utils/YouTubeIframeHelper");
32
32
  function YouTubeIframe(_a) {
33
33
  var id = _a.id, src = _a.src;
34
- var _b = (0, react_1.useState)(true), isYoutubeLoading = _b[0], setIsYoutubeLoading = _b[1];
35
34
  var PLAYER_ID = "PLAYER_" + id;
36
- var YOUTUBE_SCRIPT_ID = 'YOUTUBE_SCRIPT';
37
- var YOUTUBE_SCRIPT_SRC = 'https://www.youtube.com/iframe_api';
38
35
  (0, react_1.useLayoutEffect)(function () {
39
- var _a;
40
- var youtubeScript = document.createElement('script');
41
- youtubeScript.id = YOUTUBE_SCRIPT_ID;
42
- youtubeScript.src = YOUTUBE_SCRIPT_SRC;
43
- var firstScript = document.getElementsByTagName('script')[0];
44
- (_a = firstScript.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(youtubeScript, firstScript);
45
- youtubeScript.onload = function () {
46
- var YT = window.YT;
47
- YT.ready(function () {
48
- onYouTubeIframeAPIReady();
49
- });
50
- };
51
- return function () {
52
- var youtubeScript = document.getElementById(YOUTUBE_SCRIPT_ID);
53
- youtubeScript === null || youtubeScript === void 0 ? void 0 : youtubeScript.remove();
54
- };
55
- }, [src]);
56
- function onYouTubeIframeAPIReady() {
57
- try {
58
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
59
- var player = new window.YT.Player(PLAYER_ID, {
60
- videoId: youtubeLinkParser_1.default.getId(src),
61
- playerVars: {
62
- playsinline: 1,
63
- autoplay: 1,
64
- controls: 0
65
- },
66
- events: {
67
- onReady: onPlayerReady,
68
- onStateChange: onPlayerStateChange
69
- }
70
- });
71
- }
72
- catch (error) {
73
- // eslint-disable-next-line no-console
74
- console.error(error);
75
- }
76
- }
77
- function onPlayerReady(event) {
78
- event.target.mute();
79
- event.target.playVideo();
80
- }
81
- function onPlayerStateChange(event) {
82
- try {
83
- var ENDED = 0;
84
- var PLAYING = 1;
85
- var TEMP_STOP = 2;
86
- var BUFFERING = 3;
87
- var data = event.data;
88
- if (data === PLAYING) {
89
- setTimeout(function () {
90
- setIsYoutubeLoading(false);
91
- }, 100);
92
- }
93
- if (data === BUFFERING) {
94
- setIsYoutubeLoading(true);
95
- }
96
- if (data === ENDED || data === TEMP_STOP) {
97
- setIsYoutubeLoading(true);
98
- event.target.playVideo();
99
- }
100
- }
101
- catch (err) {
102
- setIsYoutubeLoading(true);
103
- }
104
- }
36
+ YouTubeIframeHelper_1.YouTubeIframeHelper.getReady();
37
+ YouTubeIframeHelper_1.YouTubeIframeHelper.registerPlayer(PLAYER_ID, src);
38
+ return function () { return YouTubeIframeHelper_1.YouTubeIframeHelper.cleanUp(); };
39
+ }, [id, src]);
105
40
  return (react_1.default.createElement(react_1.default.Fragment, null,
106
- isYoutubeLoading && react_1.default.createElement(BlackScreen, null),
107
41
  react_1.default.createElement(S_IframeWrapper, null,
108
42
  react_1.default.createElement("div", { id: PLAYER_ID }))));
109
43
  }
110
- 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) {
44
+ 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) {
111
45
  var theme = _a.theme;
112
46
  return theme.ui_62;
113
47
  });
114
- 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"])));
115
48
  exports.default = YouTubeIframe;
116
- var templateObject_1, templateObject_2;
49
+ var templateObject_1;
package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js CHANGED
@@ -61,7 +61,7 @@ function TemplateA() {
61
61
  title && (react_1.default.createElement(S_SectionTitleBox, null,
62
62
  react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" }))),
63
63
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
64
- react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold" }))),
64
+ react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
65
65
  buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
66
66
  react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
67
67
  filteredItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
@@ -74,10 +74,10 @@ function TemplateA() {
74
74
  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;
75
75
  return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
76
76
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
77
- react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive" }))),
78
- title && react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex }),
79
- description && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
80
- react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "caption1Regular" }))),
77
+ react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive", shapeType: "rectangle" }))),
78
+ itemTitle && react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex }),
79
+ itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
80
+ react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, customFontSize: "15px" }))),
81
81
  itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
82
82
  react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
83
83
  }))))));
@@ -97,11 +97,11 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templa
97
97
  });
98
98
  var S_SectionTitleBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
99
99
  var theme = _a.theme;
100
- return theme.spacing.spacingD;
100
+ return theme.spacing.spacingE;
101
101
  });
102
102
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
103
103
  var theme = _a.theme;
104
- return theme.spacing.spacingD;
104
+ return theme.spacing.spacingE;
105
105
  });
106
106
  var S_SectionButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: ", " 0;\n\n & > div {\n width: fit-content;\n margin: 0 auto;\n }\n"], ["\n margin: ", " 0;\n\n & > div {\n width: fit-content;\n margin: 0 auto;\n }\n"])), function (_a) {
107
107
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js CHANGED
@@ -61,7 +61,7 @@ function TemplateB() {
61
61
  title && (react_1.default.createElement(S_SectionTitleBox, null,
62
62
  react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" }))),
63
63
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
64
- react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold" }))),
64
+ react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
65
65
  buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
66
66
  react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
67
67
  filteredItems && (react_1.default.createElement(S_CarouselBox, null,
@@ -74,10 +74,10 @@ function TemplateB() {
74
74
  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;
75
75
  return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
76
76
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
77
- react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive" }))),
78
- title && react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex }),
79
- description && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
80
- react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "caption1Regular" }))),
77
+ react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 16 }))),
78
+ itemTitle && react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex }),
79
+ itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
80
+ react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, customFontSize: "15px" }))),
81
81
  itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
82
82
  react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
83
83
  }))))));
@@ -97,11 +97,11 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templa
97
97
  });
98
98
  var S_SectionTitleBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
99
99
  var theme = _a.theme;
100
- return theme.spacing.spacingD;
100
+ return theme.spacing.spacingE;
101
101
  });
102
102
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
103
103
  var theme = _a.theme;
104
- return theme.spacing.spacingD;
104
+ return theme.spacing.spacingE;
105
105
  });
106
106
  var S_SectionButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: ", " 0;\n\n & > div {\n width: fit-content;\n margin: 0 auto;\n }\n"], ["\n margin: ", " 0;\n\n & > div {\n width: fit-content;\n margin: 0 auto;\n }\n"])), function (_a) {
107
107
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateA/TemplateA.js CHANGED
@@ -40,7 +40,7 @@ function TemplateA() {
40
40
  title && (react_1.default.createElement(S_SectionTitleBox, null,
41
41
  react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold" }))),
42
42
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
43
- react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", customFontWeight: "bold" }))),
43
+ react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "18px", fontWeight: "600" }))),
44
44
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
45
45
  react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
46
46
  }
@@ -57,11 +57,11 @@ var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateOb
57
57
  });
58
58
  var S_SectionTitleBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
59
59
  var theme = _a.theme;
60
- return theme.spacing.spacingD;
60
+ return theme.spacing.spacingE;
61
61
  });
62
62
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
63
63
  var theme = _a.theme;
64
- return theme.spacing.spacingD;
64
+ return theme.spacing.spacingE;
65
65
  });
66
66
  var S_ButtonBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
67
67
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateB/TemplateB.js CHANGED
@@ -37,7 +37,7 @@ function TemplateB() {
37
37
  return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
38
38
  title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold" })),
39
39
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
40
- react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", customFontWeight: "bold" }))),
40
+ react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "18px", fontWeight: "600" }))),
41
41
  sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
42
42
  react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover", shapeType: "rectangle" }))))),
43
43
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
@@ -56,7 +56,7 @@ var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateOb
56
56
  });
57
57
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
58
58
  var theme = _a.theme;
59
- return theme.spacing.spacingD;
59
+ return theme.spacing.spacingE;
60
60
  });
61
61
  var S_ButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
62
62
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateA/TemplateA.js CHANGED
@@ -58,13 +58,13 @@ function TemplateA() {
58
58
  filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex }))))));
59
59
  }
60
60
  var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: ", " 0;\n padding: 0 ", ";\n"], ["\n margin: ", " 0;\n padding: 0 ", ";\n"])), function (_a) {
61
- var hasNothing = _a.hasNothing;
62
- return (hasNothing ? 0 : '80px');
61
+ var theme = _a.theme, hasNothing = _a.hasNothing;
62
+ return (hasNothing ? 0 : theme.spacing.spacingG);
63
63
  }, function (_a) {
64
64
  var theme = _a.theme;
65
65
  return theme.spacing.spacingE;
66
66
  });
67
- var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
67
+ 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) {
68
68
  var theme = _a.theme;
69
69
  return theme.spacing.spacingE;
70
70
  });
package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateB/TemplateB.js CHANGED
@@ -58,8 +58,8 @@ function TemplateB() {
58
58
  filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex, textAlign: "center" }))))));
59
59
  }
60
60
  var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: ", " 0;\n padding: 0 ", ";\n"], ["\n margin: ", " 0;\n padding: 0 ", ";\n"])), function (_a) {
61
- var hasNothing = _a.hasNothing;
62
- return (hasNothing ? 0 : '80px');
61
+ var theme = _a.theme, hasNothing = _a.hasNothing;
62
+ return (hasNothing ? 0 : theme.spacing.spacingG);
63
63
  }, function (_a) {
64
64
  var theme = _a.theme;
65
65
  return theme.spacing.spacingE;
package/dist/src/sub/DynamicLayout/mobile/sections/InfoBoxSection/templates/TemplateA/TemplateA.js CHANGED
@@ -56,7 +56,7 @@ function TemplateA() {
56
56
  return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
57
57
  title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" })),
58
58
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
59
- react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold" }))),
59
+ react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
60
60
  filteredItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, null, filteredItems.map(function (item, index) {
61
61
  var id = item.id;
62
62
  var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc;
@@ -66,7 +66,7 @@ function TemplateA() {
66
66
  react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 80, ratio: "1_1", scaleType: "cover" }))),
67
67
  itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center" })),
68
68
  itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, null,
69
- react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "caption1Regular" }))))));
69
+ react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", customFontSize: "15px" }))))));
70
70
  }))),
71
71
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
72
72
  react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
@@ -80,29 +80,20 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templa
80
80
  });
81
81
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
82
82
  var theme = _a.theme;
83
- return theme.spacing.spacingD;
83
+ return theme.spacing.spacingE;
84
84
  });
85
85
  var S_ItemsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
86
86
  var theme = _a.theme;
87
87
  return theme.spacing.spacingG;
88
88
  });
89
- 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) {
90
- var theme = _a.theme;
91
- return theme.spacing.spacingE;
92
- }, function (_a) {
93
- var isFirstItem = _a.isFirstItem, theme = _a.theme;
94
- if (isFirstItem) {
95
- return 0;
96
- }
97
- return theme.spacing.spacingE;
98
- });
89
+ var S_ItemWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 40px 0;\n"], ["\n margin: 40px 0;\n"])));
99
90
  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) {
100
91
  var theme = _a.theme;
101
92
  return theme.spacing.spacingC;
102
93
  });
103
94
  var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
104
95
  var theme = _a.theme;
105
- return theme.spacing.spacingA;
96
+ return theme.spacing.spacingB;
106
97
  });
107
98
  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) {
108
99
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/types.d.ts CHANGED
@@ -153,16 +153,11 @@ export interface IItemDescription extends IDescription {
153
153
  text: string;
154
154
  color?: string;
155
155
  }
156
- export declare type SectionTemplateNamesType = 'INTRO' | 'CONTENTS' | 'FOOTER' | 'CONTENTS_CAROUSEL' | 'INFO_BOX';
157
- export declare type ConversionType = {
158
- type: 'BUTTON' | 'CONTENTS' | 'NONE';
159
- conversionUrl: string;
160
- buttonText: string;
161
- };
162
- export declare type DynamicLayoutType = {
163
- device: 'UW' | 'UM';
156
+ export declare type DynamicLayoutProps = {
157
+ device: 'DESKTOP' | 'MOBILE';
164
158
  isPreview: boolean;
165
159
  sections: ISection[];
160
+ navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
166
161
  };
167
162
  export declare const MOCK_DATA: ISection[];
168
163
  export {};
package/dist/src/sub/utils/YouTubeIframeHelper.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ export declare class YouTubeIframeHelper {
2
+ static players: {
3
+ id: string;
4
+ src: string;
5
+ }[];
6
+ static getReady(): void;
7
+ static cleanUp(): void;
8
+ static registerPlayer(playerId: string, src: string): void;
9
+ private static onYouTubeIframeAPIReady;
10
+ private static onPlayerReady;
11
+ private static onPlayerStateChange;
12
+ private static concealPlayer;
13
+ private static revealPlayer;
14
+ }
package/dist/src/sub/utils/YouTubeIframeHelper.js ADDED
@@ -0,0 +1,109 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.YouTubeIframeHelper = void 0;
7
+ var youtubeLinkParser_1 = __importDefault(require("./youtubeLinkParser"));
8
+ var YOUTUBE_SCRIPT_ID = 'YOUTUBE_SCRIPT';
9
+ var YOUTUBE_SCRIPT_SRC = 'https://www.youtube.com/iframe_api';
10
+ var YouTubeIframeHelper = /** @class */ (function () {
11
+ function YouTubeIframeHelper() {
12
+ }
13
+ YouTubeIframeHelper.getReady = function () {
14
+ var _this = this;
15
+ var _a;
16
+ var script = document.getElementById(YOUTUBE_SCRIPT_ID);
17
+ if (!script) {
18
+ var newScript = document.createElement('script');
19
+ newScript.id = YOUTUBE_SCRIPT_ID;
20
+ newScript.src = YOUTUBE_SCRIPT_SRC;
21
+ var firstScript = document.getElementsByTagName('script')[0];
22
+ (_a = firstScript.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newScript, firstScript);
23
+ newScript.onload = function () {
24
+ var YT = window.YT;
25
+ YT.ready(function () {
26
+ _this.onYouTubeIframeAPIReady();
27
+ });
28
+ };
29
+ }
30
+ };
31
+ YouTubeIframeHelper.cleanUp = function () {
32
+ var script = document.getElementById(YOUTUBE_SCRIPT_ID);
33
+ script === null || script === void 0 ? void 0 : script.remove();
34
+ this.players = [];
35
+ };
36
+ YouTubeIframeHelper.registerPlayer = function (playerId, src) {
37
+ this.players.push({ id: playerId, src: src });
38
+ };
39
+ YouTubeIframeHelper.onYouTubeIframeAPIReady = function () {
40
+ var _this = this;
41
+ this.players.forEach(function (player) {
42
+ try {
43
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
44
+ var newPlayer = new window.YT.Player(player.id, {
45
+ videoId: youtubeLinkParser_1.default.getId(player.src),
46
+ playerVars: {
47
+ playsinline: 1,
48
+ autoplay: 1,
49
+ controls: 0
50
+ },
51
+ events: {
52
+ onReady: _this.onPlayerReady,
53
+ onStateChange: _this.onPlayerStateChange
54
+ }
55
+ });
56
+ }
57
+ catch (error) {
58
+ // eslint-disable-next-line no-console
59
+ console.error(error);
60
+ }
61
+ });
62
+ };
63
+ YouTubeIframeHelper.onPlayerReady = function (event) {
64
+ event.target.mute();
65
+ event.target.playVideo();
66
+ var player = event.target.h;
67
+ YouTubeIframeHelper.concealPlayer(player);
68
+ };
69
+ YouTubeIframeHelper.onPlayerStateChange = function (event) {
70
+ var UNSTARTED = -1;
71
+ var ENDED = 0;
72
+ var PLAYING = 1;
73
+ var PAUSED = 2;
74
+ var BUFFERING = 3;
75
+ // const CUED = 5; 동영상이 신호를 받고 재생할 준비가 되었을 때,
76
+ var stateCode = event.data;
77
+ var player = event.target.h;
78
+ try {
79
+ switch (stateCode) {
80
+ case PLAYING:
81
+ YouTubeIframeHelper.revealPlayer(player);
82
+ break;
83
+ case UNSTARTED:
84
+ case BUFFERING:
85
+ YouTubeIframeHelper.concealPlayer(player);
86
+ break;
87
+ case ENDED:
88
+ case PAUSED:
89
+ YouTubeIframeHelper.concealPlayer(player);
90
+ event.target.playVideo();
91
+ break;
92
+ }
93
+ }
94
+ catch (err) {
95
+ YouTubeIframeHelper.concealPlayer(player);
96
+ }
97
+ };
98
+ YouTubeIframeHelper.concealPlayer = function (player) {
99
+ player.style.display = 'none';
100
+ return;
101
+ };
102
+ YouTubeIframeHelper.revealPlayer = function (player) {
103
+ player.style.display = 'initial';
104
+ return;
105
+ };
106
+ YouTubeIframeHelper.players = [];
107
+ return YouTubeIframeHelper;
108
+ }());
109
+ exports.YouTubeIframeHelper = YouTubeIframeHelper;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.0.15",
3
+ "version": "0.0.17",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,20 +1,12 @@
1
1
  # PDS-DEV-KIT-WEB-TEST Release Notes
2
- ## [v0.0.15]
2
+ ## [v0.0.17]
3
3
 
4
4
  * sub
5
+ * DynamicLayout 유튜브쪽 문제 해결
5
6
  * DynamicLayout 디자인 디테일 수정
6
- * desktop
7
- * Intro 섹션 타이틀 line-height 1.2
8
- * Intro 제외 섹션 타이틀 line-height 1.3
9
- * Intro 제외 섹션 타이틀 사이즈 48px로 일괄 적용
10
- * Intro 제외 섹션과 콘텐츠 영역 상하단 margin 80px -> 160px으로 수정
11
7
  * mobile
12
- * Intro 섹션 타이틀 line-height 1.2
13
- * Intro 제외 섹션 타이틀 line-height 1.4
14
- * Intro 제외 섹션 타이틀 사이즈 32px로 일괄 적용
15
- * Intro 제외 섹션 본문 bold 일괄 적용
16
- * Intro 제외 섹션 본문 customFontSize : 20px
17
- * Intro 제외 섹션과 콘텐츠 영역 상하단 margin 48px -> 80px으로 수정
18
- * Content Section
19
- * 이미지와 텍스트 사이 24px -> 48px
20
- * 콘텐츠와 인디케이터 사이 간격 확인 / 인티케이터 하단 마진 조정 필요
8
+ * 캐러셀 섹션 2번 타입 아이템 본문이 보이지 않던 부분 수정
9
+ * 푸터 정렬이 제대로 안되는 이슈 수정
10
+ * 인포박스 아이템
11
+ * 제목과 본문사이 spacing-a -> spacing-b
12
+ * 아이템 사이 간격 spacing-e -> 40px