v0.3.9

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "Design System by Channel",
   "repository": {
     "type": "git",

src/foundation/Mixins.ts

@@ -7,6 +7,11 @@ export const absoluteCenter = (otherTransforms: any) => `
   transform: translate(-50%, -50%) ${otherTransforms};
 `
 
+export const disableAutoMinimum = css`
+  min-width: 0;
+  min-height: 0;
+`
+
 export const hideScrollbars = () => css`
   -ms-overflow-style: none;
 

src/hooks/useSideWidth.ts

@@ -5,28 +5,15 @@ import { useEffect } from 'react'
 import { SIDE_FALLBACK_WIDTH } from '../constants/LayoutSizes'
 import { ActionType } from '../layout/Client/utils/LayoutReducer'
 import useLayoutDispatch from './useLayoutDispatch'
-import useLayoutState from './useLayoutState'
 
 export default function useSideWidth(width: number = SIDE_FALLBACK_WIDTH) {
   const dispatch = useLayoutDispatch()
 
-  const { showSideView } = useLayoutState()
-
   useEffect(() => {
     dispatch({
       type: ActionType.SET_SIDE_WIDTH,
       payload: width,
     })
-
-    return function cleanUp() {
-      if (!showSideView) {
-        dispatch({
-          type: ActionType.SET_SIDE_WIDTH,
-          payload: 0,
-        })
-      }
-    }
-
     /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [])
 

src/layout/Client/utils/LayoutReducer.ts

@@ -5,6 +5,11 @@ import { omit } from 'lodash-es'
 import { insertItem, removeItem } from '../../../utils/arrayUtils'
 import ColumnType from '../../../types/ColumnType'
 
+interface SetShowSideActionPayload {
+  showSideView?: boolean
+  showSidePanel?: boolean
+}
+
 type ColumnRef = {
   target: HTMLDivElement
   minWidth: number
@@ -21,9 +26,10 @@ export interface ColumnState {
 }
 
 export interface LayoutState {
-  /* Side View related */
+  /* Side related */
   sideWidth: number
   showSideView: boolean
+  showSidePanel: boolean
   /* Navigations related */
   showNavigation: boolean
   /* Resizing related */
@@ -35,6 +41,7 @@ export interface LayoutState {
 export const defaultState: LayoutState = {
   sideWidth: 0,
   showSideView: false,
+  showSidePanel: false,
   showNavigation: true,
   orderedColumnKeys: [],
   columnRefs: {},
@@ -43,6 +50,7 @@ export const defaultState: LayoutState = {
 
 export enum ActionType {
   SET_SIDE_WIDTH = 'SET_SIDE_WIDTH',
+  SET_SHOW_SIDE = 'SET_SHOW_SIDE',
   OPEN_SIDE_VIEW = 'OPEN_SIDE_VIEW',
   CLOSE_SIDE_VIEW = 'CLOSE_SIDE_VIEW',
   SET_SHOW_NAVIGATION = 'SET_SHOW_NAVIGATION',
@@ -58,6 +66,11 @@ interface SetSideWidthAction {
   payload: number
 }
 
+interface SetShowSideAction {
+  type: ActionType.SET_SHOW_SIDE
+  payload: SetShowSideActionPayload
+}
+
 interface OpenSideViewAction {
   type: ActionType.OPEN_SIDE_VIEW
 }
@@ -101,6 +114,7 @@ interface RemoveColumnRefAction {
 
 export type LayoutAction = (
   SetSideWidthAction |
+  SetShowSideAction |
   OpenSideViewAction |
   CloseSideViewAction |
   SetShowNavigationAction |
@@ -120,6 +134,13 @@ function LayoutReducer(state: LayoutState = defaultState, action: LayoutAction):
       }
     }
 
+    case ActionType.SET_SHOW_SIDE: {
+      return {
+        ...state,
+        ...action.payload,
+      }
+    }
+
     case ActionType.OPEN_SIDE_VIEW: {
       return {
         ...state,

src/layout/ContentArea/ContentArea.styled.ts

@@ -1,9 +1,11 @@
 /* Internal dependencies */
-import { styled } from '../../foundation'
+import { styled, disableAutoMinimum } from '../../foundation'
 
 export const ContentAreaWrapper = styled.div`
   position: relative;
   grid-row: 2;
   grid-column: 1;
   background-color: ${({ foundation }) => foundation?.theme?.['bg-white-normal']};
+
+  ${disableAutoMinimum}
 `

src/layout/HeaderArea/HeaderArea.styled.ts

@@ -1,5 +1,5 @@
 /* Internal dependencies */
-import { styled } from '../../foundation'
+import { styled, disableAutoMinimum } from '../../foundation'
 
 interface HeaderWrapperProps {
   showSideView: boolean
@@ -17,14 +17,20 @@ export const HeaderWrapper = styled.div.attrs(({ showSideView, sideWidth }: Head
   grid-column: 1 / 3;
   background-color: ${({ foundation }) => foundation?.theme?.['bg-header']};
   border-bottom: 1px solid ${({ foundation }) => foundation?.theme?.['bdr-black-light']};
+
+  ${disableAutoMinimum}
 `
 
 export const ContentHeader = styled.div`
   grid-row: 1 / 2;
   grid-column: 1 / 2;
+
+  ${disableAutoMinimum}
 `
 
 export const CoverableHeader = styled.div`
   grid-row: 1 / 2;
   grid-column: 2 / 3;
+
+  ${disableAutoMinimum}
 `

src/layout/Main/Main.tsx

@@ -24,9 +24,9 @@ function Main(
   }: MainProps,
   forwardedRef: React.Ref<HTMLDivElement>,
 ) {
-  const { sideWidth, showSideView } = useLayoutState()
+  const { sideWidth, showSideView, showSidePanel } = useLayoutState()
 
-  const hasSide = !isNil(SidePanelComponent) || showSideView
+  const hasSide = showSideView || showSidePanel
   const hasHeader = !isNil(ContentHeaderComponent || CoverableHeaderComponent)
 
   return (
@@ -47,8 +47,8 @@ function Main(
         { children }
       </ContentArea>
 
-      <SidePanelComponent />
-      <SideViewComponent />
+      <SidePanelComponent/>
+      <SideViewComponent/>
     </MainWrapper>
   )
 }

src/layout/Navigations/NavigationContent/NavigationContent.styled.ts

@@ -35,10 +35,6 @@ export const StyledContentWrapper = styled.div<StyledContentWrapperProps>`
   height: 100%;
   overflow-x: hidden;
   overflow-y: ${({ withScroll }) => (withScroll ? 'auto' : 'hidden')};
-
-  & > *:last-child {
-    margin-bottom: 40px !important;
-  }
 `
 
 export const StyledFooterWrapper = styled.div`

src/layout/Side/SideArea/SideArea.styled.ts

@@ -1,5 +1,5 @@
 /* Internal dependencies */
-import { css, styled } from '../../../foundation'
+import { css, styled, disableAutoMinimum } from '../../../foundation'
 import LayoutSideType from '../../../constants/LayoutSideType'
 
 interface SideAreaWrapperProps {
@@ -12,10 +12,11 @@ export const SideAreaWrapper = styled.div<SideAreaWrapperProps>`
   grid-row: ${({ sideType }) => (sideType === LayoutSideType.SidePanel ? '2 / 3' : '1 / 3')};
   grid-column: 2;
   background-color: ${({ foundation }) => foundation?.theme?.['bg-grey-lightest']};
-
   ${({ showSideView, sideType }) => showSideView && sideType === LayoutSideType.SidePanel && css`
     display: none;
   `}
+
+  ${disableAutoMinimum}
 `
 
 export const ScrollWrapper = styled.div`

src/layout/Side/SideArea/SideArea.tsx

@@ -4,7 +4,6 @@ import { noop, clamp } from 'lodash-es'
 import { document } from 'ssr-window'
 
 /* Internal dependencies */
-import LayoutSideType from '../../../constants/LayoutSideType'
 import useEventHandler from '../../../hooks/useEventHandler'
 import useLayoutState from '../../../hooks/useLayoutState'
 import useResizingHandlers from '../../../hooks/useResizingHandlers'
@@ -40,10 +39,6 @@ function SideArea(
   const contentKey = useMemo(() => (orderedColumnKeys[orderedColumnKeys.length - 1]), [orderedColumnKeys])
   const contentRef = useMemo(() => (columnRefs[contentKey]?.target), [columnRefs, contentKey])
 
-  const hideSideView = useMemo(() => (
-    sideType === LayoutSideType.SideView && !showSideView
-  ), [showSideView, sideType])
-
   const handleResizerMouseMove = useCallback((e: HTMLElementEventMap['mousemove']) => {
     if (
       handleResizing(e) &&
@@ -89,10 +84,6 @@ function SideArea(
   useEventHandler(document, 'mousemove', handleResizerMouseMove, isDragging)
   useEventHandler(document, 'mouseup', handleResizerMouseUp)
 
-  if (hideSideView) {
-    return null
-  }
-
   return (
     <SideAreaWrapper
       data-testId={testId}

src/layout/Side/SidePanelContent/SidePanelContent.tsx

@@ -1,10 +1,12 @@
 /* External dependencies */
-import React from 'react'
+import React, { useEffect } from 'react'
 import { noop } from 'lodash-es'
 
 /* Internal dependencies */
 import LayoutSideType from '../../../constants/LayoutSideType'
 import { SideArea } from '../SideArea'
+import { ActionType } from '../../Client/utils/LayoutReducer'
+import useLayoutDispatch from '../../../hooks/useLayoutDispatch'
 import SidePanelContentProps from './SidePanelContent.types'
 
 export const SIDE_PANEL_CONTENT_TEST_ID = 'ch-design-system-side-panel-content'
@@ -14,6 +16,27 @@ function SidePanelContent({
   children,
   onChangeSideWidth = noop,
 }: SidePanelContentProps) {
+  const dispatch = useLayoutDispatch()
+
+  useEffect(() => {
+    dispatch({
+      type: ActionType.SET_SHOW_SIDE,
+      payload: {
+        showSidePanel: true,
+      },
+    })
+
+    return function cleanup() {
+      dispatch({
+        type: ActionType.SET_SHOW_SIDE,
+        payload: {
+          showSidePanel: false,
+        },
+      })
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   return (
     <SideArea
       sideType={LayoutSideType.SidePanel}

src/layout/Side/SideViewContent/SideViewContent.tsx

@@ -1,19 +1,42 @@
 /* External dependencies */
-import React from 'react'
+import React, { useEffect } from 'react'
 import { noop } from 'lodash-es'
 
 /* Internal dependencies */
 import LayoutSideType from '../../../constants/LayoutSideType'
 import { SideArea } from '../SideArea'
+import useLayoutDispatch from '../../../hooks/useLayoutDispatch'
+import { ActionType } from '../../Client/utils/LayoutReducer'
 import SideViewContentProps from './SideViewContent.types'
 
 export const SIDE_VIEW_CONTENT_TEST_ID = 'ch-design-system-side-view-content'
 
-function SidePanelContent({
+function SideViewContent({
   testId = SIDE_VIEW_CONTENT_TEST_ID,
   children,
   onChangeSideWidth = noop,
 }: SideViewContentProps) {
+  const dispatch = useLayoutDispatch()
+
+  useEffect(() => {
+    dispatch({
+      type: ActionType.SET_SHOW_SIDE,
+      payload: {
+        showSideView: true,
+      },
+    })
+
+    return function cleanup() {
+      dispatch({
+        type: ActionType.SET_SHOW_SIDE,
+        payload: {
+          showSideView: false,
+        },
+      })
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   return (
     <SideArea
       data-testId={testId}
@@ -25,4 +48,4 @@ function SidePanelContent({
   )
 }
 
-export default SidePanelContent
+export default SideViewContent

src/layout/stories/LayoutPlayground/Content.tsx

@@ -7,6 +7,7 @@ import useLayoutState from '../../../hooks/useLayoutState'
 import useSideView from '../../../hooks/useSideView'
 import { styled } from '../../../foundation'
 import { ActionType } from '../../Client/utils/LayoutReducer'
+import { Text } from '../../../components/Text'
 
 const Div = styled.div`
   display: flex;
@@ -20,7 +21,12 @@ const Div = styled.div`
 function Content() {
   const dispatch = useLayoutDispatch()
 
-  const { showNavigation } = useLayoutState()
+  const {
+    showNavigation,
+    sideWidth,
+    showSideView,
+    showSidePanel,
+  } = useLayoutState()
 
   const [handleOpenSideView, handleCloseSideView] = useSideView()
 
@@ -33,6 +39,11 @@ function Content() {
 
   return (
     <Div>
+      <div>
+        <Text as="div">{ `sideWidth: ${sideWidth}px` }</Text>
+        <Text as="div">{ `showSideView: ${showSideView ? 'true' : 'false'}` }</Text>
+        <Text as="div">{ `showSidePanel: ${showSidePanel ? 'true' : 'false'}` }</Text>
+      </div>
       <button type="button" onClick={handleOpenSideView}>사이드뷰 열기</button>
       <button type="button" onClick={handleCloseSideView}>사이드뷰 닫기</button>
       <button type="button" onClick={handleToggleNavigation}>네비게이션 토글</button>