🐛 fix: pR 리뷰 반영 코드 수정

src/layout/Mobile/MobileBottomNavBar.tsx

@@ -1,8 +1,6 @@
-"use client";
-
 import * as NM from "@radix-ui/react-navigation-menu";
-import NextLink, { LinkProps } from "next/link";
-import { usePathname } from "next/navigation";
+
+import NavLink from "./MobileBottomNavLink";
 
 const navigations = [
   { name: "홈", slug: "/" },
@@ -12,32 +10,13 @@ const navigations = [
   { name: "내정보", slug: "/mypage" },
 ];
 
-const Link = ({
-  href,
-  ...props
-}: LinkProps & { children: React.ReactNode }) => {
-  const pathname = usePathname();
-  const isActive = href === pathname;
-
-  return (
-    <NM.Link asChild active={isActive}>
-      <NextLink
-        href={href}
-        prefetch
-        className={` ${isActive ? "text-red-600" : ""}`}
-        {...props}
-      />
-    </NM.Link>
-  );
-};
-
 const MobileBottomNavBar = () => {
   return (
     <NM.Root className="items-between fixed bottom-0 flex min-h-btm-nav-bar w-full max-w-screen-m-lg flex-col justify-center bg-slate-400 px-4">
       <NM.List className="flex h-full w-full items-center justify-between">
         {navigations.map((nav) => (
           <NM.Item key={nav.name}>
-            <Link href={nav.slug}>{nav.name}</Link>
+            <NavLink href={nav.slug}>{nav.name}</NavLink>
           </NM.Item>
         ))}
       </NM.List>

src/layout/Mobile/MobileBottomNavLink.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as NM from "@radix-ui/react-navigation-menu";
+import NextLink, { LinkProps } from "next/link";
+import { usePathname } from "next/navigation";
+
+const NavLink = ({
+  href,
+  ...props
+}: LinkProps & { children: React.ReactNode }) => {
+  const pathname = usePathname();
+  const isActive = href === pathname;
+
+  return (
+    <NM.Link asChild active={isActive}>
+      <NextLink
+        href={href}
+        prefetch
+        className={` ${isActive ? "text-red-600" : ""}`}
+        {...props}
+      />
+    </NM.Link>
+  );
+};
+
+export default NavLink;

src/layout/Mobile/MobileLayout.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import MobileBottomNavBar from "./MobileBottomNavBar";
 
 const MobileLayout = ({ children }: { children: React.ReactNode }) => {