pds-dev-kit-web-test 2.7.622 → 2.7.624

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

@@ -134,6 +134,7 @@ var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas
             },
             selectCBInBulk: function (blockIds) {
                 setBulkBlockIds(blockIds);
+                setSelectedBlockId('BULK');
             },
             selectGroup: function (groupBlockId) {
                 setBulkBlockIds([]);
@@ -1058,7 +1059,6 @@ var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas
     }
     var editableCBIDs = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock);
     var i18n = (0, react_i18next_1.useTranslation)('translation').i18n;
-    console.log('selectedBlockId', selectedBlockId);
     return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
                 device: device,
                 mode: mode,

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

@@ -127,6 +127,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             },
             selectCBInBulk: function (blockIds) {
                 setBulkBlockIds(blockIds);
+                setSelectedBlockId('BULK');
             },
             selectGroup: function (groupBlockId) {
                 setBulkBlockIds([]);
@@ -474,7 +475,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                 return;
             }
             setBulkBlockIds(newBulks);
-            setSelectedBlockId(null);
+            setSelectedBlockId('BULK');
             var newBulkCBIds = newBulks
                 .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
                 .filter(function (each) { return each !== null; });

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

@@ -53,6 +53,7 @@ var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverB
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
+var Shape_1 = __importDefault(require("./Shape"));
 function Image(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
@@ -133,7 +134,7 @@ function Image(props) {
         }
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     };
-    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 }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: [(0, jsx_runtime_1.jsx)(S_Image, { src: imgSrc() === 'ERROR'
+    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 }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: [(0, jsx_runtime_1.jsx)(Shape_1.default, { shape: "TRIANGLE", src: imgSrc() === 'ERROR'
                                     ? 'https://static.publ.site/pages-sample/img_cb_style_prop_bgmedia_spec_imageselector_01.png'
                                     : imgSrc(), normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }), showDataNotFound()] })) })) }))] }));
 }

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { CSSProperties } from 'styled-components';
+declare const SHAPE_PATHS: {
+    CIRCLE: string;
+    SQUARE: string;
+    ROUNDED_SQUARE: string;
+    ARCH: string;
+    UPSIDE_DOWN_ARCH: string;
+    PILL: string;
+    Oval: string;
+    TRIANGLE: string;
+    DIAMOND: string;
+    PENTAGON: string;
+    HEXAGON: string;
+    OCTAGON: string;
+    STAR_4: string;
+    STAR_5: string;
+    STAR_8: string;
+    BURST: string;
+    BLOB_1: string;
+    BLOB_2: string;
+    LEAF: string;
+    SHIELD: string;
+    TICKET: string;
+    TRAPEZOID: string;
+    PARALLELOGRAM: string;
+    RHOMBUS: string;
+};
+export type ShapeType = keyof typeof SHAPE_PATHS;
+interface ShapeImageProps {
+    src: string;
+    shape?: ShapeType;
+    normalStyle: CSSProperties;
+    hoverStyle: CSSProperties;
+    focalPoint?: {
+        x: number;
+        y: number;
+    };
+    className?: string;
+}
+declare const ShapeImage: React.FC<ShapeImageProps>;
+export default ShapeImage;

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

