Merge pull request #65 from B2A5/fix/freeboard-detail-page-refactor-ssr

[Fix]자유 게시판 상세 페이지 ssr기반으로 리팩토링

Author: youdaeng2

apps/web/src/app/main/community/freeboard/[freeboardId]/ClientPage.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { Header } from '@/components/header/Header';
+import FreeboardDetail from './components/FreeboardDetail';
+import CommentList from './components/CommentList';
+import CommentInput from './components/CommentInput';
+import FreeboardDetailSkeleton from './components/FreeboardDetailSkeleton';
+import { useGetFreeboardPost } from '@/generated/api/endpoints/freeboard/freeboard';
+import { useAuthRestore } from '@/hooks/useAuth';
+
+/**
+ * 자유 게시판 게시글 상세 클라이언트 화면
+ * @param postId 게시글 ID
+ */
+export default function ClientPage({ postId }: { postId: number }) {
+  const { isAuthenticated } = useAuthRestore();
+  const {
+    data: post,
+    isPending,
+    error,
+  } = useGetFreeboardPost(postId, {
+    query: {
+      staleTime: 0, // 언제나 신선하지 않은 것으로 간주
+      gcTime: 5_000, // 화면 이탈 시 빠르게 캐시 정리
+      refetchOnMount: isAuthenticated ? 'always' : false, // 로그인 사용자만 항상 최신화
+      refetchOnWindowFocus: true, // 뒤로가기/포커스 전환 시 최신화
+      refetchOnReconnect: true,
+    },
+  });
+
+  // TODO: 로딩/에러 처리 구체화 필요
+  // postId가 유효하지 않은 경우 처리 필요
+  if (!postId) return <FreeboardDetailSkeleton />;
+  if (isPending) return <FreeboardDetailSkeleton />;
+  if (error || !post) return <div>에러가 발생했습니다.</div>;
+
+  return (
+    <main className="space-y-6 pt-12">
+      <Header className="fixed top-0 left-0 right-0 z-50 bg-white">
+        <Header.Left>
+          <Header.BackButton /> {/* router.back() 내부 처리 */}
+        </Header.Left>
+        <Header.Center>자유게시판</Header.Center>
+        <Header.Right>
+          {/* TODO: onClick 핸들러 추가 */}
+          <Header.MenuButton
+            onClick={() => {
+              /* 바텀시트 열기 */
+            }}
+          />
+        </Header.Right>
+      </Header>
+
+      <FreeboardDetail post={post} />
+
+      <section className="px-5 pb-6">
+        <CommentList
+          postId={postId}
+          initialCount={post.commentCount}
+        />
+        <div className="fixed bottom-16 left-0 right-0 z-50 px-5 py-3">
+          <CommentInput postId={postId} />
+        </div>
+      </section>
+
+      {/* safe-area 보정 */}
+      <div className="fixed inset-x-0 bottom-16 z-50 bg-transparent">
+        <div className="backdrop-blur-[2px] bg-white/90 w-full h-full absolute top-0 z-[-1]" />
+        <div className="h-[env(safe-area-inset-bottom)]" />
+      </div>
+    </main>
+  );
+}

apps/web/src/app/main/community/freeboard/[freeboardId]/components/CommentInput.tsx

