pds-dev-kit-web 1.3.10 → 1.3.13

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 (33) hide show
  1. package/dist/src/common/assets/icons/fill/Question.d.ts +4 -0
  2. package/dist/src/common/assets/icons/fill/Question.js +34 -0
  3. package/dist/src/common/assets/icons/fill/index.d.ts +1 -0
  4. package/dist/src/common/assets/icons/fill/index.js +2 -0
  5. package/dist/src/common/assets/icons/line/Requirement.d.ts +4 -0
  6. package/dist/src/common/assets/icons/line/Requirement.js +34 -0
  7. package/dist/src/common/assets/icons/line/index.d.ts +1 -0
  8. package/dist/src/common/assets/icons/line/index.js +2 -0
  9. package/dist/src/common/styles/colorSet/UIColor.json +1 -1
  10. package/dist/src/common/styles/colorSet/index.d.ts +211 -211
  11. package/dist/src/common/styles/colorSet/index.js +4 -4
  12. package/dist/src/common/types/{comopnents.d.ts → components.d.ts} +5 -0
  13. package/dist/src/common/types/{comopnents.js → components.js} +0 -0
  14. package/dist/src/common/types/index.d.ts +1 -1
  15. package/dist/src/common/types/index.js +1 -1
  16. package/dist/src/desktop/components/AdminListItem/AdminListItem.js +12 -9
  17. package/dist/src/desktop/components/DesktopBasicModal/DesktopBasicModal.d.ts +2 -1
  18. package/dist/src/desktop/components/DesktopBasicModal/DesktopBasicModal.js +18 -15
  19. package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.d.ts +9 -4
  20. package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js +81 -38
  21. package/dist/src/desktop/components/TextLabel/TextLabel.d.ts +3 -1
  22. package/dist/src/desktop/components/TextLabel/TextLabel.js +12 -5
  23. package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.d.ts +6 -4
  24. package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js +38 -16
  25. package/dist/src/desktop/layout/LayoutWS/LayoutWS.js +1 -1
  26. package/dist/src/mobile/components/MobileBasicModal/MobileBasicModal.d.ts +2 -1
  27. package/dist/src/mobile/components/MobileBasicModal/MobileBasicModal.js +18 -15
  28. package/dist/src/mobile/components/MobileTabBar/MobileTabBar.d.ts +6 -4
  29. package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js +21 -12
  30. package/dist/src/mobile/components/TextLabel/TextLabel.d.ts +3 -1
  31. package/dist/src/mobile/components/TextLabel/TextLabel.js +10 -3
  32. package/package.json +1 -1
  33. package/release-note.md +9 -7
package/dist/src/desktop/components/AdminListItem/AdminListItem.js CHANGED
@@ -124,9 +124,10 @@ function AdminListItem(_a) {
124
124
  react_1.default.createElement(S_SelectionColumn, { rowSize: rowSize }, selectionMode === 'multi' && (react_1.default.createElement(S_Selection, null,
125
125
  react_1.default.createElement(Checkbox_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' ? 'disabled' : 'normal' })))),
126
126
  react_1.default.createElement(S_ImageColumn, { rowSize: rowSize },
127
- column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && (react_1.default.createElement(S_ImageWrapper, null,
127
+ column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && (react_1.default.createElement(S_ImageWrapper, { rowSize: rowSize },
128
128
  react_1.default.createElement(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageShapeType === 'circular' ? 64 : 120, ratio: imageRatio, scaleType: "cover", radius: imageShapeType === 'round' ? imageRadius : undefined }))),
129
- (rowSize === 'low' || rowSize === 'medium') && (react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 2 })),
129
+ (rowSize === 'low' || rowSize === 'medium') && (react_1.default.createElement(S_Column, null,
130
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 2 }))),
130
131
  rowSize === 'high' && (react_1.default.createElement(S_TextWrapper, { ref: contentRef, hasScroll: hasScroll },
131
132
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary" })))),
132
133
  column3Text && (react_1.default.createElement(S_Column, { columnSize: column3TextWidth },
@@ -180,11 +181,14 @@ var S_QuickActionButton = styled_components_1.default.div(templateObject_12 || (
180
181
  return (disabled ? 'default' : 'pointer');
181
182
  });
182
183
  var S_Selection = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"])));
183
- var S_ImageWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
184
+ var S_ImageWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n margin-right: ", ";\n\n ", "\n"], ["\n margin-right: ", ";\n\n ", "\n"])), function (_a) {
184
185
  var theme = _a.theme;
185
186
  return theme.spacing.spacingD;
187
+ }, function (_a) {
188
+ var rowSize = _a.rowSize;
189
+ return rowSize === 'high' && (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n "], ["\n align-items: center;\n display: flex;\n height: 100%;\n "])));
186
190
  });
187
- var S_ImageColumn = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n flex: 1;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n ", "\n"], ["\n flex: 1;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n ", "\n"])), function (_a) {
191
+ var S_ImageColumn = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n flex: 1;\n overflow: auto;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n ", "\n"], ["\n flex: 1;\n overflow: auto;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n ", "\n"])), function (_a) {
188
192
  var theme = _a.theme, rowSize = _a.rowSize;
189
193
  return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
190
194
  }, function (_a) {
@@ -199,14 +203,13 @@ var S_ImageColumn = styled_components_1.default.div(templateObject_17 || (templa
199
203
  }, function (_a) {
200
204
  var rowSize = _a.rowSize;
201
205
  return rowSize === 'high'
202
- ? (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n box-sizing: border-box;\n height: 200px;\n "], ["\n box-sizing: border-box;\n height: 200px;\n "]))) : (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n "], ["\n align-items: center;\n display: flex;\n "])));
206
+ ? (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n height: 200px;\n "], ["\n box-sizing: border-box;\n display: flex;\n height: 200px;\n "]))) : (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n "], ["\n align-items: center;\n display: flex;\n "])));
203
207
  });
