가장 큰 개선점은 시각적 요소(이미지/썸네일)의 추가입니다.
- 게시물 썸네일/대표 이미지 추가 (가장 중요)
- 문제점: 현재 카드는 텍스트 위주로 구성되어 있어 시각적으로 단조롭습니다.
- 개선: 각 게시물 카드에 썸네일 또는 대표 이미지를 추가하면 시각적 매력이 크게 증가하고, 사용자가 글을 더 쉽게 탐색하고 클릭하도록 유도할 수 있습니다.
- 구현 방안:
- Post 인터페이스에 imageUrl 또는 thumbnailUrl 필드를 추가합니다.
- Card 컴포넌트 내부에 이미지를 표시할 <img> 태그를 추가하고, 적절한 비율과 스타일을 적용합니다. (예: aspect-video 또는 h-48 object-cover)
- 만약 이미지 데이터가 없다면, 카테고리 색상 기반의 플레이스홀더나 기본 이미지를 표시하는 폴백(fallback) 로직을 추가할 수 있습니다.
- 카드 레이아웃 재조정 (썸네일 추가 시)
- 문제점: 썸네일이 추가되면 현재의 텍스트 위주 레이아웃이 어색해질 수 있습니다.
- 개선: 썸네일이 상단에 크게 표시되고, 그 아래에 제목, 요약, 메타데이터가 배치되는 형태로 레이아웃을 재조정합니다.
- 구현 방안: CardHeader와 CardContent의 구조를 변경하여 이미지를 위한 공간을 확보하고, 텍스트 요소들의 마진과 패딩을 조정합니다.
- 메타데이터(날짜, 읽기 시간) 표시 방식 개선
- 문제점: 현재 날짜와 읽기 시간이 카드 상단에 작은 글씨로 표시되어 눈에 잘 띄지 않습니다.
- 개선:
- 아이콘과 함께: 현재도 아이콘이 있지만, 폰트 크기나 색상을 조정하여 가독성을 높일 수 있습니다.
- 위치 변경: 카드 하단이나 제목 바로 아래 등 더 눈에 띄는 위치로 옮길 수 있습니다.
- 읽기 시간 활성화: 현재 주석 처리된 읽기 시간(readTime)을 활성화하여 사용자에게 유용한 정보를 제공합니다.
- "모든 글 보기" 버튼 강조
- 문제점: 현재 "모든 글 보기" 버튼이 일반 텍스트 링크처럼 보여 눈에 잘 띄지 않습니다.
- 개선: Button 컴포넌트의 variant를 ghost 대신 default나 outline으로 변경하거나, 크기를 키워 사용자가 다음 행동을 명확히 인지하도록 합니다.