pds-dev-kit-web-test 0.2.0 → 0.2.2

package/dist/src/sub/DynamicLayout/components/Box.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties } from 'react';
+declare type Props = {
+    direction?: 'vertical' | 'horizontal';
+    children: React.ReactNode;
+    relative?: boolean;
+    justifyContent?: boolean;
+    alignItems?: boolean;
+    flex?: boolean;
+    style?: CSSProperties;
+    className?: string;
+};
+declare function Box({ direction, children, relative, justifyContent, alignItems, flex, style, className }: Props): JSX.Element;
+export default Box;

package/dist/src/sub/DynamicLayout/components/Box.js

@@ -0,0 +1,73 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importStar(require("styled-components"));
+function Box(_a) {
+    var _b = _a.direction, direction = _b === void 0 ? 'horizontal' : _b, children = _a.children, relative = _a.relative, justifyContent = _a.justifyContent, alignItems = _a.alignItems, flex = _a.flex, style = _a.style, className = _a.className;
+    if (direction === 'horizontal') {
+        return ((0, jsx_runtime_1.jsx)(Row, __assign({ style: style, relative: relative, justifyContent: justifyContent, alignItems: alignItems, flex: flex, className: className }, { children: children }), void 0));
+    }
+    return ((0, jsx_runtime_1.jsx)(Col, __assign({ style: style, relative: relative, justifyContent: justifyContent, alignItems: alignItems, flex: flex, className: className }, { children: children }), void 0));
+}
+exports.default = Box;
+var Col = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+    var relative = _a.relative;
+    return relative && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n    "], ["\n      position: relative;\n    "])));
+}, function (_a) {
+    var justifyContent = _a.justifyContent;
+    return justifyContent && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      justify-content: center;\n    "], ["\n      justify-content: center;\n    "])));
+}, function (_a) {
+    var alignItems = _a.alignItems;
+    return alignItems && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      align-items: center;\n    "], ["\n      align-items: center;\n    "])));
+}, function (_a) {
+    var flex = _a.flex;
+    return flex && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      flex: 1;\n    "], ["\n      flex: 1;\n    "])));
+});
+var Row = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+    var relative = _a.relative;
+    return relative && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      position: relative;\n    "], ["\n      position: relative;\n    "])));
+}, function (_a) {
+    var justifyContent = _a.justifyContent;
+    return justifyContent && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      justify-content: center;\n    "], ["\n      justify-content: center;\n    "])));
+}, function (_a) {
+    var alignItems = _a.alignItems;
+    return alignItems && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      align-items: center;\n    "], ["\n      align-items: center;\n    "])));
+}, function (_a) {
+    var flex = _a.flex;
+    return flex && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      flex: 1;\n    "], ["\n      flex: 1;\n    "])));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/src/sub/DynamicLayout/components/desktop/common/Carousel.d.ts

@@ -11,6 +11,7 @@ interface Carousel {
     mode?: 'normal' | 'loop' | 'autoplay';
     autoplayDelay?: number;
     buttonSpacing?: string;
+    allowTouchMove?: boolean;
 }
-declare function Carousel({ children, spaceBetween, slidesPerView, slidesPerGroup, breakpoints, mode, autoplayDelay, buttonSpacing }: Carousel): JSX.Element;
+declare function Carousel({ children, spaceBetween, slidesPerView, slidesPerGroup, breakpoints, mode, autoplayDelay, buttonSpacing, allowTouchMove }: Carousel): JSX.Element;
 export default Carousel;

package/dist/src/sub/DynamicLayout/components/desktop/common/Carousel.js

@@ -45,12 +45,12 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var pdsOriginal_1 = require("../../pdsOriginal");
 var swiper_style_1 = __importDefault(require("./swiper.style"));
 function Carousel(_a) {
-    var children = _a.children, spaceBetween = _a.spaceBetween, slidesPerView = _a.slidesPerView, slidesPerGroup = _a.slidesPerGroup, breakpoints = _a.breakpoints, _b = _a.mode, mode = _b === void 0 ? 'normal' : _b, _c = _a.autoplayDelay, autoplayDelay = _c === void 0 ? 3 : _c, buttonSpacing = _a.buttonSpacing;
+    var children = _a.children, spaceBetween = _a.spaceBetween, slidesPerView = _a.slidesPerView, slidesPerGroup = _a.slidesPerGroup, breakpoints = _a.breakpoints, _b = _a.mode, mode = _b === void 0 ? 'normal' : _b, _c = _a.autoplayDelay, autoplayDelay = _c === void 0 ? 3 : _c, buttonSpacing = _a.buttonSpacing, _d = _a.allowTouchMove, allowTouchMove = _d === void 0 ? true : _d;
     var swiperRef = (0, react_1.useRef)(null);
-    var _d = (0, react_1.useState)(true), isBeginning = _d[0], setIsBeginning = _d[1];
-    var _e = (0, react_1.useState)(true), isEnd = _e[0], setIsEnd = _e[1];
-    var _f = (0, react_1.useState)(true), isLocked = _f[0], setIsLocked = _f[1];
-    var _g = (0, react_1.useState)(mode), targetMode = _g[0], setTargetMode = _g[1];
+    var _e = (0, react_1.useState)(true), isBeginning = _e[0], setIsBeginning = _e[1];
+    var _f = (0, react_1.useState)(true), isEnd = _f[0], setIsEnd = _f[1];
+    var _g = (0, react_1.useState)(true), isLocked = _g[0], setIsLocked = _g[1];
+    var _h = (0, react_1.useState)(mode), targetMode = _h[0], setTargetMode = _h[1];
     /**
      * @when : 캐러셀이 처음 화면에 렌더링될 때
      * @expected
@@ -66,7 +66,7 @@ function Carousel(_a) {
         }
         setTargetMode(mode);
     }, [slidesPerView, mode, children]);
-    return ((0, jsx_runtime_1.jsxs)(S_Carousel, { children: [(0, jsx_runtime_1.jsx)(S_SwiperStyleWrapper, { children: (0, jsx_runtime_1.jsx)(react_2.Swiper, __assign({ modules: [swiper_1.Navigation, swiper_1.Autoplay], centerInsufficientSlides: true, spaceBetween: spaceBetween, slidesPerView: slidesPerView, slidesPerGroup: slidesPerGroup, breakpoints: breakpoints, loop: targetMode === 'loop' || targetMode === 'autoplay', autoplay: targetMode === 'autoplay'
+    return ((0, jsx_runtime_1.jsxs)(S_Carousel, { children: [(0, jsx_runtime_1.jsx)(S_SwiperStyleWrapper, { children: (0, jsx_runtime_1.jsx)(react_2.Swiper, __assign({ allowTouchMove: allowTouchMove, modules: [swiper_1.Navigation, swiper_1.Autoplay], centerInsufficientSlides: true, spaceBetween: spaceBetween, slidesPerView: slidesPerView, slidesPerGroup: slidesPerGroup, breakpoints: breakpoints, loop: targetMode === 'loop' || targetMode === 'autoplay', autoplay: targetMode === 'autoplay'
                         ? { delay: autoplayDelay * 1000, disableOnInteraction: false }
                         : undefined, onSwiper: function (swiper) {
                         swiperRef.current = swiper;

package/dist/src/sub/DynamicLayout/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './pdsOriginal';
 export { Section } from './Section';
+export { default as Box } from './Box';

package/dist/src/sub/DynamicLayout/components/index.js

@@ -9,8 +9,13 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Section = void 0;
+exports.Box = exports.Section = void 0;
 __exportStar(require("./pdsOriginal"), exports);
 var Section_1 = require("./Section");
 Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return Section_1.Section; } });
+var Box_1 = require("./Box");
+Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return __importDefault(Box_1).default; } });

package/dist/src/sub/DynamicLayout/custonSectionSampleData.d.ts

@@ -18,6 +18,11 @@ export declare const customsectionMock: ({
                 accountId?: undefined;
                 startAt?: undefined;
                 endAt?: undefined;
+                accordionItems?: undefined;
+                openedItemId?: undefined;
+                carouselSettings?: undefined;
+                contentsCarouselItems?: undefined;
+                imgCarouselItems?: undefined;
             };
         };
     };
@@ -50,6 +55,11 @@ export declare const customsectionMock: ({
                 accountId?: undefined;
                 startAt?: undefined;
                 endAt?: undefined;
+                accordionItems?: undefined;
+                openedItemId?: undefined;
+                carouselSettings?: undefined;
+                contentsCarouselItems?: undefined;
+                imgCarouselItems?: undefined;
             };
         };
     };
@@ -78,6 +88,11 @@ export declare const customsectionMock: ({
                 accountId?: undefined;
                 startAt?: undefined;
                 endAt?: undefined;
+                accordionItems?: undefined;
+                openedItemId?: undefined;
+                carouselSettings?: undefined;
+                contentsCarouselItems?: undefined;
+                imgCarouselItems?: undefined;
             };
         };
     };
@@ -106,6 +121,11 @@ export declare const customsectionMock: ({
                 accountId?: undefined;
                 startAt?: undefined;
                 endAt?: undefined;
+                accordionItems?: undefined;
+                openedItemId?: undefined;
+                carouselSettings?: undefined;
+                contentsCarouselItems?: undefined;
+                imgCarouselItems?: undefined;
             };
         };
     };
@@ -134,6 +154,11 @@ export declare const customsectionMock: ({
                 alt?: undefined;
                 startAt?: undefined;
                 endAt?: undefined;
+                accordionItems?: undefined;
+                openedItemId?: undefined;
+                carouselSettings?: undefined;
+                contentsCarouselItems?: undefined;
+                imgCarouselItems?: undefined;
             };
         };
     };
@@ -162,6 +187,142 @@ export declare const customsectionMock: ({
                 size?: undefined;
                 alt?: undefined;
                 accountId?: undefined;
+                accordionItems?: undefined;
+                openedItemId?: undefined;
+                carouselSettings?: undefined;
+                contentsCarouselItems?: undefined;
+                imgCarouselItems?: undefined;
+            };
+        };
+    };
+    style: {
+        backgroundColor: string;
+    };
+    layout: {};
+    hoverStyle?: undefined;
+} | {
+    type: string;
+    gridItemData: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        i: string;
+    };
+    content: {
+        data: {
+            type: string;
+            value: {
+                accordionItems: {
+                    title: string;
+                    description: string;
+                }[];
+                openedItemId: string;
+                text?: undefined;
+                size?: undefined;
+                src?: undefined;
+                alt?: undefined;
+                accountId?: undefined;
+                startAt?: undefined;
+                endAt?: undefined;
+                carouselSettings?: undefined;
+                contentsCarouselItems?: undefined;
+                imgCarouselItems?: undefined;
+            };
+        };
+    };
+    style: {
+        backgroundColor: string;
+    };
+    layout: {};
+    hoverStyle?: undefined;
+} | {
+    type: string;
+    gridItemData: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        i: string;
+    };
+    content: {
+        data: {
+            type: string;
+            value: {
+                carouselSettings: {
+                    mode: string;
+                    carouselAutoplayTime: number;
+                    spaceBetween: number;
+                    slidesPerView: number;
+                    sliderPerGroup: number;
+                    buttonSpacing: string;
+                    effect?: undefined;
+                };
+                contentsCarouselItems: {
+                    title: string;
+                    description: string;
+                    imageSrc: string;
+                    linkSrc: string;
+                    linkType: string;
+                    buttonLabel: string;
+                    id: string;
+                }[];
+                text?: undefined;
+                size?: undefined;
+                src?: undefined;
+                alt?: undefined;
+                accountId?: undefined;
+                startAt?: undefined;
+                endAt?: undefined;
+                accordionItems?: undefined;
+                openedItemId?: undefined;
+                imgCarouselItems?: undefined;
+            };
+        };
+    };
+    style: {
+        backgroundColor: string;
+    };
+    layout: {};
+    hoverStyle?: undefined;
+} | {
+    type: string;
+    gridItemData: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        i: string;
+    };
+    content: {
+        data: {
+            type: string;
+            value: {
+                carouselSettings: {
+                    mode: string;
+                    carouselAutoplayTime: number;
+                    spaceBetween: number;
+                    slidesPerView: number;
+                    sliderPerGroup: number;
+                    effect: string;
+                    buttonSpacing?: undefined;
+                };
+                imgCarouselItems: {
+                    title: string;
+                    description: string;
+                    imageSrc: string;
+                    id: string;
+                }[];
+                text?: undefined;
+                size?: undefined;
+                src?: undefined;
+                alt?: undefined;
+                accountId?: undefined;
+                startAt?: undefined;
+                endAt?: undefined;
+                accordionItems?: undefined;
+                openedItemId?: undefined;
+                contentsCarouselItems?: undefined;
             };
         };
     };

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

@@ -163,5 +163,166 @@ exports.customsectionMock = [
             backgroundColor: 'yellow'
         },
         layout: {}
+    },
+    {
+        type: 'ACCORDION',
+        gridItemData: {
+            x: 5,
+            y: 5,
+            w: 6,
+            h: 10,
+            i: '8'
+        },
+        content: {
+            data: {
+                type: 'ACCORDION',
+                value: {
+                    accordionItems: [
+                        { title: 'title1', description: 'description1' },
+                        { title: 'title2', description: 'description2' },
+                        { title: 'title3', description: 'description3' }
+                    ],
+                    openedItemId: '0'
+                }
+            }
+        },
+        style: {
+            backgroundColor: 'white'
+            // display: 'flex',
+            // flexDirection: 'column',
+            // justifyContent: 'center',
+            // alignItems: 'center'
+        },
+        layout: {}
+    },
+    {
+        type: 'CONTENTS_CAROUSEL',
+        gridItemData: {
+            x: 5,
+            y: 5,
+            w: 10,
+            h: 10,
+            i: '9'
+        },
+        content: {
+            data: {
+                type: 'CONTENTS_CAROUSEL',
+                value: {
+                    carouselSettings: {
+                        mode: 'normal',
+                        carouselAutoplayTime: 1,
+                        spaceBetween: 10,
+                        slidesPerView: 3,
+                        sliderPerGroup: 1,
+                        buttonSpacing: '10px'
+                    },
+                    contentsCarouselItems: [
+                        {
+                            title: 'im 1 carousel item',
+                            description: 'im 1 carousel item',
+                            imageSrc: 'https://cdn.dev.publishingkit.net/d474e86e-9df7-44dd-999e-0bc2a7c9b267.jpg',
+                            linkSrc: 'im 1 carousel item',
+                            linkType: 'NONE',
+                            buttonLabel: 'im 1 carousel item',
+                            id: '1'
+                        },
+                        {
+                            title: 'im 2 carousel item',
+                            description: 'im 2 carousel item',
+                            imageSrc: 'https://cdn.dev.publishingkit.net/5cbc7c88-9566-4ce1-9dc8-0845259aa6a1.jpg',
+                            linkSrc: 'im 2 carousel item',
+                            linkType: 'NONE',
+                            buttonLabel: 'im 2 carousel item',
+                            id: '2'
+                        },
+                        {
+                            title: 'im 3 carousel item',
+                            description: 'im 3 carousel item',
+                            imageSrc: 'https://cdn.dev.publishingkit.net/172b5a98-fd4b-4b2e-bdca-928d182c1548.jpg',
+                            linkSrc: 'im 3 carousel item',
+                            linkType: 'NONE',
+                            buttonLabel: 'im 3 carousel item',
+                            id: '3'
+                        },
+                        {
+                            title: 'im 4 carousel item',
+                            description: 'im 4 carousel item',
+                            imageSrc: 'https://cdn.dev.publishingkit.net/30ddd804-841a-416f-88a6-fbcb84924036.jpg',
+                            linkSrc: 'im 4 carousel item',
+                            linkType: 'NONE',
+                            buttonLabel: 'im 4 carousel item',
+                            id: '4'
+                        }
+                    ]
+                }
+            }
+        },
+        style: {
+            backgroundColor: 'white'
+            // display: 'flex',
+            // flexDirection: 'column',
+            // justifyContent: 'center',
+            // alignItems: 'center'
+        },
+        layout: {}
+    },
+    {
+        type: 'IMAGE_CAROUSEL',
+        gridItemData: {
+            x: 5,
+            y: 5,
+            w: 10,
+            h: 10,
+            i: '10'
+        },
+        content: {
+            data: {
+                type: 'IMAGE_CAROUSEL',
+                value: {
+                    carouselSettings: {
+                        mode: 'normal',
+                        carouselAutoplayTime: 1,
+                        spaceBetween: 10,
+                        slidesPerView: 1,
+                        sliderPerGroup: 1,
+                        effect: 'fade'
+                    },
+                    imgCarouselItems: [
+                        {
+                            title: 'im 1 carousel item',
+                            description: 'im 1 carousel item',
+                            imageSrc: 'https://cdn.dev.publishingkit.net/d474e86e-9df7-44dd-999e-0bc2a7c9b267.jpg',
+                            id: '1'
+                        },
+                        {
+                            title: 'im 2 carousel item',
+                            description: 'im 2 carousel item',
+                            imageSrc: 'https://cdn.dev.publishingkit.net/5cbc7c88-9566-4ce1-9dc8-0845259aa6a1.jpg',
+                            id: '2'
+                        },
+                        {
+                            title: 'im 3 carousel item',
+                            description: 'im 3 carousel item',
+                            imageSrc: 'https://cdn.dev.publishingkit.net/172b5a98-fd4b-4b2e-bdca-928d182c1548.jpg',
+                            id: '3'
+                        },
+                        {
+                            title: 'im 4 carousel item',
+                            description: 'im 4 carousel item',
+                            imageSrc: 'https://cdn.dev.publishingkit.net/30ddd804-841a-416f-88a6-fbcb84924036.jpg',
+                            id: '4'
+                        }
+                    ]
+                }
+            }
+        },
+        style: {
+            backgroundColor: 'white'
+            // display: 'flex',
+            // flexDirection: 'column',
+            // justifyContent: 'center',
+            // alignItems: 'center'
+        },
+        layout: {}
     }
 ];

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/BlockMatcher.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var blocks_1 = require("./blocks");
 var Button_1 = __importDefault(require("./blocks/Button"));
+var ContentsCarousel_1 = __importDefault(require("./blocks/ContentsCarousel/ContentsCarousel"));
+var ImageCarousel_1 = __importDefault(require("./blocks/ImageCarousel/ImageCarousel"));
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function BlockMatcher(_a) {
     var type = _a.type, content = _a.content, style = _a.style, layout = _a.layout, hoverStyle = _a.hoverStyle;
@@ -57,6 +59,25 @@ function BlockMatcher(_a) {
             }
             return (0, jsx_runtime_1.jsx)("div", { children: "Error" }, void 0);
         }
+        case 'ACCORDION': {
+            if ('accordionItems' in value && 'openedItemId' in value) {
+                return ((0, jsx_runtime_1.jsx)(blocks_1.Accordion, { accordionItems: value.accordionItems, openedItemId: value.openedItemId, style: style }, void 0));
+            }
+            return (0, jsx_runtime_1.jsx)("div", { children: "Error" }, void 0);
+        }
+        case 'CONTENTS_CAROUSEL': {
+            if ('contentsCarouselItems' in value && 'carouselSettings' in value) {
+                return ((0, jsx_runtime_1.jsx)(ContentsCarousel_1.default, { contentsCarouselItems: value.contentsCarouselItems, carouselSettings: value.carouselSettings, 
+                    // openedItemId={value.openedItemId}
+                    style: style }, void 0));
+            }
+            return (0, jsx_runtime_1.jsx)("div", { children: "Error" }, void 0);
+        }
+        case 'IMAGE_CAROUSEL': {
+            if ('imgCarouselItems' in value && 'carouselSettings' in value) {
+                return ((0, jsx_runtime_1.jsx)(ImageCarousel_1.default, { imgStyle: { objectFit: 'fill' }, imgCarouselItems: value.imgCarouselItems, carouselSettings: value.carouselSettings, style: {} }, void 0));
+            }
+        }
         // eslint-disable-next-line no-fallthrough
         default:
             return (0, jsx_runtime_1.jsx)("div", { children: "Error" }, void 0);

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/Accordion.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+export declare type AccordionItem = {
+    title: string;
+    description: string;
+};
+export declare type AccordionProps = {
+    accordionItems: AccordionItem[];
+    openedItemId?: string;
+    style: React.CSSProperties;
+};
+declare function Accordion({ accordionItems, openedItemId, style }: AccordionProps): JSX.Element;
+export default Accordion;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/Accordion.js

@@ -0,0 +1,46 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var index_1 = require("../../../../../../desktop/index");
+var components_1 = require("../../../../../../hybrid/components");
+var components_2 = require("../../../../../DynamicLayout/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+var AccordionCore_1 = require("./AccordionCore");
+function Accordion(_a) {
+    var accordionItems = _a.accordionItems, openedItemId = _a.openedItemId, style = _a.style;
+    var _b = (0, react_1.useState)(''), openedId = _b[0], setOpen = _b[1];
+    (0, react_1.useLayoutEffect)(function () {
+        setOpen(openedItemId !== null && openedItemId !== void 0 ? openedItemId : '');
+    }, [openedItemId]);
+    var toggleAccordion = function (id) {
+        if (openedId === id) {
+            setOpen('');
+            return;
+        }
+        setOpen(id);
+    };
+    return ((0, jsx_runtime_1.jsx)(S_AccordionBox, __assign({ style: style }, { children: (0, jsx_runtime_1.jsx)(AccordionCore_1.AccordionCore, __assign({ openedId: openedId, toggle: toggleAccordion }, { children: accordionItems.map(function (each, index) { return ((0, jsx_runtime_1.jsxs)(AccordionCore_1.AccordionItem, __assign({ style: { backgroundColor: style.backgroundColor } }, { children: [(0, jsx_runtime_1.jsx)(AccordionCore_1.AccordionHeader, { targetId: index.toString(), text: each.title }, void 0), (0, jsx_runtime_1.jsxs)(AccordionCore_1.AccordionBody, __assign({ targetId: index.toString() }, { children: [(0, jsx_runtime_1.jsxs)(components_2.Box, __assign({ direction: "horizontal" }, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(index_1.D_TextLabel, { text: each.description, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(S_Divider, {}, void 0)] }), index.toString())); }) }), void 0) }), void 0));
+}
+var S_Divider = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: #dfdfdf;\n  height: 1px;\n  width: 100%;\n"], ["\n  background-color: #dfdfdf;\n  height: 1px;\n  width: 100%;\n"])));
+var S_AccordionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n\n  * {\n    color: black;\n  }\n"], ["\n  height: 100%;\n\n  * {\n    color: black;\n  }\n"])));
+exports.default = Accordion;
+var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/AccordionCore/AccordionBody.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AccordionItemIdType } from './AccordionCore';
+declare type Props = {
+    children: React.ReactNode;
+    targetId: AccordionItemIdType;
+};
+declare function AccordionBody({ children, targetId }: Props): JSX.Element;
+export default AccordionBody;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/AccordionCore/AccordionBody.js

@@ -0,0 +1,74 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importStar(require("styled-components"));
+var AccordionCore_1 = require("./AccordionCore");
+function AccordionBody(_a) {
+    var children = _a.children, targetId = _a.targetId;
+    var _b = (0, react_1.useState)('SHOW'), state = _b[0], setState = _b[1];
+    var _c = (0, react_1.useState)(0), height = _c[0], setHeight = _c[1];
+    var openedId = (0, react_1.useContext)(AccordionCore_1.AccordionContext).openedId;
+    var childrenRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (!childrenRef.current) {
+            return;
+        }
+        var off = childrenRef.current.offsetHeight;
+        setHeight(off);
+    }, [children]);
+    (0, react_1.useLayoutEffect)(function () {
+        if (openedId !== targetId) {
+            setState('COLLAPSE');
+            return;
+        }
+        setState('SHOW');
+    }, [openedId]);
+    return ((0, jsx_runtime_1.jsx)(S_AccordionBody, __assign({ state: state, height: height }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ ref: childrenRef }, { children: children }), void 0) }), void 0));
+}
+var S_AccordionBody = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: ", ";\n  overflow: hidden;\n\n  ", ";\n\n  ", ";\n\n  transition: height 0.35s ease;\n"], ["\n  height: ", ";\n  overflow: hidden;\n\n  ", ";\n\n  ", ";\n\n  transition: height 0.35s ease;\n"])), function (_a) {
+    var height = _a.height;
+    return height + "px";
+}, function (_a) {
+    var state = _a.state, height = _a.height;
+    return state === 'SHOW' && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: ", " + 'px';\n    "], ["\n      height: ", " + 'px';\n    "])), height);
+}, function (_a) {
+    var state = _a.state;
+    return state === 'COLLAPSE' && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      height: 0;\n    "], ["\n      height: 0;\n    "])));
+});
+exports.default = AccordionBody;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/AccordionCore/AccordionCore.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare type AccordionItemIdType = string | number;
+declare type Props = {
+    openedId: AccordionItemIdType;
+    toggle: (id: AccordionItemIdType) => void;
+    children: React.ReactNode;
+};
+export declare const AccordionContext: React.Context<{
+    openedId: AccordionItemIdType;
+    toggle: (id: AccordionItemIdType) => void;
+}>;
+declare function AccordionCore({ openedId, children, toggle }: Props): JSX.Element;
+export default AccordionCore;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/AccordionCore/AccordionCore.js

@@ -0,0 +1,25 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionContext = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+exports.AccordionContext = (0, react_1.createContext)({
+    openedId: '',
+    toggle: function () { return null; }
+});
+function AccordionCore(_a) {
+    var openedId = _a.openedId, children = _a.children, toggle = _a.toggle;
+    return ((0, jsx_runtime_1.jsx)(exports.AccordionContext.Provider, __assign({ value: { openedId: openedId, toggle: toggle } }, { children: children }), void 0));
+}
+exports.default = AccordionCore;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/AccordionCore/AccordionHeader.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Props = {
+    text: string;
+    targetId: any;
+};
+declare function AccordionHeader({ text, targetId }: Props): JSX.Element;
+export default AccordionHeader;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/AccordionCore/AccordionHeader.js

@@ -0,0 +1,49 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var components_1 = require("../../../../../../DynamicLayout/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+var AccordionCore_1 = require("./AccordionCore");
+function AccordionHeader(_a) {
+    var text = _a.text, targetId = _a.targetId;
+    var _b = (0, react_1.useContext)(AccordionCore_1.AccordionContext), openedId = _b.openedId, toggle = _b.toggle;
+    var onClickToggle = function () {
+        toggle(targetId);
+    };
+    return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ alignItems: true }, { children: [(0, jsx_runtime_1.jsx)(components_1.D_TextLabel, { text: text }, void 0), (0, jsx_runtime_1.jsx)(D_IconWrapper, __assign({ isOpened: openedId === targetId }, { children: (0, jsx_runtime_1.jsx)(components_1.D_IconButton, { iconSize: 20, baseSize: "large", iconName: "ic_arrow_down", iconColorKey: "ui_cpnt_icon_sys_grey_02", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClickToggle }, void 0) }), void 0)] }), void 0));
+}
+var S_Box = (0, styled_components_1.default)(components_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  justify-content: space-between;\n  padding-left: ", ";\n"], ["\n  justify-content: space-between;\n  padding-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var D_IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: fit-content;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > button {\n    transform: ", ";\n    transition: transform 0.2s ease-in-out;\n  }\n"], ["\n  height: fit-content;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > button {\n    transform: ", ";\n    transition: transform 0.2s ease-in-out;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var isOpened = _a.isOpened;
+    return (isOpened ? 'rotate(-180deg)' : ' rotate(0deg)');
+});
+exports.default = AccordionHeader;
+var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/AccordionCore/AccordionItem.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+declare type Props = {
+    children: React.ReactNode;
+    style: React.CSSProperties;
+};
+declare function AccordionItem({ children, style }: Props): JSX.Element;
+export default AccordionItem;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/AccordionCore/AccordionItem.js

@@ -0,0 +1,19 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+function AccordionItem(_a) {
+    var children = _a.children, style = _a.style;
+    return (0, jsx_runtime_1.jsx)("div", __assign({ style: style }, { children: children }), void 0);
+}
+exports.default = AccordionItem;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/AccordionCore/index.d.ts

@@ -0,0 +1,4 @@
+export { default as AccordionCore } from './AccordionCore';
+export { default as AccordionBody } from './AccordionBody';
+export { default as AccordionHeader } from './AccordionHeader';
+export { default as AccordionItem } from './AccordionItem';

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/AccordionCore/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionItem = exports.AccordionHeader = exports.AccordionBody = exports.AccordionCore = void 0;
+var AccordionCore_1 = require("./AccordionCore");
+Object.defineProperty(exports, "AccordionCore", { enumerable: true, get: function () { return __importDefault(AccordionCore_1).default; } });
+var AccordionBody_1 = require("./AccordionBody");
+Object.defineProperty(exports, "AccordionBody", { enumerable: true, get: function () { return __importDefault(AccordionBody_1).default; } });
+var AccordionHeader_1 = require("./AccordionHeader");
+Object.defineProperty(exports, "AccordionHeader", { enumerable: true, get: function () { return __importDefault(AccordionHeader_1).default; } });
+var AccordionItem_1 = require("./AccordionItem");
+Object.defineProperty(exports, "AccordionItem", { enumerable: true, get: function () { return __importDefault(AccordionItem_1).default; } });

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/ContentsCarousel/CardItem.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type Props = {
+    imgSrc: string;
+    title: string;
+    description: string;
+    isImgOverlay: boolean;
+};
+declare function CardItem({ imgSrc, title, description, isImgOverlay }: Props): JSX.Element;
+export default CardItem;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/ContentsCarousel/CardItem.js

@@ -0,0 +1,34 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+var reactstrap_1 = require("reactstrap");
+var styled_components_1 = __importDefault(require("styled-components"));
+function CardItem(_a) {
+    var imgSrc = _a.imgSrc, title = _a.title, description = _a.description, isImgOverlay = _a.isImgOverlay;
+    if (isImgOverlay) {
+        (0, jsx_runtime_1.jsxs)(reactstrap_1.Card, { children: [(0, jsx_runtime_1.jsx)(reactstrap_1.CardImg, { src: imgSrc, width: "100%" }, void 0), (0, jsx_runtime_1.jsx)(reactstrap_1.CardImgOverlay, { children: (0, jsx_runtime_1.jsxs)(reactstrap_1.CardBody, { children: [(0, jsx_runtime_1.jsx)(reactstrap_1.CardTitle, __assign({ tag: "h5" }, { children: title }), void 0), (0, jsx_runtime_1.jsx)(reactstrap_1.CardSubtitle, __assign({ className: "mb-2 text-muted", tag: "h6" }, { children: description }), void 0), (0, jsx_runtime_1.jsx)(reactstrap_1.CardText, { children: "\uCD94\uAC00\uB85C \uCE74\uB4DC \uD14D\uC2A4\uD2B8\uB97C \uB123\uB294 \uACF3" }, void 0), (0, jsx_runtime_1.jsx)(reactstrap_1.Button, { children: "Button" }, void 0)] }, void 0) }, void 0)] }, void 0);
+    }
+    return ((0, jsx_runtime_1.jsxs)(reactstrap_1.Card, __assign({ style: { height: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(S_CardImgBox, { children: (0, jsx_runtime_1.jsx)(reactstrap_1.CardImg, { src: imgSrc, width: "100%", top: true, style: { aspectRatio: '16/9' } }, void 0) }, void 0), (0, jsx_runtime_1.jsxs)(reactstrap_1.CardBody, __assign({ style: { flex: '1 1 auto' } }, { children: [(0, jsx_runtime_1.jsx)(reactstrap_1.CardTitle, __assign({ tag: "h5" }, { children: title }), void 0), (0, jsx_runtime_1.jsx)(reactstrap_1.CardSubtitle, __assign({ className: "mb-2 text-muted", tag: "h6" }, { children: description }), void 0), (0, jsx_runtime_1.jsx)(reactstrap_1.CardText, { children: "\uCD94\uAC00\uB85C \uCE74\uB4DC \uD14D\uC2A4\uD2B8\uB97C \uB123\uB294 \uACF3" }, void 0), (0, jsx_runtime_1.jsx)(reactstrap_1.Button, { children: "Button" }, void 0)] }), void 0)] }), void 0));
+}
+var S_CardImgBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 50%;\n  max-height: 50%;\n"], ["\n  height: 50%;\n  max-height: 50%;\n"])));
+exports.default = CardItem;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/ContentsCarousel/ContentsCarousel.d.ts

@@ -0,0 +1,28 @@
+import type { TypeOfItemLinkType } from '../../../../../../DynamicLayout/types';
+import type React from 'react';
+export declare type ContentsCarouselItem = {
+    title: string;
+    description: string;
+    imageSrc: string;
+    linkSrc: string;
+    linkType: TypeOfItemLinkType;
+    buttonLabel: string;
+    id: string;
+};
+export declare type EffectTypes = 'none' | 'fade';
+export declare type CarouselSettings = {
+    mode: 'normal' | 'loop' | 'autoplay';
+    carouselAutoplayTime: number;
+    spaceBetween: number;
+    slidesPerView: number;
+    sliderPerGroup: number;
+    buttonSpacing: string;
+    effect: EffectTypes;
+};
+export declare type ContentsCarouselProps = {
+    contentsCarouselItems: ContentsCarouselItem[];
+    carouselSettings: CarouselSettings;
+    style: React.CSSProperties;
+};
+declare function ContentsCarousel({ contentsCarouselItems, style, carouselSettings }: ContentsCarouselProps): JSX.Element;
+export default ContentsCarousel;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/ContentsCarousel/ContentsCarousel.js

@@ -0,0 +1,53 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var desktop_1 = require("../../../../../../DynamicLayout/components/desktop");
+var styled_components_1 = __importDefault(require("styled-components"));
+var CardItem_1 = __importDefault(require("./CardItem"));
+function ContentsCarousel(_a) {
+    var contentsCarouselItems = _a.contentsCarouselItems, style = _a.style, carouselSettings = _a.carouselSettings;
+    var mode = carouselSettings.mode, carouselAutoplayTime = carouselSettings.carouselAutoplayTime, spaceBetween = carouselSettings.spaceBetween, slidesPerView = carouselSettings.slidesPerView, sliderPerGroup = carouselSettings.sliderPerGroup, buttonSpacing = carouselSettings.buttonSpacing;
+    return ((0, jsx_runtime_1.jsx)(S_CarouselBox, __assign({ style: style }, { children: (0, jsx_runtime_1.jsx)(desktop_1.Carousel, __assign({ spaceBetween: spaceBetween, slidesPerView: slidesPerView, slidesPerGroup: sliderPerGroup, 
+            // NOTE: when edit mode
+            allowTouchMove: false, 
+            // breakpoints={{
+            //   1301: {
+            //     slidesPerView: 4
+            //   },
+            //   1601: {
+            //     slidesPerView: 5
+            //   }
+            // }}
+            mode: mode, autoplayDelay: carouselAutoplayTime, buttonSpacing: buttonSpacing }, { children: contentsCarouselItems.map(function (item) {
+                var itemTitle = item.title, itemDescription = item.description, itemImageSrc = item.imageSrc, 
+                // linkSrc: itemLinkSrc,
+                // linkType: itemLinkType,
+                // buttonLabel: itemButtonLabel,
+                id = item.id;
+                return ((0, jsx_runtime_1.jsx)(CardItem_1.default, { imgSrc: itemImageSrc, title: itemTitle, description: itemDescription, isImgOverlay: false }, id));
+            }) }), void 0) }), void 0));
+}
+var S_CarouselBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* NOTE: \uBCC0\uACBD\uD544\uC694 */\n  height: 100%;\n  max-height: 100%;\n\n  /* & > div {\n    height: 100%;\n    & > div {\n      height: 100%;\n      & > .swiper {\n        height: 100%;\n      }\n    }\n  } */\n  /* margin: ", " 0; */\n"], ["\n  /* NOTE: \uBCC0\uACBD\uD544\uC694 */\n  height: 100%;\n  max-height: 100%;\n\n  /* & > div {\n    height: 100%;\n    & > div {\n      height: 100%;\n      & > .swiper {\n        height: 100%;\n      }\n    }\n  } */\n  /* margin: ", " 0; */\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingH;
+});
+exports.default = ContentsCarousel;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/ImageCarousel/ImageCarousel.d.ts