204
- var S_TextWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n height: 100%;\n\n ", "\n"], ["\n height: 100%;\n\n ", "\n"])), function (_a) {
208
+ var S_TextWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n height: 100%;\n overflow: auto;\n\n ", "\n"], ["\n height: 100%;\n overflow: auto;\n\n ", "\n"])), function (_a) {
205
209
  var hasScroll = _a.hasScroll;
206
- return hasScroll
207
- ? (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n & > div {\n height: 100%;\n overflow-y: auto;\n }\n "], ["\n & > div {\n height: 100%;\n overflow-y: auto;\n }\n "]))) : (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n "], ["\n align-items: center;\n display: flex;\n "])));
210
+ return !hasScroll && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n "], ["\n align-items: center;\n display: flex;\n "])));
208
211
  });
209
- var S_Column = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding: ", ";\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n display: flex;\n padding: ", ";\n\n ", ";\n ", ";\n"])), function (_a) {
212
+ var S_Column = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n overflow: auto;\n padding: ", ";\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n display: flex;\n overflow: auto;\n padding: ", ";\n\n ", ";\n ", ";\n"])), function (_a) {
210
213
  var theme = _a.theme;
211
214
  return theme.spacing.spacingC;
212
215
  }, function (_a) {
package/dist/src/desktop/components/DesktopBasicModal/DesktopBasicModal.d.ts CHANGED
@@ -3,6 +3,7 @@ import { PDSTextType } from '../../../common';
3
3
  declare type DesktopBasicModalProps = {
4
4
  titleText: PDSTextType;
5
5
  contentText?: PDSTextType;
6
+ bodySpacingMode?: 'none' | 'use';
6
7
  btnMode?: 'mbtn_amount1' | 'mbtn_amount2' | 'mbtn_amount3';
7
8
  mBtn1Text: PDSTextType;
8
9
  mBtn2Text?: PDSTextType;
@@ -19,5 +20,5 @@ declare type DesktopBasicModalProps = {
19
20
  onClickMBtn3?: () => void;
20
21
  children?: React.ReactNode;
21
22
  };
22
- declare function DesktopBasicModal({ titleText, contentText, btnMode, mBtn1Text, mBtn2Text, mBtn3Text, mBtn1State, mBtn2State, mBtn3State, mBtn1Type, mBtn2Type, mBtn3Type, onClickMBtn1, onClickMBtn2, onClickMBtn3, size, children }: DesktopBasicModalProps): React.ReactPortal;
23
+ declare function DesktopBasicModal({ titleText, contentText, bodySpacingMode, btnMode, mBtn1Text, mBtn2Text, mBtn3Text, mBtn1State, mBtn2State, mBtn3State, mBtn1Type, mBtn2Type, mBtn3Type, onClickMBtn1, onClickMBtn2, onClickMBtn3, size, children }: DesktopBasicModalProps): React.ReactPortal;
23
24
  export default DesktopBasicModal;
package/dist/src/desktop/components/DesktopBasicModal/DesktopBasicModal.js CHANGED
@@ -28,12 +28,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importStar(require("react"));
30
30
  var react_dom_1 = __importDefault(require("react-dom"));
31
- var styled_components_1 = __importDefault(require("styled-components"));
31
+ var styled_components_1 = __importStar(require("styled-components"));
32
32
  var hybrid_1 = require("../../../hybrid");
33
33
  var MainButton_1 = require("../MainButton");
34
34
  var TextLabel_1 = require("../TextLabel");
35
35
  function DesktopBasicModal(_a) {
36
- var titleText = _a.titleText, contentText = _a.contentText, _b = _a.btnMode, btnMode = _b === void 0 ? 'mbtn_amount2' : _b, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _c = _a.mBtn1State, mBtn1State = _c === void 0 ? 'normal' : _c, _d = _a.mBtn2State, mBtn2State = _d === void 0 ? 'normal' : _d, _e = _a.mBtn3State, mBtn3State = _e === void 0 ? 'normal' : _e, _f = _a.mBtn1Type, mBtn1Type = _f === void 0 ? 'button' : _f, _g = _a.mBtn2Type, mBtn2Type = _g === void 0 ? 'button' : _g, _h = _a.mBtn3Type, mBtn3Type = _h === void 0 ? 'button' : _h, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, _j = _a.size, size = _j === void 0 ? 'large' : _j, children = _a.children;
36
+ var titleText = _a.titleText, contentText = _a.contentText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, _c = _a.btnMode, btnMode = _c === void 0 ? 'mbtn_amount2' : _c, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _d = _a.mBtn1State, mBtn1State = _d === void 0 ? 'normal' : _d, _e = _a.mBtn2State, mBtn2State = _e === void 0 ? 'normal' : _e, _f = _a.mBtn3State, mBtn3State = _f === void 0 ? 'normal' : _f, _g = _a.mBtn1Type, mBtn1Type = _g === void 0 ? 'button' : _g, _h = _a.mBtn2Type, mBtn2Type = _h === void 0 ? 'button' : _h, _j = _a.mBtn3Type, mBtn3Type = _j === void 0 ? 'button' : _j, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, _k = _a.size, size = _k === void 0 ? 'large' : _k, children = _a.children;
37
37
  var container = (0, react_1.useState)(function () {
38
38
  var modalRoot = document.createElement('div');
39
39
  modalRoot.setAttribute('id', 'DesktopBasicModal');
@@ -57,7 +57,7 @@ function DesktopBasicModal(_a) {
57
57
  react_1.default.createElement(S_ModalWrapper, { size: size },
58
58
  react_1.default.createElement(S_Header, null,
59
59
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" })),
60
- react_1.default.createElement(S_Body, null,
60
+ react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode },
61
61
  contentText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })),
62
62
  children && children),
63
63
  react_1.default.createElement(hybrid_1.Divider, null),
@@ -87,7 +87,7 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
87
87
  medium: '688px',
88
88
  small: '400px'
89
89
  };
90
- return sizes[size];
90
+ return size && sizes[size];
91
91
  });
92
92
  var S_Left = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
93
93
  var theme = _a.theme;
@@ -98,30 +98,33 @@ var S_Btn2Wrapper = styled_components_1.default.div(templateObject_4 || (templat
98
98
  return theme.spacing.spacingB;
99
99
  });
100
100
  var S_Right = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
101
- var S_Header = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin: 0 ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n"], ["\n margin: 0 ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n"])), function (_a) {
101
+ var S_Header = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin: 0 ", ";\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin: 0 ", ";\n margin-bottom: ", ";\n margin-top: ", ";\n"])), function (_a) {
102
102
  var theme = _a.theme;
103
103
  return theme.spacing.spacingE;
104
104
  }, function (_a) {
105
105
  var theme = _a.theme;
106
- return theme.spacing.spacingE;
106
+ return theme.spacing.spacingC;
107
107
  }, function (_a) {
108
108
  var theme = _a.theme;
109
- return theme.spacing.spacingC;
109
+ return theme.spacing.spacingE;
110
110
  });
