diff --git a/.gitignore b/.gitignore index 61386b73c..34232cff6 100644 --- a/.gitignore +++ b/.gitignore @@ -35,3 +35,5 @@ yarn-error.log* # vercel .vercel + +.eslintrc diff --git a/next-env.d.ts b/next-env.d.ts index c6643fda1..9bc3dd46b 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,3 +1,6 @@ /// /// /// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/pages/index.tsx b/pages/index.tsx index b78fb2629..5c010c4c2 100644 --- a/pages/index.tsx +++ b/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 ( <> - diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx index c744f1a2a..a2d47c1ed 100644 --- a/src/components/common/TabCommon/TabCommon.tsx +++ b/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, tabName: string, active: boolean, onClick: (tabIndex: number, tabPane: string) => void}[]; + defaultActiveTab: number; + sliderRef : RefObject; + slideToTab: (ref: any) => void; } -const TabCommon = ({ changeTabPane } : TabCommonProps) => { - const active = "active", unActive = ""; - const [item1Active, setItem1Active] = useState(active); - const [item2Active, setItem2Active] = useState(unActive); - const [item3Active, setItem3Active] = useState(unActive); - - const item1 = useRef(null); - const item2 = useRef(null); - const item3 = useRef(null); - const slider = useRef(null); - - function slide(ref: RefObject) { - 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) - } +const TabCommon = ({ tabs, defaultActiveTab, sliderRef, slideToTab } : TabCommonProps) => { useEffect(() => { - slide(item1); + slideToTab(tabs[defaultActiveTab].ref); }, []) return (
    -
  • - Wait for Comfirmation -
  • -
  • - Delivering -
  • -
  • - Delivered -
  • -
    + { + tabs.map((tab) => { + return ( +
  • + {tab.tabName} +
  • + ) + }) + } + +
) } diff --git a/src/components/common/TabCommon/TabItem/TabItem.module.scss b/src/components/common/TabCommon/TabItem/TabItem.module.scss index 3d3b44604..bdbb0b66a 100644 --- a/src/components/common/TabCommon/TabItem/TabItem.module.scss +++ b/src/components/common/TabCommon/TabItem/TabItem.module.scss @@ -5,9 +5,16 @@ padding-top: 1.6rem; padding-bottom: 1.6rem; - &.active { - @apply font-bold; + &:hover { + @apply cursor-pointer; } +} + +.tabItemActive { + @apply font-bold; + margin-right: 4.8rem; + padding-top: 1.6rem; + padding-bottom: 1.6rem; &:hover { @apply cursor-pointer; diff --git a/src/components/common/TabCommon/TabItem/TabItem.tsx b/src/components/common/TabCommon/TabItem/TabItem.tsx index 62de3c595..4c0a7cf30 100644 --- a/src/components/common/TabCommon/TabItem/TabItem.tsx +++ b/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 ( - + {children} )