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

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropShadow.d.ts

@@ -0,0 +1,39 @@
+import type { Device, ENUM_STRING, NUMBER_INTEGER, STRING_8DIGIT_HEX, StyleAndHoverStyle } from '../types';
+import type { CB_STYLE_PROP_KEYS } from './types';
+export declare type NAMED_CB_STYLE_SHADOW_PROPS = {
+    name: CB_STYLE_PROP_KEYS.CB_STYLE_PROP_SHADOW;
+    specs: CB_STYLE_PROP_SHADOW_SPECS;
+};
+export default function parseStylePropShadow(namedProps: NAMED_CB_STYLE_SHADOW_PROPS, device: Device): StyleAndHoverStyle;
+export declare type CB_STYLE_PROP_SHADOW_SPECS_BASE = {
+    CB_STYLE_PROP_SHADOW_SPEC_TYPE: ENUM_STRING;
+    CB_STYLE_PROP_SHADOW_SPEC_COLOR: STRING_8DIGIT_HEX;
+    CB_STYLE_PROP_SHADOW_SPEC_X: NUMBER_INTEGER;
+    CB_STYLE_PROP_SHADOW_SPEC_Y: NUMBER_INTEGER;
+    CB_STYLE_PROP_SHADOW_SPEC_BLUR: NUMBER_INTEGER;
+    CB_STYLE_PROP_SHADOW_SPEC_SPREAD: NUMBER_INTEGER;
+    CB_STYLE_PROP_SHADOW_SPEC_OPACITY: NUMBER_INTEGER;
+};
+export declare type CB_STYLE_PROP_SHADOW_SPECS = CB_STYLE_PROP_SHADOW_SPECS_BASE & {
+    'CB_STYLE_PROP_SHADOW_SPEC_TYPE:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE:HOVER': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_SHADOW_SPEC_COLOR:HOVER': STRING_8DIGIT_HEX;
+    'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE': STRING_8DIGIT_HEX | undefined;
+    'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE:HOVER': STRING_8DIGIT_HEX | undefined;
+    'CB_STYLE_PROP_SHADOW_SPEC_X:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_SHADOW_SPEC_Y:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_SHADOW_SPEC_BLUR:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+};

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropShadow.js

@@ -0,0 +1,46 @@
+"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 AVAILABLE_SPECS = [
+    'CB_STYLE_PROP_SHADOW_SPEC_TYPE',
+    'CB_STYLE_PROP_SHADOW_SPEC_COLOR',
+    'CB_STYLE_PROP_SHADOW_SPEC_X',
+    'CB_STYLE_PROP_SHADOW_SPEC_Y',
+    'CB_STYLE_PROP_SHADOW_SPEC_BLUR',
+    'CB_STYLE_PROP_SHADOW_SPEC_SPREAD',
+    'CB_STYLE_PROP_SHADOW_SPEC_OPACITY'
+];
+function parseStylePropShadow(namedProps, device) {
+    var specs = namedProps.specs;
+    var valueSet = AVAILABLE_SPECS.reduce(function (acc, cur) {
+        var _a, _b;
+        var baseKey = device === 'DESKTOP' ? cur : cur + ":MOBILE";
+        var value = specs[baseKey];
+        var hoverValue = specs[baseKey + ":HOVER"];
+        return {
+            normal: __assign(__assign({}, acc.normal), (_a = {}, _a[baseKey] = value, _a)),
+            hover: __assign(__assign({}, acc.hover), (_b = {}, _b[baseKey] = hoverValue, _b))
+        };
+    }, {
+        normal: {},
+        hover: {}
+    });
+    return {
+        style: { boxShadow: valueGenerator(valueSet.normal) },
+        hoverStyle: { boxShadow: valueGenerator(valueSet.hover) }
+    };
+}
+exports.default = parseStylePropShadow;
+function valueGenerator(valueSet) {
+    return (valueSet.CB_STYLE_PROP_SHADOW_SPEC_TYPE === 'inset' ? 'inset' : '') + " " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_Y + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_X + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_BLUR + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_SPREAD + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_COLOR;
+}

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropTextSpec.d.ts

