Merge pull request #49 from dnd-side-project/chore/47-bomttom-navigat…

…ion-disable

바텀 네비게이션에 미진행 라우트 접근 제한 추가

src/layout/Mobile/NavigationBar/NavigationBarButton.tsx

@@ -3,22 +3,40 @@
 import * as NM from "@radix-ui/react-navigation-menu";
 import NextLink, { LinkProps } from "next/link";
 import { usePathname } from "next/navigation";
-import { ReactNode } from "react";
+import { MouseEvent, ReactNode } from "react";
 
-const NavLink = ({ href, ...props }: LinkProps & { children: ReactNode }) => {
+import { cn } from "@/utils";
+
+const NavigationBarButton = ({
+  href,
+  disabled = false,
+  ...props
+}: LinkProps & { children: ReactNode; disabled?: boolean }) => {
   const pathname = usePathname();
   const isActive = href === pathname;
 
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    if (disabled) {
+      event.preventDefault();
+    }
+  };
+
   return (
-    <NM.Link asChild active={isActive} className="flex flex-col">
+    <NM.Link
+      asChild
+      active={isActive}
+      className={cn("flex flex-col", disabled && "cursor-not-allowed")}
+      aria-disabled={disabled}
+    >
       <NextLink
         href={href}
         prefetch
         className={`flex flex-col items-center justify-center gap-[3px] ${isActive ? "text-gray-scale-900" : "text-gray-scale-400"}`}
+        onClick={handleClick}
         {...props}
       />
     </NM.Link>
   );
 };
 
-export default NavLink;
+export default NavigationBarButton;

src/layout/Mobile/NavigationBar/index.tsx

@@ -12,23 +12,36 @@ import { cn } from "@/utils/cn";
 import NavigationBarButton from "./NavigationBarButton";
 
 const navigations = [
-  { name: "홈", slug: "/", icon: <HomeIcon width={20} height={20} /> },
+  {
+    name: "홈",
+    slug: "/",
+    icon: <HomeIcon width={20} height={20} />,
+    disabled: false,
+  },
   {
     name: "캘린더",
     slug: "/calendar",
     icon: <CalendarCheckIcon width={20} height={20} />,
+    disabled: true,
   },
   {
     name: "지역",
     slug: "/map",
     icon: <PinLocationIcon width={20} height={20} />,
+    disabled: true,
   },
   {
     name: "채팅",
     slug: "/chat",
     icon: <ChatBubbleDotsIcon width={20} height={20} />,
+    disabled: true,
+  },
+  {
+    name: "MY",
+    slug: "/mypage",
+    icon: <UserIcon width={20} height={20} />,
+    disabled: false,
   },
-  { name: "MY", slug: "/mypage", icon: <UserIcon width={20} height={20} /> },
 ];
 
 const NavigationBar = () => {
@@ -40,15 +53,17 @@ const NavigationBar = () => {
         "bg-gray-scale-0",
       )}
     >
-      <NM.List className="flex  h-full w-full  items-center justify-between ">
-        {navigations.map((nav) => (
+      <NM.List className="flex h-full w-full items-center justify-between">
+        {navigations.map(({ name, slug, icon, disabled }) => (
           <NM.Item
-            key={nav.name}
-            className="flex w-[36px] items-center justify-center text-caption1-medium-nav"
+            key={name}
+            className={cn(
+              `flex w-[36px] items-center justify-center text-caption1-medium-nav`,
+            )}
           >
-            <NavigationBarButton href={nav.slug}>
-              {nav.icon}
-              {nav.name}
+            <NavigationBarButton href={slug} disabled={disabled}>
+              {icon}
+              {name}
             </NavigationBarButton>
           </NM.Item>
         ))}

src/middleware.ts

@@ -4,9 +4,16 @@ import { match } from "path-to-regexp";
 
 import { getServerSideSession } from "./apis/auth/auth";
 
+const serviceReadyRoute = ["/chat", "/map", "/calander"];
 const matchersForAuth = ["/mypage"];
 const matchersForSignIn = ["/auth/sign-in"];
+
 export async function middleware(request: NextRequest) {
+  // * 아직 서비스 준비중인 페이지
+  if (serviceReadyRoute.includes(request.nextUrl.pathname)) {
+    return NextResponse.redirect(new URL("/", request.url));
+  }
+
   // * 인증이 필요한 페이지 접근 제어!
   if (isMatch(request.nextUrl.pathname, matchersForAuth)) {
     const session = await getServerSideSession();