Merge pull request #242 from manNomi/refactor/mentee_pages

Refactor : mentee pages API 연결 및 디자인 요소 수정

Author: manNomi

public/svgs/mentor/modify.svg

@@ -0,0 +1,3 @@
+export enum QueryKeys {
+  articleList = "articleList",
+}

src/api/article/client/queryKey.ts

@@ -1,20 +1,29 @@
-import useFetch from "@/utils/apiUtils";
+import { AxiosResponse } from "axios";
 
-const useDeleteArticle = (articleId: number | null) => {
-  const { loading, error, fetchData } = useFetch<void>();
+import { axiosInstance } from "@/utils/axiosInstance";
 
-  const deleteArticle = () => {
-    if (articleId === null) return;
+import { QueryKeys } from "./queryKey";
 
-    fetchData({
-      method: "delete",
-      url: `/news/${articleId}`,
-      body: undefined,
-      isToken: true,
-    });
-  };
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
-  return { deleteArticle, loading, error };
+const deleteArticle = async (articleId: number): Promise<void> => {
+  const response: AxiosResponse<void> = await axiosInstance.delete(`/news/${articleId}`);
+  return response.data;
+};
+
+const useDeleteArticle = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: deleteArticle,
+    onSuccess: () => {
+      // 아티클 목록 쿼리를 무효화하여 새로 고침
+      queryClient.invalidateQueries({ queryKey: [QueryKeys.articleList] });
+    },
+    onError: (error) => {
+      console.error("Failed to delete article:", error);
+    },
+  });
 };
 
 export default useDeleteArticle;

src/api/article/client/useDeleteArticle.ts

@@ -1,40 +1,30 @@
-import { useEffect, useState } from "react";
+import { AxiosResponse } from "axios";
 
-import useFetch from "@/utils/apiUtils";
+import { axiosInstance } from "@/utils/axiosInstance";
 
 import { ArticleResponse } from "../types/response";
+import { QueryKeys } from "./queryKey";
+
+import { useQuery } from "@tanstack/react-query";
 
 /* ---------- 타입 ---------- */
 
 interface ArticleListResponse {
   news: ArticleResponse[]; // 최대 5개
 }
 
+const getArticleList = async (userId: number): Promise<ArticleListResponse> => {
+  const response: AxiosResponse<ArticleListResponse> = await axiosInstance.get(`/news?site-user-id=${userId}`);
+  return response.data;
+};
+
 const useGetArticleList = (userId: number | null) => {
-  const { result, loading, error, fetchData } = useFetch<ArticleListResponse>();
-
-  const [articleList, setArticleList] = useState<ArticleResponse[]>([]);
-
-  /* 페이지 변경 시 데이터 요청 */
-  useEffect(() => {
-    if (userId === null) return;
-
-    fetchData({
-      method: "get",
-      url: `/news?site-user-id=${userId}`,
-      body: undefined,
-      isToken: true,
-    });
-  }, [userId, fetchData]);
-
-  /* 응답 처리 */
-  useEffect(() => {
-    if (result) {
-      setArticleList(result.data.news);
-    }
-  }, [result]);
-
-  return { articleList, loading, error };
+  return useQuery({
+    queryKey: [QueryKeys.articleList, userId],
+    queryFn: () => getArticleList(userId!),
+    enabled: userId !== null,
+    select: (data: ArticleListResponse) => data.news,
+  });
 };
 
 export default useGetArticleList;

src/api/article/client/useGetAriticleList.ts

@@ -1,3 +1,5 @@
+import { useRouter } from "next/navigation";
+
 import { AxiosResponse } from "axios";
 
 import { publicAxiosInstance } from "@/utils/axiosInstance";
@@ -19,11 +21,16 @@ const postEmailAuth = ({ email, password }: LoginRequest): Promise<AxiosResponse
   publicAxiosInstance.post("/auth/email/sign-in", { email, password });
 
 const usePostEmailAuth = () => {
+  const router = useRouter();
   return useMutation({
     mutationFn: postEmailAuth,
     onSuccess: (data) => {
       const { accessToken } = data.data;
       setAccessToken(accessToken);
+      router.replace("/"); // 로그인 성공 후 홈으로 리다이렉트
+    },
+    onError: (error) => {
+      alert("이메일 또는 비밀번호가 올바르지 않습니다. 다시 시도해주세요.");
     },
   });
 };

src/api/article/client/useGetArticleList.ts

@@ -8,7 +8,7 @@ import { setAccessToken } from "@/lib/zustand/useTokenStore";
 import { useMutation } from "@tanstack/react-query";
 
 // Kakao
-interface RegisteredKakaoAuthResponse {
+interface RegisteredKakaoAuthReponse {
   isRegistered: true;
   accessToken: string;
   refreshToken: string;
@@ -28,7 +28,7 @@ interface KakaoAuthRequest {
 
 const postKakaoAuth = ({
   code,
-}: KakaoAuthRequest): Promise<AxiosResponse<RegisteredKakaoAuthResponse | UnregisteredKakaoAuthReponse>> =>
+}: KakaoAuthRequest): Promise<AxiosResponse<RegisteredKakaoAuthReponse | UnregisteredKakaoAuthReponse>> =>
   publicAxiosInstance.post("/auth/kakao", { code });
 
 const usePostKakaoAuth = () => {

src/api/auth/client/usePostEmailAuth.ts

@@ -1,5 +1,9 @@
+import { useRouter } from "next/navigation";
+
 import { axiosInstance } from "@/utils/axiosInstance";
 
+import { customConfirm } from "@/lib/zustand/useConfirmModalStore";
+import { IconCheck } from "@/public/svgs/mentor";
 import { useMutation } from "@tanstack/react-query";
 
 interface UsePostApplyMentoringRequest {
@@ -15,8 +19,26 @@ const postApplyMentoring = async (body: UsePostApplyMentoringRequest): Promise<U
 };
 
 const usePostApplyMentoring = () => {
+  const router = useRouter();
   return useMutation({
     mutationFn: postApplyMentoring,
+    onSuccess: async () => {
+      const ok = await customConfirm({
+        title: "멘토 신청",
+        content: "멘토 신청이 완료되었습니다.",
+        icon: IconCheck,
+        rejectMessage: "홈으로",
+        approveMessage: "다른 멘토 찾기",
+      });
+      if (ok) {
+        router.push("/mentor");
+        return;
+      }
+      router.push("/");
+    },
+    onError: (error) => {
+      alert("멘토 신청에 실패했습니다. 다시 시도해주세요.");
+    },
   });
 };
 

src/api/auth/client/usePostKakaoAuth.ts

@@ -1,4 +1,5 @@
 export enum QueryKeys {
   mentoringNewCount = "mentoringNewCount",
+  mentoringList = "mentoringList",
   myMentorProfile = "myMentorProfile",
 }

src/api/mentee/client/usePostApplyMentoring.ts

@@ -7,10 +7,10 @@ import { MentorCardPreview } from "@/types/mentor";
 // 학업 학기 (예: "2026-1")
 import { useQuery } from "@tanstack/react-query";
 
-type GetMyMentorProfileResponse = MentorCardPreview;
+type UseGetMyMentorProfileResponse = MentorCardPreview;
 
-const getMentorMyProfile = async (): Promise<GetMyMentorProfileResponse> => {
-  const res = await axiosInstance.get<GetMyMentorProfileResponse>("/mentor/my");
+const getMentorMyProfile = async (): Promise<UseGetMyMentorProfileResponse> => {
+  const res = await axiosInstance.get<UseGetMyMentorProfileResponse>("/mentor/my");
   return res.data;
 };