pds-dev-kit-web-test 2.7.607 → 2.7.608

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

@@ -10,7 +10,7 @@ type Props = {
     zIndex: number;
     showPinned?: boolean;
     style?: React.CSSProperties;
-    isParentGroupHeightVariable: boolean;
+    isParentGroupHeightVariable: boolean | null;
     block: Block;
 };
 declare function FlexGridItem({ cb, index, device, rowHeight, zIndex, showPinned, block, style, isParentGroupHeightVariable }: Props): JSX.Element;

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

@@ -20,11 +20,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getGridAreaFromCB = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
+var dynamicLayoutContext_1 = require("../dynamicLayoutContext");
 var ComponentBlockMatcherWithCCB_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/ComponentBlockMatcherWithCCB"));
 var gap = 10;
 function FlexGridItem(_a) {
     var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight, zIndex = _a.zIndex, showPinned = _a.showPinned, block = _a.block, style = _a.style, isParentGroupHeightVariable = _a.isParentGroupHeightVariable;
+    var queryData = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).queryData;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var defaultHeight = getMaxHeight(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device, rowHeight);
     var gridArea = getGridAreaFromCB(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device);
@@ -43,6 +46,10 @@ function FlexGridItem(_a) {
             }
         }
         if ('CB_STYLE_PROP_CONTENTSLISTDESIGN' in cb.jsonProperties.data) {
+            var isEmptyTextShowing = isContentsListShowingEmptyText(cb.jsonProperties.data.CB_CONTENT_PROP_CONTENTSLIST, queryData);
+            if (isEmptyTextShowing) {
+                return false;
+            }
             var desktopValue = (_f = (_e = cb.jsonProperties.data.CB_LAYOUT_PROP_HEIGHTADJUSTMENT) === null || _e === void 0 ? void 0 : _e.CB_LAYOUT_PROP_HEIGHTADJUSTMENT_SPEC_HEIGHTFITCONTENT) !== null && _f !== void 0 ? _f : true;
             if (device === 'DESKTOP') {
                 return desktopValue;
@@ -116,4 +123,14 @@ function getGridAreaFromCB(props, device) {
 }
 exports.getGridAreaFromCB = getGridAreaFromCB;
 exports.default = FlexGridItem;
+function isContentsListShowingEmptyText(props, queryData) {
+    var queryPath = "".concat(props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, "/").concat(props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING, "/").concat(props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET);
+    if (props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA === 'NONE' || !queryPath || !queryData) {
+        return true;
+    }
+    var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[queryPath];
+    if (!(queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length)) {
+        return true;
+    }
+}
 var templateObject_1;

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

@@ -24,6 +24,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
+var IntersectionObserverContext_1 = require("./IntersectionObserverContext");
 function DynamicLayout(_a) {
     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, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, shortcutKeyMode = _a.shortcutKeyMode, dynamicLayoutRef = _a.dynamicLayoutRef, zoomScale = _a.zoomScale, queryData = _a.queryData, placementRestriction = _a.placementRestriction;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) {
@@ -43,7 +44,7 @@ function DynamicLayout(_a) {
         .sort(function (a, b) { return a.order - b.order; });
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
     var editorType = 'DYNAMIC_LAYOUT_EDITOR';
-    return ((0, jsx_runtime_1.jsxs)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
+    return ((0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
             device: device,
             mode: mode,
             isPreview: isPreview,
@@ -56,7 +57,7 @@ function DynamicLayout(_a) {
             queryData: queryData,
             placementRestriction: placementRestriction,
             editorType: editorType
-        } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { dynamicLayoutRef: dynamicLayoutRef, editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
-                (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] })));
+        } }, { children: (0, jsx_runtime_1.jsxs)(IntersectionObserverContext_1.IntersectionObserverProvider, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { dynamicLayoutRef: dynamicLayoutRef, editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
+                    (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] }) })));
 }
 exports.default = DynamicLayout;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+type ObservationOptions = {
+    root?: Element | Document | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+};
+type IntersectionObserverContextType = {
+    observe: (element: Element, callback: IntersectionObserverCallback, options?: ObservationOptions) => void;
+    unobserve: (element: Element, options?: ObservationOptions) => void;
+};
+export declare const useIntersectionObserverContext: () => IntersectionObserverContextType | null;
+export declare function IntersectionObserverProvider({ children }: {
+    children: React.ReactNode;
+}): JSX.Element;
+export {};

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

