Header과 Navigation이 렌더링되지 않던 버그 수정 (#226)

* HeaderContent 대신 ContentHeader과 CoverableRoute를 각각 props로 받게 변경

* Navigation 구조에서 child.prop로 가져오던 부분을 context로 변경함

* NavigationArea가 남아 있던 버그 수정 - key 값이 남아있는 듯 함

* 레오 리뷰 반영

* React.Children.map 에 null escape 조건 추가

Author: quino0627

src/contexts/NavigationContext.ts

@@ -0,0 +1,19 @@
+/* External dependencies */
+import { createContext } from 'react'
+import { noop } from 'lodash-es'
+
+export interface NavigationContextProps {
+  optionIndex: number
+  showChevron: boolean
+  allowMouseMove: boolean
+  isHoveringOnPresenter: boolean
+  onClickClose: () => void
+}
+
+export const NavigationContext = createContext<NavigationContextProps>({
+  optionIndex: -1,
+  showChevron: false,
+  allowMouseMove: false,
+  isHoveringOnPresenter: false,
+  onClickClose: noop,
+})

src/index.ts

@@ -28,7 +28,6 @@ export * from './components/Header'
 export * from './layout/GNB'
 export * from './layout/GlobalHeader'
 export * from './layout/Client'
-export * from './layout/HeaderContent'
 export * from './layout/Main'
 export * from './layout/Navigations'
 

src/layout/Client/utils/LayoutReducer.ts

@@ -1,3 +1,5 @@
+import { insertItem, removeItem } from '../../../utils/utils'
+
 export interface NavigationState {
   initialWidth: number
   maxWidth: number
@@ -10,21 +12,24 @@ export interface LayoutState {
   sideWidth: number | null
   showSideView: boolean
   showNavigation: boolean
+  navOptions: NavigationState[]
 }
 
 export const defaultState: LayoutState = {
   sideWidth: null,
   showSideView: false,
   showNavigation: true,
+  navOptions: [],
 }
 
 export enum ActionType {
   SET_SIDE_WIDTH,
   OPEN_SIDE_VIEW,
   CLOSE_SIDE_VIEW,
   SET_SHOW_NAVIGATION,
-  ADD_NAVIGATION,
-  CLEAR_NAVIGATIONS,
+  ADD_NAV_OPTION,
+  REMOVE_NAV_OPTION,
+  CLEAR_NAV_OPTION,
 }
 
 interface SetSideWidthAction {
@@ -45,11 +50,28 @@ interface SetShowNavigationAction {
   payload: boolean
 }
 
+interface AddNavOptionAction {
+  type: ActionType.ADD_NAV_OPTION
+  payload: { index: number, option: NavigationState }
+}
+
+interface RemoveNavOptionAction {
+  type: ActionType.REMOVE_NAV_OPTION
+  payload: { index: number }
+}
+
+interface ClearNavOptionAction {
+  type: ActionType.CLEAR_NAV_OPTION
+}
+
 export type LayoutAction = (
   SetSideWidthAction |
   OpenSideViewAction |
   CloseSideViewAction |
-  SetShowNavigationAction
+  SetShowNavigationAction |
+  AddNavOptionAction |
+  RemoveNavOptionAction |
+  ClearNavOptionAction
 )
 
 function LayoutReducer(state: LayoutState = defaultState, action: LayoutAction): LayoutState {
@@ -82,6 +104,27 @@ function LayoutReducer(state: LayoutState = defaultState, action: LayoutAction):
       }
     }
 
+    case ActionType.ADD_NAV_OPTION: {
+      return {
+        ...state,
+        navOptions: insertItem(state.navOptions, action.payload.index, action.payload.option),
+      }
+    }
+
+    case ActionType.REMOVE_NAV_OPTION: {
+      return {
+        ...state,
+        navOptions: removeItem(state.navOptions, action.payload.index),
+      }
+    }
+
+    case ActionType.CLEAR_NAV_OPTION: {
+      return {
+        ...state,
+        navOptions: [],
+      }
+    }
+
     default:
       return state
   }

src/layout/HeaderArea/HeaderArea.styled.ts

@@ -18,12 +18,12 @@ export const HeaderWrapper = styled.div.attrs(({ showSideView, sideWidth }: Head
   grid-column: 1 / 3;
 `
 
-export const LeftHeader = styled.div`
+export const ContentHeader = styled.div`
   grid-row: 1 / 2;
   grid-column: 1 / 2;
 `
 
-export const RightHeader = styled.div`
+export const CoverableHeader = styled.div`
   grid-row: 1 / 2;
   grid-column: 2 / 3;
 `

src/layout/HeaderArea/HeaderArea.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react'
 
 /* Internal dependencies */
 import useLayoutState from '../../hooks/useLayoutState'
-import { HeaderWrapper, LeftHeader, RightHeader } from './HeaderArea.styled'
+import { HeaderWrapper, ContentHeader, CoverableHeader } from './HeaderArea.styled'
 import HeaderAreaProps from './HeaderArea.types'
 
 export const HEADER_AREA_TEST_ID = 'ch-design-system-header-area'
@@ -12,7 +12,7 @@ function HeaderArea(
   {
     style,
     className,
-    mainHeader,
+    contentHeader,
     coverableHeader,
     testId = HEADER_AREA_TEST_ID,
     hasHeader,
@@ -34,8 +34,8 @@ function HeaderArea(
       showSideView={showSideView}
       {...otherProps}
     >
-      <LeftHeader>{ mainHeader }</LeftHeader>
-      <RightHeader>{ coverableHeader }</RightHeader>
+      <ContentHeader>{ contentHeader }</ContentHeader>
+      <CoverableHeader>{ coverableHeader }</CoverableHeader>
     </HeaderWrapper>
   )
 }

src/layout/HeaderContent/HeaderContent.tsx

@@ -1,6 +1,6 @@
 /* External dependencies */
 import React, { forwardRef, useCallback, useRef } from 'react'
-import { clamp, get, isNil } from 'lodash-es'
+import { clamp, isNil } from 'lodash-es'
 import { window } from 'ssr-window'
 
 /* Internal dependencies */
@@ -18,7 +18,8 @@ import MainProps from './Main.types'
 function Main(
   {
     content,
-    header,
+    contentHeader,
+    coverableHeader,
     sidePanel,
     sideView,
     navigationRef,
@@ -34,11 +35,8 @@ function Main(
   const sideInitialWidth = useRef(0)
   const initialPosition = useRef(0)
 
-  const mainHeader = get(header, 'props.mainHeader', null)
-  const coverableHeader = get(header, 'props.coverableHeader', null)
-
   const hasSide = !isNil(sidePanel) || showSideView
-  const hasHeader = !isNil(mainHeader || coverableHeader)
+  const hasHeader = !isNil(contentHeader || coverableHeader)
 
   const handleResizerMouseDown = useCallback((e: MouseEvent) => {
     contentInitialWidth.current = contentRef.current!.clientWidth
@@ -79,7 +77,7 @@ function Main(
     >
       <HeaderArea
         hasHeader={hasHeader}
-        mainHeader={mainHeader}
+        contentHeader={contentHeader}
         coverableHeader={coverableHeader}
       />
       <ContentArea

src/layout/HeaderContent/HeaderContent.types.ts

@@ -11,6 +11,7 @@ import { noop } from 'lodash-es'
 import { window, document } from 'ssr-window'
 
 /* Internal dependencies */
+import { NavigationContext, NavigationContextProps } from '../../../contexts/NavigationContext'
 import useLayoutDispatch from '../../../hooks/useLayoutDispatch'
 import useLayoutState from '../../../hooks/useLayoutState'
 import useThrottledCallback from '../../../hooks/useThrottledCallback'
@@ -33,8 +34,6 @@ function NavigationArea(
     className,
     testId = NAV_TEST_ID,
     /* cloneElement Props */
-    hidable = false,
-    disableResize = false,
     optionIndex = 0,
     onMouseDown = noop,
     onMouseMove = noop,
@@ -44,8 +43,10 @@ function NavigationArea(
   forwardedRef: React.Ref<HTMLDivElement>,
 ) {
   const dispatch = useLayoutDispatch()
-  const { showNavigation } = useLayoutState()
+  const { showNavigation, navOptions } = useLayoutState()
 
+  const hidable = useMemo(() => navOptions[optionIndex]?.hidable || false, [navOptions, optionIndex])
+  const disableResize = useMemo(() => navOptions[optionIndex]?.disableResize || false, [navOptions, optionIndex])
   const show = useMemo(() => (hidable ? showNavigation : undefined), [hidable, showNavigation])
 
   const containerRef = useRef<HTMLDivElement | null>(null)
@@ -73,11 +74,7 @@ function NavigationArea(
       if (!allowMouseMove) return
       onMouseMove(event)
     })
-  }, [
-    disableResize,
-    allowMouseMove,
-    onMouseMove,
-  ])
+  }, [disableResize, allowMouseMove, onMouseMove])
 
   useEventHandler(resizeBarRef, 'mousedown', handleMouseDown)
   useEventHandler(document, 'mouseup', handleMouseUp)
@@ -121,14 +118,13 @@ function NavigationArea(
     }
   }, [handleDecideHover, show])
 
-  const ContentComponent = useMemo(() => (
-    React.cloneElement(children, {
-      showChevron,
-      allowMouseMove,
-      isHoveringOnPresenter,
-      onClickClose: handleClickClose,
-    })
-  ), [allowMouseMove, children, handleClickClose, isHoveringOnPresenter, showChevron])
+  const navigationContextValues: NavigationContextProps = useMemo(() => ({
+    optionIndex,
+    showChevron,
+    allowMouseMove,
+    isHoveringOnPresenter,
+    onClickClose: handleClickClose,
+  }), [allowMouseMove, handleClickClose, isHoveringOnPresenter, optionIndex, showChevron])
 
   return (
     <NavigationContainer
@@ -147,7 +143,9 @@ function NavigationArea(
           onMouseEnter={handlePresenterMouseEnter}
           onMouseLeave={handlePresenterMouseLeave}
         >
-          { ContentComponent }
+          <NavigationContext.Provider value={navigationContextValues}>
+            { children }
+          </NavigationContext.Provider>
         </NavigationPresenter>
       </NavigationPositioner>
       <ResizeBar

src/layout/HeaderContent/index.ts

@@ -1,9 +1,12 @@
 /* External dependencies */
-import React, { useMemo } from 'react'
-import { noop } from 'lodash-es'
+import React, { useContext, useLayoutEffect, useMemo } from 'react'
+import { isNil } from 'lodash-es'
 
 /* Internal dependencies */
 import { mergeClassNames } from '../../../utils/stringUtils'
+import { NavigationContext } from '../../../contexts/NavigationContext'
+import { ActionType } from '../../Client/utils/LayoutReducer'
+import useLayoutDispatch from '../../../hooks/useLayoutDispatch'
 import {
   ChevronIcon,
   StyledContentWrapper,
@@ -28,14 +31,40 @@ function NavigationContent({
   onScroll,
   children,
 
-  /* Navigations Injected Props */
-  showChevron = false,
-  allowMouseMove = false,
-  isHoveringOnPresenter = false,
-  onClickClose = noop,
-  optionIndex,
+  /* LayoutState Prop */
+  layoutOption,
+  showNavigation,
   ...otherProps
 }: NavigationContentProps) {
+  const {
+    optionIndex,
+    showChevron,
+    allowMouseMove,
+    isHoveringOnPresenter,
+    onClickClose,
+  } = useContext(NavigationContext)
+
+  const dispatch = useLayoutDispatch()
+
+  // NOTE: LAYOUTEFFECT를 사용하지 않으면 initial 값이 없을때 순간 깜빡임이 발생한다
+  useLayoutEffect(() => {
+    if (optionIndex === 0) {
+      dispatch({ type: ActionType.CLEAR_NAV_OPTION })
+    }
+
+    dispatch({
+      type: ActionType.ADD_NAV_OPTION,
+      payload: { index: optionIndex, option: layoutOption },
+    })
+
+    if (!isNil(showNavigation)) {
+      dispatch({
+        type: ActionType.SET_SHOW_NAVIGATION,
+        payload: showNavigation,
+      })
+    }
+  }, [dispatch, layoutOption, optionIndex, showNavigation])
+
   const clazzName = useMemo(() => (
     mergeClassNames(className, ((withScroll && scrollClassName) || undefined))
   ), [className, scrollClassName, withScroll])