@@ -0,0 +1,39 @@
+import type { Device, ENUM_STRING, NUMBER_INTEGER, STRING_8DIGIT_HEX, StyleAndHoverStyle } from '../types';
+import type { CB_STYLE_PROP_KEYS } from './types';
+export declare type NAMED_CB_STYLE_TEXT_PROPS = {
+    name: CB_STYLE_PROP_KEYS.CB_STYLE_PROP_TEXT;
+    specs: CB_STYLE_PROP_TEXT_SPECS;
+};
+export default function parseStylePropTextSpec(namedProps: NAMED_CB_STYLE_TEXT_PROPS, device: Device): StyleAndHoverStyle;
+export declare type CB_STYLE_PROP_TEXT_SPECS_BASE = {
+    CB_STYLE_PROP_TEXT_SPEC_FONT: ENUM_STRING;
+    CB_STYLE_PROP_TEXT_SPEC_WEIGHT: NUMBER_INTEGER;
+    CB_STYLE_PROP_TEXT_SPEC_SIZE: NUMBER_INTEGER;
+    CB_STYLE_PROP_TEXT_SPEC_FITTOSIZE: boolean;
+    CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT: NUMBER_INTEGER;
+    CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING: NUMBER_INTEGER;
+    CB_STYLE_PROP_TEXT_SPEC_COLOR: STRING_8DIGIT_HEX;
+};
+export declare type CB_STYLE_PROP_TEXT_SPECS = CB_STYLE_PROP_TEXT_SPECS_BASE & {
+    'CB_STYLE_PROP_TEXT_SPEC_FONT:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_TEXT_SPEC_FONT:MOBILE': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_FONT:MOBILE:HOVER': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_SIZE:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_FITTOSIZE:HOVER': boolean;
+    'CB_STYLE_PROP_TEXT_SPEC_FITTOSIZE:MOBILE': boolean | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_FITTOSIZE:MOBILE:HOVER': boolean | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_COLOR:HOVER': STRING_8DIGIT_HEX;
+    'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE': STRING_8DIGIT_HEX | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE:HOVER': STRING_8DIGIT_HEX | undefined;
+};

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropTextSpec.js

