pds-dev-kit-web-test 2.7.93 → 2.7.95

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/hooks/useFlexGridLayout.js

@@ -0,0 +1,229 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFlexGridLayout = void 0;
+var react_1 = require("react");
+var useFlexGridLayout = function (_a) {
+    var components = _a.components;
+    var _b = (0, react_1.useState)({ top: 0, right: 0, bottom: 0, left: 0 }), groupSizes = _b[0], setGroupSizes = _b[1];
+    var _c = (0, react_1.useState)({ width: 0, height: 0 }), layoutSize = _c[0], setLayoutSize = _c[1];
+    var layoutRef = (0, react_1.useRef)(null);
+    var positionRefs = (0, react_1.useRef)({});
+    // 위치별로 컴포넌트 그룹화
+    var getComponentsByPosition = function () {
+        var groups = {};
+        components.forEach(function (component) {
+            if (!groups[component.position]) {
+                groups[component.position] = [];
+            }
+            groups[component.position].push(component);
+        });
+        return groups;
+    };
+    var componentGroups = getComponentsByPosition();
+    var GAP = 8;
+    // 위치가 어느 방향인지 판단
+    var getPositionDirection = function (position) {
+        var directions = {
+            OUTSET1: 'top',
+            OUTSET2: 'top',
+            OUTSET3: 'top',
+            OUTSET4: 'right',
+            OUTSET5: 'right',
+            OUTSET6: 'right',
+            OUTSET7: 'bottom',
+            OUTSET8: 'bottom',
+            OUTSET9: 'bottom',
+            OUTSET10: 'left',
+            OUTSET11: 'left',
+            OUTSET12: 'left',
+            // INSET은 CCB 내부이므로 방향 개념 없음
+            INSET1: 'none',
+            INSET2: 'none',
+            INSET3: 'none',
+            INSET4: 'none',
+            INSET5: 'none',
+            INSET6: 'none',
+            INSET7: 'none',
+            INSET8: 'none'
+        };
+        return directions[position];
+    };
+    // 위치에 따른 스타일 결정 (CCB 크기를 고려)
+    var getPositionStyle = function (position, ccbInset) {
+        var base = {
+            position: 'absolute',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        };
+        // CCB의 중앙 위치 계산
+        var ccbTop = parseFloat(ccbInset.top) || 0;
+        var ccbRight = parseFloat(ccbInset.right) || 0;
+        var ccbBottom = parseFloat(ccbInset.bottom) || 0;
+        var ccbLeft = parseFloat(ccbInset.left) || 0;
+        // CCB의 실제 크기와 중앙 위치 계산
+        var ccbWidth = layoutSize.width - ccbLeft - ccbRight;
+        var ccbHeight = layoutSize.height - ccbTop - ccbBottom;
+        var ccbCenterX = ccbLeft + ccbWidth / 2;
+        var ccbCenterY = ccbTop + ccbHeight / 2;
+        var positions = {
+            OUTSET1: { top: -50, left: ccbLeft },
+            OUTSET2: { top: -50, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
+            OUTSET3: { top: -50, right: ccbRight },
+            OUTSET4: { top: ccbTop, right: 50 },
+            OUTSET5: { top: "".concat(ccbCenterY, "px"), right: 50, transform: 'translateY(-50%)' },
+            OUTSET6: { bottom: ccbBottom, right: 50 },
+            OUTSET7: { bottom: -50, right: ccbRight },
+            OUTSET8: { bottom: -50, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
+            OUTSET9: { bottom: -50, left: ccbLeft },
+            OUTSET10: { bottom: ccbBottom, left: -50 },
+            OUTSET11: { top: "".concat(ccbCenterY, "px"), left: -50, transform: 'translateY(-50%)' },
+            OUTSET12: { top: ccbTop, left: -50 },
+            INSET1: { top: ccbTop + GAP, left: ccbLeft + GAP },
+            INSET2: { top: ccbTop + GAP, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
+            INSET3: { top: ccbTop + GAP, right: ccbRight + GAP },
+            INSET4: { top: "".concat(ccbCenterY, "px"), right: ccbRight + GAP, transform: 'translateY(-50%)' },
+            INSET5: { bottom: ccbBottom + GAP, right: ccbRight + GAP },
+            INSET6: {
+                bottom: ccbBottom + GAP,
+                left: "".concat(ccbCenterX, "px"),
+                transform: 'translateX(-50%)'
+            },
+            INSET7: { bottom: ccbBottom + GAP, left: ccbLeft + GAP },
+            INSET8: { top: "".concat(ccbCenterY, "px"), left: ccbLeft + GAP, transform: 'translateY(-50%)' }
+        };
+        return __assign(__assign({}, base), positions[position]);
+    };
+    // 컴포넌트 그룹 레이아웃
+    var getComponentGroupLayout = function (components, position) {
+        var count = components.length;
+        var horizontals = [
+            'OUTSET1',
+            'OUTSET2',
+            'OUTSET3',
+            'OUTSET7',
+            'OUTSET8',
+            'OUTSET9',
+            'INSET1',
+            'INSET2',
+            'INSET3',
+            'INSET5',
+            'INSET6',
+            'INSET7'
+        ];
+        var isHorizontal = horizontals.includes(position);
+        if (count === 1) {
+            return { display: 'block' };
+        }
+        return {
+            display: 'flex',
+            flexDirection: isHorizontal ? 'row' : 'column',
+            gap: '8px',
+            alignItems: 'center'
+        };
+    };
+    // ccbInset 계산
+    var ccbInset = (0, react_1.useMemo)(function () {
+        return {
+            top: groupSizes.top > 0 ? "".concat(groupSizes.top + GAP, "px") : '0',
+            right: groupSizes.right > 0 ? "".concat(groupSizes.right + GAP, "px") : '0',
+            bottom: groupSizes.bottom > 0 ? "".concat(groupSizes.bottom + GAP, "px") : '0',
+            left: groupSizes.left > 0 ? "".concat(groupSizes.left + GAP, "px") : '0'
+        };
+    }, [groupSizes]);
+    // 레이아웃 크기 측정
+    (0, react_1.useEffect)(function () {
+        var measureLayout = function () {
+            if (layoutRef.current) {
+                var _a = layoutRef.current.getBoundingClientRect(), width_1 = _a.width, height_1 = _a.height;
+                setLayoutSize(function (prevSize) {
+                    if (prevSize.width !== width_1 || prevSize.height !== height_1) {
+                        return { width: width_1, height: height_1 };
+                    }
+                    return prevSize;
+                });
+            }
+        };
+        measureLayout();
+        var resizeObserver = new ResizeObserver(measureLayout);
+        if (layoutRef.current) {
+            resizeObserver.observe(layoutRef.current);
+        }
+        return function () {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    // 컴포넌트 그룹의 크기 측정
+    (0, react_1.useEffect)(function () {
+        var measureGroups = function () {
+            var newSizes = {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0
+            };
+            Object.entries(positionRefs.current).forEach(function (_a) {
+                var position = _a[0], ref = _a[1];
+                if (ref && ref.offsetHeight && ref.offsetWidth) {
+                    var direction = getPositionDirection(position);
+                    // INSET은 CCB 크기 계산에 영향을 주지 않음
+                    if (direction !== 'none') {
+                        var size = direction === 'top' || direction === 'bottom' ? ref.offsetHeight : ref.offsetWidth;
+                        newSizes[direction] = Math.max(newSizes[direction], size);
+                    }
+                }
+            });
+            // 실제로 크기가 변경되었을 때만 업데이트
+            setGroupSizes(function (prevSizes) {
+                if (prevSizes.top !== newSizes.top ||
+                    prevSizes.right !== newSizes.right ||
+                    prevSizes.bottom !== newSizes.bottom ||
+                    prevSizes.left !== newSizes.left) {
+                    return newSizes;
+                }
+                return prevSizes;
+            });
+        };
+        // 초기 측정을 위한 타이머
+        var timeoutId = setTimeout(function () {
+            measureGroups();
+        }, 0);
+        // ResizeObserver 설정
+        var resizeObserver = new ResizeObserver(function (entries) {
+            // 크기 변경이 실제로 일어났을 때만 측정
+            if (entries.length > 0) {
+                measureGroups();
+            }
+        });
+        // 현재 존재하는 ref들에 observer 연결
+        Object.values(positionRefs.current).forEach(function (ref) {
+            if (ref) {
+                resizeObserver.observe(ref);
+            }
+        });
+        return function () {
+            clearTimeout(timeoutId);
+            resizeObserver.disconnect();
+        };
+    }, [componentGroups]);
+    return {
+        layoutRef: layoutRef,
+        positionRefs: positionRefs,
+        ccbInset: ccbInset,
+        componentGroups: componentGroups,
+        getPositionStyle: getPositionStyle,
+        getComponentGroupLayout: getComponentGroupLayout
+    };
+};
+exports.useFlexGridLayout = useFlexGridLayout;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/index.d.ts

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

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/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.ContentsList = void 0;
+var ContentsList_1 = require("./ContentsList");
+Object.defineProperty(exports, "ContentsList", { enumerable: true, get: function () { return __importDefault(ContentsList_1).default; } });

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Divider/Divider.js

@@ -40,7 +40,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
 var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../../../../hooks");
 var util_1 = require("../../../../util");

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/Embed.js

@@ -16,7 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
 var hooks_1 = require("../../../../hooks");
 var util_1 = require("../../../../util");
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/IframeDenied.js

@@ -9,11 +9,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 require("react");
-var usePackageTranslation_1 = require("../../../../../../../../common/hooks/usePackageTranslation");
-var components_1 = require("../../../../../../../DynamicLayout/components");
+var react_i18next_1 = require("react-i18next");
+var components_1 = require("@sub/DynamicLayout/components");
 var styled_components_1 = __importDefault(require("styled-components"));
 function IframeDenied() {
-    var t = (0, usePackageTranslation_1.usePackageTranslation)().t;
+    var t = (0, react_i18next_1.useTranslation)().t;
     return ((0, jsx_runtime_1.jsx)(S_Denied, { children: (0, jsx_runtime_1.jsx)(components_1.D_TextLabel, { text: t('str_key_user_scene_x00001pages_notconnectdomain_embedcb_hide_info'), styleTheme: "caption1Regular", colorTheme: "sysTextSecondary", textAlign: "center" }) }));
 }
 var S_Denied = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: #ddd;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"], ["\n  align-items: center;\n  background-color: #ddd;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"])));

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js

@@ -43,7 +43,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var compositionQueryContext_1 = require("@sub/DynamicLayout/compositionQueryContext");
 var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../../../../hooks");
 var util_1 = require("../../../../util");
@@ -53,9 +54,24 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 function Image(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    var index = props.index, CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
+    var index = props.index, CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var cLinkValue = function () {
+        if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA' ||
+            CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DELEGATEDDATA') {
+            if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
+                return "ERROR: QueryData NOT FOUND";
+            }
+            var link = queryContext.queryData[CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA];
+            if (!link) {
+                return "ERROR: ".concat(CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, " NOT found from queryData");
+            }
+            return link;
+        }
+        return CB_CONTENT_PROP_CLINK_SPEC_SRC;
+    };
     var _c = (0, useCLINK_1.default)({
-        src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
+        src: cLinkValue(),
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
         openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
         internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
@@ -74,7 +90,27 @@ function Image(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }) })) })) }))] }));
+    var imgSrc = function () {
+        var isDataConnected = CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DATA' ||
+            CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DELEGATEDDATA';
+        if (!isDataConnected) {
+            return CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR;
+        }
+        if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
+            // eslint-disable-next-line
+            console.warn('ERROR: No query data found');
+            return 'ERROR';
+        }
+        if (!queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA]) {
+            // eslint-disable-next-line
+            console.warn("ERROR: ".concat(CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA, " NOT found in query data"));
+            return 'ERROR';
+        }
+        return queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA];
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: imgSrc() === 'ERROR'
+                                ? 'https://static.publ.site/pages-sample/img_cb_style_prop_bgmedia_spec_imageselector_01.png'
+                                : imgSrc(), normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }) })) })) }))] }));
 }
 function parseImageCBStyle(style, hoverStyle, mode) {
     var boxStyle = {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/RichText/RichText.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CB_RICHTEXT_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { CB_RICHTEXT_PROPERTIES_TYPE, IndexForIntersection } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_RICHTEXT_PROPERTIES_TYPE & IndexForIntersection;
 declare function RichText(props: Props): JSX.Element;
 export default RichText;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/RichText/RichText.js

@@ -21,11 +21,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/destructuring-assignment */
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
-var RichText_1 = require("../../../../../../../DynamicLayout/components/ComponentBlocks/RichText");
-var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
-var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
-var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var RichText_1 = require("@sub/DynamicLayout/components/ComponentBlocks/RichText");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var colorUtil_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
 var styled_components_1 = __importDefault(require("styled-components"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { INSET_POSTIION, OUTSET_POSTIION } from './types';
+import type { CB_SLIDEBANNER } from '@sub/DynamicLayout/sections/CustomSection/types';
+import type { CB_SLIDEBANNER_PROPERTIES_TYPE, IndexForIntersection } from '@sub/DynamicLayout/sections/CustomSection/util/types';
+type Props = CB_SLIDEBANNER_PROPERTIES_TYPE & IndexForIntersection & {
+    compositions: CB_SLIDEBANNER['compositions'];
+};
+type ComponentType = 'PREV' | 'NEXT' | 'PAGINATION' | 'PROGRESSBAR';
+export type SlideBannerElementsProps = {
+    type: ComponentType;
+    position: OUTSET_POSTIION | INSET_POSTIION;
+};
+declare function SlideBanner(props: Props): JSX.Element;
+export default SlideBanner;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js

@@ -0,0 +1,159 @@
+"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++) {
+            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 jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var createCompositions_1 = require("@sub/DynamicLayout/CompositionRenderer/createCompositions");
+var dynamicLayoutContext_1 = require("@sub/DynamicLayout/dynamicLayoutContext");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
+var styled_components_1 = __importDefault(require("styled-components"));
+var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
+var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
+var CustomNavigationNextBtn_1 = require("./components/CustomNavigationNextBtn");
+var CustomNavigationPrevBtn_1 = require("./components/CustomNavigationPrevBtn");
+var CustomPagination_1 = require("./components/CustomPagination");
+var CustomProgressbar_1 = require("./components/CustomProgressbar");
+var useFlexGridLayout_1 = require("./hooks/useFlexGridLayout");
+var useSwiper_1 = require("./hooks/useSwiper");
+var SlideBannerCore_1 = __importDefault(require("./SlideBannerCore"));
+var slideBannerUtils_1 = require("./slideBannerUtils");
+var createComponent = function (type, getDesignType, getLocation) {
+    return function (normalStyle, hoverStyle, isHovered) {
+        var normalDesign = getDesignType(normalStyle);
+        var hoverDesign = getDesignType(hoverStyle);
+        if (isHovered && hoverDesign === 'NONE')
+            return undefined;
+        if (normalDesign === 'NONE')
+            return undefined;
+        return {
+            type: type,
+            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle)
+        };
+    };
+};
+function SlideBanner(props) {
+    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode, queryData = _a.queryData;
+    var index = props.index, _b = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_STYLE_PROP_SLIDEBANNER = props.CB_STYLE_PROP_SLIDEBANNER, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var compositions = props.compositions;
+    var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, effect = _c.effect;
+    var _d = (0, slideBannerUtils_1.parseSlideBannerStyleToSlideBannerCoreProp)({
+        props: CB_STYLE_PROP_SLIDEBANNER,
+        device: device
+    }), slideBannerNormalStyle = _d.normalStyle, slideBannerHoverStyle = _d.hoverStyle;
+    var _e = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomPaginationProp)({
+        props: CB_STYLE_PROP_SLIDEBANNER,
+        device: device
+    }), customPaginationNormalStyle = _e.normalStyle, customPaginationHoverStyle = _e.hoverStyle;
+    var _f = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomNavigationProp)({
+        props: CB_STYLE_PROP_SLIDEBANNER,
+        device: device
+    }), customNavigationNormalStyle = _f.normalStyle, customNavigationHoverStyle = _f.hoverStyle;
+    var _g = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomProgressbarProp)({
+        props: CB_STYLE_PROP_SLIDEBANNER,
+        device: device
+    }), customProgressbarNormalStyle = _g.normalStyle, customProgressbarHoverStyle = _g.hoverStyle;
+    var _h = (0, useSwiper_1.useSwiper)(), swiperRef = _h.swiperRef, progressRef = _h.progressRef, leftTimeMsRef = _h.leftTimeMsRef, currentSlide = _h.currentSlide, isBeginning = _h.isBeginning, isEnd = _h.isEnd, onSwiper = _h.onSwiper, onSlideChangeTransitionEnd = _h.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _h.onAutoplayTimeLeft, onClickBullet = _h.onClickBullet, onClickPrevBtn = _h.onClickPrevBtn, onClickNextBtn = _h.onClickNextBtn;
+    var _j = (0, react_1.useState)(false), isHovered = _j[0], setIsHovered = _j[1];
+    var loop = isHovered ? slideBannerNormalStyle.loop : slideBannerHoverStyle.loop;
+    // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
+    var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
+    // NOTE: EFFECT와 관련된 함수들입니다.
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    var isNoneEffectType = device === 'DESKTOP'
+        ? CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE === 'NONE'
+        : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
+    var hasEffect = !isNoneEffectType;
+    var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
+    var createPrevButton = createComponent('PREV', function (style) { return style.prevBtnType || 'NONE'; }, function (style) { return style.prevBtnLocation || 'OUTSET1'; });
+    var createNextButton = createComponent('NEXT', function (style) { return style.nextBtnType || 'NONE'; }, function (style) { return style.nextBtnLocation || 'OUTSET1'; });
+    var createPagination = createComponent('PAGINATION', function (style) { return style.type || 'NONE'; }, function (style) { return style.location || 'OUTSET1'; });
+    var components = [
+        createPrevButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
+        createNextButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
+        createPagination(customPaginationNormalStyle, customPaginationHoverStyle, isHovered),
+        { type: 'PROGRESSBAR', position: 'INSET5' }
+    ].filter(function (component) { return component !== undefined; });
+    var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs, 
+    // ccbInset,
+    componentGroups = _k.componentGroups, getPositionStyle = _k.getPositionStyle, getComponentGroupLayout = _k.getComponentGroupLayout;
+    var ccbInset = {
+        top: '0px',
+        right: '0px',
+        bottom: '0px',
+        left: '0px'
+    };
+    var renderElements = function (component) {
+        var _a;
+        switch (component.type) {
+            case 'PREV':
+                return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, styles: isHovered ? customNavigationHoverStyle : customNavigationNormalStyle, onClick: onClickPrevBtn }));
+            case 'NEXT':
+                return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: isHovered ? customNavigationHoverStyle : customNavigationNormalStyle, onClick: onClickNextBtn }));
+            case 'PAGINATION':
+                return ((0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered ? customPaginationHoverStyle : customPaginationNormalStyle, current: currentSlide, isPrevBtnDisabled: loop ? false : isBeginning, isNextBtnDisabled: loop ? false : isEnd, total: ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slides.length) || 0, onBulletClick: onClickBullet, onPrevBtnClick: onClickPrevBtn, onNextBtnClick: onClickNextBtn }));
+            case 'PROGRESSBAR':
+                return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
+            default:
+                return null;
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Object.entries(componentGroups).map(function (_a) {
+                var position = _a[0], groupComponents = _a[1];
+                return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-group ccb-elements", ref: function (el) {
+                        if (el) {
+                            positionRefs.current[position] = el;
+                        }
+                        else {
+                            delete positionRefs.current[position];
+                        }
+                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { zIndex: 3, pointerEvents: 'none' }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) { return renderElements(component); }) })) }), position));
+            }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-slidebanner-layout-box", ref: layoutRef }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-slidebanner-wrapper", ccbInset: ccbInset, customStyle: isHovered ? slideBannerHoverStyle === null || slideBannerHoverStyle === void 0 ? void 0 : slideBannerHoverStyle.customStyle : slideBannerNormalStyle === null || slideBannerNormalStyle === void 0 ? void 0 : slideBannerNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(SlideBannerCore_1.default, __assign({ ref: swiperRef, className: "cb-slidebanner", onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: 1, styles: isHovered ? slideBannerHoverStyle : slideBannerNormalStyle }, { children: (0, createCompositions_1.createCompositions)({
+                                    valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
+                                    queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
+                                    limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
+                                    queryData: queryData,
+                                    compositions: compositions
+                                }) })) })) })) })) }))] }));
+}
+var S_SwiperLayout = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n  width: 100%;\n"], ["\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n  width: 100%;\n"])));
+var S_SwiperWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  bottom: ", ";\n  left: ", ";\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  ", ";\n"], ["\n  bottom: ", ";\n  left: ", ";\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  ", ";\n"])), function (_a) {
+    var ccbInset = _a.ccbInset;
+    return ccbInset.bottom;
+}, function (_a) {
+    var ccbInset = _a.ccbInset;
+    return ccbInset.left;
+}, function (_a) {
+    var ccbInset = _a.ccbInset;
+    return ccbInset.right;
+}, function (_a) {
+    var ccbInset = _a.ccbInset;
+    return ccbInset.top;
+}, function (_a) {
+    var customStyle = _a.customStyle;
+    return customStyle;
+});
+exports.default = SlideBanner;
+var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBannerCore.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import 'swiper/modules/navigation/navigation.min.css';
+import type { CoreSlideBannerProps } from './types';
+import type { SwiperProps, SwiperRef } from 'swiper/react/swiper-react.js';
+export interface SlideBannerCoreProps extends SwiperProps {
+    styles: CoreSlideBannerProps;
+    slidesPerView?: SwiperProps['slidesPerView'];
+    children?: React.ReactNode[] | JSX.Element;
+}
+declare const SlideBannerCore: import("react").ForwardRefExoticComponent<SlideBannerCoreProps & import("react").RefAttributes<SwiperRef>>;
+export default SlideBannerCore;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBannerCore.js

