feat(og): MDX 본문에서 description 자동 추출

[jk-kim0]

Summary

• src/lib/extract-description.ts: MDX 본문에서 description 추출 유틸리티 추가
• src/app/[lang]/[[...mdxPath]]/page.tsx: frontmatter에 description이 없으면 본문에서 자동 추출
• src/pages/api/og.tsx: 하드코딩된 글자수 truncation 제거, CSS line-clamp로 최대 3줄 표시

Description 추출 규칙

1. Frontmatter (--- 사이) 제거
2. Import 문 제거
3. 모든 heading (#, ##, ### 등) 제거
4. JSX/HTML 태그 (<Callout>, <figure> 등) 제거
5. Markdown 이미지 (![alt](url)) 제거
6. Markdown 링크는 텍스트만 유지 ([text](url) → text)
7. Bold, Italic, Code 마커 제거하되 텍스트는 유지
8. 리스트 마커 (-, *, 1. 등) 제거
9. 첫 번째 의미있는 텍스트를 300자 이내로 추출

OG 이미지 변경사항

• 제목/설명의 하드코딩된 글자수 truncation 제거 (기존: 제목 50자, 설명 120자)
• CSS -webkit-line-clamp: 3으로 최대 3줄까지 표시하도록 변경
• 제목 영역 height: 240 → maxHeight: 240으로 변경

예시

입력 (MDX)

---
title: 'Access Control'
---

import { Callout } from 'nextra/components'

# Access Control

### Overview

Access Control 페이지에서 관리자는 사용자 또는 그룹에 데이터베이스 접근 권한을 직접 부여할 수 있습니다.

출력 (Description)

Access Control 페이지에서 관리자는 사용자 또는 그룹에 데이터베이스 접근 권한을 직접 부여할 수 있습니다.

Test plan

• 로컬에서 /ko/overview 페이지의 og:description 메타 태그 확인
• 로컬에서 /ko/administrator-manual/.../access-control 페이지 확인
• OG 이미지 API가 description을 포함하여 이미지 생성 확인
• Vercel Preview에서 OG 이미지 확인

Fixes #540

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
querypie-docs	Ready	Preview, Comment	Jan 25, 2026 6:33pm