add: QRコードを生成する

src/App.tsx

@@ -1,4 +1,5 @@
 import { Route, Routes } from "react-router-dom";
+import QRCodePage from "./pages/QRCodeGenerator";
 import Home from "./pages/home";
 import Shooter from "./pages/shooter";
 import Yatai from "./pages/yatai";
@@ -10,6 +11,7 @@ const AppRoutes = () => {
 				<Route path="/" element={<Home />} />
 				<Route path="/shooter" element={<Shooter />} />
 				<Route path="/yatai" element={<Yatai />} />
+				<Route path="/qrcode" element={<QRCodePage />} />
 			</Routes>
 		</>
 	);

src/components/QRCodeGenerator.tsx

@@ -0,0 +1,22 @@
+import QRCode from "qrcode.react";
+import { useLocation } from "react-router-dom";
+import { generateUUID } from "../utils/uuid";
+
+type QRCodeGeneratorProps = {
+	size?: number;
+};
+
+const QRCodeGenerator: React.FC<QRCodeGeneratorProps> = ({ size = 128 }) => {
+	const location = useLocation();
+	const baseUrl = `${window.location.origin}${location.pathname}`;
+	const roomId = generateUUID();
+	const url = `${baseUrl}?room_id=${roomId}`;
+
+	return (
+		<div>
+			<QRCode value={url} size={size} renderAs="svg" />
+		</div>
+	);
+};
+
+export default QRCodeGenerator;

src/pages/QRCodeGenerator/index.tsx

@@ -0,0 +1,11 @@
+import QRCodeGenerator from "../../components/QRCodeGenerator";
+
+const QRCodePage: React.FC = () => {
+	return (
+		<div>
+			<QRCodeGenerator size={256} />
+		</div>
+	);
+};
+
+export default QRCodePage;

src/utils/queryParams.ts

@@ -0,0 +1,19 @@
+export function generateQueryParams(
+	params: Record<string, string | number>,
+): string {
+	const searchParams = new URLSearchParams();
+	// biome-ignore lint/complexity/noForEach: <explanation>
+	Object.entries(params).forEach(([key, value]) => {
+		searchParams.append(key, String(value));
+	});
+	return searchParams.toString();
+}
+
+export function appendQueryParamsToUrl(
+	baseUrl: string,
+	params: Record<string, string | number>,
+): string {
+	const queryString = generateQueryParams(params);
+	const separator = baseUrl.includes("?") ? "&" : "?";
+	return `${baseUrl}${separator}${queryString}`;
+}