111
- var S_Body = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n flex: 1;\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n overflow: auto;\n"], ["\n flex: 1;\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n overflow: auto;\n"])), function (_a) {
111
+ var S_Body = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n flex: 1;\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n overflow: auto;\n\n ", "\n"], ["\n flex: 1;\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n overflow: auto;\n\n ", "\n"])), function (_a) {
112
112
  var theme = _a.theme;
113
- return theme.spacing.spacingD;
113
+ return theme.spacing.spacingF;
114
114
  }, function (_a) {
115
115
  var theme = _a.theme;
116
116
  return theme.spacing.spacingE;
117
117
  }, function (_a) {
118
118
  var theme = _a.theme;
119
- return theme.spacing.spacingF;
119
+ return theme.spacing.spacingE;
120
120
  }, function (_a) {
121
121
  var theme = _a.theme;
122
- return theme.spacing.spacingE;
122
+ return theme.spacing.spacingD;
123
+ }, function (_a) {
124
+ var bodySpacingMode = _a.bodySpacingMode;
125
+ return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: 0;\n margin-left: 0;\n margin-right: 0;\n "], ["\n margin-bottom: 0;\n margin-left: 0;\n margin-right: 0;\n "])));
123
126
  });
124
- var S_Footer = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (_a) {
127
+ var S_Footer = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
125
128
  var theme = _a.theme;
126
129
  return theme.spacing.spacingD;
127
130
  }, function (_a) {
@@ -129,10 +132,10 @@ var S_Footer = styled_components_1.default.div(templateObject_8 || (templateObje
129
132
  return theme.spacing.spacingE;
130
133
  }, function (_a) {
131
134
  var theme = _a.theme;
132
- return theme.spacing.spacingD;
135
+ return theme.spacing.spacingE;
133
136
  }, function (_a) {
134
137
  var theme = _a.theme;
135
- return theme.spacing.spacingE;
138
+ return theme.spacing.spacingD;
136
139
  });
137
140
  exports.default = DesktopBasicModal;
138
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
141
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  /// <reference types="react" />
2
- import { PDSTextType } from '../../../common';
2
+ import { PDSTabItemOption, PDSTextType } from '../../../common/types';
3
+ declare type ItemArray = PDSTabItemOption & {
4
+ subArray?: PDSTabItemOption[];
5
+ };
3
6
  declare type TextObj = {
4
7
  title: PDSTextType;
5
8
  path: string;
@@ -8,9 +11,11 @@ declare type TextObj = {
8
11
  path: string;
9
12
  }[];
10
13
  };
11
- declare type Props = {
12
- textArray: TextObj[];
14
+ declare type DesktopTabBarProps = {
15
+ itemArray?: ItemArray[];
13
16
  styleTheme?: 'main' | 'content';
17
+ /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
18
+ textArray?: TextObj[];
14
19
  };
15
- declare function DesktopTabBar({ textArray, styleTheme }: Props): JSX.Element;
20
+ declare function DesktopTabBar({ itemArray, styleTheme, textArray }: DesktopTabBarProps): JSX.Element;
16
21
  export default DesktopTabBar;
package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js CHANGED
@@ -31,36 +31,62 @@ var react_router_dom_1 = require("react-router-dom");
31
31
  var styled_components_1 = __importStar(require("styled-components"));
32
32
  var TextLabel_1 = require("../TextLabel");
33
33
  function DesktopTabBar(_a) {
34
- var textArray = _a.textArray, _b = _a.styleTheme, styleTheme = _b === void 0 ? 'main' : _b;
34
+ var itemArray = _a.itemArray, _b = _a.styleTheme, styleTheme = _b === void 0 ? 'main' : _b, textArray = _a.textArray;
35
35
  var history = (0, react_router_dom_1.useHistory)();
36
- var pathname = window.location.pathname;
37
- var handleClick = function (value) {
38
- if (value) {
39
- history.push(value.path);
40
- }
41
- };
42
- var textLabel = function (value, isSubText) {
43
- if (isSubText) {
44
- return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
45
- }
46
- if (styleTheme === 'content') {
47
- return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
48
- }
49
- if (styleTheme === 'main') {
50
- return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
51
- }
52
- };
53
- return (react_1.default.createElement(S_TabBox, null,
54
- textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, isActive: pathname.includes(value.path), styleTheme: styleTheme },
55
- react_1.default.createElement(S_TitleWrapper, { onClick: function () {
56
- handleClick(value);
57
- } }, textLabel(value, false)),
58
- value.subArray && pathname.includes(value.path) && (react_1.default.createElement(S_SubTabBox, null, value.subArray.map(function (subValue) { return (react_1.default.createElement(S_SubWrapper, { onClick: function () {
59
- handleClick(subValue);
60
- }, key: subValue.path }, textLabel(subValue, true))); }))))); }),
61
- textArray.map(function (value) {
62
- return value.subArray && pathname.includes(value.path) && react_1.default.createElement(S_SubBackground, { key: value.path });
63
- })));
36
+ var pathname = (0, react_router_dom_1.useLocation)().pathname;
37
+ if (itemArray) {
38
+ var handelClickTabItem_1 = function (item) {
39
+ if (item.onClick) {
40
+ item.onClick();
41
+ }
42
+ };
43
+ var textLabel_1 = function (item, isSubText) {
44
+ if (isSubText) {
45
+ return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
46
+ }
47
+ if (styleTheme === 'content') {
48
+ return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
49
+ }
50
+ if (styleTheme === 'main') {
51
+ return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
52
+ }
53
+ };
54
+ return (react_1.default.createElement(S_TabBox, null,
55
+ itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme },
56
+ react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function () { return handelClickTabItem_1(item); } }, textLabel_1(item, false)),
57
+ item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.title, text: subItem.title, onClick: function () { return handelClickTabItem_1(subItem); } }, textLabel_1(subItem, true))); }))))); }),
58
+ itemArray.map(function (item) { return item.isActive && item.subArray && react_1.default.createElement(S_SubBackground, { key: item.title }); })));
59
+ }
60
+ if (textArray) {
61
+ var handleClick_1 = function (value) {
62
+ if (value) {
63
+ history.push(value.path);
64
+ }
65
+ };
66
+ var textLabel_2 = function (item, isSubText) {
67
+ if (isSubText) {
68
+ return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
69
+ }
70
+ if (styleTheme === 'content') {
71
+ return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
72
+ }
73
+ if (styleTheme === 'main') {
74
+ return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
75
+ }
76
+ };
77
+ return (react_1.default.createElement(S_TabBox, null,
78
+ textArray.map(function (item) { return (react_1.default.createElement(S_TabWrapper, { key: item.path, isActive: pathname.includes(item.path), styleTheme: styleTheme },
79
+ react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function () {
80
+ handleClick_1(item);
81
+ } }, textLabel_2(item, false)),
82
+ item.subArray && pathname.includes(item.path) && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.path, text: subItem.title, onClick: function () {
83
+ handleClick_1(subItem);
84
+ } }, textLabel_2(subItem, true))); }))))); }),
85
+ textArray.map(function (item) {
86
+ return item.subArray && pathname.includes(item.path) && react_1.default.createElement(S_SubBackground, { key: item.path });
87
+ })));
88
+ }
89
+ return react_1.default.createElement(react_1.default.Fragment, null);
64
90
  }
