design: 아티클 상세 모바일 카드 레이아웃 개선

[jaeyoung-kwon]

📌 What

• 아티클 상세 화면의 안 읽은 아티클 카드를 모바일에서 2열로 표시
• 좁아진 카드에서도 이미지와 메타 정보의 가독성을 유지하도록 UI 조정

❓ Why

• 모바일에서 안 읽은 아티클을 더 효율적으로 탐색할 수 있도록 정보 밀도를 개선
• 2열 배치 시 카테고리와 뉴스레터 정보가 한 줄에 몰리는 문제 해소

🔧 How

• 안 읽은 아티클 목록을 모바일·PC 모두 2열 그리드로 구성
• 카드 이미지를 16:9 비율로 유지하고 제목 폰트를 한 단계 축소
• 모바일에서만 카테고리 배지를 이미지 좌측 상단에 배치
• 기존 뉴스레터명과 읽기 시간 UI를 유지하고 긴 이름은 말줄임 처리
• 레이아웃 확인을 위한 안 읽은 아티클 MSW 목데이터 추가

👀 Review Point

• 모바일에서 카드 2열 배치와 텍스트 가독성이 적절한지 확인
• 모바일 이미지 위 카테고리 배지의 위치와 대비 확인
• PC에서 기존 카테고리 및 읽기 시간 UI가 유지되는지 확인
• 긴 뉴스레터명에서도 읽기 시간이 정상 노출되는지 확인

[jaeyoung-kwon]

🤖 PR Review

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

안 읽은 아티클 카드를 모바일에서 2열로 배치하고 카테고리 배지를 이미지 위로 옮기는 CSS/레이아웃 변경입니다. useDevice 분기, ImageWithFallback height prop 제거(aspect-ratio로 대체), TodayArticleList의 device 기반 컬럼 분기 제거 모두 다른 소비처(스토리 포함)에 회귀를 일으키지 않는 것을 확인했습니다. 목데이터 추가는 테스트 전용이며 프로덕션 로직에 영향 없습니다. production 이슈·보안·데이터 손상·플로우 차단에 해당하는 항목은 발견하지 못했습니다.

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

📋 검증 과정

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

---

_{🤖 Claude PR Review}

---

Generated by Claude Code

[jaeyoung-kwon]

🤖 PR Review

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

이전 리뷰(fbce9bf) 이후 추가된 커밋은 비모바일 카드의 카테고리 배지 노출 조건을 device === 'pc'에서 device !== 'mobile'로 수정합니다. 기존 조건에서는 tablet 디바이스가 이미지 위 배지(mobile 전용)와 메타 영역 배지(pc 전용) 어느 쪽에도 해당하지 않아 카테고리가 아예 노출되지 않는 공백이 있었는데, 이번 수정으로 tablet도 메타 영역 배지를 갖게 되어 그 공백을 올바르게 해소합니다. 나머지 변경 사항은 이전 리뷰와 동일하며 회귀나 추가 이슈는 발견하지 못했습니다.

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

📋 검증 과정

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

---

_{🤖 Claude PR Review}

---

Generated by Claude Code