pds-dev-kit-web 1.8.0 → 1.8.1

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 (11) hide show
  1. package/README.md +2 -2
  2. package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/templates/TemplateA/TemplateA.js +10 -17
  3. package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateA/TemplateA.js +2 -2
  4. package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateB/TemplateB.js +2 -2
  5. package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateC/TemplateC.js +2 -2
  6. package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateD/TemplateD.js +2 -2
  7. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js +1 -1
  8. package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateA/TemplateA.js +1 -1
  9. package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateB/TemplateB.js +1 -1
  10. package/package.json +1 -1
  11. package/release-note.md +12 -6
package/README.md CHANGED
@@ -8,5 +8,5 @@ publ design system 프로젝트
8
8
 
9
9
  ## 참고 문서
10
10
 
11
- 해당 패키지 버전은 PDS 문서 1.6 버전을 따르고 있음
12
- [PDS 1.6 문서 링크](https://design.docs.publ.biz/pds-project/)
11
+ 해당 패키지 버전은 PDS 문서 1.8 버전을 따르고 있음
12
+ [PDS 1.8 문서 링크](https://design.docs.publ.biz/pds-project/)
package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/templates/TemplateA/TemplateA.js CHANGED
@@ -65,12 +65,10 @@ function TemplateA() {
65
65
  react_1.default.createElement(Item_1.Item, __assign({}, item),
66
66
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
67
67
  react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 120, ratio: "1_1", shapeType: "rectangle", scaleType: "contain" }))),
68
- react_1.default.createElement(S_ItemBodyWrapper, null,
69
- itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
70
- itemDescription && (react_1.default.createElement(react_1.default.Fragment, null,
71
- react_1.default.createElement(S_CustomDividerBox, null,
72
- react_1.default.createElement(S_CustomWidthDivider, null)),
73
- react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body2Regular" })))))));
68
+ itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
69
+ itemDescription && (react_1.default.createElement(react_1.default.Fragment, null,
70
+ react_1.default.createElement(S_CustomDivider, null),
71
+ react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body2Regular" }))))));
74
72
  }))),
75
73
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
76
74
  react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
@@ -90,35 +88,30 @@ var S_ItemsWrapper = styled_components_1.default.div(templateObject_3 || (templa
90
88
  var theme = _a.theme;
91
89
  return theme.spacing.spacingH;
92
90
  });
93
- var S_ItemWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: calc(100% / ", ");\n ", ";\n\n margin-left: ", ";\n"], ["\n width: calc(100% / ", ");\n ", ";\n\n margin-left: ", ";\n"])), function (_a) {
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) {
94
92
  var totalItems = _a.totalItems;
95
93
  return totalItems;
96
94
  }, function (_a) {
97
95
  var totalItems = _a.totalItems;
98
96
  return totalItems <= 2 && "max-width: 360px;";
99
97
  }, function (_a) {
100
- var theme = _a.theme, isFirstItem = _a.isFirstItem;
101
- if (isFirstItem) {
102
- return 0;
103
- }
98
+ var theme = _a.theme;
104
99
  return theme.spacing.spacingF;
105
100
  });
106
101
  var S_ItemImageBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n margin: ", " auto;\n"], ["\n display: flex;\n justify-content: center;\n margin: ", " auto;\n"])), function (_a) {
107
102
  var theme = _a.theme;
108
103
  return theme.spacing.spacingE;
109
104
  });
110
- var S_ItemBodyWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n"])));
111
- var S_CustomDividerBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
105
+ var S_CustomDivider = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin: ", " auto;\n width: 24px;\n height: 3px;\n background-color: ", ";\n"], ["\n margin: ", " auto;\n width: 24px;\n height: 3px;\n background-color: ", ";\n"])), function (_a) {
112
106
  var theme = _a.theme;
113
107
  return theme.spacing.spacingE;
114
- });
115
- var S_CustomWidthDivider = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 24px;\n height: 3px;\n background-color: ", ";\n"], ["\n width: 24px;\n height: 3px;\n background-color: ", ";\n"])), function (_a) {
108
+ }, function (_a) {
116
109
  var theme = _a.theme;
117
110
  return theme.ui_cpnt_divider_white_01;
118
111
  });
119
- var S_ButtonBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n margin: ", " 0;\n"], ["\n display: flex;\n justify-content: center;\n margin: ", " 0;\n"])), function (_a) {
112
+ var S_ButtonBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n margin: ", " 0;\n"], ["\n display: flex;\n justify-content: center;\n margin: ", " 0;\n"])), function (_a) {
120
113
  var theme = _a.theme;
121
114
  return theme.spacing.spacingH;
122
115
  });
123
116
  exports.default = TemplateA;
124
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
117
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateA/TemplateA.js CHANGED
@@ -46,8 +46,8 @@ function TemplateA() {
46
46
  buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
47
47
  buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
48
48
  }
49
- var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: calc(100vh - 64px);\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n width: 100%;\n height: calc(100vh - 64px);\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
50
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 0 auto;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 0 auto;\n"])));
49
+ var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n min-height: calc(100vh - 64px);\n height: auto;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n width: 100%;\n min-height: calc(100vh - 64px);\n height: auto;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
50
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n"])));
51
51
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
52
52
  var theme = _a.theme, hasTitle = _a.hasTitle;
53
53
  return hasTitle && theme.spacing.spacingF;
package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateB/TemplateB.js CHANGED
@@ -46,8 +46,8 @@ function TemplateB() {
46
46
  buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
47
47
  buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
48
48
  }