65
91
  var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-end;\n box-sizing: border-box;\n justify-content: center;\n display: flex;\n margin-right: ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"], ["\n align-items: flex-end;\n box-sizing: border-box;\n justify-content: center;\n display: flex;\n margin-right: ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
66
92
  var theme = _a.theme;
@@ -74,15 +100,26 @@ var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObje
74
100
  var isActive = _a.isActive;
75
101
  return !isActive && "display: none;";
76
102
  });
77
- var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n ", "\n"], ["\n position: relative;\n ", "\n"])), mediumStyle);
78
- var S_TitleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n min-width: 100%;\n padding: 0 ", ";\n padding-bottom: ", ";\n"], ["\n cursor: pointer;\n min-width: 100%;\n padding: 0 ", ";\n padding-bottom: ", ";\n"])), function (_a) {
103
+ // NOTE: Tab item 활성화 시 text에 bold가 적용되는데, 이때 font-family에 따라 text 영역의 너비가 변경되어 시각적 변동을 일으키는 문제를 해결하기 위한 처리입니다.
104
+ var textOffset = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n content: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n"], ["\n display: block;\n content: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n"])), function (_a) {
105
+ var text = _a.text;
106
+ return "'" + text + "'";
107
+ });
108
+ var S_TabWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n ", "\n"], ["\n position: relative;\n ", "\n"])), mediumStyle);
109
+ var S_TitleWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n cursor: pointer;\n padding: 0 ", ";\n padding-bottom: ", ";\n\n & > div::before {\n font-weight: ", ";\n ", "\n }\n\n & > div::after {\n font-weight: ", ";\n ", "\n }\n"], ["\n cursor: pointer;\n padding: 0 ", ";\n padding-bottom: ", ";\n\n & > div::before {\n font-weight: ", ";\n ", "\n }\n\n & > div::after {\n font-weight: ", ";\n ", "\n }\n"])), function (_a) {
79
110
  var theme = _a.theme;
