pds-dev-kit-web-test 2.2.88 → 2.2.90

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

@@ -358,20 +358,8 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         var viewport = width + ((_a = padding === null || padding === void 0 ? void 0 : padding.left) !== null && _a !== void 0 ? _a : 0) + ((_b = padding === null || padding === void 0 ? void 0 : padding.right) !== null && _b !== void 0 ? _b : 0);
         if (device === 'MOBILE') {
             var cellWidth_1 = viewport / MOBILE_GRID_COLS;
-            // const cellHeight = cellWidth * 0.56;
-            // const baseViewPort = 375;
-            // const gap = baseViewPort - viewport;
-            // // NOTE: 임시
-            // if (viewport > 480) {
-            //   setBaseFontSize(22);
-            // }
-            // if (gap > 0) {
-            //   const magicNumber = (gap / 22) ** 1.1;
-            //   const resSize = 16 - magicNumber;
-            //   console.log(resSize);
-            //   console.log(cellHeight / 1.641);
-            //   setBaseFontSize(resSize);
-            // }
+            var responsiveBaseFontSize = (viewport / 23.4).toFixed(3);
+            setBaseFontSize(Number(responsiveBaseFontSize));
             setRowHeight(cellWidth_1 * 0.56);
             return;
         }
@@ -455,7 +443,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                                             return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-box-in-group", onClick: function (e) {
                                                     e.stopPropagation();
                                                     clickOneCBInBulk(matchedCB.id, array);
