pds-dev-kit-web-test 2.7.234 → 2.7.235
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/sub/DynamicLayout/mock_slideBanner.js +3 -3
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js +2 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/hooks/elementPositions.d.ts +4 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/hooks/elementPositions.js +196 -130
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/hooks/useFlexGridLayout.js +1 -2
- package/package.json +1 -1
|
@@ -4535,7 +4535,7 @@ exports.SAMPLE_SLIDEBANNER_CB = {
|
|
|
4535
4535
|
'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE:HOVER': null
|
|
4536
4536
|
},
|
|
4537
4537
|
CB_STYLE_PROP_SLIDEBANNERBUTTON: {
|
|
4538
|
-
CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNLOCATION: '
|
|
4538
|
+
CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNLOCATION: 'OUTSET4',
|
|
4539
4539
|
'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNLOCATION:MOBILE': null,
|
|
4540
4540
|
CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNPRIMARYCOLOR: '#7CEC0DFC',
|
|
4541
4541
|
'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNPRIMARYCOLOR:HOVER': null,
|
|
@@ -4549,7 +4549,7 @@ exports.SAMPLE_SLIDEBANNER_CB = {
|
|
|
4549
4549
|
'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNSIZE:MOBILE': null,
|
|
4550
4550
|
CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNSTYLE: 'DESIGN3',
|
|
4551
4551
|
'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_NEXTBTNSTYLE:MOBILE': null,
|
|
4552
|
-
CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNLOCATION: '
|
|
4552
|
+
CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNLOCATION: 'OUTSET4',
|
|
4553
4553
|
'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNLOCATION:MOBILE': null,
|
|
4554
4554
|
CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNPRIMARYCOLOR: '#630FFFED',
|
|
4555
4555
|
'CB_STYLE_PROP_SLIDEBANNERBUTTON_SPEC_PREVBTNPRIMARYCOLOR:HOVER': null,
|
|
@@ -4569,7 +4569,7 @@ exports.SAMPLE_SLIDEBANNER_CB = {
|
|
|
4569
4569
|
'CB_STYLE_PROP_SLIDEBANNERDESIGN_SPEC_STYLE:MOBILE': null
|
|
4570
4570
|
},
|
|
4571
4571
|
CB_STYLE_PROP_SLIDEBANNERPAGINATION: {
|
|
4572
|
-
CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONLOCATION: '
|
|
4572
|
+
CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONLOCATION: 'OUTSET4',
|
|
4573
4573
|
'CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONLOCATION:MOBILE': null,
|
|
4574
4574
|
CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONPRIMARYCOLOR: '#A500CFF0',
|
|
4575
4575
|
'CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPEC_PAGINATIONPRIMARYCOLOR:MOBILE': null,
|
|
@@ -138,6 +138,7 @@ function SlideBanner(props) {
|
|
|
138
138
|
.map(function (item) {
|
|
139
139
|
return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
|
|
140
140
|
});
|
|
141
|
+
console.log(componentGroups);
|
|
141
142
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Object.entries(componentGroups).map(function (_a) {
|
|
142
143
|
var position = _a[0], groupComponents = _a[1];
|
|
143
144
|
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-group ccb-elements", ref: function (el) {
|
|
@@ -148,7 +149,7 @@ function SlideBanner(props) {
|
|
|
148
149
|
delete positionRefs.current[position];
|
|
149
150
|
}
|
|
150
151
|
}, style: __assign(__assign({}, getPositionStyle(position, ccbInset, 'GROUP', 'GROUP')), { 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) {
|
|
151
|
-
return renderElements(component, (0, elementPositions_1.getPosition)(position, component.designType, component.size));
|
|
152
|
+
return renderElements(component, (0, elementPositions_1.getPosition)(position, component.designType, component.size, component.type));
|
|
152
153
|
}) })) }), position));
|
|
153
154
|
}), (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.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
|
|
154
155
|
valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import type { SlideBannerElementsProps } from '../SlideBanner';
|
|
1
2
|
import type { CSSProperties } from 'styled-components';
|
|
2
|
-
export declare function getPosition(position: string, designType: string, size: string): CSSProperties;
|
|
3
|
-
export declare const
|
|
3
|
+
export declare function getPosition(position: string, designType: string, size: string, elementType: SlideBannerElementsProps['type'] | 'GROUP'): CSSProperties;
|
|
4
|
+
export declare const POS_OUTSET_PAGINATION: Record<string, Record<string, Record<string, CSSProperties>>>;
|
|
4
5
|
export declare const POS_INSET: Record<string, Record<string, CSSProperties>>;
|
|
6
|
+
export declare const POS_OUTSET_NAVIGATION: Record<string, Record<string, CSSProperties>>;
|
|
@@ -1,26 +1,29 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.POS_INSET = exports.
|
|
3
|
+
exports.POS_OUTSET_NAVIGATION = exports.POS_INSET = exports.POS_OUTSET_PAGINATION = exports.getPosition = void 0;
|
|
4
4
|
var GAP = 8;
|
|
5
|
-
function getPosition(position, designType, size) {
|
|
6
|
-
var _a, _b
|
|
5
|
+
function getPosition(position, designType, size, elementType) {
|
|
6
|
+
var _a, _b;
|
|
7
7
|
if (position.startsWith('OUTSET')) {
|
|
8
|
-
|
|
8
|
+
if (elementType === 'GROUP') {
|
|
9
|
+
return POS_OUTSET_GROUP[position];
|
|
10
|
+
}
|
|
11
|
+
if (elementType === 'PROGRESSBAR') {
|
|
12
|
+
return (_a = exports.POS_INSET[position]) === null || _a === void 0 ? void 0 : _a.LARGE;
|
|
13
|
+
}
|
|
14
|
+
if (elementType === 'NEXT' || elementType === 'PREV') {
|
|
15
|
+
return exports.POS_OUTSET_NAVIGATION[position][size];
|
|
16
|
+
}
|
|
17
|
+
return exports.POS_OUTSET_PAGINATION[position][designType][size];
|
|
9
18
|
}
|
|
10
|
-
return (
|
|
19
|
+
return (_b = exports.POS_INSET[position]) === null || _b === void 0 ? void 0 : _b.LARGE;
|
|
11
20
|
}
|
|
12
21
|
exports.getPosition = getPosition;
|
|
13
|
-
exports.
|
|
22
|
+
exports.POS_OUTSET_PAGINATION = {
|
|
14
23
|
//--------------------------------------------------
|
|
15
24
|
// OUTSET 1 (left 0px 공통)
|
|
16
25
|
//--------------------------------------------------
|
|
17
26
|
OUTSET1: {
|
|
18
|
-
GROUP: {
|
|
19
|
-
GROUP: {
|
|
20
|
-
bottom: '100%',
|
|
21
|
-
height: 0
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
27
|
DESIGN1: {
|
|
25
28
|
LARGE: { top: -50, left: 0 },
|
|
26
29
|
MEDIUM: { top: -45, left: 0 },
|
|
@@ -66,117 +69,96 @@ exports.POS_OUTSET = {
|
|
|
66
69
|
// OUTSET 2 (left center 공통, transform 추출)
|
|
67
70
|
//--------------------------------------------------
|
|
68
71
|
OUTSET2: {
|
|
69
|
-
GROUP: {
|
|
70
|
-
GROUP: {
|
|
71
|
-
bottom: '100%',
|
|
72
|
-
height: 0,
|
|
73
|
-
left: 'center'
|
|
74
|
-
}
|
|
75
|
-
},
|
|
76
72
|
DESIGN1: {
|
|
77
|
-
LARGE: { top: -50
|
|
78
|
-
MEDIUM: { top: -45
|
|
79
|
-
SMALL: { top: -40
|
|
73
|
+
LARGE: { top: -50 },
|
|
74
|
+
MEDIUM: { top: -45 },
|
|
75
|
+
SMALL: { top: -40 }
|
|
80
76
|
},
|
|
81
77
|
DESIGN2: {
|
|
82
|
-
LARGE: { top: -50
|
|
83
|
-
MEDIUM: { top: -45
|
|
84
|
-
SMALL: { top: -40
|
|
78
|
+
LARGE: { top: -50 },
|
|
79
|
+
MEDIUM: { top: -45 },
|
|
80
|
+
SMALL: { top: -40 }
|
|
85
81
|
},
|
|
86
82
|
DESIGN3: {
|
|
87
|
-
LARGE: { top: -50
|
|
88
|
-
MEDIUM: { top: -45
|
|
89
|
-
SMALL: { top: -40
|
|
83
|
+
LARGE: { top: -50 },
|
|
84
|
+
MEDIUM: { top: -45 },
|
|
85
|
+
SMALL: { top: -40 }
|
|
90
86
|
},
|
|
91
87
|
DESIGN4: {
|
|
92
|
-
LARGE: { top: -50
|
|
93
|
-
MEDIUM: { top: -45
|
|
94
|
-
SMALL: { top: -40
|
|
88
|
+
LARGE: { top: -50 },
|
|
89
|
+
MEDIUM: { top: -45 },
|
|
90
|
+
SMALL: { top: -40 }
|
|
95
91
|
},
|
|
96
92
|
DESIGN5: {
|
|
97
|
-
LARGE: { top: -85
|
|
98
|
-
MEDIUM: { top: -80
|
|
99
|
-
SMALL: { top: -75
|
|
93
|
+
LARGE: { top: -85 },
|
|
94
|
+
MEDIUM: { top: -80 },
|
|
95
|
+
SMALL: { top: -75 }
|
|
100
96
|
},
|
|
101
97
|
DESIGN6: {
|
|
102
|
-
LARGE: { top: -35
|
|
103
|
-
MEDIUM: { top: -30
|
|
104
|
-
SMALL: { top: -25
|
|
98
|
+
LARGE: { top: -35 },
|
|
99
|
+
MEDIUM: { top: -30 },
|
|
100
|
+
SMALL: { top: -25 }
|
|
105
101
|
},
|
|
106
102
|
DESIGN7: {
|
|
107
|
-
LARGE: { top: -85
|
|
108
|
-
MEDIUM: { top: -80
|
|
109
|
-
SMALL: { top: -75
|
|
103
|
+
LARGE: { top: -85 },
|
|
104
|
+
MEDIUM: { top: -80 },
|
|
105
|
+
SMALL: { top: -75 }
|
|
110
106
|
},
|
|
111
107
|
DESIGN8: {
|
|
112
|
-
LARGE: { top: -25
|
|
113
|
-
MEDIUM: { top: -25
|
|
114
|
-
SMALL: { top: -20
|
|
108
|
+
LARGE: { top: -25 },
|
|
109
|
+
MEDIUM: { top: -25 },
|
|
110
|
+
SMALL: { top: -20 }
|
|
115
111
|
}
|
|
116
112
|
},
|
|
117
113
|
//--------------------------------------------------
|
|
118
114
|
// OUTSET 3 (right 0px 공통)
|
|
119
115
|
//--------------------------------------------------
|
|
120
116
|
OUTSET3: {
|
|
121
|
-
GROUP: {
|
|
122
|
-
GROUP: {
|
|
123
|
-
bottom: '100%',
|
|
124
|
-
height: 0,
|
|
125
|
-
right: 0
|
|
126
|
-
}
|
|
127
|
-
},
|
|
128
117
|
DESIGN1: {
|
|
129
|
-
LARGE: { top: -50
|
|
130
|
-
MEDIUM: { top: -45
|
|
131
|
-
SMALL: { top: -40
|
|
118
|
+
LARGE: { top: -50 },
|
|
119
|
+
MEDIUM: { top: -45 },
|
|
120
|
+
SMALL: { top: -40 }
|
|
132
121
|
},
|
|
133
122
|
DESIGN2: {
|
|
134
|
-
LARGE: { top: -50
|
|
135
|
-
MEDIUM: { top: -45
|
|
136
|
-
SMALL: { top: -40
|
|
123
|
+
LARGE: { top: -50 },
|
|
124
|
+
MEDIUM: { top: -45 },
|
|
125
|
+
SMALL: { top: -40 }
|
|
137
126
|
},
|
|
138
127
|
DESIGN3: {
|
|
139
|
-
LARGE: { top: -50
|
|
140
|
-
MEDIUM: { top: -45
|
|
141
|
-
SMALL: { top: -40
|
|
128
|
+
LARGE: { top: -50 },
|
|
129
|
+
MEDIUM: { top: -45 },
|
|
130
|
+
SMALL: { top: -40 }
|
|
142
131
|
},
|
|
143
132
|
DESIGN4: {
|
|
144
|
-
LARGE: { top: -50
|
|
145
|
-
MEDIUM: { top: -45
|
|
146
|
-
SMALL: { top: -40
|
|
133
|
+
LARGE: { top: -50 },
|
|
134
|
+
MEDIUM: { top: -45 },
|
|
135
|
+
SMALL: { top: -40 }
|
|
147
136
|
},
|
|
148
137
|
DESIGN5: {
|
|
149
|
-
LARGE: { top: -85
|
|
150
|
-
MEDIUM: { top: -80
|
|
151
|
-
SMALL: { top: -75
|
|
138
|
+
LARGE: { top: -85 },
|
|
139
|
+
MEDIUM: { top: -80 },
|
|
140
|
+
SMALL: { top: -75 }
|
|
152
141
|
},
|
|
153
142
|
DESIGN6: {
|
|
154
|
-
LARGE: { top: -35
|
|
155
|
-
MEDIUM: { top: -30
|
|
156
|
-
SMALL: { top: -25
|
|
143
|
+
LARGE: { top: -35 },
|
|
144
|
+
MEDIUM: { top: -30 },
|
|
145
|
+
SMALL: { top: -25 }
|
|
157
146
|
},
|
|
158
147
|
DESIGN7: {
|
|
159
|
-
LARGE: { top: -85
|
|
160
|
-
MEDIUM: { top: -80
|
|
161
|
-
SMALL: { top: -75
|
|
148
|
+
LARGE: { top: -85 },
|
|
149
|
+
MEDIUM: { top: -80 },
|
|
150
|
+
SMALL: { top: -75 }
|
|
162
151
|
},
|
|
163
152
|
DESIGN8: {
|
|
164
|
-
LARGE: { top: -25
|
|
165
|
-
MEDIUM: { top: -25
|
|
166
|
-
SMALL: { top: -20
|
|
153
|
+
LARGE: { top: -25 },
|
|
154
|
+
MEDIUM: { top: -25 },
|
|
155
|
+
SMALL: { top: -20 }
|
|
167
156
|
}
|
|
168
157
|
},
|
|
169
158
|
//--------------------------------------------------
|
|
170
159
|
// OUTSET 4 (top 0px 공통)
|
|
171
160
|
//--------------------------------------------------
|
|
172
161
|
OUTSET4: {
|
|
173
|
-
GROUP: {
|
|
174
|
-
GROUP: {
|
|
175
|
-
bottom: '100%',
|
|
176
|
-
height: 0,
|
|
177
|
-
right: 0
|
|
178
|
-
}
|
|
179
|
-
},
|
|
180
162
|
DESIGN1: {
|
|
181
163
|
LARGE: { top: 0, right: -65 },
|
|
182
164
|
MEDIUM: { top: 0, right: -60 },
|
|
@@ -274,13 +256,6 @@ exports.POS_OUTSET = {
|
|
|
274
256
|
// OUTSET 6 (bottom 0px 공통)
|
|
275
257
|
//--------------------------------------------------
|
|
276
258
|
OUTSET6: {
|
|
277
|
-
GROUP: {
|
|
278
|
-
GROUP: {
|
|
279
|
-
bottom: 0,
|
|
280
|
-
height: 0,
|
|
281
|
-
right: 0
|
|
282
|
-
}
|
|
283
|
-
},
|
|
284
259
|
DESIGN1: {
|
|
285
260
|
LARGE: { bottom: 0, right: -65 },
|
|
286
261
|
MEDIUM: { bottom: 0, right: -60 },
|
|
@@ -326,13 +301,6 @@ exports.POS_OUTSET = {
|
|
|
326
301
|
// OUTSET 7 (right 0px 공통)
|
|
327
302
|
//--------------------------------------------------
|
|
328
303
|
OUTSET7: {
|
|
329
|
-
GROUP: {
|
|
330
|
-
GROUP: {
|
|
331
|
-
bottom: 0,
|
|
332
|
-
height: 0,
|
|
333
|
-
right: 0
|
|
334
|
-
}
|
|
335
|
-
},
|
|
336
304
|
DESIGN1: {
|
|
337
305
|
LARGE: { bottom: -50, right: 0 },
|
|
338
306
|
MEDIUM: { bottom: -45, right: 0 },
|
|
@@ -378,13 +346,6 @@ exports.POS_OUTSET = {
|
|
|
378
346
|
// OUTSET 8 (left center 공통, transform 추출)
|
|
379
347
|
//--------------------------------------------------
|
|
380
348
|
OUTSET8: {
|
|
381
|
-
GROUP: {
|
|
382
|
-
GROUP: {
|
|
383
|
-
bottom: 0,
|
|
384
|
-
height: 0,
|
|
385
|
-
left: 'center'
|
|
386
|
-
}
|
|
387
|
-
},
|
|
388
349
|
DESIGN1: {
|
|
389
350
|
LARGE: { bottom: -50, left: 'center', transform: 'translateX(-50%)' },
|
|
390
351
|
MEDIUM: { bottom: -45, left: 'center', transform: 'translateX(-50%)' },
|
|
@@ -430,13 +391,6 @@ exports.POS_OUTSET = {
|
|
|
430
391
|
// OUTSET 9 (left 0px 공통)
|
|
431
392
|
//--------------------------------------------------
|
|
432
393
|
OUTSET9: {
|
|
433
|
-
GROUP: {
|
|
434
|
-
GROUP: {
|
|
435
|
-
bottom: 0,
|
|
436
|
-
height: 0,
|
|
437
|
-
left: 0
|
|
438
|
-
}
|
|
439
|
-
},
|
|
440
394
|
DESIGN1: {
|
|
441
395
|
LARGE: { bottom: -50, left: 0 },
|
|
442
396
|
MEDIUM: { bottom: -45, left: 0 },
|
|
@@ -482,13 +436,6 @@ exports.POS_OUTSET = {
|
|
|
482
436
|
// OUTSET 10 (bottom 0px 공통)
|
|
483
437
|
//--------------------------------------------------
|
|
484
438
|
OUTSET10: {
|
|
485
|
-
GROUP: {
|
|
486
|
-
GROUP: {
|
|
487
|
-
bottom: 0,
|
|
488
|
-
height: 0,
|
|
489
|
-
left: 0
|
|
490
|
-
}
|
|
491
|
-
},
|
|
492
439
|
DESIGN1: {
|
|
493
440
|
LARGE: { bottom: 0, left: -65 },
|
|
494
441
|
MEDIUM: { bottom: 0, left: -60 },
|
|
@@ -534,13 +481,6 @@ exports.POS_OUTSET = {
|
|
|
534
481
|
// OUTSET 11 (top center 공통, transform 추출)
|
|
535
482
|
//--------------------------------------------------
|
|
536
483
|
OUTSET11: {
|
|
537
|
-
GROUP: {
|
|
538
|
-
GROUP: {
|
|
539
|
-
top: 'center',
|
|
540
|
-
height: 0,
|
|
541
|
-
left: 0
|
|
542
|
-
}
|
|
543
|
-
},
|
|
544
484
|
DESIGN1: {
|
|
545
485
|
LARGE: { top: 'center', transform: 'translateY(-50%)', left: -65 },
|
|
546
486
|
MEDIUM: { top: 'center', transform: 'translateY(-50%)', left: -60 },
|
|
@@ -586,13 +526,6 @@ exports.POS_OUTSET = {
|
|
|
586
526
|
// OUTSET 12 (top 0px 공통)
|
|
587
527
|
//--------------------------------------------------
|
|
588
528
|
OUTSET12: {
|
|
589
|
-
GROUP: {
|
|
590
|
-
GROUP: {
|
|
591
|
-
top: 0,
|
|
592
|
-
height: 0,
|
|
593
|
-
left: 0
|
|
594
|
-
}
|
|
595
|
-
},
|
|
596
529
|
DESIGN1: {
|
|
597
530
|
LARGE: { top: 0, left: -65 },
|
|
598
531
|
MEDIUM: { top: 0, left: -60 },
|
|
@@ -677,3 +610,136 @@ exports.POS_INSET = {
|
|
|
677
610
|
SMALL: { top: 'center', left: GAP, transform: 'translateY(-50%)' }
|
|
678
611
|
}
|
|
679
612
|
};
|
|
613
|
+
exports.POS_OUTSET_NAVIGATION = {
|
|
614
|
+
OUTSET1: {
|
|
615
|
+
LARGE: { top: -95, left: 0 },
|
|
616
|
+
MEDIUM: { top: -60, left: 0 },
|
|
617
|
+
SMALL: { top: -50, left: 0 }
|
|
618
|
+
},
|
|
619
|
+
OUTSET2: {
|
|
620
|
+
LARGE: { top: -95, left: 'center', transform: 'translateX(-50%)' },
|
|
621
|
+
MEDIUM: { top: -60, left: 'center', transform: 'translateX(-50%)' },
|
|
622
|
+
SMALL: { top: -50, left: 'center', transform: 'translateX(-50%)' }
|
|
623
|
+
},
|
|
624
|
+
OUTSET3: {
|
|
625
|
+
LARGE: { top: -95, right: 0 },
|
|
626
|
+
MEDIUM: { top: -60, right: 0 },
|
|
627
|
+
SMALL: { top: -50, right: 0 }
|
|
628
|
+
},
|
|
629
|
+
OUTSET4: {
|
|
630
|
+
LARGE: { top: 0, right: -95 },
|
|
631
|
+
MEDIUM: { top: 0, right: -60 },
|
|
632
|
+
SMALL: { top: 0, right: -50 }
|
|
633
|
+
},
|
|
634
|
+
OUTSET5: {
|
|
635
|
+
LARGE: { top: 'center', right: -95, transform: 'translateY(-50%)' },
|
|
636
|
+
MEDIUM: { top: 'center', right: -60, transform: 'translateY(-50%)' },
|
|
637
|
+
SMALL: { top: 'center', right: -50, transform: 'translateY(-50%)' }
|
|
638
|
+
},
|
|
639
|
+
OUTSET6: {
|
|
640
|
+
LARGE: { bottom: 0, right: -95 },
|
|
641
|
+
MEDIUM: { bottom: 0, right: -60 },
|
|
642
|
+
SMALL: { bottom: 0, right: -50 }
|
|
643
|
+
},
|
|
644
|
+
OUTSET7: {
|
|
645
|
+
LARGE: { bottom: -95, right: 0 },
|
|
646
|
+
MEDIUM: { bottom: -60, right: 0 },
|
|
647
|
+
SMALL: { bottom: -50, right: 0 }
|
|
648
|
+
},
|
|
649
|
+
OUTSET8: {
|
|
650
|
+
LARGE: { bottom: -95, left: 'center', transform: 'translateX(-50%)' },
|
|
651
|
+
MEDIUM: { bottom: -60, left: 'center', transform: 'translateX(-50%)' },
|
|
652
|
+
SMALL: { bottom: -50, left: 'center', transform: 'translateX(-50%)' }
|
|
653
|
+
},
|
|
654
|
+
OUTSET9: {
|
|
655
|
+
LARGE: { bottom: -95, left: 0 },
|
|
656
|
+
MEDIUM: { bottom: -60, left: 0 },
|
|
657
|
+
SMALL: { bottom: -50, left: 0 }
|
|
658
|
+
},
|
|
659
|
+
OUTSET10: {
|
|
660
|
+
LARGE: { bottom: 0, left: -95 },
|
|
661
|
+
MEDIUM: { bottom: 0, left: -60 },
|
|
662
|
+
SMALL: { bottom: 0, left: -50 }
|
|
663
|
+
},
|
|
664
|
+
OUTSET11: {
|
|
665
|
+
LARGE: { top: 'center', left: -95, transform: 'translateY(-50%)' },
|
|
666
|
+
MEDIUM: { top: 'center', left: -60, transform: 'translateY(-50%)' },
|
|
667
|
+
SMALL: { top: 'center', left: -50, transform: 'translateY(-50%)' }
|
|
668
|
+
},
|
|
669
|
+
OUTSET12: {
|
|
670
|
+
LARGE: { top: 0, left: -95 },
|
|
671
|
+
MEDIUM: { top: 0, left: -60 },
|
|
672
|
+
SMALL: { top: 0, left: -50 }
|
|
673
|
+
}
|
|
674
|
+
};
|
|
675
|
+
var POS_OUTSET_GROUP = {
|
|
676
|
+
OUTSET1: {
|
|
677
|
+
bottom: '100%',
|
|
678
|
+
height: 0
|
|
679
|
+
},
|
|
680
|
+
OUTSET2: {
|
|
681
|
+
bottom: '100%',
|
|
682
|
+
height: 0,
|
|
683
|
+
left: '50%',
|
|
684
|
+
transform: 'translateX(-50%)'
|
|
685
|
+
},
|
|
686
|
+
OUTSET3: {
|
|
687
|
+
bottom: '100%',
|
|
688
|
+
height: 0,
|
|
689
|
+
right: 0
|
|
690
|
+
},
|
|
691
|
+
OUTSET4: {
|
|
692
|
+
top: 0,
|
|
693
|
+
width: 0,
|
|
694
|
+
right: 0
|
|
695
|
+
},
|
|
696
|
+
OUTSET5: {
|
|
697
|
+
top: '50%',
|
|
698
|
+
height: 0,
|
|
699
|
+
right: 0,
|
|
700
|
+
transform: 'translateY(-50%)'
|
|
701
|
+
},
|
|
702
|
+
OUTSET6: {
|
|
703
|
+
bottom: 0,
|
|
704
|
+
height: 0,
|
|
705
|
+
right: 0
|
|
706
|
+
},
|
|
707
|
+
OUTSET7: {
|
|
708
|
+
bottom: 0,
|
|
709
|
+
height: 0,
|
|
710
|
+
right: 0
|
|
711
|
+
},
|
|
712
|
+
OUTSET8: {
|
|
713
|
+
bottom: 0,
|
|
714
|
+
height: 0,
|
|
715
|
+
left: '50%',
|
|
716
|
+
transform: 'translateX(-50%)'
|
|
717
|
+
},
|
|
718
|
+
OUTSET9: {
|
|
719
|
+
bottom: 0,
|
|
720
|
+
height: 0,
|
|
721
|
+
left: 0
|
|
722
|
+
},
|
|
723
|
+
OUTSET10: {
|
|
724
|
+
bottom: 0,
|
|
725
|
+
height: 0,
|
|
726
|
+
left: 0
|
|
727
|
+
},
|
|
728
|
+
OUTSET11: {
|
|
729
|
+
top: '50%',
|
|
730
|
+
height: 0,
|
|
731
|
+
left: 0,
|
|
732
|
+
transform: 'translateY(-50%)'
|
|
733
|
+
},
|
|
734
|
+
OUTSET12: {
|
|
735
|
+
top: 0,
|
|
736
|
+
height: 0,
|
|
737
|
+
left: 0
|
|
738
|
+
}
|
|
739
|
+
};
|
|
740
|
+
// export const POS_OUTSET = {
|
|
741
|
+
// PAGINATION: POS_OUTSET_PAGINATION,
|
|
742
|
+
// PREV: POS_OUTSET_NAVIGATION,
|
|
743
|
+
// NEXT: POS_OUTSET_NAVIGATION,
|
|
744
|
+
// GROUP: POS_OUTSET_GROUP
|
|
745
|
+
// };
|
|
@@ -32,7 +32,6 @@ var useFlexGridLayout = function (_a) {
|
|
|
32
32
|
return groups;
|
|
33
33
|
};
|
|
34
34
|
var componentGroups = getComponentsByPosition();
|
|
35
|
-
console.log('componentGroups', componentGroups);
|
|
36
35
|
var GAP = 8;
|
|
37
36
|
// 위치가 어느 방향인지 판단
|
|
38
37
|
var getPositionDirection = function (position) {
|
|
@@ -105,7 +104,7 @@ var useFlexGridLayout = function (_a) {
|
|
|
105
104
|
INSET7: { bottom: ccbBottom + GAP, left: ccbLeft + GAP },
|
|
106
105
|
INSET8: { top: "".concat(ccbCenterY, "px"), left: ccbLeft + GAP, transform: 'translateY(-50%)' }
|
|
107
106
|
};
|
|
108
|
-
var pos = (0, elementPositions_1.getPosition)(position, designType, size);
|
|
107
|
+
var pos = (0, elementPositions_1.getPosition)(position, designType, size, 'GROUP');
|
|
109
108
|
return __assign(__assign({}, base), pos);
|
|
110
109
|
};
|
|
111
110
|
// 컴포넌트 그룹 레이아웃
|