80
111
  return theme.spacing.spacingA;
81
112
  }, function (_a) {
82
113
  var theme = _a.theme;
83
114
  return theme.spacing.spacingB;
84
- });
85
- var S_TabBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n padding-left: ", ";\n position: relative;\n height: 40px;\n"], ["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n padding-left: ", ";\n position: relative;\n height: 40px;\n"])), function (_a) {
115
+ }, function (_a) {
116
+ var theme = _a.theme;
117
+ return theme.fontWeight.normal;
118
+ }, textOffset, function (_a) {
119
+ var theme = _a.theme;
120
+ return theme.fontWeight.bold;
121
+ }, textOffset);
122
+ var S_TabBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n padding-left: ", ";\n position: relative;\n height: 40px;\n"], ["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n padding-left: ", ";\n position: relative;\n height: 40px;\n"])), function (_a) {
86
123
  var theme = _a.theme;
87
124
  return theme.ui_cpnt_tabbar_base_area;
88
125
  }, function (_a) {
@@ -92,17 +129,23 @@ var S_TabBox = styled_components_1.default.div(templateObject_4 || (templateObje
92
129
  var theme = _a.theme;
93
130
  return theme.spacing.spacingE;
94
131
  });
95
- var S_SubBackground = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100%;\n height: 32px;\n background-color: ", ";\n position: absolute;\n bottom: -33px;\n left: 0px;\n"], ["\n width: 100%;\n height: 32px;\n background-color: ", ";\n position: absolute;\n bottom: -33px;\n left: 0px;\n"])), function (_a) {
132
+ var S_SubBackground = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 100%;\n height: 32px;\n background-color: ", ";\n position: absolute;\n bottom: -33px;\n left: 0px;\n"], ["\n width: 100%;\n height: 32px;\n background-color: ", ";\n position: absolute;\n bottom: -33px;\n left: 0px;\n"])), function (_a) {
96
133
  var theme = _a.theme;
97
134
  return theme.ui_cpnt_tabbar_base_area_sub;
98
135
  });
