# 6편. 블로그 프론트엔드와 마크다운 렌더링 ## 포스트 목록 페이지 서버 컴포넌트에서 직접 DB를 쿼리합니다. 별도 API 호출 없이 페이지가 렌더링됩니다. ```tsx // src/app/(blog)/posts/page.tsx import { prisma } from '@/lib/prisma' interface Props { searchParams: Promise<{ category?: string; tag?: string; page?: string }> } export default async function PostsPage({ searchParams }: Props) { const sp = await searchParams const page = parseInt(sp.page || '1') const take = 10 const where = { status: 'PUBLISHED', ...(sp.category && { category: { slug: sp.category } }), ...(sp.tag && { tags: { some: { tag: { slug: sp.tag } } } }), } const [posts, total] = await Promise.all([ prisma.post.findMany({ where, include: { author: true, category: true, tags: { include: { tag: true } }, _count: { select: { comments: true } } }, orderBy: [{ pinned: 'desc' }, { publishedAt: 'desc' }], take, skip: (page - 1) * take, }), prisma.post.count({ where }), ]) return } ``` ## 마크다운 렌더링 ```tsx // src/components/blog/PostContent.tsx import ReactMarkdown from 'react-markdown' import remarkGfm from 'remark-gfm' import rehypeHighlight from 'rehype-highlight' import rehypeSlug from 'rehype-slug' interface Props { content: string codeTheme?: string } export function PostContent({ content, codeTheme = 'github-dark' }: Props) { return ( <>

{content}

) } ``` ## 목차(TOC) 컴포넌트 ```tsx 'use client' import { useEffect, useState } from 'react' export function TableOfContents({ content }: { content: string }) { const [activeId, setActiveId] = useState('') useEffect(() => { const headings = document.querySelectorAll('.prose h1, .prose h2, .prose h3') const observer = new IntersectionObserver( entries => entries.forEach(e => { if (e.isIntersecting) setActiveId(e.target.id) }), { rootMargin: '-80px 0px -70% 0px' } ) headings.forEach(h => observer.observe(h)) return () => observer.disconnect() }, [content]) // 마크다운에서 헤딩 파싱 const items = content .split('\n') .filter(line => /^#{1,3} /.test(line)) .map(line => { const level = line.match(/^(#+)/)?.[1].length ?? 1 const text = line.replace(/^#+\s/, '') const id = text.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '') return { level, text, id } }) return ( ) } ``` ## 읽기 진행률 표시 ```tsx 'use client' import { useEffect, useState } from 'react' export function ReadingProgress() { const [progress, setProgress] = useState(0) useEffect(() => { const update = () => { const { scrollTop, scrollHeight, clientHeight } = document.documentElement setProgress((scrollTop / (scrollHeight - clientHeight)) * 100) } window.addEventListener('scroll', update, { passive: true }) return () => window.removeEventListener('scroll', update) }, []) return (

) } ``` ## 조회수 집계 서버 컴포넌트에서는 `cache`를 사용하고, 조회수는 별도 클라이언트 컴포넌트에서 처리합니다. ```tsx // src/components/blog/ViewTracker.tsx 'use client' import { useEffect } from 'react' export function ViewTracker({ postId }: { postId: string }) { useEffect(() => { fetch(`/api/posts/${postId}/view`, { method: 'POST' }) }, [postId]) return null } ``` ```ts // src/app/api/posts/[id]/view/route.ts export async function POST(req: Request, { params }) { await prisma.post.update({ where: { id: params.id }, data: { viewCount: { increment: 1 } }, }) return Response.json({ ok: true }) } ``` 다음 편에서는 검색, 카테고리, 태그 필터링 기능을 완성합니다.

모든 포스트

6편. 블로그 프론트엔드와 마크다운 렌더링

모든 포스트

6편. 블로그 프론트엔드와 마크다운 렌더링