pds-dev-kit-web 0.1.0 → 0.1.1

package/.prettierignore

@@ -4,3 +4,4 @@ build
 deploy
 
 .DS_store
+LICENSE

package/.stylelintignore

@@ -4,3 +4,4 @@ build
 deploy
 
 .DS_store
+LICENSE

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021.cyclops co., ltd. all rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/lib/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js

@@ -17,8 +17,8 @@ var WFA = function (_a) {
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
-var S_SideArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  margin-right: 24px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n"], ["\n  box-sizing: border-box;\n  margin-right: 24px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n"])));
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
+var S_SideArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  margin-right: 24px;\n  min-width: 240px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n"], ["\n  box-sizing: border-box;\n  margin-right: 24px;\n  min-width: 240px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n"])));
 var S_StepContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  max-width: 896px;\n  min-width: 512px;\n  padding-bottom: 88px;\n  width: 45vw;\n"], ["\n  box-sizing: border-box;\n  max-width: 896px;\n  min-width: 512px;\n  padding-bottom: 88px;\n  width: 45vw;\n"])));
 var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));

package/dist/lib/layout/LayoutWF/Containers/ContentsContainer/variation/WFB.js

@@ -18,8 +18,8 @@ var WFB = function (_a) {
             react_1.default.createElement(S_Content1, null, content1),
             react_1.default.createElement(S_Content2, null, content2))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
-var S_SideArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  margin-right: 24px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n"], ["\n  box-sizing: border-box;\n  margin-right: 24px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n"])));
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
+var S_SideArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  margin-right: 24px;\n  min-width: 240px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n"], ["\n  box-sizing: border-box;\n  margin-right: 24px;\n  min-width: 240px;\n  padding-bottom: 88px;\n  padding-top: 48px;\n  width: 240px;\n"])));
 var S_StepContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  padding-bottom: 88px;\n  width: 896px;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  padding-bottom: 88px;\n  width: 896px;\n"])));
 var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 512px;\n"], ["\n  width: 512px;\n"])));

package/dist/lib/layout/LayoutWF/Containers/ContentsContainer/variation/WFC.js

@@ -15,7 +15,7 @@ var WFC = function (_a) {
         react_1.default.createElement(S_ContentsArea, { layoutType: layoutType },
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  margin: 0 auto;\n  max-width: 640px;\n  min-width: 480px;\n  padding-bottom: 88px;\n  width: 40vw;\n"], ["\n  box-sizing: border-box;\n  margin: 0 auto;\n  max-width: 640px;\n  min-width: 480px;\n  padding-bottom: 88px;\n  width: 40vw;\n"])));
 var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = WFC;

package/dist/lib/layout/LayoutWF/Containers/ContentsContainer/variation/WFD.js

@@ -15,11 +15,11 @@ var WFD = function (_a) {
         react_1.default.createElement(S_ContentsArea, { layoutType: layoutType },
             react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WFD_1: '',
-        WFD_2: 'padding-left: 24px;padding-right: 24px;'
+        WFD_1: 'height: 100%;',
+        WFD_2: 'padding-left: 24px;padding-right: 24px;overflow-x: hidden;overflow-y: auto;height: 100%;'
     }[layoutType]);
 });
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  margin: 0 auto;\n  max-width: 1920px;\n  min-width: 1200px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  margin: 0 auto;\n  max-width: 1920px;\n  min-width: 1200px;\n  ", ";\n"])), function (_a) {
@@ -32,7 +32,7 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templa
 var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WFD_1: 'height: 100%;overflow: hidden;',
+        WFD_1: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
         WFD_2: ''
     }[layoutType]);
 });

package/dist/lib/layout/LayoutWF/Containers/ContentsContainer/variation/WFE.js

