✨ feat: Tab Common

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

@@ -1,5 +1,15 @@
 @import '../../../styles/utilities';
 
-.tabCommon {
+.tabCommonOutSide {
     @apply spacing-horizontal;
+    
+    .tabCommon {
+        @apply flex;
+        position: relative;
+        border-bottom: 2px solid #FBFBFB;
+        padding-top: 1.6rem;
+        padding-bottom: 1.6rem;
+        width: 100%;
+    }
 }
+

src/components/common/TabCommon/TabCommon.tsx

@@ -8,35 +8,39 @@ interface TabCommonProps {
 }
 
 const TabCommon = ({ } : TabCommonProps) => {
-    const [item1Active, setItem1Active] = useState(true);
-    const [item2Active, setItem2Active] = useState(false);
-    const [item3Active, setItem3Active] = useState(false);
+    const active = "active", unActive = "";
 
-    const toggleItem1 = () => {
-        setItem1Active(true)
+    const [item1Active, setItem1Active] = useState(active);
+    const [item2Active, setItem2Active] = useState(unActive);
+    const [item3Active, setItem3Active] = useState(unActive);
 
-        setItem2Active(false)
-        setItem3Active(false)
+    function toggleItem1():void {
+        setItem1Active(active)
+
+        setItem2Active(unActive)
+        setItem3Active(unActive)
     }
-    const toggleItem2 = () => {
-        setItem2Active(true)
+    function toggleItem2():void {
+        setItem2Active(active)
 
-        setItem1Active(false)
-        setItem3Active(false)
+        setItem1Active(unActive)
+        setItem3Active(unActive)
     }
-    const toggleItem3 = () => {
-        setItem3Active(true)
+    function toggleItem3():void {
+        setItem3Active(active)
 
-        setItem1Active(false)
-        setItem2Active(false)
+        setItem1Active(unActive)
+        setItem2Active(unActive)
     }
 
     return (
-        <div className={s.tabCommon}>
-            <span onClick={toggleItem1}><TabItem active={item1Active}>Wait for Comfirmation</TabItem></span>
-            <span onClick={toggleItem2}><TabItem active={item2Active}>Delivering</TabItem></span>
-            <span onClick={toggleItem3}><TabItem active={item3Active}>Delivered</TabItem></span>
-        </div>
+        <section className={s.tabCommonOutSide}>
+            <div className={s.tabCommon}>
+                <span onClick={toggleItem1}><TabItem active={item1Active}>Wait for Comfirmation</TabItem></span>
+                <span onClick={toggleItem2}><TabItem active={item2Active}>Delivering</TabItem></span>
+                <span onClick={toggleItem3}><TabItem active={item3Active}>Delivered</TabItem></span>
+            </div>
+        </section>
     )
 }
 

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

@@ -1,26 +1,14 @@
 @import '../../../../styles/utilities';
 
 .tabItem {
-    @apply font-bold;
-    margin-right: 2rem;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-
-    &:hover {
-        @apply cursor-pointer;
-    }
+    margin-right: 4.8rem;
+    padding-top: 1.6rem;
+    padding-bottom: 1.6rem;
 
     &.active {
-        border-bottom: 2px solid #2DC86E;
+        @apply font-bold;
+        border-bottom: 2px solid var(--primary);
     }
-}
-
-.tabItemActive {
-    @apply font-bold;
-    margin-right: 2rem;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-    border-bottom: 2px solid #2DC86E;
 
     &:hover {
         @apply cursor-pointer;

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

@@ -1,15 +1,18 @@
-import React, { useState } from "react"
+import classNames from "classnames";
+import React from "react"
 import s from './TabItem.module.scss'
 
 interface TabItemProps {
-    active?: boolean;
-    target?: any;
+    active: string;
+    target?: string;
     children?: string;
 }
 
-const TabItem = ({ active, children } : TabItemProps) => {
+const TabItem = ({ active = "", children } : TabItemProps) => {
     return (
-        <span className={active ? s.tabItemActive : s.tabItem}>
+        <span className={classNames(s.tabItem, {
+            [s[active]]: active
+        })}>
             {children}
         </span>
     )