99
- var S_SubTabBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 100vw;\n position: absolute;\n bottom: -33px;\n left: 0px;\n height: 32px;\n display: flex;\n z-index: 1;\n"], ["\n width: 100vw;\n position: absolute;\n bottom: -33px;\n left: 0px;\n height: 32px;\n display: flex;\n z-index: 1;\n"])));
100
- var S_SubWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n padding: 0 ", ";\n\n &:last-child {\n margin-right: 0;\n }\n"], ["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n padding: 0 ", ";\n\n &:last-child {\n margin-right: 0;\n }\n"])), function (_a) {
136
+ var S_SubTabBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 100vw;\n position: absolute;\n bottom: -33px;\n left: 0px;\n height: 32px;\n display: flex;\n z-index: 1;\n"], ["\n width: 100vw;\n position: absolute;\n bottom: -33px;\n left: 0px;\n height: 32px;\n display: flex;\n z-index: 1;\n"])));
137
+ var S_SubWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n padding: 0 ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n & > div::before {\n font-weight: ", ";\n ", "\n }\n\n & > div::after {\n font-weight: ", ";\n ", "\n }\n"], ["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n padding: 0 ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n & > div::before {\n font-weight: ", ";\n ", "\n }\n\n & > div::after {\n font-weight: ", ";\n ", "\n }\n"])), function (_a) {
101
138
  var theme = _a.theme;
102
139
  return theme.spacing.spacingE;
103
140
  }, function (_a) {
104
141
  var theme = _a.theme;
105
142
  return theme.spacing.spacingA;
106
- });
143
+ }, function (_a) {
144
+ var theme = _a.theme;
145
+ return theme.fontWeight.normal;
146
+ }, textOffset, function (_a) {
147
+ var theme = _a.theme;
148
+ return theme.fontWeight.bold;
149
+ }, textOffset);
107
150
  exports.default = DesktopTabBar;
108
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
151
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
package/dist/src/desktop/components/TextLabel/TextLabel.d.ts CHANGED
@@ -14,6 +14,7 @@ export declare type TextLabelProps = {
14
14
  userSelectMode?: 'none' | 'use';
15
15
  customFontSize?: string;
16
16
  customFontWeight?: 'bold' | 'regular';
17
+ textDecorationType?: 'none' | 'line_through';
17
18
  };
18
19
  export declare type TextStyleProps = {
19
20
  textAlign?: 'left' | 'center' | 'right';
@@ -27,6 +28,7 @@ export declare type TextStyleProps = {
27
28
  userSelectMode?: 'none' | 'use';
28
29
  customFontSize?: string;
29
30
  customFontWeight?: 'bold' | 'regular';
31
+ textDecorationType?: 'none' | 'line_through';
30
32
  };
31
- declare function TextLabel({ text, tooltipText, tooltipPosition, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight }: TextLabelProps): JSX.Element;
33
+ declare function TextLabel({ text, tooltipText, tooltipPosition, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight, textDecorationType }: TextLabelProps): JSX.Element;
32
34
  export default TextLabel;
package/dist/src/desktop/components/TextLabel/TextLabel.js CHANGED
@@ -28,16 +28,16 @@ var styled_components_1 = __importStar(require("styled-components"));
28
28
  var common_1 = require("../../../common");
29
29
  var hybrid_1 = require("../../../hybrid");
30
30
  function TextLabel(_a) {
31
- var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'right_bottom' : _b, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, _d = _a.styleTheme, styleTheme = _d === void 0 ? 'body2Bold' : _d, colorOverride = _a.colorOverride, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'sysTextPrimary' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit, _h = _a.userSelectMode, userSelectMode = _h === void 0 ? 'none' : _h, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight;
32
- var _j = (0, react_1.useState)(false), isTooltipOpen = _j[0], setIsTooltipOpen = _j[1];
31
+ var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'right_bottom' : _b, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, _d = _a.styleTheme, styleTheme = _d === void 0 ? 'body2Bold' : _d, colorOverride = _a.colorOverride, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'sysTextPrimary' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit, _h = _a.userSelectMode, userSelectMode = _h === void 0 ? 'none' : _h, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _j = _a.textDecorationType, textDecorationType = _j === void 0 ? 'none' : _j;
32
+ var _k = (0, react_1.useState)(false), isTooltipOpen = _k[0], setIsTooltipOpen = _k[1];
33
33
  var handleTooltipToggle = function (value) {
34
34
  setIsTooltipOpen(value);
35
35
  };
36
- return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight },
36
+ return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType },
37
37
  text,