@@ -17,10 +17,11 @@ var WFE = function (_a) {
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n"])));
 var S_SideArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  margin-right: 24px;\n  min-width: 240px;\n  padding-top: 48px;\n  width: 240px;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  margin-right: 24px;\n  min-width: 240px;\n  padding-top: 48px;\n  width: 240px;\n"])));
+// TODO: 해당 유형의 경우 컨테이너가 스크롤을 가지고 있지 않은데 stepcontent부분은 어떤식으로 작동해야하는지 혜진님과 논의 필요
 var S_StepContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
 var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  max-width: 1680px;\n  min-width: 960px;\n  width: 45vw;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  max-width: 1680px;\n  min-width: 960px;\n  width: 45vw;\n"])));
-var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
 exports.default = WFE;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/lib/layout/LayoutWF/ContainersBox/ContainersBox.js

@@ -20,6 +20,6 @@ var ContainersBox = function (_a) {
 };
 var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
 var S_TopWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-var S_BottomWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"], ["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
+var S_BottomWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
 exports.default = ContainersBox;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/lib/layout/LayoutWS/Containers/ContentsContainer/variation/WSA.js

@@ -15,7 +15,7 @@ var WSA = function (_a) {
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  padding-left: 24px;\n  padding-right: 24px;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  padding-left: 24px;\n  padding-right: 24px;\n"])));
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n"])));
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  max-width: 1632px;\n  min-width: 912px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n"], ["\n  box-sizing: border-box;\n  max-width: 1632px;\n  min-width: 912px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n"])));
 var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = WSA;

package/dist/lib/layout/LayoutWS/Containers/ContentsContainer/variation/WSB.js

@@ -17,6 +17,6 @@ var WSB = function (_a) {
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  min-width: 960px;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  min-width: 960px;\n  overflow: hidden;\n"])));
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  max-width: 1680px;\n  min-width: 960px;\n  padding-top: 24px;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  max-width: 1680px;\n  min-width: 960px;\n  padding-top: 24px;\n"])));
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
 exports.default = WSB;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/lib/layout/LayoutWS/Containers/ContentsContainer/variation/WSC.js

@@ -15,8 +15,8 @@ var WSC = function (_a) {
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  padding: 24px;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  padding: 24px;\n"])));
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  padding: 24px;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  padding: 24px;\n"])));
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  max-width: 1632px;\n  min-width: 912px;\n"], ["\n  height: 100%;\n  max-width: 1632px;\n  min-width: 912px;\n"])));
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
 exports.default = WSC;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/lib/layout/LayoutWS/Containers/ContentsContainer/variation/WSD.js

@@ -15,7 +15,7 @@ var WSD = function (_a) {
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  padding-left: 24px;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  padding-left: 24px;\n"])));
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n"])));
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  max-width: 720px;\n  min-width: 512px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  width: 55vw;\n"], ["\n  box-sizing: border-box;\n  max-width: 720px;\n  min-width: 512px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  width: 55vw;\n"])));
 var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = WSD;

package/dist/lib/layout/LayoutWS/Containers/ContentsContainer/variation/WSE.js

@@ -16,7 +16,7 @@ var WSE = function (_a) {
             react_1.default.createElement(S_Content1, null, content1),
             react_1.default.createElement(S_Content2, null, content2))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  padding-left: 24px;\n  padding-right: 24px;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  padding-left: 24px;\n  padding-right: 24px;\n"])));
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n"])));
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  max-width: 1248px;\n  min-width: 912px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  max-width: 1248px;\n  min-width: 912px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n"])));
 var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
 var S_Content2 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 24px;\n  width: 360px;\n"], ["\n  margin-left: 24px;\n  width: 360px;\n"])));

package/dist/lib/layout/LayoutWS/Containers/ContentsContainer/variation/WSF.js

@@ -19,27 +19,27 @@ var WSF = function (_a) {
             react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType },
                 react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2)))));
 };
-var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"], ["\n  display: flex;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 480px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  width: 50%;\n  ", ";\n"], ["\n  min-width: 480px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  width: 50%;\n  ", ";\n"])), function (_a) {
+var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 480px;\n  width: 50%;\n  ", ";\n"], ["\n  min-width: 480px;\n  width: 50%;\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WSF_1: 'max-width: 480px;height: 100%;',
-        WSF_2: 'max-width: 480px;',
+        WSF_2: 'max-width: 480px;overflow-x: hidden;overflow-y: auto;',
         WSF_3: 'max-width: 640px;height: 100%;',