@@ -0,0 +1,16 @@
+import type { CarouselSettings } from '../ContentsCarousel/ContentsCarousel';
+import type React from 'react';
+export declare type ImgCarouselItem = {
+    title: string;
+    description: string;
+    imageSrc: string;
+    id: string;
+};
+export declare type ImgCarouselProps = {
+    imgCarouselItems: ImgCarouselItem[];
+    carouselSettings: CarouselSettings;
+    style: React.CSSProperties;
+    imgStyle: React.CSSProperties;
+};
+declare function ImageCarousel({ imgStyle, imgCarouselItems, carouselSettings, style }: ImgCarouselProps): JSX.Element;
+export default ImageCarousel;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/ImageCarousel/ImageCarousel.js

@@ -0,0 +1,41 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var reactstrap_1 = require("reactstrap");
+var swiper_1 = require("swiper");
+var react_1 = require("swiper/react");
+var swiper_style_1 = __importDefault(require("../../../../../../DynamicLayout/components/desktop/common/swiper.style"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function ImageCarousel(_a) {
+    var imgStyle = _a.imgStyle, imgCarouselItems = _a.imgCarouselItems, carouselSettings = _a.carouselSettings, style = _a.style;
+    return ((0, jsx_runtime_1.jsx)(S_SwiperStyleWrapper, __assign({ style: style }, { children: (0, jsx_runtime_1.jsx)(react_1.Swiper, __assign({ spaceBetween: carouselSettings.spaceBetween, effect: carouselSettings.effect === 'none' ? undefined : carouselSettings.effect, navigation: true, pagination: {
+                clickable: true
+            }, 
+            // NOTE: when edit mode
+            allowTouchMove: false, modules: [swiper_1.EffectFade, swiper_1.Navigation, reactstrap_1.Pagination], className: "mySwiper" }, { children: imgCarouselItems.map(function (item) { return ((0, jsx_runtime_1.jsxs)(react_1.SwiperSlide, { children: [(0, jsx_runtime_1.jsx)(S_Img, { style: imgStyle, src: item.imageSrc }, void 0), (0, jsx_runtime_1.jsxs)(S_Overlay, { children: [(0, jsx_runtime_1.jsx)(S_Title, { children: item.title }, void 0), (0, jsx_runtime_1.jsx)(S_Desc, { children: item.description }, void 0)] }, void 0)] }, item.id)); }) }), void 0) }), void 0));
+}
+var S_Overlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  bottom: 20px;\n  left: 20px;\n  position: absolute;\n"], ["\n  bottom: 20px;\n  left: 20px;\n  position: absolute;\n"])));
+var S_Title = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: white;\n  font-size: 20px;\n  margin-bottom: 8px;\n"], ["\n  color: white;\n  font-size: 20px;\n  margin-bottom: 8px;\n"])));
+var S_Desc = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: #d2d2d2;\n  font-size: 16px;\n"], ["\n  color: #d2d2d2;\n  font-size: 16px;\n"])));
+var S_Img = styled_components_1.default.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  object-position: 50% 50%;\n  width: 100%;\n"], ["\n  height: 100%;\n  object-position: 50% 50%;\n  width: 100%;\n"])));
+var S_SwiperStyleWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  /** NOTE: Swiper\uAC00 \uC81C\uACF5\uD558\uB294 css \uD30C\uC77C\uC744 webpack \uC774\uC288\uB85C import\uD558\uC9C0 \uBABB\uD574\uC11C \uC784\uC2DC\uB85C \uB9CC\uB4E0 css wrapper\uC785\uB2C8\uB2E4.\n  * \uCC28\uD6C4 Webpack 5\uB85C \uB9C8\uC774\uADF8\uB808\uC774\uC158 \uB418\uB294 \uACBD\uC6B0 swiper \uD648\uD398\uC774\uC9C0\uC5D0\uC11C \uCD94\uCC9C\uD558\uB294 \uC0AC\uC6A9\uBC95\uC73C\uB85C \uC218\uC815\uC774 \uD544\uC694\uD569\uB2C8\uB2E4.\n  */\n\n  ", "\n  height: 100%;\n\n  .swiper {\n    height: 100%;\n  }\n\n  * {\n    pointer-events: 'none';\n  }\n"], ["\n  /** NOTE: Swiper\uAC00 \uC81C\uACF5\uD558\uB294 css \uD30C\uC77C\uC744 webpack \uC774\uC288\uB85C import\uD558\uC9C0 \uBABB\uD574\uC11C \uC784\uC2DC\uB85C \uB9CC\uB4E0 css wrapper\uC785\uB2C8\uB2E4.\n  * \uCC28\uD6C4 Webpack 5\uB85C \uB9C8\uC774\uADF8\uB808\uC774\uC158 \uB418\uB294 \uACBD\uC6B0 swiper \uD648\uD398\uC774\uC9C0\uC5D0\uC11C \uCD94\uCC9C\uD558\uB294 \uC0AC\uC6A9\uBC95\uC73C\uB85C \uC218\uC815\uC774 \uD544\uC694\uD569\uB2C8\uB2E4.\n  */\n\n  ", "\n  height: 100%;\n\n  .swiper {\n    height: 100%;\n  }\n\n  * {\n    pointer-events: 'none';\n  }\n"])), swiper_style_1.default);
+exports.default = ImageCarousel;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/index.d.ts

@@ -6,3 +6,4 @@ export { default as Instagram } from './Instagram';
 export { default as Twitter } from './Twitter';
 export { default as Divider } from './Divider';
 export { default as Youtube } from './Youtube';
+export { default as Accordion } from './Accordion';

package/dist/src/sub/DynamicLayout/sections/CustomSection/BlockMatcher/blocks/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Youtube = exports.Divider = exports.Twitter = exports.Instagram = exports.Button = exports.RichText = exports.Image = exports.Text = void 0;
+exports.Accordion = exports.Youtube = exports.Divider = exports.Twitter = exports.Instagram = exports.Button = exports.RichText = exports.Image = exports.Text = void 0;
 var Text_1 = require("./Text");
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return __importDefault(Text_1).default; } });
 var Image_1 = require("./Image");
