update(music): route

next.config.mjs

@@ -10,7 +10,7 @@ const nextConfig = {
       },
       {
         source: '/',
-        destination: '/vol/list/all',
+        destination: '/music/all',
       },
     ];
   },
@@ -18,7 +18,7 @@ const nextConfig = {
   //   return [
   //     {
   //       source: '/',
-  //       destination: '/vol/list/all',
+  //       destination: '/music/all',
   //       permanent: true,
   //     },
   //   ];

src/app/music/[category]/[[...page]]/page.tsx

@@ -86,7 +86,7 @@ export default async function Journal({ params }: { params: { category?: string;
           total={journalList?.total}
           pageSize={10}
           current={page}
-          link={`/vol/list/${category}`}
+          link={`/music/${category}`}
         />
       </div>
 

src/app/vol/[journalId]/page.tsx

@@ -34,7 +34,7 @@ export default async function JournalDetail({ params: { journalId } }: { params:
           {journalInfo?.tags.length > 0 &&
             journalInfo.tags.map((tag: string) => (
               // <Link
-              //   href={`/vol/list/${tag}`}
+              //   href={`/music/${tag}`}
               //   key={tag}
               //   className="block w-auto py-[3px] px-[10px] rounded-[15px] bg-[rgba(0,0,0,0.05)] text-[rgba(0,0,0,0.7)] text-[12px] leading-[12px]"
               // >

src/components/Category.tsx

@@ -5,7 +5,7 @@ const Category = async ({ list, current }: { list: Category[]; current: string }
     <div className={`grid grid-cols-8 gap-10px grid-row-gap: 10px;`}>
       {list.map((item: Category) => (
         <Link
-          href={`/vol/list/${item.nameEn}`}
+          href={`/music/${item.nameEn}`}
           key={item.id}
           className={`w-[80px] h-[35px] rounded-[120px] text-[13px] leading-[18px] text-center leading-[35px] cursor-pointer ${current === item.id ? 'bg-brand text-[#fff]' : 'bg-[#F2F3F7] text-[#000] hover:text-brand'}`}
         >

src/components/Header/Nav.tsx

@@ -22,13 +22,20 @@ export default function Nav({ type = 'server' }: { type?: NextComponentType }) {
     },
   ];
 
+  const pathMatch = (path: string) => {
+    if (path === '/') {
+      return pathName === path || /^\/vol\//.test(pathName) || /^\/music\//.test(pathName);
+    }
+    return pathName === path;
+  };
+
   return (
     <nav>
       <ul className="flex flex-row items-center space-x-[40px]">
         {menuList.map(({ name, path }) => (
           <li
             key={path}
-            className={`text-[18px] leading-[25.2px] font-medium hover:text-[rgba(0,0,0,0.95)] ${pathName === path || (path === '/' && /^\/vol\//.test(pathName)) ? 'text-[rgba(0,0,0,0.95)]' : 'text-[rgba(0,0,0,0.4)]'}`}
+            className={`text-[18px] leading-[25.2px] font-medium hover:text-[rgba(0,0,0,0.95)] ${pathMatch(path) ? 'text-[rgba(0,0,0,0.95)]' : 'text-[rgba(0,0,0,0.4)]'}`}
           >
             {type === 'server' ? <Link href={path}>{name}</Link> : <ClientLink href={path}>{name}</ClientLink>}
           </li>