pds-dev-kit-web 1.8.2 → 1.8.3

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 (5) hide show
  1. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateA/TemplateA.js +6 -5
  2. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateB/TemplateB.js +7 -6
  3. package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/templates/TemplateA/TemplateA.js +2 -2
  4. package/package.json +1 -1
  5. package/release-note.md +7 -17
package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateA/TemplateA.js CHANGED
@@ -36,19 +36,20 @@ function TemplateA() {
36
36
  var hasNothing = !sectionContentMediaSrc && !title && !description && !buttonAlphaLinkSrc;
37
37
  var imageBoxRef = (0, react_1.useRef)(null);
38
38
  var contentsBodyRef = (0, react_1.useRef)(null);
39
- var handleResize = function () {
39
+ var handleImageHeight = function () {
40
40
  var imageBox = imageBoxRef.current;
41
41
  var contentsBody = contentsBodyRef.current;
42
42
  if (!imageBox || !contentsBody)
43
43
  return;
44
44
  imageBox.style.height = contentsBody.offsetHeight + "px";
45
45
  };
46
- (0, react_1.useEffect)(function () {
47
- window.addEventListener('resize', handleResize);
46
+ (0, react_1.useLayoutEffect)(function () {
47
+ handleImageHeight();
48
+ window.addEventListener('resize', handleImageHeight);
48
49
  return function () {
49
- window.removeEventListener('resize', handleResize);
50
+ window.removeEventListener('resize', handleImageHeight);
50
51
  };
51
- }, [contentsBodyRef]);
52
+ }, [imageBoxRef, contentsBodyRef]);
52
53
  return (react_1.default.createElement(S_ContentsAreaBox, { hasNothing: hasNothing },
53
54
  react_1.default.createElement(S_ContentsArea, null,
54
55
  sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, { ref: imageBoxRef },
package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateB/TemplateB.js CHANGED
@@ -36,19 +36,20 @@ function TemplateB() {
36
36
  var hasNothing = !sectionContentMediaSrc && !title && !description && !buttonAlphaLinkSrc;
37
37
  var imageBoxRef = (0, react_1.useRef)(null);
38
38
  var contentsBodyRef = (0, react_1.useRef)(null);
39
- var handleResize = function () {
39
+ var handleImageHeight = function () {
40
40
  var imageBox = imageBoxRef.current;
41
41
  var contentsBody = contentsBodyRef.current;
42
42
  if (!imageBox || !contentsBody)
43
43
  return;
44
44
  imageBox.style.height = contentsBody.offsetHeight + "px";
45
45
  };
46
- (0, react_1.useEffect)(function () {
47
- window.addEventListener('resize', handleResize);
46
+ (0, react_1.useLayoutEffect)(function () {
47
+ handleImageHeight();
48
+ window.addEventListener('resize', handleImageHeight);
48
49
  return function () {
49
- window.removeEventListener('resize', handleResize);
50
+ window.removeEventListener('resize', handleImageHeight);
50
51
  };
51
- }, [contentsBodyRef]);
52
+ }, [imageBoxRef, contentsBodyRef]);
52
53
  return (react_1.default.createElement(S_ContentsAreaBox, { hasNothing: hasNothing },
53
54
  react_1.default.createElement(S_ContentsArea, null,
54
55
  react_1.default.createElement(S_ContentsBodyWrapper, null,
@@ -58,7 +59,7 @@ function TemplateB() {
58
59
  react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
59
60
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
60
61
  react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }))))),
61
- sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
62
+ sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, { ref: imageBoxRef },
62
63
  react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }))))))));
63
64
  }
64
65
  var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n justify-content: center;\n margin: ", " 0;\n"], ["\n width: 100%;\n display: flex;\n justify-content: center;\n margin: ", " 0;\n"])), function (_a) {
package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/templates/TemplateA/TemplateA.js CHANGED
@@ -88,9 +88,9 @@ var S_ItemsWrapper = styled_components_1.default.div(templateObject_3 || (templa
88
88
  var theme = _a.theme;
89
89
  return theme.spacing.spacingH;
90
90
  });
91
- var S_ItemWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: calc(100% / ", ");\n ", ";\n\n &:not(:first-child) {\n margin-left: ", ";\n }\n"], ["\n width: calc(100% / ", ");\n ", ";\n\n &:not(:first-child) {\n margin-left: ", ";\n }\n"])), function (_a) {
91
+ var S_ItemWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: calc(\n ", "\n );\n ", ";\n\n &:not(:first-child) {\n margin-left: ", ";\n }\n"], ["\n width: calc(\n ", "\n );\n ", ";\n\n &:not(:first-child) {\n margin-left: ", ";\n }\n"])), function (_a) {
92
92
  var totalItems = _a.totalItems;
93
- return totalItems;
93
+ return 100 / totalItems + "% - " + (32 * (totalItems - 1)) / totalItems + "px";
94
94
  }, function (_a) {
95
95
  var totalItems = _a.totalItems;
96
96
  return totalItems <= 2 && "max-width: 360px;";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.8.2",
3
+ "version": "1.8.3",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,22 +1,12 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.8.2]
2
+ ## [v1.8.3]
3
3
 
4
- ### component
5
- * DynamicDesktopNavBar
6
- * NAV_PAGE 대응 추가
7
- * Icon
8
- * ic_more의 viewBox를 0 0 20 20 에서 0 0 24 24로 변경
9
4
  ### sub
10
5
  * DynamicLayout 디테일 수정
11
6
  * Desktop
12
- * FooterSection TemplateA/B
13
- * logoImage의 shapeType을 rectangle로 변경 (누락된 부분 추가)
14
- * IntroSection TemplateB
15
- * contentsArea가 섹션을 뚫고 나가는 이슈 수정
16
- * ContentsSection TemplateA
17
- * Image사이즈가 contents에 따라 늘어나지 않는 이슈 수정
18
- * item의 linkMethod를 section properties로 이동 (itemLinkMethod)
19
- * Mobile
20
- * item의 linkMethod를 section properties로 이동 (itemLinkMethod)
21
- ### color
22
- * 컬러 키 값 23.01.06 12시 59분 기준 싱크
7
+ * Contents섹션
8
+ * TemplateA,B
9
+ * ImageBox의 사이즈를 조정하는 함수를 layoutEffect에 실행하도록 추가.
10
+ * InfoBox섹션
11
+ * TemplateA
12
+ * Item의 넓이를 Item간의 간격을 계산하여 구체적으로 계산하도록 수정