From e239fe743fc66a8712cf9886d3dfed3cc41fce36 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Fri, 13 Feb 2026 22:40:45 +0900
Subject: refactor(frontend): replace React Router BFF with Wouter SPA

Remove React Router 7 SSR/BFF architecture (server-side loaders,
actions, sessions, remix-auth) and replace with a client-side SPA
using Wouter for routing and cookie-based JWT auth.

- Replace reactRouter() Vite plugin with @vitejs/plugin-react
- Add index.html + app/main.tsx as SPA entry points
- Add Wouter routing with auth guards (ProtectedRoute/PublicOnlyRoute)
- Add client-side auth (app/auth.ts) and useAuth hook
- Migrate all route files to app/pages/ with client-side data fetching
- Update NavigateLink and GolfPlayAppGaming to use Wouter Link
- Remove .server/, routes/, root.tsx, react-router.config.ts
- Clean up tsconfig.json (remove .react-router references)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/app/hooks/useAuth.ts      | 58 ++++++++++++++++++++++++++++++++++++++
 frontend/app/hooks/usePageTitle.ts |  7 +++++
 2 files changed, 65 insertions(+)
 create mode 100644 frontend/app/hooks/useAuth.ts
 create mode 100644 frontend/app/hooks/usePageTitle.ts

(limited to 'frontend/app/hooks')

diff --git a/frontend/app/hooks/useAuth.ts b/frontend/app/hooks/useAuth.ts
new file mode 100644
index 0000000..8762734
--- /dev/null
+++ b/frontend/app/hooks/useAuth.ts
@@ -0,0 +1,58 @@
+import { useCallback, useSyncExternalStore } from "react";
+import { apiLogin } from "../api/client";
+import {
+	type User,
+	clearToken,
+	getToken,
+	getUserFromToken,
+	isTokenExpired,
+	setToken,
+} from "../auth";
+
+// Simple external store to trigger re-renders when auth state changes.
+let authVersion = 0;
+const listeners = new Set<() => void>();
+
+function subscribe(callback: () => void) {
+	listeners.add(callback);
+	return () => listeners.delete(callback);
+}
+
+function getSnapshot() {
+	return authVersion;
+}
+
+function notifyAuthChange() {
+	authVersion++;
+	for (const listener of listeners) {
+		listener();
+	}
+}
+
+export function useAuth(): {
+	user: User | null;
+	token: string | null;
+	isLoggedIn: boolean;
+	login: (username: string, password: string) => Promise<void>;
+	logout: () => void;
+} {
+	useSyncExternalStore(subscribe, getSnapshot);
+
+	const token = getToken();
+	const isExpired = isTokenExpired();
+	const user = isExpired ? null : getUserFromToken();
+	const isLoggedIn = user !== null && !isExpired;
+
+	const login = useCallback(async (username: string, password: string) => {
+		const { token } = await apiLogin(username, password);
+		setToken(token);
+		notifyAuthChange();
+	}, []);
+
+	const logout = useCallback(() => {
+		clearToken();
+		notifyAuthChange();
+	}, []);
+
+	return { user, token: isLoggedIn ? token : null, isLoggedIn, login, logout };
+}
diff --git a/frontend/app/hooks/usePageTitle.ts b/frontend/app/hooks/usePageTitle.ts
new file mode 100644
index 0000000..fb8def5
--- /dev/null
+++ b/frontend/app/hooks/usePageTitle.ts
@@ -0,0 +1,7 @@
+import { useEffect } from "react";
+
+export function usePageTitle(title: string) {
+	useEffect(() => {
+		document.title = title;
+	}, [title]);
+}
-- 
cgit v1.3.1