[BOM-491] fix: 고정폭 이메일 아티클 본문이 하단 영역을 침범하는 버그 수정

[JeLee-river]

📌 What

• 고정폭(~600px) 이메일 형식의 아티클 본문이 좁은 화면에서 아래 "오늘 읽지 않은 다른 아티클" 영역을 침범하던 버그 수정
• 모바일 뷰포트에서 아티클 본문 좌우 패딩 축소 (12px → 6px)
• 디스코드 참고

[개선 전 - 개선후]

❓ Why

• 일부 뉴스레터 HTML이 ~600px 고정폭 이메일 포맷으로 발송됨.
  • 좁은 모바일 화면에서 transform: scale()로 본문을 축소하더라도, 축소 전 높이로 레이아웃이 예약돼 하단 콘텐츠를 덮는 문제가 발생함
  • 이미지가 비동기로 로드되면서 높이가 달라지는데, 기존 코드는 이를 감지하지 못해 예약 높이가 항상 틀린 값이었음

🔧 How

• useAutoScaleContent를 layoutRef / contentRef 2-ref 구조로 재작성
  • 기존: clientWidth(이미 viewport에 잘린 폭)로 scale 계산 → 사실상 0.94x만 적용됨
  • 변경: scrollWidth(콘텐츠 실제 폭)로 측정해 올바른 scale(예: 600px→390px = 0.65x) 계산
  • layoutRef에만 style.height 예약, contentRef에만 transform: scale() 적용해 이중 축소 방지
  • ResizeObserver로 이미지 로드 후 높이 변화 감지 → layoutRef.style.height 재계산
• ArticleContent를 Container(overflow:hidden, 높이 예약) / Content(scale 대상) 구조로 분리
• useAutoScaleContent 인자를 순서 기반 파라미터에서 객체({ layoutRef, contentRef })로 변경해 역할 혼동 방지

👀 Review Point

• 이미지 로드 전후 레이아웃 높이가 올바르게 갱신되는지 (네트워크 탭에서 이미지 throttle 후 확인)
• 모바일 기준 아티클 헤더/푸터는 12px 패딩 유지, 본문만 6px인지 확인

[jaeyoung-kwon]

🤖 PR Review

✅ 확실하게 수정이 필요한 항목을 찾지 못했습니다.

고정폭 이메일 아티클이 스케일 축소 시 하단 영역을 침범하던 버그를 layoutRef/contentRef 분리와 ResizeObserver 기반 재계산으로 수정한 변경입니다. Container(overflow:hidden, 높이 예약)와 Content(scale 적용) 분리 구조가 이중 축소를 방지하고, scrollWidth 기반 측정이 CSS transform에 영향받지 않는 점도 정확합니다. ArticleBodyWrapper의 calc(100% + 12px)/-6px 마진 계산도 PC_HORIZONTAL_PADDING 상수 값(12px)과 일치해 본문 패딩만 6px로 줄어드는 의도대로 동작합니다. MSW 목 데이터 추가와 tsconfig resolveJsonModule 설정도 테스트/빌드에 필요한 범위로 문제없습니다. production 코드 경로에서 introduced된 critical/major 이슈는 발견하지 못했습니다.

🚨 0 Critical · ⚠️ 0 Major · 📝 0 Minor

📋 검증 과정

• Claude structured review 결과 중 확신도가 있는 항목만 정리했습니다.
• Critical/Major는 inline comment로 게시하고, Minor는 참고 항목으로 summary에 포함합니다.
• 자동 생성된 OpenAPI 타입 선언 파일과 lock 파일은 리뷰 대상에서 제외합니다.

---

_{🤖 Claude PR Review}

---

Generated by Claude Code