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

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.
Files changed (27) hide show
  1. package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton.d.ts +2 -2
  2. package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton.js +11 -8
  3. package/dist/src/sub/DynamicLayout/components/pdsOriginal/hybrid/Icon/Icon.d.ts +1 -1
  4. package/dist/src/sub/DynamicLayout/mock_slideBanner.js +5 -5
  5. package/dist/src/sub/DynamicLayout/mocks.d.ts +3596 -1
  6. package/dist/src/sub/DynamicLayout/mocks.js +4 -4
  7. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.d.ts +2 -1
  8. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/ContentsCarousel.js +11 -5
  9. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomNavigationNextBtn.js +6 -6
  10. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/CustomNavigationPrevBtn.js +4 -4
  11. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.d.ts +2 -1
  12. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js +5 -4
  13. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/hooks/useFlexGridLayout.d.ts +2 -1
  14. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/hooks/useFlexGridLayout.js +2 -1
  15. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.d.ts +3 -1
  16. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/SlideBanner.js +20 -21
  17. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigationNextBtn.d.ts +2 -1
  18. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigationNextBtn.js +8 -8
  19. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigationPrevBtn.d.ts +2 -1
  20. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomNavigationPrevBtn.js +3 -3
  21. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomPagination.d.ts +2 -1
  22. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomPagination.js +3 -3
  23. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/hooks/elementPositions.d.ts +4 -0
  24. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/hooks/elementPositions.js +679 -0
  25. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/hooks/useFlexGridLayout.d.ts +1 -1
  26. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/hooks/useFlexGridLayout.js +6 -3
  27. package/package.json +1 -1
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/hooks/elementPositions.js ADDED
@@ -0,0 +1,679 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.POS_INSET = exports.POS_OUTSET = exports.getPosition = void 0;
4
+ var GAP = 8;
5
+ function getPosition(position, designType, size) {
6
+ var _a, _b, _c;
7
+ if (position.startsWith('OUTSET')) {
8
+ return (_b = (_a = exports.POS_OUTSET[position]) === null || _a === void 0 ? void 0 : _a[designType]) === null || _b === void 0 ? void 0 : _b[size];
9
+ }
10
+ return (_c = exports.POS_INSET[position]) === null || _c === void 0 ? void 0 : _c.LARGE;
11
+ }
12
+ exports.getPosition = getPosition;
13
+ exports.POS_OUTSET = {
14
+ //--------------------------------------------------
15
+ // OUTSET 1 (left 0px 공통)
16
+ //--------------------------------------------------
17
+ OUTSET1: {
18
+ GROUP: {
19
+ GROUP: {
20
+ bottom: '100%',
21
+ height: 0
22
+ }
23
+ },
24
+ DESIGN1: {
25
+ LARGE: { top: -50, left: 0 },
26
+ MEDIUM: { top: -45, left: 0 },
27
+ SMALL: { top: -40, left: 0 }
28
+ },
29
+ DESIGN2: {
30
+ LARGE: { top: -50, left: 0 },
31
+ MEDIUM: { top: -45, left: 0 },
32
+ SMALL: { top: -40, left: 0 }
33
+ },
34
+ DESIGN3: {
35
+ LARGE: { top: -50, left: 0 },
36
+ MEDIUM: { top: -45, left: 0 },
37
+ SMALL: { top: -40, left: 0 }
38
+ },
39
+ DESIGN4: {
40
+ LARGE: { top: -50, left: 0 },
41
+ MEDIUM: { top: -45, left: 0 },
42
+ SMALL: { top: -40, left: 0 }
43
+ },
44
+ DESIGN5: {
45
+ LARGE: { top: -85, left: 0 },
46
+ MEDIUM: { top: -80, left: 0 },
47
+ SMALL: { top: -75, left: 0 }
48
+ },
49
+ DESIGN6: {
50
+ LARGE: { top: -35, left: 0 },
51
+ MEDIUM: { top: -30, left: 0 },
52
+ SMALL: { top: -25, left: 0 }
53
+ },
54
+ DESIGN7: {
55
+ LARGE: { top: -85, left: 0 },
56
+ MEDIUM: { top: -80, left: 0 },
57
+ SMALL: { top: -75, left: 0 }
58
+ },
59
+ DESIGN8: {
60
+ LARGE: { top: -25, left: 0 },
61
+ MEDIUM: { top: -25, left: 0 },
62
+ SMALL: { top: -20, left: 0 }
63
+ }
64
+ },
65
+ //--------------------------------------------------
66
+ // OUTSET 2 (left center 공통, transform 추출)
67
+ //--------------------------------------------------
68
+ OUTSET2: {
69
+ GROUP: {
70
+ GROUP: {
71
+ bottom: '100%',
72
+ height: 0,
73
+ left: 'center'
74
+ }
75
+ },
76
+ DESIGN1: {
77
+ LARGE: { top: -50, left: 'center', transform: 'translateX(-50%)' },
78
+ MEDIUM: { top: -45, left: 'center', transform: 'translateX(-50%)' },
79
+ SMALL: { top: -40, left: 'center', transform: 'translateX(-50%)' }
80
+ },
81
+ DESIGN2: {
82
+ LARGE: { top: -50, left: 'center' },
83
+ MEDIUM: { top: -45, left: 'center' },
84
+ SMALL: { top: -40, left: 'center' }
85
+ },
86
+ DESIGN3: {
87
+ LARGE: { top: -50, left: 'center' },
88
+ MEDIUM: { top: -45, left: 'center' },
89
+ SMALL: { top: -40, left: 'center' }
90
+ },
91
+ DESIGN4: {
92
+ LARGE: { top: -50, left: 'center' },
93
+ MEDIUM: { top: -45, left: 'center' },
94
+ SMALL: { top: -40, left: 'center' }
95
+ },
96
+ DESIGN5: {
97
+ LARGE: { top: -85, left: 'center' },
98
+ MEDIUM: { top: -80, left: 'center' },
99
+ SMALL: { top: -75, left: 'center' }
100
+ },
101
+ DESIGN6: {
102
+ LARGE: { top: -35, left: 'center' },
103
+ MEDIUM: { top: -30, left: 'center' },
104
+ SMALL: { top: -25, left: 'center' }
105
+ },
106
+ DESIGN7: {
107
+ LARGE: { top: -85, left: 'center' },
108
+ MEDIUM: { top: -80, left: 'center' },
109
+ SMALL: { top: -75, left: 'center' }
110
+ },
111
+ DESIGN8: {
112
+ LARGE: { top: -25, left: 'center' },
113
+ MEDIUM: { top: -25, left: 'center' },
114
+ SMALL: { top: -20, left: 'center' }
115
+ }
116
+ },
117
+ //--------------------------------------------------
118
+ // OUTSET 3 (right 0px 공통)
119
+ //--------------------------------------------------
120
+ OUTSET3: {
121
+ GROUP: {
122
+ GROUP: {
123
+ bottom: '100%',
124
+ height: 0,
125
+ right: 0
126
+ }
127
+ },
128
+ DESIGN1: {
129
+ LARGE: { top: -50, right: 0 },
130
+ MEDIUM: { top: -45, right: 0 },
131
+ SMALL: { top: -40, right: 0 }
132
+ },
133
+ DESIGN2: {
134
+ LARGE: { top: -50, right: 0 },
135
+ MEDIUM: { top: -45, right: 0 },
136
+ SMALL: { top: -40, right: 0 }
137
+ },
138
+ DESIGN3: {
139
+ LARGE: { top: -50, right: 0 },
140
+ MEDIUM: { top: -45, right: 0 },
141
+ SMALL: { top: -40, right: 0 }
142
+ },
143
+ DESIGN4: {
144
+ LARGE: { top: -50, right: 0 },
145
+ MEDIUM: { top: -45, right: 0 },
146
+ SMALL: { top: -40, right: 0 }
147
+ },
148
+ DESIGN5: {
149
+ LARGE: { top: -85, right: 0 },
150
+ MEDIUM: { top: -80, right: 0 },
151
+ SMALL: { top: -75, right: 0 }
152
+ },
153
+ DESIGN6: {
154
+ LARGE: { top: -35, right: 0 },
155
+ MEDIUM: { top: -30, right: 0 },
156
+ SMALL: { top: -25, right: 0 }
157
+ },
158
+ DESIGN7: {
159
+ LARGE: { top: -85, right: 0 },
160
+ MEDIUM: { top: -80, right: 0 },
161
+ SMALL: { top: -75, right: 0 }
162
+ },
163
+ DESIGN8: {
164
+ LARGE: { top: -25, right: 0 },
165
+ MEDIUM: { top: -25, right: 0 },
166
+ SMALL: { top: -20, right: 0 }
167
+ }
168
+ },
169
+ //--------------------------------------------------
170
+ // OUTSET 4 (top 0px 공통)
171
+ //--------------------------------------------------
172
+ OUTSET4: {
173
+ GROUP: {
174
+ GROUP: {
175
+ bottom: '100%',
176
+ height: 0,
177
+ right: 0
178
+ }
179
+ },
180
+ DESIGN1: {
181
+ LARGE: { top: 0, right: -65 },
182
+ MEDIUM: { top: 0, right: -60 },
183
+ SMALL: { top: 0, right: -60 }
184
+ },
185
+ DESIGN2: {
186
+ LARGE: { top: 0, right: -65 },
187
+ MEDIUM: { top: 0, right: -60 },
188
+ SMALL: { top: 0, right: -60 }
189
+ },
190
+ DESIGN3: {
191
+ LARGE: { top: 0, right: -115 },
192
+ MEDIUM: { top: 0, right: -110 },
193
+ SMALL: { top: 0, right: -95 }
194
+ },
195
+ DESIGN4: {
196
+ LARGE: { top: 0, right: -115 },
197
+ MEDIUM: { top: 0, right: -110 },
198
+ SMALL: { top: 0, right: -95 }
199
+ },
200
+ DESIGN5: {
201
+ LARGE: { top: 0, right: -45 },
202
+ MEDIUM: { top: 0, right: -45 },
203
+ SMALL: { top: 0, right: -45 }
204
+ },
205
+ DESIGN6: {
206
+ LARGE: { top: 0, left: 'calc(100% + 20px)' },
207
+ MEDIUM: { top: 0, left: 'calc(100% + 12px)' },
208
+ SMALL: { top: 0, left: 'calc(100% + 12px)' }
209
+ },
210
+ DESIGN7: {
211
+ LARGE: { top: 0, right: -40 },
212
+ MEDIUM: { top: 0, right: -30 },
213
+ SMALL: { top: 0, right: -25 }
214
+ },
215
+ DESIGN8: {
216
+ LARGE: { top: 0, left: 'calc(100% + 20px)' },
217
+ MEDIUM: { top: 0, left: 'calc(100% + 12px)' },
218
+ SMALL: { top: 0, left: 'calc(100% + 12px)' }
219
+ }
220
+ },
221
+ //--------------------------------------------------
222
+ // OUTSET 5 (top center 공통, transform 추출)
223
+ //--------------------------------------------------
224
+ OUTSET5: {
225
+ GROUP: {
226
+ GROUP: {
227
+ top: 'center',
228
+ height: 0,
229
+ right: 0
230
+ }
231
+ },
232
+ DESIGN1: {
233
+ LARGE: { top: 'center', right: -65, transform: 'translateY(-50%)' },
234
+ MEDIUM: { top: 'center', right: -60, transform: 'translateY(-50%)' },
235
+ SMALL: { top: 'center', right: -60, transform: 'translateY(-50%)' }
236
+ },
237
+ DESIGN2: {
238
+ LARGE: { top: 'center', right: -65, transform: 'translateY(-50%)' },
239
+ MEDIUM: { top: 'center', right: -60, transform: 'translateY(-50%)' },
240
+ SMALL: { top: 'center', right: -60, transform: 'translateY(-50%)' }
241
+ },
242
+ DESIGN3: {
243
+ LARGE: { top: 'center', right: -115, transform: 'translateY(-50%)' },
244
+ MEDIUM: { top: 'center', right: -110, transform: 'translateY(-50%)' },
245
+ SMALL: { top: 'center', right: -95, transform: 'translateY(-50%)' }
246
+ },
247
+ DESIGN4: {
248
+ LARGE: { top: 'center', right: -115, transform: 'translateY(-50%)' },
249
+ MEDIUM: { top: 'center', right: -110, transform: 'translateY(-50%)' },
250
+ SMALL: { top: 'center', right: -95, transform: 'translateY(-50%)' }
251
+ },
252
+ DESIGN5: {
253
+ LARGE: { top: 'center', right: -45, transform: 'translateY(-50%)' },
254
+ MEDIUM: { top: 'center', right: -45, transform: 'translateY(-50%)' },
255
+ SMALL: { top: 'center', right: -45, transform: 'translateY(-50%)' }
256
+ },
257
+ DESIGN6: {
258
+ LARGE: { top: 'center', left: 'calc(100% + 20px)', transform: 'translateY(-50%)' },
259
+ MEDIUM: { top: 'center', left: 'calc(100% + 12px)', transform: 'translateY(-50%)' },
260
+ SMALL: { top: 'center', left: 'calc(100% + 12px)', transform: 'translateY(-50%)' }
261
+ },
262
+ DESIGN7: {
263
+ LARGE: { top: 'center', right: -40, transform: 'translateY(-50%)' },
264
+ MEDIUM: { top: 'center', right: -30, transform: 'translateY(-50%)' },
265
+ SMALL: { top: 'center', right: -25, transform: 'translateY(-50%)' }
266
+ },
267
+ DESIGN8: {
268
+ LARGE: { top: 'center', left: 'calc(100% + 20px)', transform: 'translateY(-50%)' },
269
+ MEDIUM: { top: 'center', left: 'calc(100% + 12px)', transform: 'translateY(-50%)' },
270
+ SMALL: { top: 'center', left: 'calc(100% + 12px)', transform: 'translateY(-50%)' }
271
+ }
272
+ },
273
+ //--------------------------------------------------
274
+ // OUTSET 6 (bottom 0px 공통)
275
+ //--------------------------------------------------
276
+ OUTSET6: {
277
+ GROUP: {
278
+ GROUP: {
279
+ bottom: 0,
280
+ height: 0,
281
+ right: 0
282
+ }
283
+ },
284
+ DESIGN1: {
285
+ LARGE: { bottom: 0, right: -65 },
286
+ MEDIUM: { bottom: 0, right: -60 },
287
+ SMALL: { bottom: 0, right: -60 }
288
+ },
289
+ DESIGN2: {
290
+ LARGE: { bottom: 0, right: -65 },
291
+ MEDIUM: { bottom: 0, right: -60 },
292
+ SMALL: { bottom: 0, right: -60 }
293
+ },
294
+ DESIGN3: {
295
+ LARGE: { bottom: 0, right: -115 },
296
+ MEDIUM: { bottom: 0, right: -110 },
297
+ SMALL: { bottom: 0, right: -95 }
298
+ },
299
+ DESIGN4: {
300
+ LARGE: { bottom: 0, right: -115 },
301
+ MEDIUM: { bottom: 0, right: -110 },
302
+ SMALL: { bottom: 0, right: -95 }
303
+ },
304
+ DESIGN5: {
305
+ LARGE: { bottom: 0, right: -45 },
306
+ MEDIUM: { bottom: 0, right: -45 },
307
+ SMALL: { bottom: 0, right: -45 }
308
+ },
309
+ DESIGN6: {
310
+ LARGE: { bottom: 0, left: 'calc(100% + 20px)' },
311
+ MEDIUM: { bottom: 0, left: 'calc(100% + 12px)' },
312
+ SMALL: { bottom: 0, left: 'calc(100% + 12px)' }
313
+ },
314
+ DESIGN7: {
315
+ LARGE: { bottom: 0, right: -40 },
316
+ MEDIUM: { bottom: 0, right: -30 },
317
+ SMALL: { bottom: 0, right: -25 }
318
+ },
319
+ DESIGN8: {
320
+ LARGE: { bottom: 0, left: 'calc(100% + 20px)' },
321
+ MEDIUM: { bottom: 0, left: 'calc(100% + 12px)' },
322
+ SMALL: { bottom: 0, left: 'calc(100% + 12px)' }
323
+ }
324
+ },
325
+ //--------------------------------------------------
326
+ // OUTSET 7 (right 0px 공통)
327
+ //--------------------------------------------------
328
+ OUTSET7: {
329
+ GROUP: {
330
+ GROUP: {
331
+ bottom: 0,
332
+ height: 0,
333
+ right: 0
334
+ }
335
+ },
336
+ DESIGN1: {
337
+ LARGE: { bottom: -50, right: 0 },
338
+ MEDIUM: { bottom: -45, right: 0 },
339
+ SMALL: { bottom: -40, right: 0 }
340
+ },
341
+ DESIGN2: {
342
+ LARGE: { bottom: -50, right: 0 },
343
+ MEDIUM: { bottom: -45, right: 0 },
344
+ SMALL: { bottom: -40, right: 0 }
345
+ },
346
+ DESIGN3: {
347
+ LARGE: { bottom: -50, right: 0 },
348
+ MEDIUM: { bottom: -45, right: 0 },
349
+ SMALL: { bottom: -40, right: 0 }
350
+ },
351
+ DESIGN4: {
352
+ LARGE: { bottom: -50, right: 0 },
353
+ MEDIUM: { bottom: -45, right: 0 },
354
+ SMALL: { bottom: -40, right: 0 }
355
+ },
356
+ DESIGN5: {
357
+ LARGE: { bottom: -85, right: 0 },
358
+ MEDIUM: { bottom: -80, right: 0 },
359
+ SMALL: { bottom: -75, right: 0 }
360
+ },
361
+ DESIGN6: {
362
+ LARGE: { bottom: -35, right: 0 },
363
+ MEDIUM: { bottom: -30, right: 0 },
364
+ SMALL: { bottom: -25, right: 0 }
365
+ },
366
+ DESIGN7: {
367
+ LARGE: { bottom: -85, right: 0 },
368
+ MEDIUM: { bottom: -80, right: 0 },
369
+ SMALL: { bottom: -75, right: 0 }
370
+ },
371
+ DESIGN8: {
372
+ LARGE: { bottom: -25, right: 0 },
373
+ MEDIUM: { bottom: -25, right: 0 },
374
+ SMALL: { bottom: -20, right: 0 }
375
+ }
376
+ },
377
+ //--------------------------------------------------
378
+ // OUTSET 8 (left center 공통, transform 추출)
379
+ //--------------------------------------------------
380
+ OUTSET8: {
381
+ GROUP: {
382
+ GROUP: {
383
+ bottom: 0,
384
+ height: 0,
385
+ left: 'center'
386
+ }
387
+ },
388
+ DESIGN1: {
389
+ LARGE: { bottom: -50, left: 'center', transform: 'translateX(-50%)' },
390
+ MEDIUM: { bottom: -45, left: 'center', transform: 'translateX(-50%)' },
391
+ SMALL: { bottom: -40, left: 'center', transform: 'translateX(-50%)' }
392
+ },
393
+ DESIGN2: {
394
+ LARGE: { bottom: -50, left: 'center', transform: 'translateX(-50%)' },
395
+ MEDIUM: { bottom: -45, left: 'center', transform: 'translateX(-50%)' },
396
+ SMALL: { bottom: -40, left: 'center', transform: 'translateX(-50%)' }
397
+ },
398
+ DESIGN3: {
399
+ LARGE: { bottom: -50, left: 'center', transform: 'translateX(-50%)' },
400
+ MEDIUM: { bottom: -45, left: 'center', transform: 'translateX(-50%)' },
401
+ SMALL: { bottom: -40, left: 'center', transform: 'translateX(-50%)' }
402
+ },
403
+ DESIGN4: {
404
+ LARGE: { bottom: -50, left: 'center', transform: 'translateX(-50%)' },
405
+ MEDIUM: { bottom: -45, left: 'center', transform: 'translateX(-50%)' },
406
+ SMALL: { bottom: -40, left: 'center', transform: 'translateX(-50%)' }
407
+ },
408
+ DESIGN5: {
409
+ LARGE: { bottom: -85, left: 'center', transform: 'translateX(-50%)' },
410
+ MEDIUM: { bottom: -80, left: 'center', transform: 'translateX(-50%)' },
411
+ SMALL: { bottom: -75, left: 'center', transform: 'translateX(-50%)' }
412
+ },
413
+ DESIGN6: {
414
+ LARGE: { bottom: -35, left: 'center', transform: 'translateX(-50%)' },
415
+ MEDIUM: { bottom: -30, left: 'center', transform: 'translateX(-50%)' },
416
+ SMALL: { bottom: -25, left: 'center', transform: 'translateX(-50%)' }
417
+ },
418
+ DESIGN7: {
419
+ LARGE: { bottom: -85, left: 'center', transform: 'translateX(-50%)' },
420
+ MEDIUM: { bottom: -80, left: 'center', transform: 'translateX(-50%)' },
421
+ SMALL: { bottom: -75, left: 'center', transform: 'translateX(-50%)' }
422
+ },
423
+ DESIGN8: {
424
+ LARGE: { bottom: -25, left: 'center', transform: 'translateX(-50%)' },
425
+ MEDIUM: { bottom: -25, left: 'center', transform: 'translateX(-50%)' },
426
+ SMALL: { bottom: -20, left: 'center', transform: 'translateX(-50%)' }
427
+ }
428
+ },
429
+ //--------------------------------------------------
430
+ // OUTSET 9 (left 0px 공통)
431
+ //--------------------------------------------------
432
+ OUTSET9: {
433
+ GROUP: {
434
+ GROUP: {
435
+ bottom: 0,
436
+ height: 0,
437
+ left: 0
438
+ }
439
+ },
440
+ DESIGN1: {
441
+ LARGE: { bottom: -50, left: 0 },
442
+ MEDIUM: { bottom: -45, left: 0 },
443
+ SMALL: { bottom: -40, left: 0 }
444
+ },
445
+ DESIGN2: {
446
+ LARGE: { bottom: -50, left: 0 },
447
+ MEDIUM: { bottom: -45, left: 0 },
448
+ SMALL: { bottom: -40, left: 0 }
449
+ },
450
+ DESIGN3: {
451
+ LARGE: { bottom: -50, left: 0 },
452
+ MEDIUM: { bottom: -45, left: 0 },
453
+ SMALL: { bottom: -40, left: 0 }
454
+ },
455
+ DESIGN4: {
456
+ LARGE: { bottom: -50, left: 0 },
457
+ MEDIUM: { bottom: -45, left: 0 },
458
+ SMALL: { bottom: -40, left: 0 }
459
+ },
460
+ DESIGN5: {
461
+ LARGE: { bottom: -85, left: 0 },
462
+ MEDIUM: { bottom: -80, left: 0 },
463
+ SMALL: { bottom: -75, left: 0 }
464
+ },
465
+ DESIGN6: {
466
+ LARGE: { bottom: -35, left: 0 },
467
+ MEDIUM: { bottom: -30, left: 0 },
468
+ SMALL: { bottom: -25, left: 0 }
469
+ },
470
+ DESIGN7: {
471
+ LARGE: { bottom: -85, left: 0 },
472
+ MEDIUM: { bottom: -80, left: 0 },
473
+ SMALL: { bottom: -75, left: 0 }
474
+ },
475
+ DESIGN8: {
476
+ LARGE: { bottom: -25, left: 0 },
477
+ MEDIUM: { bottom: -25, left: 0 },
478
+ SMALL: { bottom: -20, left: 0 }
479
+ }
480
+ },
481
+ //--------------------------------------------------
482
+ // OUTSET 10 (bottom 0px 공통)
483
+ //--------------------------------------------------
484
+ OUTSET10: {
485
+ GROUP: {
486
+ GROUP: {
487
+ bottom: 0,
488
+ height: 0,
489
+ left: 0
490
+ }
491
+ },
492
+ DESIGN1: {
493
+ LARGE: { bottom: 0, left: -65 },
494
+ MEDIUM: { bottom: 0, left: -60 },
495
+ SMALL: { bottom: 0, left: -60 }
496
+ },
497
+ DESIGN2: {
498
+ LARGE: { bottom: 0, left: -65 },
499
+ MEDIUM: { bottom: 0, left: -60 },
500
+ SMALL: { bottom: 0, left: -60 }
501
+ },
502
+ DESIGN3: {
503
+ LARGE: { bottom: 0, left: -115 },
504
+ MEDIUM: { bottom: 0, left: -110 },
505
+ SMALL: { bottom: 0, left: -95 }
506
+ },
507
+ DESIGN4: {
508
+ LARGE: { bottom: 0, left: -115 },
509
+ MEDIUM: { bottom: 0, left: -110 },
510
+ SMALL: { bottom: 0, left: -95 }
511
+ },
512
+ DESIGN5: {
513
+ LARGE: { bottom: 0, left: -45 },
514
+ MEDIUM: { bottom: 0, left: -45 },
515
+ SMALL: { bottom: 0, left: -45 }
516
+ },
517
+ DESIGN6: {
518
+ LARGE: { bottom: 0, right: 'calc(100% + 20px)' },
519
+ MEDIUM: { bottom: 0, right: 'calc(100% + 12px)' },
520
+ SMALL: { bottom: 0, right: 'calc(100% + 12px)' }
521
+ },
522
+ DESIGN7: {
523
+ LARGE: { bottom: 0, left: -40 },
524
+ MEDIUM: { bottom: 0, left: -30 },
525
+ SMALL: { bottom: 0, left: -25 }
526
+ },
527
+ DESIGN8: {
528
+ LARGE: { bottom: 0, right: 'calc(100% + 20px)' },
529
+ MEDIUM: { bottom: 0, right: 'calc(100% + 12px)' },
530
+ SMALL: { bottom: 0, right: 'calc(100% + 12px)' }
531
+ }
532
+ },
533
+ //--------------------------------------------------
534
+ // OUTSET 11 (top center 공통, transform 추출)
535
+ //--------------------------------------------------
536
+ OUTSET11: {
537
+ GROUP: {
538
+ GROUP: {
539
+ top: 'center',
540
+ height: 0,
541
+ left: 0
542
+ }
543
+ },
544
+ DESIGN1: {
545
+ LARGE: { top: 'center', transform: 'translateY(-50%)', left: -65 },
546
+ MEDIUM: { top: 'center', transform: 'translateY(-50%)', left: -60 },
547
+ SMALL: { top: 'center', transform: 'translateY(-50%)', left: -60 }
548
+ },
549
+ DESIGN2: {
550
+ LARGE: { top: 'center', transform: 'translateY(-50%)', left: -65 },
551
+ MEDIUM: { top: 'center', transform: 'translateY(-50%)', left: -60 },
552
+ SMALL: { top: 'center', transform: 'translateY(-50%)', left: -60 }
553
+ },
554
+ DESIGN3: {
555
+ LARGE: { top: 'center', transform: 'translateY(-50%)', left: -115 },
556
+ MEDIUM: { top: 'center', transform: 'translateY(-50%)', left: -110 },
557
+ SMALL: { top: 'center', transform: 'translateY(-50%)', left: -95 }
558
+ },
559
+ DESIGN4: {
560
+ LARGE: { top: 'center', transform: 'translateY(-50%)', left: -115 },
561
+ MEDIUM: { top: 'center', transform: 'translateY(-50%)', left: -110 },
562
+ SMALL: { top: 'center', transform: 'translateY(-50%)', left: -95 }
563
+ },
564
+ DESIGN5: {
565
+ LARGE: { top: 'center', transform: 'translateY(-50%)', left: -45 },
566
+ MEDIUM: { top: 'center', transform: 'translateY(-50%)', left: -45 },
567
+ SMALL: { top: 'center', transform: 'translateY(-50%)', left: -45 }
568
+ },
569
+ DESIGN6: {
570
+ LARGE: { top: 'center', transform: 'translateY(-50%)', right: 'calc(100% + 20px)' },
571
+ MEDIUM: { top: 'center', transform: 'translateY(-50%)', right: 'calc(100% + 12px)' },
572
+ SMALL: { top: 'center', transform: 'translateY(-50%)', right: 'calc(100% + 12px)' }
573
+ },
574
+ DESIGN7: {
575
+ LARGE: { top: 'center', transform: 'translateY(-50%)', left: -40 },
576
+ MEDIUM: { top: 'center', transform: 'translateY(-50%)', left: -30 },
577
+ SMALL: { top: 'center', transform: 'translateY(-50%)', left: -25 }
578
+ },
579
+ DESIGN8: {
580
+ LARGE: { top: 'center', transform: 'translateY(-50%)', right: 'calc(100% + 20px)' },
581
+ MEDIUM: { top: 'center', transform: 'translateY(-50%)', right: 'calc(100% + 12px)' },
582
+ SMALL: { top: 'center', transform: 'translateY(-50%)', right: 'calc(100% + 12px)' }
583
+ }
584
+ },
585
+ //--------------------------------------------------
586
+ // OUTSET 12 (top 0px 공통)
587
+ //--------------------------------------------------
588
+ OUTSET12: {
589
+ GROUP: {
590
+ GROUP: {
591
+ top: 0,
592
+ height: 0,
593
+ left: 0
594
+ }
595
+ },
596
+ DESIGN1: {
597
+ LARGE: { top: 0, left: -65 },
598
+ MEDIUM: { top: 0, left: -60 },
599
+ SMALL: { top: 0, left: -60 }
600
+ },
601
+ DESIGN2: {
602
+ LARGE: { top: 0, left: -65 },
603
+ MEDIUM: { top: 0, left: -60 },
604
+ SMALL: { top: 0, left: -60 }
605
+ },
606
+ DESIGN3: {
607
+ LARGE: { top: 0, left: -115 },
608
+ MEDIUM: { top: 0, left: -110 },
609
+ SMALL: { top: 0, left: -95 }
610
+ },
611
+ DESIGN4: {
612
+ LARGE: { top: 0, left: -115 },
613
+ MEDIUM: { top: 0, left: -110 },
614
+ SMALL: { top: 0, left: -95 }
615
+ },
616
+ DESIGN5: {
617
+ LARGE: { top: 0, left: -45 },
618
+ MEDIUM: { top: 0, left: -45 },
619
+ SMALL: { top: 0, left: -45 }
620
+ },
621
+ DESIGN6: {
622
+ LARGE: { top: 0, right: 'calc(100% + 20px)' },
623
+ MEDIUM: { top: 0, left: -105 },
624
+ SMALL: { top: 0, left: -85 }
625
+ },
626
+ DESIGN7: {
627
+ LARGE: { top: 0, left: -40 },
628
+ MEDIUM: { top: 0, left: -30 },
629
+ SMALL: { top: 0, left: -25 }
630
+ },
631
+ DESIGN8: {
632
+ LARGE: { top: 0, right: 'calc(100% + 20px)' },
633
+ MEDIUM: { top: 0, left: -105 },
634
+ SMALL: { top: 0, left: -85 }
635
+ }
636
+ }
637
+ };
638
+ exports.POS_INSET = {
639
+ INSET1: {
640
+ LARGE: { top: GAP, left: GAP },
641
+ MEDIUM: { top: GAP, left: GAP },
642
+ SMALL: { top: GAP, left: GAP }
643
+ },
644
+ INSET2: {
645
+ LARGE: { top: GAP, left: 'center' },
646
+ MEDIUM: { top: GAP, left: 'center' },
647
+ SMALL: { top: GAP, left: 'center' }
648
+ },
649
+ INSET3: {
650
+ LARGE: { top: GAP, right: GAP },
651
+ MEDIUM: { top: GAP, right: GAP },
652
+ SMALL: { top: GAP, right: GAP }
653
+ },
654
+ INSET4: {
655
+ LARGE: { top: 'center', right: GAP, transform: 'translateY(-50%)' },
656
+ MEDIUM: { top: 'center', right: GAP, transform: 'translateY(-50%)' },
657
+ SMALL: { top: 'center', right: GAP, transform: 'translateY(-50%)' }
658
+ },
659
+ INSET5: {
660
+ LARGE: { bottom: GAP, right: GAP },
661
+ MEDIUM: { bottom: GAP, right: GAP },
662
+ SMALL: { bottom: GAP, right: GAP }
663
+ },
664
+ INSET6: {
665
+ LARGE: { bottom: GAP, left: 'center', transform: 'translateX(-50%)' },
666
+ MEDIUM: { bottom: GAP, left: 'center', transform: 'translateX(-50%)' },
667
+ SMALL: { bottom: GAP, left: 'center', transform: 'translateX(-50%)' }
668
+ },
669
+ INSET7: {
670
+ LARGE: { bottom: GAP, left: GAP },
671
+ MEDIUM: { bottom: GAP, left: GAP },
672
+ SMALL: { bottom: GAP, left: GAP }
673
+ },
674
+ INSET8: {
675
+ LARGE: { top: 'center', left: GAP, transform: 'translateY(-50%)' },
676
+ MEDIUM: { top: 'center', left: GAP, transform: 'translateY(-50%)' },
677
+ SMALL: { top: 'center', left: GAP, transform: 'translateY(-50%)' }
678
+ }
679
+ };
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/hooks/useFlexGridLayout.d.ts CHANGED
@@ -13,6 +13,6 @@ export declare const useFlexGridLayout: ({ components }: {
13
13
  left: string;
14
14
  };
15
15
  componentGroups: Record<string, SlideBannerElementsProps[]>;
16
- getPositionStyle: (position: string, ccbInset: Record<string, string>) => CSSProperties;
16
+ getPositionStyle: (position: string, ccbInset: Record<string, string>, designType: string, size: 'LARGE' | 'MEDIUM' | 'SMALL' | 'GROUP') => CSSProperties;
17
17
  getComponentGroupLayout: (components: SlideBannerElementsProps[], position: string) => CSSProperties;
18
18
  };