'use client'; import { useQuery } from '@tanstack/react-query'; import { AlertCircle, ArrowLeft, Calendar, ChevronLeft, ChevronRight, Loader2, User } from 'lucide-react'; import Image from 'next/image'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; import { getPost } from '@/api/posts'; import { getProfile } from '@/api/profile'; import CommentList from '@/components/comment/CommentList'; import MarkdownRenderer from '@/components/post/MarkdownRenderer'; import TOC from '@/components/post/TOC'; import StatusBadge from '@/components/ui/StatusBadge'; import Surface from '@/components/ui/Surface'; import WindowSurface from '@/components/ui/WindowSurface'; 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(); const { data: post, isLoading: isPostLoading, error } = useQuery({ queryKey: ['post', slug], queryFn: () => getPost(slug), enabled: !!slug, initialData: initialPost, }); const { data: profile } = useQuery({ queryKey: ['profile'], queryFn: getProfile, }); 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')}
); }