Merge pull request #294 from manNomi/refactor/community

Refactor/community

Author: manNomi

package-lock.json

@@ -23,6 +23,7 @@
     "@stomp/stompjs": "^7.1.1",
     "@tanstack/react-query": "^5.84.1",
     "@tanstack/react-query-devtools": "^5.84.1",
+    "@tanstack/react-virtual": "^3.13.12",
     "@types/js-cookie": "^3.0.6",
     "axios": "^1.6.7",
     "class-variance-authority": "^0.7.1",
@@ -36,6 +37,7 @@
     "lucide-react": "^0.479.0",
     "next": "^14.2.4",
     "react": "^18",
+    "react-dom": "^18",
     "react-hook-form": "^7.60.0",
     "sockjs-client": "^1.6.1",
     "tailwind-merge": "^3.0.2",

package.json

@@ -13,17 +13,18 @@ interface UseGetPostListProps {
   category?: string | null;
 }
 
-const getPostList = (boardCode: string, category: string | null = null): Promise<AxiosResponse<ListPost[]>> =>
-  publicAxiosInstance.get(`/boards/${boardCode}`, {
-    params: {
-      category,
-    },
-  });
+const getPostList = (boardCode: string, category: string | null = null): Promise<AxiosResponse<ListPost[]>> => {
+  // "전체"는 필터 없음을 의미하므로 파라미터에 포함하지 않음
+  const params = category && category !== "전체" ? { category } : {};
+  
+  return publicAxiosInstance.get(`/boards/${boardCode}`, { params });
+};
 
 const useGetPostList = ({ boardCode, category = null }: UseGetPostListProps) => {
   return useQuery({
     queryKey: [QueryKeys.postList, boardCode, category],
     queryFn: () => getPostList(boardCode, category),
+    // HydrationBoundary로부터 자동으로 hydrate된 데이터 사용
     // staleTime을 무한으로 설정하여 불필요한 자동 refetch를 방지합니다.
     staleTime: Infinity,
     gcTime: 1000 * 60 * 30, // 예: 30분

src/api/boards/clients/useGetPostList.ts

@@ -0,0 +1,40 @@
+import serverFetch, { ServerFetchResult } from "@/utils/serverFetchUtil";
+
+import { ListPost } from "@/types/community";
+
+interface GetPostListParams {
+  boardCode: string;
+  category?: string | null;
+  revalidate?: number | false;
+}
+
+/**
+ * @description 게시글 목록을 서버에서 가져오는 함수 (ISR 지원)
+ * @param boardCode - 게시판 코드
+ * @param category - 카테고리 (선택)
+ * @param revalidate - ISR revalidate 시간(초) 또는 false (무한 캐시)
+ * @returns Promise<ServerFetchResult<ListPost[]>>
+ */
+export const getPostList = async ({
+  boardCode,
+  category = null,
+  revalidate = false, // 기본값: 자동 재생성 비활성화 (수동 revalidate만)
+}: GetPostListParams): Promise<ServerFetchResult<ListPost[]>> => {
+  const params = new URLSearchParams();
+  // "전체"는 필터 없음을 의미하므로 파라미터에 포함하지 않음
+  if (category && category !== "전체") {
+    params.append("category", category);
+  }
+
+  const queryString = params.toString();
+  const url = `/boards/${boardCode}${queryString ? `?${queryString}` : ""}`;
+
+  return serverFetch<ListPost[]>(url, {
+    method: "GET",
+    next: {
+      revalidate,
+      tags: [`posts-${boardCode}`], // 태그 기반 revalidation 지원 (글 작성 시만 revalidate)
+    },
+  });
+};
+

src/api/boards/server/getPostList.ts

@@ -6,19 +6,22 @@ import { QueryKeys } from "./queryKey";
 
 import { PostCreateRequest, PostIdResponse } from "@/types/community";
 
+import useAuthStore from "@/lib/zustand/useAuthStore";
 import { toast } from "@/lib/zustand/useToastStore";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 /**
  * @description 게시글 생성 API 함수
  * @param request - 게시글 생성 요청 데이터
- * @returns Promise<PostIdResponse>
+ * @returns Promise<PostIdResponse & { boardCode: string }>
  */
-const createPost = async (request: PostCreateRequest): Promise<PostIdResponse> => {
+const createPost = async (
+  request: PostCreateRequest
+): Promise<PostIdResponse & { boardCode: string }> => {
   const convertedRequest: FormData = new FormData();
   convertedRequest.append(
     "postCreateRequest",
-    new Blob([JSON.stringify(request.postCreateRequest)], { type: "application/json" }),
+    new Blob([JSON.stringify(request.postCreateRequest)], { type: "application/json" })
   );
   request.file.forEach((file) => {
     convertedRequest.append("file", file);
@@ -27,20 +30,56 @@ const createPost = async (request: PostCreateRequest): Promise<PostIdResponse> =
   const response: AxiosResponse<PostIdResponse> = await axiosInstance.post(`/posts`, convertedRequest, {
     headers: { "Content-Type": "multipart/form-data" },
   });
-  return response.data;
+  
+  return {
+    ...response.data,
+    boardCode: request.postCreateRequest.boardCode,
+  };
+};
+
+/**
+ * @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 useCreatePost = () => {
   const queryClient = useQueryClient();
+  const { accessToken } = useAuthStore();
 
   return useMutation({
     mutationFn: createPost,
-    onSuccess: () => {
+    onSuccess: async (data) => {
       // 게시글 목록 쿼리를 무효화하여 최신 목록 반영
       queryClient.invalidateQueries({ queryKey: [QueryKeys.posts] });
+      
+      // ISR 페이지 revalidate (사용자 인증 토큰 사용)
+      if (accessToken) {
+        await revalidateCommunityPage(data.boardCode, accessToken);
+      }
+      
       toast.success("게시글이 등록되었습니다.");
     },
     onError: (error) => {

src/api/community/client/useCreatePost.ts

@@ -0,0 +1,97 @@
+import { revalidatePath, revalidateTag } from "next/cache";
+import { NextRequest, NextResponse } from "next/server";
+
+/**
+ * @description Revalidation 요청 body 타입
+ */
+interface RevalidateRequestBody {
+  path?: string;
+  tag?: string;
+  boardCode?: string;
+}
+
+/**
+ * @description ISR 페이지를 수동으로 revalidate하는 API
+ * POST /api/revalidate
+ * Headers: Authorization: Bearer <accessToken>
+ * Body: { path?: string, tag?: string, boardCode?: string }
+ *
+ * @security 사용자 인증(accessToken)으로 보호됨
+ */
+async function POST(request: NextRequest) {
+  try {
+    // 1. 사용자 인증 확인 (Authorization 헤더의 accessToken)
+    const authHeader = request.headers.get("authorization");
+
+    if (!authHeader?.startsWith("Bearer ")) {
+      return NextResponse.json({ revalidated: false, message: "Unauthorized" }, { status: 401 });
+    }
+
+    const accessToken = authHeader.substring(7);
+
+    if (!accessToken) {
+      return NextResponse.json({ revalidated: false, message: "Unauthorized" }, { status: 401 });
+    }
+
+    // 2. 백엔드 API로 토큰 검증 (/my 엔드포인트 사용)
+    // 실제 사용자인지 확인하여 악의적인 revalidation 방지
+    try {
+      const apiServerUrl = process.env.NEXT_PUBLIC_API_SERVER_URL || "";
+      const verifyResponse = await fetch(`${apiServerUrl}/my`, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+
+      if (!verifyResponse.ok) {
+        return NextResponse.json({ revalidated: false, message: "Forbidden" }, { status: 403 });
+      }
+    } catch (error) {
+      console.error("Token verification failed:", error);
+      return NextResponse.json({ revalidated: false, message: "Forbidden" }, { status: 403 });
+    }
+
+    // 3. 인증 성공 - Revalidation 로직 수행
+    const body = (await request.json()) as RevalidateRequestBody;
+    const { path, tag, boardCode } = body;
+
+    // boardCode가 있으면 해당 커뮤니티 페이지 revalidate
+    if (boardCode) {
+      revalidatePath(`/community/${boardCode}`);
+      revalidateTag(`posts-${boardCode}`);
+
+      return NextResponse.json({
+        revalidated: true,
+        message: `Community page for ${boardCode} revalidated`,
+        timestamp: Date.now(),
+      });
+    }
+
+    // 특정 경로 revalidate
+    if (path) {
+      revalidatePath(path);
+      return NextResponse.json({
+        revalidated: true,
+        message: `Path ${path} revalidated`,
+        timestamp: Date.now(),
+      });
+    }
+
+    // 특정 태그 revalidate
+    if (tag) {
+      revalidateTag(tag);
+      return NextResponse.json({
+        revalidated: true,
+        message: `Tag ${tag} revalidated`,
+        timestamp: Date.now(),
+      });
+    }
+
+    return NextResponse.json({ revalidated: false, message: "Missing path, tag, or boardCode" }, { status: 400 });
+  } catch (error) {
+    console.error("Revalidate error:", error);
+    return NextResponse.json({ revalidated: false, message: "Error revalidating" }, { status: 500 });
+  }
+}
+
+export { POST };

src/app/api/revalidate/route.ts

@@ -21,7 +21,11 @@ const CommunityPageContent = ({ boardCode }: CommunityPageContentProps) => {
   const router = useRouter();
   const [category, setCategory] = useState<string | null>("전체");
 
-  const { data: posts = [] } = useGetPostList({ boardCode, category });
+  // HydrationBoundary로부터 자동으로 prefetch된 데이터 사용
+  const { data: posts = [] } = useGetPostList({
+    boardCode,
+    category,
+  });
 
   const handleBoardChange = (newBoard: string) => {
     router.push(`/community/${newBoard}`);