38
38
  tooltipText && (react_1.default.createElement(S_TooltipBox, { styleTheme: styleTheme },
39
39
  react_1.default.createElement(S_IconWrapper, { onMouseEnter: function () { return handleTooltipToggle(true); }, onMouseLeave: function () { return handleTooltipToggle(false); } },
40
- react_1.default.createElement(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "line" })),
40
+ react_1.default.createElement(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: "ui_cpnt_icon_sys_grey_03" })),
41
41
  react_1.default.createElement(S_TooltipWrapper, { className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition }, "" + tooltipText)))));
42
42
  }
43
43
  var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
@@ -270,7 +270,7 @@ var tooltipLeftTop = (0, styled_components_1.css)(templateObject_32 || (template
270
270
  var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n right: 0;\n top: 20px;\n"], ["\n right: 0;\n top: 20px;\n"])));
271
271
  var tooltipRightTop = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n left: 0;\n bottom: 20px;\n"], ["\n left: 0;\n bottom: 20px;\n"])));
272
272
  var tooltipRightBottom = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n left: 0;\n top: 20px;\n"], ["\n left: 0;\n top: 20px;\n"])));
273
- var S_TextLabel = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
273
+ var S_TextLabel = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
274
274
  var textAlign = _a.textAlign;
275
275
  return textAlign;
276
276
  }, function (_a) {
@@ -327,6 +327,13 @@ var S_TextLabel = styled_components_1.default.div(templateObject_36 || (template
327
327
  }, function (_a) {
328
328
  var userSelectMode = _a.userSelectMode;
329
329
  return userSelectMode === 'none' && userSelectModeStyle;
330
+ }, function (_a) {
331
+ var textDecorationType = _a.textDecorationType;
332
+ return textDecorationType &&
333
+ {
334
+ none: '',
335
+ line_through: 'text-decoration: line-through;'
336
+ }[textDecorationType];
330
337
  });
331
338
  var S_TooltipBox = styled_components_1.default.div(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
332
339
  var theme = _a.theme;
package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.d.ts CHANGED
@@ -1,12 +1,14 @@
1
1
  /// <reference types="react" />
2
- import { PDSTextType } from '../../../common';
2
+ import { PDSTabItemOption, PDSTextType } from '../../../common/types';
3
3
  declare type TextObj = {
4
4
  path: string;
5
5
  title: PDSTextType;
6
6
  };
7
- export declare type UserDesktopTabBarProps = {
8
- textArray: TextObj[];
7
+ declare type UserDesktopTabBarProps = {
8
+ itemArray?: PDSTabItemOption[];
9
9
  styleTheme?: 'main';
10
+ /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
11
+ textArray?: TextObj[];
10
12
  };
11
- declare function UserDesktopTabBar({ textArray, styleTheme }: UserDesktopTabBarProps): JSX.Element;
13
+ declare function UserDesktopTabBar({ itemArray, styleTheme, textArray }: UserDesktopTabBarProps): JSX.Element;
12
14
  export default UserDesktopTabBar;
package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js CHANGED
@@ -31,21 +31,37 @@ var react_router_dom_1 = require("react-router-dom");
31
31
  var styled_components_1 = __importStar(require("styled-components"));
32
32
  var TextLabel_1 = require("../TextLabel");
33
33
  function UserDesktopTabBar(_a) {
34
- var textArray = _a.textArray, _b = _a.styleTheme, styleTheme = _b === void 0 ? 'main' : _b;
34
+ var itemArray = _a.itemArray, _b = _a.styleTheme, styleTheme = _b === void 0 ? 'main' : _b, textArray = _a.textArray;
35
35
  var history = (0, react_router_dom_1.useHistory)();
36
- var pathname = window.location.pathname;
37
- var handleClick = function (value) {
38
- if (value) {
39
- history.push(value.path);
40
- }
41
- };
42
- return (react_1.default.createElement(react_1.default.Fragment, null,
43
- react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, styleTheme: styleTheme, isActive: pathname === value.path, onClick: function () {
44
- handleClick(value);
36
+ var pathname = (0, react_router_dom_1.useLocation)().pathname;
37
+ if (itemArray) {
38
+ var handleClickTabItem_1 = function (item) {
39
+ if (item.onClick) {
40
+ item.onClick();
41
+ }
42
+ };
43
+ return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function () { return handleClickTabItem_1(item); } },
44
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); })));
45
+ }
46
+ if (textArray) {
47
+ var handleClick_1 = function (value) {
48
+ if (value) {
49
+ history.push(value.path);
50
+ }
51
+ };
52
+ return (react_1.default.createElement(S_TabBar, null, textArray.map(function (item) { return (react_1.default.createElement(S_TabWrapper, { key: item.path, styleTheme: styleTheme, isActive: pathname === item.path, onClick: function () {
53
+ handleClick_1(item);
45
54
  } },
46
- react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'body2Bold' : 'body2Regular', colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); }))));
55
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, styleTheme: pathname === item.path ? 'body2Bold' : 'body2Regular', colorTheme: pathname === item.path ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); })));
56
+ }
57
+ return react_1.default.createElement(react_1.default.Fragment, null);
47
58
  }
