🔨 refactor: Account Navigation

src/components/modules/account/AccountNavigation/AccountNavigation.module.scss

@@ -1,8 +1,8 @@
 @import '../../../../styles/utilities';
 
 .accountNavigation {
-    border-left: 2px solid #FBFBFB;
-    max-width: 28.9rem;
+    @apply flex;
+    width: 100%;
 
     .slider {
         @apply inline-block;
@@ -14,4 +14,14 @@
         left: 11.2rem;
         transition: all .2s linear;
     }
+    
+    .tabList {
+        margin-top: 3.8rem;
+        margin-right: 12.4rem;
+    }
+
+    .tabBody {
+        margin-top: -4.7rem;
+        width: 100%;
+    }
 }

src/components/modules/account/AccountNavigation/AccountNavigation.tsx

@@ -1,49 +1,68 @@
-import React, { useRef, RefObject, useEffect } from "react"
+import React, { useRef, useEffect, Children, ReactElement, PropsWithChildren, useState, cloneElement } from "react"
 import s from './AccountNavigation.module.scss'
 
-import AccountNavigationItem from './components/AccountNavigationItem' 
+import AccountNavigationItem from './components/AccountNavigationItem/AccountNavigationItem'
+import {TabPaneProps} from '../../../common/TabCommon/components/TabPane/TabPane'
 
 interface AccountNavigationProps {
-    items: {ref: RefObject<HTMLDivElement>, active: boolean, itemName: string, onClick: (tabIndex: number)=>void}[];
     defaultActiveIndex: number;
+    children: React.ReactNode
 }
 
-const AccountNavigation = ({ items, defaultActiveIndex } : AccountNavigationProps) => {
-
+const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationProps) => {
+    const [active, setActive] = useState(defaultActiveIndex)
     const sliderRef = useRef<HTMLDivElement>(null);
+    const headerRef = useRef<HTMLUListElement>(null)
 
-    function slide(index: number) {        
-        const previousItem = items[index].ref.current;
-        const slider = sliderRef.current;
-        if (previousItem && slider) {            
-            const top = previousItem.offsetTop;
-            slider.style.top = top.toString()+"px";
+    const onTabClick = (index: number) => {
+        setActive(index)
+    }
+
+    function slide(index: number) {       
+        const active = headerRef.current?.children.item(index)?.getBoundingClientRect()
+        const header = headerRef.current?.getBoundingClientRect()
+        const current = sliderRef.current
+
+        if (current && active && header) {
+            const top = active.top;
+            current.style.top = top.toString()+"px";
         }
     }
 
-    const handleClick = (item: {ref: RefObject<HTMLDivElement>, active: boolean, itemName: string, onClick: (tabIndex: number)=>void},
-                        index: number) => {
-        slide(index);                    
-        item.onClick(index);
-        
-    }
-
     useEffect(() => {
-        slide(defaultActiveIndex);
-    }, [])
+        slide(active);
+    }, [active])
 
     return (
         <section className={s.accountNavigation}>
-            {   
-                items.map((item, i) => {
-                    return (
-                        <div key={item.itemName} ref={item.ref}>
-                            <AccountNavigationItem onClick={() => {handleClick(item, i)}} active={item.active}>{item.itemName}</AccountNavigationItem>
-                        </div>
-                    )
-                })
-            }
-            <div ref={sliderRef} className={s.slider}></div>
+            <ul className={s.tabList} ref={headerRef}>
+                {
+                    Children.map(children, (tab, index) => {
+                        let item = tab as ReactElement<PropsWithChildren<TabPaneProps>>
+                        return (
+                            <li key={item.props.tabName}>
+                            <AccountNavigationItem
+                                active={active === index}
+                                onClick={onTabClick}
+                                tabIndex={index}
+                            >
+                                {item.props.tabName}
+                            </AccountNavigationItem>
+                            </li>
+                        )
+                    })
+                }
+                <div ref={sliderRef} className={s.slider}></div>
+            </ul>
+
+            <div className={s.tabBody}>
+                {
+                    Children.map(children, (tab, index) => {
+                        let item = tab as ReactElement<PropsWithChildren<TabPaneProps>>
+                        return cloneElement(item, { active: index === active });
+                    })
+               }
+            </div>
         </section>
     )
 }

src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../../styles/utilities';
+@import '../../../../../../styles/utilities';
 
 .accountNavigationItem {
     width: 28rem;

src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx

@@ -5,12 +5,17 @@ import s from './AccountNavigationItem.module.scss'
 interface AccountNavigationItemProps {
     children?: string;
     active?: boolean;
-    onClick: () => void;
+    tabIndex: number
+    onClick: (index: number) => void;
 }
 
-const AccountNavigationItem = ({ children, active, onClick } : AccountNavigationItemProps) => {
+const AccountNavigationItem = ({ children, active, tabIndex, onClick } : AccountNavigationItemProps) => {
+    
+    const handleClick = () => {
+        onClick(tabIndex)
+    }
     return (
-        <div onClick={onClick} className={classNames(s.accountNavigationItem, {
+        <div onClick={handleClick} className={classNames(s.accountNavigationItem, {
             [s.active]:active
         })}>
             {children}