-        WSF_4: 'max-width: 640px;',
+        WSF_4: 'max-width: 640px;overflow-x: hidden;overflow-y: auto;',
         WSF_5: 'max-width: 840px;height: 100%;',
-        WSF_6: 'max-width: 840px;'
+        WSF_6: 'max-width: 840px;overflow-x: hidden;overflow-y: auto;'
     }[layoutType]);
 });
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  ", ";\n"], ["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n  ", ";\n"], ["\n  flex-grow: 1;\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WSF_1: 'height: 100%;',
-        WSF_2: '',
+        WSF_2: 'overflow-x: hidden;overflow-y: auto;',
         WSF_3: 'height: 100%;',
-        WSF_4: '',
+        WSF_4: 'overflow-x: hidden;overflow-y: auto;',
         WSF_5: 'height: 100%;',
-        WSF_6: ''
+        WSF_6: 'overflow-x: hidden;overflow-y: auto;'
     }[layoutType]);
 });
 var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n"])), function (_a) {
@@ -67,22 +67,22 @@ var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templ
 var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WSF_1: 'height: 100%;overflow: hidden;',
+        WSF_1: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
         WSF_2: '',
-        WSF_3: 'height: 100%;overflow: hidden;',
+        WSF_3: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
         WSF_4: '',
-        WSF_5: 'height: 100%;overflow: hidden;',
+        WSF_5: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
         WSF_6: ''
     }[layoutType]);
 });
 var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WSF_1: 'height: 100%;overflow: hidden;',
+        WSF_1: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
         WSF_2: '',
-        WSF_3: 'height: 100%;overflow: hidden;',
+        WSF_3: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
         WSF_4: '',
-        WSF_5: 'height: 100%;overflow: hidden;',
+        WSF_5: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
         WSF_6: ''
     }[layoutType]);
 });

package/dist/lib/layout/LayoutWS/Containers/ContentsContainer/variation/WSG.js

@@ -19,19 +19,19 @@ var WSG = function (_a) {
             react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType },
                 react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2)))));
 };
-var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"], ["\n  display: flex;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: scroll;\n  ", ";\n"], ["\n  overflow-x: hidden;\n  overflow-y: scroll;\n  ", ";\n"])), function (_a) {
+var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WSG_1: 'flex-grow: 1;height: 100%;',
-        WSG_2: 'flex-grow: 1;'
+        WSG_2: 'flex-grow: 1;overflow-x: hidden;overflow-y: auto;'
     }[layoutType]);
 });
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: scroll;\n  ", ";\n"], ["\n  overflow-x: hidden;\n  overflow-y: scroll;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WSG_1: 'flex-grow: 1;height: 100%;',
-        WSG_2: 'flex-grow: 1;'
+        WSG_2: 'flex-grow: 1;overflow-x: hidden;overflow-y: auto;'
     }[layoutType]);
 });
 var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n"])), function (_a) {
@@ -51,14 +51,14 @@ var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templ
 var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WSG_1: 'height: 100%;overflow: hidden;',
+        WSG_1: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
         WSG_2: ''
     }[layoutType]);
 });
 var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WSG_1: 'height: 100%;overflow: hidden;',
+        WSG_1: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
         WSG_2: ''
     }[layoutType]);
 });

package/dist/lib/layout/LayoutWS/Containers/GlobalMenuContainer/variation/GlobalMenu.js

@@ -15,7 +15,7 @@ var GlobalMenu = function (_a) {
         react_1.default.createElement(S_GlobalMenuArea, null,
             react_1.default.createElement(S_GlobalMenuContent, null, globalMenuContent))));
 };
-var S_GlobalMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  max-width: 240px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"], ["\n  height: 100%;\n  max-width: 240px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
+var S_GlobalMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  max-width: 240px;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  height: 100%;\n  max-width: 240px;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
 var S_GlobalMenuArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
 var S_GlobalMenuContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
 exports.default = GlobalMenu;

package/dist/lib/layout/LayoutWS/ContainersBox/ContainersBox.js