-                                                } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: cbCopy, device: device, index: index }) }) }), matchedCB.id));
+                                                } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: cbCopy, device: device, index: index, rootBaseFontSize: baseFontSize }) }) }), matchedCB.id));
                                         }) })) }), each.i));
                             }
                             if (!matchedCB) {
@@ -471,7 +459,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                                         e.stopPropagation();
                                         e.preventDefault();
                                         onContextMenuCB(matchedCB.id, e);
-                                    } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { index: index, cbProps: matchedCB, device: device }) }) })) }), each.i));
+                                    } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { index: index, cbProps: matchedCB, device: device, rootBaseFontSize: baseFontSize }) }) })) }), each.i));
                         }) })) })) })) }) }));
 });
 function keepSimilarOrderToPreventRerender(arr) {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher.d.ts

@@ -5,6 +5,7 @@ type Props = {
     cbProps: ComponentBlock;
     device: Device;
     index: number;
+    rootBaseFontSize: number;
 };
-export default function ComponentBlockMatcher({ cbProps, device, index }: Props): JSX.Element;
+export default function ComponentBlockMatcher({ cbProps, device, index, rootBaseFontSize }: Props): JSX.Element;
 export {};

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher.js

@@ -27,14 +27,14 @@ var Text_1 = __importDefault(require("./componentBlocks/Text/Text"));
 var Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
 var Youtube_1 = require("./componentBlocks/Youtube");
 function ComponentBlockMatcher(_a) {
-    var cbProps = _a.cbProps, device = _a.device, index = _a.index;
+    var cbProps = _a.cbProps, device = _a.device, index = _a.index, rootBaseFontSize = _a.rootBaseFontSize;
     var componentBlockCode = cbProps.componentBlockCode, data = cbProps.jsonProperties.data;
     var propsWithValue = device === 'MOBILE' ? (0, newUtils_1.replaceUndefinedValues)(data) : data;
     switch (componentBlockCode) {
         case types_1.CB_ALL_CODES.CB_BTN:
             return (0, jsx_runtime_1.jsx)(Button_1.default, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_TEXT:
-            return (0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, propsWithValue, { index: index }));
+            return ((0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, propsWithValue, { index: index, rootBaseFontSize: rootBaseFontSize })));
         case types_1.CB_ALL_CODES.CB_RICHTEXT:
             return (0, jsx_runtime_1.jsx)(RichText_1.RichText, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_DIVIDER:

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import type { CB_TEXT_PROPERTIES_TYPE, IndexForIntersection } from '../../../../util/types';
-type Props = CB_TEXT_PROPERTIES_TYPE & IndexForIntersection;
+type Props = CB_TEXT_PROPERTIES_TYPE & IndexForIntersection & {
+    rootBaseFontSize: number;
+};
 declare function Text(props: Props): JSX.Element;
 export default Text;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js

@@ -36,7 +36,7 @@ var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 var useMaxFontAdjustment_1 = __importDefault(require("./useMaxFontAdjustment"));
 function Text(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    var index = props.index, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var index = props.index, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, rootBaseFontSize = props.rootBaseFontSize;
     var _c = (0, useCLINK_1.default)({
         src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
@@ -63,10 +63,8 @@ function Text(props) {
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
     var textBoxRef = (0, react_1.useRef)(null);
-    var baseFontSize = (0, useMaxFontAdjustment_1.default)(textBoxRef, textStyle.fontSize, mode);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, style: {
-                    fontSize: "".concat(baseFontSize, "px")
-                } }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ ref: textBoxRef, className: "cb-layout-box cb-text-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), effectCssProperties), layoutStyle), { cursor: CLINKCursor, paddingTop: 0, paddingBottom: 0, paddingLeft: 0, paddingRight: 0 }), hoverStyle: __assign(__assign({}, textHoverStyle), propsHoverStyle), onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_TextContent, __assign({ className: "cb-text-content", style: {
+    var baseFontSize = (0, useMaxFontAdjustment_1.default)(textBoxRef, textStyle.fontSize, mode, device, rootBaseFontSize);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, style: { fontSize: rootBaseFontSize < 16 ? "".concat(baseFontSize, "px") : "".concat(rootBaseFontSize, "px") } }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ ref: textBoxRef, className: "cb-layout-box cb-text-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), effectCssProperties), layoutStyle), { cursor: CLINKCursor, paddingTop: 0, paddingBottom: 0, paddingLeft: 0, paddingRight: 0 }), hoverStyle: __assign(__assign({}, textHoverStyle), propsHoverStyle), onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_TextContent, __assign({ className: "cb-text-content", style: {
                             whiteSpace: 'pre-wrap',
                             wordBreak: 'break-word',
                             height: 'fit-content',

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/useMaxFontAdjustment.d.ts

@@ -1,4 +1,5 @@
 import { RefObject } from 'react';
+import type { Device } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
 import type { DynamicLayoutProps } from '../../../../../../../DynamicLayout/types';
-declare const useMaxFontAdjustment: (ref: RefObject<HTMLDivElement>, defaultSize: string, mode: DynamicLayoutProps['mode']) => number;
+declare const useMaxFontAdjustment: (ref: RefObject<HTMLDivElement>, cbFontSize: string, mode: DynamicLayoutProps['mode'], device: Device, rootBaseFontSize: number) => number;
 export default useMaxFontAdjustment;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/useMaxFontAdjustment.js

@@ -2,43 +2,58 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 var DEFAULT_BASE_FONT = 16;
-var useMaxFontAdjustment = function (ref, defaultSize, mode) {
+var useMaxFontAdjustment = function (ref, cbFontSize, mode, device, rootBaseFontSize) {
     var _a = (0, react_1.useState)(DEFAULT_BASE_FONT), fontSize = _a[0], setFontSize = _a[1];
     var ogRef = (0, react_1.useRef)(0);
     (0, react_1.useEffect)(function () {
+        if (device === 'DESKTOP') {
+            return;
+        }
         if (mode !== 'PREVIEW') {
             return;
         }
-        if (!ref.current)
+        if (!ref.current) {
+            return;
+        }
+        if (rootBaseFontSize >= 16) {
             return;
-        if (fontSize === 16) {
-            var boxHeight = ref.current.clientHeight;
-            var contentHeight = ref.current.children[0].clientHeight;
-            var percent = (contentHeight / boxHeight) * 100;
-            ogRef.current = percent;
         }
         var resizeObserver = new ResizeObserver(function (callback) {
             var object = callback[0];
             var height = object.target.clientHeight;
             var contentHeight = object.target.children[0].clientHeight;
+            var minFontSize = parseEmToNumber(cbFontSize) * 0.6;
+            if (fontSize === 16) {
+                var percent = (contentHeight / contentHeight) * 100;
+                ogRef.current = percent;
+            }
             var p = (contentHeight / height) * 100;
             var isOverflow = contentHeight > height;
             var hasContentGap = p > ogRef.current;
+            var isNextMin = fontSize <= minFontSize;
+            console.log({
+                contentHeight: contentHeight,
+                height: height,
+                ogPercent: ogRef.current,
+                myP: p
+            });
+            if (isNextMin) {
+                return;
+            }
             if (isOverflow || hasContentGap) {
                 setFontSize(function (prev) { return Number((prev - 0.3).toFixed(3)); });
-                // setFontSize((prev) => {
-                //   const value = parseEmToNumber(prev);
-                //   if (value === null) {
-                //     return prev;
-                //   }
-                //   return `${(value - 0.3).toFixed(3)}em`;
-                // });
             }
         });
         resizeObserver.observe(ref.current);
-        return function () { return resizeObserver.disconnect(); }; // clean u
-    }, [ref, fontSize, mode]);
-    console.log({ defaultSize: defaultSize, fontSize: fontSize });
+        return function () {
+            resizeObserver.disconnect();
+        };
+    }, [fontSize, mode, device, rootBaseFontSize]);
+    (0, react_1.useEffect)(function () {
+        return function () {
+            ogRef.current = 0;
+        };
+    }, []);
     return fontSize;
 };
 exports.default = useMaxFontAdjustment;
@@ -46,7 +61,7 @@ function parseEmToNumber(value) {
     var numericPart = value.replace('em', '').trim();
     var result = parseFloat(numericPart);
     if (isNaN(result)) {
-        return null;
+        return 0;
     }
     return result;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.2.88",
+  "version": "2.2.90",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/dist/src/sub/DynamicLayout/flexGridLayout/FlexGridLayout.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function FlexGridLayout(): JSX.Element;
-export default FlexGridLayout;

package/dist/src/sub/DynamicLayout/flexGridLayout/FlexGridLayout.js

@@ -1,18 +0,0 @@
-"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 __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 styled_components_1 = __importDefault(require("styled-components"));
-function FlexGridLayout() {
-    return (0, jsx_runtime_1.jsx)(S_Layout, { children: "FlexGridLayout" });
-}
-var S_Layout = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: white;\n"], ["\n  background-color: white;\n"])));
-exports.default = FlexGridLayout;
-var templateObject_1;