Feat: #228 유저 인증을 위한 MSW 수정 및 페이지 라우트 인증 처리

src/mocks/services/authServiceHandler.ts

@@ -228,18 +228,10 @@ const authServiceHandler = [
         return HttpResponse.json({ message: '리프레시 토큰이 만료되었습니다.' }, { status: 401 });
       }
 
-      let newAccessToken;
-
-      // ToDo: 추후 삭제
-      if (accessToken === JWT_TOKEN_DUMMY) {
-        newAccessToken = 'newMockedAccessToken';
-      } else {
-        // 토큰에서 userId 추출하도록 수정
-        const userId = convertTokenToUserId(accessToken);
-        if (!userId) return new HttpResponse(null, { status: 401 });
+      const userId = convertTokenToUserId(accessToken);
+      if (!userId) return new HttpResponse(null, { status: 401 });
 
-        newAccessToken = generateDummyToken(userId);
-      }
+      const newAccessToken = generateDummyToken(userId);
 
       // 액세스 토큰 갱신
       return new HttpResponse(null, {
@@ -259,16 +251,8 @@ const authServiceHandler = [
 
     if (!accessToken) return new HttpResponse(null, { status: 401 });
 
-    let userId;
-    // ToDo: 추후 삭제
-    if (accessToken === JWT_TOKEN_DUMMY) {
-      const payload = JWT_TOKEN_DUMMY.split('.')[1];
-      userId = Number(payload.replace('mocked-payload-', ''));
-    } else {
-      // 토큰에서 userId 추출
-      userId = convertTokenToUserId(accessToken);
-      if (!userId) return new HttpResponse(null, { status: 401 });
-    }
+    const userId = convertTokenToUserId(accessToken);
+    if (!userId) return new HttpResponse(null, { status: 401 });
 
     const foundUser = USER_DUMMY.find((user) => user.userId === userId);
     if (!foundUser) return new HttpResponse(null, { status: 404 });
@@ -385,16 +369,8 @@ const authServiceHandler = [
     const accessToken = request.headers.get('Authorization');
     if (!accessToken) return HttpResponse.json({ message: '인증 정보가 존재하지 않습니다.' }, { status: 401 });
 
-    let userId;
-    // ToDo: 추후 삭제
-    if (accessToken === JWT_TOKEN_DUMMY) {
-      const payload = JWT_TOKEN_DUMMY.split('.')[1];
-      userId = Number(payload.replace('mocked-payload-', ''));
-    } else {
-      // 토큰에서 userId 추출
-      userId = convertTokenToUserId(accessToken);
-      if (!userId) return new HttpResponse(null, { status: 401 });
-    }
+    const userId = convertTokenToUserId(accessToken);
+    if (!userId) return new HttpResponse(null, { status: 401 });
 
     const existingUser = USER_DUMMY.find((user) => user.userId === Number(userId));
     if (!existingUser) return HttpResponse.json({ message: '해당 사용자를 찾을 수 없습니다.' }, { status: 404 });

src/mocks/services/userServiceHandler.ts

@@ -17,15 +17,8 @@ const userServiceHandler = [
 
     const { nickname, bio } = (await request.json()) as EditUserInfoForm;
 
-    let userId;
-    // ToDo: 추후 삭제
-    if (accessToken === JWT_TOKEN_DUMMY) {
-      const payload = JWT_TOKEN_DUMMY.split('.')[1];
-      userId = Number(payload.replace('mocked-payload-', ''));
-    } else {
-      // 토큰에서 userId 추출
-      userId = convertTokenToUserId(accessToken);
-    }
+    // 토큰에서 userId 추출
+    const userId = convertTokenToUserId(accessToken);
 
     const userIndex = userId ? USER_DUMMY.findIndex((user) => user.userId === userId) : -1;
 
@@ -58,15 +51,7 @@ const userServiceHandler = [
 
     const { links } = (await request.json()) as EditUserLinksForm;
 
-    let userId;
-    // ToDo: 추후 삭제
-    if (accessToken === JWT_TOKEN_DUMMY) {
-      const payload = JWT_TOKEN_DUMMY.split('.')[1];
-      userId = Number(payload.replace('mocked-payload-', ''));
-    } else {
-      // 토큰에서 userId 추출
-      userId = convertTokenToUserId(accessToken);
-    }
+    const userId = convertTokenToUserId(accessToken);
 
     const userIndex = userId ? USER_DUMMY.findIndex((user) => user.userId === userId) : -1;
 

src/routes/AfterLoginRoute.tsx

@@ -1,13 +1,9 @@
+import useStore from '@stores/useStore';
 import type { PropsWithChildren } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 
 export default function AfterLoginRoute({ children }: PropsWithChildren) {
-  /**
-   * ToDo: 로그인 기능이 완성되었을 때, 로그인 확인 로직 추가
-   * 로그인 했을 때만, 사용할 수 있도록 경로를 설정하는 컴포넌트, 로그인 상태를 확인해주는 로직이 필요.
-   * AfterLoginRoute BeforeLoginRoute 둘 다 로그인 확인 로직이 필요하므로, 공통 로직을 커스텀 훅으로 추출할 것.
-   */
-  const isAuthenticated = true;
+  const { isAuthenticated } = useStore();
 
   if (!isAuthenticated) return <Navigate to="/signin" replace />;
 

src/routes/BeforeLoginRoute.tsx

@@ -1,13 +1,9 @@
+import useStore from '@stores/useStore';
 import type { PropsWithChildren } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 
 export default function BeforeLoginRoute({ children }: PropsWithChildren) {
-  /**
-   * ToDo: 로그인 기능이 완성되었을 때, 로그인 확인 로직 추가
-   * 로그인을 하지 않았을 때만, 사용할 수 있도록 경로를 설정하는 라우트 컴포넌트, 로그인 상태를 확인해주는 로직이 필요.
-   * AfterLoginRoute BeforeLoginRoute 둘 다 로그인 확인 로직이 필요하므로, 공통 로직을 커스텀 훅으로 추출할 것.
-   */
-  const isAuthenticated = false;
+  const { isAuthenticated } = useStore();
 
   if (isAuthenticated) return <Navigate to="/" replace />;