feat : Mentor 페이지 API 붙이는 작업 진행했습니다 + customConfirm 구현 (#202)

* feat : serverFetch 구현했습니다

* fix: 컴포넌트 비삭제 된 요소 삭제했습니다

* refactor : MyMentoSection 분리했습니다

* refactor : MyMentorSection 으로 수정했습니다

* refactor : Mentor 로 통일 및 폴더구조 개선했습니다

* refactor : 컴포넌트 영역의 하드코딩된 값 모두 테일윈드 값으로 수정했습니다

* refactor: body 단일화·any 제거·HttpError 추가 했습니다

* refactor : decode 함수 분리했습니다

* fix : 일관성 위해 Buffer -> atob로 수정했습니다

* refactor : MentorCard 분리했습니다

* refactor : MentorCard 분리했습니다

* refactor : component -> ui 로 수정했습니다

* refactor : Article Card 분리했습니다:

* refactor : ChannelSelect 숨겨진 input 삭제했습니다

* refactor : MentorApply 삭제 및 clsx 추가했습니다

* feat : 멘토 api 폴더 구조 정립했습니다

* feat : MentorFindSection 무한스크롤 구현했습니다

* feat : useGetMyMentorProfile 구현했습니다

* feat : 특정 멘토 페이지 구현했습니다

* feat : useGetArticle 연결했습니다

* feat : ArticlePanel useDeleteArticle 연결했습니다

* feat : MentoModify 구현했습니다

* fix : 멘토 챗 카드 디자인수정했습니다

* feat : MentorApplyCountModal 구현했습니다 "

* feat : RootModal 및 신규 신청 알림 구현했습니다

* fix : 디자인 및 RootModal 구조 수정했습니다

* feat : RootModal의 클라이언트 , 서버 모달 나눴습니다

* feat : zustnad로 커스텀 confirm 함수 구현했습니다

* fix : IconConfirmModal 수정 두개 메시지 받도록 수정및 customConfirm 으로 수정했습니다

* fix : ClientModal에  useclient 추가했습니다

* refactor : PR 코멘트 내용이었던 set함수와 controller 의 증복을 제거했습니다

* refactor : PR 코멘트 반영했습니다
Link 임포트가 잘못된 부분 제거했습니다

* refactor : 불필요 컴포넌트 삭제 했습니다

* refactor : PR 코멘트 반영했습니다
likeicon 오타 수정했습니다

* fix : serverFetch 글로벌 세마포어를 key로 관리하도록 수정했습니다

* Refactor : 멘토페이지 PR 코멘트 사항 반영 및 불필요한 컴포넌트 제거했습니다 (#201)

* refactor : MyMentoSection 분리했습니다

* refactor : MyMentorSection 으로 수정했습니다

* refactor : Mentor 로 통일 및 폴더구조 개선했습니다

* refactor : 컴포넌트 영역의 하드코딩된 값 모두 테일윈드 값으로 수정했습니다

* refactor : component -> ui 로 수정했습니다

* refactor : Article Card 분리했습니다:

* refactor : ChannelSelect 숨겨진 input 삭제했습니다

* refactor : MentorApply 삭제 및 clsx 추가했습니다

* feat : 멘토 api 폴더 구조 정립했습니다

---------

Co-authored-by: 한만욱 <manwook-han@hanman-ug-ui-MacBookPro.local>

---------

Co-authored-by: 한만욱 <manwook-han@hanman-ug-ui-MacBookPro.local>

Author: manNomi

package-lock.json

@@ -30,7 +30,8 @@
     "react-linkify": "^1.0.0-alpha",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^4.0.5"
+    "zod": "^4.0.5",
+    "zustand": "^5.0.6"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",

package.json

@@ -8,7 +8,7 @@ import IconDirectionRight from "./direction-right.svg";
 import IconDirectionUp from "./direction-up.svg";
 import IconGraduation from "./graduation.svg";
 import IconLikeFill from "./like-fill.svg";
-import IconLkieNotFill from "./like-not-fill.svg";
+import IconLikeNotFill from "./like-not-fill.svg";
 import IconModify from "./modify.svg";
 import IconPencil from "./pencil.svg";
 import IconPlus from "./plus.svg";
@@ -37,7 +37,7 @@ export {
   IconSetting,
   IconCamera,
   IconDirectMessage,
-  IconLkieNotFill,
+  IconLikeNotFill,
   IconLikeFill,
   IconUnSmile,
   IconSmile,

public/svgs/mentor/index.ts

@@ -0,0 +1,20 @@
+import useFetch from "@/utils/apiUtils";
+
+const useDeleteArticle = (articleId: number | null) => {
+  const { loading, error, fetchData } = useFetch<void>();
+
+  const deleteArticle = () => {
+    if (articleId === null) return;
+
+    fetchData({
+      method: "delete",
+      url: `/news/${articleId}`,
+      body: undefined,
+      isToken: true,
+    });
+  };
+
+  return { deleteArticle, loading, error };
+};
+
+export default useDeleteArticle;

src/api/article/client/useDeleteArticle.ts

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+
+import useFetch from "@/utils/apiUtils";
+
+import { ArticleResponse } from "../type/response";
+
+/* ---------- 타입 ---------- */
+
+interface ArticleListResponse {
+  news: ArticleResponse[]; // 최대 5개
+}
+
+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 };
+};
+
+export default useGetArticleList;

src/api/article/client/useGetAriticleList.ts

@@ -0,0 +1,8 @@
+export interface ArticleResponse {
+  title: string;
+  description: string; // 최대 30자, 멘토가 작성
+  url: string;
+  thumbnailUrl: string;
+  updatedAt: string;
+  isLiked: boolean;
+}

src/api/article/type/response.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+import useFetch from "@/utils/apiUtils";
+
+import { MentorCardDetail } from "../type/response";
+
+const useGetMentorDetailPage = (mentorId: number | null) => {
+  const { result, loading, error, fetchData } = useFetch<MentorCardDetail>();
+  const [mentorDetail, setMentorDetail] = useState<MentorCardDetail | null>(null);
+
+  useEffect(() => {
+    if (mentorId === null) return;
+    // 멘토 상세 정보 요청
+    fetchData({
+      method: "get",
+      url: `/mentors/${mentorId}`,
+      body: null,
+      isToken: true,
+    });
+  }, [mentorId, fetchData]);
+
+  useEffect(() => {
+    if (result) {
+      setMentorDetail(result.data);
+    }
+  }, [result]);
+
+  return { mentorDetail, loading, error };
+};
+
+export default useGetMentorDetailPage;

src/api/mentor/client/useGetMentorDetailPage.ts

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+
+import useFetch from "@/utils/apiUtils";
+
+import { MentorCardDetail } from "../type/response";
+
+interface UseGetMentorListProps {
+  region?: string;
+  page?: number;
+}
+
+interface UseGetMentorListReturn {
+  mentorList: MentorCardDetail[];
+  loading: boolean;
+  error: unknown;
+}
+
+interface MentorListResponse {
+  /** 다음 페이지 번호. 다음 페이지가 없으면 -1 */
+  nextPageNumber: number;
+  content: MentorCardDetail[];
+}
+
+const OFFSET = 10; // 기본 페이지 크기
+
+const useGetMentorList = ({ region = "전체", page = 0 }: UseGetMentorListProps = {}): UseGetMentorListReturn => {
+  const { result, loading, error, fetchData } = useFetch<MentorListResponse>();
+  const [mentorList, setMentorList] = useState<MentorCardDetail[]>([]);
+  const [nextPageNumber, setNextPageNumber] = useState<number>(0);
+
+  useEffect(() => {
+    // nextPageNumber가 -1이면 더 이상 호출하지 않음
+    if (nextPageNumber === -1) return;
+
+    fetchData({
+      method: "GET",
+      url: `/mentor?region=${region}&page=${page}&size=${OFFSET}`,
+      body: undefined,
+      isToken: true,
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [region, page, nextPageNumber, fetchData]);
+
+  useEffect(() => {
+    if (result) {
+      // 추가 로딩된 콘텐츠를 기존 배열에 병합
+      setMentorList((prev) => [...prev, ...result.data.content]);
+      setNextPageNumber(result.data.nextPageNumber);
+    }
+  }, [result]);
+
+  return {
+    mentorList,
+    loading,
+    error,
+  };
+};
+
+export default useGetMentorList;

src/api/mentor/client/useGetMentorList.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+
+import useFetch from "@/utils/apiUtils";
+
+import { MentorCardPreview } from "../type/response";
+
+interface UseGetMyMentorDataReturn {
+  myMentorProfile: MentorCardPreview;
+  loading: boolean;
+  error: unknown;
+}
+
+const useGetMyMentorProfile = (): UseGetMyMentorDataReturn => {
+  const { result, loading, error, fetchData } = useFetch<MentorCardPreview>();
+  const [myMentorProfile, setMyMentorProfile] = useState<MentorCardPreview>({} as MentorCardPreview);
+
+  useEffect(() => {
+    fetchData({
+      method: "get",
+      url: "/mentor/my",
+      body: undefined,
+      isToken: true,
+    });
+  }, [fetchData]);
+
+  useEffect(() => {
+    if (result) {
+      setMyMentorProfile(result.data);
+    }
+  }, [result]);
+
+  return {
+    myMentorProfile,
+    loading,
+    error,
+  };
+};
+
+export default useGetMyMentorProfile;

src/api/mentor/client/useGetMyMentorProfile.ts

@@ -0,0 +1,30 @@
+import useFetch from "@/utils/apiUtils";
+
+/* ---------- 타입 ---------- */
+export interface ChannelPayload {
+  type: string;
+  url: string;
+}
+
+export interface PutMyMentorProfileBody {
+  channels: ChannelPayload[];
+  passTip: string;
+  introduction: string;
+}
+
+const usePutMyMentorProfile = () => {
+  const { loading, error, fetchData } = useFetch<void>();
+
+  const putMyMentorProfile = (body: PutMyMentorProfileBody) => {
+    fetchData({
+      method: "put",
+      url: "/mentors/me",
+      body,
+      isToken: true,
+    });
+  };
+
+  return { putMyMentorProfile, loading, error };
+};
+
+export default usePutMyMentorProfile;