#7 ぼちぼち

frontend/src/pages/PostDetailPage.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react'
+import { Link, useLocation, useParams } from 'react-router-dom'
+import axios from 'axios'
+import { API_BASE_URL, SITE_TITLE } from '../config'
+
+type Post = { id:         number
+              url:        string
+              title:      string
+              thumbnail:  string
+              tags:       { name: string }[] }
+
+const PostDetailPage = () => {
+  const { id } = useParams ()
+  const [post, setPost] = useState<Post | null> (null)
+
+  const location = useLocation ()
+
+  useEffect (() => {
+    if (!(id))
+      return
+    void (axios.get (`/api/posts/${ id }`)
+          .then (res => setPost (res.data))
+          .catch (err => console.error ('うんち!', err)))
+  }, [id])
+
+  if (!(post))
+    return <div>Loading...</div>
+
+  document.title = `${ post.url } | ${ SITE_TITLE }`
+
+  return (
+      <div className="p-4">
+        <h1 className="text-2xl font-bold mb-2">{post.url}</h1>
+        <img src={post.thumbnail} alt={post.url} className="mb-4 max-w-lg" />
+        <p className="mb-2">{post.description}</p>
+        <div className="text-sm text-gray-600">
+          タグ:
+          {post.tags.map(tag => (
+            <span key={tag.name} className="ml-2 px-2 py-1 bg-gray-200 rounded">
+              #{tag.name}
+            </span>
+          ))}
+        </div>
+      </div>
+      )
+}
+
+export default PostDetailPage

frontend/src/pages/PostPage.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import axios from 'axios'
+import { API_BASE_URL, SITE_TITLE } from '../config'
+
+const PostPage = () => {
+  const [posts, setPosts] = useState([])
+
+  const location = useLocation ()
+  const query = new URLSearchParams (location.search)
+  const tagsQuery = query.get ('tags') ?? ''
+  // const anyFlg = query.get ('match') === 'any'
+  const anyFlg = false
+  const tags = tagsQuery.split (' ').filter (e => e !== '')
+  document.title = `${ tags.join (anyFlg ? ' or ' : ' and ') } | ${ SITE_TITLE }`
+
+  useEffect(() => {
+    const fetchPosts = async () => {
+      try {
+        const response = await axios.get(`${ API_BASE_URL }/posts`, {
+            params: { tags:   tags.join (','),
+                      match:  (anyFlg ? 'any' : 'all') } })
+        setPosts(response.data)
+      } catch (error) {
+        console.error('Failed to fetch posts:', error)
+        setPosts([])
+      }
+    }
+    fetchPosts()
+  }, [location.search])
+
+  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.thumbnail}
+            className="object-none w-full h-full"
+          />
+        </Link>
+      ))}
+    </div>
+  )
+}
+
+export default PostPage