@@ -20,6 +20,6 @@ var ContainersBox = function (_a) {
 };
 var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
 var S_TopWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-var S_BottomWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"], ["\n  flex: 1;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
+var S_BottomWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n"])));
 exports.default = ContainersBox;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/lib/layout/LayoutWS/LayoutWS.js

@@ -16,7 +16,7 @@ var LayoutWS = function (_a) {
         react_1.default.createElement(S_RightWrapper, null, children)));
 };
 var S_LayoutWS = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100vh;\n  width: 100vw;\n"], ["\n  display: flex;\n  height: 100vh;\n  width: 100vw;\n"])));
-var S_LeftWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  max-width: 240px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"], ["\n  height: 100%;\n  max-width: 240px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
+var S_LeftWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
 var S_RightWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: calc(100% - 240px);\n"], ["\n  width: calc(100% - 240px);\n"])));
 exports.default = LayoutWS;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/lib/layout/LayoutWT/Containers/ContentsContainer/variation/WTA.js

@@ -15,7 +15,8 @@ var WTA = function (_a) {
         react_1.default.createElement(S_ContentsArea, { layoutType: layoutType },
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  ", ";\n\n  /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  ", ";\n\n  /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"])), function (_a) {
+// TODO: content부분에 스크롤이 생길 경우 pagemenu와 어긋 나는 부분 수정 필요
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n\n  /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n\n  /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WTA_1: 'min-width: 480px;',

package/dist/lib/layout/LayoutWT/Containers/ContentsContainer/variation/WTB.js

@@ -15,8 +15,8 @@ var WTB = function (_a) {
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n"])));
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  max-width: 1920px;\n  min-width: 1200px;\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n  width: 100vw;\n"], ["\n  box-sizing: border-box;\n  max-width: 1920px;\n  min-width: 1200px;\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n  width: 100vw;\n"])));
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  max-width: 1920px;\n  min-width: 1200px;\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n  width: 100%;\n"], ["\n  box-sizing: border-box;\n  max-width: 1920px;\n  min-width: 1200px;\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n  width: 100%;\n"])));
 var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = WTB;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/lib/layout/LayoutWT/Containers/ContentsContainer/variation/WTC.js

@@ -15,8 +15,8 @@ var WTC = function (_a) {
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  padding-left: 24px;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  padding-left: 24px;\n"])));
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n"])));
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  max-width: 720px;\n  min-width: 512px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  width: 53vw;\n"], ["\n  box-sizing: border-box;\n  max-width: 720px;\n  min-width: 512px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  width: 53vw;\n"])));
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
 exports.default = WTC;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/lib/layout/LayoutWT/Containers/ContentsContainer/variation/WTD.js

@@ -14,22 +14,30 @@ var WTD = function (_a) {
     return (react_1.default.createElement(S_Box, null,
         react_1.default.createElement(S_ContentsContainer1, { layoutType: layoutType },
             react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType },
-                react_1.default.createElement(S_Content1, null, content1))),
-        react_1.default.createElement(S_ContentsContainer2, null,
+                react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))),
+        react_1.default.createElement(S_ContentsContainer2, { layoutType: layoutType },
             react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType },
-                react_1.default.createElement(S_Content2, null, content2)))));
+                react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2)))));
 };
-var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"], ["\n  display: flex;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 480px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  width: 50%;\n  ", ";\n"], ["\n  min-width: 480px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  width: 50%;\n  ", ";\n"])), function (_a) {
+var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 480px;\n  width: 50%;\n  ", ";\n"], ["\n  min-width: 480px;\n  width: 50%;\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WTD_1: 'max-width: 640px;',
-        WTD_2: 'max-width: 640px;',
-        WTD_3: 'max-width: 840px;',
-        WTD_4: 'max-width: 840px;'
+        WTD_1: 'max-width: 640px;height: 100%;',
+        WTD_2: 'max-width: 640px;overflow-x: hidden;overflow-y: auto;',
+        WTD_3: 'max-width: 840px;height: 100%;',
+        WTD_4: 'max-width: 840px;overflow-x: hidden;overflow-y: auto;'
+    }[layoutType]);
+});
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n  ", ";\n"], ["\n  flex-grow: 1;\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WTD_1: 'height: 100%;',
+        WTD_2: 'overflow-x: hidden;overflow-y: auto;',
+        WTD_3: 'height: 100%;',
+        WTD_4: 'overflow-x: hidden;overflow-y: auto;'
     }[layoutType]);
 });
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"], ["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
 var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
