temp

Author: tknkaa

apps/web/src/App.tsx

@@ -6,6 +6,8 @@ import Start from "./pages/Start/Start";
 import Tutorial from "./pages/Tutorial/Tutorial";
 import "./App.css";
 import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
+import BasicRules from "./pages/Tutorial/BasicRules";
+import LocalRules from "./pages/Tutorial/LocalRules";
 
 export type PlayerInfo = {
 	rank: number | null;
@@ -34,7 +36,11 @@ function App() {
 			<Router>
 				<Routes>
 					<Route path="/" element={<Start setPlayerInfo={setPlayerInfo} />} />
-					<Route path="/tutorial" element={<Tutorial />} />
+					<Route path="/tutorial" element={<Tutorial />}>
+						<Route index element={<BasicRules />} />
+						<Route path="basic" element={<BasicRules />} />
+						<Route path="local" element={<LocalRules />} />
+					</Route>
 					<Route
 						path="/play"
 						element={

apps/web/src/pages/Tutorial/Tutorial.tsx

@@ -1,17 +1,13 @@
 import HighlightOffIcon from "@mui/icons-material/HighlightOff";
-import { Button } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import BasicRules from "./BasicRules";
-import LocalRules from "./LocalRules";
+import { Link, Outlet, useNavigate, useParams } from "react-router-dom";
 
-type ContentsType = "basic" | "local";
+type ContentIdType = "basic" | "local";
 
 export default function Tutorial() {
-	const [currentContent, setCurrentContent] = useState<ContentsType>("basic");
 	const navigate = useNavigate();
-	const contents: ContentsType[] = ["basic", "local"];
+	const { contentId } = useParams<{ contentId: ContentIdType }>();
+	const contents: ContentIdType[] = ["basic", "local"];
 
 	return (
 		<div className="flex flex-col items-center bg-white rounded-[1rem] absolute h-[80vh] w-[80vw] left-[10%] top-[10%] pt-4 pl-4">
@@ -31,22 +27,25 @@ export default function Tutorial() {
 			<div className="grid size-full gap-[3%] h-[90%] overflow-auto pt-4">
 				<div className="col-start-1 col-end-2 flex w-50 flex-col border-r border-gray-300 px-5 h-full">
 					{contents.map((content) => (
-						<Button
+						<Link
 							key={content}
-							sx={{
-								marginBottom: "10%",
-							}}
-							variant={currentContent === content ? "contained" : "outlined"}
-							onClick={() => setCurrentContent(content)}
+							to={`/tutorial/${content}`}
+							className={`
+		mb-[10%] px-4 py-2 rounded border transition-colors duration-200
+		${
+			contentId === content
+				? "bg-blue-500 text-white border-blue-500"
+				: "bg-transparent text-blue-500 border-blue-500 hover:bg-blue-50"
+		}
+	`}
 						>
 							{content === "basic" ? "基本ルール" : "ローカルルール"}
-						</Button>
+						</Link>
 					))}
 				</div>
 
 				<div className="col-start-2 col-end-3 text-left">
-					{currentContent === "basic" && <BasicRules />}
-					{currentContent === "local" && <LocalRules />}
+					<Outlet />
 				</div>
 			</div>
 		</div>