Skip to content

feat(editor): :name: shortcode -> emoticon 이미지 치환#658

Closed
seong-jin-jo wants to merge 1 commit into
developfrom
feat/emoticon-shortcode
Closed

feat(editor): :name: shortcode -> emoticon 이미지 치환#658
seong-jin-jo wants to merge 1 commit into
developfrom
feat/emoticon-shortcode

Conversation

@seong-jin-jo

@seong-jin-jo seong-jin-jo commented May 20, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

Summary

  • 본문에 박힌 :okay: 같은 텍스트 토큰을 MarkdownContent 렌더 시점에 사이트 캐릭터 이모티콘 <img>로 자동 치환합니다.
  • size variant 4단: :okay: (24px, 인라인 기본) / :okay_lg: (48) / :okay_xl: (96) / :okay_xxl: (150, 강조 단독 배치용).
  • 본문에는 텍스트 토큰만 저장되므로 backend LessonMarkdownPolicyService의 images/lesson-content/ whitelist + ResizedImage 등록 정책과 충돌하지 않습니다.
  • catalog 외 토큰(:foo: 등)은 텍스트 그대로 노출되어 XSS·오용 위험이 없습니다.

Why

  • 노션에서 작성된 학습 본문에 💡, 🔥, 🎉, 🤔, 😃, ✅, 🚀, 🎓 같은 emoji 마커가 풍부합니다. 이를 사이트 캐릭터 이모티콘으로 풀어 학습 본문의 톤·정체성을 일관화하기 위함입니다.
  • backend image policy를 손대지 않고 frontend-only로 끝나는 정책이라 dev/main 흐름을 가볍게 유지할 수 있습니다.

