v0.3.4

.gitignore

@@ -193,3 +193,6 @@ storybook-static/
 
 # WebStorm
 .idea
+
+# Rollup Plugin Visualizer
+stats.html

babel.config.js

@@ -7,6 +7,7 @@ module.exports = {
         ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
       ],
       plugins: [
+        "@babel/plugin-transform-runtime",
         ["@babel/plugin-proposal-decorators", { legacy: true }],
         ['@babel/plugin-proposal-class-properties', { loose: false }],
         ['@babel/plugin-transform-classes', { loose: true }],
@@ -25,6 +26,7 @@ module.exports = {
         ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
       ],
       plugins: [
+        "@babel/plugin-transform-runtime",
         ["@babel/plugin-proposal-decorators", { legacy: true }],
         ['@babel/plugin-proposal-class-properties', { loose: false }],
         ['@babel/plugin-transform-classes', { loose: true }],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Design System by Channel",
   "repository": {
     "type": "git",
@@ -68,6 +68,7 @@
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-proposal-decorators": "^7.12.1",
     "@babel/plugin-transform-classes": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.15",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
@@ -127,6 +128,7 @@
     "regenerator-runtime": "^0.13.7",
     "rollup": "^2.37.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-visualizer": "^4.2.0",
     "styled-components": "^5.2.1",
     "stylelint": "^13.8.0",
     "ts-node": "^8.10.2",
@@ -138,6 +140,7 @@
     "styled-components": ">=5"
   },
   "dependencies": {
+    "@babel/runtime": "^7.12.13",
     "antlr4": "^4.8.0",
     "core-decorators": "^0.20.0",
     "lodash-es": "^4.17.15",

rollup.config.js

@@ -3,6 +3,7 @@ import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 import resolve from '@rollup/plugin-node-resolve'
 import babel from '@rollup/plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
+import visualizer from 'rollup-plugin-visualizer'
 
 import packageJson from './package.json'
 
@@ -29,8 +30,13 @@ export default {
     }),
     commonjs(),
     babel({
+      babelHelpers: 'runtime',
       exclude: 'node_modules/**',
       extensions,
     }),
+    visualizer({
+      filename: "stats.html",
+    }),
   ],
+  external: [/@babel\/runtime/],
 }

src/layout/Client/utils/LayoutReducer.ts

@@ -116,7 +116,7 @@ function LayoutReducer(state: LayoutState = defaultState, action: LayoutAction):
     case ActionType.SET_SIDE_WIDTH: {
       return {
         ...state,
-        sideWidth: action.payload,
+        sideWidth: state.showSideView ? state.sideWidth : action.payload,
       }
     }
 

src/layout/Navigations/NavigationArea/NavigationArea.styled.ts

@@ -51,7 +51,6 @@ export const NavigationContainer = styled.div<NavigationContainerProps>`
   width: ${({ showNavigation }) => (showNavigation === false ? '0px' : 'inherit')};
   height: 100%;
   user-select: none;
-  background-color: ${({ foundation }) => foundation?.theme?.['bg-navi']};
   ${({ foundation }) =>
     foundation?.transition?.getTransitionsCSS(
       'width',
@@ -82,7 +81,7 @@ export const NavigationPresenter = styled.div<NavigationPresenterProps>`
   height: 100%;
   pointer-events: auto;
   /* TODO: Hovering Color Prop 추가 */
-  background-color: ${({ showNavigation }) => (showNavigation === false && 'white')};
+  background-color: ${({ foundation }) => foundation?.theme?.['bg-navi']};
   border-radius: 0 ${({ showNavigation }) => !showNavigation && '10px 10px'} 0;
   opacity:
     ${({ showNavigation, isHover }) => (