function App() {
return (
  <BrowserRouter>
    <RecoilRoot>
      <Routes>
        <Route element={<PrivateRoute isAuth={false} />}>
          <Route path="/" element={<LoginPage />} />
          <Route path="/register" element={<ResiterPage />} />
        </Route>
        <Route element={<PrivateRoute isAuth={true} />}>
          <Route path="/auth" element={<AuthPage />} />
          <Route path="/test-auth" element={<TestAuthPage />} />
        </Route>
      </Routes>
    </RecoilRoot>
  </BrowserRouter>
);
}


interface Props {
/** true:인증, false:인증불필요 */
isAuth: boolean;
}

const PrivateRoute = ({ isAuth }: Props) => {
const {
  token
} = useAuth();

...

//* 인증 필요 페이지
if (isAuth) {
  return token ? <AuthOutlet /> : <Navigate to="/" />;
}

//* 인증 불필요 페이지
return token ? <Back /> : <Outlet />;
};

export default PrivateRoute;

import axios from "axios";

const api = axios.create({
  baseURL: "http:https://3.38.191.164/",
});

api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response.status === 401) {
      console.log(error.response.data);
      alert(error.response.data.message);
      return Promise.reject(error);
    }
  }
);

export default api;

// api.ts
export const fetchLogin = async ({
  id,
  password,
}: LoginReq): Promise<LoginRes> => {
  const response = await api.post("/login", { id, password });
  return response.data;
};

// auth.slice.ts
export const __login = createAsyncThunk<
  LoginRes,
  LoginReq,
  { rejectValue: string }
>("tokenSlice/login", async (payload: LoginReq, thunkAPI) => {
  const data = await fetchLogin(payload);
  thunkAPI.fulfillWithValue(data);
  return data;
});

export const tokenSlice = createSlice({
  name: "tokenSlice",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(__login.fulfilled, (state, action) => {
      state.data.token = action.payload.token;
      state.data.expiredAt = new Date().getTime() + 1000 * 60 * 60;
      state.data.isExpired = false;
    });
  },
});

// LoginPage.tsx
const LoginPage = () => {
  const dispatch = useDispatch<AppDispatch>();

  const handleLogin = (e: FormEvent) => {
    e.preventDefault();

    // FormData
    const formData = new FormData(e.target as HTMLFormElement);
    const id = formData.get("id")?.toString();
    const password = formData.get("password")?.toString();

    if (!id || !password) return alert("아이디와 비밀번호를 입력해주세요.");

    dispatch(__login({ id, password }));
  };

  ...
}