멘토 체크 API 호출 최적화 및 멘토 페이지 이동 버그 수정

apps/web/src/components/layout/RootModal/index.tsx

@@ -1,13 +1,7 @@
 import ClientModal from "./ui/ClientModal";
-import ServerModal from "./ui/ServerModal";
 
 const RootModal = () => {
-  return (
-    <>
-      <ServerModal />
-      <ClientModal />
-    </>
-  );
+  return <ClientModal />;
 };
 
 export default RootModal;

apps/web/src/components/layout/RootModal/ui/ClientModal/index.tsx

@@ -1,14 +1,17 @@
 "use client";
 
+import MentorApplyCountModal from "@/components/mentor/MentorApplyCountModal";
 import IconConfirmModal from "@/components/modal/IconConfirmModal";
 
 import { useConfirmModalStore } from "@/lib/zustand/useConfirmModalStore";
 
 const ClientModal = () => {
   const { isOpen, payload, confirm, reject } = useConfirmModalStore();
 
-  return (
+  return [
+    <MentorApplyCountModal key="mentor-apply-count-modal" />,
     <IconConfirmModal
+      key="icon-confirm-modal"
       isOpen={isOpen}
       title={payload?.title || "확인"}
       content={payload?.content || "정말로 이 작업을 진행하시겠습니까?"}
@@ -17,7 +20,7 @@ const ClientModal = () => {
       rejectMessage={payload?.rejectMessage || "취소"}
       onConfirm={confirm}
       onClose={reject}
-    />
-  );
+    />,
+  ];
 };
 export default ClientModal;

apps/web/src/components/mentor/MentorApplyCountContent/index.tsx

@@ -1,21 +1,18 @@
 "use client";
 
-import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { useGetUnconfirmedMentoringCount } from "@/apis/mentor";
+import { useGetMentoringUncheckedCount } from "@/apis/mentor";
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import { UserRole } from "@/types/mentor";
-import { tokenParse } from "@/utils/jwtUtils";
 
 const MentorApplyCountContent = () => {
-	// 로그인 된경우에만 신규 신청 카운트 모달 표시
-	const { accessToken, isInitialized } = useAuthStore();
-	const isMentor =
-		tokenParse(accessToken)?.role === UserRole.MENTOR ||
-		tokenParse(accessToken)?.role === UserRole.ADMIN;
+	const router = useRouter();
+	const { isInitialized, isAuthenticated, userRole } = useAuthStore();
+	const isMentor = userRole === UserRole.MENTOR;
 
-	const { data: count, isSuccess } = useGetUnconfirmedMentoringCount(
-		isInitialized && !!accessToken && isMentor,
+	const { data: count, isSuccess } = useGetMentoringUncheckedCount(
+		isInitialized && isAuthenticated && isMentor,
 	);
 
 	const [isModalOpen, setIsModalOpen] = useState<boolean>(true);
@@ -39,7 +36,14 @@ const MentorApplyCountContent = () => {
 			>
 				✕
 			</button>
-			<Link href={`/mentor`} onClick={() => setIsModalOpen(false)}>
+			<button
+				type="button"
+				onClick={() => {
+					setIsModalOpen(false);
+					router.push("/mentor");
+				}}
+				className="w-full text-left"
+			>
 				<div className="flex items-center">
 					{/* left: message */}
 					<div className="flex-1">
@@ -57,7 +61,7 @@ const MentorApplyCountContent = () => {
 						<div className="typo-bold-1">{count}명</div>
 					</div>
 				</div>
-			</Link>
+			</button>
 		</div>
 	);
 };

apps/web/src/components/mentor/MentorExpandChatCard/hooks/useExpandCardClickHandler.ts

@@ -2,7 +2,6 @@ import { useState } from "react";
 import { usePatchMenteeCheckMentorings, usePatchMentorCheckMentorings } from "@/apis/mentor";
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import { UserRole } from "@/types/mentor";
-import { tokenParse } from "@/utils/jwtUtils";
 
 interface UseExpandCardClickHandlerReturn {
   isExpanded: boolean;
@@ -18,9 +17,8 @@ const useExpandCardClickHandler = ({
   mentoringId,
   initChecked = false,
 }: UseExpandCardClickHandlerProps): UseExpandCardClickHandlerReturn => {
-  const { accessToken } = useAuthStore();
-  const isMentor =
-    tokenParse(accessToken)?.role === UserRole.MENTOR || tokenParse(accessToken)?.role === UserRole.ADMIN;
+  const userRole = useAuthStore((state) => state.userRole);
+  const isMentor = userRole === UserRole.MENTOR;
 
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const [isCheckedState, setIsCheckedState] = useState<boolean>(initChecked || false);

apps/web/src/lib/zustand/useAuthStore.ts

@@ -1,10 +1,28 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
+import { UserRole } from "@/types/mentor";
+
+const parseUserRoleFromToken = (token: string | null): UserRole | null => {
+  if (!token) return null;
+
+  try {
+    const payload = JSON.parse(atob(token.split(".")[1])) as { role?: string };
+
+    if (payload.role === UserRole.MENTOR || payload.role === UserRole.MENTEE || payload.role === UserRole.ADMIN) {
+      return payload.role;
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+};
 
 type RefreshStatus = "idle" | "refreshing" | "success" | "failed";
 
 interface AuthState {
   accessToken: string | null;
+  userRole: UserRole | null;
   isAuthenticated: boolean;
   isLoading: boolean;
   isInitialized: boolean;
@@ -20,6 +38,7 @@ const useAuthStore = create<AuthState>()(
   persist(
     (set) => ({
       accessToken: null,
+      userRole: null,
       isAuthenticated: false,
       isLoading: false,
       isInitialized: false,
@@ -28,6 +47,7 @@ const useAuthStore = create<AuthState>()(
       setAccessToken: (token) => {
         set({
           accessToken: token,
+          userRole: parseUserRoleFromToken(token),
           isAuthenticated: true,
           isLoading: false,
           isInitialized: true,
@@ -38,6 +58,7 @@ const useAuthStore = create<AuthState>()(
       clearAccessToken: () => {
         set({
           accessToken: null,
+          userRole: null,
           isAuthenticated: false,
           isLoading: false,
           isInitialized: true,
@@ -66,6 +87,7 @@ const useAuthStore = create<AuthState>()(
       onRehydrateStorage: () => (state) => {
         // hydration 완료 후 isInitialized를 true로 설정
         if (state) {
+          state.userRole = parseUserRoleFromToken(state.accessToken);
           state.isInitialized = true;
         }
       },