pds-dev-kit-web-test 2.7.228 → 2.7.233

package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton.d.ts

@@ -3,12 +3,12 @@ import type { PDSIconType, UiColors } from '../../common';
 export type IconButtonProps = {
     fillType?: 'fill' | 'line';
     shapeType?: 'circular' | 'rectangle';
-    baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
+    baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall' | number;
     baseColorKey?: UiColors;
     overrideBaseColorHex?: string;
     overrideBaseColorHexHover?: string;
     borderColorKey?: UiColors;
-    iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
+    iconSize?: 12 | 16 | 20 | 24 | 40 | 48 | 72;
     iconFillType?: 'fill' | 'line';
     iconName: PDSIconType;
     iconColorKey?: UiColors;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton.js

@@ -171,14 +171,17 @@ var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templat
         }[fillType];
 }, function (_a) {
     var baseSize = _a.baseSize;
-    return baseSize &&
-        {
-            xxlarge: xxlarge,
-            large: large,
-            medium: medium,
-            small: small,
-            xsmall: xsmall
-        }[baseSize];
+    return typeof baseSize === 'number'
+        ? "height: ".concat(baseSize, "px; width: ").concat(baseSize, "px;")
+        : typeof baseSize === 'string'
+            ? {
+                xxlarge: xxlarge,
+                large: large,
+                medium: medium,
+                small: small,
+                xsmall: xsmall
+            }[baseSize]
+            : null;
 });
 var S_IconButton = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), iconButtonStyle);
 exports.default = IconButton;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/hybrid/Icon/Icon.d.ts

@@ -2,7 +2,7 @@
 import type { PDSIconType, UiColors } from '../../common';
 export type IconProps = {
     iconName?: PDSIconType;
-    size?: 12 | 16 | 20 | 24 | 32 | 48 | 56 | 64 | 72;
+    size?: 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
     colorKey?: UiColors;
     overrideColorHex?: string;
     fillType?: 'line' | 'fill';

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

@@ -5574,13 +5574,13 @@ exports.SAMPLE_LIST_CB = {
             CB_STYLE_PROP_CONTENTSLISTPAGINATION: {
                 CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONLOCATION: 'OUTSET1',
                 'CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONLOCATION:MOBILE': null,
-                CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONPRIMARYCOLOR: '#1E1E20FF',
+                CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONPRIMARYCOLOR: '#ff1e00ff',
                 'CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE': null,
-                CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSECONDARYCOLOR: '#FFFFFF99',
+                CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSECONDARYCOLOR: '#0022fdff',
                 'CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE': null,
                 CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSIZE: 'LARGE',
                 'CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSIZE:MOBILE': null,
-                CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSTYLE: 'DESIGN1',
+                CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSTYLE: 'DESIGN7',
                 'CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPEC_PAGINATIONSTYLE:MOBILE': null
             },
             CB_STYLE_PROP_OPACITY: {

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

@@ -4569,7 +4569,7 @@ exports.SAMPLE_SLIDEBANNER_CB = {
                 'CB_STYLE_PROP_SLIDEBANNERDESIGN_SPEC_STYLE:MOBILE': null
             },
             CB_STYLE_PROP_SLIDEBANNERPAGINATION: {
-                CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONLOCATION: 'OUTSET1',
+                CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONLOCATION: 'OUTSET2',
                 'CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONLOCATION:MOBILE': null,
                 CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONPRIMARYCOLOR: '#A500CFF0',
                 'CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE': null,
@@ -4577,7 +4577,7 @@ exports.SAMPLE_SLIDEBANNER_CB = {
                 'CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSECONDARYCOLOR:MOBILE': null,
                 CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSIZE: 'LARGE',
                 'CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSIZE:MOBILE': null,
-                CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSTYLE: 'DESIGN3',
+                CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSTYLE: 'DESIGN1',
                 'CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONSTYLE:MOBILE': null
             },
             CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD: {

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

@@ -13,7 +13,7 @@ exports.MOCK_SECTIONS = [
             // MOCK_VIDEO_CB_2,
             // SAMPLE_CONTENTSCAROUSEL_CB,
             mock_slideBanner_1.SAMPLE_SLIDEBANNER_CB
-            // SAMPLE_LIST_CB,
+            // SAMPLE_LIST_CB
             // ...MOCK_COMPONENT_BLOCKS
         ],
         display: true,

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { INSET_POSTIION, OUTSET_POSTIION } from './types';
+import type { CB_STYLE_PROP_CONTENTSCAROUSELBUTTON_SPEC_PREVBTNSTYLE_TYPE, INSET_POSTIION, OUTSET_POSTIION } from './types';
 import type { CB_CONTENTSCAROUSEL } from '../../../../../../../DynamicLayout/sections/CustomSection/types';
 import type { CB_CONTENTSCAROUSEL_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_CONTENTSCAROUSEL_PROPERTIES_TYPE & IndexForIntersection & {
@@ -9,6 +9,7 @@ type ComponentType = 'PREV' | 'NEXT' | 'PROGRESSBAR';
 export type ContentsCarouselElementsProps = {
     type: ComponentType;
     position: OUTSET_POSTIION | INSET_POSTIION;
+    designType: CB_STYLE_PROP_CONTENTSCAROUSELBUTTON_SPEC_PREVBTNSTYLE_TYPE;
 };
 declare function ContentsCarousel(props: Props): JSX.Element;
 export default ContentsCarousel;

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

@@ -45,7 +45,8 @@ var ContentsCarouselCore_1 = __importDefault(require("./ContentsCarouselCore"));
 var contentsCarouselUtils_1 = require("./contentsCarouselUtils");
 var useFlexGridLayout_1 = require("./hooks/useFlexGridLayout");
 var useSwiper_1 = require("./hooks/useSwiper");
-var createComponent = function (type, getDesignType, getLocation) {
+var createComponent = function (type, getDesignType, getLocation, designType) {
+    if (designType === void 0) { designType = 'NONE'; }
     return function (normalStyle, hoverStyle, isHovered) {
         var normalDesign = getDesignType(normalStyle);
         var hoverDesign = getDesignType(hoverStyle);
@@ -55,7 +56,8 @@ var createComponent = function (type, getDesignType, getLocation) {
             return undefined;
         return {
             type: type,
-            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle)
+            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle),
+            designType: designType
         };
     };
 };
@@ -96,12 +98,16 @@ function ContentsCarousel(props) {
         : 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 createPrevButton = createComponent('PREV', function (style) { return style.prevBtnType || 'NONE'; }, function (style) { return style.prevBtnLocation || 'OUTSET1'; }, customNavigationNormalStyle.prevBtnType || 'NONE');
+    var createNextButton = createComponent('NEXT', function (style) { return style.nextBtnType || 'NONE'; }, function (style) { return style.nextBtnLocation || 'OUTSET1'; }, customNavigationNormalStyle.nextBtnType || 'NONE');
     var components = [
         createPrevButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
         createNextButton(customNavigationNormalStyle, customNavigationHoverStyle, isHovered),
-        { type: 'PROGRESSBAR', position: 'INSET5' }
+        {
+            type: 'PROGRESSBAR',
+            position: 'INSET5',
+            designType: customProgressbarNormalStyle.type || 'NONE'
+        }
     ].filter(function (component) { return component !== undefined; });
     var _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs, 
     // ccbInset,

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

@@ -50,13 +50,13 @@ var CustomNavigationNextBtn = function (_a) {
         : navigationConfigs_1.nextButtonMappedIcons[styles.nextBtnType || 'DESIGN1'];
     var buttonSize = 'large';
     var iconSize = 24;
-    if (styles.nextBtnSize === 'SMALL') {
-        buttonSize = 'small';
-        iconSize = 16;
+    if (styles.prevBtnSize === 'SMALL') {
+        buttonSize = 40;
+        iconSize = 20;
     }
-    if (styles.nextBtnSize === 'LARGE') {
-        buttonSize = 'xxlarge';
-        iconSize = 48;
+    if (styles.prevBtnSize === 'LARGE') {
+        buttonSize = 72;
+        iconSize = 40;
     }
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nextButton && ((0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "cb-contentscarousel-next-button", disabled: isDisabled, "$size": styles.nextBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: nextButton.shapeType, borderColorKey: nextButton.borderColorKey, overrideBaseColorHex: styles.nextBtnPrimaryColor, overrideBaseColorHexHover: hoverStyles.nextBtnPrimaryColor, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.nextBtnSecondaryColor, overrideIconColorHexHover: hoverStyles.nextBtnSecondaryColor, shadow: nextButton.shadow, useDefaultActiveStyle: false, useDefaultHoverStyle: false, onClick: onClick }) }))) }));
 };

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

@@ -51,12 +51,12 @@ var CustomNavigationPrevBtn = function (_a) {
     var buttonSize = 'large';
     var iconSize = 24;
     if (styles.prevBtnSize === 'SMALL') {
-        buttonSize = 'small';
-        iconSize = 16;
+        buttonSize = 40;
+        iconSize = 20;
     }
     if (styles.prevBtnSize === 'LARGE') {
-        buttonSize = 'xxlarge';
-        iconSize = 48;
+        buttonSize = 72;
+        iconSize = 40;
     }
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: prevButton && ((0, jsx_runtime_1.jsx)(S_PrevButton, __assign({ className: "cb-contentscarousel-prev-button", disabled: isDisabled, "$size": styles.prevBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: prevButton.shapeType, borderColorKey: prevButton.borderColorKey, iconName: prevButton.iconName, iconFillType: "line", iconColorKey: prevButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideBaseColorHex: styles.prevBtnPrimaryColor, overrideBaseColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : hoverStyles.prevBtnPrimaryColor, overrideIconColorHex: styles.prevBtnSecondaryColor, overrideIconColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : hoverStyles.prevBtnSecondaryColor, shadow: prevButton.shadow, onClick: onClick, useDefaultActiveStyle: false, useDefaultHoverStyle: false }) }))) }));
 };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { OUTSET_POSTIION, INSET_POSTIION } from './types';
