쿠팡이츠 React Router를 이용한 역할 기반 라우팅 구현(ft.Login)

들어가며

쿠팡이츠는 React Router v6를 활용하여 사용자의 로그인 상태에 따라 다른 경험을 제공하는 동적 웹 애플리케이션을 구현하고 있습니다. 이 구현은 로그인 상태일 때와 로그아웃 상태일 때로 구분하며, 로그인한 사용자는 그들의 역할(고객, 사장, 배달기사)에 따라 접근할 수 있는 라우트가 다르게 설정되어 있습니다. 이러한 역할 기반의 접근 제어는 보안과 사용자 경험을 모두 향상시킵니다.

React Router를 이용한 역할 기반 라우팅 구현

쿠팡이츠는 LoggedInRouter와 LoggedOutRouter 두 개의 라우터 컴포넌트를 정의하여 사용자의 로그인 상태에 따라 적절한 라우트를 제공합니다. 각 라우터는 서로 다른 라우트 구성을 포함하고 있으며, 로그인한 사용자의 경우는 그들의 역할에 따라 추가적으로 라우트를 제공합니다.

LoggedOutRouter

로그아웃 상태의 사용자는 로그인 페이지와 계정 생성 페이지만 접근할 수 있습니다. 이는 LoggedOutRouter를 통해 관리되며, React Router의 기본적인 라우트 설정을 활용합니다.

export const LoggedOutRouter = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/create-account" element={<CreateAccount />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

LoggedInRouter

로그인한 사용자의 라우터 설정은 훨씬 복잡합니다. 사용자의 역할(Client, Owner, Delivery)에 따라 다른 페이지에 접근할 수 있도록 구성되어 있습니다. 이 구성은 React Router의 Routes와 Route 컴포넌트를 사용하여 선언적으로 라우트를 정의합니다.

export const LoggedInRouter = () => {
  const { data, loading, error } = useMe();

  if (!data || loading || error) {
    return <div>Loading...</div>;
  }

  return (
    <Router>
      <Header />
      <Routes>
        {data.me.role === UserRole.Client && clientRoutes.map((route) => (
          <Route key={route.path} path={route.path} element={route.element} />
        ))}
        {data.me.role === UserRole.Owner && restaurantRoutes.map((route) => (
          <Route key={route.path} path={route.path} element={route.element} />
        ))}
        {data.me.role === UserRole.Delivery && driverRoutes.map((route) => (
          <Route key={route.path} path={route.path} element={route.element} />
        ))}
        {commonRoutes.map((route) => (
          <Route key={route.path} path={route.path} element={route.element} />
        ))}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

역할에 따른 라우트 구성

쿠팡이츠에서는 다음과 같은 역할별 라우트 구성을 사용합니다:

• 고객(Client): 레스토랑 검색, 카테고리별 검색, 주문 기록 확인 등
• 사장(Owner): 자신의 레스토랑 관리, 신규 레스토랑 추가, 메뉴 관리 등
• 배달기사(Delivery): 배달 대시보드 접근 등

각 역할별 라우트는 공통 라우트와 함께 조합되어 각 사용자에게 필요한 정보와 기능을 제공합니다. 이와 같은 구성은 React Router의 유연성을 잘 보여줍니다.

마치며

쿠팡이츠의 React Router 구현 사례는 React 기반 애플리케이션에서의 역할 기반 접근 제어를 효과적으로 구현하는 방법을 제공하며, 복잡한 사용자 인터페이스와 다양한 사용자 요구를 충족시킬 수 있는 솔루션을 제시합니다. 이러한 접근 방식은 보안을 강화하고, 사용자 경험을 향상시키며, 개발자가 애플리케이션의 유지 관리를 용이하게 합니다.