@@ -0,0 +1,113 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importStar(require("styled-components"));
+// 1. Squarespace Fluid Engine의 모든 핵심 Shape Paths
+var SHAPE_PATHS = {
+    // 기본 도형
+    CIRCLE: 'M50,0A50,50,0,1,1,50,100A50,50,0,1,1,50,0',
+    SQUARE: 'M0,0 L100,0 L100,100 L0,100 Z',
+    ROUNDED_SQUARE: 'M0,20 Q0,0 20,0 L80,0 Q100,0 100,20 L100,80 Q100,100 80,100 L20,100 Q0,100 0,80 Z',
+    // 아치 및 타원형
+    ARCH: 'M0,100 L0,50 C0,22.4 22.4,0 50,0 C77.6,0 100,22.4 100,50 L100,100 Z',
+    UPSIDE_DOWN_ARCH: 'M100,0 L100,50 C100,77.6 77.6,100 50,100 C22.4,100 0,77.6 0,50 L0,0 Z',
+    PILL: 'M0,50 C0,22.4 22.4,0 50,0 L50,0 C77.6,0 100,22.4 100,50 L100,50 C100,77.6 77.6,100 50,100 L50,100 C22.4,100 0,77.6 0,50 Z',
+    Oval: 'M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0z',
+    // 다각형
+    TRIANGLE: 'M50,0 L100,100 L0,100 Z',
+    DIAMOND: 'M50,0 L100,50 L50,100 L0,50 Z',
+    PENTAGON: 'M50,0 L100,38 L81,100 L19,100 L0,38 Z',
+    HEXAGON: 'M25,0 L75,0 L100,50 L75,100 L25,100 L0,50 Z',
+    OCTAGON: 'M30,0 L70,0 L100,30 L100,70 L70,100 L30,100 L0,70 L0,30 Z',
+    // 별 및 배지
+    STAR_4: 'M50,0 L60,40 L100,50 L60,60 L50,100 L40,60 L0,50 L40,40 Z',
+    STAR_5: 'M50,0 L61,35 L98,35 L68,57 L79,91 L50,70 L21,91 L32,57 L2,35 L39,35 Z',
+    STAR_8: 'M50,0 L58,33 L85,15 L75,45 L100,50 L75,55 L85,85 L58,67 L50,100 L42,67 L15,85 L25,55 L0,50 L25,45 L15,15 L42,33 Z',
+    BURST: 'M50,0 L60,10 L80,0 L80,20 L100,20 L90,40 L100,60 L80,60 L80,80 L60,70 L50,80 L40,70 L20,80 L20,60 L0,60 L10,40 L0,20 L20,20 L20,0 L40,10 Z',
+    // 유기적 / 특수 형태
+    BLOB_1: 'M85,30 C95,50 85,80 60,90 C35,100 10,80 5,50 C0,20 30,0 60,5 C80,10 75,10 85,30 Z',
+    BLOB_2: 'M90,40 C100,60 80,90 50,95 C20,100 0,80 0,50 C0,20 30,0 60,0 C80,0 80,20 90,40 Z',
+    LEAF: 'M0,100 C0,100 0,0 100,0 C100,0 100,100 0,100 Z',
+    SHIELD: 'M0,0 L100,0 L100,60 C100,85 50,100 50,100 C50,100 0,85 0,60 Z',
+    TICKET: 'M0,20 Q0,0 20,0 L80,0 Q100,0 100,20 L100,40 Q85,50 100,60 L100,80 Q100,100 80,100 L20,100 Q0,100 0,80 L0,60 Q15,50 0,40 Z',
+    TRAPEZOID: 'M20,0 L80,0 L100,100 L0,100 Z',
+    PARALLELOGRAM: 'M20,0 L100,0 L80,100 L0,100 Z',
+    RHOMBUS: 'M30,0 L100,0 L70,100 L0,100 Z'
+};
+// 기존 스타일드 컴포넌트 로직 유지
+var S_ImageContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n\n  ", ";\n\n  & img {\n    width: 100%;\n    height: 100%;\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n\n    // \uC170\uC774\uD504\uAC00 \uC788\uC744 \uB54C\uB9CC clip-path \uC801\uC6A9\n    ", "\n\n    ", ";\n  }\n\n  &:hover {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"], ["\n  position: relative;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n\n  ", ";\n\n  & img {\n    width: 100%;\n    height: 100%;\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n\n    // \uC170\uC774\uD504\uAC00 \uC788\uC744 \uB54C\uB9CC clip-path \uC801\uC6A9\n    ", "\n\n    ", ";\n  }\n\n  &:hover {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"])), function (_a) {
+    var normalStyle = _a.normalStyle;
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), normalStyle);
+}, function (_a) {
+    var hasShape = _a.hasShape, maskId = _a.maskId;
+    return hasShape && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        -webkit-clip-path: url(#", ");\n        clip-path: url(#", ");\n      "], ["\n        -webkit-clip-path: url(#", ");\n        clip-path: url(#", ");\n      "])), maskId, maskId);
+}, function (_a) {
+    var normalStyle = _a.normalStyle;
+    var isContain = normalStyle.backgroundSize === 'contain';
+    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        object-fit: ", ";\n      "], ["\n        object-fit: ", ";\n      "])), isContain ? 'contain' : 'cover');
+}, function (_a) {
+    var hoverStyle = _a.hoverStyle;
+    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), hoverStyle);
+}, function (_a) {
+    var hoverStyle = _a.hoverStyle, normalStyle = _a.normalStyle;
+    var isContain = hoverStyle.backgroundSize
+        ? hoverStyle.backgroundSize === 'contain'
+        : normalStyle.backgroundSize === 'contain';
+    return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        object-fit: ", ";\n      "], ["\n        object-fit: ", ";\n      "])), isContain ? 'contain' : 'cover');
+});
+var S_ShapeSelect = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  right: 8px;\n  top: 8px;\n  z-index: 2;\n\n  select {\n    appearance: none;\n    background: rgba(0, 0, 0, 0.6);\n    border: 1px solid rgba(255, 255, 255, 0.4);\n    border-radius: 6px;\n    color: #fff;\n    font-size: 12px;\n    outline: none;\n    padding: 4px 8px;\n  }\n"], ["\n  position: absolute;\n  right: 8px;\n  top: 8px;\n  z-index: 2;\n\n  select {\n    appearance: none;\n    background: rgba(0, 0, 0, 0.6);\n    border: 1px solid rgba(255, 255, 255, 0.4);\n    border-radius: 6px;\n    color: #fff;\n    font-size: 12px;\n    outline: none;\n    padding: 4px 8px;\n  }\n"])));
+var ShapeImage = function (_a) {
+    var src = _a.src, shape = _a.shape, normalStyle = _a.normalStyle, hoverStyle = _a.hoverStyle, _b = _a.focalPoint, focalPoint = _b === void 0 ? { x: 0.5, y: 0.5 } : _b, className = _a.className;
+    // 컴포넌트 인스턴스마다 고유한 마스크 ID 생성
+    var maskId = (0, react_1.useMemo)(function () { return "sqs-mask-".concat(Math.random().toString(36).substr(2, 9)); }, []);
+    var _c = (0, react_1.useState)(shape !== null && shape !== void 0 ? shape : ''), selectedShape = _c[0], setSelectedShape = _c[1];
+    (0, react_1.useEffect)(function () {
+        setSelectedShape(shape !== null && shape !== void 0 ? shape : '');
+    }, [shape]);
+    var effectiveShape = selectedShape || undefined;
+    var shapeOptions = Object.keys(SHAPE_PATHS);
+    return ((0, jsx_runtime_1.jsxs)(S_ImageContainer, __assign({ normalStyle: normalStyle, hoverStyle: hoverStyle, maskId: maskId, hasShape: !!effectiveShape, className: className }, { children: [(0, jsx_runtime_1.jsx)(S_ShapeSelect, { children: (0, jsx_runtime_1.jsxs)("select", __assign({ value: selectedShape, onChange: function (event) { return setSelectedShape(event.target.value); } }, { children: [(0, jsx_runtime_1.jsx)("option", __assign({ value: "" }, { children: "None" })), shapeOptions.map(function (option) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: option }, { children: option }), option)); })] })) }), effectiveShape && ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "0", height: "0", style: { position: 'absolute' } }, { children: (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", __assign({ id: maskId, clipPathUnits: "objectBoundingBox" }, { children: (0, jsx_runtime_1.jsx)("path", { d: SHAPE_PATHS[effectiveShape], transform: "scale(0.01)" }) })) }) }))), (0, jsx_runtime_1.jsx)("img", { src: src, alt: "content", style: {
+                    objectPosition: "".concat(focalPoint.x * 100, "% ").concat(focalPoint.y * 100, "%")
+                } })] })));
+};
+exports.default = ShapeImage;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/package.json

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

package/release-note.md

@@ -1,6 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.306]
+## [v2.2.309]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1420] CCB 이펙트에 따라 전환링크가 해당 항목으로 이동하지 않는 이슈
+* [PDS-1421] 다양한 BULK케이스 대응