pds-dev-kit-web-test 0.1.0 → 0.1.2

package/dist/src/mobile/panels/MobileBasicModal/MobileBasicModal.js

@@ -66,10 +66,10 @@ function MobileBasicModal(_a) {
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
                     react_1.default.createElement(components_1.TextButton, { text: tBtnText, state: tBtnState, type: tBtnType, size: "rlarge", onClick: onClickTBtn })))))), container);
 }
-var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n"])), function (_a) {
+var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
-});
+}, animationStyle_1.modalOverlayOnAni);
 var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  left: 50%;\n  max-width: 560px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(100% - 48px);\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  left: 50%;\n  max-width: 560px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(100% - 48px);\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, navigationHandler, scrollDownTargetSectionId, onClickEditSection }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, onClickEditSection }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

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

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -14,36 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -57,71 +23,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var react_1 = __importDefault(require("react"));
+var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
+var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
-var sections_1 = require("./sections");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, onClickEditSection = _a.onClickEditSection;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, onClickEditSection = _a.onClickEditSection;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .sort(function (a, b) { return a.order - b.order; });
     return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler } },
-        mode === 'EDIT' && onClickEditSection && (react_1.default.createElement(EditModeSections, { scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })),
+        mode === 'EDIT' && onClickEditSection && (react_1.default.createElement(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })),
         mode !== 'EDIT' &&
-            filteredSortedSection.map(function (section) { return react_1.default.createElement(SectionMatcher, __assign({ key: section.id }, section)); })));
-}
-function SectionMatcher(_a) {
-    var props = __rest(_a, []);
-    var schema = props.manifest.schema;
-    switch (schema) {
-        case 'BASE_INTRO':
-            return react_1.default.createElement(sections_1.IntroSection, __assign({}, props));
-        case 'BASE_CONTENTS':
-            return react_1.default.createElement(sections_1.ContentsSection, __assign({}, props));
-        case 'BASE_CONTENTS_CAROUSEL':
-            return react_1.default.createElement(sections_1.ContentsCarouselSection, __assign({}, props));
-        case 'BASE_FOOTER':
-            return react_1.default.createElement(sections_1.FooterSection, __assign({}, props));
-        case 'BASE_INFO_BOX':
-            return react_1.default.createElement(sections_1.InfoBoxSection, __assign({}, props));
-        default:
-            return react_1.default.createElement(react_1.default.Fragment, null);
-    }
+            filteredSortedSection.map(function (section) { return react_1.default.createElement(SectionMatcher_1.SectionMatcher, __assign({ key: section.id }, section)); })));
 }
 exports.default = DynamicLayout;
-function EditModeSections(_a) {
-    var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, onClickEditSection = _a.onClickEditSection;
-    return (react_1.default.createElement(react_1.default.Fragment, null, filteredSortedSection.map(function (section) { return (react_1.default.createElement(SectionBox, { scrollIntoThisSection: section.id === scrollDownTargetSectionId, key: section.id, onClick: function () { return onClickEditSection(section); } },
-        react_1.default.createElement(SectionMatcher, __assign({ key: section.id }, section)))); })));
-}
-function SectionBox(_a) {
-    var scrollIntoThisSection = _a.scrollIntoThisSection, children = _a.children, onClick = _a.onClick;
-    var _b = (0, react_1.useState)(false), isHover = _b[0], setHover = _b[1];
-    var sectionRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(function () {
-        var _a;
-        if (!sectionRef) {
-            return;
-        }
-        if (scrollIntoThisSection) {
-            (_a = sectionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
-        }
-    }, [scrollIntoThisSection]);
-    var onMouseEnter = function () {
-        setHover(true);
-    };
-    var onMouseLeave = function () {
-        setHover(false);
-    };
-    return (react_1.default.createElement(S_SectionBox, { ref: sectionRef, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
-        isHover && (react_1.default.createElement(DimmedEditOverlay, null,
-            react_1.default.createElement(S_EditButton, null, "\uC774 Section \uC218\uC815\uD558\uAE30"))),
-        children));
-}
-var S_EditButton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: #ddf68c;\n  font-weight: bold;\n  padding: ", ";\n"], ["\n  background-color: #ddf68c;\n  font-weight: bold;\n  padding: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
-});
-var S_SectionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var DimmedEditOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  background-color: #f7f7f7c4;\n  z-index: 10;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  background-color: #f7f7f7c4;\n  z-index: 10;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ISection } from '../../types';
+export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, editingSectionId, onClickEditSection }: {
+    filteredSortedSection: ISection[];
+    scrollDownTargetSectionId?: number;
+    editingSectionId?: number;
+    onClickEditSection: (section: ISection) => void;
+}): JSX.Element;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.js

