Merge pull request #290 from manNomi/feat/univ-page

feat: 멘토/멘티 기능 개선 및 반응형 레이아웃 최적화

Author: manNomi

src/api/mentee/client/usePostApplyMentoring.ts

@@ -1,13 +1,9 @@
-import { useRouter } from "next/navigation";
-
 import { axiosInstance } from "@/utils/axiosInstance";
 
 import { QueryKeys } from "./queryKey";
 
-import { customConfirm } from "@/lib/zustand/useConfirmModalStore";
-import { IconCheck } from "@/public/svgs/mentor";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { toast } from "@/lib/zustand/useToastStore";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 interface UsePostApplyMentoringRequest {
   mentorId: number;
@@ -22,27 +18,14 @@ const postApplyMentoring = async (body: UsePostApplyMentoringRequest): Promise<U
 };
 
 const usePostApplyMentoring = () => {
-  const router = useRouter();
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: postApplyMentoring,
     onSuccess: async () => {
       // 멘토링 신청 후 멘토 목록을 새로고침
       await queryClient.invalidateQueries({ queryKey: [QueryKeys.applyMentoringList] });
-      const ok = await customConfirm({
-        title: "멘토 신청",
-        content: "멘토 신청이 완료되었습니다.",
-        icon: IconCheck,
-        rejectMessage: "홈으로",
-        approveMessage: "다른 멘토 찾기",
-      });
-      if (ok) {
-        router.push("/mentor");
-        return;
-      }
-      router.push("/");
     },
-    onError: (error) => {
+    onError: () => {
       toast.error("멘토 신청에 실패했습니다. 다시 시도해주세요.");
     },
   });

src/api/mentor/client/usePatchApprovalStatus.ts

@@ -9,14 +9,15 @@ import { MentoringApprovalStatus } from "@/types/mentor";
 import { customAlert } from "@/lib/zustand/useAlertModalStore";
 import { customConfirm } from "@/lib/zustand/useConfirmModalStore";
 import { IconSmile, IconUnSmile } from "@/public/svgs/mentor";
-import { QueryClient, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 interface UsePatchApprovalStatusRequest {
   status: MentoringApprovalStatus;
   mentoringId: number; // 멘토링 ID
 }
 interface UsePatchApprovalStatusResponse {
   mentoringId: number; // 멘토링 ID
+  chatRoomId: number; // 채팅방 ID
 }
 
 const patchApprovalStatus = async (props: UsePatchApprovalStatusRequest): Promise<UsePatchApprovalStatusResponse> => {
@@ -56,7 +57,7 @@ const usePatchApprovalStatus = () => {
           approveMessage: "1:1 채팅 바로가기",
         });
         if (ok) {
-          router.push(`/mentor/chat/${data.mentoringId}`);
+          router.push(`/mentor/chat/${data.chatRoomId}`);
         }
       }
     },

src/api/my/client/useGetMyInfo.ts

@@ -20,7 +20,12 @@ export interface MentorInfo extends BaseUserInfo {
   attendedUniversity: string;
 }
 