@@ -20,3 +20,5 @@ var Divider_1 = require("./Divider");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return __importDefault(Divider_1).default; } });
 var Youtube_1 = require("./Youtube");
 Object.defineProperty(exports, "Youtube", { enumerable: true, get: function () { return __importDefault(Youtube_1).default; } });
+var Accordion_1 = require("./Accordion");
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return __importDefault(Accordion_1).default; } });

package/dist/src/sub/DynamicLayout/sections/CustomSection/types.d.ts

@@ -1,3 +1,6 @@
+import type { AccordionItem } from './BlockMatcher/blocks/Accordion';
+import type { CarouselSettings, ContentsCarouselItem } from './BlockMatcher/blocks/ContentsCarousel/ContentsCarousel';
+import type { ImgCarouselItem } from './BlockMatcher/blocks/ImageCarousel/ImageCarousel';
 import type React from 'react';
 export declare const ComponentNames: {
     TEXT: string;
@@ -8,6 +11,9 @@ export declare const ComponentNames: {
     YOUTUBE: string;
     TWITTER: string;
     INSTAGRAM: string;
+    ACCORDION: string;
+    CONTENTS_CAROUSEL: string;
+    IMAGE_CAROUSEL: string;
 };
 export declare type BlockComponents = typeof ComponentNames;
 export declare type BlockNames = keyof BlockComponents;
@@ -62,7 +68,28 @@ export declare type YoutubeComponentDataType = {
         endAt: number;
     };
 };
