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

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.229",
+  "version": "2.7.233",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",