@@ -1,13 +1,14 @@
 'use client';
 
 import {
-  createComment,
-  getGetCommentsByCursorQueryKey,
+  createFreeboardComment,
+  getGetFreeboardCommentsByCursorQueryKey,
 } from '@/generated/api/endpoints/freeboard-comment/freeboard-comment';
 import { useToast } from '@/hooks/ui/useToast';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import React, { useEffect, useRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { useAuthGuard } from '@/hooks/useAuth';
 
 interface CommentInputProps {
   /** 댓글이 달릴 게시글 ID */
@@ -31,15 +32,16 @@ export default function CommentInput({
   const targetRef = useRef<HTMLTextAreaElement>(null);
   const queryClient = useQueryClient();
   const toast = useToast();
+  const { guard } = useAuthGuard();
 
   const { mutate, isPending } = useMutation({
     mutationFn: (content: string) =>
-      createComment(postId, { content }),
+      createFreeboardComment(postId, { content }),
     onSuccess: () => {
       toast('댓글이 등록되었습니다', 'success');
       setValue('');
       queryClient.invalidateQueries({
-        queryKey: getGetCommentsByCursorQueryKey(postId),
+        queryKey: getGetFreeboardCommentsByCursorQueryKey(postId),
       });
     },
     onError: () => {
@@ -65,10 +67,11 @@ export default function CommentInput({
     setValue(next.length > limit ? next.slice(0, limit) : next);
   };
 
-  const handleSubmit = () => {
-    if (!value.trim() || isPending) return;
-    mutate(value.trim());
-  };
+  const handleSubmit = () =>
+    guard(() => {
+      if (!value.trim() || isPending) return;
+      mutate(value.trim());
+    });
 
   const handleKeyDown = (
     e: React.KeyboardEvent<HTMLTextAreaElement>,

apps/web/src/app/main/community/freeboard/[freeboardId]/components/CommentItem.tsx

@@ -89,8 +89,8 @@ export default function CommentItem({
             <LikeButtonComment
               postId={postId ?? 0}
               commentId={commentId ?? 0}
-              isLiked={isLiked ?? false}
-              likeCount={likeCount ?? 0}
+              initialLiked={isLiked ?? false}
+              initialLikeCount={likeCount ?? 0}
             />
             <span>{relativeTime(createdAt ?? '')}</span>
           </div>

apps/web/src/app/main/community/freeboard/[freeboardId]/components/CommentList.tsx

@@ -2,26 +2,26 @@
 
 import { useMemo } from 'react';
 import { useInfiniteQuery } from '@tanstack/react-query';
-import {
-  getCommentsByCursor,
-  getGetCommentsByCursorQueryKey,
-} from '@/generated/api/endpoints/freeboard-comment/freeboard-comment';
 import type { FreeboardCommentSummary } from '@/generated/api/models';
 import { InfiniteScroll } from '@/components/infiniteScrolls/InfiniteScroll';
 import CommentItem from './CommentItem';
 import Skeleton from '@/components/loadings/Skeleton';
 import { cn } from '@/utils/cn';
 import { formatCappedCount } from '@/utils/formatCount';
+import {
+  getFreeboardCommentsByCursor,
+  getGetFreeboardCommentsByCursorQueryKey,
+} from '@/generated/api/endpoints/freeboard-comment/freeboard-comment';
 
 interface CommentListProps {
   postId: number;
+  initialCount?: number;
 }
 
-/**
- * 댓글 리스트
- * TODO: 백엔드 댓글 총 개수 제공 시 헤더에 추가 예정
- */
-export default function CommentList({ postId }: CommentListProps) {
+export default function CommentList({
+  postId,
+  initialCount,
+}: CommentListProps) {
   const {
     data,
     fetchNextPage,
@@ -31,9 +31,9 @@ export default function CommentList({ postId }: CommentListProps) {
     error,
     refetch,
   } = useInfiniteQuery({
-    queryKey: getGetCommentsByCursorQueryKey(postId),
+    queryKey: getGetFreeboardCommentsByCursorQueryKey(postId),
     queryFn: ({ pageParam, signal }) =>
-      getCommentsByCursor(
+      getFreeboardCommentsByCursor(
         postId,
         { cursor: pageParam, size: 10, sort: 'LATEST' },
         signal,
@@ -43,18 +43,13 @@ export default function CommentList({ postId }: CommentListProps) {
       lastPage.nextCursor ? lastPage.nextCursor : undefined,
   });
 
-  // 페이지 단위로 내려오는 comments를
-  // 1. 모두 합치고(flatten)
-  // 2. key로 쓸 수 있도록 commentId가 확실한 항목만 남김
-  // 3. data가 바뀔 때에만 재계산(성능)
   const comments = useMemo<
     Array<FreeboardCommentSummary & { commentId: number }>
   >(() => {
     const allPages = data?.pages ?? [];
     const allComments = allPages.flatMap(
       (page) => page.comments ?? [],
     );
-
     return allComments.filter(
       (
         comment,
@@ -63,6 +58,13 @@ export default function CommentList({ postId }: CommentListProps) {
     );
   }, [data]);
 
+  const latestTotal =
+    data?.pages && data.pages.length > 0
+      ? data.pages[data.pages.length - 1]?.total
+      : undefined;
+
+  const headerCount = latestTotal ?? initialCount ?? comments.length;
+
   return (
     <section aria-label="댓글 섹션" className="flex-1">
       <h2 id="comments-heading" className="sr-only">
@@ -71,7 +73,7 @@ export default function CommentList({ postId }: CommentListProps) {
       <p className="pb-2" aria-live="polite">
         댓글
         <span className="text-soso-600 pl-1 font-medium">
-          {formatCappedCount(comments.length)}
+          {formatCappedCount(headerCount)}
         </span>
         개
       </p>

apps/web/src/app/main/community/freeboard/[freeboardId]/components/FreeboardDetail.tsx

@@ -5,128 +5,87 @@ import ImageSlider from '@/components/ImageSlider';
 import { UserProfile } from './UserProfile';
 import { UserTypeBadge } from './UserTypeBadge';
 import { relativeTime } from '@/utils/relativeTime';
-import { getGetPostQueryOptions } from '@/generated/api/endpoints/freeboard/freeboard';
 import type { FreeboardDetailResponse } from '@/generated/api/models';
 import LikeButtonPost from './LikeButtonPost';
 import { CategoryChip } from '@/components/chips/CategoryChip';
 import { Category } from '../../../constants/categories';
-import {
-  QueryFunction,
-  useSuspenseQuery,
-} from '@tanstack/react-query';
 import { formatCappedCount } from '@/utils/formatCount';
 
-/** 자유게시판 게시글 상세 본문 */
+/**
+ * 자유 게시판 게시글 상세 컴포넌트
+ *
+ * @param post 게시글 상세 데이터
+ */
 export default function FreeboardDetail({
-  postId,
+  post,
 }: {
-  postId: number;
+  post: FreeboardDetailResponse;
 }) {
-  // 1) orval이 만든 옵션 팩토리에서 queryKey/queryFn 받기
-  const { queryKey, queryFn } =
-    getGetPostQueryOptions<FreeboardDetailResponse>(postId);
-
-  // 2) Suspense 전용 훅 사용 (로딩은 상위 <Suspense fallback>이 담당)
-  const { data: post } = useSuspenseQuery({
-    queryKey,
-    queryFn: queryFn as QueryFunction<FreeboardDetailResponse>,
-    staleTime: 1000 * 60 * 3,
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-  });
-
-  // 여기부터는 post가 보장됨 (optional chaining 남발 X)
-  const author = post.author;
-  const images = post.images ?? [];
-  const imagesUrl = images.map((image) => image.imageUrl);
-  const viewCount = post.viewCount ?? 0;
-  const category = post.category ?? '';
-  const title = post.title ?? '';
-  const content = post.content ?? '';
-  const createdAt = post.createdAt ?? '';
-
-  const hasAddress = Boolean(author?.address);
-  const hasTime = Boolean(createdAt);
-  const hasMetaInfo = hasAddress || hasTime;
+  const { author } = post;
 
   return (
     <div className="p-5 border-b border-neutral-0">
       {/* 카테고리 */}
-      {category && (
-        <div className="flex items-center gap-1 pb-2">
-          <CategoryChip category={category as Category} />
-        </div>
-      )}
+      <div className="flex items-center gap-1 pb-2">
+        <CategoryChip
+          category={post.category as unknown as Category}
+        />
+      </div>
 
-      {/* 작성자 정보 */}
+      {/* 작성자 */}
       <UserProfile className="items-start pb-6">
         <UserProfile.Left>
           <UserProfile.Avatar
-            url={author?.profileImageUrl}
+            url={author.profileImageUrl}
             size={45}
-            alt={`${author?.nickname ?? '사용자'}의 프로필 이미지`}
+            alt={`${author.nickname}의 프로필 이미지`}
           />
         </UserProfile.Left>
 
         <UserProfile.Right>
           <UserProfile.Name
-            nickname={author?.nickname ?? ''}
-            userType={
-              author?.userType && (
-                <UserTypeBadge type={author.userType} />
-              )
-            }
+            nickname={author.nickname}
+            userType={<UserTypeBadge type={author.userType} />}
           />
-
-          {hasMetaInfo && (
-            <UserProfile.SubContents>
-              <div className="text-input2 text-neutral-500">
-                {hasAddress && <span>{author?.address}</span>}
-                {hasAddress && hasTime && (
-                  <span className="mx-1">·</span>
-                )}
-                {hasTime && (
-                  <span suppressHydrationWarning>
-                    {relativeTime(createdAt)}
-                  </span>
-                )}
-              </div>
-            </UserProfile.SubContents>
-          )}
+          <UserProfile.SubContents>
+            <div className="text-input2 text-neutral-500">
+              <span>{author.address}</span>
+              <span className="mx-1">·</span>
+              <span>{relativeTime(post.createdAt)}</span>
+            </div>
+          </UserProfile.SubContents>
         </UserProfile.Right>
       </UserProfile>
 
       {/* 본문 */}
       <div className="flex flex-col space-y-2 pb-6">
-        <h1 className="text-2xl font-bold">Q. {title}</h1>
+        <h1 className="text-2xl font-bold">Q. {post.title}</h1>
 
-        {images.length > 0 && (
+        {post.images.length > 0 && (
           <ImageSlider
-            images={imagesUrl}
+            images={post.images.map((img) => img.imageUrl)}
             className="w-full min-h-[200px]"
           />
         )}
 
-        {content && (
-          <p className="text-textBox text-neutral-1000">{content}</p>
+        {post.content && (
+          <p className="text-textBox text-neutral-1000">
+            {post.content}
+          </p>
         )}
       </div>
-      {/* 하단 좋아요 + 조회수 */}
+
+      {/* 하단 */}
       <div className="flex justify-between items-center">
         <LikeButtonPost
-          postId={postId}
-          isLiked={post?.isLiked ?? false}
-          likeCount={post?.likeCount ?? 0}
+          postId={post.postId}
+          initialLiked={post.isLiked}
+          initialLikeCount={post.likeCount}
         />
-
         <div className="flex items-center gap-1.5">
           <Eye className="inline w-6 h-6 text-neutral-200" />
-          <span
-            suppressHydrationWarning
-            className="text-neutral-500 text-input2"
-          >
-            {formatCappedCount(viewCount)}
+          <span className="text-neutral-500 text-input2">
+            {formatCappedCount(post.viewCount)}
           </span>
         </div>
       </div>