@@ -0,0 +1,80 @@
+"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 AVAILABLE_SPECS = [
+    'CB_STYLE_PROP_TEXT_SPEC_COLOR',
+    'CB_STYLE_PROP_TEXT_SPEC_FITTOSIZE',
+    'CB_STYLE_PROP_TEXT_SPEC_FONT',
+    'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING',
+    'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT',
+    'CB_STYLE_PROP_TEXT_SPEC_SIZE',
+    'CB_STYLE_PROP_TEXT_SPEC_WEIGHT'
+];
+function parseStylePropTextSpec(namedProps, device) {
+    var specs = namedProps.specs;
+    return AVAILABLE_SPECS.reduce(function (acc, cur) {
+        var _a, _b;
+        var baseKey = device === 'DESKTOP' ? cur : cur + ":MOBILE";
+        var cssPropertyKey = getParsedKey(baseKey);
+        var value = specs[baseKey];
+        var hoverValue = specs[baseKey + ":HOVER"];
+        return {
+            style: __assign(__assign({}, acc.style), (_a = {}, _a[cssPropertyKey] = value, _a)),
+            hoverStyle: __assign(__assign({}, acc.hoverStyle), (_b = {}, _b[cssPropertyKey] = hoverValue, _b))
+        };
+    }, {
+        style: {},
+        hoverStyle: {}
+    });
+}
+exports.default = parseStylePropTextSpec;
+function getParsedKey(key) {
+    switch (key) {
+        case "CB_STYLE_PROP_TEXT_SPEC_COLOR":
+        case "CB_STYLE_PROP_TEXT_SPEC_COLOR:HOVER":
+        case "CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE":
+        case "CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE:HOVER":
+            return 'color';
+        case "CB_STYLE_PROP_TEXT_SPEC_FITTOSIZE":
+        case "CB_STYLE_PROP_TEXT_SPEC_FITTOSIZE:HOVER":
+        case "CB_STYLE_PROP_TEXT_SPEC_FITTOSIZE:MOBILE":
+        case "CB_STYLE_PROP_TEXT_SPEC_FITTOSIZE:MOBILE:HOVER":
+            // NOTE: 뭐지?
+            return 'unknown';
+        case "CB_STYLE_PROP_TEXT_SPEC_FONT":
+        case "CB_STYLE_PROP_TEXT_SPEC_FONT:HOVER":
+        case "CB_STYLE_PROP_TEXT_SPEC_FONT:MOBILE":
+        case "CB_STYLE_PROP_TEXT_SPEC_FONT:MOBILE:HOVER":
+            return 'fontFamily';
+        case "CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING":
+        case "CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:HOVER":
+        case "CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE":
+        case "CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE:HOVER":
+            return 'letterSpacing';
+        case "CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT":
+        case "CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:HOVER":
+        case "CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE":
+        case "CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE:HOVER":
+            return 'lineHeight';
+        case "CB_STYLE_PROP_TEXT_SPEC_SIZE":
+        case "CB_STYLE_PROP_TEXT_SPEC_SIZE:HOVER":
+        case "CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE":
+        case "CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE:HOVER":
+            return 'fontSize';
+        case "CB_STYLE_PROP_TEXT_SPEC_WEIGHT":
+        case "CB_STYLE_PROP_TEXT_SPEC_WEIGHT:HOVER":
+        case "CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE":
+        case "CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE:HOVER":
+            return 'fontWeight';
+    }
+}

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

@@ -0,0 +1,22 @@
+import type { NAMED_CB_STYLE_BGCOLOR_PROPS } from './parseStylePropBgColor';
+import type { NAMED_CB_STYLE_BGIMAGE_PROPS } from './parseStylePropBgImage';
+import type { NAMED_CB_STYLE_BGOVERLAY_PROPS } from './parseStylePropBgOverlay';
+import type { NAMED_CB_STYLE_BORDER_PROPS } from './parseStylePropBorder';
+import type { NAMED_CB_STYLE_DIVIDER_PROPS } from './parseStylePropDivider';
+import type { NAMED_CB_STYLE_IMAGE_PROPS } from './parseStylePropImage';
+import type { NAMED_CB_STYLE_OPACITY_PROPS } from './parseStylePropOpacity';
+import type { NAMED_CB_STYLE_SHADOW_PROPS } from './parseStylePropShadow';
+import type { NAMED_CB_STYLE_TEXT_PROPS } from './parseStylePropTextSpec';
+export declare enum CB_STYLE_PROP_KEYS {
+    CB_STYLE_PROP_TEXT = "CB_STYLE_PROP_TEXT",
+    CB_STYLE_PROP_OPACITY = "CB_STYLE_PROP_OPACITY",
+    CB_STYLE_PROP_DIVIDER = "CB_STYLE_PROP_DIVIDER",
+    CB_STYLE_PROP_SHADOW = "CB_STYLE_PROP_SHADOW",
+    CB_STYLE_PROP_BORDER = "CB_STYLE_PROP_BORDER",
+    CB_STYLE_PROP_IMAGE = "CB_STYLE_PROP_IMAGE",
+    CB_STYLE_PROP_BTNCOLOR = "CB_STYLE_PROP_BTNCOLOR",
+    CB_STYLE_PROP_BGCOLOR = "CB_STYLE_PROP_BGCOLOR",
+    CB_STYLE_PROP_BGMEDIA = "CB_STYLE_PROP_BGMEDIA",
+    CB_STYLE_PROP_BGOVERLAY = "CB_STYLE_PROP_BGOVERLAY"
+}
+export declare type NamedStylePropType = NAMED_CB_STYLE_TEXT_PROPS | NAMED_CB_STYLE_OPACITY_PROPS | NAMED_CB_STYLE_DIVIDER_PROPS | NAMED_CB_STYLE_SHADOW_PROPS | NAMED_CB_STYLE_BORDER_PROPS | NAMED_CB_STYLE_IMAGE_PROPS | NAMED_CB_STYLE_BGCOLOR_PROPS | NAMED_CB_STYLE_BGIMAGE_PROPS | NAMED_CB_STYLE_BGOVERLAY_PROPS;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CB_STYLE_PROP_KEYS = void 0;
+var CB_STYLE_PROP_KEYS;
+(function (CB_STYLE_PROP_KEYS) {
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_TEXT"] = "CB_STYLE_PROP_TEXT";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_OPACITY"] = "CB_STYLE_PROP_OPACITY";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_DIVIDER"] = "CB_STYLE_PROP_DIVIDER";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_SHADOW"] = "CB_STYLE_PROP_SHADOW";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_BORDER"] = "CB_STYLE_PROP_BORDER";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_IMAGE"] = "CB_STYLE_PROP_IMAGE";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_BTNCOLOR"] = "CB_STYLE_PROP_BTNCOLOR";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_BGCOLOR"] = "CB_STYLE_PROP_BGCOLOR";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_BGMEDIA"] = "CB_STYLE_PROP_BGMEDIA";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_BGOVERLAY"] = "CB_STYLE_PROP_BGOVERLAY";
+})(CB_STYLE_PROP_KEYS = exports.CB_STYLE_PROP_KEYS || (exports.CB_STYLE_PROP_KEYS = {}));

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

