fix: 그룹 관리 탭 스타일 수정 (#18)

* fix: 그룹 관리 탭 스타일 수정

* yarn fmt

app/[locale]/(authorized)/group/[id]/NavigationTab.tsx

@@ -1,17 +1,15 @@
 'use client';
 
 import Link from 'next/link';
-import { useParams, usePathname } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 
 export default function NavigationTab() {
-  const { id } = useParams();
-
   return (
-    <div className="text-lg flex flex-row text-center border-b border-black/10 dark:border-white/10">
-      <Tab href={`/group/${id}/members`}>
+    <div className="text-lg flex flex-row text-center">
+      <Tab href="members">
         멤버 목록
       </Tab>
-      <Tab href={`/group/${id}/pending`}>
+      <Tab href="pending">
         승인 대기 목록
       </Tab>
     </div>
@@ -21,14 +19,14 @@ export default function NavigationTab() {
 function Tab(props: { href: string; children: React.ReactNode }) {
   const { href, children } = props;
   const pathname = usePathname();
-  const isActive = pathname === href;
+  const isActive = pathname.endsWith(href);
 
-  let className = 'flex-1 rounded-t p-2 transition';
+  let className = 'flex-1 rounded-t p-2 transition'
+    + ' hover:bg-black/10 dark:hover:bg-white/10 active:bg-black/15 dark:active:bg-white/15';
   if (isActive) {
-    className += ' font-bold border-b-2 border-primary-300 dark:border-primary-600'
-      + ' bg-black/20 dark:bg-white/20';
+    className += ' font-bold border-b-2 border-primary-300 dark:border-primary-600';
   } else {
-    className += ' hover:bg-black/10 dark:hover:bg-white/10';
+    className += ' border-b border-black/10 dark:border-white/10';
   }
 
   return (