pds-dev-kit-web-test 2.7.627 → 2.7.629

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

@@ -134,9 +134,9 @@ 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)(Shape_1.default, { 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: "STAR_12", src: imgSrc() === 'ERROR'
                                     ? 'https://static.publ.site/pages-sample/img_cb_style_prop_bgmedia_spec_imageselector_01.png'
-                                    : imgSrc(), normalStyle: __assign(__assign({}, imgStyle.normal), { boxShadow: '1px 1px 5px rgba(255, 0, 0, 0.711)' }), hoverStyle: __assign({}, imgStyle.hover) }), showDataNotFound()] })) })) }))] }));
+                                    : imgSrc(), normalStyle: __assign(__assign({}, imgStyle.normal), style), hoverStyle: __assign(__assign({}, imgStyle.hover), hoverStyle) }), showDataNotFound()] })) })) }))] }));
 }
 function parseImageCBStyle(style, hoverStyle, mode) {
     var boxStyle = {

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

@@ -119,18 +119,23 @@ var ShapeImage = function (_a) {
     var shapeOptions = Object.keys(ALL_SQS_SHAPES);
     // 1. 테두리 스타일 추출 로직 (e.g., "2px solid red" -> {width: 2, color: 'red'})
     var getBorderStyle = function (style) {
-        var _a;
-        var border = ((_a = style.border) === null || _a === void 0 ? void 0 : _a.toString()) || '';
-        var match = border.match(/(\d+)px/);
-        var width = match ? parseInt(match[1], 10) : 0;
-        var color = border.split(' ').pop() || 'transparent';
+        var _a, _b;
+        var width = (_a = parseInt(style.borderWidth, 10)) !== null && _a !== void 0 ? _a : 0;
+        var color = (_b = style.borderColor) !== null && _b !== void 0 ? _b : 'transparent';
         return { width: width, color: color };
     };
     var normalBorder = getBorderStyle(normalStyle);
-    return ((0, jsx_runtime_1.jsxs)("div", { 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)); })] })) }), (0, jsx_runtime_1.jsxs)(S_ImageContainer, __assign({ normalStyle: normalStyle, hoverStyle: hoverStyle, maskId: maskId, hasShape: !!effectiveShape, className: className }, { children: [effectiveShape && ((0, jsx_runtime_1.jsxs)("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: ALL_SQS_SHAPES[effectiveShape], transform: "scale(0.01)" }) })) }), normalBorder.width > 0 && ((0, jsx_runtime_1.jsx)("path", { d: ALL_SQS_SHAPES[effectiveShape], fill: "none", stroke: normalBorder.color, strokeWidth: normalBorder.width * 2, vectorEffect: "non-scaling-stroke" // 리사이즈 시 선 굵기 유지
-                             }))] }))), (0, jsx_runtime_1.jsx)("img", { src: src, alt: "content", style: {
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { position: 'relative', width: '100%', height: '100%' } }, { 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.replace(/_/g, ' ') }), option)); })] })) }), (0, jsx_runtime_1.jsxs)(S_ImageContainer, __assign({ normalStyle: normalStyle, hoverStyle: hoverStyle, maskId: maskId, hasShape: !!effectiveShape, className: className }, { children: [effectiveShape && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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: ALL_SQS_SHAPES[effectiveShape], transform: "scale(0.01)" }) })) }) })), normalBorder.width > 0 && ((0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 100 100", preserveAspectRatio: "none", style: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: 0,
+                                    width: '100%',
+                                    height: '100%',
+                                    pointerEvents: 'none',
+                                    zIndex: 1
+                                } }, { children: (0, jsx_runtime_1.jsx)("path", { d: ALL_SQS_SHAPES[effectiveShape], fill: "none", stroke: normalBorder.color, strokeWidth: normalBorder.width, vectorEffect: "non-scaling-stroke" }) })))] })), (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.627",
+  "version": "2.7.629",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",