-export type MyInfoResponse = MenteeInfo | MentorInfo;
+export interface AdminInfo extends BaseUserInfo {
+  role: UserRole.ADMIN;
+  attendedUniversity: string;
+}
+
+export type MyInfoResponse = MenteeInfo | MentorInfo | AdminInfo;
 
 // --- API 호출 함수 ---
 const getMyInfo = async (): Promise<MyInfoResponse> => {

src/api/news/client/usePostArticleLike.ts

@@ -64,7 +64,6 @@ const usePostArticleLike = (userId: number | null) => {
 
     // 4. onError: 실패 시 이전 상태로 롤백합니다.
     onError: (err, variables, context) => {
-      console.log(err);
       if (context?.previousArticleList) {
         queryClient.setQueryData<Article[]>(queryKey, context.previousArticleList);
       }

src/api/news/client/usePutModifyArticle.ts

@@ -8,8 +8,8 @@ import { QueryKeys } from "./queryKey";
 
 import { Article } from "@/types/news";
 
-import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { toast } from "@/lib/zustand/useToastStore";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 type UsePutModifyArticleRequest = {
   body: ArticleFormData & { isImageDeleted?: boolean };
@@ -68,7 +68,6 @@ const usePutModifyArticle = (userId: number | null) => {
       return { previousArticleList };
     },
     onError: (error, variables, context) => {
-      console.log();
       const errorMessage = error.response?.data?.message || "";
       if (context?.previousArticleList) {
         queryClient.setQueryData(queryKey, context.previousArticleList);

src/app/community/[boardCode]/PostWriteButton.tsx

@@ -29,7 +29,7 @@ const PostWriteButton = ({ onClick }: PostWriteButtonProps) => {
 
   return (
     <div
-      className={`fixed bottom-16 flex w-full max-w-[600px] flex-col items-center transition-transform duration-300 ease-in-out ${isVisible ? "translate-y-0" : "translate-y-[calc(100%+66px)]"} `}
+      className={`max-w-app fixed bottom-16 flex w-full flex-col items-center transition-transform duration-300 ease-in-out ${isVisible ? "translate-y-0" : "translate-y-[calc(100%+66px)]"} `}
     >
       <button
         className="relative flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-primary shadow-[0px_4px_30px_rgba(0,0,0,0.15)]"

src/app/community/[boardCode]/[postId]/CommentInput.tsx

@@ -38,7 +38,7 @@ const CommentInput = ({ postId, curSelectedComment, setCurSelectedComment, refre
   };
 
   return (
-    <div className="fixed bottom-14 flex w-full min-w-[360px] max-w-[600px] items-center gap-3 border-t border-[#ececec] bg-k-0 p-2">
+    <div className="min-w-app max-w-app fixed bottom-14 flex w-full items-center gap-3 border-t border-[#ececec] bg-k-0 p-2">
       <div className="w-full">
         {curSelectedComment && (
           <div className="flex h-10 w-full items-center justify-between rounded-t-lg bg-[#e2e2e2] px-2.5 pb-2.5 pt-3">

src/app/community/[boardCode]/[postId]/modify/PostModifyForm.tsx

@@ -151,7 +151,7 @@ type CustomTopDetailNavigationProps = {
 };
 
 const CustomTopDetailNavigation = ({ routeBack, submitPost }: CustomTopDetailNavigationProps) => (
-  <div className="fixed top-0 z-30 box-border flex h-14 w-full max-w-[600px] items-center justify-between bg-white px-5">
+  <div className="max-w-app fixed top-0 z-30 box-border flex h-14 w-full items-center justify-between bg-white px-5">
     <button className="min-w-6 cursor-pointer" onClick={routeBack} type="button" aria-label="뒤로 가기">
       <IconArrowBackFilled />
     </button>

src/app/mentor/_ui/MentorClient/index.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useState } from "react";
+
 import { tokenParse } from "@/utils/jwtUtils";
 
 import CloudSpinnerPage from "@/components/ui/CloudSpinnerPage";
@@ -14,16 +16,46 @@ import useAuthStore from "@/lib/zustand/useAuthStore";
 
 const MentorClient = () => {
   const { isLoading, accessToken } = useAuthStore();
-  const isMentor = tokenParse(accessToken)?.role === UserRole.MENTOR;
+  const parsedToken = tokenParse(accessToken);
+  const userRole = parsedToken?.role;
+  const isMentor = userRole === UserRole.MENTOR || userRole === UserRole.ADMIN;
+  const isAdmin = userRole === UserRole.ADMIN;
+
+  // 어드민 전용: 뷰 전환 상태 (true: 멘토 뷰, false: 멘티 뷰)
+  const [showMentorView, setShowMentorView] = useState<boolean>(true);
+
+  if (isLoading || !accessToken) return <CloudSpinnerPage />; // 로딩 중일 때 스피너 표시
+
+  // 어드민이 아닌 경우 기존 로직대로
+  const shouldShowMentorView = isAdmin ? showMentorView : isMentor;
 
-  if (isLoading) return <CloudSpinnerPage />; // 로딩 중일 때 스피너 표시
   return (
     <>
-      {isMentor ? (
+      {/* 어드민 전용 뷰 전환 버튼 */}
+      {isAdmin && (
+        <div className="mb-4 flex gap-2">
+          <button
+            onClick={() => setShowMentorView(true)}
+            className={`flex-1 rounded-lg px-4 py-2.5 text-sm font-semibold transition-colors ${
+              showMentorView ? "bg-primary text-white" : "border border-k-200 bg-white text-k-600 hover:bg-k-50"
+            }`}
+          >
+            멘토 페이지 보기
+          </button>
+          <button
+            onClick={() => setShowMentorView(false)}
+            className={`flex-1 rounded-lg px-4 py-2.5 text-sm font-semibold transition-colors ${
+              !showMentorView ? "bg-primary text-white" : "border border-k-200 bg-white text-k-600 hover:bg-k-50"
+            }`}
+          >
+            멘티 페이지 보기
+          </button>
+        </div>
+      )}
+
+      {shouldShowMentorView ? (
         // 멘토페이지
-        <>
-          <MentorPage />
-        </>
+        <MentorPage />
       ) : (
         // 멘티페이지
         <>

src/app/mentor/chat/[chatId]/_ui/ChatContent/_hooks/useChatListHandler.ts

@@ -77,6 +77,7 @@ const useChatListHandler = (chatId: number) => {
       if (content.trim() === "") return; // 빈 메시지 전송 방지
 
       if (clientRef.current?.active && connectionStatus === ConnectionStatus.Connected) {
+        // WebSocket으로 메시지 전송
         clientRef.current.publish({
           destination: `/publish/chat/${chatId}`,
           body: JSON.stringify({ content, senderId }),