pds-dev-kit-web-test 2.7.234 → 2.7.236
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 +265 -203
- 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: 'INSET8',
|
|
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: 'INSET8',
|
|
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: 'INSET8',
|
|
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,32 @@
|
|
|
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
|
-
|
|
19
|
+
if (elementType === 'GROUP') {
|
|
20
|
+
return (_b = exports.POS_INSET[position]) === null || _b === void 0 ? void 0 : _b.LARGE;
|
|
21
|
+
}
|
|
22
|
+
return {};
|
|
11
23
|
}
|
|
12
24
|
exports.getPosition = getPosition;
|
|
13
|
-
exports.
|
|
25
|
+
exports.POS_OUTSET_PAGINATION = {
|
|
14
26
|
//--------------------------------------------------
|
|
15
27
|
// OUTSET 1 (left 0px 공통)
|
|
16
28
|
//--------------------------------------------------
|
|
17
29
|
OUTSET1: {
|
|
18
|
-
GROUP: {
|
|
19
|
-
GROUP: {
|
|
20
|
-
bottom: '100%',
|
|
21
|
-
height: 0
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
30
|
DESIGN1: {
|
|
25
31
|
LARGE: { top: -50, left: 0 },
|
|
26
32
|
MEDIUM: { top: -45, left: 0 },
|
|
@@ -66,117 +72,96 @@ exports.POS_OUTSET = {
|
|
|
66
72
|
// OUTSET 2 (left center 공통, transform 추출)
|
|
67
73
|
//--------------------------------------------------
|
|
68
74
|
OUTSET2: {
|
|
69
|
-
GROUP: {
|
|
70
|
-
GROUP: {
|
|
71
|
-
bottom: '100%',
|
|
72
|
-
height: 0,
|
|
73
|
-
left: 'center'
|
|
74
|
-
}
|
|
75
|
-
},
|
|
76
75
|
DESIGN1: {
|
|
77
|
-
LARGE: { top: -50
|
|
78
|
-
MEDIUM: { top: -45
|
|
79
|
-
SMALL: { top: -40
|
|
76
|
+
LARGE: { top: -50 },
|
|
77
|
+
MEDIUM: { top: -45 },
|
|
78
|
+
SMALL: { top: -40 }
|
|
80
79
|
},
|
|
81
80
|
DESIGN2: {
|
|
82
|
-
LARGE: { top: -50
|
|
83
|
-
MEDIUM: { top: -45
|
|
84
|
-
SMALL: { top: -40
|
|
81
|
+
LARGE: { top: -50 },
|
|
82
|
+
MEDIUM: { top: -45 },
|
|
83
|
+
SMALL: { top: -40 }
|
|
85
84
|
},
|
|
86
85
|
DESIGN3: {
|
|
87
|
-
LARGE: { top: -50
|
|
88
|
-
MEDIUM: { top: -45
|
|
89
|
-
SMALL: { top: -40
|
|
86
|
+
LARGE: { top: -50 },
|
|
87
|
+
MEDIUM: { top: -45 },
|
|
88
|
+
SMALL: { top: -40 }
|
|
90
89
|
},
|
|
91
90
|
DESIGN4: {
|
|
92
|
-
LARGE: { top: -50
|
|
93
|
-
MEDIUM: { top: -45
|
|
94
|
-
SMALL: { top: -40
|
|
91
|
+
LARGE: { top: -50 },
|
|
92
|
+
MEDIUM: { top: -45 },
|
|
93
|
+
SMALL: { top: -40 }
|
|
95
94
|
},
|
|
96
95
|
DESIGN5: {
|
|
97
|
-
LARGE: { top: -85
|
|
98
|
-
MEDIUM: { top: -80
|
|
99
|
-
SMALL: { top: -75
|
|
96
|
+
LARGE: { top: -85 },
|
|
97
|
+
MEDIUM: { top: -80 },
|
|
98
|
+
SMALL: { top: -75 }
|
|
100
99
|
},
|
|
101
100
|
DESIGN6: {
|
|
102
|
-
LARGE: { top: -35
|
|
103
|
-
MEDIUM: { top: -30
|
|
104
|
-
SMALL: { top: -25
|
|
101
|
+
LARGE: { top: -35 },
|
|
102
|
+
MEDIUM: { top: -30 },
|
|
103
|
+
SMALL: { top: -25 }
|
|
105
104
|
},
|
|
106
105
|
DESIGN7: {
|
|
107
|
-
LARGE: { top: -85
|
|
108
|
-
MEDIUM: { top: -80
|
|
109
|
-
SMALL: { top: -75
|
|
106
|
+
LARGE: { top: -85 },
|
|
107
|
+
MEDIUM: { top: -80 },
|
|
108
|
+
SMALL: { top: -75 }
|
|
110
109
|
},
|
|
111
110
|
DESIGN8: {
|
|
112
|
-
LARGE: { top: -25
|
|
113
|
-
MEDIUM: { top: -25
|
|
114
|
-
SMALL: { top: -20
|
|
111
|
+
LARGE: { top: -25 },
|
|
112
|
+
MEDIUM: { top: -25 },
|
|
113
|
+
SMALL: { top: -20 }
|
|
115
114
|
}
|
|
116
115
|
},
|
|
117
116
|
//--------------------------------------------------
|
|
118
117
|
// OUTSET 3 (right 0px 공통)
|
|
119
118
|
//--------------------------------------------------
|
|
120
119
|
OUTSET3: {
|
|
121
|
-
GROUP: {
|
|
122
|
-
GROUP: {
|
|
123
|
-
bottom: '100%',
|
|
124
|
-
height: 0,
|
|
125
|
-
right: 0
|
|
126
|
-
}
|
|
127
|
-
},
|
|
128
120
|
DESIGN1: {
|
|
129
|
-
LARGE: { top: -50
|
|
130
|
-
MEDIUM: { top: -45
|
|
131
|
-
SMALL: { top: -40
|
|
121
|
+
LARGE: { top: -50 },
|
|
122
|
+
MEDIUM: { top: -45 },
|
|
123
|
+
SMALL: { top: -40 }
|
|
132
124
|
},
|
|
133
125
|
DESIGN2: {
|
|
134
|
-
LARGE: { top: -50
|
|
135
|
-
MEDIUM: { top: -45
|
|
136
|
-
SMALL: { top: -40
|
|
126
|
+
LARGE: { top: -50 },
|
|
127
|
+
MEDIUM: { top: -45 },
|
|
128
|
+
SMALL: { top: -40 }
|
|
137
129
|
},
|
|
138
130
|
DESIGN3: {
|
|
139
|
-
LARGE: { top: -50
|
|
140
|
-
MEDIUM: { top: -45
|
|
141
|
-
SMALL: { top: -40
|
|
131
|
+
LARGE: { top: -50 },
|
|
132
|
+
MEDIUM: { top: -45 },
|
|
133
|
+
SMALL: { top: -40 }
|
|
142
134
|
},
|
|
143
135
|
DESIGN4: {
|
|
144
|
-
LARGE: { top: -50
|
|
145
|
-
MEDIUM: { top: -45
|
|
146
|
-
SMALL: { top: -40
|
|
136
|
+
LARGE: { top: -50 },
|
|
137
|
+
MEDIUM: { top: -45 },
|
|
138
|
+
SMALL: { top: -40 }
|
|
147
139
|
},
|
|
148
140
|
DESIGN5: {
|
|
149
|
-
LARGE: { top: -85
|
|
150
|
-
MEDIUM: { top: -80
|
|
151
|
-
SMALL: { top: -75
|
|
141
|
+
LARGE: { top: -85 },
|
|
142
|
+
MEDIUM: { top: -80 },
|
|
143
|
+
SMALL: { top: -75 }
|
|
152
144
|
},
|
|
153
145
|
DESIGN6: {
|
|
154
|
-
LARGE: { top: -35
|
|
155
|
-
MEDIUM: { top: -30
|
|
156
|
-
SMALL: { top: -25
|
|
146
|
+
LARGE: { top: -35 },
|
|
147
|
+
MEDIUM: { top: -30 },
|
|
148
|
+
SMALL: { top: -25 }
|
|
157
149
|
},
|
|
158
150
|
DESIGN7: {
|
|
159
|
-
LARGE: { top: -85
|
|
160
|
-
MEDIUM: { top: -80
|
|
161
|
-
SMALL: { top: -75
|
|
151
|
+
LARGE: { top: -85 },
|
|
152
|
+
MEDIUM: { top: -80 },
|
|
153
|
+
SMALL: { top: -75 }
|
|
162
154
|
},
|
|
163
155
|
DESIGN8: {
|
|
164
|
-
LARGE: { top: -25
|
|
165
|
-
MEDIUM: { top: -25
|
|
166
|
-
SMALL: { top: -20
|
|
156
|
+
LARGE: { top: -25 },
|
|
157
|
+
MEDIUM: { top: -25 },
|
|
158
|
+
SMALL: { top: -20 }
|
|
167
159
|
}
|
|
168
160
|
},
|
|
169
161
|
//--------------------------------------------------
|
|
170
162
|
// OUTSET 4 (top 0px 공통)
|
|
171
163
|
//--------------------------------------------------
|
|
172
164
|
OUTSET4: {
|
|
173
|
-
GROUP: {
|
|
174
|
-
GROUP: {
|
|
175
|
-
bottom: '100%',
|
|
176
|
-
height: 0,
|
|
177
|
-
right: 0
|
|
178
|
-
}
|
|
179
|
-
},
|
|
180
165
|
DESIGN1: {
|
|
181
166
|
LARGE: { top: 0, right: -65 },
|
|
182
167
|
MEDIUM: { top: 0, right: -60 },
|
|
@@ -222,13 +207,6 @@ exports.POS_OUTSET = {
|
|
|
222
207
|
// OUTSET 5 (top center 공통, transform 추출)
|
|
223
208
|
//--------------------------------------------------
|
|
224
209
|
OUTSET5: {
|
|
225
|
-
GROUP: {
|
|
226
|
-
GROUP: {
|
|
227
|
-
top: 'center',
|
|
228
|
-
height: 0,
|
|
229
|
-
right: 0
|
|
230
|
-
}
|
|
231
|
-
},
|
|
232
210
|
DESIGN1: {
|
|
233
211
|
LARGE: { top: 'center', right: -65, transform: 'translateY(-50%)' },
|
|
234
212
|
MEDIUM: { top: 'center', right: -60, transform: 'translateY(-50%)' },
|
|
@@ -274,13 +252,6 @@ exports.POS_OUTSET = {
|
|
|
274
252
|
// OUTSET 6 (bottom 0px 공통)
|
|
275
253
|
//--------------------------------------------------
|
|
276
254
|
OUTSET6: {
|
|
277
|
-
GROUP: {
|
|
278
|
-
GROUP: {
|
|
279
|
-
bottom: 0,
|
|
280
|
-
height: 0,
|
|
281
|
-
right: 0
|
|
282
|
-
}
|
|
283
|
-
},
|
|
284
255
|
DESIGN1: {
|
|
285
256
|
LARGE: { bottom: 0, right: -65 },
|
|
286
257
|
MEDIUM: { bottom: 0, right: -60 },
|
|
@@ -326,13 +297,6 @@ exports.POS_OUTSET = {
|
|
|
326
297
|
// OUTSET 7 (right 0px 공통)
|
|
327
298
|
//--------------------------------------------------
|
|
328
299
|
OUTSET7: {
|
|
329
|
-
GROUP: {
|
|
330
|
-
GROUP: {
|
|
331
|
-
bottom: 0,
|
|
332
|
-
height: 0,
|
|
333
|
-
right: 0
|
|
334
|
-
}
|
|
335
|
-
},
|
|
336
300
|
DESIGN1: {
|
|
337
301
|
LARGE: { bottom: -50, right: 0 },
|
|
338
302
|
MEDIUM: { bottom: -45, right: 0 },
|
|
@@ -378,65 +342,51 @@ exports.POS_OUTSET = {
|
|
|
378
342
|
// OUTSET 8 (left center 공통, transform 추출)
|
|
379
343
|
//--------------------------------------------------
|
|
380
344
|
OUTSET8: {
|
|
381
|
-
GROUP: {
|
|
382
|
-
GROUP: {
|
|
383
|
-
bottom: 0,
|
|
384
|
-
height: 0,
|
|
385
|
-
left: 'center'
|
|
386
|
-
}
|
|
387
|
-
},
|
|
388
345
|
DESIGN1: {
|
|
389
|
-
LARGE: { bottom: -50
|
|
390
|
-
MEDIUM: { bottom: -45
|
|
391
|
-
SMALL: { bottom: -40
|
|
346
|
+
LARGE: { bottom: -50 },
|
|
347
|
+
MEDIUM: { bottom: -45 },
|
|
348
|
+
SMALL: { bottom: -40 }
|
|
392
349
|
},
|
|
393
350
|
DESIGN2: {
|
|
394
|
-
LARGE: { bottom: -50
|
|
395
|
-
MEDIUM: { bottom: -45
|
|
396
|
-
SMALL: { bottom: -40
|
|
351
|
+
LARGE: { bottom: -50 },
|
|
352
|
+
MEDIUM: { bottom: -45 },
|
|
353
|
+
SMALL: { bottom: -40 }
|
|
397
354
|
},
|
|
398
355
|
DESIGN3: {
|
|
399
|
-
LARGE: { bottom: -50
|
|
400
|
-
MEDIUM: { bottom: -45
|
|
401
|
-
SMALL: { bottom: -40
|
|
356
|
+
LARGE: { bottom: -50 },
|
|
357
|
+
MEDIUM: { bottom: -45 },
|
|
358
|
+
SMALL: { bottom: -40 }
|
|
402
359
|
},
|
|
403
360
|
DESIGN4: {
|
|
404
|
-
LARGE: { bottom: -50
|
|
405
|
-
MEDIUM: { bottom: -45
|
|
406
|
-
SMALL: { bottom: -40
|
|
361
|
+
LARGE: { bottom: -50 },
|
|
362
|
+
MEDIUM: { bottom: -45 },
|
|
363
|
+
SMALL: { bottom: -40 }
|
|
407
364
|
},
|
|
408
365
|
DESIGN5: {
|
|
409
|
-
LARGE: { bottom: -85
|
|
410
|
-
MEDIUM: { bottom: -80
|
|
411
|
-
SMALL: { bottom: -75
|
|
366
|
+
LARGE: { bottom: -85 },
|
|
367
|
+
MEDIUM: { bottom: -80 },
|
|
368
|
+
SMALL: { bottom: -75 }
|
|
412
369
|
},
|
|
413
370
|
DESIGN6: {
|
|
414
|
-
LARGE: { bottom: -35
|
|
415
|
-
MEDIUM: { bottom: -30
|
|
416
|
-
SMALL: { bottom: -25
|
|
371
|
+
LARGE: { bottom: -35 },
|
|
372
|
+
MEDIUM: { bottom: -30 },
|
|
373
|
+
SMALL: { bottom: -25 }
|
|
417
374
|
},
|
|
418
375
|
DESIGN7: {
|
|
419
|
-
LARGE: { bottom: -85
|
|
420
|
-
MEDIUM: { bottom: -80
|
|
421
|
-
SMALL: { bottom: -75
|
|
376
|
+
LARGE: { bottom: -85 },
|
|
377
|
+
MEDIUM: { bottom: -80 },
|
|
378
|
+
SMALL: { bottom: -75 }
|
|
422
379
|
},
|
|
423
380
|
DESIGN8: {
|
|
424
|
-
LARGE: { bottom: -25
|
|
425
|
-
MEDIUM: { bottom: -25
|
|
426
|
-
SMALL: { bottom: -20
|
|
381
|
+
LARGE: { bottom: -25 },
|
|
382
|
+
MEDIUM: { bottom: -25 },
|
|
383
|
+
SMALL: { bottom: -20 }
|
|
427
384
|
}
|
|
428
385
|
},
|
|
429
386
|
//--------------------------------------------------
|
|
430
387
|
// OUTSET 9 (left 0px 공통)
|
|
431
388
|
//--------------------------------------------------
|
|
432
389
|
OUTSET9: {
|
|
433
|
-
GROUP: {
|
|
434
|
-
GROUP: {
|
|
435
|
-
bottom: 0,
|
|
436
|
-
height: 0,
|
|
437
|
-
left: 0
|
|
438
|
-
}
|
|
439
|
-
},
|
|
440
390
|
DESIGN1: {
|
|
441
391
|
LARGE: { bottom: -50, left: 0 },
|
|
442
392
|
MEDIUM: { bottom: -45, left: 0 },
|
|
@@ -482,13 +432,6 @@ exports.POS_OUTSET = {
|
|
|
482
432
|
// OUTSET 10 (bottom 0px 공통)
|
|
483
433
|
//--------------------------------------------------
|
|
484
434
|
OUTSET10: {
|
|
485
|
-
GROUP: {
|
|
486
|
-
GROUP: {
|
|
487
|
-
bottom: 0,
|
|
488
|
-
height: 0,
|
|
489
|
-
left: 0
|
|
490
|
-
}
|
|
491
|
-
},
|
|
492
435
|
DESIGN1: {
|
|
493
436
|
LARGE: { bottom: 0, left: -65 },
|
|
494
437
|
MEDIUM: { bottom: 0, left: -60 },
|
|
@@ -534,65 +477,51 @@ exports.POS_OUTSET = {
|
|
|
534
477
|
// OUTSET 11 (top center 공통, transform 추출)
|
|
535
478
|
//--------------------------------------------------
|
|
536
479
|
OUTSET11: {
|
|
537
|
-
GROUP: {
|
|
538
|
-
GROUP: {
|
|
539
|
-
top: 'center',
|
|
540
|
-
height: 0,
|
|
541
|
-
left: 0
|
|
542
|
-
}
|
|
543
|
-
},
|
|
544
480
|
DESIGN1: {
|
|
545
|
-
LARGE: {
|
|
546
|
-
MEDIUM: {
|
|
547
|
-
SMALL: {
|
|
481
|
+
LARGE: { left: -65 },
|
|
482
|
+
MEDIUM: { left: -60 },
|
|
483
|
+
SMALL: { left: -60 }
|
|
548
484
|
},
|
|
549
485
|
DESIGN2: {
|
|
550
|
-
LARGE: {
|
|
551
|
-
MEDIUM: {
|
|
552
|
-
SMALL: {
|
|
486
|
+
LARGE: { left: -65 },
|
|
487
|
+
MEDIUM: { left: -60 },
|
|
488
|
+
SMALL: { left: -60 }
|
|
553
489
|
},
|
|
554
490
|
DESIGN3: {
|
|
555
|
-
LARGE: {
|
|
556
|
-
MEDIUM: {
|
|
557
|
-
SMALL: {
|
|
491
|
+
LARGE: { left: -115 },
|
|
492
|
+
MEDIUM: { left: -110 },
|
|
493
|
+
SMALL: { left: -95 }
|
|
558
494
|
},
|
|
559
495
|
DESIGN4: {
|
|
560
|
-
LARGE: {
|
|
561
|
-
MEDIUM: {
|
|
562
|
-
SMALL: {
|
|
496
|
+
LARGE: { left: -115 },
|
|
497
|
+
MEDIUM: { left: -110 },
|
|
498
|
+
SMALL: { left: -95 }
|
|
563
499
|
},
|
|
564
500
|
DESIGN5: {
|
|
565
|
-
LARGE: {
|
|
566
|
-
MEDIUM: {
|
|
567
|
-
SMALL: {
|
|
501
|
+
LARGE: { left: -45 },
|
|
502
|
+
MEDIUM: { left: -45 },
|
|
503
|
+
SMALL: { left: -45 }
|
|
568
504
|
},
|
|
569
505
|
DESIGN6: {
|
|
570
|
-
LARGE: {
|
|
571
|
-
MEDIUM: {
|
|
572
|
-
SMALL: {
|
|
506
|
+
LARGE: { right: 'calc(100% + 20px)' },
|
|
507
|
+
MEDIUM: { right: 'calc(100% + 12px)' },
|
|
508
|
+
SMALL: { right: 'calc(100% + 12px)' }
|
|
573
509
|
},
|
|
574
510
|
DESIGN7: {
|
|
575
|
-
LARGE: {
|
|
576
|
-
MEDIUM: {
|
|
577
|
-
SMALL: {
|
|
511
|
+
LARGE: { left: -40 },
|
|
512
|
+
MEDIUM: { left: -30 },
|
|
513
|
+
SMALL: { left: -25 }
|
|
578
514
|
},
|
|
579
515
|
DESIGN8: {
|
|
580
|
-
LARGE: {
|
|
581
|
-
MEDIUM: {
|
|
582
|
-
SMALL: {
|
|
516
|
+
LARGE: { right: 'calc(100% + 20px)' },
|
|
517
|
+
MEDIUM: { right: 'calc(100% + 12px)' },
|
|
518
|
+
SMALL: { right: 'calc(100% + 12px)' }
|
|
583
519
|
}
|
|
584
520
|
},
|
|
585
521
|
//--------------------------------------------------
|
|
586
522
|
// OUTSET 12 (top 0px 공통)
|
|
587
523
|
//--------------------------------------------------
|
|
588
524
|
OUTSET12: {
|
|
589
|
-
GROUP: {
|
|
590
|
-
GROUP: {
|
|
591
|
-
top: 0,
|
|
592
|
-
height: 0,
|
|
593
|
-
left: 0
|
|
594
|
-
}
|
|
595
|
-
},
|
|
596
525
|
DESIGN1: {
|
|
597
526
|
LARGE: { top: 0, left: -65 },
|
|
598
527
|
MEDIUM: { top: 0, left: -60 },
|
|
@@ -642,9 +571,9 @@ exports.POS_INSET = {
|
|
|
642
571
|
SMALL: { top: GAP, left: GAP }
|
|
643
572
|
},
|
|
644
573
|
INSET2: {
|
|
645
|
-
LARGE: { top: GAP, left: '
|
|
646
|
-
MEDIUM: { top: GAP, left: '
|
|
647
|
-
SMALL: { top: GAP, left: '
|
|
574
|
+
LARGE: { top: GAP, left: '50%', transform: 'translateX(-50%)' },
|
|
575
|
+
MEDIUM: { top: GAP, left: '50%', transform: 'translateX(-50%)' },
|
|
576
|
+
SMALL: { top: GAP, left: '50%', transform: 'translateX(-50%)' }
|
|
648
577
|
},
|
|
649
578
|
INSET3: {
|
|
650
579
|
LARGE: { top: GAP, right: GAP },
|
|
@@ -652,28 +581,161 @@ exports.POS_INSET = {
|
|
|
652
581
|
SMALL: { top: GAP, right: GAP }
|
|
653
582
|
},
|
|
654
583
|
INSET4: {
|
|
655
|
-
LARGE: { top:
|
|
656
|
-
MEDIUM: { top:
|
|
657
|
-
SMALL: { top:
|
|
584
|
+
LARGE: { top: GAP, right: GAP },
|
|
585
|
+
MEDIUM: { top: GAP, right: GAP },
|
|
586
|
+
SMALL: { top: GAP, right: GAP }
|
|
658
587
|
},
|
|
659
588
|
INSET5: {
|
|
660
|
-
LARGE: {
|
|
661
|
-
MEDIUM: {
|
|
662
|
-
SMALL: {
|
|
589
|
+
LARGE: { top: '50%', right: GAP, transform: 'translateY(-50%)' },
|
|
590
|
+
MEDIUM: { top: '50%', right: GAP, transform: 'translateY(-50%)' },
|
|
591
|
+
SMALL: { top: '50%', right: GAP, transform: 'translateY(-50%)' }
|
|
663
592
|
},
|
|
664
593
|
INSET6: {
|
|
665
|
-
LARGE: { bottom: GAP, left: '
|
|
666
|
-
MEDIUM: { bottom: GAP, left: '
|
|
667
|
-
SMALL: { bottom: GAP, left: '
|
|
594
|
+
LARGE: { bottom: GAP, left: '50%', transform: 'translateX(-50%)' },
|
|
595
|
+
MEDIUM: { bottom: GAP, left: '50%', transform: 'translateX(-50%)' },
|
|
596
|
+
SMALL: { bottom: GAP, left: '50%', transform: 'translateX(-50%)' }
|
|
668
597
|
},
|
|
669
598
|
INSET7: {
|
|
670
|
-
LARGE: {
|
|
671
|
-
MEDIUM: {
|
|
672
|
-
SMALL: {
|
|
599
|
+
LARGE: { left: GAP, bottom: GAP },
|
|
600
|
+
MEDIUM: { left: GAP, bottom: GAP },
|
|
601
|
+
SMALL: { left: GAP, bottom: GAP }
|
|
673
602
|
},
|
|
674
603
|
INSET8: {
|
|
675
|
-
LARGE: { top: '
|
|
676
|
-
MEDIUM: { top: '
|
|
677
|
-
SMALL: { top: '
|
|
604
|
+
LARGE: { top: '50%', left: GAP, transform: 'translateY(-50%)' },
|
|
605
|
+
MEDIUM: { top: '50%', left: GAP, transform: 'translateY(-50%)' },
|
|
606
|
+
SMALL: { top: '50%', left: GAP, transform: 'translateY(-50%)' }
|
|
607
|
+
}
|
|
608
|
+
};
|
|
609
|
+
exports.POS_OUTSET_NAVIGATION = {
|
|
610
|
+
OUTSET1: {
|
|
611
|
+
LARGE: { top: -95, left: 0 },
|
|
612
|
+
MEDIUM: { top: -60, left: 0 },
|
|
613
|
+
SMALL: { top: -50, left: 0 }
|
|
614
|
+
},
|
|
615
|
+
OUTSET2: {
|
|
616
|
+
LARGE: { top: -95, left: 'center', transform: 'translateX(-50%)' },
|
|
617
|
+
MEDIUM: { top: -60, left: 'center', transform: 'translateX(-50%)' },
|
|
618
|
+
SMALL: { top: -50, left: 'center', transform: 'translateX(-50%)' }
|
|
619
|
+
},
|
|
620
|
+
OUTSET3: {
|
|
621
|
+
LARGE: { top: -95, right: 0 },
|
|
622
|
+
MEDIUM: { top: -60, right: 0 },
|
|
623
|
+
SMALL: { top: -50, right: 0 }
|
|
624
|
+
},
|
|
625
|
+
OUTSET4: {
|
|
626
|
+
LARGE: { top: 0, right: -95 },
|
|
627
|
+
MEDIUM: { top: 0, right: -60 },
|
|
628
|
+
SMALL: { top: 0, right: -50 }
|
|
629
|
+
},
|
|
630
|
+
OUTSET5: {
|
|
631
|
+
LARGE: { right: -95 },
|
|
632
|
+
MEDIUM: { right: -60 },
|
|
633
|
+
SMALL: { right: -50 }
|
|
634
|
+
},
|
|
635
|
+
OUTSET6: {
|
|
636
|
+
LARGE: { bottom: 0, right: -95 },
|
|
637
|
+
MEDIUM: { bottom: 0, right: -60 },
|
|
638
|
+
SMALL: { bottom: 0, right: -50 }
|
|
639
|
+
},
|
|
640
|
+
OUTSET7: {
|
|
641
|
+
LARGE: { bottom: -95, right: 0 },
|
|
642
|
+
MEDIUM: { bottom: -60, right: 0 },
|
|
643
|
+
SMALL: { bottom: -50, right: 0 }
|
|
644
|
+
},
|
|
645
|
+
OUTSET8: {
|
|
646
|
+
LARGE: { bottom: -95 },
|
|
647
|
+
MEDIUM: { bottom: -60 },
|
|
648
|
+
SMALL: { bottom: -50 }
|
|
649
|
+
},
|
|
650
|
+
OUTSET9: {
|
|
651
|
+
LARGE: { bottom: -95, left: 0 },
|
|
652
|
+
MEDIUM: { bottom: -60, left: 0 },
|
|
653
|
+
SMALL: { bottom: -50, left: 0 }
|
|
654
|
+
},
|
|
655
|
+
OUTSET10: {
|
|
656
|
+
LARGE: { bottom: 0, left: -95 },
|
|
657
|
+
MEDIUM: { bottom: 0, left: -60 },
|
|
658
|
+
SMALL: { bottom: 0, left: -50 }
|
|
659
|
+
},
|
|
660
|
+
OUTSET11: {
|
|
661
|
+
LARGE: { left: -95 },
|
|
662
|
+
MEDIUM: { left: -60 },
|
|
663
|
+
SMALL: { left: -50 }
|
|
664
|
+
},
|
|
665
|
+
OUTSET12: {
|
|
666
|
+
LARGE: { top: 0, left: -95 },
|
|
667
|
+
MEDIUM: { top: 0, left: -60 },
|
|
668
|
+
SMALL: { top: 0, left: -50 }
|
|
669
|
+
}
|
|
670
|
+
};
|
|
671
|
+
var POS_OUTSET_GROUP = {
|
|
672
|
+
OUTSET1: {
|
|
673
|
+
bottom: '100%',
|
|
674
|
+
height: 0
|
|
675
|
+
},
|
|
676
|
+
OUTSET2: {
|
|
677
|
+
bottom: '100%',
|
|
678
|
+
height: 0,
|
|
679
|
+
left: '50%',
|
|
680
|
+
transform: 'translateX(-50%)'
|
|
681
|
+
},
|
|
682
|
+
OUTSET3: {
|
|
683
|
+
bottom: '100%',
|
|
684
|
+
height: 0,
|
|
685
|
+
right: 0
|
|
686
|
+
},
|
|
687
|
+
OUTSET4: {
|
|
688
|
+
top: 0,
|
|
689
|
+
width: 0,
|
|
690
|
+
right: 0
|
|
691
|
+
},
|
|
692
|
+
OUTSET5: {
|
|
693
|
+
top: '50%',
|
|
694
|
+
height: 0,
|
|
695
|
+
right: 0,
|
|
696
|
+
transform: 'translateY(-50%)'
|
|
697
|
+
},
|
|
698
|
+
OUTSET6: {
|
|
699
|
+
bottom: 0,
|
|
700
|
+
width: 0,
|
|
701
|
+
right: 0
|
|
702
|
+
},
|
|
703
|
+
OUTSET7: {
|
|
704
|
+
bottom: 0,
|
|
705
|
+
height: 0,
|
|
706
|
+
right: 0
|
|
707
|
+
},
|
|
708
|
+
OUTSET8: {
|
|
709
|
+
bottom: 0,
|
|
710
|
+
height: 0,
|
|
711
|
+
left: '50%',
|
|
712
|
+
transform: 'translateX(-50%)'
|
|
713
|
+
},
|
|
714
|
+
OUTSET9: {
|
|
715
|
+
bottom: 0,
|
|
716
|
+
height: 0,
|
|
717
|
+
left: 0
|
|
718
|
+
},
|
|
719
|
+
OUTSET10: {
|
|
720
|
+
bottom: 0,
|
|
721
|
+
width: 0,
|
|
722
|
+
left: 0
|
|
723
|
+
},
|
|
724
|
+
OUTSET11: {
|
|
725
|
+
top: '50%',
|
|
726
|
+
width: 0,
|
|
727
|
+
left: 0,
|
|
728
|
+
transform: 'translateY(-50%)'
|
|
729
|
+
},
|
|
730
|
+
OUTSET12: {
|
|
731
|
+
top: 0,
|
|
732
|
+
width: 0,
|
|
733
|
+
left: 0
|
|
678
734
|
}
|
|
679
735
|
};
|
|
736
|
+
// export const POS_OUTSET = {
|
|
737
|
+
// PAGINATION: POS_OUTSET_PAGINATION,
|
|
738
|
+
// PREV: POS_OUTSET_NAVIGATION,
|
|
739
|
+
// NEXT: POS_OUTSET_NAVIGATION,
|
|
740
|
+
// GROUP: POS_OUTSET_GROUP
|
|
741
|
+
// };
|
|
@@ -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
|
// 컴포넌트 그룹 레이아웃
|