pds-dev-kit-web-test 2.4.18 → 2.4.20

package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.d.ts

@@ -6,7 +6,7 @@ type TextObj = {
 };
 type UserDesktopTabBarProps = {
     itemArray?: PDSTabItemOption[];
-    styleTheme?: 'main';
+    styleTheme?: 'main' | 'content';
     /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
     textArray?: TextObj[];
 };

package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js

@@ -52,7 +52,12 @@ function UserDesktopTabBar(_a) {
                 item.onClick(e);
             }
         };
-        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index)); }) })));
+        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: itemArray.map(function (item, index) {
+                if (styleTheme === 'content') {
+                    return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content", text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "headingBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
+                }
+                return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
+            }) })));
     }
     if (textArray) {
         var handleClick_1 = function (value) {
@@ -75,7 +80,9 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (template
     var styleTheme = _a.styleTheme;
     switch (styleTheme) {
         case 'main':
-            return mainStyle; // TODO : 추후 styleTheme 의 enum 값이 추가되면 수정
+            return mainStyle;
+        case 'content':
+            return contentStyle;
         default:
             return mainStyle;
     }
@@ -99,7 +106,20 @@ var mainStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject
     var isActive = _a.isActive;
     return !isActive && "display: none;";
 });
-var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"])), function (_a) {
+var contentStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
+    var isActive = _a.isActive, theme = _a.theme;
+    return isActive && theme.ui_cpnt_tabbar_base_area;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_19;
+}, function (_a) {
+    var isActive = _a.isActive;
+    return !isActive && "display: none;";
+});
+var S_TabBar = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area;
 }, function (_a) {
@@ -107,4 +127,4 @@ var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObje
     return theme.ui_cpnt_divider;
 });
 exports.default = UserDesktopTabBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -137,6 +137,123 @@ exports.sampleCustomsection1 = {
             queryableTapSrc: 'N/A',
             updatedAt: '2023-08-06T13:30:49'
         },
