어드민 글쓰기 페이지와 API 구현

🤖 1562 in / 701 out / 2263 total tokens

블로그 관리자용 글 작성 페이지를 만들었다. 마크다운 에디터, 파일 업로드, 미리보기까지 한 번에 처리하도록.

글쓰기 페이지(/admin/posts/new)는 클라이언트 컴포넌트로 구현했다. 제목, 카테고리, 본문을 입력받고 마크다운 파일 업로드도 지원한다. 미리보기 토글 버튼으로 작성 중인 글을 렌더링된 형태로 확인 가능하다.

API는 두 개 추가했다. POST /api/admin/posts는 세션 검증 후 DB에 글을 저장하고 경로 리밸리데이션까지 처리. POST /api/admin/posts/preview는 작성 중인 마크다운을 HTML로 변환해 반환한다.

마크다운 파싱을 위해 unified 생태계 의존성을 추가했다. remark-parse → remark-rehype → rehype-stringify 파이프라인으로 변환.

// 미리보기 API의 핵심 파이프라인
const processor = unified()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkRehype)
  .use(rehypeStringify);
 
const result = await processor.process(content);
return NextResponse.json({ html: String(result) });

기존 posts 목록 페이지에 새 글 작성 버튼(Plus 아이콘)도 추가했다.

미리보기 API는 클라이언트에서 호출할 때 디바운싱 처리 필요. 매 입력마다 API 치면 비효율적이다.

next.js markdown admin unified