add description & image for articles

web/src/api/articles/useArticlesQuery.ts

@@ -5,6 +5,8 @@ export type Article = {
   id: number;
   title: string;
   url: string;
+  description: string | null;
+  image: string | null;
   created_at: string;
   updated_at: string;
 };

web/src/app/(home)/UserArticles.tsx

@@ -5,6 +5,7 @@ import { SaveArticleForm } from "./SaveArticleForm";
 import { ArticleDrawer } from "@/app/(home)/ArticleDrawer";
 import { Button } from "@/components/ui/Button";
 import { useDeleteArticleMutation } from "@/api/articles/useDeleteArticleMutation";
+import Image from "next/image";
 
 export const UserArticles = () => {
   const { data: articles } = useArticlesQuery();
@@ -19,12 +20,29 @@ export const UserArticles = () => {
       </div>
       <div className="mt-10 flex flex-col gap-3">
         {articles?.map((article) => (
-          <div key={article.id} className="flex justify-between">
-            <ArticleDrawer article={article}>
-              <h3 className="line-clamp-3 cursor-pointer" tabIndex={0}>
-                {article.title}
-              </h3>
-            </ArticleDrawer>
+          <div key={article.id} className="flex justify-between items-center">
+            <div className="flex gap-3">
+              {article.image && (
+                <div className="relative w-[128px] aspect-square overflow-hidden rounded-md">
+                  <Image
+                    src={`data:image/png;base64,${article.image}`}
+                    alt=""
+                    fill
+                    objectFit="cover"
+                  />
+                </div>
+              )}
+              <div className="flex flex-col gap-1">
+                <ArticleDrawer article={article}>
+                  <h3 className="line-clamp-3 cursor-pointer" tabIndex={0}>
+                    {article.title}
+                  </h3>
+                </ArticleDrawer>
+                {article.description && (
+                  <p className="line-clamp-3">{article.description}</p>
+                )}
+              </div>
+            </div>
             <Button
               color="danger"
               disabled={