Navigation Area key 수정, 마이너 버그 픽스 (#227)

Author: jwoo0122

src/components/Switch/Switch.stories.tsx

@@ -8,6 +8,7 @@ import Switch from './Switch'
 
 export default {
   title: getTitle(base),
+  component: Switch,
   argTypes: {
     onClick: { action: 'onClick' },
   },

src/layout/Navigations/NavigationContent/NavigationContent.tsx

@@ -1,5 +1,5 @@
 /* External dependencies */
-import React, { useLayoutEffect, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { noop } from 'lodash-es'
 
 /* Internal dependencies */
@@ -36,10 +36,6 @@ function NavigationContent({
   optionIndex,
   ...otherProps
 }: NavigationContentProps) {
-  useLayoutEffect(() => {
-
-  }, [])
-
   const clazzName = useMemo(() => (
     mergeClassNames(className, ((withScroll && scrollClassName) || undefined))
   ), [className, scrollClassName, withScroll])

src/layout/Navigations/Navigations.tsx

@@ -16,7 +16,6 @@ import {
   toNumber,
   noop,
 } from 'lodash-es'
-import { v4 as uuid } from 'uuid'
 
 /* Internal dependencies */
 import useLayoutDispatch from '../../hooks/useLayoutDispatch'
@@ -187,34 +186,31 @@ forwardedRef: React.Ref<NavigationHandles>,
   }, [navOptions])
 
   const NavigationAreasComponent = useMemo(() => {
-    const childrens = React.Children.toArray(children)
-
     navigationRefs.current = []
 
-    return (
-      childrens.map((navChildren, index) => {
-        // TODO: instanceof 등으로 NavigationContent가 안 내려오면 warning을 띄워주는 것이 좋을 듯
-        if (!navOptions[index] || !React.isValidElement<NavigationContentProps>(navChildren)) { return null }
-
-        return (
-          <NavigationArea
-            key={uuid()}
-            ref={(element: HTMLDivElement) => {
-              set(navigationRefs.current, [index, 'target'], element)
-              set(navigationRefs.current, [index, 'minWidth'], navOptions[index].minWidth)
-              set(navigationRefs.current, [index, 'maxWidth'], navOptions[index].maxWidth)
-            }}
-            disableResize={navOptions[index].disableResize}
-            hidable={navOptions[index].hidable}
-            optionIndex={index}
-            onMouseDown={handleMouseDown}
-            onMouseMove={handleMouseMove}
-          >
-            { navChildren }
-          </NavigationArea>
-        )
-      })
-    )
+    return React.Children.map(children, (navChildren, index) => {
+      // TODO: instanceof 등으로 NavigationContent가 안 내려오면 warning을 띄워주는 것이 좋을 듯
+      if (!navOptions[index] || !React.isValidElement<NavigationContentProps>(navChildren)) { return null }
+
+      return (
+        <NavigationArea
+          /* eslint-disable-next-line react/no-array-index-key */
+          key={`navigation-area-${index}`}
+          ref={(element: HTMLDivElement) => {
+            set(navigationRefs.current, [index, 'target'], element)
+            set(navigationRefs.current, [index, 'minWidth'], navOptions[index].minWidth)
+            set(navigationRefs.current, [index, 'maxWidth'], navOptions[index].maxWidth)
+          }}
+          disableResize={navOptions[index].disableResize}
+          hidable={navOptions[index].hidable}
+          optionIndex={index}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+        >
+          { navChildren }
+        </NavigationArea>
+      )
+    })
   }, [children, handleMouseDown, handleMouseMove, navOptions])
 
   return (