@@ -0,0 +1,38 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var swiper_1 = require("swiper");
+require("swiper/modules/navigation/navigation.min.css");
+var react_2 = require("swiper/react");
+var SlideBannerCore = (0, react_1.forwardRef)(function (_a, ref) {
+    var styles = _a.styles, slidesPerView = _a.slidesPerView, children = _a.children, props = __rest(_a, ["styles", "slidesPerView", "children"]);
+    return ((0, jsx_runtime_1.jsx)(react_2.Swiper, __assign({ ref: ref, style: {
+            width: '100%',
+            height: '100%'
+        }, modules: [swiper_1.Pagination, swiper_1.Navigation, swiper_1.Scrollbar, swiper_1.FreeMode, swiper_1.Autoplay], slidesPerView: slidesPerView, scrollbar: styles.scrollbar, freeMode: styles.freeMode, autoplay: styles.useAutoplay ? styles.autoplay : false, loop: styles.loop }, props, { children: Array.isArray(children) ? (children.map(function (slide, index) { return (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: slide }, index); })) : ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: children })) })));
+});
+SlideBannerCore.displayName = 'SlideBannerCore';
+exports.default = SlideBannerCore;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigationNextBtn.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { CustomNavigationProps } from '../types';
+export interface CustomNavigationNextBtnProps {
+    isDisabled: boolean;
+    styles: CustomNavigationProps;
+    onClick?: () => void;
+}
+export declare const CustomNavigationNextBtn: ({ isDisabled, styles, onClick }: CustomNavigationNextBtnProps) => JSX.Element;
+export interface FlexBoxProps {
+    direction?: 'row' | 'column';
+    justifyContent?: string;
+    alignItems?: string;
+    gap?: string;
+}
+export default CustomNavigationNextBtn;