#7 ぼちぼち

frontend/src/pages/HomePage.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import axios from 'axios'
+import { API_BASE_URL, SITE_TITLE } from '../config'
+
+const HomePage = () => {
+  const [posts, setPosts] = useState([])
+
+  useEffect(() => {
+    const fetchPosts = async () => {
+      try {
+        const response = await axios.get(`${ API_BASE_URL }/posts`)
+        setPosts(response.data)
+      } catch (error) {
+        console.error('Failed to fetch posts:', error)
+      }
+    }
+    fetchPosts()
+    document.title = `${ SITE_TITLE }　〜 ぼざクリも、ぼざろ外も、外伝もあるんだよ。`
+  }, [])
+
+  return (
+    <div className="flex flex-wrap gap-4 p-4">
+      {posts.map((post) => (
+        <Link
+          to={`/posts/${post.id}`}
+          key={post.id}
+          className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg"
+        >
+          <img
+            src={post.image_url}
+            alt={post.title}
+            className="object-cover w-full h-full"
+          />
+        </Link>
+      ))}
+    </div>
+  )
+}
+
+export default HomePage

frontend/src/pages/TagPage.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react'
+import axios from 'axios'
+import { useParams } from 'react-router-dom'
+import { API_BASE_URL } from '../config'
+
+const TagPage = () => {
+  const { id } = useParams()
+  const [posts, setPosts] = useState([])
+  const [tagName, setTagName] = useState('')
+
+  useEffect (() => {
+    const fetchTag = async () => {
+      try {
+        const response = await axios.get (`${API_BASE_URL}/tags/${id}`)
+        setTagName (response.data.name)
+      } catch (error) {
+        console.error ('Error fetching tag:', error)
+      }
+    }
+
+    const fetchPosts = async () => {
+      try {
+        const response = await axios.get (`${API_BASE_URL}/tags/${id}/posts`)
+        setPosts (response.data)
+      } catch (error) {
+        console.error ('Error fetching posts:', error)
+      }
+    }
+
+    fetchTag ()
+    fetchPosts ()
+  }, [id])
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1 className="text-2xl font-bold mb-4">タグ: {tagName}</h1>
+      <div className="grid grid-cols-4 gap-4">
+        {posts.map ((post, index) => (
+          <div key={index} className="border rounded p-2">
+            <img src={post.image_url} alt={post.title} className="w-full h-48 object-cover mb-2" />
+            <h2 className="text-lg font-semibold">{post.title}</h2>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default TagPage