🐛 최근 5개 이슈 수정 (#405-#409)

apps/web/package.json

@@ -26,6 +26,7 @@
     "@tanstack/react-query": "^5.84.1",
     "@tanstack/react-query-devtools": "^5.84.1",
     "@tanstack/react-virtual": "^3.13.12",
+    "@vercel/speed-insights": "^1.3.1",
     "axios": "^1.6.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

apps/web/src/apis/community/deletePost.ts

@@ -3,27 +3,64 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { AxiosError, AxiosResponse } from "axios";
 import { useRouter } from "next/navigation";
 
+import useAuthStore from "@/lib/zustand/useAuthStore";
 import { toast } from "@/lib/zustand/useToastStore";
 import { CommunityQueryKeys, communityApi, type DeletePostResponse } from "./api";
 
+interface DeletePostVariables {
+  postId: number;
+  boardCode?: string;
+}
+
+/**
+ * @description ISR 페이지를 revalidate하는 함수
+ * @param boardCode - 게시판 코드
+ * @param accessToken - 사용자 인증 토큰
+ */
+const revalidateCommunityPage = async (boardCode: string, accessToken: string) => {
+  try {
+    if (!accessToken) {
+      console.warn("Revalidation skipped: No access token available");
+      return;
+    }
+
+    await fetch("/api/revalidate", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${accessToken}`,
+      },
+      body: JSON.stringify({ boardCode }),
+    });
+  } catch (error) {
+    console.error("Revalidate failed:", error);
+  }
+};
+
 /**
  * @description 게시글 삭제를 위한 useMutation 커스텀 훅
  */
 const useDeletePost = () => {
   const router = useRouter();
   const queryClient = useQueryClient();
+  const { accessToken } = useAuthStore();
 
-  return useMutation<AxiosResponse<DeletePostResponse>, AxiosError, number>({
-    mutationFn: communityApi.deletePost,
-    onSuccess: () => {
+  return useMutation<AxiosResponse<DeletePostResponse>, AxiosError, DeletePostVariables>({
+    mutationFn: ({ postId }) => communityApi.deletePost(postId),
+    onSuccess: async (_result, variables) => {
       // 'posts' 쿼리 키를 가진 모든 쿼리를 무효화하여
       // 게시글 목록을 다시 불러오도록 합니다.
       queryClient.invalidateQueries({ queryKey: [CommunityQueryKeys.posts] });
 
+      // ISR 페이지 revalidate
+      if (variables.boardCode && accessToken) {
+        await revalidateCommunityPage(variables.boardCode, accessToken);
+      }
+
       toast.success("게시글이 성공적으로 삭제되었습니다.");
 
       // 게시글 목록 페이지 이동
-      router.replace("/community/FREE");
+      router.replace(`/community/${variables.boardCode || "FREE"}`);
     },
     onError: (error) => {
       console.error("게시글 삭제 실패:", error);

apps/web/src/apis/community/patchUpdatePost.ts

@@ -1,26 +1,60 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 
+import useAuthStore from "@/lib/zustand/useAuthStore";
 import { toast } from "@/lib/zustand/useToastStore";
 import { CommunityQueryKeys, communityApi, type PostIdResponse, type PostUpdateRequest } from "./api";
 
 interface UpdatePostVariables {
   postId: number;
   data: PostUpdateRequest;
+  boardCode?: string;
 }
 
+/**
+ * @description ISR 페이지를 revalidate하는 함수
+ * @param boardCode - 게시판 코드
+ * @param accessToken - 사용자 인증 토큰
+ */
+const revalidateCommunityPage = async (boardCode: string, accessToken: string) => {
+  try {
+    if (!accessToken) {
+      console.warn("Revalidation skipped: No access token available");
+      return;
+    }
+
+    await fetch("/api/revalidate", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${accessToken}`,
+      },
+      body: JSON.stringify({ boardCode }),
+    });
+  } catch (error) {
+    console.error("Revalidate failed:", error);
+  }
+};
+
 /**
  * @description 게시글 수정을 위한 useMutation 커스텀 훅
  */
 const useUpdatePost = () => {
   const queryClient = useQueryClient();
+  const { accessToken } = useAuthStore();
 
   return useMutation<PostIdResponse, AxiosError, UpdatePostVariables>({
     mutationFn: ({ postId, data }) => communityApi.updatePost(postId, data),
-    onSuccess: (_result, variables) => {
+    onSuccess: async (_result, variables) => {
       // 해당 게시글 상세 쿼리와 목록 쿼리를 무효화
       queryClient.invalidateQueries({ queryKey: [CommunityQueryKeys.posts, variables.postId] });
       queryClient.invalidateQueries({ queryKey: [CommunityQueryKeys.posts] });
+
+      // ISR 페이지 revalidate
+      if (variables.boardCode && accessToken) {
+        await revalidateCommunityPage(variables.boardCode, accessToken);
+      }
+
       toast.success("게시글이 수정되었습니다.");
     },
     onError: (error) => {

apps/web/src/app/community/[boardCode]/[postId]/KebabMenu.tsx

@@ -1,16 +1,19 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import { type RefObject, useEffect, useRef, useState } from "react";
 import { useDeletePost } from "@/apis/community";
 import ReportPanel from "@/components/ui/ReportPanel";
 import { toast } from "@/lib/zustand/useToastStore";
 import { IconSetting } from "@/public/svgs/mentor";
 
-const useClickOutside = (ref, handler) => {
+const useClickOutside = (ref: RefObject<HTMLDivElement | null>, handler: (event: MouseEvent | TouchEvent) => void) => {
   useEffect(() => {
-    const listener = (event) => {
-      if (!ref.current || ref.current.contains(event.target)) return;
+    const listener = (event: MouseEvent | TouchEvent) => {
+      const current = ref.current;
+      if (!current) return;
+      if (!(event.target instanceof Node)) return;
+      if (current.contains(event.target)) return;
       handler(event);
     };
     document.addEventListener("mousedown", listener);
@@ -113,7 +116,7 @@ const KebabMenu = ({ postId, boardCode, isOwner = false }: KebabMenuProps) => {
                   <button
                     onClick={() => {
                       if (confirm("정말로 삭제하시겠습니까?")) {
-                        deletePost(postId);
+                        deletePost({ postId, boardCode });
                       }
                     }}
                     className={`flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-gray-700 typo-regular-2 hover:bg-k-50`}

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

@@ -4,6 +4,7 @@ import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 
 import { useUpdatePost } from "@/apis/community";
+import { toast } from "@/lib/zustand/useToastStore";
 import { IconArrowBackFilled, IconImage, IconPostCheckboxFilled, IconPostCheckboxOutlined } from "@/public/svgs";
 
 type PostModifyFormProps = {
@@ -25,6 +26,7 @@ const PostModifyForm = ({
 }: PostModifyFormProps) => {
   const [title, setTitle] = useState<string>(defaultTitle);
   const [content, setContent] = useState<string>(defaultContent);
+  const [isQuestion, setIsQuestion] = useState<boolean>(defaultIsQuestion);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const titleRef = useRef<HTMLDivElement>(null);
   const imageUploadRef = useRef<HTMLInputElement>(null);
@@ -60,12 +62,23 @@ const PostModifyForm = ({
   }, []);
 
   const submitPost = async () => {
+    if (!title.trim()) {
+      toast.error("제목을 입력해주세요.");
+      return;
+    }
+
+    if (!content.trim()) {
+      toast.error("내용을 입력해주세요.");
+      return;
+    }
+
     updatePostMutation.mutate(
       {
         postId,
+        boardCode,
         data: {
           postUpdateRequest: {
-            postCategory: defaultPostCategory,
+            postCategory: isQuestion ? "질문" : "자유",
             title,
             content,
           },
@@ -108,8 +121,8 @@ const PostModifyForm = ({
         </div>
         <div className="flex h-[42px] items-center justify-between border-b border-b-gray-c-100 px-5 py-2.5">
           <div className="text-gray-250/87 flex items-center gap-1 typo-regular-2">
-            <button type="button">
-              {defaultIsQuestion ? <IconPostCheckboxFilled /> : <IconPostCheckboxOutlined />}
+            <button onClick={() => setIsQuestion(!isQuestion)} type="button">
+              {isQuestion ? <IconPostCheckboxFilled /> : <IconPostCheckboxOutlined />}
             </button>
             질문으로 업로드 하기
           </div>

apps/web/src/app/mentor/modify/_ui/ModifyContent/_hooks/useModifyHookForm.ts

@@ -24,7 +24,7 @@ const useModifyHookForm = (myMentorProfile: MentorCardPreview | null): UseModify
       reset({
         channels,
         introduction: myMentorProfile.introduction,
-        passTip: "",
+        passTip: myMentorProfile.passTip ?? "",
       });
     } else {
       // myMentorProfile이 없을 때도 4개의 빈 채널 슬롯 제공
@@ -35,6 +35,6 @@ const useModifyHookForm = (myMentorProfile: MentorCardPreview | null): UseModify
       });
     }
   }, [myMentorProfile, reset]);
-  return { ...method };
+  return method;
 };
 export default useModifyHookForm;

apps/web/src/app/mentor/modify/_ui/ModifyContent/index.tsx

@@ -61,8 +61,9 @@ const ModifyContent = () => {
             <h2 className="mt-10 text-primary-1 typo-sb-5">멘토 한마디</h2>
             <textarea
               {...register("introduction")}
-              className="mt-2.5 h-30 w-full rounded-lg bg-k-50 p-5 text-k-300 typo-regular-2"
+              className="mt-2.5 h-30 w-full rounded-lg bg-k-50 p-5 text-k-900 placeholder:text-k-300 typo-regular-2"
               placeholder="최대 200자 이내"
+              maxLength={200}
             />
             {errors.introduction && (
               <p className="mt-1 text-red-500 typo-regular-2">
@@ -74,8 +75,9 @@ const ModifyContent = () => {
             <h2 className="mt-10 text-primary-1 typo-sb-5">합격 레시피</h2>
             <textarea
               {...register("passTip")}
-              className="mt-2.5 h-30 w-full rounded-lg bg-k-50 p-5 text-k-300 typo-regular-2"
+              className="mt-2.5 h-30 w-full rounded-lg bg-k-50 p-5 text-k-900 placeholder:text-k-300 typo-regular-2"
               placeholder="최대 200자 이내"
+              maxLength={200}
             />
             {errors.passTip && (
               <p className="mt-1 text-red-500 typo-regular-2">

apps/web/src/app/mentor/waiting/_ui/WaitingContent/index.tsx

@@ -21,7 +21,7 @@ const WaitingContent = () => {
         <div className="flex items-center">
           <h2 className="mr-2 text-k-900 typo-sb-5">대기 중인 멘토링</h2>
           {totalLength > DEFAULT_VISIBLE_ITEMS && (
-            <span className="rounded-2xl bg-primary-1 px-2 text-k-0">{totalLength - 2}+</span>
+            <span className="rounded-2xl bg-primary-1 px-2 text-k-0">{totalLength - DEFAULT_VISIBLE_ITEMS}+</span>
           )}
         </div>
       </div>
@@ -42,7 +42,7 @@ const WaitingContent = () => {
                     mentoringId={item.mentoringId}
                     profileImageUrl={item.profileImageUrl}
                     nickname={item.nickname}
-                    message={`님이 멘티 신청을 수락했어요.`}
+                    message="멘토가 멘티 신청을 수락했어요."
                     date={item.createdAt}
                   />
                 ))
@@ -56,7 +56,7 @@ const WaitingContent = () => {
         {({ isExpanded }) => (
           <div className="space-y-2">
             <h3 className="mt-3 px-5 text-k-900 typo-sb-5">수락 대기중</h3>
-            <div className="space-y-2 p-4">
+            <div className="space-y-2">
               {pendingList.length === 0 ? (
                 <div className="px-4 py-3">
                   <EmptySdwBCards message="멘토 신청 내역이 없습니다." />
@@ -67,7 +67,7 @@ const WaitingContent = () => {
                     key={item.mentoringId}
                     profileImageUrl={item.profileImageUrl}
                     nickname={item.nickname}
-                    description={`님에게 멘티 신청을 보냈어요.`}
+                    description="멘토에게 멘티 신청을 보냈어요."
                   />
                 ))
               )}

apps/web/src/app/university/application/ScoreSheet.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { IconExpandMoreFilled } from "@/public/svgs/community";
-import type { ScoreSheet } from "@/types/application";
+import type { ScoreSheet as ScoreSheetType } from "@/types/application";
 import { languageTestMapping } from "@/types/score";
 
-const ScoreSheet = ({ scoreSheet }: { scoreSheet: ScoreSheet }) => {
+const ScoreSheet = ({ scoreSheet }: { scoreSheet: ScoreSheetType }) => {
   const [tableOpened, setTableOpened] = useState(false);
 
   return (

apps/web/src/components/mentor/ArticleBottomSheetModal/hooks/useArticleSchema.ts

@@ -87,12 +87,23 @@ const useArticleSchema = ({
 
   const handleFormSubmit = (data: ArticleFormData) => {
     if (isEdit) {
-      putModifyArticle({ body: data, articleId });
+      putModifyArticle(
+        { body: data, articleId },
+        {
+          onSuccess: () => {
+            handleClose();
+            reset();
+          },
+        },
+      );
     } else {
-      postAddArticle(data);
+      postAddArticle(data, {
+        onSuccess: () => {
+          handleClose();
+          reset();
+        },
+      });
     }
-    handleClose();
-    reset();
   };
 
   const handleModalClose = () => {

apps/web/src/components/mentor/ArticleBottomSheetModal/lib/schema.ts

@@ -4,7 +4,7 @@ import { z } from "zod";
 export const articleSchema = z.object({
   title: z.string().min(1, "제목을 입력해주세요").max(20, "제목은 20자 이하로 입력해주세요"),
   description: z.string().min(1, "내용을 입력해주세요").max(300, "내용은 300자 이하로 입력해주세요"),
-  url: z.string().url("올바른 링크 주소를 입력해주세요").optional().or(z.literal("")),
+  url: z.union([z.string().url("올바른 링크 주소를 입력해주세요"), z.literal("")]).optional(),
   resetToDefaultImage: z.boolean().optional(),
   // file은 optional로 설정 (업로드하지 않을 수도 있으므로)
   file: z.instanceof(File).optional(),

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

@@ -112,7 +112,7 @@ const MentorCard = ({ mentor, observeRef, isMine = false }: MentorCardProps) =>
                   onClick={() => id && handlePostApplyMentor(id)}
                   className="flex h-10 w-1/2 flex-shrink-0 items-center justify-center gap-3 rounded-[20px] bg-primary px-5 py-2.5 text-white typo-medium-2"
                 >
-                  멘티 신청하기
+                  멘토링 신청하기
                 </button>
               </>
             )}

apps/web/src/components/ui/FloatingUpBtn/hooks/useFloatingUpHandler.ts

@@ -1,15 +1,15 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 const useFloatingUpHandler = (scrollYThreshold: number = 400) => {
   const [isVisible, setIsVisible] = useState(false);
 
-  const handleScroll = () => {
+  const handleScroll = useCallback(() => {
     if (window.scrollY > scrollYThreshold) {
       setIsVisible(true);
     } else {
       setIsVisible(false);
     }
-  };
+  }, [scrollYThreshold]);
 
   const handleClick = () => {
     window.scrollTo({

apps/web/src/components/ui/UniverSityCard/index.tsx

@@ -35,11 +35,7 @@ const UniversityCard = ({ university, showCapacity = true }: UniversityCardProps
           </div>
 
           <div className="flex flex-col">
-            <span
-              id={`university-name-${university.id}`}
-              className="truncate text-k-700 typo-bold-4"
-              aria-label={convertedKoreanName}
-            >
+            <span id={`university-name-${university.id}`} className="truncate text-k-700 typo-bold-4">
               {convertedKoreanName}
             </span>
             <div className="flex items-center gap-2.5">

apps/web/src/types/mentor.ts

@@ -22,7 +22,7 @@ export interface Mentor {
   isApplied: boolean;
 }
 /** 리스트(미리보기) 용 – passTip / isApplied 없이 사용 */
-export type MentorCardPreview = (MentorCardBase & { term: string }) | null; // 학업 학기 (예: "2026-1")
+export type MentorCardPreview = (MentorCardBase & { term: string; passTip?: string }) | null; // 학업 학기 (예: "2026-1")
 
 /** 상세 뷰 용 – 추가 정보 포함 */
 export interface MentorCardDetail extends MentorCardBase {