refactor(ui): 이미지 레이아웃을 비율 기반으로 정리

[yunyoungyee]

1. 요약

• 고정 px 로 잡혀 있던 이미지 레이아웃을 비율(aspect-ratio) 기반으로 바꿔, 화면 폭이 달라져도 시안과 같은 모양이 유지되게 했다.
• 게시물 상세 이미지는 첫 장의 원본 크기를 클라이언트에서 읽어 프레임(세로/가로/1:1)을 결정하고, 뒤따르는 이미지를 그 프레임에 맞춰 채우는 방식으로 바꿨다.

2. 작업 내용

239c98f 이미지 레이아웃을 비율 기반으로 정리

• CollectionCard(그룹 상세 게시물 그리드)·PlaceCard(지도 "최근 저장한 공간") 썸네일: h-52(208px 고정) → aspect-[167/208] h-auto w-full. 시안 167x208 비율만 유지하고 실제 크기는 부모 그리드 폭이 정한다.
• PostImages 컴포넌트 신설(features/post/components/PostImages.tsx) — 게시물 상세의 이미지 영역을 PostDetailPage 에서 분리.
  • 첫 장을 new Image() 로 미리 읽어 naturalWidth / naturalHeight 로 프레임 판정: > 1.02 가로형(240x180), < 0.98 세로형(240x300), 그 사이 1:1(240x240).
  • 캐러셀 슬라이드는 w-60 + 판정된 aspect 클래스, 이미지는 object-cover 로 프레임을 채운다. 비율이 다른 뒤 이미지도 줄 높이가 흔들리지 않는다.
  • 이미지가 1장이면 프레임 없이 원본 비율 유지 — w-full h-auto max-h-[min(70dvh,520px)] object-contain, 여백 bg-gray-10, 좌우 px-4(캐러셀과 동일), rounded-sm.
• PostDetailPage 의 인라인 캐러셀 블록(h-[300px] w-[281px] 고정) 제거 → 로 교체.

3. 기술적 결정

주요 결정 사항

• 결정 내용: 프레임 비율은 첫 장 하나로만 결정하고, 나머지 이미지는 비율이 달라도 같은 프레임에 cover 로 채운다.
• 선택 이유: 이미지마다 비율을 따르면 캐러셀 줄 높이가 들쭉날쭉해진다. 시안이 프레임 3종(240x300 / 240x180 / 240x240)만 정의한 것도 같은 의도로 읽었다.
• 검토가 필요한 부분:
  • 프레임 판정 전 기본값을 세로형으로 두었다. 첫 장이 가로/정방이면 로드 직후 한 번 리레이아웃이 보인다. 서버가 이미지 크기를 내려주면
    클라이언트 계산 자체를 걷어낼 수 있다.
  • 1:1 판정 허용 오차 0.98 ~ 1.02 — 정확히 1:1 로 안 떨어지는 정방형 사진을 감안한 값이라 조정 여지 있음.
  • 다중 이미지 슬라이드 폭은 시안 그대로 w-60(240px) 고정. 카드 썸네일과 달리 캐러셀은 폭이 스냅 계산에 쓰여 고정으로 뒀다.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
nook-client-web	Ready	Preview	Jul 31, 2026 8:26pm