@@ -48,7 +56,23 @@ var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templ
         WTD_4: 'padding-left: 24px;padding-right: 24px;padding-bottom: 88px;'
     }[layoutType]);
 });
-var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
-var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WTD_1: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
+        WTD_2: '',
+        WTD_3: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
+        WTD_4: 'overflow-x: hidden;overflow-y: auto;'
+    }[layoutType]);
+});
+var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WTD_1: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
+        WTD_2: '',
+        WTD_3: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
+        WTD_4: 'overflow-x: hidden;overflow-y: auto;'
+    }[layoutType]);
+});
 exports.default = WTD;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/lib/layout/LayoutWT/Containers/ContentsContainer/variation/WTE.js

@@ -15,8 +15,8 @@ var WTE = function (_a) {
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  padding-left: 24px;\n  padding-right: 24px;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  padding-left: 24px;\n  padding-right: 24px;\n"])));
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n"])));
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  max-width: 1632px;\n  min-width: 912px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  width: 95%;\n"], ["\n  box-sizing: border-box;\n  max-width: 1632px;\n  min-width: 912px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  width: 95%;\n"])));
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
 exports.default = WTE;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/lib/layout/LayoutWT/Containers/ContentsContainer/variation/WTF.js

@@ -19,27 +19,27 @@ var WTF = function (_a) {
             react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType },
                 react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2)))));
 };
-var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"], ["\n  display: flex;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 480px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  width: 50%;\n  ", ";\n"], ["\n  min-width: 480px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  width: 50%;\n  ", ";\n"])), function (_a) {
+var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 480px;\n  width: 50%;\n  ", ";\n"], ["\n  min-width: 480px;\n  width: 50%;\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WTF_1: 'max-width: 640px;height: 100%;',
-        WTF_2: 'max-width: 640px;',
+        WTF_2: 'max-width: 640px;overflow-x: hidden;overflow-y: auto;',
         WTF_3: 'max-width: 840px;height: 100%;',
-        WTF_4: 'max-width: 840px;',
+        WTF_4: 'max-width: 840px;overflow-x: hidden;overflow-y: auto;',
         WTF_5: 'max-width: 640px;height: 100%;',
         WTF_6: 'max-width: 840px;height: 100%;'
     }[layoutType]);
 });
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  ", ";\n"], ["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n  ", ";\n"], ["\n  flex-grow: 1;\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WTF_1: 'height: 100%;',
-        WTF_2: '',
+        WTF_2: 'overflow-x: hidden;overflow-y: auto;',
         WTF_3: 'height: 100%;',
-        WTF_4: '',
-        WTF_5: '',
-        WTF_6: ''
+        WTF_4: 'overflow-x: hidden;overflow-y: auto;',
+        WTF_5: 'overflow-x: hidden;overflow-y: auto;',
+        WTF_6: 'overflow-x: hidden;overflow-y: auto;'
     }[layoutType]);
 });
 var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n"])), function (_a) {
@@ -67,20 +67,20 @@ var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templ
 var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WTF_1: 'height: 100%;overflow: hidden;',
+        WTF_1: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
         WTF_2: '',
-        WTF_3: 'height: 100%;overflow: hidden;',
+        WTF_3: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
         WTF_4: '',
-        WTF_5: 'height: 100%;overflow: hidden;',
-        WTF_6: 'height: 100%;overflow: hidden;'
+        WTF_5: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
+        WTF_6: 'height: 100%;overflow-x: hidden;overflow-y: auto;'
     }[layoutType]);
 });
 var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WTF_1: 'height: 100%;overflow: hidden;',
+        WTF_1: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
         WTF_2: '',