+        {
+            availablePlugins: [],
+            componentBlockCode: 'CB_TEXT',
+            componentBlockType: 'GENERAL',
+            dynamicLayoutSectionId: 18661,
+            id: 3599,
+            insertedAt: '2023-08-06T13:30:47',
+            jsonProperties: {
+                currentVersion: '2023-08-03',
+                data: {
+                    CB_CONTENT_PROP_CLINK: {
+                        CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC: 'https://publ.co',
+                        CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: true,
+                        CB_CONTENT_PROP_CLINK_SPEC_SRC: 'https://publ.co',
+                        CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'DISABLED'
+                    },
+                    CB_CONTENT_PROP_HOVER: {
+                        CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
+                    },
+                    CB_CONTENT_PROP_TEXT: {
+                        CB_CONTENT_PROP_TEXT_SPEC_TEXT: '{"scrollId": "airpods", "totalImages": 64, "baseURL": "https://www.apple.com/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/hero/medium", "type": "png", "startShowingImages": 0,"endShowingImages": 1000}'
+                    },
+                    CB_CONTENT_PROP_VISIBILITY: {
+                        CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
+                        CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: true
+                    },
+                    CB_EFFECT_PROP_ENTANIM: {
+                        CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: 'SLIDEINLEFT',
+                        'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': 'HEARTBEAT',
+                        CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: 1,
+                        'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': null,
+                        CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: 1,
+                        'CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT:MOBILE': null,
+                        CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC: 'EASEINOUT',
+                        'CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC:MOBILE': null
+                    },
+                    CB_EFFECT_PROP_HOVERANIM: {
+                        CB_EFFECT_PROP_HOVERANIM_SPEC_DURATION: 0.7,
+                        'CB_EFFECT_PROP_HOVERANIM_SPEC_DURATION:MOBILE': null,
+                        CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT: 1,
+                        'CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT:MOBILE': null,
+                        CB_EFFECT_PROP_HOVERANIM_SPEC_TFUNC: 'EASEINOUT',
+                        'CB_EFFECT_PROP_HOVERANIM_SPEC_TFUNC:MOBILE': null,
+                        CB_EFFECT_PROP_HOVERANIM_SPEC_TYPE: 'NONE',
+                        'CB_EFFECT_PROP_HOVERANIM_SPEC_TYPE:MOBILE': null
+                    },
+                    CB_LAYOUT_PROP_PADDING: {
+                        CB_LAYOUT_PROP_PADDING_SPEC_FIX: true,
+                        'CB_LAYOUT_PROP_PADDING_SPEC_FIX:MOBILE': null,
+                        CB_LAYOUT_PROP_PADDING_SPEC_PADDING: {
+                            bottom: 0,
+                            left: 0,
+                            right: 0,
+                            top: 0
+                        },
+                        'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': null
+                    },
+                    CB_PLACEMENT_PROP_PLACEMENT: {
+                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 5,
+                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 8,
+                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 3,
+                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 4,
+                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: 1,
+                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': 1,
+                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: 0,
+                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': 1,
+                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: 9999,
+                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': 9999
+                    },
+                    CB_STYLE_PROP_OPACITY: {
+                        CB_STYLE_PROP_OPACITY_SPEC_OPACITY: 100,
+                        'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:HOVER': null,
+                        'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE': null,
+                        'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE:HOVER': null
+                    },
+                    CB_STYLE_PROP_TEXT: {
+                        CB_STYLE_PROP_TEXT_SPEC_COLOR: '#333333FF',
+                        'CB_STYLE_PROP_TEXT_SPEC_COLOR:HOVER': null,
+                        'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE': null,
+                        'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE:HOVER': null,
+                        CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL: 'CENTER',
+                        'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:HOVER': null,
+                        'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:MOBILE': null,
+                        'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:MOBILE:HOVER': null,
+                        CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING: 0,
+                        'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:HOVER': null,
+                        'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE': null,
+                        'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE:HOVER': null,
+                        CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT: 130,
+                        'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:HOVER': null,
+                        'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE': null,
+                        'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE:HOVER': null,
+                        CB_STYLE_PROP_TEXT_SPEC_SIZE: 36,
+                        '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: 'GOOGLE:Source Serif 4',
+                        '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',
+                        'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:HOVER': null,
+                        'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:MOBILE': null,
+                        'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:MOBILE:HOVER': null,
+                        CB_STYLE_PROP_TEXT_SPEC_WEIGHT: 700,
+                        'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:HOVER': null,
+                        'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE': null,
+                        'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE:HOVER': null
+                    }
+                },
+                minVersion: '2023-08-03',
+                version: '2023-08-03'
+            },
+            queryableDefinitionPreset: 'N/A',
+            queryableTapSrc: 'N/A',
+            updatedAt: '2023-08-06T13:30:49'
+        },
         {
             availablePlugins: [],
             componentBlockCode: 'CB_BTN',

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

@@ -404,17 +404,19 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         }
         makeCollisionOfBulk();
     };
