[250220] 인증이 필요한 페이지

🔹 오늘은

오늘은 react-router-dom을 사용하여 보호된 라우트(Protected Route) 기능을 추가했습니다.
인증되지 않은 사용자가 특정 페이지에 접근하면 알림을 띄우고, 리디렉션하는 기능을 제작하였습니다.

---

🛠 1. 라우팅 구조 정리

이번 프로젝트는 createBrowserRouter()를 사용하여 라우팅을 설정했습니다.
평소에는 BrowserRoute를 감싸 사용했는데 이번 프로젝트는 저번에 배웠던 내용을 살려 createBrowserRouter()를 사용하여 라우팅을 설정했습니다.
인증이 필요한 페이지는 ProtectedRouter라는 컴포넌트를 새로 만들어 Outlet태그를 이용해 보호했습니다.

const router = createBrowserRouter([
  {
    path: "/",
    element: <SiteLayout />,
    children: [
      { path: "", element: <Home /> },
      { path: "/signup", element: <SignUp /> },
      { path: "/login", element: <Login /> },
      { path: "/board", element: <Board /> },
      {
        path: "", 
        element: <ProtectedRouter />, // ✅ 인증이 필요한 페이지 보호
        children: [
          { path: "/mbti", element: <Test /> },
          { path: "/result", element: <Result /> },
          { path: "/profile", element: <Profile /> },
          { path: "/stats", element: <Stats /> },
        ],
      },
    ],
  },
]);

✅ 구현 내용

• ProtectedRouter로 인증이 필요한 페이지를 감싸 관리하여 보호
• 인증되지 않은 사용자 리디렉션

🔒 2. ProtectedRouter 구현

ProtectedRouter는 로그인 상태를 확인한 후, 인증되지 않은 경우 경고를하여 로그인 페이지로 리디렉션하는 로직이 있는 컴포넌트입니다.

useEffect(() => {
  if (!isAuthenticated) {
    Swal.fire({
      title: "로그인이 필요합니다!",
      text: "로그인 후 이용해주세요.",
      icon: "warning",
      confirmButtonText: "확인",
    }).then(() => {
      setTimeout(() => {
        navigate("/login", { state: { from: location }, replace: true });
      }, ONE_SECOND_BEFORE_GO_LOGIN_PAGE);
    });
  }
}, [isAuthenticated, navigate, location]);

✅ 구현 내용

• sweetalert2를 사용해 경고창 띄우기
• navigate로 로그인 페이지로 이동하도록 .then 체이닝

🔄 3. 로그인 후 원래 페이지로 리디렉션

사용자 경험(UX)을 고려하여 원래 가려던 페이지로 이동할 수 있도록 location.state.from을 활용하여 가려던 페이지의 경로를 저장하여 로그인 성공 후 불러왔습니다.

const handleLogin = () => {
  login(); // ✅ Zustand에서 로그인 상태 업데이트
  const redirectTo = location.state?.from?.pathname || "/";
  navigate(redirectTo, { replace: true });
};

✅ 구현 내용

• 로그인 성공 후 location.state?.from?.pathname을 확인
• 옵셔널 체이닝을 활용해 state가 존재하지 않을 경우 TypeError를 발생하는데 이를 방지
• 이전에 접근하려던 페이지가 있으면 해당 페이지로 이동, 없으면 홈으로 이동

✨마무리✨

이번 개인 과제의 시작으로 라우팅을 먼저 구성하였는데 이 과정에서 평소에 쓰던 BrowserRouter를 사용하는 것이 다른 방법을 사용하였습니다. 이 과정에서 라우팅의 개념을 더욱 깊숙히 이해 할 수 있었으며 Outlet, RouterProvider등 여러 태그를 사용해보아 좋았습니다.

또, 인증/인가를 통한 사이트 보호는 어떤 로직을 통해 이루어지는지 알았으며 UX적으로 완성도가 높은 페이지를 이해하는 시간이 되었습니다.