+import type { OUTSET_POSTIION, INSET_POSTIION, CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE } from './types';
 import type { CB_LIST } from '../../../../../../../DynamicLayout/sections/CustomSection/types';
 import type { CB_LIST_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_LIST_PROPERTIES_TYPE & IndexForIntersection & {
@@ -9,6 +9,7 @@ type ComponentType = 'PAGINATION';
 export type ContentsListElementsProps = {
     type: ComponentType;
     position: OUTSET_POSTIION | INSET_POSTIION;
+    designType: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
 };
 declare function ContentsList(props: Props): JSX.Element;
 export default ContentsList;

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

@@ -42,7 +42,7 @@ var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var CustomPagination_1 = require("./components/CustomPagination");
 var contentsListUtils_1 = require("./contentsListUtils");
 var useFlexGridLayout_1 = require("./hooks/useFlexGridLayout");
-var createComponent = function (type, getDesignType, getLocation) {
+var createComponent = function (type, getDesignType, getLocation, designType) {
     return function (normalStyle, hoverStyle, isHovered) {
         var normalDesign = getDesignType(normalStyle);
         var hoverDesign = getDesignType(hoverStyle);
@@ -52,7 +52,8 @@ var createComponent = function (type, getDesignType, getLocation) {
             return undefined;
         return {
             type: type,
-            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle)
+            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle),
+            designType: designType
         };
     };
 };
@@ -130,7 +131,7 @@ function ContentsList(props) {
     var listMinHeight = oneCompositionMinHeight * numberOfRows +
         (numberOfRows - 1) * rowGap +
         paddingTB;
-    var createPagination = createComponent('PAGINATION', function (style) { return style.type || 'NONE'; }, function (style) { return style.location || 'OUTSET1'; });
+    var createPagination = createComponent('PAGINATION', function (style) { return style.type || 'NONE'; }, function (style) { return style.location || 'OUTSET1'; }, paginationNormalStyle.type || 'NONE');
     var components = [
         createPagination(paginationNormalStyle, paginationHoverStyle, isHovered)
     ].filter(function (component) { return component !== undefined; });
@@ -169,7 +170,7 @@ function ContentsList(props) {
                         else {
                             delete positionRefs.current[position];
                         }
-                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { zIndex: 3 }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentslist-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) { return renderElements(component); }) })) }), position));
+                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, groupComponents[0].designType)), { zIndex: 3 }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentslist-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.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", 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); }, "data-number-of-items": CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length, "data-number-of-columns": Math.min(CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": Math.min(CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-min-width": listMinWidth, "data-min-height": listMinHeight, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), (0, jsx_runtime_1.jsx)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef, style: {
                                 display: layout.display,
                                 flexDirection: layout.flexDirection,

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

@@ -81,19 +81,19 @@ exports.Design3 = Design3;
 function Design7(_a) {
     var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, size = _a.size, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
     var _b = LIST_PAGINATION_SIZES.DESIGN7[size], BUTTON_SIZE = _b.BUTTON_SIZE, SELECTED_TEXT_STYLE_THEME = _b.SELECTED_TEXT_STYLE_THEME, UNSELECTED_TEXT_STYLE_THEME = _b.UNSELECTED_TEXT_STYLE_THEME, ICON_SIZE = _b.ICON_SIZE;
-    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.D_IconButton, { iconName: "ic_arrow_left", iconSize: ICON_SIZE, baseSize: BUTTON_SIZE, iconColorKey: "ui_cpnt_icon_sys_dark", overrideIconColorHex: primaryColor, baseColorKey: "ui_cpnt_button_fill_base_transparent" }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: {
+    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.D_IconButton, { iconName: "ic_arrow_left", iconSize: ICON_SIZE, baseSize: BUTTON_SIZE, iconColorKey: "ui_cpnt_icon_sys_dark", overrideIconColorHex: primaryColor, baseColorKey: "ui_cpnt_button_fill_base_transparent", overrideIconColorHexHover: primaryColor }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: {
                     marginLeft: '8px',
                     color: primaryColor
-                }, styleTheme: SELECTED_TEXT_STYLE_THEME }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginLeft: '4px', opacity: 0.6, color: primaryColor }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: "/" })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', opacity: 0.6, color: primaryColor }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.D_IconButton, { iconName: "ic_arrow_right", iconSize: ICON_SIZE, baseSize: BUTTON_SIZE, iconColorKey: "ui_cpnt_icon_sys_dark", overrideIconColorHex: primaryColor, baseColorKey: "ui_cpnt_button_fill_base_transparent" }) }))] })));
+                }, styleTheme: SELECTED_TEXT_STYLE_THEME }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginLeft: '4px', marginRight: '4px', opacity: 0.6, color: primaryColor }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: "/" })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', opacity: 0.6, color: primaryColor }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.D_IconButton, { iconName: "ic_arrow_right", iconSize: ICON_SIZE, baseSize: BUTTON_SIZE, iconColorKey: "ui_cpnt_icon_sys_dark", overrideIconColorHex: primaryColor, baseColorKey: "ui_cpnt_button_fill_base_transparent", overrideIconColorHexHover: primaryColor }) }))] })));
 }
 exports.Design7 = Design7;
 function Design8(_a) {
     var total = _a.total, current = _a.current, pages = _a.pages, primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, size = _a.size, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
     var _b = LIST_PAGINATION_SIZES.DESIGN8[size], BUTTON_SIZE = _b.BUTTON_SIZE, SELECTED_TEXT_STYLE_THEME = _b.SELECTED_TEXT_STYLE_THEME, UNSELECTED_TEXT_STYLE_THEME = _b.UNSELECTED_TEXT_STYLE_THEME, ICON_SIZE = _b.ICON_SIZE;
-    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.D_IconButton, { iconName: "ic_arrow_left", iconSize: ICON_SIZE, baseSize: BUTTON_SIZE, iconColorKey: "ui_cpnt_icon_sys_dark", overrideIconColorHex: primaryColor, baseColorKey: "ui_cpnt_button_fill_base_transparent" }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: {
+    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ style: { color: secondaryColor || 'inherit' } }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.D_IconButton, { iconName: "ic_arrow_left", iconSize: ICON_SIZE, baseSize: BUTTON_SIZE, iconColorKey: "ui_cpnt_icon_sys_dark", overrideIconColorHex: primaryColor, baseColorKey: "ui_cpnt_button_fill_base_transparent", overrideIconColorHexHover: primaryColor }) })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: {
                     marginLeft: '8px',
                     color: primaryColor
-                }, styleTheme: SELECTED_TEXT_STYLE_THEME }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '8px', opacity: 0.6, color: primaryColor }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: "|" })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', opacity: 0.6, color: primaryColor }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.D_IconButton, { iconName: "ic_arrow_right", iconSize: ICON_SIZE, baseSize: BUTTON_SIZE, iconColorKey: "ui_cpnt_icon_sys_dark", overrideIconColorHex: primaryColor, baseColorKey: "ui_cpnt_button_fill_base_transparent" }) }))] })));
+                }, styleTheme: SELECTED_TEXT_STYLE_THEME }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '8px', opacity: 0.6, color: primaryColor }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: "|" })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', opacity: 0.6, color: primaryColor }, styleTheme: UNSELECTED_TEXT_STYLE_THEME }, { children: total })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.D_IconButton, { iconName: "ic_arrow_right", iconSize: ICON_SIZE, baseSize: BUTTON_SIZE, iconColorKey: "ui_cpnt_icon_sys_dark", overrideIconColorHex: primaryColor, baseColorKey: "ui_cpnt_button_fill_base_transparent", overrideIconColorHexHover: primaryColor }) }))] })));
 }
 exports.Design8 = Design8;
 // NOTE: 이 밑은 NOT IN USE

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { ContentsListElementsProps } from '../ContentsList';
+import type { CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE } from '../types';
 import type { CSSProperties } from 'styled-components';
 export declare const useFlexGridLayout: ({ components }: {
     components: ContentsListElementsProps[];
@@ -13,6 +14,6 @@ export declare const useFlexGridLayout: ({ components }: {
         left: string;
     };
     componentGroups: Record<string, ContentsListElementsProps[]>;
-    getPositionStyle: (position: string, ccbInset: Record<string, string>) => CSSProperties;
+    getPositionStyle: (position: string, ccbInset: Record<string, string>, designType: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE) => CSSProperties;
     getComponentGroupLayout: (components: ContentsListElementsProps[], position: string) => CSSProperties;
 };

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

@@ -19,6 +19,7 @@ var useFlexGridLayout = function (_a) {
     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)({});
+    console.log('useFlexGridLayout components:', components);
     // 위치별로 컴포넌트 그룹화
     var getComponentsByPosition = function () {
         var groups = {};
@@ -60,7 +61,7 @@ var useFlexGridLayout = function (_a) {
         return directions[position];
     };
     // 위치에 따른 스타일 결정 (CCB 크기를 고려)
-    var getPositionStyle = function (position, ccbInset) {
+    var getPositionStyle = function (position, ccbInset, designType) {
         var base = {
             position: 'absolute',
             display: 'flex',

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { INSET_POSTIION, OUTSET_POSTIION } from './types';
+import type { CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE, INSET_POSTIION, OUTSET_POSTIION } from './types';
 import type { CB_SLIDEBANNER } from '../../../../../../../DynamicLayout/sections/CustomSection/types';
 import type { CB_SLIDEBANNER_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_SLIDEBANNER_PROPERTIES_TYPE & IndexForIntersection & {
@@ -9,6 +9,8 @@ type ComponentType = 'PREV' | 'NEXT' | 'PAGINATION' | 'PROGRESSBAR';
 export type SlideBannerElementsProps = {
     type: ComponentType;
     position: OUTSET_POSTIION | INSET_POSTIION;
+    designType: CB_STYLE_PROP_SLIDEBANNER_SPEC_PREVBTNSTYLE_TYPE;
+    size: 'LARGE' | 'MEDIUM' | 'SMALL';
 };
 declare function SlideBanner(props: Props): JSX.Element;
 export default SlideBanner;

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

@@ -46,8 +46,10 @@ 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 createComponent = function (type, getDesignType, getLocation, designType, size) {
+    if (size === void 0) { size = 'MEDIUM'; }
+    return function (normalStyle, hoverStyle, isHovered, size) {
+        if (size === void 0) { size = 'MEDIUM'; }
         var normalDesign = getDesignType(normalStyle);
         var hoverDesign = getDesignType(hoverStyle);
         if (isHovered && hoverDesign === 'NONE')
@@ -56,7 +58,9 @@ var createComponent = function (type, getDesignType, getLocation) {
             return undefined;
         return {
             type: type,
-            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle)
+            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle),
+            designType: designType,
+            size: size
         };
     };
 };
@@ -99,24 +103,22 @@ function SlideBanner(props) {
         : 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 createPrevButton = createComponent('PREV', function (style) { return style.prevBtnType || 'NONE'; }, function (style) { return style.prevBtnLocation || 'OUTSET1'; }, customNavigationNormalStyle.prevBtnType || 'NONE', customNavigationNormalStyle.prevBtnSize || 'MEDIUM');
+    var createNextButton = createComponent('NEXT', function (style) { return style.nextBtnType || 'NONE'; }, function (style) { return style.nextBtnLocation || 'OUTSET1'; }, customNavigationNormalStyle.nextBtnType || 'NONE', customNavigationNormalStyle.nextBtnSize || 'MEDIUM');
+    var createPagination = createComponent('PAGINATION', function (style) { return style.type || 'NONE'; }, function (style) { return style.location || 'OUTSET1'; }, customPaginationNormalStyle.type || 'NONE', customPaginationNormalStyle.size || 'MEDIUM');
     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 _k = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _k.layoutRef, positionRefs = _k.positionRefs, ccbInset = _k.ccbInset, componentGroups = _k.componentGroups, getPositionStyle = _k.getPositionStyle, getComponentGroupLayout = _k.getComponentGroupLayout;
+    // const ccbInset = {
+    //   top: '0px',
+    //   right: '0px',
+    //   bottom: '0px',
+    //   left: '0px'
+    // };
     var renderElements = function (component) {
         var _a;
         switch (component.type) {
@@ -141,6 +143,7 @@ function SlideBanner(props) {
         .map(function (item) {
         return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
     });
+    console.log('entries', Object.entries(componentGroups));
     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) {
@@ -150,7 +153,7 @@ function SlideBanner(props) {
                         else {
                             delete positionRefs.current[position];
                         }
-                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { zIndex: 3 }) }, { 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));
+                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, groupComponents[0].designType, groupComponents[0].size)), { zIndex: 3 }) }, { 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.jsxs)(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_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), (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, effect: CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE === null || CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
                                         valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
                                         queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,

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

@@ -48,14 +48,14 @@ var CustomNavigationNextBtn = function (_a) {
     var nextButton = styles.nextBtnType === 'NONE'
         ? undefined
         : navigationConfigs_1.nextButtonMappedIcons[styles.nextBtnType || 'DESIGN1'];
-    var buttonSize = 'large';
-    var iconSize = 24;
+    var buttonSize = 48;
+    var iconSize = 20;
     if (styles.nextBtnSize === 'SMALL') {
-        buttonSize = 'small';
-        iconSize = 16;
+        buttonSize = 40;
+        iconSize = 24;
     }
     if (styles.nextBtnSize === 'LARGE') {
-        buttonSize = 'xxlarge';
+        buttonSize = 80;
         iconSize = 48;
     }
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nextButton && ((0, jsx_runtime_1.jsx)(S_NextButton, __assign({ className: "cb-slidebanner-next-button", disabled: isDisabled, "$size": styles.nextBtnSize }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: buttonSize, iconSize: iconSize, shapeType: nextButton.shapeType, borderColorKey: nextButton.borderColorKey, overrideBaseColorHex: styles.nextBtnPrimaryColor, overrideBaseColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : hoverStyles.nextBtnPrimaryColor, iconName: nextButton.iconName, iconFillType: "line", iconColorKey: nextButton.iconColorKey || 'ui_cpnt_icon_sys_black', overrideIconColorHex: styles.nextBtnSecondaryColor, overrideIconColorHexHover: hoverStyles === null || hoverStyles === void 0 ? void 0 : hoverStyles.nextBtnSecondaryColor, shadow: nextButton.shadow, useDefaultActiveStyle: false, useDefaultHoverStyle: false, onClick: onClick }) }))) }));

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

@@ -0,0 +1,4 @@
+import type { CSSProperties } from 'styled-components';
+export declare function getPosition(position: string, designType: string, size: string): CSSProperties;
+export declare const POS_OUTSET: Record<string, Record<string, Record<string, CSSProperties>>>;
+export declare const POS_INSET: Record<string, Record<string, CSSProperties>>;

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

@@ -0,0 +1,596 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.POS_INSET = exports.POS_OUTSET = exports.getPosition = void 0;
+var GAP = 8;
+function getPosition(position, designType, size) {
+    var _a, _b, _c;
+    if (position.startsWith('OUTSET')) {
+        return (_b = (_a = exports.POS_OUTSET[position]) === null || _a === void 0 ? void 0 : _a[designType]) === null || _b === void 0 ? void 0 : _b[size];
+    }
+    return (_c = exports.POS_INSET[position]) === null || _c === void 0 ? void 0 : _c[size];
+}
+exports.getPosition = getPosition;
+exports.POS_OUTSET = {
+    //--------------------------------------------------
+    // OUTSET 1 (left 0px 공통)
+    //--------------------------------------------------
+    OUTSET1: {
+        DESIGN1: {
+            LARGE: { top: -50, left: 0 },
+            MEDIUM: { top: -45, left: 0 },
+            SMALL: { top: -40, left: 0 }
+        },
+        DESIGN2: {
+            LARGE: { top: -50, left: 0 },
+            MEDIUM: { top: -45, left: 0 },
+            SMALL: { top: -40, left: 0 }
+        },
+        DESIGN3: {
+            LARGE: { top: -50, left: 0 },
+            MEDIUM: { top: -45, left: 0 },
+            SMALL: { top: -40, left: 0 }
+        },
+        DESIGN4: {
+            LARGE: { top: -50, left: 0 },
+            MEDIUM: { top: -45, left: 0 },
+            SMALL: { top: -40, left: 0 }
+        },
+        DESIGN5: {
+            LARGE: { top: -85, left: 0 },
+            MEDIUM: { top: -80, left: 0 },
+            SMALL: { top: -75, left: 0 }
+        },
+        DESIGN6: {
+            LARGE: { top: -35, left: 0 },
+            MEDIUM: { top: -30, left: 0 },
+            SMALL: { top: -25, left: 0 }
+        },
+        DESIGN7: {
+            LARGE: { top: -85, left: 0 },
+            MEDIUM: { top: -80, left: 0 },
+            SMALL: { top: -75, left: 0 }
+        },
+        DESIGN8: {
+            LARGE: { top: -25, left: 0 },
+            MEDIUM: { top: -25, left: 0 },
+            SMALL: { top: -20, left: 0 }
+        }
+    },
+    //--------------------------------------------------
+    // OUTSET 2 (left center 공통, transform 추출)
+    //--------------------------------------------------
+    OUTSET2: {
+        DESIGN1: {
+            LARGE: { top: -50, left: 'center', transform: 'translateX(-50%)' },
+            MEDIUM: { top: -45, left: 'center', transform: 'translateX(-50%)' },
+            SMALL: { top: -40, left: 'center', transform: 'translateX(-50%)' }
+        },
+        DESIGN2: {
+            LARGE: { top: -50, left: 'center' },
+            MEDIUM: { top: -45, left: 'center' },
+            SMALL: { top: -40, left: 'center' }
+        },
+        DESIGN3: {
+            LARGE: { top: -50, left: 'center' },
+            MEDIUM: { top: -45, left: 'center' },
+            SMALL: { top: -40, left: 'center' }
+        },
+        DESIGN4: {
+            LARGE: { top: -50, left: 'center' },
+            MEDIUM: { top: -45, left: 'center' },
+            SMALL: { top: -40, left: 'center' }
+        },
+        DESIGN5: {
+            LARGE: { top: -85, left: 'center' },
+            MEDIUM: { top: -80, left: 'center' },
+            SMALL: { top: -75, left: 'center' }
+        },
+        DESIGN6: {
+            LARGE: { top: -35, left: 'center' },
+            MEDIUM: { top: -30, left: 'center' },
+            SMALL: { top: -25, left: 'center' }
+        },
+        DESIGN7: {
+            LARGE: { top: -85, left: 'center' },
+            MEDIUM: { top: -80, left: 'center' },
+            SMALL: { top: -75, left: 'center' }
+        },
+        DESIGN8: {
+            LARGE: { top: -25, left: 'center' },
+            MEDIUM: { top: -25, left: 'center' },
+            SMALL: { top: -20, left: 'center' }
+        }
+    },
+    //--------------------------------------------------
+    // OUTSET 3 (right 0px 공통)
+    //--------------------------------------------------
+    OUTSET3: {
+        DESIGN1: {
+            LARGE: { top: -50, right: 0 },
+            MEDIUM: { top: -45, right: 0 },
+            SMALL: { top: -40, right: 0 }
+        },
+        DESIGN2: {
+            LARGE: { top: -50, right: 0 },
+            MEDIUM: { top: -45, right: 0 },
+            SMALL: { top: -40, right: 0 }
+        },
+        DESIGN3: {
+            LARGE: { top: -50, right: 0 },
+            MEDIUM: { top: -45, right: 0 },
+            SMALL: { top: -40, right: 0 }
+        },
+        DESIGN4: {
+            LARGE: { top: -50, right: 0 },
+            MEDIUM: { top: -45, right: 0 },
+            SMALL: { top: -40, right: 0 }
+        },
+        DESIGN5: {
+            LARGE: { top: -85, right: 0 },
+            MEDIUM: { top: -80, right: 0 },
+            SMALL: { top: -75, right: 0 }
+        },
+        DESIGN6: {
+            LARGE: { top: -35, right: 0 },
+            MEDIUM: { top: -30, right: 0 },
+            SMALL: { top: -25, right: 0 }
+        },
+        DESIGN7: {
+            LARGE: { top: -85, right: 0 },
+            MEDIUM: { top: -80, right: 0 },
+            SMALL: { top: -75, right: 0 }
+        },
+        DESIGN8: {
+            LARGE: { top: -25, right: 0 },
+            MEDIUM: { top: -25, right: 0 },
+            SMALL: { top: -20, right: 0 }
+        }
+    },
+    //--------------------------------------------------
+    // OUTSET 4 (top 0px 공통)
+    //--------------------------------------------------
+    OUTSET4: {
+        DESIGN1: {
+            LARGE: { top: 0, right: -65 },
+            MEDIUM: { top: 0, right: -60 },
+            SMALL: { top: 0, right: -60 }
+        },
+        DESIGN2: {
+            LARGE: { top: 0, right: -65 },
+            MEDIUM: { top: 0, right: -60 },
+            SMALL: { top: 0, right: -60 }
+        },
+        DESIGN3: {
+            LARGE: { top: 0, right: -115 },
+            MEDIUM: { top: 0, right: -110 },
+            SMALL: { top: 0, right: -95 }
+        },
+        DESIGN4: {
+            LARGE: { top: 0, right: -115 },
+            MEDIUM: { top: 0, right: -110 },
+            SMALL: { top: 0, right: -95 }
+        },
+        DESIGN5: {
+            LARGE: { top: 0, right: -45 },
+            MEDIUM: { top: 0, right: -45 },
+            SMALL: { top: 0, right: -45 }
+        },
+        DESIGN6: {
+            LARGE: { top: 0, left: 'calc(100% + 20px)' },
+            MEDIUM: { top: 0, left: 'calc(100% + 12px)' },
+            SMALL: { top: 0, left: 'calc(100% + 12px)' }
+        },
+        DESIGN7: {
+            LARGE: { top: 0, right: -40 },
+            MEDIUM: { top: 0, right: -30 },
+            SMALL: { top: 0, right: -25 }
+        },
+        DESIGN8: {
+            LARGE: { top: 0, left: 'calc(100% + 20px)' },
+            MEDIUM: { top: 0, left: 'calc(100% + 12px)' },
+            SMALL: { top: 0, left: 'calc(100% + 12px)' }
+        }
+    },
+    //--------------------------------------------------
+    // OUTSET 5 (top center 공통, transform 추출)
+    //--------------------------------------------------
+    OUTSET5: {
+        DESIGN1: {
+            LARGE: { top: 'center', right: -65, transform: 'translateY(-50%)' },
+            MEDIUM: { top: 'center', right: -60, transform: 'translateY(-50%)' },
+            SMALL: { top: 'center', right: -60, transform: 'translateY(-50%)' }
+        },
+        DESIGN2: {
+            LARGE: { top: 'center', right: -65, transform: 'translateY(-50%)' },
+            MEDIUM: { top: 'center', right: -60, transform: 'translateY(-50%)' },
+            SMALL: { top: 'center', right: -60, transform: 'translateY(-50%)' }
+        },
+        DESIGN3: {
+            LARGE: { top: 'center', right: -115, transform: 'translateY(-50%)' },
+            MEDIUM: { top: 'center', right: -110, transform: 'translateY(-50%)' },
+            SMALL: { top: 'center', right: -95, transform: 'translateY(-50%)' }
+        },
+        DESIGN4: {
+            LARGE: { top: 'center', right: -115, transform: 'translateY(-50%)' },
+            MEDIUM: { top: 'center', right: -110, transform: 'translateY(-50%)' },
+            SMALL: { top: 'center', right: -95, transform: 'translateY(-50%)' }
+        },
+        DESIGN5: {
+            LARGE: { top: 'center', right: -45, transform: 'translateY(-50%)' },
+            MEDIUM: { top: 'center', right: -45, transform: 'translateY(-50%)' },
+            SMALL: { top: 'center', right: -45, transform: 'translateY(-50%)' }
+        },
+        DESIGN6: {
+            LARGE: { top: 'center', left: 'calc(100% + 20px)', transform: 'translateY(-50%)' },
+            MEDIUM: { top: 'center', left: 'calc(100% + 12px)', transform: 'translateY(-50%)' },
+            SMALL: { top: 'center', left: 'calc(100% + 12px)', transform: 'translateY(-50%)' }
+        },
+        DESIGN7: {
+            LARGE: { top: 'center', right: -40, transform: 'translateY(-50%)' },
+            MEDIUM: { top: 'center', right: -30, transform: 'translateY(-50%)' },
+            SMALL: { top: 'center', right: -25, transform: 'translateY(-50%)' }
+        },
+        DESIGN8: {
+            LARGE: { top: 'center', left: 'calc(100% + 20px)', transform: 'translateY(-50%)' },
+            MEDIUM: { top: 'center', left: 'calc(100% + 12px)', transform: 'translateY(-50%)' },
+            SMALL: { top: 'center', left: 'calc(100% + 12px)', transform: 'translateY(-50%)' }
+        }
+    },
+    //--------------------------------------------------
+    // OUTSET 6 (bottom 0px 공통)
+    //--------------------------------------------------
+    OUTSET6: {
+        DESIGN1: {
+            LARGE: { bottom: 0, right: -65 },
+            MEDIUM: { bottom: 0, right: -60 },
+            SMALL: { bottom: 0, right: -60 }
+        },
+        DESIGN2: {
+            LARGE: { bottom: 0, right: -65 },
+            MEDIUM: { bottom: 0, right: -60 },
+            SMALL: { bottom: 0, right: -60 }
+        },
+        DESIGN3: {
+            LARGE: { bottom: 0, right: -115 },
+            MEDIUM: { bottom: 0, right: -110 },
+            SMALL: { bottom: 0, right: -95 }
+        },
+        DESIGN4: {
+            LARGE: { bottom: 0, right: -115 },
+            MEDIUM: { bottom: 0, right: -110 },
+            SMALL: { bottom: 0, right: -95 }
+        },
+        DESIGN5: {
+            LARGE: { bottom: 0, right: -45 },
+            MEDIUM: { bottom: 0, right: -45 },
+            SMALL: { bottom: 0, right: -45 }
+        },
+        DESIGN6: {
+            LARGE: { bottom: 0, left: 'calc(100% + 20px)' },
+            MEDIUM: { bottom: 0, left: 'calc(100% + 12px)' },
+            SMALL: { bottom: 0, left: 'calc(100% + 12px)' }
+        },
+        DESIGN7: {
+            LARGE: { bottom: 0, right: -40 },
+            MEDIUM: { bottom: 0, right: -30 },
+            SMALL: { bottom: 0, right: -25 }
+        },
+        DESIGN8: {
+            LARGE: { bottom: 0, left: 'calc(100% + 20px)' },
+            MEDIUM: { bottom: 0, left: 'calc(100% + 12px)' },
+            SMALL: { bottom: 0, left: 'calc(100% + 12px)' }
+        }
+    },
+    //--------------------------------------------------
+    // OUTSET 7 (right 0px 공통)
+    //--------------------------------------------------
+    OUTSET7: {
+        DESIGN1: {
+            LARGE: { bottom: -50, right: 0 },
+            MEDIUM: { bottom: -45, right: 0 },
+            SMALL: { bottom: -40, right: 0 }
+        },
+        DESIGN2: {
+            LARGE: { bottom: -50, right: 0 },
+            MEDIUM: { bottom: -45, right: 0 },
+            SMALL: { bottom: -40, right: 0 }
+        },
+        DESIGN3: {
+            LARGE: { bottom: -50, right: 0 },
+            MEDIUM: { bottom: -45, right: 0 },
+            SMALL: { bottom: -40, right: 0 }
+        },
+        DESIGN4: {
+            LARGE: { bottom: -50, right: 0 },
+            MEDIUM: { bottom: -45, right: 0 },
+            SMALL: { bottom: -40, right: 0 }
+        },
+        DESIGN5: {
+            LARGE: { bottom: -85, right: 0 },
+            MEDIUM: { bottom: -80, right: 0 },
+            SMALL: { bottom: -75, right: 0 }
+        },
+        DESIGN6: {
+            LARGE: { bottom: -35, right: 0 },
+            MEDIUM: { bottom: -30, right: 0 },
+            SMALL: { bottom: -25, right: 0 }
+        },
+        DESIGN7: {
+            LARGE: { bottom: -85, right: 0 },
+            MEDIUM: { bottom: -80, right: 0 },
+            SMALL: { bottom: -75, right: 0 }
+        },
+        DESIGN8: {
+            LARGE: { bottom: -25, right: 0 },
+            MEDIUM: { bottom: -25, right: 0 },
+            SMALL: { bottom: -20, right: 0 }
+        }
+    },
+    //--------------------------------------------------
+    // OUTSET 8 (left center 공통, transform 추출)
+    //--------------------------------------------------
+    OUTSET8: {
+        DESIGN1: {
+            LARGE: { bottom: -50, left: 'center', transform: 'translateX(-50%)' },
+            MEDIUM: { bottom: -45, left: 'center', transform: 'translateX(-50%)' },
+            SMALL: { bottom: -40, left: 'center', transform: 'translateX(-50%)' }
+        },
+        DESIGN2: {
+            LARGE: { bottom: -50, left: 'center', transform: 'translateX(-50%)' },
+            MEDIUM: { bottom: -45, left: 'center', transform: 'translateX(-50%)' },
+            SMALL: { bottom: -40, left: 'center', transform: 'translateX(-50%)' }
+        },
+        DESIGN3: {
+            LARGE: { bottom: -50, left: 'center', transform: 'translateX(-50%)' },
+            MEDIUM: { bottom: -45, left: 'center', transform: 'translateX(-50%)' },
+            SMALL: { bottom: -40, left: 'center', transform: 'translateX(-50%)' }
+        },
+        DESIGN4: {
+            LARGE: { bottom: -50, left: 'center', transform: 'translateX(-50%)' },
+            MEDIUM: { bottom: -45, left: 'center', transform: 'translateX(-50%)' },
+            SMALL: { bottom: -40, left: 'center', transform: 'translateX(-50%)' }
+        },
+        DESIGN5: {
+            LARGE: { bottom: -85, left: 'center', transform: 'translateX(-50%)' },
+            MEDIUM: { bottom: -80, left: 'center', transform: 'translateX(-50%)' },
+            SMALL: { bottom: -75, left: 'center', transform: 'translateX(-50%)' }
+        },
+        DESIGN6: {
+            LARGE: { bottom: -35, left: 'center', transform: 'translateX(-50%)' },
+            MEDIUM: { bottom: -30, left: 'center', transform: 'translateX(-50%)' },
+            SMALL: { bottom: -25, left: 'center', transform: 'translateX(-50%)' }
+        },
+        DESIGN7: {
+            LARGE: { bottom: -85, left: 'center', transform: 'translateX(-50%)' },
+            MEDIUM: { bottom: -80, left: 'center', transform: 'translateX(-50%)' },
+            SMALL: { bottom: -75, left: 'center', transform: 'translateX(-50%)' }
+        },
+        DESIGN8: {
+            LARGE: { bottom: -25, left: 'center', transform: 'translateX(-50%)' },
+            MEDIUM: { bottom: -25, left: 'center', transform: 'translateX(-50%)' },
+            SMALL: { bottom: -20, left: 'center', transform: 'translateX(-50%)' }
+        }
+    },
+    //--------------------------------------------------
+    // OUTSET 9 (left 0px 공통)
+    //--------------------------------------------------
+    OUTSET9: {
+        DESIGN1: {
+            LARGE: { bottom: -50, left: 0 },
+            MEDIUM: { bottom: -45, left: 0 },
+            SMALL: { bottom: -40, left: 0 }
+        },
+        DESIGN2: {
+            LARGE: { bottom: -50, left: 0 },
+            MEDIUM: { bottom: -45, left: 0 },
+            SMALL: { bottom: -40, left: 0 }
+        },
+        DESIGN3: {
+            LARGE: { bottom: -50, left: 0 },
+            MEDIUM: { bottom: -45, left: 0 },
+            SMALL: { bottom: -40, left: 0 }
+        },
+        DESIGN4: {
+            LARGE: { bottom: -50, left: 0 },
+            MEDIUM: { bottom: -45, left: 0 },
+            SMALL: { bottom: -40, left: 0 }
+        },
+        DESIGN5: {
+            LARGE: { bottom: -85, left: 0 },
+            MEDIUM: { bottom: -80, left: 0 },
+            SMALL: { bottom: -75, left: 0 }
+        },
+        DESIGN6: {
+            LARGE: { bottom: -35, left: 0 },
+            MEDIUM: { bottom: -30, left: 0 },
+            SMALL: { bottom: -25, left: 0 }
+        },
+        DESIGN7: {
+            LARGE: { bottom: -85, left: 0 },
+            MEDIUM: { bottom: -80, left: 0 },
+            SMALL: { bottom: -75, left: 0 }
+        },
+        DESIGN8: {
+            LARGE: { bottom: -25, left: 0 },
+            MEDIUM: { bottom: -25, left: 0 },
+            SMALL: { bottom: -20, left: 0 }
+        }
+    },
+    //--------------------------------------------------
+    // OUTSET 10 (bottom 0px 공통)
+    //--------------------------------------------------
+    OUTSET10: {
+        DESIGN1: {
+            LARGE: { bottom: 0, left: -65 },
+            MEDIUM: { bottom: 0, left: -60 },
+            SMALL: { bottom: 0, left: -60 }
+        },
+        DESIGN2: {
+            LARGE: { bottom: 0, left: -65 },
+            MEDIUM: { bottom: 0, left: -60 },
+            SMALL: { bottom: 0, left: -60 }
+        },
+        DESIGN3: {
+            LARGE: { bottom: 0, left: -115 },
+            MEDIUM: { bottom: 0, left: -110 },
+            SMALL: { bottom: 0, left: -95 }
+        },
+        DESIGN4: {
+            LARGE: { bottom: 0, left: -115 },
+            MEDIUM: { bottom: 0, left: -110 },
+            SMALL: { bottom: 0, left: -95 }
+        },
+        DESIGN5: {
+            LARGE: { bottom: 0, left: -45 },
+            MEDIUM: { bottom: 0, left: -45 },
+            SMALL: { bottom: 0, left: -45 }
+        },
+        DESIGN6: {
+            LARGE: { bottom: 0, right: 'calc(100% + 20px)' },
+            MEDIUM: { bottom: 0, right: 'calc(100% + 12px)' },
+            SMALL: { bottom: 0, right: 'calc(100% + 12px)' }
+        },
+        DESIGN7: {
+            LARGE: { bottom: 0, left: -40 },
+            MEDIUM: { bottom: 0, left: -30 },
+            SMALL: { bottom: 0, left: -25 }
+        },
+        DESIGN8: {
+            LARGE: { bottom: 0, right: 'calc(100% + 20px)' },
+            MEDIUM: { bottom: 0, right: 'calc(100% + 12px)' },
+            SMALL: { bottom: 0, right: 'calc(100% + 12px)' }
+        }
+    },
+    //--------------------------------------------------
+    // OUTSET 11 (top center 공통, transform 추출)
+    //--------------------------------------------------
+    OUTSET11: {
+        DESIGN1: {
+            LARGE: { top: 'center', transform: 'translateY(-50%)', left: -65 },
+            MEDIUM: { top: 'center', transform: 'translateY(-50%)', left: -60 },
+            SMALL: { top: 'center', transform: 'translateY(-50%)', left: -60 }
+        },
+        DESIGN2: {
+            LARGE: { top: 'center', transform: 'translateY(-50%)', left: -65 },
+            MEDIUM: { top: 'center', transform: 'translateY(-50%)', left: -60 },
+            SMALL: { top: 'center', transform: 'translateY(-50%)', left: -60 }
+        },
+        DESIGN3: {
+            LARGE: { top: 'center', transform: 'translateY(-50%)', left: -115 },
+            MEDIUM: { top: 'center', transform: 'translateY(-50%)', left: -110 },
+            SMALL: { top: 'center', transform: 'translateY(-50%)', left: -95 }
+        },
+        DESIGN4: {
+            LARGE: { top: 'center', transform: 'translateY(-50%)', left: -115 },
+            MEDIUM: { top: 'center', transform: 'translateY(-50%)', left: -110 },
+            SMALL: { top: 'center', transform: 'translateY(-50%)', left: -95 }
+        },
+        DESIGN5: {
+            LARGE: { top: 'center', transform: 'translateY(-50%)', left: -45 },
+            MEDIUM: { top: 'center', transform: 'translateY(-50%)', left: -45 },
+            SMALL: { top: 'center', transform: 'translateY(-50%)', left: -45 }
+        },
+        DESIGN6: {
+            LARGE: { top: 'center', transform: 'translateY(-50%)', right: 'calc(100% + 20px)' },
+            MEDIUM: { top: 'center', transform: 'translateY(-50%)', right: 'calc(100% + 12px)' },
+            SMALL: { top: 'center', transform: 'translateY(-50%)', right: 'calc(100% + 12px)' }
+        },
+        DESIGN7: {
+            LARGE: { top: 'center', transform: 'translateY(-50%)', left: -40 },
+            MEDIUM: { top: 'center', transform: 'translateY(-50%)', left: -30 },
+            SMALL: { top: 'center', transform: 'translateY(-50%)', left: -25 }
+        },
+        DESIGN8: {
+            LARGE: { top: 'center', transform: 'translateY(-50%)', right: 'calc(100% + 20px)' },
+            MEDIUM: { top: 'center', transform: 'translateY(-50%)', right: 'calc(100% + 12px)' },
+            SMALL: { top: 'center', transform: 'translateY(-50%)', right: 'calc(100% + 12px)' }
+        }
+    },
+    //--------------------------------------------------
+    // OUTSET 12 (top 0px 공통)
+    //--------------------------------------------------
+    OUTSET12: {
+        DESIGN1: {
+            LARGE: { top: 0, left: -65 },
+            MEDIUM: { top: 0, left: -60 },
+            SMALL: { top: 0, left: -60 }
+        },
+        DESIGN2: {
+            LARGE: { top: 0, left: -65 },
+            MEDIUM: { top: 0, left: -60 },
+            SMALL: { top: 0, left: -60 }
+        },
+        DESIGN3: {
+            LARGE: { top: 0, left: -115 },
+            MEDIUM: { top: 0, left: -110 },
+            SMALL: { top: 0, left: -95 }
+        },
+        DESIGN4: {
+            LARGE: { top: 0, left: -115 },
+            MEDIUM: { top: 0, left: -110 },
+            SMALL: { top: 0, left: -95 }
+        },
+        DESIGN5: {
+            LARGE: { top: 0, left: -45 },
+            MEDIUM: { top: 0, left: -45 },
+            SMALL: { top: 0, left: -45 }
+        },
+        DESIGN6: {
+            LARGE: { top: 0, right: 'calc(100% + 20px)' },
+            MEDIUM: { top: 0, left: -105 },
+            SMALL: { top: 0, left: -85 }
+        },
+        DESIGN7: {
+            LARGE: { top: 0, left: -40 },
+            MEDIUM: { top: 0, left: -30 },
+            SMALL: { top: 0, left: -25 }
+        },
+        DESIGN8: {
+            LARGE: { top: 0, right: 'calc(100% + 20px)' },
+            MEDIUM: { top: 0, left: -105 },
+            SMALL: { top: 0, left: -85 }
+        }
+    }
+};
+exports.POS_INSET = {
+    INSET1: {
+        LARGE: { top: GAP, left: GAP },
+        MEDIUM: { top: GAP, left: GAP },
+        SMALL: { top: GAP, left: GAP }
+    },
+    INSET2: {
+        LARGE: { top: GAP, left: 'center' },
+        MEDIUM: { top: GAP, left: 'center' },
+        SMALL: { top: GAP, left: 'center' }
+    },
+    INSET3: {
+        LARGE: { top: GAP, right: GAP },
+        MEDIUM: { top: GAP, right: GAP },
+        SMALL: { top: GAP, right: GAP }
+    },
+    INSET4: {
+        LARGE: { top: 'center', right: GAP, transform: 'translateY(-50%)' },
+        MEDIUM: { top: 'center', right: GAP, transform: 'translateY(-50%)' },
+        SMALL: { top: 'center', right: GAP, transform: 'translateY(-50%)' }
+    },
+    INSET5: {
+        LARGE: { bottom: GAP, right: GAP },
+        MEDIUM: { bottom: GAP, right: GAP },
+        SMALL: { bottom: GAP, right: GAP }
+    },
+    INSET6: {
+        LARGE: { bottom: GAP, left: 'center', transform: 'translateX(-50%)' },
+        MEDIUM: { bottom: GAP, left: 'center', transform: 'translateX(-50%)' },
+        SMALL: { bottom: GAP, left: 'center', transform: 'translateX(-50%)' }
+    },
+    INSET7: {
+        LARGE: { bottom: GAP, left: GAP },
+        MEDIUM: { bottom: GAP, left: GAP },
+        SMALL: { bottom: GAP, left: GAP }
+    },
+    INSET8: {
+        LARGE: { top: 'center', left: GAP, transform: 'translateY(-50%)' },
+        MEDIUM: { top: 'center', left: GAP, transform: 'translateY(-50%)' },
+        SMALL: { top: 'center', left: GAP, transform: 'translateY(-50%)' }
+    }
+};

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

@@ -13,6 +13,6 @@ export declare const useFlexGridLayout: ({ components }: {
         left: string;
     };
     componentGroups: Record<string, SlideBannerElementsProps[]>;
-    getPositionStyle: (position: string, ccbInset: Record<string, string>) => CSSProperties;
+    getPositionStyle: (position: string, ccbInset: Record<string, string>, designType: string, size: 'LARGE' | 'MEDIUM' | 'SMALL') => CSSProperties;
     getComponentGroupLayout: (components: SlideBannerElementsProps[], position: string) => CSSProperties;
 };

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

@@ -13,6 +13,7 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFlexGridLayout = void 0;
 var react_1 = require("react");
+var elementPositions_1 = require("./elementPositions");
 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];
@@ -60,7 +61,7 @@ var useFlexGridLayout = function (_a) {
         return directions[position];
     };
     // 위치에 따른 스타일 결정 (CCB 크기를 고려)
-    var getPositionStyle = function (position, ccbInset) {
+    var getPositionStyle = function (position, ccbInset, designType, size) {
         var base = {
             position: 'absolute',
             display: 'flex',
@@ -81,7 +82,7 @@ var useFlexGridLayout = function (_a) {
             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 },
+            OUTSET4: { top: ccbTop, left: 'calc(-100% + 50px)' },
             OUTSET5: { top: "".concat(ccbCenterY, "px"), right: 50, transform: 'translateY(-50%)' },
             OUTSET6: { bottom: ccbBottom, right: 50 },
             OUTSET7: { bottom: -50, right: ccbRight },
@@ -103,7 +104,9 @@ var useFlexGridLayout = function (_a) {
             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 pos = (0, elementPositions_1.getPosition)(position, designType, size);
+        console.log('pos', position, designType, size, pos);
+        return __assign(__assign({}, base), pos);
     };
     // 컴포넌트 그룹 레이아웃
     var getComponentGroupLayout = function (components, position) {

package/package.json

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