update

.gitignore

@@ -35,3 +35,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+.eslintrc

next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

pages/index.tsx

@@ -4,17 +4,8 @@ import { AccountNavigation, DeliveryItem, AccountPage } from 'src/components/mod
 
 
 export default function Home() {
-
-  const crumbs = [
-    {link: "/", name: "Home"},
-    {link: "/blogs", name: "Blog"},
-    {link: "/product-list", name: "Product List"},
-    {link: "/product-detail", name: "Product Detail"},
-  ];
-
   return (
     <>
-      <BreadcrumbCommon crumbs={crumbs} showHomePage={true} />
       <AccountPage />
 
       

src/components/common/TabCommon/TabCommon.tsx

@@ -1,73 +1,34 @@
-import React, { useState, RefObject, useEffect, useRef } from "react"
+import React, { RefObject, useEffect } from "react"
 import s from './TabCommon.module.scss'
 
 import TabItem from './TabItem/TabItem'
 
 interface TabCommonProps {
-    changeTabPane: (target:string) => void;
+    tabs: {ref:RefObject<HTMLLIElement>, tabName: string, active: boolean, onClick: (tabIndex: number, tabPane: string) => void}[];
+    defaultActiveTab: number;
+    sliderRef : RefObject<HTMLDivElement>;
+    slideToTab: (ref: any) => void;
 }
 
-const TabCommon = ({ changeTabPane } : TabCommonProps) => {
+const TabCommon = ({ tabs, defaultActiveTab, sliderRef, slideToTab } : TabCommonProps) => {
-    const active = "active", unActive = "";
-    const [item1Active, setItem1Active] = useState(active);
-    const [item2Active, setItem2Active] = useState(unActive);
-    const [item3Active, setItem3Active] = useState(unActive);
-
-    const item1 = useRef<HTMLLIElement>(null);
-    const item2 = useRef<HTMLLIElement>(null);
-    const item3 = useRef<HTMLLIElement>(null);
-    const slider = useRef<HTMLDivElement>(null);
-
-    function slide(ref: RefObject<HTMLLIElement>) {
-        const width = ref.current.offsetWidth;
-        const left = ref.current.offsetLeft; 
-               
-        slider.current.style.width = (width-48).toString()+"px";
-        slider.current.style.left = left.toString()+"px";
-    }
-
-    function toggleItem1():void {
-        setItem1Active(active)
-        changeTabPane("waiting")
-
-        setItem2Active(unActive)
-        setItem3Active(unActive)
-        slide(item1)
-    }
-
-    function toggleItem2():void {
-        setItem2Active(active)
-        changeTabPane("delivering")
-
-        setItem1Active(unActive)
-        setItem3Active(unActive)
-        slide(item2)
-    }
-    function toggleItem3():void {
-        setItem3Active(active)
-        changeTabPane("delivered")
-
-        setItem1Active(unActive)
-        setItem2Active(unActive)
-        slide(item3)
-    }
 
     useEffect(() => {
-        slide(item1);
+        slideToTab(tabs[defaultActiveTab].ref);
     }, [])
 
     return (
         <ul className={s.tabCommon}>
-            <li ref={item1}>
+            {
-                <TabItem onClick={toggleItem1} active={item1Active}>Wait for Comfirmation</TabItem>
+                tabs.map((tab) => {
+                    return (
+                        <li key={tab.tabName} ref={tab.ref}>
+                            <TabItem onClick={tab.onClick} active={tab.active}>{tab.tabName}</TabItem>
                         </li>
-            <li ref={item2}>
+                    )
-                <TabItem onClick={toggleItem2} active={item2Active}>Delivering</TabItem>
+                })
-            </li>
+            }
-            <li ref={item3}>
+    
-                <TabItem onClick={toggleItem3} active={item3Active}>Delivered</TabItem>
+            <div ref={sliderRef} className={s.slider}></div>
-            </li>
-            <div ref={slider} className={s.slider}></div>
         </ul>
     )
 }

src/components/common/TabCommon/TabItem/TabItem.module.scss

@@ -5,9 +5,16 @@
     padding-top: 1.6rem;
     padding-bottom: 1.6rem;
 
-    &.active {
+    &:hover {
-        @apply font-bold;
+        @apply cursor-pointer;
     }
+}
+
+.tabItemActive {
+    @apply font-bold;
+    margin-right: 4.8rem;
+    padding-top: 1.6rem;
+    padding-bottom: 1.6rem;
 
     &:hover {
         @apply cursor-pointer;

src/components/common/TabCommon/TabItem/TabItem.tsx

@@ -1,19 +1,16 @@
-import classNames from "classnames";
 import React from "react"
 import s from './TabItem.module.scss'
 
 interface TabItemProps {
-    active: string;
+    active: boolean;
     children: string;
-    onClick: () => void;
+    onClick: (tabIndex: number, tabPane: string) => void;
 }
 
-const TabItem = ({ active = "", children, onClick } : TabItemProps) => {
+const TabItem = ({ active = false, children, onClick } : TabItemProps) => {
 
     return (
-        <span onClick={onClick} className={classNames(s.tabItem, {
+        <span onClick={onClick} className={active ? s.tabItemActive : s.tabItem} >
-            [s[active]]: active
-        })}>
             {children}
         </span>
     )