pds-dev-kit-web 2.0.9-alpha.7 → 2.0.9

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 (9) hide show
  1. package/dist/src/sub/DynamicLayout/components/Section/Section.js +10 -2
  2. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipCard.js +1 -1
  3. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/SectionContents.js +2 -2
  4. package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/EmptyMembershipSheet.js +4 -1
  5. package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateB/desktop/components/SectionContents.js +2 -2
  6. package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/MembershipSectionItem.js +1 -1
  7. package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.js +1 -1
  8. package/package.json +1 -1
  9. package/release-note.md +7 -3
package/dist/src/sub/DynamicLayout/components/Section/Section.js CHANGED
@@ -75,9 +75,17 @@ function Background() {
75
75
  function onResize() {
76
76
  setYoutubeSize(getResponsiveYoutubeSize());
77
77
  }
78
- window.addEventListener('resize', onResize);
78
+ var element = backgroundRef.current;
79
+ if (!element)
80
+ return;
81
+ var observer = new ResizeObserver(function (entries) {
82
+ entries.forEach(function () {
83
+ onResize();
84
+ });
85
+ });
86
+ observer.observe(element);
79
87
  return function () {
80
- window.removeEventListener('resize', onResize);
88
+ observer.disconnect();
81
89
  };
82
90
  }, []);
83
91
  var backgroundMedia = (0, react_1.useMemo)(function () {
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipCard.js CHANGED
@@ -44,7 +44,7 @@ function MembershipCard(_a) {
44
44
  return ((0, jsx_runtime_1.jsxs)(S_MembershipCardBox, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipCardContentBox, { children: [(0, jsx_runtime_1.jsx)(components_1.ImageView, { src: backgroundImageSrc, width: 288, height: 455, scaleType: "cover" }, void 0), (0, jsx_runtime_1.jsx)(S_GlossyOverlayWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.ImageView, { src: constants_1.COMMON_OVERLAY_IMAGE_SRC, width: 288, height: 455, ratio: "10_16", scaleType: "cover" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(S_LogoImageWrapper, __assign({ designSchema: designSchema }, { children: (0, jsx_runtime_1.jsx)(components_1.ImageView, { src: logoImageSrc, width: "responsive", scaleType: "contain" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_MembershipCardOverlay, { overlayType: overlayType, overlayColorPrimary: overlayColorPrimary, overlayColorSecondary: overlayColorSecondary }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(S_MembershipCardShadow, {}, void 0)] }, void 0));
45
45
  }
46
46
  var S_MembershipCardBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
47
- var S_GlossyOverlayWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n inset: 0;\n position: absolute;\n"], ["\n inset: 0;\n position: absolute;\n"])));
47
+ var S_GlossyOverlayWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n inset: 0;\n position: absolute;\n z-index: 4;\n"], ["\n inset: 0;\n position: absolute;\n z-index: 4;\n"])));
48
48
  var S_MembershipCardContentBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 12px;\n height: 455px;\n min-width: 288px;\n overflow: hidden;\n position: relative;\n"], ["\n border-radius: 12px;\n height: 455px;\n min-width: 288px;\n overflow: hidden;\n position: relative;\n"])));
49
49
  var designSchemaA = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n left: 10%;\n top: 6%;\n width: 50%;\n"], ["\n left: 10%;\n top: 6%;\n width: 50%;\n"])));
50
50
  var designSchemaB = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 60%;\n"], ["\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 60%;\n"])));
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/SectionContents.js CHANGED
@@ -33,8 +33,8 @@ function SectionContents() {
33
33
  return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySectionData: !title && !description && !buttonAlphaLinkSrc }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, styleTheme: "headingBold" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }), void 0));
34
34
  }
35
35
  var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), function (_a) {
36
- var isEmptySectionData = _a.isEmptySectionData, theme = _a.theme;
37
- return isEmptySectionData ? 0 : theme.spacing.spacingG;
36
+ var isEmptySectionData = _a.isEmptySectionData;
37
+ return (isEmptySectionData ? 0 : '80px');
38
38
  });
39
39
  var S_DescriptionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-top: ", ";\n"], ["\n padding-top: ", ";\n"])), function (_a) {
40
40
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/EmptyMembershipSheet.js CHANGED
@@ -41,7 +41,10 @@ function MembershipSheet() {
41
41
  marginBottom: '96px'
42
42
  }, width: "100%", height: "180px", shapeType: "round" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: t('str_5299'), styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].emptyMembershipSheetTextLabelColor }, void 0) }), void 0) }, void 0));
43
43
  }