49
- var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: calc(100vh - 64px);\n display: flex;\n justify-content: center;\n"], ["\n width: 100%;\n height: calc(100vh - 64px);\n display: flex;\n justify-content: center;\n"])));
50
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n"])));
49
+ var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n min-height: calc(100vh - 64px);\n height: auto;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n"], ["\n width: 100%;\n min-height: calc(100vh - 64px);\n height: auto;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n"])));
50
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px 0;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px 0;\n"])));
51
51
  var S_ContentsBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n max-width: 800px;\n position: absolute;\n bottom: 13vh;\n"], ["\n max-width: 800px;\n position: absolute;\n bottom: 13vh;\n"])));
52
52
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
53
53
  var theme = _a.theme, hasTitle = _a.hasTitle;
package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateC/TemplateC.js CHANGED
@@ -46,8 +46,8 @@ function TemplateC() {
46
46
  buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
47
47
  buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
48
48
  }
49
- var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 80vh;\n display: flex;\n justify-content: center;\n"], ["\n width: 100%;\n height: 80vh;\n display: flex;\n justify-content: center;\n"])));
50
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n display: flex;\n align-items: center;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n display: flex;\n align-items: center;\n"])));
49
+ var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n min-height: 80vh;\n height: auto;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n"], ["\n width: 100%;\n min-height: 80vh;\n height: auto;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n"])));
50
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n display: flex;\n align-items: center;\n margin: 160px 0;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n display: flex;\n align-items: center;\n margin: 160px 0;\n"])));
51
51
  var S_ContentsBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n max-width: 800px;\n"], ["\n max-width: 800px;\n"])));
52
52
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
53
53
  var theme = _a.theme, hasTitle = _a.hasTitle;
package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateD/TemplateD.js CHANGED
@@ -46,8 +46,8 @@ function TemplateD() {
46
46
  buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
47
47
  buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
48
48
  }
49
- var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 80vh;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n width: 100%;\n height: 80vh;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
50
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 0 auto;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 0 auto;\n"])));
49
+ var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n min-height: 80vh;\n height: auto;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n width: 100%;\n min-height: 80vh;\n height: auto;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
50
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n"])));
51
51
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
52
52
  var theme = _a.theme, hasTitle = _a.hasTitle;
53
53
  return hasTitle && theme.spacing.spacingF;
package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js CHANGED
@@ -65,7 +65,7 @@ function TemplateB() {
65
65
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
66
66
  buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
67
67
  react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
68
- filteredSortedItems && (react_1.default.createElement(S_CarouselBox, null,
68
+ filteredSortedItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
69
69
  react_1.default.createElement(components_1.Carousel, { spaceBetween: 24, slidesPerView: 1, mode: carouselAutoplayMode === 'AUTO'
70
70
  ? 'autoplay'
71
71
  : carouselInfiniteLoopMode === 'USE'
package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateA/TemplateA.js CHANGED
@@ -54,7 +54,7 @@ function TemplateA() {
54
54
  !((_b = filteredItems[0]) === null || _b === void 0 ? void 0 : _b.properties.body);
55
55
  return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing }, filteredItems.length > 0 && (react_1.default.createElement(Item_1.Item, __assign({}, filteredItems[0]),
56
56
  filteredItems[0].properties.logoImageSrc && (react_1.default.createElement(S_ImageBox, null,
57
- react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
57
+ react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", shapeType: "rectangle", src: filteredItems[0].properties.logoImageSrc }))),
58
58
  filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex }))))));
59
59
  }
60
60
  var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: ", " 0;\n padding: 0 ", ";\n"], ["\n margin: ", " 0;\n padding: 0 ", ";\n"])), function (_a) {
package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateB/TemplateB.js CHANGED
@@ -54,7 +54,7 @@ function TemplateB() {
54
54
  !((_b = filteredItems[0]) === null || _b === void 0 ? void 0 : _b.properties.body);
55
55
  return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing }, filteredItems.length > 0 && (react_1.default.createElement(Item_1.Item, __assign({}, filteredItems[0]),
56
56
  filteredItems[0].properties.logoImageSrc && (react_1.default.createElement(S_ImageBox, null,
57
- react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
57
+ react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", shapeType: "rectangle", src: filteredItems[0].properties.logoImageSrc }))),
58
58
  filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex, textAlign: "center" }))))));
59
59
  }
60
60
  var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: ", " 0;\n padding: 0 ", ";\n"], ["\n margin: ", " 0;\n padding: 0 ", ";\n"])), function (_a) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.8.0",
3
+ "version": "1.8.1",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,9 +1,15 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.8.0]
2
+ ## [v1.8.1]
3
3
 
4
- ### package
5
- * dependencies에 swiper 추가
6
4
  ### sub
7
- * DynamicLayout 생성
8
- ### Color
9
- * 컬러 키 값 23.01.05 14시 43분 기준 싱크
5
+ * DynamicLayout 디테일 수정
6
+ * FooterSection TemplateA/B
7
+ * logoImage의 shapeType을 rectangle로 변경
8
+ * IntroSection TemplateA/B/C/D
9
+ * 콘텐츠 영역 위아래에 margin 160px 추가
10
+ * InfoBoxSection TemplateA
11
+ * Item의 공백없는 텍스트가 박스 밖으로 나가는 이슈 수정
12
+ * flex박스인 ItemBodyWrapper 삭제
13
+ * ContentsCarouselSection TemplateB
14
+ * 내용이 없음에도 섹션영역이 표시되는 이슈 수정
15
+ * array && 로 되어있던 조건을 array.length>0 으로 수정