pds-dev-kit-web 2.2.267 → 2.2.268

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 (8) hide show
  1. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts +1 -1
  2. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js +1 -0
  3. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.d.ts +1 -1
  4. package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.js +51 -7
  5. package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts +1 -1
  6. package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js +4 -0
  7. package/package.json +1 -1
  8. package/release-note.md +2 -2
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts CHANGED
@@ -4,7 +4,7 @@ export type ContentsContainerProps = {
4
4
  content1?: JSX.Element;
5
5
  content2?: JSX.Element;
6
6
  content3?: JSX.Element;
7
- layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1' | 'WTV_1' | 'WTW_1' | 'WTX_1';
7
+ layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1' | 'WTU_2' | 'WTV_1' | 'WTW_1' | 'WTX_1';
8
8
  containerColor?: string;
9
9
  areaColor?: string;
10
10
  isLoadingContainer1?: boolean;
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js CHANGED
@@ -50,6 +50,7 @@ var ContentsContainer = function (_a) {
50
50
  WTT_1: ((0, jsx_runtime_1.jsx)(variation_1.WTT, { layoutType: "WTT_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
51
51
  WTT_2: ((0, jsx_runtime_1.jsx)(variation_1.WTT, { layoutType: "WTT_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
52
52
  WTU_1: ((0, jsx_runtime_1.jsx)(variation_1.WTU, { layoutType: "WTU_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
53
+ WTU_2: ((0, jsx_runtime_1.jsx)(variation_1.WTU, { layoutType: "WTU_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
53
54
  WTV_1: ((0, jsx_runtime_1.jsx)(variation_1.WTV, { layoutType: "WTV_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
54
55
  WTW_1: ((0, jsx_runtime_1.jsx)(variation_1.WTW, { layoutType: "WTW_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
55
56
  WTX_1: ((0, jsx_runtime_1.jsx)(variation_1.WTX, { layoutType: "WTX_1", content1: content1, content2: content2, content3: content3, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, isLoadingContainer3: isLoadingContainer3, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey, overrideContainer3ColorKey: overrideContainer3ColorKey }))
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.d.ts CHANGED
@@ -3,7 +3,7 @@ import type { UiColors } from '../../../../../../common';
3
3
  export type WTUProps = {
4
4
  content1?: JSX.Element;
5
5
  content2?: JSX.Element;
6
- layoutType?: 'WTU_1';
6
+ layoutType: 'WTU_1' | 'WTU_2';
7
7
  containerColor?: string;
8
8
  areaColor?: string;
9
9
  isLoadingContainer1?: boolean;
package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.js CHANGED
@@ -75,17 +75,39 @@ var overrideStyleContainer2 = (0, styled_components_1.css)(templateObject_2 || (
75
75
  return overrideContainer2ColorKey && theme[overrideContainer2ColorKey];
76
76
  });
77
77
  var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n"], ["\n display: flex;\n height: 100%;\n"])));
78
- var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n margin: 0;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n ", ";\n\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n margin: 0;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n ", ";\n\n ", "\n"])), function (_a) {
78
+ var WTU_1Container1Style = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
79
+ var $contentsArea2Width = _a.$contentsArea2Width;
80
+ return "calc(50% - (".concat($contentsArea2Width, "px - 480px) / 2)");
81
+ });
82
+ var WTU_2Container1Style = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
83
+ var $contentsArea2Width = _a.$contentsArea2Width;
84
+ return "calc(50% + (".concat($contentsArea2Width, "px - 480px) / 2)");
85
+ });
86
+ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n margin: 0;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n\n ", ";\n ", ";\n\n ", "\n"], ["\n align-items: flex-start;\n background-color: ", ";\n display: flex;\n justify-content: flex-end;\n margin: 0;\n overflow-x: hidden;\n overflow-y: auto;\n width: ", ";\n\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
79
87
  var theme = _a.theme;
80
88
  return theme.ui_contentscontainer01_background;
81
89
  }, function (_a) {
82
90
  var $contentsArea2Width = _a.$contentsArea2Width;
83
91
  return "calc(50% - (".concat($contentsArea2Width, "px - 480px) / 2)");
92
+ }, function (_a) {
93
+ var layoutType = _a.layoutType;
94
+ return ({
95
+ WTU_1: WTU_1Container1Style,
96
+ WTU_2: WTU_2Container1Style
97
+ }[layoutType]);
84
98
  }, function (_a) {
85
99
  var containerColor = _a.containerColor;
86
100
  return "background-color: ".concat(containerColor);
87
101
  }, overrideStyleContainer1);
88
- var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n height: 100%;\n width: ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n height: 100%;\n width: ", ";\n ", ";\n\n ", "\n"])), function (_a) {
102
+ var WTU_1Container2Style = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
103
+ var $contentsArea2Width = _a.$contentsArea2Width;
104
+ return "calc(50% + (".concat($contentsArea2Width, "px - 480px) / 2)");
105
+ });
106
+ var WTU_2Container2Style = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
107
+ var $contentsArea2Width = _a.$contentsArea2Width;
108
+ return "calc(50% - (".concat($contentsArea2Width, "px - 480px) / 2)");
109
+ });
110
+ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n height: 100%;\n width: ", ";\n\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n height: 100%;\n width: ", ";\n\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
89
111
  var theme = _a.theme;
90
112
  return theme.ui_contentscontainer02_background;
91
113
  }, function (_a) {
@@ -94,19 +116,41 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (
94
116
  }, function (_a) {
95
117
  var $contentsArea2Width = _a.$contentsArea2Width;
96
118
  return "calc(50% + (".concat($contentsArea2Width, "px - 480px) / 2)");
119
+ }, function (_a) {
120
+ var layoutType = _a.layoutType;
121
+ return ({
122
+ WTU_1: WTU_1Container2Style,
123
+ WTU_2: WTU_2Container2Style
124
+ }[layoutType]);
97
125
  }, function (_a) {
98
126
  var containerColor = _a.containerColor;
99
127
  return "background-color: ".concat(containerColor);
100
128
  }, overrideStyleContainer2);
101
- var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-sizing: border-box;\n height: 100%;\n max-width: 480px;\n width: 480px;\n ", ";\n"], ["\n box-sizing: border-box;\n height: 100%;\n max-width: 480px;\n width: 480px;\n ", ";\n"])), function (_a) {
129
+ var WTU_1ContentsArea1 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n max-width: 480px;\n width: 480px;\n"], ["\n max-width: 480px;\n width: 480px;\n"])));
130
+ var WTU_2ContentsArea1 = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"], ["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"])));
131
+ var S_ContentsArea1 = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n box-sizing: border-box;\n height: 100%;\n\n ", ";\n ", ";\n"], ["\n box-sizing: border-box;\n height: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
132
+ var layoutType = _a.layoutType;
133
+ return ({
134
+ WTU_1: WTU_1ContentsArea1,
135
+ WTU_2: WTU_2ContentsArea1
136
+ }[layoutType]);
137
+ }, function (_a) {
102
138
  var areaColor = _a.areaColor;
103
139
  return "background-color: ".concat(areaColor);
104
140
  });
105
- var S_ContentsArea2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n height: 100%;\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n ", ";\n"], ["\n height: 100%;\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n ", ";\n"])), function (_a) {
141
+ var WTU_1ContentsArea2 = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"], ["\n max-width: 920px;\n min-width: 720px;\n width: 60%;\n"])));
142
+ var WTU_2ContentsArea2 = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n max-width: 480px;\n width: 480px;\n"], ["\n max-width: 480px;\n width: 480px;\n"])));
143
+ var S_ContentsArea2 = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n height: 100%;\n\n ", ";\n ", ";\n"], ["\n height: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
144
+ var layoutType = _a.layoutType;
145
+ return ({
146
+ WTU_1: WTU_1ContentsArea2,
147
+ WTU_2: WTU_2ContentsArea2
148
+ }[layoutType]);
149
+ }, function (_a) {
106
150
  var areaColor = _a.areaColor;
107
151
  return "background-color: ".concat(areaColor);
108
152
  });
109
- var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
110
- var S_Content2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
153
+ var S_Content1 = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
154
+ var S_Content2 = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n"], ["\n height: 100%;\n overflow: hidden;\n"])));
111
155
  exports.default = WTU;
112
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
156
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { UiColors } from '../../../../common';
2
2
  import type { MutableRefObject } from 'react';
3
3
  export type ContainersBoxProps = {
4
- layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1' | 'WTV_1' | 'WTW_1' | 'WTX_1';
4
+ layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1' | 'WTU_2' | 'WTV_1' | 'WTW_1' | 'WTX_1';
5
5
  pageMenuContent?: JSX.Element;
6
6
  tabMenuContent?: JSX.Element;
7
7
  subMenuContent?: JSX.Element;
package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js CHANGED
@@ -89,6 +89,7 @@ var ContainersBox = function (_a) {
89
89
  WTT_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
90
90
  WTT_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
91
91
  WTU_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
92
+ WTU_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
92
93
  WTV_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
93
94
  WTW_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
94
95
  WTX_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
@@ -138,6 +139,7 @@ var ContainersBox = function (_a) {
138
139
  WTT_1: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
139
140
  WTT_2: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
140
141
  WTU_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
142
+ WTU_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
141
143
  WTV_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
142
144
  WTW_1: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
143
145
  WTX_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
@@ -187,6 +189,7 @@ var ContainersBox = function (_a) {
187
189
  WTT_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
188
190
  WTT_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
189
191
  WTU_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
192
+ WTU_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
190
193
  WTV_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
191
194
  WTW_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
192
195
  WTX_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
@@ -236,6 +239,7 @@ var ContainersBox = function (_a) {
236
239
  WTT_1: '',
237
240
  WTT_2: '',
238
241
  WTU_1: '',
242
+ WTU_2: '',
239
243
  WTV_1: '',
240
244
  WTW_1: '',
241
245
  WTX_1: ''
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.267",
3
+ "version": "2.2.268",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.267]
2
+ ## [v2.2.268]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
6
 
7
- * [PDS-1320] PTF 컴포넌트 사이즈 추가(medium, small)
7
+ * [PDS-1391] WTU-2 레이아웃 추가