feat(web): 공지 본문 Markdown 렌더링 지원#31
Merged
Merged
Conversation
react-markdown + @tailwindcss/typography 도입. 공지 상세 페이지에서 헤딩, 굵게, 리스트, 링크 등이 prose 스타일로 렌더. - react-markdown ^10.1.0 (런타임) - @tailwindcss/typography ^0.5.19 (devDep, prose 클래스 제공) - NoticeForm 라벨 정정 + 마크다운 예시 placeholder 추가
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
이전 PR 에서 공지사항 게시판을 도입했지만 본문 렌더링은 MVP 로
plain text + 줄바꿈 보존 (
whitespace-pre-wrap) 만 지원했습니다.이제 공지 작성자가 마크다운 문법을 그대로 쓸 수 있도록 렌더링을
완성합니다.
변경 사항
새 의존성
react-markdown^10.1.0 — 마크다운 → JSX 렌더 (런타임)@tailwindcss/typography^0.5.19 —prose클래스로 헤딩/리스트/링크/인용 등을 자동 스타일링 (devDep)
코드
tailwind.config.ts— typography 플러그인 등록app/notice/[id]/page.tsx—<div whitespace-pre-wrap>→<ReactMarkdown>+prose prose-sm prose-ink max-w-nonecomponents/admin/NoticeForm.tsx:동작하는 마크다운 문법
# 제목## 부제목**굵게***기울임*- 리스트1. 항목[링크](url)> 인용`코드`Test plan
## 제목+- 리스트+**굵게**입력 후 등록/notice/<id>상세 페이지에서 헤딩이 큰 글씨, 리스트가 불릿,굵게가 굵게 렌더되는지
<a>로 변환되는지영향 범위
pnpm install --frozen-lockfile시 lockfile자동 반영