pds-dev-kit-web-test 2.7.625 → 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.
|
@@ -49,5 +49,16 @@ interface ShapeImageProps {
|
|
|
49
49
|
};
|
|
50
50
|
className?: string;
|
|
51
51
|
}
|
|
52
|
+
interface ShapeImageProps {
|
|
53
|
+
src: string;
|
|
54
|
+
shape?: ShapeType;
|
|
55
|
+
normalStyle: CSSProperties;
|
|
56
|
+
hoverStyle: CSSProperties;
|
|
57
|
+
focalPoint?: {
|
|
58
|
+
x: number;
|
|
59
|
+
y: number;
|
|
60
|
+
};
|
|
61
|
+
className?: string;
|
|
62
|
+
}
|
|
52
63
|
declare const ShapeImage: React.FC<ShapeImageProps>;
|
|
53
64
|
export default ShapeImage;
|
|
@@ -85,28 +85,33 @@ var ALL_SQS_SHAPES = {
|
|
|
85
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
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'
|
|
87
87
|
};
|
|
88
|
-
|
|
89
|
-
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) {
|
|
90
89
|
var normalStyle = _a.normalStyle;
|
|
91
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
|
+
}
|
|
92
97
|
}, function (_a) {
|
|
93
98
|
var hasShape = _a.hasShape, maskId = _a.maskId;
|
|
94
|
-
return hasShape && (0, styled_components_1.css)(
|
|
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);
|
|
95
100
|
}, function (_a) {
|
|
96
101
|
var normalStyle = _a.normalStyle;
|
|
97
102
|
var isContain = normalStyle.backgroundSize === 'contain';
|
|
98
|
-
return (0, styled_components_1.css)(
|
|
103
|
+
return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n object-fit: ", ";\n "], ["\n object-fit: ", ";\n "])), isContain ? 'contain' : 'cover');
|
|
99
104
|
}, function (_a) {
|
|
100
105
|
var hoverStyle = _a.hoverStyle;
|
|
101
|
-
return (0, styled_components_1.css)(
|
|
106
|
+
return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hoverStyle);
|
|
102
107
|
}, function (_a) {
|
|
103
|
-
var
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
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
|
+
}
|
|
108
113
|
});
|
|
109
|
-
var S_ShapeSelect = styled_components_1.default.div(
|
|
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"])));
|
|
110
115
|
var ShapeImage = function (_a) {
|
|
111
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;
|
|
112
117
|
// 컴포넌트 인스턴스마다 고유한 마스크 ID 생성
|
|
@@ -122,4 +127,4 @@ var ShapeImage = function (_a) {
|
|
|
122
127
|
} })] })));
|
|
123
128
|
};
|
|
124
129
|
exports.default = ShapeImage;
|
|
125
|
-
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;
|