@@ -0,0 +1,134 @@
+import type { CB_BTNTEXT_STYLE_PROPS, CB_STYLE_PROP_BTNCOLOR_SPECS } from '../components/ComponentBlock/componentBlocks/Button/btnTypes';
+import type { CB_TEXT_STYLE_PROPS } from '../components/ComponentBlock/componentBlocks/Text';
+import type { CB_TWITTER_STYLE_PROPS } from '../components/ComponentBlock/componentBlocks/Twitter';
+import type { CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_IMAGE, CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TWITTER } from '../components/ComponentBlock/componentBlocks/types';
+import type { CB_CONTENT_PROP_YOUTUBE_TYPE, CB_STYLE_PROP_BGCOLOR_SPECS } from '../components/ComponentBlock/componentBlocks/Youtube/types';
+import type { CB_CONTENT_PROP_VISIBILITY_SPECS } from './contentPropParsers/parseContentVisibility';
+import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './effectPropParsers/parseEffectPropEntAnim';
+import type { CB_LAYOUT_PROP_ARRANGE_SPECS } from './layoutPropParsers/parseLayoutPropArrange';
+import type { CB_LAYOUT_PROP_PADDING_SPECS } from './layoutPropParsers/parseLayoutPropPadding';
+import type { NamedLayoutPropType } from './layoutPropParsers/types';
+import type { CB_STYLE_PROP_BORDER_SPECS } from './stylePropParsers/parseStylePropBorder';
+import type { CB_STYLE_PROP_DIVIDER_SPECS } from './stylePropParsers/parseStylePropDivider';
+import type { CB_STYLE_PROP_IMAGE_SPECS } from './stylePropParsers/parseStylePropImage';
+import type { CB_STYLE_PROP_TEXT_OPACITY_SPECS } from './stylePropParsers/parseStylePropOpacity';
+import type { CB_STYLE_PROP_SHADOW_SPECS } from './stylePropParsers/parseStylePropShadow';
+import type { NamedStylePropType } from './stylePropParsers/types';
+import type { CSSProperties } from 'react';
+export declare type STRING_PLAIN = string;
+export declare type ENUM_STRING = string;
+export declare type NUMBER_INTEGER = number;
+export declare type STRING_8DIGIT_HEX = string;
+export declare type CB_GENERAL_PROPERTIES_TYPE = {
+    CB_PLACEMENT_PROP_PLACEMENT: CB_PLACEMENT_PROP_SPECS;
+    CB_CONTENT_PROP_HOVER: {
+        CB_CONTENT_PROP_HOVER_SPEC_MUSE: boolean;
+    };
+};
+export declare type CB_TEXT_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_STYLE_PROP_TEXT: CB_TEXT_STYLE_PROPS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_CONTENT_PROP_TEXT: CB_CONTENT_PROP_TEXT;
+    CB_CONTENT_PROP_CLINK: CB_CONTENT_PROP_CLINK;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export declare type CB_BTN_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_TEXT: CB_CONTENT_PROP_TEXT;
+    CB_CONTENT_PROP_CLINK: CB_CONTENT_PROP_CLINK;
+    CB_STYLE_PROP_BTNTEXT: CB_BTNTEXT_STYLE_PROPS;
+    CB_STYLE_PROP_BORDER: CB_STYLE_PROP_BORDER_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+    CB_STYLE_PROP_BTNCOLOR: CB_STYLE_PROP_BTNCOLOR_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+};
+export declare type CB_IMG_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_CLINK: CB_CONTENT_PROP_CLINK;
+    CB_CONTENT_PROP_IMAGE: CB_CONTENT_PROP_IMAGE;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_STYLE_PROP_BORDER: CB_STYLE_PROP_BORDER_SPECS;
+    CB_STYLE_PROP_IMAGE: CB_STYLE_PROP_IMAGE_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export declare type CB_TWITTER_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_TWITTER: CB_CONTENT_PROP_TWITTER;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_STYLE_PROP_TWITTER: CB_TWITTER_STYLE_PROPS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export declare type CB_RICHTEXT_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_TEXTEDIT: {
+        CB_CONTENT_PROP_TEXTEDIT_SPEC_EDITOR: string;
+    };
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_STYLE_PROP_BORDER: CB_STYLE_PROP_BORDER_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+};
+export declare type CB_DIVIDER_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_STYLE_PROP_DIVIDER: CB_STYLE_PROP_DIVIDER_SPECS;
+};
+export declare type CB_YOUTUBE_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_CONTENT_PROP_YOUTUBE: CB_CONTENT_PROP_YOUTUBE_TYPE;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export declare type StyleType = {
+    style: CSSProperties;
+};
+export declare type StyleAndHoverStyle = StyleType & {
+    hoverStyle: CSSProperties;
+};
+export declare type OverlayStyleAndOverlayHoverStyle = {
+    overlayStyle: CSSProperties;
+    overlayHoverStyle: CSSProperties;
+};
+export declare type Device = 'DESKTOP' | 'MOBILE';
+export declare type DefaultBrightTheme = 'LIGHT' | 'DARK';
+export declare type ParserResult = {
+    style: CSSProperties;
+    hoverStyle: CSSProperties;
+    layout: CSSProperties;
+    effect: CSSProperties;
+    content: Record<string, unknown>;
+};
+export declare type NamedPropAllTypes = NamedStylePropType | NamedLayoutPropType;
+export declare type CB_PLACEMENT_PROP_SPECS = {
+    CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': number;
+    CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': number;
+    CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': number;
+    CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': number;
+    CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': number;
+};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -6,3 +6,4 @@ export { IntroSection } from './IntroSection';
 export { EditTypeMembershipSection } from './MembershipSection';
 export { NormalTypeMembershipSection } from './MembershipSection';
 export { FullscreenIframeSection } from './FullscreenIframeSection';
