fix(class-lesson): lesson 상세에서 :name: shortcode 치환 누락 보강

[seong-jin-jo]

작업 내용

• MarkdownContentCore(lesson 상세 페이지가 쓰는 컴포넌트)에 replaceEmoticonShortcodes 호출 추가
• SANITIZE_OPTIONS.ALLOWED_URI_REGEXP에 /emoticon/ prefix 허용
• size variant CSS 4단(emoticon-inline / lg / xl / xxl) 추가

변경 이유

• 이전 PR #659는 MarkdownContent(에디터/미리보기용)에만 치환을 추가했음.
• 사이트의 lesson 상세 페이지 src/app/(class-lesson)/class/[slug]/lesson/[id]/page.tsx는 MarkdownContentCore 라는 별도 컴포넌트로 본문을 렌더링하기 때문에, 운영 사이트에서 :aha_xxl: 같은 토큰이 텍스트 그대로 노출되는 회귀가 발생.
• 같은 카탈로그(emoticon-shortcode.ts)를 공유해 동일하게 풀리도록 보강.

dev/QA 검증 evidence

• PR feat(editor): :name: shortcode -> emoticon 이미지 치환 #659 머지 후 운영 lesson 상세에서 raw 토큰이 그대로 노출되는 회귀 확인 — 본 PR로 수정 대상 확정.
• 로컬 dev에서 lesson 상세 페이지 spot check 권장 (배포 직전).

production 영향

• 영향 범위: lesson 상세 페이지(/class/{slug}/lesson/{id})와 MarkdownContentCore를 쓰는 다른 화면.
• 카탈로그 미스 토큰은 텍스트 그대로 노출되어 안전. backend/DB 정책·스키마 변경 없음.

release contract 영향

• backend prod release / version management / release record workflow와 무관.
• frontend-only 회귀 수정.

검증 방법

• 운영 https://www.zeroone.it.kr/class/vibe-intro-claude-code/lesson/{1~8} 접속 → 각 lesson 본문의 :aha_xxl:, :okay_xxl:, :joyful_xxl:, :medallion_xxl:, :expect_xxl:, :hustle_xxl:, :what_xxl: 가 150px 캐릭터 이미지로 정상 렌더되는지 확인

브랜치 정보

• base: main
• head: feat/emoticon-shortcode-core
• 기준 range: origin/main..HEAD (1 commit)

롤백 계획

• 회귀 발견 시 본 PR의 revert PR 생성 → main 머지로 즉시 원복.
• 본문 데이터 롤백 필요 없음(shortcode가 풀리지 않을 뿐 raw 텍스트로 노출됨).

known risk / not-tested

• MarkdownContent와 MarkdownContentCore가 별도 컴포넌트로 존재해 같은 정책을 두 군데 유지하는 구조가 됨. 향후 두 컴포넌트 통합 또는 공통 치환 유틸 추출을 검토 권장.

🤖 Generated with Claude Code

Summary by CodeRabbit

새로운 기능

• 마크다운 콘텐츠에서 이모티콘 쇼트코드를 적절하게 처리하고 표시하도록 지원 추가
• 이모티콘 리소스 URL이 콘텐츠 보안 필터링에서 차단되지 않도록 개선
• 마크다운 렌더링 시 이모티콘 이미지의 크기 및 표시 동작을 위한 스타일링 개선

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
study-platform-client-dev	Ready	Preview, Comment	May 20, 2026 7:25pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 932c2fbc-e79f-483c-84fd-7120c9379d49

📥 Commits

Reviewing files that changed from the base of the PR and between f191a6d and 0ab06d1.

📒 Files selected for processing (1)

• src/components/common/ui/rich-text/markdown-content-core.tsx

---

📝 Walkthrough

Walkthrough

마크다운 콘텐츠 렌더링 에서 이모티콘 쇼트코드 처리를 추가합니다. 함수를 import한 후 콘텐츠 변환 파이프라인에 통합하고, 해당 리소스 URL 차단을 해제한 뒤 CSS 스타일링을 적용합니다.

Changes

이모티콘 쇼트코드 처리 지원

Layer / File(s)	Summary
Emoticon transformation pipeline src/components/common/ui/rich-text/markdown-content-core.tsx	replaceEmoticonShortcodes import를 추가하고, YouTube 임베드 변환 후 이모티콘 쇼트코드를 순차적으로 치환하도록 contentWithEmbeds 생성 로직을 확장합니다.
Sanitization and styling for emoticons src/components/common/ui/rich-text/markdown-content-core.tsx	DOMPurify ALLOWED_URI_REGEXP에 /emoticon/ 경로를 추가하여 이모티콘 URL의 sanitize 차단을 해제하고, 마크다운 컨테이너의 img 요소에 대해 emoticon-inline, emoticon-lg, emoticon-xl, emoticon-xxl 클래스별 크기/정렬 CSS 유틸을 정의합니다.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• code-zero-to-one/study-platform-client#654: 동일한 파일의 markdown-content-core.tsx 렌더링 파이프라인(contentWithEmbeds 생성 및 sanitize 흐름)을 수정하여 이 PR의 이모티콘 로직과 코드 레벨로 연결됩니다.
• code-zero-to-one/study-platform-client#655: 같은 파일의 YouTube 임베드 변환 및 contentWithEmbeds 파이프라인을 수정하며, 이 PR이 그 파이프라인에 이모티콘 치환을 추가로 확장합니다.
• code-zero-to-one/study-platform-client#578: vibe-intro 레슨 페이지가 MarkdownContentCore로 데이터베이스 마크다운을 렌더링하기 시작했으며, 이 PR이 그 컴포넌트에 이모티콘 처리를 추가하므로 해당 PR의 렌더링 결과가 새로운 이모티콘 기능을 활용합니다.

Suggested labels

🐛 bug

Poem

🐰 토끼가 이모티콘 춤을 춘다면,
작은 텍스트가 빛나는 표정으로 변하고,
sanitize의 문이 열리며 CSS가 옷을 입혀주니,
마크다운 숲 속 이모티콘들이 기꺼이 모습을 드러낸다! ✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/emoticon-shortcode-core

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}