-        WTF_3: 'height: 100%;overflow: hidden;',
+        WTF_3: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
         WTF_4: '',
         WTF_5: '',
         WTF_6: ''

package/dist/lib/layout/LayoutWT/Containers/ContentsContainer/variation/WTG.js

@@ -15,8 +15,8 @@ var WTG = function (_a) {
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  max-width: 1680px;\n  min-width: 960px;\n\n  /* TODO: \uBB38\uC11C\uC0C1\uC5D0\uC11C\uB294 padding-bottom: 88px;\uC778\uB370 \uC774\uBBF8\uC9C0\uC0C1\uC5D0\uC11C\uB294 0\uC784. \uD61C\uC9C4\uB2D8\uAED8 \uD655\uC778 \uD544\uC694 */\n  padding-top: 24px;\n  width: 53vw;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  max-width: 1680px;\n  min-width: 960px;\n\n  /* TODO: \uBB38\uC11C\uC0C1\uC5D0\uC11C\uB294 padding-bottom: 88px;\uC778\uB370 \uC774\uBBF8\uC9C0\uC0C1\uC5D0\uC11C\uB294 0\uC784. \uD61C\uC9C4\uB2D8\uAED8 \uD655\uC778 \uD544\uC694 */\n  padding-top: 24px;\n  width: 53vw;\n"])));
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  max-width: 1680px;\n  min-width: 960px;\n  padding-top: 24px;\n  width: 53vw;\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  max-width: 1680px;\n  min-width: 960px;\n  padding-top: 24px;\n  width: 53vw;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
 exports.default = WTG;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/lib/layout/LayoutWT/Containers/ContentsContainer/variation/WTH.js

@@ -15,7 +15,7 @@ var WTH = function (_a) {
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n"])));
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  max-width: 1920px;\n  min-width: 1200px;\n  padding-bottom: 88px;\n"], ["\n  box-sizing: border-box;\n  max-width: 1920px;\n  min-width: 1200px;\n  padding-bottom: 88px;\n"])));
 var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = WTH;

package/dist/lib/layout/LayoutWT/Containers/PageMenuContainer/PageMenuContainer.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare type PageMenuContainerProps = {
-    pageMenuType: 'top_page_menu' | 'left_page_menu';
+    pageMenuType: 'top_page_menu' | 'left_page_menu' | 'top_page_menu_mobile_480' | 'top_page_menu_mobile_600' | 'top_page_menu_mobile_768';
     pageMenuContent?: JSX.Element;
 };
 declare const PageMenuContainer: ({ pageMenuType, pageMenuContent }: PageMenuContainerProps) => JSX.Element;

package/dist/lib/layout/LayoutWT/Containers/PageMenuContainer/PageMenuContainer.js

@@ -9,7 +9,10 @@ var PageMenuContainer = function (_a) {
     var pageMenuType = _a.pageMenuType, pageMenuContent = _a.pageMenuContent;
     return (react_1.default.createElement(react_1.default.Fragment, null, {
         top_page_menu: react_1.default.createElement(variation_1.TopPageMenu, null, pageMenuContent),
-        left_page_menu: react_1.default.createElement(variation_1.LeftPageMenu, null, pageMenuContent)
+        left_page_menu: react_1.default.createElement(variation_1.LeftPageMenu, null, pageMenuContent),
+        top_page_menu_mobile_480: react_1.default.createElement(variation_1.TopPageMenu, { mobileWidth: 480 }, pageMenuContent),
+        top_page_menu_mobile_600: react_1.default.createElement(variation_1.TopPageMenu, { mobileWidth: 600 }, pageMenuContent),
+        top_page_menu_mobile_768: react_1.default.createElement(variation_1.TopPageMenu, { mobileWidth: 768 }, pageMenuContent)
     }[pageMenuType]));
 };
 exports.default = PageMenuContainer;

package/dist/lib/layout/LayoutWT/Containers/PageMenuContainer/variation/LeftPageMenu.js

@@ -15,7 +15,7 @@ var LeftPageMenu = function (_a) {
         react_1.default.createElement(S_LeftPageMenuArea, null,
             react_1.default.createElement(S_LeftPageMenuContent, null, children))));
 };
-var S_LeftPageMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"], ["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
+var S_LeftPageMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  min-width: 240px;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  height: 100%;\n  min-width: 240px;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
 var S_LeftPageMenuArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 var S_LeftPageMenuContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 240px;\n"], ["\n  width: 240px;\n"])));
 exports.default = LeftPageMenu;

package/dist/lib/layout/LayoutWT/Containers/PageMenuContainer/variation/TopPageMenu.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare type TopPageMenuProps = {
     children?: React.ReactNode;
+    mobileWidth?: number;
 };
-declare const TopPageMenu: ({ children }: TopPageMenuProps) => JSX.Element;
+declare const TopPageMenu: ({ children, mobileWidth }: TopPageMenuProps) => JSX.Element;
 export default TopPageMenu;

package/dist/lib/layout/LayoutWT/Containers/PageMenuContainer/variation/TopPageMenu.js

@@ -10,13 +10,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var TopPageMenu = function (_a) {
-    var children = _a.children;
-    return (react_1.default.createElement(S_TopPageMenuContainer, null,
-        react_1.default.createElement(S_TopPageMenuArea, null,
+    var children = _a.children, mobileWidth = _a.mobileWidth;
+    return (react_1.default.createElement(S_TopPageMenuContainer, { mobileWidth: mobileWidth },
+        react_1.default.createElement(S_TopPageMenuArea, { mobileWidth: mobileWidth },
             react_1.default.createElement(S_TopPageMenuContent, null, children))));
 };
-var S_TopPageMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-var S_TopPageMenuArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+// TODO: content부분에 스크롤이 생길 경우 pagemenu와 어긋 나는 부분 수정 필요
+var S_TopPageMenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: #fff7ed;\n  ", ";\n"], ["\n  background: #fff7ed;\n  ", ";\n"])), function (_a) {
+    var mobileWidth = _a.mobileWidth;
+    return mobileWidth &&
+        "display: flex;align-items: center;flex-direction: column;min-width: " + mobileWidth + "px;";
+});
+var S_TopPageMenuArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n  ", ";\n"], ["\n  margin: 0;\n  ", ";\n"])), function (_a) {
+    var mobileWidth = _a.mobileWidth;
+    return mobileWidth && "width: " + mobileWidth + "px;";
+});
 var S_TopPageMenuContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 64px;\n  overflow: hidden;\n"], ["\n  height: 64px;\n  overflow: hidden;\n"])));
 exports.default = TopPageMenu;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/lib/layout/LayoutWT/ContainersBox/ContainersBox.js

@@ -35,9 +35,9 @@ var ContainersBox = function (_a) {
         }[layoutType],
         react_1.default.createElement(S_RightBox, null,
             {
-                WTA_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent })),
-                WTA_2: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent })),
-                WTA_3: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent })),
+                WTA_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu_mobile_480", pageMenuContent: pageMenuContent })),
+                WTA_2: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu_mobile_600", pageMenuContent: pageMenuContent })),
+                WTA_3: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu_mobile_768", pageMenuContent: pageMenuContent })),
                 WTB_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent })),
                 WTC_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTD_1: react_1.default.createElement(react_1.default.Fragment, null),
@@ -77,8 +77,8 @@ var ContainersBox = function (_a) {
             react_1.default.createElement(S_BottomWrapper, { layoutType: layoutType },
                 react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2 })))));
 };
-var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  width: 100%;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  width: 100%;\n"])));
+var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n"])));
 var S_RightBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n"])));
-var S_BottomWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"], ["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
+var S_BottomWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n"])));
 exports.default = ContainersBox;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/lib/layout/LayoutWT/LayoutWT.js

@@ -19,6 +19,6 @@ var LayoutWT = function (_a) {
 var S_LayoutWT = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100vh;\n  width: 100vw;\n"], ["\n  height: 100vh;\n  width: 100vw;\n"])));
 var S_Box = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
 var S_TopWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-var S_BottomWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"], ["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: scroll;\n"])));
+var S_BottomWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n"])));
 exports.default = LayoutWT;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",