-export declare type ComponentDataPairType = TextComponentDataType | ImageComponentDataType | TwitterComponentDataType | RichTextComponentDataType | ButtonComponentDataType | DividerComponentDataType | YoutubeComponentDataType;
+export declare type AccordionComponentDataType = {
+    type: BlockComponents['ACCORDION'];
+    value: {
+        accordionItems: AccordionItem[];
+        openedItemId?: string;
+    };
+};
+export declare type ContentsCarouselDataType = {
+    type: BlockComponents['ACCORDION'];
+    value: {
+        contentsCarouselItems: ContentsCarouselItem[];
+        carouselSettings: CarouselSettings;
+    };
+};
+export declare type ImgCarouselDataType = {
+    type: BlockComponents['IMAGE_CAROUSEL'];
+    value: {
+        imgCarouselItems: ImgCarouselItem[];
+        carouselSettings: CarouselSettings;
+    };
+};
+export declare type ComponentDataPairType = TextComponentDataType | ImageComponentDataType | TwitterComponentDataType | RichTextComponentDataType | ButtonComponentDataType | DividerComponentDataType | YoutubeComponentDataType | AccordionComponentDataType | ContentsCarouselDataType | ImgCarouselDataType;
 export declare type ContentType = {
     data: ComponentDataPairType;
     link?: LinkContentType;

package/dist/src/sub/DynamicLayout/sections/CustomSection/types.js

@@ -9,5 +9,8 @@ exports.ComponentNames = {
     DIVIDER: 'DIVIDER',
     YOUTUBE: 'YOUTUBE',
     TWITTER: 'TWITTER',
-    INSTAGRAM: 'INSTAGRAM'
+    INSTAGRAM: 'INSTAGRAM',
+    ACCORDION: 'ACCORDION',
+    CONTENTS_CAROUSEL: 'CONTENTS_CAROUSEL',
+    IMAGE_CAROUSEL: 'IMAGE_CAROUSEL'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -27,6 +27,7 @@
     "react-i18next": "^11.12.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "reactstrap": "^9.2.0",
     "smoothscroll-polyfill": "^0.4.4",
     "styled-components": "^5.2.1",
     "swiper": "^8.4.5",

package/release-note.md

@@ -1,6 +1,7 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.2.0]
+## [v0.2.2]
 ## 기준 pds-dev-kit-web 버전 @2.0.14
 ### sub
-* DynamicLayout
-    * custom section 추가
+* DynamicLayout - custom section
+    * ImageCarousel 추가
+    * ContentsCarousel 추가