기존 /docs는 정적 기술 문서 탐색 예제이며, /cms는 mock API로 글을
생성·수정하는 로그인 필요 편집 워크스페이스다.
| 경로 | 화면 |
|---|---|
/cms |
글 목록, 검색, 카테고리·태그·게시 상태 필터 |
/cms/new |
새 글 작성, 마크다운 미리보기 |
/cms/$postId |
글 상세, 분류 및 게시 상태 |
/cms/$postId/edit |
기존 글 수정 및 초안/게시 상태 변경 |
제목·카테고리·본문은 필수다. 태그는 쉼표로 구분하며 중복을 제거한다. 태그는 최대 10개, 각 30자이며 본문은 최대 30,000자다. 저장 중 중복 제출을 막고 저장 실패 시 입력 내용과 오류를 보여준다. 저장이 성공하면 상세로 이동하고 목록/상세 캐시를 갱신한다. 페이지를 나가거나 새로고침하면 저장하지 않은 입력은 유지되지 않는다.
목록의 q, category, tag, status는 URL search다. 전체 목록을
조회한 뒤 필터링하며, 결과가 없으면 필터 초기화를 제공한다.
조회는 route loader와 화면에서 같은 query options를 사용한다.
제목(#~###, 본문에서는 h2로 렌더링), 굵은 글씨, 인라인 코드,
삼중 백틱 코드 블록, 순서 있는/없는 목록, 인용, 링크를 지원한다.
CommonMark 전체 구현은 아니며 표·중첩 목록·이미지·HTML은 해석하지 않는다.
원시 HTML은 React 텍스트로 표시한다. 링크는 HTTP(S)와 /docs 같은
로컬 절대 경로만 허용하고, javascript:, data:, 프로토콜 상대 경로와
역슬래시가 포함된 로컬 경로는 링크로 만들지 않는다.
GET /api/cms/posts: 글 목록.GET /api/cms/posts/:id: 글 상세. 없는 ID는 404.POST /api/cms/posts: 글 생성. 성공 201.PUT /api/cms/posts/:id: 글 수정. 성공 200.- 유효하지 않은 입력은 400이며 표준 오류 본문과 trace ID를 반환한다.
features/cms가 schema, API, queries, editor, renderer를 소유한다.
mocks/cms-handlers.ts가 메모리 데이터를 관리하며 테스트마다 초기화한다.
실제 공개 게시·권한 관리·파일 저장·서버 영속화는 이 예제에 포함되지 않는다.
게시 상태는 예제 메타데이터이며 모든 CMS 경로는 로그인 뒤에 있다.
pnpm exec vitest run src/features/cms는 입력/응답 검증, 작성·수정,
필터와 오류 복구, 마크다운 안전성을 확인한다.
pnpm exec playwright test e2e/cms.e2e.ts는 브라우저에서 작성부터
게시 상태 변경과 필터링까지 검증한다. 마크다운 렌더러의 시각적 예제는
Storybook Features/CMS/Markdown에서 볼 수 있다.