[Feat] profileImage 공통 컴포넌트 작업

[HopeFullee]

📝 변경 사항

[문제점, 개선 이유]

• 프로필 이미지 적용 방식 (css, alt)이 중구난방이였음. (통일화 X)
• ImagesWithFallback 컴포넌트 하나로는 Profile 이미지를 사용하는지 Thumbnail 이미지를 사용하는지 한눈에 확인하기 어려웠음.

[추가 사항]

• shared/profile-image.tsx 경로에 공통 ProfileImage 컴포넌트 작업.
• 사용법:

// 제발 src는 옵셔널 ( profile ?? ' ' )로 적용하지 말아주세요.
// 이유는 서버에서 오는 profile 객체는 (string | null) 을 반환하지 절대 undefined로 오지 않기 때문입니다. 
<ProfileImage src={src} size='md' />

• 특징:
  전달하는 src 프롭스가 null 이라면 자동으로 DEFAULT_PROFILE_IMAGE 적용.
  size 프롭스를 전달하면 자동으로 default Width, Height가 적용됨.
  alt 문구는 모두 동일하게 "프로필 이미지"로 통일함.

[변경 사항]

• 기존 ImagesWithFallback 컴포넌트로 프로필 이미지를 적용하던 모든 컴포넌트 수정.

---

🔗 관련 이슈

Closes #

---

🧪 테스트 방법

• 수동 테스트 검증(로컬 환경)
• 유닛 테스트 검증
• 통합 테스트 검증

---

📸 스크린샷 (선택)

---

📋 체크리스트

• 관련 문서를 업데이트했습니다 (필요한 경우)
• 테스트를 추가/수정했습니다 (필요한 경우)
• Breaking change가 있다면 명시했습니다

---

💬 추가 코멘트

---

CodeRabbit Review는 자동으로 실행되지 않습니다.

Review를 실행하려면 comment에 아래와 같이 작성해주세요

@coderabbitai review

---

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

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

[github-actions]

🎭 Playwright Report

✨ E2E Test가 성공적으로 완료되었습니다.

Test 요약 내용을 확인해주세요.

Status	Build Log	Updated (UTC)
✅ Ready	View Build	2026-01-11 17:05:55

📊 Test Summary

• ✅ Passed: 3
• ❌ Failed: 0
• ⏱️ Duration: 36.5s

📜 Test Details

✅ Passed Tests (3)

• profile.test.ts (3)
  • [chromium] 존재하지 않는 프로필 페이지로 접속 시 404 redirect 되는 지 테스트
  • [firefox] 존재하지 않는 프로필 페이지로 접속 시 404 redirect 되는 지 테스트
  • [webkit] 존재하지 않는 프로필 페이지로 접속 시 404 redirect 되는 지 테스트

[github-actions]

🎨 Storybook Report

✅ 변경 사항이 없습니다

모든 Story가 이전 빌드와 동일합니다.

Status	Storybook	Build Log	Updated (UTC)
✅ Unchanged	View Storybook	View Build	2026-01-11 17:04:52

[github-actions]

🚀 PR Preview Report

✨ Build가 성공적으로 완료되었습니다.

Preview에서 변경사항을 확인하세요.

Status	Preview	Build Log	Updated (UTC)
✅ Ready	Visit Preview	View Logs	2026-01-11 17:05:43

[github-actions]

📊 Coverage Report

Status	Build Log	Updated (UTC)
✅ Ready	View Build	2026-01-11 17:04:34

📈 #371을 main에 병합하면 coverage가 0.28% 증가합니다.

Coverage 요약

@@             Coverage Diff             @@
##             main     #371       +/-   ##
===========================================
+ Coverage   38.32%   38.60%    +0.28%     
===========================================
  Files         239      240        +1     
  Lines       10969    10948       -21     
  Branches      465      464        -1     
===========================================
+ Hits         4204     4227       +23     
- Misses       6765     6721       -44     

영향받은 파일

파일	Coverage 변화
/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/pages/chat/chat-list/index.tsx	21.25% (+0.14%) ⬆️
/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/pages/chat/chat-other-chat/index.tsx	35.48% (+5.76%) ⬆️
/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/pages/chat/chat-user-list/index.tsx	18.26% (-1.20%) ⬇️
/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/pages/message/message-following-card/index.tsx	98.88% (-0.08%) ⬇️
/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/pages/user/profile/profile-follows-modal/index.tsx	27.65% (-1.87%) ⬇️
/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/shared/profile-image/index.tsx	100.00% (+100.00%) ⬆️
/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/ui/image-with-fallback/index.tsx	91.66% (-0.84%) ⬇️

[claudia99503]

흐아아암