JSX Guard.jsx

[주인장]

# 페이지 접근 관리 

<Route path="/profile" element={<PatientsOnlyRoute element={<Profile />} />} />

# Guard.jsx

import { Navigate } from "react-router-dom";

import { apiService } from "./api";

export const PatientsOnlyRoute = ({element: Component}) => {

    return apiService.isPatient() ? (

        Component

    ): (

        <Navigate to={"/login"}  />

    );

}

export const DoctorsOnlyRoute = ({element: Component}) => {

    return apiService.isDoctor() ? (

        Component

    ): (

        <Navigate to={"/login"}  />

    );

}

export const DoctorsAndPatientsRoute = ({element: Component})  => {

    return apiService.isAuthenticated() ? (

        Component

    ): (

        <Navigate to={"/login"}  />

    );

}