44
- var S_EmptyMembershipSheet = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: 80px;\n padding: 0 ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: 80px;\n padding: 0 ", ";\n"])), function (_a) {
44
+ var S_EmptyMembershipSheet = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n padding: 0 ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n padding: 0 ", ";\n"])), function (_a) {
45
+ var theme = _a.theme;
46
+ return theme.spacing.spacingG;
47
+ }, function (_a) {
45
48
  var theme = _a.theme;
46
49
  return theme.spacing.spacingG;
47
50
  }, function (_a) {
package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateB/desktop/components/SectionContents.js CHANGED
@@ -33,8 +33,8 @@ function SectionContents() {
33
33
  return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySectionData: !title && !description && !buttonAlphaLinkSrc }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, styleTheme: "headingBold" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }), void 0));
34
34
  }
35
35
  var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), function (_a) {
36
- var isEmptySectionData = _a.isEmptySectionData, theme = _a.theme;
37
- return isEmptySectionData ? 0 : theme.spacing.spacingG;
36
+ var isEmptySectionData = _a.isEmptySectionData;
37
+ return (isEmptySectionData ? 0 : '80px');
38
38
  });
39
39
  var S_DescriptionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-top: ", ";\n"], ["\n padding-top: ", ";\n"])), function (_a) {
40
40
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/MembershipSectionItem.js CHANGED
@@ -175,7 +175,7 @@ function MembershipCard(_a) {
175
175
  return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { position: 'relative' } }, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipCardBox, { children: [(0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: backgroundImageSrc, width: 288, height: 455, scaleType: "cover" }, void 0), (0, jsx_runtime_1.jsx)(S_GlossyOverlayWrapper, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: constants_1.COMMON_OVERLAY_IMAGE_SRC, width: 288, height: 455, ratio: "10_16", scaleType: "cover" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(S_LogoImageWrapper, __assign({ designSchema: designSchema }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: logoImageSrc, width: "responsive", scaleType: "contain" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_MembershipCardOverlay, { overlayType: overlayType, overlayColorPrimary: overlayColorPrimary, overlayColorSecondary: overlayColorSecondary }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(S_MembershipCardShadow, {}, void 0)] }), void 0));
176
176
  }
177
177
  var S_MembershipCardBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-radius: 12px;\n height: 455px;\n min-width: 288px;\n overflow: hidden;\n position: relative;\n"], ["\n border-radius: 12px;\n height: 455px;\n min-width: 288px;\n overflow: hidden;\n position: relative;\n"])));
178
- var S_GlossyOverlayWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n inset: 0;\n position: absolute;\n"], ["\n inset: 0;\n position: absolute;\n"])));
178
+ var S_GlossyOverlayWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n inset: 0;\n position: absolute;\n z-index: 4;\n"], ["\n inset: 0;\n position: absolute;\n z-index: 4;\n"])));
179
179
  var designSchemaA = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n left: 10%;\n top: 6%;\n width: 50%;\n"], ["\n left: 10%;\n top: 6%;\n width: 50%;\n"])));
180
180
  var designSchemaB = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 60%;\n"], ["\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 60%;\n"])));
181
181
  var S_LogoImageWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: center;\n position: absolute;\n z-index: 3;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n justify-content: center;\n position: absolute;\n z-index: 3;\n\n ", "\n"])), function (_a) {
package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.js CHANGED
@@ -181,7 +181,7 @@ var S_MembershipCardBox = styled_components_1.default.div(templateObject_7 || (t
181
181
  var cardWidth = _a.cardWidth;
182
182
  return (cardWidth ? cardWidth + "px" : '100%');
183
183
  });
184
- var S_GlossyOverlayWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n inset: 0;\n position: absolute;\n"], ["\n inset: 0;\n position: absolute;\n"])));
184
+ var S_GlossyOverlayWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n inset: 0;\n position: absolute;\n z-index: 4;\n"], ["\n inset: 0;\n position: absolute;\n z-index: 4;\n"])));
185
185
  var designSchemaA = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n left: 10%;\n top: 6%;\n"], ["\n left: 10%;\n top: 6%;\n"])));
186
186
  var designSchemaB = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n"], ["\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n"])));
187
187
  var S_LogoImageWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: center;\n position: absolute;\n width: ", ";\n z-index: 3;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n justify-content: center;\n position: absolute;\n width: ", ";\n z-index: 3;\n\n ", "\n"])), function (_a) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.0.9-alpha.7",
3
+ "version": "2.0.9",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,12 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.0.9-alpha.7]
2
+ ## [v2.0.9]
3
3
 
4
- ## alpha|https://staging.storybook.publ.biz/
4
+ ## release|https://design.storybook.publ.biz/
5
5
 
6
6
  ### sub
7
7
  * DynamicLayout
8
- * membership section 디자인 수정
8
+ * membership section 생성
9
+ * programmedSectionComponent 관련 에러 수정
10
+ * ISection 인터페이스 수정
11
+ ### Color
12
+ * 컬러 키 값 23.04.29 00시 58분 기준 싱크