+export { CustomSection } from './CustomSection';

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FullscreenIframeSection = exports.NormalTypeMembershipSection = exports.EditTypeMembershipSection = exports.IntroSection = exports.InfoBoxSection = exports.FooterSection = exports.ContentsSection = exports.ContentsCarouselSection = void 0;
+exports.CustomSection = exports.FullscreenIframeSection = exports.NormalTypeMembershipSection = exports.EditTypeMembershipSection = exports.IntroSection = exports.InfoBoxSection = exports.FooterSection = exports.ContentsSection = exports.ContentsCarouselSection = void 0;
 var ContentsCarouselSection_1 = require("./ContentsCarouselSection");
 Object.defineProperty(exports, "ContentsCarouselSection", { enumerable: true, get: function () { return ContentsCarouselSection_1.ContentsCarouselSection; } });
 var ContentsSection_1 = require("./ContentsSection");
@@ -17,3 +17,5 @@ var MembershipSection_2 = require("./MembershipSection");
 Object.defineProperty(exports, "NormalTypeMembershipSection", { enumerable: true, get: function () { return MembershipSection_2.NormalTypeMembershipSection; } });
 var FullscreenIframeSection_1 = require("./FullscreenIframeSection");
 Object.defineProperty(exports, "FullscreenIframeSection", { enumerable: true, get: function () { return FullscreenIframeSection_1.FullscreenIframeSection; } });
