Skip to content

feat(web): 공지 본문 Markdown 렌더링 지원#31

Merged
chlwjddls0923 merged 1 commit into
mainfrom
choi
May 7, 2026
Merged

feat(web): 공지 본문 Markdown 렌더링 지원#31
chlwjddls0923 merged 1 commit into
mainfrom
choi

Conversation

@chlwjddls0923
Copy link
Copy Markdown
Contributor

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-none
  • components/admin/NoticeForm.tsx:
    • 라벨 카피 "Markdown 지원 예정" → "Markdown 지원"
    • placeholder 에 마크다운 예시 삽입 (## 제목, - 리스트, [링크])

동작하는 마크다운 문법

입력 출력
# 제목 큰 제목
## 부제목 중간 제목
**굵게** 굵게
*기울임* 기울임
- 리스트 불릿
1. 항목 번호 리스트
[링크](url) 링크
> 인용 인용 박스
`코드` 인라인 코드

Test plan

  • 관리자 → 공지 작성 → placeholder 에 마크다운 예시 노출 확인
  • 본문에 ## 제목 + - 리스트 + **굵게** 입력 후 등록
  • /notice/<id> 상세 페이지에서 헤딩이 큰 글씨, 리스트가 불릿,
    굵게가 굵게 렌더되는지
  • 외부 링크가 클릭 가능한 <a> 로 변환되는지
  • 단순 텍스트 (마크다운 미사용) 도 깨지지 않고 렌더되는지

영향 범위

  • 신규 의존성 추가 — pnpm install --frozen-lockfile 시 lockfile
    자동 반영
  • DB 마이그레이션 없음
  • 기존 공지 데이터 영향 없음 (plain text 도 그대로 렌더됨)

react-markdown + @tailwindcss/typography 도입. 공지 상세 페이지에서
헤딩, 굵게, 리스트, 링크 등이 prose 스타일로 렌더.

- react-markdown ^10.1.0 (런타임)
- @tailwindcss/typography ^0.5.19 (devDep, prose 클래스 제공)
- NoticeForm 라벨 정정 + 마크다운 예시 placeholder 추가
@chlwjddls0923 chlwjddls0923 merged commit 84ba27e into main May 7, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant