[Feat/#118] 비회원 예매 조회에 navigation 연결

src/pages/nonMbLookup/NonMbLookup.tsx

@@ -1,13 +1,20 @@
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import * as S from "./NonMbLookup.styled";
 
 import useModal from "@hooks/useModal";
 
 import Button from "@components/commons/button/Button";
 import InputWrapper from "./components/InputWrapper";
 
+import { NAVIGATION_STATE } from "@constants/navigationState";
+import { useHeader } from "@hooks/useHeader";
+
 const NonMbLookup = () => {
+  const navigate = useNavigate();
+
   const { openAlert } = useModal();
+  const { setHeader } = useHeader();
 
   // 하단 내역 확인 버튼 활성화/비활성화 상태
   const [btnActive, setBtnActive] = useState(false);
@@ -42,6 +49,10 @@ const NonMbLookup = () => {
     });
   };
 
+  const handleLeftBtn = () => {
+    navigate("/main");
+  };
+
   useEffect(() => {
     if (dataState === 404) {
       handleAlert();
@@ -51,6 +62,14 @@ const NonMbLookup = () => {
     }
   }, [dataState]);
 
+  useEffect(() => {
+    setHeader({
+      headerStyle: NAVIGATION_STATE.ICON_TITLE,
+      title: "비회원 예매 조회",
+      leftOnClick: handleLeftBtn,
+    });
+  }, [setHeader]);
+
   return (
     <S.NonMbLookupWrapper>
       <InputWrapper

src/routes/Router.tsx

@@ -21,6 +21,7 @@ const router = createBrowserRouter([
     element: <Layout />,
     children: [
       { path: "a", element: <Apage /> },
+      { path: "/NonMb-Lookup", element: <NonMbLookup /> },
       { path: "lookup", element: <Lookup /> },
       { path: "testpage", element: <TestPage /> },
       { path: "register", element: <Register /> },
@@ -50,10 +51,6 @@ const router = createBrowserRouter([
     path: "/view-bottom-sheet",
     element: <ViewBottomSheetTest />,
   },
-  {
-    path: "/NonMb-Lookup",
-    element: <NonMbLookup />,
-  },
   {
     path: "/bank-sheet",
     element: <BankTest />,