From 3d14ed2c2bdab3485c6f36f3d77a6262ca208a25 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Tue, 14 Oct 2025 07:44:42 +0000
Subject: [PATCH] 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
---
 client/src/components/ArticleCard.tsx | 15 ++++++++-------
 client/src/pages/Article.tsx          | 10 ++++++++++
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/client/src/components/ArticleCard.tsx b/client/src/components/ArticleCard.tsx
index 193d72a..20bf0dc 100644
--- a/client/src/components/ArticleCard.tsx
+++ b/client/src/components/ArticleCard.tsx
@@ -40,13 +40,6 @@ export default function ArticleCard({ article, outlet, viewMode = "grid" }: Arti
       >
         <CardContent className="p-6">
           <div className="flex space-x-6">
-            {article.imageUrl && (
-              <img 
-                src={article.imageUrl} 
-                alt={article.title}
-                className="w-32 h-24 object-cover rounded-lg flex-shrink-0"
-              />
-            )}
             <div className="flex-1">
               <div className="flex items-center space-x-2 mb-2">
                 {article.isPinned && (
@@ -74,6 +67,14 @@ export default function ArticleCard({ article, outlet, viewMode = "grid" }: Arti
                 </div>
               </div>
             </div>
+            {article.imageUrl && (
+              <img 
+                src={article.imageUrl} 
+                alt={article.title}
+                className="w-32 h-24 object-cover rounded-lg flex-shrink-0"
+                data-testid="image-article-thumbnail"
+              />
+            )}
           </div>
         </CardContent>
       </Card>
diff --git a/client/src/pages/Article.tsx b/client/src/pages/Article.tsx
index ef1bb34..adb0e94 100644
--- a/client/src/pages/Article.tsx
+++ b/client/src/pages/Article.tsx
@@ -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 && (