Add article thumbnail images to list view and article detail pages

Updated ArticleCard component to display thumbnail images on the right for list view. Modified Article page to display the article's image as a hero banner at the top.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/6ZMblp5
This commit is contained in:
kimjaehyeon0101
2025-10-14 07:44:42 +00:00
parent 05c08d5a4b
commit 3d14ed2c2b
2 changed files with 18 additions and 7 deletions

View File

@ -174,6 +174,16 @@ export default function Article() {
<main className="max-w-7xl mx-auto px-6 py-12 pb-32">
{/* Article Content */}
<article className="mb-16 max-w-4xl mx-auto">
{article.imageUrl && (
<div className="mb-8 -mx-6 md:mx-0">
<img
src={article.imageUrl}
alt={article.title}
className="w-full h-auto max-h-[500px] object-cover rounded-none md:rounded-lg"
data-testid="image-article-hero"
/>
</div>
)}
<header className="mb-8">
<h1 className="text-4xl font-bold mb-4 text-gray-900 leading-tight" data-testid="text-article-title">{article.title}</h1>
{article.excerpt && (