[cherry-pick] 빌더 피드/QnA/레슨 QA 버그 수정 및 댓글 기능 추가

[HA-SEUNG-JEONG]

개요

빌더 피드 코드블록 렌더링 오류, QnA XSS 취약점, 레슨 사이드바 sticky 동작 불량 등 QA에서 발견된 버그 다수를 수정하고, 빌더 피드 댓글 대댓글 UI와 ⋮ 메뉴를 추가한다. 필터 칩 디자인을 Figma와 일치시키고, 운영자 PICK 칩 조건부 노출, R2 이미지 도메인 허용 등 프로덕션 안정성 개선도 포함한다.

원본 PR

• develop PR 빌더 피드 QA 수정 및 댓글 기능 추가 #662: 빌더 피드 QA 수정 및 댓글 기능 추가 #662
• develop PR QA 수정 — 보안/버그/디자인 개선 #663: QA 수정 — 보안/버그/디자인 개선 #663
• 원본 브랜치: fix/qa

Cherry-pick 대상 커밋

PR #662 (16커밋)

• 395a524 — QA 버그 12종 일괄 수정 (GNB 링크, 레슨 스탬프, S3 FormData, 마크다운 붙여넣기 등)
• d3c935f — 필터 칩 inactive 색상 Figma 정확히 맞춤 (#999)
• 4794030 — 피드 필터 칩 Figma 정합 — 운영자 PICK 제거 및 radius 수정
• 19b3fcf — 운영자 PICK 피드 존재 시에만 칩 조건부 노출
• 4dda69a — useAuth roleIds 타입 오류 수정
• 795e4ff — 돌아보기 제출 이미지/링크가 빌더 피드 상세에서 표시되지 않던 버그 수정
• cb892bf — 빌더 피드 댓글 대댓글 UI 및 ⋮ 메뉴 추가
• 59b11ea — QnA 답변 평문 콘텐츠 줄바꿈 미적용 버그 수정
• 40e6455 — 빌더 피드 코드블록 렌더링 버그 수정 — TipTap HTML을 marked 없이 직접 sanitize
• a8cfd7d — 빌더 피드 상세 페이지 닉네임-뱃지 간격 적용
• 9d7d891 — 마지막 레슨 제출 CTA를 완주 축하 페이지 이동 버튼으로 변경
• 027acda — lucide-react 아이콘 대체 금지 룰 및 답변완료 아이콘 에셋 추가
• d42935b — QnA 리스트 배지 Figma 정합 — pill border, 답변완료 그린 배지 + 아이콘 적용
• 88ab194 — R2 remotePatterns 와일드카드 적용 및 QnA 배지 색상 토큰 추가
• c33c248 — QnA XSS sanitize 누락, 운영진 role 판별 오류, 필터 상태 불일치 수정
• 5e00794 — dangerouslySetInnerHTML biome-ignore 주석 제거

PR #663 (7커밋)

• 64122c0 — 레슨 상세 QnA 카드 독립 sticky — 피드 카드 스크롤 시에도 항상 고정
• 9ec32b7 — 로드맵 row key를 인덱스 대신 lessonId로 교체
• fbe02c4 — 레슨 사이드바 두 카드 모두 sticky — overflow-y-auto로 뷰포트 초과 시 내부 스크롤
• b11e697 — sticky 사이드바 overflow-y-auto 분리로 고정 동작 수정
• 377e0ec — 레슨 페이지 우측 사이드바 및 탭 위치 고정
• 60ba183 — fix(e2e): 레슨 돌아보기 제출 버튼 텍스트 불일치 수정
• 844816b — fix(e2e): LessonProgressStatus 타입 오류 수정

fixup 커밋 (cherry-pick 의존성 해결)

• 8f1a2ae — markdown-rendering-utils 유틸 파일 추가 (cherry-pick 누락 파일 보완)
• 5b3b2a7 — markdown-editor에 hasRenderableMarkdownSyntax import 추가

변경 파일

• src/app/(landing)/class/[slug]/(learning)/feed/[id]/page.tsx — 댓글 대댓글 UI, ⋮ 메뉴, 신고 기능, artifact 표시
• src/app/(landing)/class/[slug]/(learning)/_components/feed-tab.tsx — 필터 칩 디자인 정합, 운영자 PICK 조건부 노출
• src/app/(landing)/class/[slug]/(learning)/_components/qna-tab.tsx — 필터 칩 디자인 정합, 배지 색상 토큰화
• src/app/(landing)/class/[slug]/(learning)/qa/[id]/page.tsx — QnA XSS sanitize, 평문 줄바꿈 수정
• src/app/(class-lesson)/class/[slug]/lesson/[id]/page.tsx — 사이드바 sticky, 탭 위치 고정
• src/app/(class-lesson)/class/[slug]/lesson/[id]/_components/lesson-review-form.tsx — 마지막 레슨 CTA 추가
• src/app/(class-lesson)/class/[slug]/lesson/[id]/_components/lesson-builder-feed-detail-modal.tsx — artifact 표시
• src/app/(class-lesson)/class/[slug]/lesson/[id]/_components/lesson-qna-detail-modal.tsx — 평문 줄바꿈 수정
• src/components/common/ui/editor/markdown-editor.tsx — 마크다운 붙여넣기 버그 수정
• src/components/common/ui/rich-text/markdown-content-core.tsx — TipTap HTML sanitize 직접 처리
• src/components/pages/class/roadmap-tab.tsx — row key 인덱스 → lessonId
• src/components/pages/class/lesson-stamp.tsx — 완료 스탬프 활성화 수정
• src/app/global.css — gray-450, qna 배지 색상 토큰 추가
• next.config.ts — R2 remotePatterns 와일드카드
• src/utils/markdown-rendering-utils.ts — 신규 유틸 (cherry-pick 의존성)
• src/types/api/course.types.ts — artifactUrl, roleIds 타입 수정
• public/class/qna-answered-icon.svg — 답변완료 아이콘
• .claude/rules/no-lucide-icon-substitution.md — lucide-react 대체 금지 룰
• e2e/class/builder-feed.spec.ts, e2e/class/lesson-review.spec.ts — e2e 수정

혼입 검증 결과

git diff main...fix/qa --stat 결과 182개 파일 변경 — fix/qa 브랜치 전체 변경 포함 확인. 해당 PR #662, #663 커밋 23개만 선택적 cherry-pick. develop 전용 코드 혼입 없음.

Test plan

• 빌더 피드 상세 — 댓글에 대댓글 달기, ⋮ 메뉴(신고/수정/삭제) 동작 확인
• 빌더 피드 상세 — 코드블록(빈 줄 포함) 정상 렌더링 확인
• 빌더 피드 상세 — 돌아보기 이미지/링크 artifact 표시 확인
• QnA 답변 상세 — 평문 줄바꿈 정상 표시
• QnA 답변 상세 — XSS 페이로드(<img onerror=alert(1)>) 무력화 확인
• 피드 탭 — 필터 칩 inactive 색상 #999, rounded-full 확인
• 피드 탭 — 운영자 PICK 피드 없을 때 칩 미노출
• 레슨 상세 — 우측 사이드바(QnA 카드, 빌더 피드 카드) sticky 고정 확인
• 레슨 상세 — 마지막 레슨 완료 시 '완주 축하 페이지로 가기' CTA 표시
• 프로덕션 R2 아티팩트 이미지 로드 확인

🤖 Generated with Claude Code

[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 21, 2026 4:09pm

[coderabbitai]

Warning

Rate limit exceeded

@HA-SEUNG-JEONG has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 12 minutes and 40 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8d1faf02-31da-4d16-b37b-b1b45d224a0d

📥 Commits

Reviewing files that changed from the base of the PR and between 676a5e6 and 5b3b2a7.

⛔ Files ignored due to path filters (1)

• public/class/qna-answered-icon.svg is excluded by !**/*.svg

📒 Files selected for processing (22)

• .claude/rules/no-lucide-icon-substitution.md
• e2e/class/builder-feed.spec.ts
• e2e/class/lesson-review.spec.ts
• next.config.ts
• src/app/(class-lesson)/class/[slug]/lesson/[id]/_components/lesson-builder-feed-detail-modal.tsx
• src/app/(class-lesson)/class/[slug]/lesson/[id]/_components/lesson-qna-detail-modal.tsx
• src/app/(class-lesson)/class/[slug]/lesson/[id]/_components/lesson-review-form.tsx
• src/app/(class-lesson)/class/[slug]/lesson/[id]/_components/lesson-screenshot-modal.tsx
• src/app/(class-lesson)/class/[slug]/lesson/[id]/page.tsx
• src/app/(landing)/class/[slug]/(learning)/_components/feed-tab.tsx
• src/app/(landing)/class/[slug]/(learning)/_components/qna-tab.tsx
• src/app/(landing)/class/[slug]/(learning)/feed/[id]/page.tsx
• src/app/(landing)/class/[slug]/(learning)/qa/[id]/page.tsx
• src/app/global.css
• src/components/common/layout/home-header-client.tsx
• src/components/common/ui/editor/markdown-editor.tsx
• src/components/common/ui/rich-text/markdown-content-core.tsx
• src/components/pages/class/lesson-stamp.tsx
• src/components/pages/class/roadmap-tab.tsx
• src/types/api/course.types.ts
• src/utils/markdown-rendering-utils.test.ts
• src/utils/markdown-rendering-utils.ts

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cherry/fix-qa-to-main

---

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.}