チュートリアルのルーティングを修正 (#98)

* temp

* routing for tutorial

Author: tknkaa

apps/web/package.json

@@ -10,7 +10,6 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"shared": "workspace:*",
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
 		"@mui/base": "^5.0.0-beta.58",
@@ -21,7 +20,9 @@
 		"react-dom": "^19.1.1",
 		"react-icons": "^5.3.0",
 		"react-markdown": "^9.0.1",
-		"react-router-dom": "^6.26.2"
+		"react-router": "^7.8.2",
+		"react-router-dom": "^7.8.2",
+		"shared": "workspace:*"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.33.0",

apps/web/src/App.tsx

@@ -1,11 +1,13 @@
 import { useState } from "react";
+import { Route, Routes } from "react-router";
 import NotFound from "./pages/NotFound/NotFound";
 import GameInterface from "./pages/Play/GameInterface";
 import Result from "./pages/Result/Result";
 import Start from "./pages/Start/Start";
+import BasicRules from "./pages/Tutorial/BasicRules";
+import LocalRules from "./pages/Tutorial/LocalRules";
 import Tutorial from "./pages/Tutorial/Tutorial";
 import "./App.css";
-import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
 
 export type PlayerInfo = {
 	rank: number | null;
@@ -31,23 +33,25 @@ function App() {
 				fontFamily: "YuMincho, Hiragino Mincho ProN, serif",
 			}}
 		>
-			<Router>
-				<Routes>
-					<Route path="/" element={<Start setPlayerInfo={setPlayerInfo} />} />
-					<Route path="/tutorial" element={<Tutorial />} />
-					<Route
-						path="/play"
-						element={
-							<GameInterface
-								playerInfo={playerInfo}
-								setPlayerInfo={setPlayerInfo}
-							/>
-						}
-					/>
-					<Route path="/result" element={<Result playerInfo={playerInfo} />} />
-					<Route path="*" element={<NotFound />} />
-				</Routes>
-			</Router>
+			<Routes>
+				<Route index element={<Start setPlayerInfo={setPlayerInfo} />} />
+				<Route path="tutorial" element={<Tutorial />}>
+					<Route index element={<BasicRules />} />
+					<Route path="basic" element={<BasicRules />} />
+					<Route path="local" element={<LocalRules />} />
+				</Route>
+				<Route
+					path="play"
+					element={
+						<GameInterface
+							playerInfo={playerInfo}
+							setPlayerInfo={setPlayerInfo}
+						/>
+					}
+				/>
+				<Route path="result" element={<Result playerInfo={playerInfo} />} />
+				<Route path="*" element={<NotFound />} />
+			</Routes>
 		</div>
 	);
 }

apps/web/src/index.css

@@ -22,6 +22,7 @@ a {
 	color: #646cff;
 	text-decoration: inherit;
 }
+
 a:hover {
 	color: #535bf2;
 }
@@ -54,9 +55,11 @@ button {
 	cursor: pointer;
 	transition: border-color 0.25s;
 }
+
 button:hover {
 	border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
 	outline: 4px auto -webkit-focus-ring-color;
@@ -68,10 +71,8 @@ button:focus-visible {
 		color: #213547;
 		background-color: #ffffff;
 	}
+
 	a:hover {
 		color: #747bff;
 	}
-	button {
-		background-color: #f9f9f9;
-	}
 }

apps/web/src/main.tsx

@@ -1,10 +1,19 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router";
 import App from "./App.tsx";
 import "./index.css";
 
-createRoot(document.getElementById("root"))?.render(
-	<StrictMode>
-		<App />
-	</StrictMode>,
-);
+const rootElement = document.getElementById("root");
+
+if (rootElement) {
+	const root = createRoot(rootElement);
+
+	root.render(
+		<StrictMode>
+			<BrowserRouter>
+				<App />
+			</BrowserRouter>
+		</StrictMode>,
+	);
+}

apps/web/src/pages/Start/Start.tsx

@@ -68,15 +68,15 @@ export default function Start(props: StartProps) {
 
 				<button
 					onClick={handleUserNameSubmit}
-					className="w-115 h-17.5 bg-[#fd903c] text-white text-xl rounded-md my-3.5"
+					className="w-115 h-17.5 bg-black text-white text-xl rounded-md my-3.5"
 					type="button"
 				>
 					プレイ
 				</button>
 				<div className="flex gap-5">
 					<button
 						onClick={() => navigate("/tutorial")}
-						className="w-55 bg-[#85a4ba] text-white rounded-md"
+						className="w-55 bg-black text-white rounded-md"
 						type="button"
 					>
 						遊び方
@@ -90,7 +90,7 @@ export default function Start(props: StartProps) {
 							});
 							navigate("/result");
 						}}
-						className="w-55 bg-[#85a4ba] text-white rounded-md"
+						className="w-55 bg-black text-white rounded-md"
 						type="button"
 					>
 						ランキング

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";
 
-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>