블로그 게시글에 썸네일 추가

 블로그 게시글 리스트를 보면 너무 심심했다. 썸네일 이미지도 없이 제목과 내용 일부가 전부.

 썸네일이 없다보니, 각 게시글이 어떤 내용을 다루는지 빠르게 파악하기 어려웠다. 그래서 썸네일을 추가하기로 했다.

export default function Card({ href, title, content, date, thumbnailUrl }: CardProps) {
  return (
    <Link href={href} className="block group w-full max-w-2xl mx-auto mb-5">
      <div className="bg-white rounded-lg overflow-hidden shadow-md transition-shadow duration-300 group-hover:shadow-xl flex flex-row">
        {thumbnailUrl && (
          <div className="relative w-1/3 md:w-1/4 flex-shrink-0">
            {/* 썸네일 영역 */}
            <Image
              src={thumbnail}
              alt={title}
              layout="fill"
              objectFit="contain"
              className="object-contain transition-transform duration-300 group-hover:scale-105 p-1"
            />
          </div>
        )}
        <div className="p-5 flex flex-col">
            {/* 게시글 영역... 코드 생략 */}
        </div>
      </div>
    </Link>
  )
}

 테이블에 썸네일용 컬럼을 추가하여 프론트에서 받아오도록 한 뒤, 썸네일이 있으면 썸네일과 기존의 영역을 좌우로 나눠서 보여주고, 없으면 기존처럼 제목과 내용이 보이도록 코드를 수정했다.

이미지는 object-cover를 사용할 경우 이미지가 잘리는 문제 때문에 object-contain으로 이미지가 잘리지 않고 영역을 채우도록 했다. 앞으로는 게시글을 올릴 때 적절한 썸네일을 포함해서 컨텐츠가 쉽게 눈에 띄일 수 있도록 해볼 생각이다.