refactor : set child component as client

src/components/base/layouts/MobileLayout.tsx

@@ -1,4 +1,3 @@
-'use client';
 import React from 'react';
 
 import { BottomTab, MobileHeader } from '../parts';

src/components/base/parts/mobile/BottomTab.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { BottomTabIconLink } from '@/components/ui';
 import { mainRouteConfig } from '@/const/site/mainRouteConfig';
 

src/components/base/parts/mobile/MobileHeader.tsx

@@ -1,26 +1,18 @@
-// not using "use client" since it's a child of MobileLayout, which is already using "use client"
+'use client';
 
 import { Button, Icon } from '@/components/ui';
 
-import { useRouter } from 'next/navigation';
 import React from 'react';
 
 export const MobileHeader = () => {
-  const router = useRouter();
-
   return (
     <header className="bg-popover sticky top-0 z-40 w-full">
       <div className="flex h-16 items-center justify-between px-5">
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={() => router.back()}
-          className="hover:bg-popover"
-        >
-          <Icon iconName="arrowLeft" fill="popover-foreground" />
+        <Button variant="ghost" size="icon" onClick={() => {}} className="hover:bg-popover">
+          <Icon iconName="arrowLeft" color="popover-foreground" />
         </Button>
         <Button variant="ghost" size="icon" onClick={() => {}} className="hover:bg-popover">
-          <Icon iconName="menuCircle" fill="popover-foreground" />
+          <Icon iconName="menuCircle" color="popover-foreground" />
         </Button>
       </div>
     </header>

src/components/ui/BottomTabIconLink.tsx

@@ -31,14 +31,15 @@ export const BottomTabIconLink: React.FC<Props> = ({ name, isSelected }) => {
     : 'profile_off';
 
   // icon color based on "isSelected" variable
-  const fillStyle = isSelected ? 'primary' : 'secondary';
+  // const fillStyle = isSelected ? 'primary' : 'secondary';
 
   // text color based on "isSelected" variable
-  const textColorStyle = isSelected ? 'text-primary' : 'text-secondary';
+  const color = isSelected ? 'primary' : 'secondary';
+  const textColorStyle = `text-${color}`;
 
   return (
     <Link href={path} className="inline-flex flex-col items-center justify-center px-5">
-      <Icon iconName={iconName} className={'mb-1'} fill={fillStyle} />
+      <Icon iconName={iconName} className={'mb-1'} color={color} />
       <span className={cn('text-xs', textColorStyle)}>{title}</span>
     </Link>
   );