Mission 3: Workshop — ดึงโพสต์จาก API จริง

เป้าหมายของ Mission นี้: ดึงโพสต์จริงจาก API มาแสดง Title และ Body

สิ่งที่ต้องทำ

1. สร้างไฟล์ app/posts/page.tsx
2. ดึงข้อมูลจาก https://jsonplaceholder.typicode.com/posts
3. แสดง title และ body ของแต่ละโพสต์

จุดเริ่มต้น (ลองเติมส่วนที่เหลือเอง)

// app/posts/page.tsx
"use client";
import { useState, useEffect } from "react";

type Post = { id: number; title: string; body: string };

export default function PostsPage() {
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    async function loadPosts() {
      const response = await fetch("https://jsonplaceholder.typicode.com/posts");
      const data = await response.json();
      setPosts(data);
    }
    loadPosts();
  }, []);

  return (
    <ul className="flex flex-col gap-4 p-8">
      {posts.map((post) => (
        <li key={post.id} className="rounded-lg border p-4">
          {/* TODO: แสดง post.title และ post.body */}
        </li>
      ))}
    </ul>
  );
}

ลองแก้ในเวิร์กสเปซด้านล่างให้ผ่านก่อน (แก้ที่ // TODO) เห็นผลทันทีใน Live Preview — แล้วค่อย ก๊อปโค้ดเดียวกันไปวางใน app/posts/page.tsx ของโปรเจคจริง เปิดดูที่ localhost:3000/posts

Mission ถัดไปจะเพิ่ม Loading/Error/Empty State ให้ครบ