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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Shape.d.ts +33 -11
  2. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Shape.js +46 -29
  3. package/package.json +1 -1
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Shape.d.ts CHANGED
@@ -1,32 +1,54 @@
1
1
  import React from 'react';
2
2
  import { CSSProperties } from 'styled-components';
3
- declare const SHAPE_PATHS: {
4
- CIRCLE: string;
3
+ declare const ALL_SQS_SHAPES: {
5
4
  SQUARE: string;
5
+ CIRCLE: string;
6
6
  ROUNDED_SQUARE: string;
7
+ OVAL: string;
8
+ PILL: string;
7
9
  ARCH: string;
8
10
  UPSIDE_DOWN_ARCH: string;
9
- PILL: string;
10
- Oval: string;
11
+ SIDEWAYS_ARCH_LEFT: string;
12
+ SIDEWAYS_ARCH_RIGHT: string;
13
+ DOUBLE_ARCH: string;
11
14
  TRIANGLE: string;
12
15
  DIAMOND: string;
13
16
  PENTAGON: string;
14
17
  HEXAGON: string;
15
18
  OCTAGON: string;
19
+ TRAPEZOID: string;
20
+ PARALLELOGRAM: string;
21
+ RHOMBUS: string;
16
22
  STAR_4: string;
17
23
  STAR_5: string;
18
24
  STAR_8: string;
19
- BURST: string;
25
+ STAR_12: string;
26
+ BURST_1: string;
27
+ BURST_2: string;
28
+ LEAF_1: string;
29
+ LEAF_2: string;
20
30
  BLOB_1: string;
21
31
  BLOB_2: string;
22
- LEAF: string;
23
- SHIELD: string;
32
+ BLOB_3: string;
33
+ WAVE: string;
24
34
  TICKET: string;
25
- TRAPEZOID: string;
26
- PARALLELOGRAM: string;
27
- RHOMBUS: string;
35
+ SHIELD: string;
36
+ TV: string;
37
+ CROSS: string;
38
+ HEART: string;
28
39
  };
29
- export type ShapeType = keyof typeof SHAPE_PATHS;
40
+ export type ShapeType = keyof typeof ALL_SQS_SHAPES;
41
+ interface ShapeImageProps {
42
+ src: string;
43
+ shape?: ShapeType;
44
+ normalStyle: CSSProperties;
45
+ hoverStyle: CSSProperties;
46
+ focalPoint?: {
47
+ x: number;
48
+ y: number;
49
+ };
50
+ className?: string;
51
+ }
30
52
  interface ShapeImageProps {
31
53
  src: string;
32
54
  shape?: ShapeType;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Shape.js CHANGED
@@ -42,59 +42,76 @@ var jsx_runtime_1 = require("react/jsx-runtime");
42
42
  var react_1 = require("react");
43
43
  var styled_components_1 = __importStar(require("styled-components"));
44
44
  // 1. Squarespace Fluid Engine의 모든 핵심 Shape Paths
45
- var SHAPE_PATHS = {
46
- // 기본 도형
47
- CIRCLE: 'M50,0A50,50,0,1,1,50,100A50,50,0,1,1,50,0',
45
+ var ALL_SQS_SHAPES = {
46
+ // --- BASIC ---
48
47
  SQUARE: 'M0,0 L100,0 L100,100 L0,100 Z',
48
+ CIRCLE: 'M50,0A50,50,0,1,1,50,100A50,50,0,1,1,50,0',
49
49
  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',
50
- // 아치 및 타원형
50
+ OVAL: 'M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0z',
51
+ 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',
52
+ // --- ARCHES & CURVES ---
51
53
  ARCH: 'M0,100 L0,50 C0,22.4 22.4,0 50,0 C77.6,0 100,22.4 100,50 L100,100 Z',
52
54
  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',
53
- 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',
54
- Oval: 'M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0z',
55
- // 다각형
55
+ SIDEWAYS_ARCH_LEFT: 'M100,0 L50,0 C22.4,0 0,22.4 0,50 C0,77.6 22.4,100 50,100 L100,100 Z',
56
+ SIDEWAYS_ARCH_RIGHT: 'M0,0 L50,0 C77.6,0 100,22.4 100,50 C100,77.6 77.6,100 50,100 L0,100 Z',
57
+ DOUBLE_ARCH: 'M0,50 C0,22.4 22.4,0 50,0 S100,22.4 100,50 S77.6,100 50,100 S0,77.6 0,50 Z',
58
+ // --- POLYGONS ---
56
59
  TRIANGLE: 'M50,0 L100,100 L0,100 Z',
57
60
  DIAMOND: 'M50,0 L100,50 L50,100 L0,50 Z',
58
61
  PENTAGON: 'M50,0 L100,38 L81,100 L19,100 L0,38 Z',
59
62
  HEXAGON: 'M25,0 L75,0 L100,50 L75,100 L25,100 L0,50 Z',
60
63
  OCTAGON: 'M30,0 L70,0 L100,30 L100,70 L70,100 L30,100 L0,70 L0,30 Z',
61
- // 별 및 배지
64
+ TRAPEZOID: 'M20,0 L80,0 L100,100 L0,100 Z',
65
+ PARALLELOGRAM: 'M20,0 L100,0 L80,100 L0,100 Z',
66
+ RHOMBUS: 'M30,0 L100,0 L70,100 L0,100 Z',
67
+ // --- STARS & BURSTS ---
62
68
  STAR_4: 'M50,0 L60,40 L100,50 L60,60 L50,100 L40,60 L0,50 L40,40 Z',
63
69
  STAR_5: 'M50,0 L61,35 L98,35 L68,57 L79,91 L50,70 L21,91 L32,57 L2,35 L39,35 Z',
64
70
  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',
65
- 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',
66
- // 유기적 / 특수 형태
71
+ STAR_12: 'M50,0 L54,20 L73,12 L65,30 L85,30 L72,43 L85,57 L65,57 L73,75 L54,67 L50,85 L46,67 L27,75 L35,57 L15,57 L28,43 L15,30 L35,30 L27,12 L46,20 Z',
72
+ BURST_1: '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',
73
+ BURST_2: 'M50,5 L65,0 L75,15 L95,10 L90,30 L100,50 L90,70 L100,90 L75,85 L65,100 L50,95 L35,100 L25,85 L5,90 L10,70 L0,50 L10,30 L5,10 L25,15 L35,0 Z',
74
+ // --- ORGANIC & ABSTRACT ---
75
+ LEAF_1: 'M0,100 C0,100 0,0 100,0 C100,0 100,100 0,100 Z',
76
+ LEAF_2: 'M50,0 C100,0 100,50 100,100 C100,100 50,100 0,100 C0,50 0,0 50,0 Z',
67
77
  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',
68
78
  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',
69
- LEAF: 'M0,100 C0,100 0,0 100,0 C100,0 100,100 0,100 Z',
70
- SHIELD: 'M0,0 L100,0 L100,60 C100,85 50,100 50,100 C50,100 0,85 0,60 Z',
79
+ BLOB_3: 'M50,0 C80,0 100,20 100,50 S80,100 50,100 S0,80 0,50 S20,0 50,0',
80
+ WAVE: 'M0,20 Q25,0 50,20 T100,20 L100,100 L0,100 Z',
81
+ // --- SPECIAL FRAMES ---
71
82
  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',
72
- TRAPEZOID: 'M20,0 L80,0 L100,100 L0,100 Z',
73
- PARALLELOGRAM: 'M20,0 L100,0 L80,100 L0,100 Z',
74
- RHOMBUS: 'M30,0 L100,0 L70,100 L0,100 Z'
83
+ SHIELD: 'M0,0 L100,0 L100,60 C100,85 50,100 50,100 C50,100 0,85 0,60 Z',
84
+ TV: 'M10,0 Q0,0 0,10 L0,90 Q0,100 10,100 L90,100 Q100,100 100,90 L100,10 Q100,0 90,0 Z M15,15 L85,15 L85,85 L15,85 Z',
85
+ CROSS: 'M35,0 L65,0 L65,35 L100,35 L100,65 L65,65 L65,100 L35,100 L35,65 L0,65 L0,35 L35,35 Z',
86
+ HEART: 'M50,30 C50,10 20,10 20,40 C20,70 50,90 50,90 C50,90 80,70 80,40 C80,10 50,10 50,30 Z'
75
87
  };
76
- // 기존 스타일드 컴포넌트 로직 유지
77
- 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) {
88
+ var S_ImageContainer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n height: 100%;\n position: relative;\n width: 100%;\n\n ", ";\n\n /* 2. \uC911\uC694: Shape\uC774 \uC788\uC744 \uB54C box-shadow\uB97C drop-shadow\uB85C \uBCC0\uD658 */\n ", "\n\n & img {\n height: 100%;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n width: 100%;\n\n ", "\n\n ", ";\n }\n\n /* 3. Hover \uC2DC \uADF8\uB9BC\uC790 \uBCC0\uD654 \uB300\uC751 */\n &:hover {\n ", ";\n\n ", "\n }\n"], ["\n height: 100%;\n position: relative;\n width: 100%;\n\n ", ";\n\n /* 2. \uC911\uC694: Shape\uC774 \uC788\uC744 \uB54C box-shadow\uB97C drop-shadow\uB85C \uBCC0\uD658 */\n ", "\n\n & img {\n height: 100%;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n width: 100%;\n\n ", "\n\n ", ";\n }\n\n /* 3. Hover \uC2DC \uADF8\uB9BC\uC790 \uBCC0\uD654 \uB300\uC751 */\n &:hover {\n ", ";\n\n ", "\n }\n"])), function (_a) {
78
89
  var normalStyle = _a.normalStyle;
79
90
  return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), normalStyle);
91
+ }, function (_a) {
92
+ var hasShape = _a.hasShape, normalStyle = _a.normalStyle;
93
+ if (hasShape && (normalStyle.boxShadow || normalStyle.shadow)) {
94
+ var shadowValue = normalStyle.boxShadow || normalStyle.shadow;
95
+ return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: none !important; // \uAE30\uC874 \uC0AC\uAC01\uD615 \uADF8\uB9BC\uC790 \uC81C\uAC70\n filter: drop-shadow(", "); // \uC170\uC774\uD504 \uC678\uACFD\uC120\uC744 \uB530\uB77C \uADF8\uB9BC\uC790 \uC0DD\uC131\n "], ["\n box-shadow: none !important; // \uAE30\uC874 \uC0AC\uAC01\uD615 \uADF8\uB9BC\uC790 \uC81C\uAC70\n filter: drop-shadow(", "); // \uC170\uC774\uD504 \uC678\uACFD\uC120\uC744 \uB530\uB77C \uADF8\uB9BC\uC790 \uC0DD\uC131\n "])), shadowValue);
96
+ }
80
97
  }, function (_a) {
81
98
  var hasShape = _a.hasShape, maskId = _a.maskId;
82
- 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);
99
+ return hasShape && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n -webkit-clip-path: url(#", ");\n clip-path: url(#", ");\n "], ["\n -webkit-clip-path: url(#", ");\n clip-path: url(#", ");\n "])), maskId, maskId);
83
100
  }, function (_a) {
84
101
  var normalStyle = _a.normalStyle;
85
102
  var isContain = normalStyle.backgroundSize === 'contain';
86
- return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n object-fit: ", ";\n "], ["\n object-fit: ", ";\n "])), isContain ? 'contain' : 'cover');
103
+ return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n object-fit: ", ";\n "], ["\n object-fit: ", ";\n "])), isContain ? 'contain' : 'cover');
87
104
  }, function (_a) {
88
105
  var hoverStyle = _a.hoverStyle;
89
- return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hoverStyle);
106
+ return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hoverStyle);
90
107
  }, function (_a) {
91
- var hoverStyle = _a.hoverStyle, normalStyle = _a.normalStyle;
92
- var isContain = hoverStyle.backgroundSize
93
- ? hoverStyle.backgroundSize === 'contain'
94
- : normalStyle.backgroundSize === 'contain';
95
- return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n object-fit: ", ";\n "], ["\n object-fit: ", ";\n "])), isContain ? 'contain' : 'cover');
108
+ var hasShape = _a.hasShape, hoverStyle = _a.hoverStyle;
109
+ if (hasShape && (hoverStyle.boxShadow || hoverStyle.shadow)) {
110
+ var shadowValue = hoverStyle.boxShadow || hoverStyle.shadow;
111
+ return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-shadow: none !important;\n filter: drop-shadow(", ");\n "], ["\n box-shadow: none !important;\n filter: drop-shadow(", ");\n "])), shadowValue);
112
+ }
96
113
  });
97
- 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"])));
114
+ var S_ShapeSelect = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __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"])));
98
115
  var ShapeImage = function (_a) {
99
116
  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;
100
117
  // 컴포넌트 인스턴스마다 고유한 마스크 ID 생성
@@ -104,10 +121,10 @@ var ShapeImage = function (_a) {
104
121
  setSelectedShape(shape !== null && shape !== void 0 ? shape : '');
105
122
  }, [shape]);
106
123
  var effectiveShape = selectedShape || undefined;
107
- var shapeOptions = Object.keys(SHAPE_PATHS);
108
- 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: {
124
+ var shapeOptions = Object.keys(ALL_SQS_SHAPES);
125
+ 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: ALL_SQS_SHAPES[effectiveShape], transform: "scale(0.01)" }) })) }) }))), (0, jsx_runtime_1.jsx)("img", { src: src, alt: "content", style: {
109
126
  objectPosition: "".concat(focalPoint.x * 100, "% ").concat(focalPoint.y * 100, "%")
110
127
  } })] })));
111
128
  };
112
129
  exports.default = ShapeImage;
113
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
130
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.7.624",
3
+ "version": "2.7.626",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",