커뮤니티 커피챗·모각코 블록의 시작선과 사진 높이가 어긋남

DaleStudy/daleui#1214에 취합된 피드백에서 옮긴 이슈입니다.
원 댓글: @RiaOh (5번 항목)

현상

커뮤니티 페이지에서 나란히 놓인 "커피챗"과 "모각코" 블록의 시작점이 서로 어긋나서, 모각코 쪽이 미세하게 아래로 내려가 보입니다. 두 블록의 사진 높이도 서로 다릅니다.

원인

세로 어긋남

두 블록은 .community-story 그리드의 두 칸입니다. 이 클래스는 align-items: center라서 각 칸의 내용 높이가 다르면 세로 가운데로 맞춰지고, 결과적으로 위쪽 시작선이 어긋납니다.

src/styles/site.css:840-846

.community-story {
  padding: 64px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px;
  align-items: center; /* ← 시작선이 어긋나는 원인 */
}

같은 클래스를 쓰는 소개 페이지는 인라인으로 이 값을 덮어쓰고 있습니다.

// AboutPage.tsx:43-46 — 덮어씀
<div className="container community-story" style={{ padding: "56px 20px", alignItems: "start" }}>

// CommunityPage.tsx:47 — 덮어쓰지 않음
<div className="container community-story" style={{ padding: "24px 20px 64px" }}>

한쪽만 인라인으로 패치되어 있어서 커뮤니티 페이지에만 증상이 남았습니다. 참고로 아래쪽 밋업 섹션이 쓰는 .community-section-inner(site.css:965-971)는 처음부터 align-items: start입니다.

사진 높이 차이

.community-gallery img는 기본적으로 height: 200px; object-fit: cover로 높이를 고정하는데, .community-inline 안에서만 이 고정이 풀립니다.

src/styles/site.css:936-938

.community-inline .community-gallery img {
  height: auto;
}

커피챗과 모각코 사진의 원본 비율이 다르므로 height: auto에서는 렌더링 높이가 서로 달라집니다.

제안

• .community-story의 align-items를 start로 바꾸고, AboutPage.tsx:45의 중복된 인라인 오버라이드를 제거합니다. 소개 페이지는 이미 start로 동작하고 있어 시각적 변화가 없습니다
• 사진 높이는 .community-inline .community-gallery img의 height: auto 오버라이드를 없애 기본값(200px + object-fit: cover)을 따르게 하면 두 블록이 같아집니다. 다만 이 오버라이드가 잘림을 피하려고 일부러 넣은 것일 수 있으니, 원본 이미지가 잘려도 괜찮은지 확인이 필요합니다

Start with src/styles/site.css around lines 840-846 and 936-938, then compare CommunityPage.tsx:47 with AboutPage.tsx:43-46. Check the two community blocks at desktop and responsive widths, including whether removing the image-height override causes unacceptable cropping. Done means aligned block starts and equal photo heights without regressing the introduction page.