48
- var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
59
+ // NOTE: Tab item 활성화 시 text에 bold가 적용되는데, 이때 font-family에 따라 text 영역의 너비가 변경되어 시각적 변동을 일으키는 문제를 해결하기 위한 처리입니다.
60
+ var textOffset = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n content: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n"], ["\n display: block;\n content: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n"])), function (_a) {
61
+ var text = _a.text;
62
+ return "'" + text + "'";
63
+ });
64
+ var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n\n & > div::before {\n font-weight: ", ";\n ", "\n }\n\n & > div::after {\n font-weight: ", ";\n ", "\n }\n"], ["\n ", "\n\n & > div::before {\n font-weight: ", ";\n ", "\n }\n\n & > div::after {\n font-weight: ", ";\n ", "\n }\n"])), function (_a) {
49
65
  var styleTheme = _a.styleTheme;
50
66
  switch (styleTheme) {
51
67
  case 'main':
@@ -53,8 +69,14 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (template
53
69
  default:
54
70
  return mainStyle;
55
71
  }
56
- });
57
- var mainStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n background-color: ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"], ["\n align-items: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n background-color: ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
72
+ }, function (_a) {
73
+ var theme = _a.theme;
74
+ return theme.fontWeight.normal;
75
+ }, textOffset, function (_a) {
76
+ var theme = _a.theme;
77
+ return theme.fontWeight.bold;
78
+ }, textOffset);
79
+ var mainStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n background-color: ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"], ["\n align-items: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n background-color: ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
58
80
  var theme = _a.theme;
59
81
  return theme.spacing.spacingE;
60
82
  }, function (_a) {
@@ -67,7 +89,7 @@ var mainStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject
67
89
  var isActive = _a.isActive;
68
90
  return !isActive && "display: none;";
69
91
  });
70
- var S_TabBar = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: 48px;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: 48px;\n justify-content: center;\n"])), function (_a) {
92
+ var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: 48px;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: 48px;\n justify-content: center;\n"])), function (_a) {
71
93
  var theme = _a.theme;
72
94
  return theme.ui_cpnt_tabbar_base_area;
73
95
  }, function (_a) {
@@ -75,4 +97,4 @@ var S_TabBar = styled_components_1.default.div(templateObject_3 || (templateObje
75
97
  return theme.ui_cpnt_divider;
76
98
  });
77
99
  exports.default = UserDesktopTabBar;
78
- var templateObject_1, templateObject_2, templateObject_3;
100
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/src/desktop/layout/LayoutWS/LayoutWS.js CHANGED
@@ -17,6 +17,6 @@ var LayoutWS = function (_a) {
17
17
  };
18
18
  var S_LayoutWS = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n height: 100vh;\n width: 100vw;\n min-width: 1200px;\n"], ["\n display: flex;\n height: 100vh;\n width: 100vw;\n min-width: 1200px;\n"])));
19
19
  var S_LeftWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
20
- var S_RightWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n /* width: calc(100% - 240px); */\n width: 100%;\n"], ["\n /* width: calc(100% - 240px); */\n width: 100%;\n"])));
20
+ var S_RightWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n overflow: hidden;\n"], ["\n flex: 1;\n overflow: hidden;\n"])));
21
21
  exports.default = LayoutWS;
22
22
  var templateObject_1, templateObject_2, templateObject_3;
package/dist/src/mobile/components/MobileBasicModal/MobileBasicModal.d.ts CHANGED
@@ -2,11 +2,12 @@ import React from 'react';
2
2
  import { PDSTextType } from '../../../common';
3
3
  declare type MobileBasicModalProps = {
4
4
  titleText: PDSTextType;
5
+ bodySpacingMode?: 'none' | 'use';
5
6
  contentText?: PDSTextType;
6
7
  mBtnText?: PDSTextType;
7
8
  onClickMBtn?: () => void;
8
9
  onClickXMarkIcon?: () => void;
9
10
  children?: React.ReactNode;
10
11
  };
11
- declare function MobileBasicModal({ titleText, contentText, mBtnText, onClickMBtn, onClickXMarkIcon, children }: MobileBasicModalProps): React.ReactPortal;
12
+ declare function MobileBasicModal({ titleText, bodySpacingMode, contentText, mBtnText, onClickMBtn, onClickXMarkIcon, children }: MobileBasicModalProps): React.ReactPortal;
12
13
  export default MobileBasicModal;