Changes

  • src/components/common/ui/editor/emoticon-shortcode.ts (신규): EMOTICON_CATALOG (20종), EMOTICON_SIZE_CLASS (4단), replaceEmoticonShortcodes.
  • src/components/common/ui/editor/markdown-content.tsx: replaceStandaloneYouTubeLinksWithEmbeds 다음에 replaceEmoticonShortcodes 호출 + [&_img.emoticon-inline / .emoticon-lg / .emoticon-xl / .emoticon-xxl] CSS 추가.
  • src/components/common/ui/editor/markdown-sanitizer.ts: ALLOWED_URI_REGEXP에 \/emoticon\/ prefix 허용.
  • public/emoticon/*.png (20종): 캐릭터 이모티콘 정적 자산.

영향 범위

  • MarkdownContent 사용처 전부: 레슨 본문, 커뮤니티 게시글, 멘토링 소개 등 사이트 전반의 rich-text 렌더링.
  • 기존 본문에 :name: 패턴이 우연히 포함되어 있을 가능성은 낮으나, catalog에 없는 토큰은 텍스트 그대로 보이므로 회귀 위험은 최소화됩니다.

Test plan

  • 로컬 dev에서 :okay: :okay_lg: :okay_xl: :okay_xxl: 입력 → 미리보기에 각 사이즈 이미지가 표시되는지 확인
  • catalog 외 토큰(:foo:)이 raw 텍스트로 그대로 보이는지 확인
  • sanitize 후 XSS 시도(<script>:okay:</script>)가 차단되는지 확인
  • 운영 lesson 본문(L01~L08)에 이미 :aha_xxl: 등 shortcode가 들어가 있어, 머지·배포 후 사이트에서 이미지로 자동 렌더되는지 확인

🤖 Generated with Claude Code

Summary by CodeRabbit

  • 새로운 기능
    • 이모티콘 단축코드(:okay: 형식)가 마크다운 콘텐츠에서 실제 이미지로 자동 변환됩니다.
    • 여러 이모티콘 크기 옵션(_lg, _xl, _xxl)을 지원합니다.
    • 이모티콘 이미지는 보안 검증을 통해 안전하게 렌더링됩니다.

Review Change Stack

@seong-jin-jo @claude
[emoticon-shortcode] feat : feat(editor): :name: shortcode를 캐릭터 이모티콘 …
d709554 
…이미지로 치환

- markdown-content.tsx의 sanitize 직전 단계에 replaceEmoticonShortcodes 추가
- :okay:, :aha_lg:, :okay_xxl: 등 size variant 4단 지원 (24/48/96/150px)
- markdown-sanitizer.ts ALLOWED_URI_REGEXP에 /emoticon/ prefix 허용
- public/emoticon/에 캐릭터 자산 20종 추가
- catalog 외 토큰은 텍스트로 그대로 노출 — XSS 안전

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vercel

vercel Bot commented May 20, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
study-platform-client-dev Building Building Preview, Comment May 20, 2026 6:24pm

@coderabbitai

coderabbitai Bot commented May 20, 2026 •
edited
Loading

Copy link
Copy Markdown

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: 22990334-9926-424d-b9e2-cd7cbf6ae0ab

📥 Commits

Reviewing files that changed from the base of the PR and between d5c01d6 and d709554.

⛔ Files ignored due to path filters (20)
  • public/emoticon/Euang.png is excluded by !**/*.png
  • public/emoticon/Question.png is excluded by !**/*.png
  • public/emoticon/aha.png is excluded by !**/*.png
  • public/emoticon/angry.png is excluded by !**/*.png
  • public/emoticon/best.png is excluded by !**/*.png
  • public/emoticon/coffee.png is excluded by !**/*.png
  • public/emoticon/crying.png is excluded by !**/*.png
  • public/emoticon/difficult.png is excluded by !**/*.png
  • public/emoticon/expect.png is excluded by !**/*.png
  • public/emoticon/happy.png is excluded by !**/*.png
  • public/emoticon/hard.png is excluded by !**/*.png
  • public/emoticon/hiding.png is excluded by !**/*.png
  • public/emoticon/hustle.png is excluded by !**/*.png
  • public/emoticon/joyful.png is excluded by !**/*.png
  • public/emoticon/medallion.png is excluded by !**/*.png
  • public/emoticon/okay.png is excluded by !**/*.png
  • public/emoticon/study.png is excluded by !**/*.png
  • public/emoticon/surprised.png is excluded by !**/*.png
  • public/emoticon/welcome.png is excluded by !**/*.png
  • public/emoticon/what.png is excluded by !**/*.png
📒 Files selected for processing (3)
  • src/components/common/ui/editor/emoticon-shortcode.ts
  • src/components/common/ui/editor/markdown-content.tsx
  • src/components/common/ui/editor/markdown-sanitizer.ts
📝 Walkthrough

Walkthrough

사이트 공용 이모티콘을 마크다운 콘텐츠 내 :token: 형태 단축코드에서 <img> 태그로 자동 치환하는 기능을 추가합니다. 새 유틸이 카탈로그 기반으로 단축코드를 검출·변환하며, 마크다운 렌더링 파이프라인에 통합되고, CSS 스타일과 URI 보안 규칙으로 완성됩니다.

Changes

이모티콘 단축코드 렌더링

Layer / File(s) Summary
이모티콘 단축코드 치환 유틸
src/components/common/ui/editor/emoticon-shortcode.ts		 EMOTICON_CATALOG는 토큰명을 public/emoticon/ 하위 이미지로 매핑하고, parseEmoticonToken()은 크기 접미사(_lg, _xl, _xxl)를 분리하며, replaceEmoticonShortcodes()는 정규식으로 :token: 형태를 감지하여 카탈로그 기반으로 크기 클래스를 적용한 <img> 태그로 치환합니다.
마크다운 렌더링 파이프라인 통합 및 이모티콘 스타일링
src/components/common/ui/editor/markdown-content.tsx		 replaceEmoticonShortcodes 유틸을 import하고 유튜브 임베드 치환 이전 단계에 통합하여 콘텐츠 전처리 체인을 확장하며, emoticon-inline, emoticon-lg, emoticon-xl, emoticon-xxl 클래스에 대한 Tailwind 기반 크기/정렬/여백 강제 스타일을 마크다운 렌더 컨테이너 base 스타일에 추가합니다.
이모티콘 자산 URI 보안 허용
src/components/common/ui/editor/markdown-sanitizer.ts		 SANITIZE_OPTIONS의 ALLOWED_URI_REGEXP에 /emoticon/ 경로 패턴을 추가하여 마크다운 새니타이저가 생성된 이모티콘 <img> 태그 내 /emoticon/ 경로 URL을 허용하도록 업데이트합니다.

Possibly Related PRs

  • code-zero-to-one/study-platform-client#558: 마크다운 렌더링 파이프라인의 콘텐츠 전처리 단계에서 이전 PR은 YouTube 링크 임베드 치환을, 이번 PR은 이모티콘 단축코드 치환을 추가하며, 동일한 normalizedContentWithEmbeds 변환 체인의 상하류 관계를 가집니다.

Estimated Code Review Effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🐰 이모티콘이 춤을 추네요,
:okay: 에서 <img>로 변신!
카탈로그 매핑에 크기별 class,
마크다운 파이프라인 속으로 쏘옥—
보안 규칙까지 갖춘 완벽한 여정! 🎀✨

✨ 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

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

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

@seong-jin-jo seong-jin-jo mentioned this pull request May 20, 2026
Merged
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@seong-jin-jo