-    var isHiddenOnCurrentDevice = (function () {
+    var showSectionHiddenCover = (function () {
         if (mode === 'EDIT') {
-            var deviceKey = device === 'DESKTOP'
+            var visibilityKey = device === 'DESKTOP'
                 ? 'CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP'
                 : 'CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB';
-            var isVisible = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.data.CB_CONTENT_PROP_VISIBILITY[deviceKey];
-            return !isVisible;
+            var isSectionVisible = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.data.CB_CONTENT_PROP_VISIBILITY[visibilityKey];
+            // 가시성 상태를 반전하여 숨겨진 커버를 표시할지 결정
+            var shouldShowHiddenCover = !isSectionVisible;
+            return shouldShowHiddenCover;
         }
         return false;
     })();
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsxs)(S_gleStyles, { children: [isHiddenOnCurrentDevice && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsxs)(S_gleStyles, { children: [showSectionHiddenCover && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
                             minHeight: customSectionStyles.minHeight,
                             paddingTop: padding.top,
                             paddingBottom: padding.bottom,

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

@@ -15,6 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable react/destructuring-assignment */
 require("react");
 var newUtils_1 = require("../../newUtils");
 var types_1 = require("../../types");
@@ -23,6 +24,7 @@ var Divider_1 = __importDefault(require("./componentBlocks/Divider/Divider"));
 var Embed_1 = __importDefault(require("./componentBlocks/Embed/Embed"));
 var Image_1 = __importDefault(require("./componentBlocks/Image/Image"));
 var RichText_1 = require("./componentBlocks/RichText");
+var ScrollAnimation_1 = __importDefault(require("./componentBlocks/ScrollAnimation"));
 var Text_1 = __importDefault(require("./componentBlocks/Text/Text"));
 var Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
 var Youtube_1 = require("./componentBlocks/Youtube");
@@ -33,8 +35,8 @@ function ComponentBlockMatcher(_a) {
     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 }));
+        // case CB_ALL_CODES.CB_TEXT:
+        //   return <Text {...(propsWithValue as CB_TEXT_PROPERTIES_TYPE)} index={index} />;
         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:
@@ -47,8 +49,42 @@ function ComponentBlockMatcher(_a) {
             return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_EMBED:
             return (0, jsx_runtime_1.jsx)(Embed_1.default, __assign({}, propsWithValue, { index: index }));
+        case types_1.CB_ALL_CODES.CB_TEXT:
+            return (0, jsx_runtime_1.jsx)(TextPropToAnim, __assign({}, propsWithValue, { index: index }));
         default:
             return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" });
     }
 }
 exports.default = ComponentBlockMatcher;
+var isValidJSON = function (str) {
+    try {
+        JSON.parse(str);
+        return true;
+    }
+    catch (e) {
+        return false;
+    }
+};
+function TextPropToAnim(props) {
+    var isAnim = isValidJSON(props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT);
+    if (!isAnim) {
+        return (0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, props));
+    }
+    var json = JSON.parse(props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT);
+    var hasAllProp = validateAnimationProps(json);
+    if (!hasAllProp) {
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "MUST HAVE ALL PROPS: scrollId, totalImages, baseURL, type, startShowingImages, endShowingImages," }));
+    }
+    return (0, jsx_runtime_1.jsx)(ScrollAnimation_1.default, __assign({}, json));
+}
+var validateAnimationProps = function (json) {
+    var requiredProps = [
+        'scrollId',
+        'totalImages',
+        'baseURL',
+        'type',
+        'startShowingImages',
+        'endShowingImages'
+    ];
+    return requiredProps.every(function (prop) { return prop in json; });
+};

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const AirpodsAnimation: ({ scrollId, totalImages, baseURL, type, startShowingImages, endShowingImages }: any) => JSX.Element;
+export default AirpodsAnimation;

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

@@ -0,0 +1,219 @@
+"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 };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-await-in-loop */
+/* eslint-disable no-plusplus */
+var react_1 = require("react");
+var AirpodsAnimation = function (_a) {
+    var scrollId = _a.scrollId, totalImages = _a.totalImages, baseURL = _a.baseURL, type = _a.type, startShowingImages = _a.startShowingImages, endShowingImages = _a.endShowingImages;
+    var canvasRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)([]), images = _b[0], setImages = _b[1];
+    var _c = (0, react_1.useState)(0), loadedImages = _c[0], setLoadedImages = _c[1];
+    var _d = (0, react_1.useState)(0), currentFrameIndex = _d[0], setCurrentFrameIndex = _d[1];
+    var mainBody = (0, react_1.useState)(function () {
+        var box = document.querySelector('.sc-bdfBQB');
+        return box;
+    })[0];
+    (0, react_1.useEffect)(function () {
+        var loadImage = function (i) {
+            return new Promise(function (resolve) {
+                var img = new Image();
+                img.src = "".concat(baseURL, "/").concat(String(i).padStart(4, '0'), ".").concat(type);
+                img.onload = function () { return resolve(img); };
+            });
+        };
+        var loadImages = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var imgs, i, img;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        imgs = [];
+                        i = 0;
+                        _a.label = 1;
+                    case 1:
+                        if (!(i < totalImages)) return [3 /*break*/, 4];
+                        return [4 /*yield*/, loadImage(i)];
+                    case 2:
+                        img = _a.sent();
+                        imgs.push(img);
+                        _a.label = 3;
+                    case 3:
+                        i++;
+                        return [3 /*break*/, 1];
+                    case 4:
+                        setImages(imgs);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        loadImages();
+    }, [totalImages, baseURL, type]);
+    (0, react_1.useEffect)(function () {
+        var handleScroll = function () {
+            var scrollTop = mainBody.scrollTop;
+            console.log(scrollId, scrollTop);
+            if (scrollTop < startShowingImages || scrollTop > endShowingImages) {
+                console.log(scrollId, 'frame 0');
+                setCurrentFrameIndex(0); // Reset or handle as needed when out of range
+                return;
+            }
+            var maxScrollTop = endShowingImages - startShowingImages;
+            var scrollFraction = (scrollTop - startShowingImages) / maxScrollTop;
+            console.log({ maxScrollTop: maxScrollTop, scrollTop: scrollTop, startShowingImages: startShowingImages });
+            var frameIndex = Math.min(totalImages - 1, Math.max(0, Math.floor(scrollFraction * totalImages)));
+            setCurrentFrameIndex(frameIndex);
+            console.log(scrollId, "frameis ".concat(frameIndex));
+            handleHeadingAnimationBasedOnScroll();
+        };
+        var handleHeadingAnimationBasedOnScroll = function () {
+            var heading = document.querySelector('h1');
+            var scrollTop = mainBody.scrollTop;
+            var viewportHeight = window.innerHeight;
+            // Calculate opacity based on scroll position
+            var opacity = Math.max(0, 1 - scrollTop / (2 * viewportHeight));
+            // Apply the calculated opacity
+            if (heading) {
+                heading.style.opacity = opacity.toString();
+            }
+        };
+        mainBody.addEventListener('scroll', handleScroll);
+        return function () {
+            mainBody.removeEventListener('scroll', handleScroll);
+        };
+    }, [totalImages, images, startShowingImages, endShowingImages]);
+    (0, react_1.useEffect)(function () {
+        if (images.length === totalImages) {
+            render();
+        }
+    }, [currentFrameIndex, images]);
+    var render = function () {
+        var canvas = canvasRef.current;
+        if (!canvas) {
+            return;
+        }
+        var ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        var img = images[currentFrameIndex];
+        // const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+        var scrollTop = mainBody.scrollTop;
+        if (!img || scrollTop < startShowingImages || scrollTop > endShowingImages) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
+            return;
+        }
+        var canvasRatio = canvas.width / canvas.height;
+        var imgRatio = img.width / img.height;
+        var drawWidth;
+        var drawHeight;
+        var offsetX = 0;
+        var offsetY = 0;
+        if (canvasRatio > imgRatio) {
+            drawWidth = canvas.width;
+            drawHeight = drawWidth / imgRatio;
+            offsetY = (canvas.height - drawHeight) / 2;
+        }
+        else {
+            drawHeight = canvas.height;
+            drawWidth = drawHeight * imgRatio;
+            offsetX = (canvas.width - drawWidth) / 2;
+        }
+        ctx.save();
+        if (totalImages - currentFrameIndex < 10) {
+            ctx.globalAlpha = (totalImages - currentFrameIndex) / 10;
+        }
+        ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
+        ctx.restore();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ id: "main", style: {
+            width: '100vw',
+            position: 'fixed'
+            /* height: 500vh; */
+        } }, { children: [(0, jsx_runtime_1.jsx)("h1", __assign({ style: {
+                    position: 'fixed',
+                    top: '50%',
+                    width: '100vw',
+                    left: '50%',
+                    textAlign: 'center',
+                    transform: 'translate(-50%, -50%)',
+                    fontSize: 'clamp(2rem, 10vw, 13.5rem)'
+                } }, { children: "Airpods Pro" })), (0, jsx_runtime_1.jsx)("canvas", { style: {
+                    position: 'fixed',
+                    left: '50%',
+                    top: '50%',
+                    maxHeight: '100vh',
+                    maxWidth: '100vw',
+                    transform: 'translate(-50%, -50%)'
+                }, ref: canvasRef, width: window.innerWidth, height: window.innerHeight })] })));
+};
+// #main {
+//     width: 100vw;
+//     position: fixed;
+//     /* height: 500vh; */
+//   }
+//   canvas {
+//     position: fixed;
+//     left: 50%;
+//     top: 50%;
+//     max-height: 100vh;
+//     max-width: 100vw;
+//     transform: translate(-50%, -50%);
+//   }
+//   h1 {
+//     position: fixed;
+//     top: 50%;
+//     width: 100vw;
+//     left: 50%;
+//     text-align: center;
+//     transform: translate(-50%, -50%);
+//     font-size: clamp(2rem, 10vw, 13.5rem);
+//   }
+exports.default = AirpodsAnimation;

package/package.json

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

package/release-note.md

@@ -1,6 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.77]
+## [v2.2.79]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* 컬러 키 싱크
+* [PDS-1232] 섹션 단위로 디바이스별 노출 설정 제공 건