ルーティングを追加 && トピックリストのページを追加

package.json

@@ -11,13 +11,15 @@
 	},
 	"dependencies": {
 		"@tailwindcss/vite": "4.0.14",
+		"@types/react-router-dom": "5.3.3",
 		"cors": "2.8.5",
 		"dotenv": "16.4.7",
 		"express": "4.21.2",
 		"fs": "0.0.1-security",
 		"path": "0.12.7",
 		"react": "19.0.0",
 		"react-dom": "19.0.0",
+		"react-router-dom": "7.4.1",
 		"swr": "2.3.3",
 		"tailwindcss": "4.0.14"
 	},

src/App.tsx

@@ -0,0 +1,42 @@
+import type React from "react";
+import { Link, Route, BrowserRouter as Router, Routes } from "react-router-dom";
+import LP from "./pages/LP.tsx"; // LP コンポーネントのパスを指定
+import { Summary } from "./pages/Summary.tsx";
+import { TopicList } from "./pages/TopicList.tsx";
+
+const App: React.FC = () => {
+	return (
+		<Router>
+			<div>
+				<nav>
+					<ul>
+						<li>
+							<Link to="/" className="font-bold">
+								・LP
+							</Link>
+						</li>
+						<li>
+							<Link to="/summary" className="font-bold">
+								・Summary
+							</Link>
+						</li>
+						<li>
+							<Link to="/topic-list" className="font-bold">
+								・TopicList
+							</Link>
+						</li>
+					</ul>
+				</nav>
+
+				{/* ルーティングの設定 */}
+				<Routes>
+					<Route path="/" element={<LP />} />
+					<Route path="/summary" element={<Summary />} />
+					<Route path="/topic-list" element={<TopicList />} />
+				</Routes>
+			</div>
+		</Router>
+	);
+};
+
+export default App;

src/main.tsx

@@ -1,14 +1,11 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
-import { Summary } from "./components/Summary.tsx";
-import LP from "./pages/LP.tsx"; // LP コンポーネントのパスを指定
-
+import App from "./App.tsx";
 
 // biome-ignore lint/style/noNonNullAssertion: <explanation>
 createRoot(document.getElementById("root")!).render(
 	<StrictMode>
-		{/* <Summary /> */}
-		<LP />
+		<App />
 	</StrictMode>,
 );

src/pages/TopicList.tsx

@@ -0,0 +1,52 @@
+import type React from "react";
+import { useState } from "react";
+import useSWR from "swr";
+import { getTopic } from "../api/topic";
+
+export const TopicList: React.FC = () => {
+	const [topicUrl, setTopicUrl] = useState("");
+	const [topicTitle, setTopicTitle] = useState("");
+	const [topicSummary, setTopicSummary] = useState("");
+
+	const { error: topicError } = useSWR(
+		"/topic",
+		async () => {
+			const topics = await getTopic();
+			setTopicUrl(topics.length > 0 ? topics[0].url : "No URL");
+			setTopicTitle(topics.length > 0 ? topics[0].title : "No Title");
+			setTopicSummary(topics.length > 0 ? topics[0].summary : "No Summary");
+		},
+		{
+			refreshInterval: 3600000, // 3600秒ごとにポーリング
+		},
+	);
+
+	return (
+		// メインコンテナ
+		<div className="summary-container h-screen w-screen overflow-auto p-8 bg-gradient-to-br from-gray-100 to-gray-200 font-sans">
+			<h1 className="text-4xl font-extrabold text-gray-800 tracking-tight border-b pb-4 border-gray-300">
+				🌟 Summary of Comments on Topic
+			</h1>
+
+			{/* トピック表示 */}
+			<div className="topic bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
+				<h2 className="text-2xl font-semibold text-gray-700 mb-2">📌 Topic</h2>
+				{topicError ? (
+					<p className="text-red-600">⚠️ トピックの取得に失敗しました。</p>
+				) : (
+					<>
+						<p className="text-red-700 text-lg leading-relaxed">
+							{topicUrl || "（トピックURL取得中）"}
+						</p>
+						<p className="text-red-700 text-lg leading-relaxed">
+							{topicTitle || "（トピックタイトル取得中）"}
+						</p>
+						<p className="text-red-700 text-lg leading-relaxed">
+							{topicSummary || "（トピックサマリ取得中）"}
+						</p>
+					</>
+				)}
+			</div>
+		</div>
+	);
+};