@@ -0,0 +1,96 @@
+"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.IntersectionObserverProvider = exports.useIntersectionObserverContext = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var IntersectionObserverContext = (0, react_1.createContext)(null);
+var useIntersectionObserverContext = function () { return (0, react_1.useContext)(IntersectionObserverContext); };
+exports.useIntersectionObserverContext = useIntersectionObserverContext;
+function IntersectionObserverProvider(_a) {
+    var children = _a.children;
+    // Map of options hash -> IntersectionObserver instance
+    var observers = (0, react_1.useRef)(new Map());
+    // Map of options hash -> Map of Element -> Callback
+    var callbacks = (0, react_1.useRef)(new Map());
+    var getOptionsHash = function (options) {
+        var _a = options || {}, _b = _a.root, root = _b === void 0 ? null : _b, _c = _a.rootMargin, rootMargin = _c === void 0 ? '0px' : _c, _d = _a.threshold, threshold = _d === void 0 ? 0 : _d;
+        // Note: 'root' element reference cannot be easily hashed if it's not null/window.
+        // Ideally we assume root is usually viewport (null). If root is an element, this simplistic hashing might fail if we have multiple roots.
+        // For this specific use case (DynamicLayout), root is usually viewport.
+        // If specific root handling is needed, we need a better way to map it.
+        // For now, let's treat root object as 'null' in hash if it is object, or use a WeakMap if strictness is needed.
+        // However, typical usage here is viewport.
+        return JSON.stringify({
+            root: root ? 'element' : 'null',
+            rootMargin: rootMargin,
+            threshold: threshold
+        });
+    };
+    var observe = function (element, callback, options) {
+        var hash = getOptionsHash(options);
+        if (!observers.current.has(hash)) {
+            var observerCallback = function (entries, observer) {
+                var hashCallbacks = callbacks.current.get(hash);
+                if (!hashCallbacks)
+                    return;
+                entries.forEach(function (entry) {
+                    var cb = hashCallbacks.get(entry.target);
+                    if (cb) {
+                        cb([entry], observer);
+                    }
+                });
+            };
+            var newObserver = new IntersectionObserver(observerCallback, options);
+            observers.current.set(hash, newObserver);
+            callbacks.current.set(hash, new Map());
+        }
+        var observer = observers.current.get(hash);
+        var hashCallbacks = callbacks.current.get(hash);
+        if (!hashCallbacks.has(element)) {
+            hashCallbacks.set(element, callback);
+            observer.observe(element);
+        }
+    };
+    var unobserve = function (element, options) {
+        var hash = getOptionsHash(options);
+        var observer = observers.current.get(hash);
+        var hashCallbacks = callbacks.current.get(hash);
+        if (observer && hashCallbacks) {
+            if (hashCallbacks.has(element)) {
+                hashCallbacks.delete(element);
+                observer.unobserve(element);
+            }
+            // Optional: Cleanup observer if no elements
+            if (hashCallbacks.size === 0) {
+                observer.disconnect();
+                observers.current.delete(hash);
+                callbacks.current.delete(hash);
+            }
+        }
+    };
+    var value = (0, react_1.useMemo)(function () { return ({
+        observe: observe,
+        unobserve: unobserve
+    }); }, []);
+    (0, react_1.useEffect)(function () {
+        return function () {
+            // Cleanup all observers on unmount
+            observers.current.forEach(function (observer) { return observer.disconnect(); });
+            observers.current.clear();
+            callbacks.current.clear();
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(IntersectionObserverContext.Provider, __assign({ value: value }, { children: children })));
+}
+exports.IntersectionObserverProvider = IntersectionObserverProvider;

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

@@ -137,7 +137,7 @@ function Button(props) {
                 });
             }
             if (mode === 'EDIT') {
-                return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10478" });
+                return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10597" });
             }
             return '';
         }

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

