Next.js 블로그 만들기 — TOC와 커서 효과로 디테일 살리기

pnpm add rehype-slug

import rehypeSlug from 'rehype-slug'
 
// rehype 플러그인에 추가
rehypePlugins: [
  rehypeSlug,  // heading에 자동으로 id 부여
  [rehypePrettyCode, { ... }],
],

export interface TocItem {
  readonly id: string
  readonly text: string
  readonly level: number
}
 
export function extractToc(markdown: string): readonly TocItem[] {
  const headingRegex = /^(#{2,3})\s+(.+)$/gm
  const items: TocItem[] = []
  let match
 
  while ((match = headingRegex.exec(markdown)) !== null) {
    const level = match[1].length
    const text = match[2].trim()
    const id = text
      .toLowerCase()
      .replace(/[^\w\s가-힣-]/g, '')
      .replace(/\s+/g, '-')
 
    items.push({ id, text, level })
  }
 
  return items
}

'use client'
 
import { useEffect, useRef, useState } from 'react'
import type { TocItem } from '@/lib/toc'
 
export default function TableOfContents({ items }: { items: readonly TocItem[] }) {
  const [activeId, setActiveId] = useState('')
  const observerRef = useRef<IntersectionObserver | null>(null)
 
  useEffect(() => {
    const headings = items
      .map((item) => document.getElementById(item.id))
      .filter(Boolean) as HTMLElement[]
 
    if (headings.length === 0) return
 
    observerRef.current = new IntersectionObserver(
      (entries) => {
        const visibleEntries = entries.filter((e) => e.isIntersecting)
        if (visibleEntries.length > 0) {
          setActiveId(visibleEntries[0].target.id)
        }
      },
      {
        // 상단 0% ~ 하단 75% 영역에서 감지
        rootMargin: '0px 0px -75% 0px',
        threshold: 0,
      }
    )
 
    headings.forEach((heading) =>
      observerRef.current?.observe(heading)
    )
 
    return () => observerRef.current?.disconnect()
  }, [items])
 
  // ...렌더링 로직
}

<nav className="fixed left-[calc(50%+24rem+1rem)]
  top-20 hidden w-52 xl:block">

return (
  <nav className="fixed left-[calc(50%+24rem+1rem)]
    top-20 hidden w-52 xl:block">
    <p className="mb-3 text-xs font-semibold uppercase
      tracking-wider text-text-tertiary">
      On this page
    </p>
    <ul className="space-y-1 border-l border-border">
      {items.map((item) => {
        const isActive = activeId === item.id
        return (
          <li key={item.id}>
            <a
              href={`#${item.id}`}
              onClick={(e) => handleClick(e, item.id)}
              className={`block border-l-2 py-1 text-sm
                transition-colors
                ${item.level === 3 ? 'pl-6' : 'pl-3'}
                ${isActive
                  ? 'border-accent font-medium text-accent'
                  : 'border-transparent text-text-secondary'
                }`}
            >
              {item.text}
            </a>
          </li>
        )
      })}
    </ul>
  </nav>
)

'use client'
 
import { useEffect, useRef } from 'react'
 
const TRAIL_COUNT = 5
const LERP_BASE = 0.15
 
export default function CursorEffect() {
  const canvasRef = useRef<HTMLCanvasElement>(null)
 
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
 
    const ctx = canvas.getContext('2d')
    if (!ctx) return
 
    let mouseX = -100
    let mouseY = -100
 
    const trails = Array.from({ length: TRAIL_COUNT }, () => ({
      x: -100, y: -100,
    }))
 
    const handleMouseMove = (e: MouseEvent) => {
      mouseX = e.clientX
      mouseY = e.clientY
    }
 
    const draw = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
 
      for (let i = 0; i < TRAIL_COUNT; i++) {
        const target = i === 0
          ? { x: mouseX, y: mouseY }
          : trails[i - 1]
 
        // lerp — 뒤쪽 트레일일수록 더 느리게 따라감
        const lerp = LERP_BASE / (1 + i * 0.4)
        trails[i] = {
          x: trails[i].x + (target.x - trails[i].x) * lerp,
          y: trails[i].y + (target.y - trails[i].y) * lerp,
        }
 
        const radius = 12 + i * 8
        const opacity = 0.12 - i * 0.02
 
        const gradient = ctx.createRadialGradient(
          trails[i].x, trails[i].y, 0,
          trails[i].x, trails[i].y, radius
        )
        gradient.addColorStop(0, `rgba(18, 184, 134, ${opacity})`)
        gradient.addColorStop(1, 'rgba(18, 184, 134, 0)')
 
        ctx.beginPath()
        ctx.arc(trails[i].x, trails[i].y, radius, 0, Math.PI * 2)
        ctx.fillStyle = gradient
        ctx.fill()
      }
 
      requestAnimationFrame(draw)
    }
 
    // ...이벤트 등록, 리사이즈 핸들러
    requestAnimationFrame(draw)
  }, [])
 
  return (
    <canvas
      ref={canvasRef}
      className="pointer-events-none fixed inset-0 z-[9999]"
    />
  )
}

const lerp = LERP_BASE / (1 + i * 0.4)
trails[i].x = trails[i].x + (target.x - trails[i].x) * lerp

// Before
<header className="sticky top-0 ...">
 
// After
<header className="fixed top-0 right-0 left-0 ...">

html {
  scrollbar-gutter: stable;
}

name: Deploy to GitHub Pages
 
on:
  push:
    branches: [main]
 
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
      - run: pnpm install --frozen-lockfile
      - run: pnpm build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: out
 
  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
    steps:
      - uses: actions/deploy-pages@v4