pds-dev-kit-web-test 0.2.45 → 0.2.46

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

@@ -2810,7 +2810,7 @@ var realMock = [
                             CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
                         },
                         CB_CONTENT_PROP_TEXT: {
-                            CB_CONTENT_PROP_TEXT_SPEC_TEXT: 'New Text'
+                            CB_CONTENT_PROP_TEXT_SPEC_TEXT: 'New Text2222'
                         },
                         CB_CONTENT_PROP_VISIBILITY: {
                             CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,

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

@@ -98,7 +98,7 @@ export declare const pages0803PreviewSections: {
                     'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE': null;
                     'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE:HOVER': null;
                     CB_STYLE_PROP_TEXT_SPEC_TYPEFACE: string;
-                    'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER': null;
+                    'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER': string;
                     'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE': null;
                     'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE:HOVER': null;
                     CB_STYLE_PROP_TEXT_SPEC_VERTICAL: string;

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

@@ -26,7 +26,7 @@ exports.pages0803PreviewSections = [
                             CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
                         },
                         CB_CONTENT_PROP_TEXT: {
-                            CB_CONTENT_PROP_TEXT_SPEC_TEXT: 'New Text'
+                            CB_CONTENT_PROP_TEXT_SPEC_TEXT: 'New Text3333'
                         },
                         CB_CONTENT_PROP_VISIBILITY: {
                             CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
@@ -102,8 +102,8 @@ exports.pages0803PreviewSections = [
                             'CB_STYLE_PROP_TEXT_SPEC_SIZE:HOVER': null,
                             'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE': null,
                             'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE:HOVER': null,
-                            CB_STYLE_PROP_TEXT_SPEC_TYPEFACE: 'PRETENDARD',
-                            'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER': null,
+                            CB_STYLE_PROP_TEXT_SPEC_TYPEFACE: 'GOOGLE:Dokdo',
+                            'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER': 'GOOGLE:Lobster',
                             'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE': null,
                             'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE:HOVER': null,
                             CB_STYLE_PROP_TEXT_SPEC_VERTICAL: 'MIDDLE',

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

@@ -25,6 +25,8 @@ var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverB
 var S_CB_Box_1 = require("../components/S_CB_Box");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
+var getGoogleFonts_1 = __importDefault(require("./getGoogleFonts"));
+var useGoogleFonts_1 = __importDefault(require("./useGoogleFonts"));
 function Text(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var _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;
@@ -37,6 +39,8 @@ function Text(props) {
     var _d = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _d.style, textHoverStyle = _d.hoverStyle;
     var _e = (0, util_1.parseProperties)(props, device), propsStyle = _e.style, propsHoverStyle = _e.hoverStyle, layoutStyle = _e.layout, effect = _e.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
+    var googleFonts = (0, getGoogleFonts_1.default)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
+    (0, useGoogleFonts_1.default)({ fonts: googleFonts });
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';
     }

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

@@ -0,0 +1,2 @@
+import type { CB_STYLE_PROP_TEXT_SPECS } from './types';
+export default function getGoogleFonts(props: CB_STYLE_PROP_TEXT_SPECS, isMobile: boolean): string[];

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function getGoogleFonts(props, isMobile) {
+    var typeface = props.CB_STYLE_PROP_TEXT_SPEC_TYPEFACE;
+    var typefaceHover = props['CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER'];
+    var typefaceMobile = props['CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE'];
+    var typefaceMobileHover = props['CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE:HOVER'];
+    if (isMobile) {
+        return [typefaceMobile, typefaceMobileHover].filter(function (each) { return each && each.startsWith('GOOGLE:'); });
+    }
+    return [typeface, typefaceHover].filter(function (each) { return each && each.startsWith('GOOGLE:'); });
+}
+exports.default = getGoogleFonts;

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

@@ -0,0 +1,4 @@
+declare function useGoogleFonts({ fonts }: {
+    fonts: string[];
+}): void;
+export default useGoogleFonts;

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

@@ -0,0 +1,123 @@
+"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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var getGoogleFontCss_1 = __importDefault(require("../../../../../../../GoogleFontkit/api/getGoogleFontCss"));
+var getGoogleWebFonts_1 = __importDefault(require("../../../../../../../GoogleFontkit/api/getGoogleWebFonts"));
+var createStyleSheet_1 = __importDefault(require("../../../../../../../GoogleFontkit/utils/createStyleSheet"));
+var extractFontStyles_1 = __importDefault(require("../../../../../../../GoogleFontkit/utils/extractFontStyles"));
+var fillStyleSheet_1 = __importDefault(require("../../../../../../../GoogleFontkit/utils/fillStyleSheet"));
+var getFontId_1 = __importDefault(require("../../../../../../../GoogleFontkit/utils/getFontId"));
+var isStyleSheetExists_1 = __importDefault(require("../../../../../../../GoogleFontkit/utils/isStyleSheetExists"));
+var parseFontVariants_1 = __importDefault(require("../../../../../../../GoogleFontkit/utils/parseFontVariants"));
+function useGoogleFonts(_a) {
+    var fonts = _a.fonts;
+    (0, react_1.useEffect)(function () {
+        fonts.forEach(function (fontFamily) {
+            var parsedFontFamily = fontFamily.substring(7);
+            var fontId = (0, getFontId_1.default)(parsedFontFamily);
+            if ((0, isStyleSheetExists_1.default)(fontId)) {
+                return;
+            }
+            (0, createStyleSheet_1.default)(fontId, false);
+            getFonts(parsedFontFamily);
+        });
+        function getCss(font) {
+            return __awaiter(this, void 0, void 0, function () {
+                var css, fontStyles;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, (0, getGoogleFontCss_1.default)({
+                                family: "".concat(font.family).concat((0, parseFontVariants_1.default)(font.variants, {
+                                    prefix: ':wght@',
+                                    separator: ';'
+                                })),
+                                'font-display': 'swap'
+                            })];
+                        case 1:
+                            css = _a.sent();
+                            fontStyles = (0, extractFontStyles_1.default)(css);
+                            (0, fillStyleSheet_1.default)(font.id, fontStyles[font.id]);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        }
+        function getFonts(fontFamily) {
+            return __awaiter(this, void 0, void 0, function () {
+                var items, googleFonts, e_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, (0, getGoogleWebFonts_1.default)({
+                                    key: 'AIzaSyDvOkXcd-jqqD1z1P-RmIBM9RzGpEXRwV0',
+                                    family: fontFamily
+                                })];
+                        case 1:
+                            items = (_a.sent()).items;
+                            googleFonts = items.map(function (item) { return (__assign(__assign({}, item), { id: (0, getFontId_1.default)(item.family) })); });
+                            googleFonts.forEach(function (font) { return getCss(font); });
+                            return [3 /*break*/, 3];
+                        case 2:
+                            e_1 = _a.sent();
+                            // eslint-disable-next-line no-console
+                            console.error(e_1);
+                            return [3 /*break*/, 3];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        }
+    }, [fonts]);
+}
+exports.default = useGoogleFonts;

package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.d.ts

@@ -1,7 +1,8 @@
 import type { Device } from '../util/types';
+import type { CSSProperties } from 'styled-components';
 export declare function parseStyleTextToCSSProp<T>({ availableSpecCodes, props, propKey, device }: ParseStyleTextProps<T>): {
-    style: {};
-    hoverStyle: {};
+    style: CSSProperties;
+    hoverStyle: CSSProperties;
 };
 type ParseStyleTextProps<T> = {
     availableSpecCodes: Array<keyof T>;

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

@@ -173,8 +173,11 @@ function getFontName(value) {
             return 'serif';
         case 'PRETENDARD':
             return 'Pretendard JP, sans-serif';
-        default:
-            return "".concat(value, ", sans-serif");
+        default: {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            var _a = value.split(':'), _1 = _a[0], font = _a[1];
+            return "".concat(font);
+        }
     }
 }
 function getHorizontalPositionValue(value) {

package/package.json

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

package/release-note.md

@@ -1,8 +1,6 @@
-# PDS-DEV-KIT-WEB Release Notes
-## [v2.2.10]
-## daily|https://design.storybook.publ.biz/
-
-### Component
-* Icon
-  * ic_typeface_system(fill, line) 추가
-  * ic_logo_google(fill, line) 추가
+# pds-dev-kit-web-test Release Notes
+## [v0.2.46]
+## 기준 pds-dev-kit-web 버전 @2.2.10
+### sub
+    * DynamicLayout - custom section
+        * TEXT CB에 구글 폰트를 열어줌

package/webhook/node_modules/esrecurse/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["es2015"]
+}