[cherry-pick] 이미지 업로드 정규화 및 유틸 정리

[HA-SEUNG-JEONG]

개요

QA 답변 이미지 업로드 시 normalizeImageFileForUpload가 적용되지 않아 MIME 타입·확장자가 올바르게 처리되지 않는 문제를 수정합니다. 또한 IMAGE_MIME_TO_EXT / IMAGE_MIME_TO_EXTS 중복 레지스트리를 단일화하고, 각 페이지에 산재된 stripHtml 로컬 구현을 공용 util로 통합합니다.

원본 PR

• develop PR: 이미지 업로드 정규화 및 유틸 정리 #695 (이미지 업로드 정규화 및 유틸 정리 #695)
• 원본 브랜치: fix/image-key

Cherry-pick 대상 커밋

• f4a80d3 — [image-key] fix : refactor(image-utils): IMAGE_MIME_TO_EXT 제거 — IMAGE_MIME_TO_EXTS 단일 레지스트리로 통합
• 6c1a583 — [image-key] fix : 이미지 업로드 시 normalizeImageFileForUpload 적용, stripHtml 공용 함수로 교체

(두 번째 커밋 b0cc24a stripHtml export는 main에 이미 반영되어 skip)

변경 파일

• src/app/(class-lesson)/class/[slug]/lesson/[id]/_components/lesson-qna-submission-modal.tsx — 이미지 업로드에 normalizeImageFileForUpload 적용
• src/app/(landing)/class/[slug]/(learning)/feed/[id]/page.tsx — 로컬 stripHtml → 공용 util 교체, 미사용 import 제거
• src/app/(landing)/class/[slug]/(learning)/qa/[id]/page.tsx — 이미지 업로드 정규화 + 로컬 stripHtml 제거 → 공용 util 사용
• src/components/common/ui/editor/image-utils.ts — IMAGE_MIME_TO_EXT 삭제, IMAGE_MIME_TO_EXTS 단일 레지스트리로 통합, HEIC 분기 단순화

혼입 검증 결과

git diff main...fix/image-key --stat 기준 241개 파일 (develop이 main보다 앞서 있음).
cherry-pick은 PR #695의 3개 커밋만 적용 → 실제 변경 4개 파일, develop 전용 코드 혼입 없음.

• develop 전용 코드 혼입 없음 (변경 파일이 원본 PR 범위와 일치)

Test plan

• QA 페이지에서 JPEG/PNG/WEBP 이미지 업로드 후 preview 및 서버 키 정상 확인
• QA 페이지에서 HEIC 이미지 업로드 시 JPEG 변환 후 업로드 확인
• 레슨 QnA 제출 모달에서 이미지 업로드 정상 동작 확인
• 피드 상세 페이지에서 HTML 태그 포함 댓글 내용이 텍스트만 렌더링되는지 확인
• QA 상세 페이지에서 stripHtml 적용 결과 동일하게 확인

🤖 Generated with Claude Code

Summary by CodeRabbit

릴리스 노트

• 버그 수정
  • 이미지 업로드 처리 과정을 정규화하여 업로드 안정성 및 미리보기 표시 개선
  • 수업 Q&A 및 피드에서 HTML/마크업이 포함된 콘텐츠를 올바르게 표시하도록 수정
  • HEIC/HEIF 형식 이미지 자동 변환 지원

[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 25, 2026 8:21am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 53338fc9-43f1-46d9-8495-6553f956deb5

📥 Commits

Reviewing files that changed from the base of the PR and between e425718 and c1e685d.

📒 Files selected for processing (4)

• src/app/(class-lesson)/class/[slug]/lesson/[id]/_components/lesson-qna-submission-modal.tsx
• src/app/(landing)/class/[slug]/(learning)/feed/[id]/page.tsx
• src/app/(landing)/class/[slug]/(learning)/qa/[id]/page.tsx
• src/components/common/ui/editor/image-utils.ts

---

📝 Walkthrough

Walkthrough

이 PR은 이미지 업로드 및 콘텐츠 렌더링을 개선합니다. image-utils.ts에서 MIME 타입별 다중 확장자 지원 및 HEIC/HEIF 변환 로직을 정리한 후, QnA 제출과 피드백 페이지에서 정규화된 파일을 사용하도록 적용하며, HTML 마크업 정제 함수를 외부화하여 피드 콘텐츠 렌더링에 적용합니다.

Changes

이미지 정규화 및 콘텐츠 정제 개선

Layer / File(s)	Summary
이미지 정규화 유틸 개선 src/components/common/ui/editor/image-utils.ts	MIME 타입을 단일 확장자가 아닌 배열로 매핑하는 IMAGE_MIME_TO_EXTS로 변경하고, getExtensionFromMime은 배열의 첫 확장자를 반환하도록 수정합니다. normalizeImageFileForUpload에서 detectedMimeType과 reportedMimeType을 결합하여 resolvedMimeType을 결정한 뒤, 이것이 HEIC/HEIF면 항상 JPEG으로 변환하도록 조건을 정리합니다. toImageInputAccept에서 MIME당 배열된 확장자와 입력 확장자의 교집합을 필터링하여 accept 문자열을 생성합니다.
QnA 이미지 업로드에 정규화 적용 src/app/(class-lesson)/class/[slug]/lesson/[id]/_components/lesson-qna-submission-modal.tsx, src/app/(landing)/class/[slug]/(learning)/qa/[id]/page.tsx	normalizeImageFileForUpload를 import하여 이미지 업로드 전에 파일을 정규화하고, 업로드 호출 및 미리보기 Object URL 생성 시 정규화된 파일을 사용하도록 변경합니다.
stripHtml 외부화 및 피드 렌더링 개선 src/app/(landing)/class/[slug]/(learning)/qa/[id]/page.tsx, src/app/(landing)/class/[slug]/(learning)/feed/[id]/page.tsx	QnA 피드백 페이지에서 stripHtml을 공유 유틸(@/utils/markdown-content-text)로부터 import하여 내부 구현을 제거하고, 피드 페이지에서 콘텐츠 렌더링 시 stripHtml(f.content)를 적용하여 HTML 마크업을 제거합니다. 불필요한 ROLE_LABELS import도 제거합니다.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• code-zero-to-one/study-platform-client#691: 레슨 피드백/스크린샷 업로드 및 피드 작성 흐름에서 동일하게 normalizeImageFileForUpload를 적용하는 변경입니다.
• code-zero-to-one/study-platform-client#527: image-utils.ts의 HEIC/HEIF→JPEG 정규화 로직 및 MIME↔확장자 처리 방식 개선이 직접 맞물립니다.
• code-zero-to-one/study-platform-client#548: toImageInputAccept 함수의 accept 문자열 생성 로직 변경이 동일하게 포함되어 있습니다.

Suggested labels

🐛 bug, release:patch

Poem

🐰 이미지를 다듬고 HTML을 정제하니,
파일은 표준화되고 콘텐츠는 말끔하네!
HEIC는 JPEG으로, 마크업은 사라지고,
사용자의 화면에는 순수한 미리보기만 남는다. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경 사항의 핵심을 명확하게 반영하고 있습니다. '이미지 업로드 정규화 및 유틸 정리'는 이미지 파일 정규화 적용과 stripHtml 유틸 통합이라는 주요 변경 사항들을 잘 요약합니다.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 cherry/fix-image-key-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.}