home recent post update

src/pages/Home.js

@@ -1,8 +1,17 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
-import { posts } from '../data/sampleData';
+import blogApi from '../api/blogApi';
-import PostCard from '../components/PostCard';
+import { useNavigate } from 'react-router-dom';
 
 const Home = () => {
+  const [posts, setPosts] = useState([]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    blogApi.get('/api/blog/posts/')
+      .then(res => setPosts(res.data))
+      .catch(err => console.error('게시글 목록 조회 실패:', err));
+  }, []);
+
   return (
     <div className="min-h-screen">
       <div className="relative h-screen">
@@ -23,13 +32,28 @@ const Home = () => {
           </div>
         </div>
       </div>
+
       <div className="container mx-auto px-4 py-20">
         <h2 className="text-3xl font-bold mb-12 text-center">최신 포스트</h2>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <ul className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {posts.map(post => (
+          {posts.length > 0 ? (
-            <PostCard key={post.id} post={post} />
+            posts.map(post => (
-          ))}
+              <li
-        </div>
+                key={post.id}
+                className="p-4 border rounded shadow-sm bg-white hover:bg-gray-50 cursor-pointer list-none"
+                onClick={() => navigate(`/posts/${post.id}`)}
+              >
+                <h2 className="text-xl font-semibold">{post.title}</h2>
+                <p className="text-gray-600">작성자: {post.author_name}</p>
+                <p className="text-gray-400 text-sm">
+                  작성일: {new Date(post.created_at).toLocaleString()}
+                </p>
+              </li>
+            ))
+          ) : (
+            <p className="text-center col-span-3 text-gray-500">게시글이 없습니다.</p>
+          )}
+        </ul>
       </div>
     </div>
   );

version

@@ -1 +1 @@
-0.0.6
+0.0.7