@@ -0,0 +1,25 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var SectionMatcher_1 = require("../SectionMatcher");
+var SectionBox_1 = __importDefault(require("./SectionBox"));
+function EditModeSectionMatcher(_a) {
+    var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, onClickEditSection = _a.onClickEditSection;
+    return (react_1.default.createElement(react_1.default.Fragment, null, filteredSortedSection.map(function (section) { return (react_1.default.createElement(SectionBox_1.default, { isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, key: section.id, onClick: function () { return onClickEditSection(section); } },
+        react_1.default.createElement(SectionMatcher_1.SectionMatcher, __assign({ key: section.id }, section)))); })));
+}
+exports.default = EditModeSectionMatcher;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/OverlayBorders.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type Props = {
+    zIndex: number;
+};
+declare function OverlayBorders({ zIndex }: Props): JSX.Element;
+export default OverlayBorders;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/OverlayBorders.js

@@ -0,0 +1,49 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function OverlayBorders(_a) {
+    var zIndex = _a.zIndex;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Absolute_Border_Top, { zIndex: zIndex }),
+        react_1.default.createElement(Absolute_Border_Left, { zIndex: zIndex }),
+        react_1.default.createElement(Absolute_Border_Right, { zIndex: zIndex }),
+        react_1.default.createElement(Absolute_Border_Bottom, { zIndex: zIndex })));
+}
+exports.default = OverlayBorders;
+var Absolute_Border_Top = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  top: 0;\n  position: absolute;\n  height: 4px;\n  width: 100%;\n  background-color: ", ";\n  transition: background-color 0.2s ease-out;\n  z-index: ", ";\n"], ["\n  top: 0;\n  position: absolute;\n  height: 4px;\n  width: 100%;\n  background-color: ", ";\n  transition: background-color 0.2s ease-out;\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_preview_editing;
+}, function (_a) {
+    var zIndex = _a.zIndex;
+    return zIndex;
+});
+var Absolute_Border_Left = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  left: 0;\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  background-color: ", ";\n  transition: background-color 0.2s ease-out;\n  z-index: ", ";\n"], ["\n  left: 0;\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  background-color: ", ";\n  transition: background-color 0.2s ease-out;\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_preview_editing;
+}, function (_a) {
+    var zIndex = _a.zIndex;
+    return zIndex;
+});
+var Absolute_Border_Right = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  right: 0;\n  position: absolute;\n  height: 100%;\n  width: 4px;\n  background-color: ", ";\n  z-index: ", ";\n  transition: background-color 0.2s ease-out;\n"], ["\n  right: 0;\n  position: absolute;\n  height: 100%;\n  width: 4px;\n  background-color: ", ";\n  z-index: ", ";\n  transition: background-color 0.2s ease-out;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_preview_editing;
+}, function (_a) {
+    var zIndex = _a.zIndex;
+    return zIndex;
+});
+var Absolute_Border_Bottom = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  bottom: 0;\n  position: absolute;\n  height: 4px;\n  width: 100%;\n  background-color: ", ";\n  transition: background-color 0.2s ease-out;\n  z-index: ", ";\n"], ["\n  bottom: 0;\n  position: absolute;\n  height: 4px;\n  width: 100%;\n  background-color: ", ";\n  transition: background-color 0.2s ease-out;\n  z-index: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_preview_editing;
+}, function (_a) {
+    var zIndex = _a.zIndex;
+    return zIndex;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/SectionBox.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export default function SectionBox({ scrollIntoThisSection, isEditing, children, onClick }: {
+    scrollIntoThisSection: boolean;
+    isEditing: boolean;
+    children: React.ReactNode;
+    onClick: () => void;
+}): JSX.Element;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/SectionBox.js

@@ -0,0 +1,129 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_i18next_1 = require("react-i18next");
+var styled_components_1 = __importDefault(require("styled-components"));
+var desktop_1 = require("../../../../desktop");
+var useLazyUnmount_1 = require("../../hooks/useLazyUnmount");
+var OverlayBorders_1 = __importDefault(require("./OverlayBorders"));
+function SectionBox(_a) {
+    var scrollIntoThisSection = _a.scrollIntoThisSection, isEditing = _a.isEditing, children = _a.children, onClick = _a.onClick;
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var sectionRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(false), isHover = _b[0], setIsHover = _b[1];
+    var _c = (0, react_1.useState)(false), fadeOut = _c[0], setFadeout = _c[1];
+    var _d = (0, react_1.useState)(false), hasNoChild = _d[0], setHasNoChild = _d[1];
+    var onMouseLeaveAsync = (0, useLazyUnmount_1.useLazyUnmount)({ doUnmount: function () { return setIsHover(false); } }, 150);
+    var onClickDelayedAsync = (0, useLazyUnmount_1.useLazyUnmount)({
+        doUnmount: function () {
+            onClick();
+            setFadeout(false);
+        }
+    }, 150);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (!sectionRef) {
+            return;
+        }
+        if (scrollIntoThisSection) {
+            (_a = sectionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [scrollIntoThisSection]);
+    (0, react_1.useEffect)(function () {
+        if (!sectionRef.current) {
+            return;
+        }
+        if (sectionRef.current.getBoundingClientRect().height === 0) {
+            setHasNoChild(true);
+            return;
+        }
+        setHasNoChild(false);
+    }, [isEditing, children]);
+    var onMouseEnter = function () {
+        if (hasNoChild) {
+            return;
+        }
+        setIsHover(true);
+    };
+    var onClickSectionBox = function () {
+        if (hasNoChild) {
+            return;
+        }
+        setFadeout(true);
+        setIsHover(false);
+        onClickDelayedAsync();
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_SectionBox, { ref: sectionRef, onClick: onClickSectionBox, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeaveAsync, isEditing: isEditing },
+            isEditing && !hasNoChild && (react_1.default.createElement(S_Editing, null,
+                react_1.default.createElement(OverlayBorders_1.default, { zIndex: 1 }),
+                react_1.default.createElement(TopRightAbsoluteBox, null,
+                    react_1.default.createElement(desktop_1.D_TextLabel, { text: t('str_4657'), styleTheme: "caption1Bold", colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" })))),
+            !isEditing && (react_1.default.createElement(DimmedEditOverlay, { isHover: isHover, fadeOut: fadeOut },
+                react_1.default.createElement(S_EditButton, null,
+                    react_1.default.createElement(desktop_1.D_TextLabel, { text: t('str_4653'), colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" })))),
+            children)));
+}
+exports.default = SectionBox;
+var TopRightAbsoluteBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  top: 0;\n  right: 0;\n  position: absolute;\n  z-index: 4;\n  background-color: ", ";\n  padding: 8px 10px;\n  transition: background-color 0.2s ease-out;\n"], ["\n  top: 0;\n  right: 0;\n  position: absolute;\n  z-index: 4;\n  background-color: ", ";\n  padding: 8px 10px;\n  transition: background-color 0.2s ease-out;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_editor_preview_editing;
+});
+var S_SectionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var DimmedEditOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  animation: ", ";\n  background-color: ", ";\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  left: 0;\n\n  opacity: ", ";\n\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: opacity 0.2s ease-out;\n  z-index: 10;\n\n  @keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.6;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n"], ["\n  align-items: center;\n  animation: ", ";\n  background-color: ", ";\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  left: 0;\n\n  opacity: ", ";\n\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: opacity 0.2s ease-out;\n  z-index: 10;\n\n  @keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.6;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n"])), function (_a) {
+    var fadeOut = _a.fadeOut;
+    return fadeOut && 'fadeOut 0.2s ease-out';
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_pages_section_dimmed;
+}, function (_a) {
+    var isHover = _a.isHover, fadeOut = _a.fadeOut;
+    if (fadeOut) {
+        return 0;
+    }
+    if (isHover) {
+        return 1;
+    }
+    return 0;
+});
+var S_EditButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  font-weight: bold;\n  height: 56px;\n  display: flex;\n  border-radius: 14px;\n  justify-content: center;\n  align-items: center;\n  padding: 0 ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  font-weight: bold;\n  height: 56px;\n  display: flex;\n  border-radius: 14px;\n  justify-content: center;\n  align-items: center;\n  padding: 0 ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_71;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_72;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_73;
+});
+var S_Editing = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  & > div {\n    animation: fadeIn 0.2s ease-out;\n  }\n\n  @keyframes fadeIn {\n    0% {\n      opacity: 0.2;\n    }\n\n    50% {\n      opacity: 0.6;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n"], ["\n  & > div {\n    animation: fadeIn 0.2s ease-out;\n  }\n\n  @keyframes fadeIn {\n    0% {\n      opacity: 0.2;\n    }\n\n    50% {\n      opacity: 0.6;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/index.d.ts

@@ -0,0 +1 @@
+export { default as EditModeSectionMatcher } from './EditModeSectionMatcher';

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditModeSectionMatcher = void 0;
+var EditModeSectionMatcher_1 = require("./EditModeSectionMatcher");
+Object.defineProperty(exports, "EditModeSectionMatcher", { enumerable: true, get: function () { return __importDefault(EditModeSectionMatcher_1).default; } });

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

@@ -86,7 +86,7 @@ function Background() {
         if (backgroundMediaType !== 'YOUTUBE')
             return;
         setYoutubeSize(getResponsiveYoutubeSize());
-    }, [getResponsiveYoutubeSize]);
+    }, [getResponsiveYoutubeSize, backgroundMediaSrc]);
     (0, react_1.useEffect)(function () {
         if (backgroundMediaType !== 'YOUTUBE')
             return;

package/dist/src/sub/DynamicLayout/components/SectionMatcher/SectionMatcher.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ISection } from '../../types';
+export default function SectionMatcher({ ...props }: ISection): JSX.Element;

package/dist/src/sub/DynamicLayout/components/SectionMatcher/SectionMatcher.js

@@ -0,0 +1,48 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var sections_1 = require("../../sections");
+function SectionMatcher(_a) {
+    var props = __rest(_a, []);
+    var schema = props.manifest.schema;
+    switch (schema) {
+        case 'BASE_INTRO':
+            return react_1.default.createElement(sections_1.IntroSection, __assign({}, props));
+        case 'BASE_CONTENTS':
+            return react_1.default.createElement(sections_1.ContentsSection, __assign({}, props));
+        case 'BASE_CONTENTS_CAROUSEL':
+            return react_1.default.createElement(sections_1.ContentsCarouselSection, __assign({}, props));
+        case 'BASE_FOOTER':
+            return react_1.default.createElement(sections_1.FooterSection, __assign({}, props));
+        case 'BASE_INFO_BOX':
+            return react_1.default.createElement(sections_1.InfoBoxSection, __assign({}, props));
+        default:
+            return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+}
+exports.default = SectionMatcher;

package/dist/src/sub/DynamicLayout/components/SectionMatcher/index.d.ts

@@ -0,0 +1 @@
+export { default as SectionMatcher } from './SectionMatcher';

package/dist/src/sub/DynamicLayout/components/SectionMatcher/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionMatcher = void 0;
+var SectionMatcher_1 = require("./SectionMatcher");
+Object.defineProperty(exports, "SectionMatcher", { enumerable: true, get: function () { return __importDefault(SectionMatcher_1).default; } });

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

@@ -85,6 +85,13 @@ function YouTubeIframe(_a) {
         });
         (_a = event.target) === null || _a === void 0 ? void 0 : _a.destroy();
     }, []);
+    var handleCrossOriginError = (0, react_1.useCallback)(function () {
+        if (!playerRef.current)
+            return;
+        playerRef.current.destroy();
+        setError(null);
+        onYouTubeIframeAPIReady();
+    }, [playerRef.current, setError]);
     var onYouTubeIframeAPIReady = (0, react_1.useCallback)(function () {
         if (!videoId || !PLAYER_ID) {
             return;
@@ -147,22 +154,32 @@ function YouTubeIframe(_a) {
         if (!playerRef.current)
             return;
         if (!videoId) {
-            (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.stopVideo();
+            try {
+                (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.stopVideo();
+            }
+            catch (_b) {
+                handleCrossOriginError();
+            }
             return;
         }
         if (videoId !== prevVideoId) {
-            playerRef.current.loadVideoById({
-                videoId: videoId,
-                playerVars: {
-                    playsinline: 1,
-                    autoplay: 1,
-                    controls: 0,
-                    iv_load_policy: 3,
-                    listType: 'playlist',
-                    playlist: videoId,
-                    loop: 1
-                }
-            });
+            try {
+                playerRef.current.loadVideoById({
+                    videoId: videoId,
+                    playerVars: {
+                        playsinline: 1,
+                        autoplay: 1,
+                        controls: 0,
+                        iv_load_policy: 3,
+                        listType: 'playlist',
+                        playlist: videoId,
+                        loop: 1
+                    }
+                });
+            }
+            catch (_c) {
+                handleCrossOriginError();
+            }
         }
     }, [playerRef, videoId, prevVideoId, onYouTubeIframeAPIReady]);
     /**

package/dist/src/sub/DynamicLayout/hooks/index.d.ts

@@ -1 +1,3 @@
+export { useUnmountStyle } from './useUnmountStyle';
 export { usePrevious } from './usePrevious';
+export { useLazyUnmount } from './useLazyUnmount';

package/dist/src/sub/DynamicLayout/hooks/index.js

@@ -1,5 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrevious = void 0;
+exports.useLazyUnmount = exports.usePrevious = exports.useUnmountStyle = void 0;
+var useUnmountStyle_1 = require("./useUnmountStyle");
+Object.defineProperty(exports, "useUnmountStyle", { enumerable: true, get: function () { return useUnmountStyle_1.useUnmountStyle; } });
 var usePrevious_1 = require("./usePrevious");
 Object.defineProperty(exports, "usePrevious", { enumerable: true, get: function () { return usePrevious_1.usePrevious; } });
+var useLazyUnmount_1 = require("./useLazyUnmount");
+Object.defineProperty(exports, "useLazyUnmount", { enumerable: true, get: function () { return useLazyUnmount_1.useLazyUnmount; } });

package/dist/src/sub/DynamicLayout/hooks/useLazyUnmount/index.d.ts

@@ -0,0 +1 @@
+export { default as useLazyUnmount } from './useLazyUnmount';

package/dist/src/sub/DynamicLayout/hooks/useLazyUnmount/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLazyUnmount = void 0;
+var useLazyUnmount_1 = require("./useLazyUnmount");
+Object.defineProperty(exports, "useLazyUnmount", { enumerable: true, get: function () { return __importDefault(useLazyUnmount_1).default; } });

package/dist/src/sub/DynamicLayout/hooks/useLazyUnmount/useLazyUnmount.d.ts

@@ -0,0 +1,5 @@
+declare type Options = {
+    doUnmount: () => void;
+};
+export default function useLazyUnmount({ doUnmount }: Options, delayTime: number): () => Promise<void>;
+export {};

package/dist/src/sub/DynamicLayout/hooks/useLazyUnmount/useLazyUnmount.js

@@ -0,0 +1,61 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// NOTE: promise의 delay time은 정확하지 않기때문에, transition 딜레이보다 짧게 가는것이 보기 좋습니다.
+function useLazyUnmount(_a, delayTime) {
+    var doUnmount = _a.doUnmount;
+    function lazyUnmountAsync() {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, new Promise(function (resolve) {
+                            setTimeout(function () {
+                                doUnmount();
+                                resolve(true);
+                            }, delayTime);
+                        })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
+    return lazyUnmountAsync;
+}
+exports.default = useLazyUnmount;

package/dist/src/sub/DynamicLayout/hooks/useUnmountStyle/index.d.ts

@@ -0,0 +1 @@
+export { default as useUnmountStyle } from './useUmountStyle';