개요

PostCard 컴포넌트는 제목의 길이에 따라 카드의 크기가 달라지는 문제가 있다. 제목의 길이가 모두 짧거나 비슷한 경우에는 큰 문제가 되지 않지만, 실제 서비스에서는 게시글마다 제목 길이가 다양하기 때문에 한 행에서 특정 카드의 제목이 길어질 경우 레이아웃이 불안정해질 수 있다.

이 불안정한 문제는 트렌딩 게시글, 최신 게시글에 따라서도 달랐다. 트렌딩 게시글은 제목 길이에 따라 변경되긴 하지만 다른 PostCard 크기에 영향을 미치지 않있다. 실제 게시글이 이렇게 제목이 긴 것은 아니고, 개발자 도구로 잠깐 변경했다.

하지만 최신 게시글은 한 행에서 가장 긴 제목을 가진 PostCard의 크기에 따라 같은 행의 모든 카드가 영향을 받는다. 결과적으로 행마다 다른 크기의 카드들이 생성되었다.

이런 일관성 없는 레이아웃은 사용자 경험을 저하시킬 수 있다. 따라서 먼저 차이가 발생하는 원인을 파악하고 두 섹션 모두에서 일관된 크기를 유지할 수 있도록 개선이 필요하다.

문제 인식

MainContent 내부에는 두 개의 주요 섹션인 TrendingSection과 LatestSection이 존재한다. 각 섹션은 서로 다른 그리드 컴포넌트(AnimatedPostGrid, PostCardGrid)를 사용하고 두 컴포넌트 모두 PostCard 컴포넌트를 렌더링한다.

그리드 컴포넌트 별 이름이 일관성 없지만, 추후 수정 사항으로 남겨두고 일단 넘어가자.

왜 같은 PostGrid인데 두 개로 나뉘었냐면, 트렌딩 포스트 섹션에 있는 PostCard 컴포넌트에 대한 요구사항이 있었기 때문이다. AnimatedPostGrid는 포스트 순위 변경을 시각적으로 표현하기 위해 Motion (구 Framer Motion)을 사용한 애니메이션 기능이 필요했다. 그래서 각 PostCard가 motion.div로 감싸져 있어 개별적으로 레이아웃이 계산되었다.