+var CustomSection_1 = require("./CustomSection");
+Object.defineProperty(exports, "CustomSection", { enumerable: true, get: function () { return CustomSection_1.CustomSection; } });

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

@@ -1,8 +1,14 @@
 /// <reference types="react" />
 import type { TypeOfSectionAction } from './sectionActionTypes';
+import type { ComponentBlock } from './sections/CustomSection/types';
+import type { CB_CONTENT_PROP_VISIBILITY_SPECS } from './sections/CustomSection/util/contentPropParsers/parseContentVisibility';
+import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './sections/CustomSection/util/effectPropParsers/parseEffectPropEntAnim';
+import type { CB_LAYOUT_PROP_PADDING_SPECS } from './sections/CustomSection/util/layoutPropParsers/parseLayoutPropPadding';
+import type { CB_STYLE_PROP_BGCOLOR_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgColor';
+import type { CB_STYLE_PROP_BGOVERLAY_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgOverlay';
 export { TypeOfSectionAction };
-export declare type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX' | 'EXP_IFRAME' | 'PRG_MEMBERSHIP_DISPLAY' | 'CUSTOM_SECTION';
-export declare type TypeofSectionTemplate = 'BASE_INTRO_A' | 'BASE_INTRO_B' | 'BASE_INTRO_C' | 'BASE_INTRO_D' | 'BASE_CONTENTS_A' | 'BASE_CONTENTS_B' | 'BASE_CONTENTS_CAROUSEL_A' | 'BASE_CONTENTS_CAROUSEL_B' | 'BASE_FOOTER_A' | 'BASE_FOOTER_B' | 'BASE_INFO_BOX_A' | 'EXP_IFRAME_A' | 'PRG_MEMBERSHIP_DISPLAY_A' | 'PRG_MEMBERSHIP_DISPLAY_B' | 'CUSTOM_SECTION_A';
+export declare type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX' | 'EXP_IFRAME' | 'PRG_MEMBERSHIP_DISPLAY' | 'CUSTOM';
+export declare type TypeofSectionTemplate = 'BASE_INTRO_A' | 'BASE_INTRO_B' | 'BASE_INTRO_C' | 'BASE_INTRO_D' | 'BASE_CONTENTS_A' | 'BASE_CONTENTS_B' | 'BASE_CONTENTS_CAROUSEL_A' | 'BASE_CONTENTS_CAROUSEL_B' | 'BASE_FOOTER_A' | 'BASE_FOOTER_B' | 'BASE_INFO_BOX_A' | 'EXP_IFRAME_A' | 'PRG_MEMBERSHIP_DISPLAY_A' | 'PRG_MEMBERSHIP_DISPLAY_B' | undefined;
 export declare type TypeOfSectionContentMediaType = 'IMAGE' | 'YOUTUBE';
 export declare type TypeOfSectionLinkType = 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE';
 export declare type TypeOfSectionType = 'PROGRAMMED' | 'DESIGNED' | 'CUSTOM';
@@ -21,6 +27,7 @@ declare type KeyOfSectionStyles = 'title_color_in_hex' | 'description_color_in_h
 declare type KeyOfItemProperties = 'title' | 'description' | 'body' | 'logo_image_src' | 'image_src' | 'link_type' | 'link_src' | 'button_label';
 export interface ISection {
     id: number;
+    administrativeTitle?: string;
     display: boolean;
     order: number;
     manifest: {
@@ -28,7 +35,7 @@ export interface ISection {
         availableProperties: Array<KeyOfSectionProperties>;
         availableStyles: Array<KeyOfSectionStyles>;
         availableTemplates: Array<TypeofSectionTemplate>;
-    };
+    } | Record<string, never>;
     template: TypeofSectionTemplate;
     properties: ISectionProperties;
     styles: ISectionStyles;
@@ -37,7 +44,6 @@ export interface ISection {
     updatedAt: string;
     type: TypeOfSectionType;
     program?: 'MEMBERSHIP_DISPLAY';
-    componentBlocks?: any[];
     programData?: {
         mdid: string;
         preview: {
@@ -50,6 +56,8 @@ export interface ISection {
             };
         };
     };
+    componentBlocks?: ComponentBlock[];
+    jsonProperties?: ISectionJsonProperties;
 }
 export interface SubscriptionProductInList {
     id: number;
@@ -282,3 +290,61 @@ export declare type IMembershipDisplay = {
     isDefault: boolean;
     connectedMemberships: IConnectedMembership[];
 };
+export declare type ISectionJsonProperties = {
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_PLACEMENT_PROP_SECTION: {
+        CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH: boolean;
+        'CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH:MOBILE': boolean | undefined;
+        CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT: number;
+        'CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT:MOBILE': number | undefined;
+        CB_PLACEMENT_PROP_SECTION_SPEC_ROWS: number;
+        'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE': number | undefined;
+        CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH: number;
+        'CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH:MOBILE': number | undefined;
+    };
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_STYLE_PROP_BGMEDIA: CB_STYLE_PROP_BGMEDIA_SPECS;
+    CB_STYLE_PROP_BGOVERLAY: CB_STYLE_PROP_BGOVERLAY_SPECS;
+};
+export declare type CB_STYLE_PROP_BGMEDIA_SPECS = {
+    CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME: number;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:HOVER': number;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:MOBILE': number | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:MOBILE:HOVER': number | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT: string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:HOVER': string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE': string | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE:HOVER': string | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR: string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR:HOVER': string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR:MOBILE': string | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR:MOBILE:HOVER': string | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION: string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:HOVER': string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE': string | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE:HOVER': string | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_MPLAY: boolean;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_MPLAY:MOBILE': boolean | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY: boolean;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:HOVER': boolean;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:MOBILE': boolean | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:MOBILE:HOVER': boolean | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME: number;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:HOVER': number;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:MOBILE': number | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:MOBILE:HOVER': number | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL: boolean;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:HOVER': boolean;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:MOBILE': boolean | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:MOBILE:HOVER': boolean | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_TYPE: string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:HOVER': string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE': string | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE:HOVER': string | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_YSRC: string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:HOVER': string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:MOBILE': string | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:MOBILE:HOVER': string | undefined;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -22,12 +22,11 @@
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
-    "react-grid-layout": "^1.3.4",
+    "publ-echo": "^0.0.20",
     "react-hook-form": "^7.28.1",
     "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",
@@ -86,7 +85,6 @@
     "@storybook/react": "^6.3.12",
     "@types/lodash": "^4.14.175",
     "@types/node": "^16.10.2",
-    "@types/react-grid-layout": "^1.3.2",
     "@types/react-router-dom": "^5.3.3",
     "@types/smoothscroll-polyfill": "^0.3.1",
     "@types/styled-components": "^5.1.9",

package/release-note.md

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

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

@@ -1,13 +0,0 @@
-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;