fix(fe): prevent invalid routing (#205)

* feat: update routing logic to use redirects and improve error handling

* feat: refactor Button component to use forwardRef for improved ref handling

* fix: remove async from beforeLoad in my route for improved performance

Author: cjeongmin

apps/client/.eslintrc.json

@@ -27,6 +27,7 @@
       },
       "plugins": ["react-hooks", "react-refresh"],
       "rules": {
+        "@typescript-eslint/no-throw-literal": "off",
         "react/react-in-jsx-scope": "off",
         "react/require-default-props": "off",
         "react-hooks/rules-of-hooks": "error",

apps/client/src/components/Button.tsx

@@ -1,13 +1,10 @@
-import { HTMLAttributes, PropsWithChildren, Ref } from 'react';
+import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
+
+type ButtonProps = PropsWithChildren<HTMLAttributes<HTMLButtonElement>>;
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { children, className, onClick } = props;
 
-function Button({
-  ref,
-  children,
-  className,
-  onClick,
-}: PropsWithChildren<HTMLAttributes<HTMLButtonElement>> & {
-  ref?: Ref<HTMLButtonElement>;
-}) {
   return (
     <button
       ref={ref}
@@ -18,6 +15,8 @@ function Button({
       {children}
     </button>
   );
-}
+});
+
+Button.displayName = 'Button';
 
 export default Button;

apps/client/src/routes/my.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, redirect } from '@tanstack/react-router';
 
 import { refresh, useAuthStore } from '@/features/auth';
 
@@ -8,14 +8,16 @@ export const Route = createFileRoute('/my')({
   component: MyPage,
   beforeLoad: () => {
     const { isLogin, setAuthInformation } = useAuthStore.getState();
-    if (!isLogin())
-      refresh()
+
+    if (!isLogin()) {
+      return refresh()
         .then((res) => {
           setAuthInformation(res);
         })
         .catch(() => {
-          // eslint-disable-next-line @typescript-eslint/no-throw-literal
-          window.location.href = '/';
+          throw redirect({ to: '/' });
         });
+    }
+    return Promise.resolve();
   },
 });

apps/client/src/routes/session/$sessionId/$questionId/index.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, isRedirect, redirect } from '@tanstack/react-router';
 
 import { refresh, useAuthStore } from '@/features/auth';
 import { getSessionToken, useSessionStore } from '@/features/session';
@@ -52,8 +52,17 @@ export const Route = createFileRoute('/session/$sessionId/$questionId/')({
       response.questions.forEach((question) => {
         addQuestion(question);
       });
+
+      if (
+        response.questions.every(
+          (question) => question.questionId !== Number(questionId),
+        )
+      ) {
+        throw redirect({ to: `/session/${sessionId}` });
+      }
     } catch (e) {
-      window.location.href = '/';
+      if (isRedirect(e)) throw e;
+      throw redirect({ to: '/' });
     }
   },
 });

apps/client/src/routes/session/$sessionId/index.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, redirect } from '@tanstack/react-router';
 
 import { refresh, useAuthStore } from '@/features/auth';
 import { getSessionToken, useSessionStore } from '@/features/session';
@@ -51,7 +51,7 @@ export const Route = createFileRoute('/session/$sessionId/')({
         addQuestion(question);
       });
     } catch (e) {
-      window.location.href = '/';
+      throw redirect({ to: '/session' });
     }
   },
 });

apps/client/src/routes/session/route.tsx

@@ -1,6 +1,7 @@
 import {
   createFileRoute,
   Outlet,
+  redirect,
   ScrollRestoration,
 } from '@tanstack/react-router';
 
@@ -10,7 +11,7 @@ import { ChattingList } from '@/components';
 
 export const Route = createFileRoute('/session')({
   beforeLoad: ({ location }) => {
-    if (location.pathname === '/session') window.location.href = '/';
+    if (location.pathname === '/session') throw redirect({ to: '/' });
   },
   component: () => (
     <div className='flex h-full w-full items-center justify-center gap-4 px-4 py-4 md:max-w-[1194px]'>