'use client'; import { useQuery } from '@tanstack/react-query'; import { getPost } from '@/api/posts'; import { getProfile } from '@/api/profile'; import MarkdownRenderer from '@/components/post/MarkdownRenderer'; import CommentList from '@/components/comment/CommentList'; import TOC from '@/components/post/TOC'; import { Loader2, Calendar, Eye, Folder, User, ArrowLeft, AlertCircle, ChevronLeft, ChevronRight } from 'lucide-react'; import { useRouter } from 'next/navigation'; import Link from 'next/link'; import Image from 'next/image'; import { Post } from '@/types'; // 타입 임포트 interface PostDetailClientProps { slug: string; initialPost: Post; // 🌟 서버에서 넘겨받는 초기 데이터 (필수) } const getPostErrorInfo = (error: unknown) => { if (typeof error === 'object' && error !== null && 'response' in error) { const response = (error as { response?: { status?: number; data?: { message?: string } } }).response; return { status: response?.status, message: response?.data?.message, }; } return { status: undefined, message: error instanceof Error ? error.message : undefined, }; }; export default function PostDetailClient({ slug, initialPost }: PostDetailClientProps) { const router = useRouter(); // 1. 게시글 상세 조회 const { data: post, isLoading: isPostLoading, error } = useQuery({ queryKey: ['post', slug], queryFn: () => getPost(slug), enabled: !!slug, // 🌟 핵심: 서버에서 가져온 데이터를 초기값으로 사용하여 즉시 렌더링 (Hydration) initialData: initialPost, }); const { data: profile } = useQuery({ queryKey: ['profile'], queryFn: getProfile, }); // 🌟 Loading 상태 처리를 제거하거나 조건을 완화합니다. // initialData가 있으면 isLoading은 false가 되므로 바로 아래 컨텐츠가 렌더링됩니다. if (isPostLoading) { return (
); } // 에러 처리 if (error || !post) { const { status: errorStatus, message } = getPostErrorInfo(error); const errorMessage = message || '게시글을 찾을 수 없습니다.'; const isAuthError = errorStatus === 401 || errorStatus === 403; return (

{isAuthError ? '접근 권한이 없습니다.' : '게시글을 불러올 수 없습니다.'}

{isAuthError ? '로그인이 필요하거나 비공개 게시글일 수 있습니다.' : errorMessage}

); } // 백엔드 데이터 사용 (이전글/다음글) const prevPost = post.prevPost; const nextPost = post.nextPost; return (
목록으로
{post.categoryName || '미분류'}

{post.title}

{profile?.imageUrl ? ( 작성자 ) : (
)} {profile?.name || 'Dev Park'}
{new Date(post.createdAt).toLocaleDateString('ko-KR')}
조회 {post.viewCount.toLocaleString()}
); }