fix : 이미지 업로드 파일 선택 시 Windows에서 썸네일 누락 수정

[Hyeonjun0527]

작업 내용

이미지 업로드 파일 선택 다이얼로그에서 Windows Chrome 환경에서 많은 이미지 썸네일이 누락되는 문제를 수정합니다.

변경 이유

<input type="file"> 의 accept 속성에 확장자(.jpg,.png,...)만 지정되어 있었습니다.
Windows Chrome은 확장자만 있으면 "사용자 저장 파일" 커스텀 필터를 생성하는데, 이 경우 Windows Shell의 이미지 썸네일 생성이 정상 동작하지 않는 경우가 있습니다.

MIME 타입(image/jpeg, image/png 등)을 확장자와 함께 지정하면 Chrome이 OS 수준의 네이티브 이미지 필터를 사용하게 되어 썸네일이 정상 표시됩니다.

변경 사항

• toImageInputAccept() 함수가 기존 IMAGE_EXTENSION_BY_MIME 맵을 활용하여 MIME 타입을 자동으로 추출하고 확장자 앞에 병기하도록 수정
• 기존: .jpg,.jpeg,.png,.webp,.gif,.heic,.heif
• 변경: image/jpeg,image/png,image/gif,image/webp,image/heic,image/heif,.jpg,.jpeg,.png,.webp,.gif,.heic,.heif

검증 방법

• yarn lint:fix 통과
• yarn prettier:fix 통과
• yarn typecheck 통과
• yarn build 통과 (pre-push hook)
• Windows Chrome에서 커뮤니티 글 작성 → 이미지 업로드 파일 선택 시 썸네일 정상 표시 확인

브랜치 정보

• base: develop
• head: fix/image-upload-accept-mime-1

🤖 Generated with Claude Code

Summary by CodeRabbit

• 개선사항
  • 이미지 파일 입력 처리 개선으로 더 광범위한 파일 형식 호환성 제공

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
study-platform-client-dev	Building	Preview, Comment	Apr 7, 2026 0:55am

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

개요

toImageInputAccept() 함수가 파일 확장자뿐만 아니라 MIME 타입도 포함하여 accept 문자열을 구성하도록 수정되었습니다. 제공된 확장자에 매핑된 MIME 타입을 파생하고, 이를 .<extension> 부분과 함께 결합하여 반환합니다.

변경사항

Cohort / File(s)	요약
이미지 유틸리티 함수 src/components/common/ui/editor/image-utils.ts	toImageInputAccept() 함수의 반환값이 확장자만 포함하는 형식에서 MIME 타입과 확장자를 모두 포함하는 형식으로 변경됨. 함수 서명과 검증 로직은 변경 없음.

관련된 PR

• fix: 커뮤니티 HEIC/HEIF 업로드 이미지를 JPEG로 정규화 #527: 동일한 image-utils.ts 파일의 MIME↔확장자 조회 및 허용 확장자를 확장하므로, toImageInputAccept()가 생성하는 MIME 타입에 직접적인 영향을 미칩니다.

추정 코드 리뷰 난이도

🎯 2 (Simple) | ⏱️ ~10 분

시

🐰 확장자에서 MIME 타입을 찾아내,
Accept 문자열이 더욱 풍성하게!
이미지 파일들의 식별표가 반짝반짝,
한 줄의 코드로 두 배의 정보를 담네.
작지만 가치 있는 변화, 우리의 힘! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목이 변경사항의 핵심을 명확하게 설명합니다. Windows에서 이미지 업로드 시 썸네일 누락 문제를 해결하는 것이 주요 변경사항이며, 제목이 이를 직접적으로 반영합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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 fix/image-upload-accept-mime-1

---

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