chore: update router config

web/src/pages/Auth.tsx

@@ -5,7 +5,6 @@ import { validate, ValidatorConfig } from "../helpers/validator";
 import { userService } from "../services";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
-import Only from "../components/common/OnlyWhen";
 import toastHelper from "../components/Toast";
 
 const validateConfig: ValidatorConfig = {
@@ -123,9 +122,7 @@ const Auth: React.FC = () => {
           <div className="flex flex-col justify-start items-start w-full mb-4">
             <div className="text-3xl font-medium font-mono flex flex-row justify-start items-center">
               Corgi
-              <Only when={actionBtnLoadingState.isLoading}>
-                <Icon.Loader className="ml-2 w-5 h-auto animate-spin" />
-              </Only>
+              {actionBtnLoadingState.isLoading && <Icon.Loader className="ml-2 w-5 h-auto animate-spin" />}
             </div>
           </div>
           <div className={`flex flex-col justify-start items-start w-full ${actionBtnLoadingState.isLoading ? "opacity-80" : ""}`}>

web/src/pages/Home.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
-import { workspaceService } from "../services";
+import { useNavigate } from "react-router-dom";
+import { userService, workspaceService } from "../services";
 import { useAppSelector } from "../store";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
@@ -8,10 +9,16 @@ import WorkspaceListView from "../components/WorkspaceListView";
 import showCreateWorkspaceDialog from "../components/CreateWorkspaceDialog";
 
 const Home: React.FC = () => {
+  const navigate = useNavigate();
   const { workspaceList } = useAppSelector((state) => state.workspace);
   const loadingState = useLoading();
 
   useEffect(() => {
+    if (!userService.getState().user) {
+      navigate("/user/auth");
+      return;
+    }
+
     Promise.all([workspaceService.fetchWorkspaceList()]).finally(() => {
       loadingState.setFinish();
     });

web/src/pages/ShortcutRedirector.tsx

@@ -1,19 +1,26 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import Header from "../components/Header";
 import { getShortcutWithNameAndWorkspaceName } from "../helpers/api";
 import useLoading from "../hooks/useLoading";
+import { userService } from "../services";
 
 interface State {
   errMessage?: string;
 }
 
 const ShortcutRedirector: React.FC = () => {
+  const navigate = useNavigate();
   const params = useParams();
   const [state, setState] = useState<State>();
   const loadingState = useLoading();
 
   useEffect(() => {
+    if (!userService.getState().user) {
+      navigate("/user/auth");
+      return;
+    }
+
     const workspaceName = params.workspaceName || "";
     const shortcutName = params.shortcutName || "";
     getShortcutWithNameAndWorkspaceName(workspaceName, shortcutName)

web/src/pages/UserDetail.tsx

@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "../store";
 import Header from "../components/Header";
 import { showCommonDialog } from "../components/Dialog/CommonDialog";
@@ -8,8 +10,16 @@ import toastHelper from "../components/Toast";
 import showChangePasswordDialog from "../components/ChangePasswordDialog";
 
 const UserDetail: React.FC = () => {
+  const navigate = useNavigate();
   const { user } = useAppSelector((state) => state.user);
 
+  useEffect(() => {
+    if (!userService.getState().user) {
+      navigate("/user/auth");
+      return;
+    }
+  }, []);
+
   const handleChangePasswordBtnClick = async () => {
     showChangePasswordDialog();
   };

web/src/pages/WorkspaceDetail.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
-import { shortcutService, workspaceService } from "../services";
+import { useNavigate, useParams } from "react-router-dom";
+import { shortcutService, userService, workspaceService } from "../services";
 import { useAppSelector } from "../store";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
@@ -15,6 +15,7 @@ interface State {
 }
 
 const WorkspaceDetail: React.FC = () => {
+  const navigate = useNavigate();
   const params = useParams();
   const { shortcutList } = useAppSelector((state) => state.shortcut);
   const [state, setState] = useState<State>({
@@ -23,6 +24,11 @@ const WorkspaceDetail: React.FC = () => {
   const loadingState = useLoading();
 
   useEffect(() => {
+    if (!userService.getState().user) {
+      navigate("/user/auth");
+      return;
+    }
+
     const workspace = workspaceService.getWorkspaceByName(params.workspaceName ?? "");
     if (!workspace) {
       toastHelper.error("workspace not found");