@@ -38,6 +38,7 @@ var types_1 = require("../../../../../../../DynamicLayout/sections/CustomSection
 var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
 var isNullOrUndefined_1 = __importDefault(require("../../../../../../../DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var EmptyTextForRender_1 = __importDefault(require("../../../fallbacks/EmptyTextForRender"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
@@ -207,12 +208,18 @@ function ContentsCarousel(props) {
         }
         // 데이터 연결
         if (CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA === 'NONE' || !queryPath || !queryData) {
-            return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10477" }, "no-query");
+            if (mode === 'EDIT') {
+                return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10477" }, "no-query");
+            }
+            return (0, jsx_runtime_1.jsx)(EmptyTextForRender_1.default, {});
         }
         var queryDataValue = queryData[queryPath];
         // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 결과가 빈 경우
         if (!(queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length)) {
-            return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10478" }, "empty-item");
+            if (mode === 'EDIT') {
+                return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10660" }, "empty-item");
+            }
+            return (0, jsx_runtime_1.jsx)(EmptyTextForRender_1.default, {});
         }
         return renderSwiper(compositions);
     };

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

@@ -39,6 +39,7 @@ var types_1 = require("../../../../../../../DynamicLayout/sections/CustomSection
 var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
 var isNullOrUndefined_1 = __importDefault(require("../../../../../../../DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var EmptyTextForRender_1 = __importDefault(require("../../../fallbacks/EmptyTextForRender"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var S_HeightFitContentCover_1 = require("../components/S_HeightFitContentCover");
@@ -204,12 +205,18 @@ function ContentsList(props) {
         }
         // 데이터 연결
         if (CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA === 'NONE' || !queryPath || !queryData) {
-            return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10477" }, "no-query");
+            if (mode === 'EDIT') {
+                return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10477" }, "no-query");
+            }
+            return (0, jsx_runtime_1.jsx)(EmptyTextForRender_1.default, {});
         }
         var queryDataValue = queryData[queryPath];
         // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 결과가 빈 경우
         if (!(queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length)) {
-            return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10478" }, "empty-item");
+            if (mode === 'EDIT') {
+                return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10660" }, "empty-item");
+            }
+            return (0, jsx_runtime_1.jsx)(EmptyTextForRender_1.default, {});
         }
         return renderList(compositions);
     };

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

@@ -112,7 +112,7 @@ function Image(props) {
         if (CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DATA' ||
             CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DELEGATEDDATA') {
             if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
-                return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10477" });
+                return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10597" });
             }
             if (CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA === 'NONE') {
                 return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10477" });

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

@@ -38,6 +38,7 @@ var types_1 = require("../../../../../../../DynamicLayout/sections/CustomSection
 var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
 var isNullOrUndefined_1 = __importDefault(require("../../../../../../../DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var EmptyTextForRender_1 = __importDefault(require("../../../fallbacks/EmptyTextForRender"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
@@ -187,12 +188,18 @@ function SlideBanner(props) {
         }
         // 데이터 연결
         if (CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA === 'NONE' || !queryPath || !queryData) {
-            return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10477" }, "no-query");
+            if (mode === 'EDIT') {
+                return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10477" }, "no-query");
+            }
+            return (0, jsx_runtime_1.jsx)(EmptyTextForRender_1.default, {});
         }
         var queryDataValue = queryData[queryPath];
         // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 결과가 빈 경우
         if (!(queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length)) {
-            return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10478" }, "empty-item");
+            if (mode === 'EDIT') {
+                return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10660" }, "empty-item");
+            }
+            return (0, jsx_runtime_1.jsx)(EmptyTextForRender_1.default, {});
         }
         return renderSwiper(compositions);
     };

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

@@ -125,7 +125,7 @@ function Text(props) {
                 });
             }
             if (mode === 'EDIT') {
-                return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10478" });
+                return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10597" });
             }
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
         }

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/fallbacks/EmptyTextForRender.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function EmptyTextForRender(): JSX.Element;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/fallbacks/EmptyTextForRender.js

@@ -0,0 +1,20 @@
+"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 jsx_runtime_1 = require("react/jsx-runtime");
+var react_i18next_1 = require("react-i18next");
+var TextLabel_1 = require("../../../../../DynamicLayout/components/pdsOriginal/desktop/TextLabel");
+var styled_components_1 = __importDefault(require("styled-components"));
+function EmptyTextForRender() {
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    return ((0, jsx_runtime_1.jsx)(S_Wrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t('str_10663'), styleTheme: "body2Regular", colorTheme: "sysTextTertiary" }) }));
+}
+exports.default = EmptyTextForRender;
+var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 100%;\n"], ["\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 100%;\n"])));
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useIntersectionObserver.js

@@ -11,9 +11,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIntersectionObserver = void 0;
 var react_1 = require("react");
+var IntersectionObserverContext_1 = require("../../../IntersectionObserverContext");
 function useIntersectionObserver(elementRef, _a, deps) {
     var _b = _a.threshold, threshold = _b === void 0 ? 0 : _b, _c = _a.root, root = _c === void 0 ? null : _c, _d = _a.rootMargin, rootMargin = _d === void 0 ? '0%' : _d, _e = _a.freezeOnceVisible, freezeOnceVisible = _e === void 0 ? false : _e;
     var _f = (0, react_1.useState)(), entry = _f[0], setEntry = _f[1];
+    var context = (0, IntersectionObserverContext_1.useIntersectionObserverContext)();
     var frozen = (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) && freezeOnceVisible;
     (0, react_1.useLayoutEffect)(function () {
         var updateEntry = function (_a) {
@@ -26,6 +28,12 @@ function useIntersectionObserver(elementRef, _a, deps) {
             return;
         }
         var observerParams = { threshold: threshold, root: root, rootMargin: rootMargin };
+        if (context) {
+            context.observe(node, updateEntry, observerParams);
+            return function () {
+                context.unobserve(node, observerParams);
+            };
+        }
         var observer = new IntersectionObserver(updateEntry, observerParams);
         observer.observe(node);
         return function () {

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

@@ -11,7 +11,7 @@ export default function RenderPedigreeRecursively({ isEditMode, block, layoutIte
     rowHeight: number;
     device: Device;
     selectedRows: number[];
-    isParentGroupHeightVariable?: boolean;
+    isParentGroupHeightVariable?: boolean | null;
     parentGroupArea?: {
         rowStart: number;
         colStart: number;

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

@@ -59,7 +59,7 @@ function RenderPedigreeRecursively(_a) {
                     ? block.zOrderDesktopInternal
                     : block.zOrderMobileInternal,
                 maxHeight: gbMaxHeight
-            }, className: "flex-grid-item", "data-show-pinned": isEditMode }, { children: block.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(RenderPedigreeRecursively, { rowHeight: rowHeight, block: child, layoutItems: layoutItems, cbs: cbs, parentGroupArea: gridArea_1, device: device, selectedRows: relativeSelectedRows_1, isEditMode: isEditMode, isParentGroupHeightVariable: isGBHeightVariable_1 !== null && isGBHeightVariable_1 !== void 0 ? isGBHeightVariable_1 : true }, child.blockId)); }) })));
+            }, className: "flex-grid-item", "data-show-pinned": isEditMode }, { children: block.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(RenderPedigreeRecursively, { rowHeight: rowHeight, block: child, layoutItems: layoutItems, cbs: cbs, parentGroupArea: gridArea_1, device: device, selectedRows: relativeSelectedRows_1, isEditMode: isEditMode, isParentGroupHeightVariable: isGBHeightVariable_1 }, child.blockId)); }) })));
     }
     var cbIndex = cbs.findIndex(function (c) {
         if (c.blockId) {

package/package.json

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

package/release-note.md

@@ -1,7 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.303]
+## [v2.2.306]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* filter 아이콘 수정 및 fill 추가
-* 컬러 시트 최신화
+* [PDS-1420] CCB 이펙트에 따라 전환링크가 해당 항목으로 이동하지 않는 이슈