From c8f96269e053ced29bf028aa3678624280bd666a Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Wed, 22 Apr 2026 22:27:40 +0900
Subject: [PATCH] =?UTF-8?q?fix(admin):=20=EC=9D=B8=EC=A6=9D=20=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B4=ED=94=84=EC=82=AC=EC=9D=B4=ED=81=B4=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20=EB=8F=99=EC=9E=91=20?=
 =?UTF-8?q?=EC=95=88=EC=A0=95=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/layout/AdminLayout.tsx     |  43 +-
 .../src/components/layout/AdminSidebar.tsx    |  27 +-
 apps/admin/src/lib/api/auth.ts                |  28 +-
 apps/admin/src/lib/api/client.ts              |  90 ++--
 apps/admin/src/lib/auth/session.ts            |  77 +++
 apps/admin/src/lib/utils/localStorage.ts      |  25 -
 apps/admin/src/routes/auth/login.tsx          |   9 +-
 apps/admin/src/routes/bruno/index.tsx         | 372 +++++++-------
 apps/admin/src/routes/chat-socket/index.tsx   | 472 +++++++-----------
 apps/admin/src/routes/index.tsx               |   6 +-
 apps/admin/src/routes/scores/index.tsx        | 113 ++---
 apps/admin/src/types/auth.ts                  |   2 +-
 12 files changed, 591 insertions(+), 673 deletions(-)
 create mode 100644 apps/admin/src/lib/auth/session.ts

diff --git a/apps/admin/src/components/layout/AdminLayout.tsx b/apps/admin/src/components/layout/AdminLayout.tsx
index f1be337c..4b027072 100644
--- a/apps/admin/src/components/layout/AdminLayout.tsx
+++ b/apps/admin/src/components/layout/AdminLayout.tsx
@@ -1,8 +1,25 @@
+import { useNavigate } from "@tanstack/react-router";
+import { LogOut } from "lucide-react";
+import { toast } from "sonner";
+import { clearSession } from "@/lib/auth/session";
+import { type ActiveAdminMenu, AdminSidebar } from "./AdminSidebar";
+
 interface AdminLayoutProps {
 	children: React.ReactNode;
+	activeMenu: ActiveAdminMenu;
+	title: string;
+	description?: string;
 }
 
-export function AdminLayout({ children }: AdminLayoutProps) {
+export function AdminLayout({ children, activeMenu, title, description }: AdminLayoutProps) {
+	const navigate = useNavigate();
+
+	const handleLogout = () => {
+		clearSession();
+		toast.success("로그아웃되었습니다.");
+		void navigate({ to: "/auth/login" });
+	};
+
 	return (
 		<div className="min-h-screen bg-[radial-gradient(circle_at_top,_#eef2ff_0%,_#fafafa_48%,_#f5f5f5_100%)] text-k-800">
 			<div className="mx-auto flex min-h-screen w-full max-w-[1440px] flex-col px-3 py-4 sm:px-4 sm:py-6 lg:px-8">
@@ -16,9 +33,29 @@ export function AdminLayout({ children }: AdminLayoutProps) {
 							<h1 className="typo-sb-7 text-k-900">Admin</h1>
 						</div>
 					</div>
-					<p className="hidden rounded-full bg-bg-50 px-3 py-1 typo-medium-4 text-k-600 sm:block">운영 콘솔</p>
+					<div className="flex items-center gap-2">
+						<p className="hidden rounded-full bg-bg-50 px-3 py-1 typo-medium-4 text-k-600 sm:block">운영 콘솔</p>
+						<button
+							type="button"
+							onClick={handleLogout}
+							className="inline-flex items-center gap-1 rounded-md border border-k-200 px-3 py-1.5 text-k-700 typo-medium-4 hover:bg-k-50"
+						>
+							<LogOut className="h-4 w-4" />
+							로그아웃
+						</button>
+					</div>
 				</header>
-				<main className="flex-1">{children}</main>
+
+				<div className="flex min-h-[calc(100vh-96px)] overflow-hidden rounded-[24px] border border-k-100 bg-k-0 shadow-sdw-a">
+					<AdminSidebar activeMenu={activeMenu} />
+					<section className="flex-1 bg-bg-50 p-4 sm:p-6 lg:p-7">
+						<div className="h-full rounded-2xl border border-k-100 bg-k-0 p-4 shadow-[0_8px_24px_-22px_rgba(26,31,39,0.45)] sm:p-6">
+							<h1 className="typo-bold-1 text-k-900">{title}</h1>
+							{description ? <p className="mt-1 typo-regular-4 text-k-500">{description}</p> : null}
+							{children}
+						</div>
+					</section>
+				</div>
 			</div>
 		</div>
 	);
diff --git a/apps/admin/src/components/layout/AdminSidebar.tsx b/apps/admin/src/components/layout/AdminSidebar.tsx
index e2e0a3f9..aeab9a3a 100644
--- a/apps/admin/src/components/layout/AdminSidebar.tsx
+++ b/apps/admin/src/components/layout/AdminSidebar.tsx
@@ -1,19 +1,19 @@
-import { Building2, FileText, FlaskConical, MessageSquare, UserCircle2 } from "lucide-react";
+import { Link } from "@tanstack/react-router";
+import { FileText, FlaskConical, MessageSquare } from "lucide-react";
 import { cn } from "@/lib/utils";
 
-interface AdminSidebarProps {
-	activeMenu: "scores" | "bruno" | "chatSocket";
-}
+export type ActiveAdminMenu = "scores" | "bruno" | "chatSocket";
 
 const sideMenus = [
-	{ key: "university", label: "대학 관리", icon: Building2 },
-	{ key: "mentor", label: "멘토 관리", icon: UserCircle2 },
-	{ key: "user", label: "유저 관리", icon: UserCircle2 },
 	{ key: "scores", label: "성적 관리", icon: FileText, to: "/scores" as const },
 	{ key: "bruno", label: "Bruno API", icon: FlaskConical, to: "/bruno" as const },
 	{ key: "chatSocket", label: "채팅 소켓", icon: MessageSquare, to: "/chat-socket" as const },
 ] as const;
 
+interface AdminSidebarProps {
+	activeMenu: ActiveAdminMenu;
+}
+
 export function AdminSidebar({ activeMenu }: AdminSidebarProps) {
 	return (
 		<aside className="flex w-[212px] flex-col border-r border-k-100 bg-bg-100 px-5 py-7">
@@ -35,20 +35,11 @@ export function AdminSidebar({ activeMenu }: AdminSidebarProps) {
 						isActive ? "bg-primary-100 text-primary" : "text-k-400 hover:bg-k-0 hover:text-k-700",
 					);
 
-					if ("to" in menu) {
-						return (
-							<a key={menu.label} href={menu.to} className={menuClassName}>
-								<menu.icon className="h-4 w-4" />
-								{menu.label}
-							</a>
-						);
-					}
-
 					return (
-						<button key={menu.label} type="button" className={menuClassName} disabled>
+						<Link key={menu.label} to={menu.to} preload="intent" className={menuClassName}>
 							<menu.icon className="h-4 w-4" />
 							{menu.label}
-						</button>
+						</Link>
 					);
 				})}
 			</nav>
diff --git a/apps/admin/src/lib/api/auth.ts b/apps/admin/src/lib/api/auth.ts
index 21c56dc3..6f05e8a5 100644
--- a/apps/admin/src/lib/api/auth.ts
+++ b/apps/admin/src/lib/api/auth.ts
@@ -1,15 +1,19 @@
-import type { AxiosResponse } from "axios";
-import { publicAxiosInstance } from "@/lib/api/client";
+import axios, { type AxiosResponse } from "axios";
 import type { AdminSignInResponse, ReissueAccessTokenResponse } from "@/types/auth";
 
+const API_SERVER_URL = import.meta.env.VITE_API_SERVER_URL?.trim();
+
+if (!API_SERVER_URL) {
+	throw new Error("[admin] VITE_API_SERVER_URL is required. Configure it in your environment.");
+}
+
+const authAxiosInstance = axios.create({
+	baseURL: API_SERVER_URL,
+	withCredentials: true,
+});
+
 export const adminSignInApi = (email: string, password: string): Promise<AxiosResponse<AdminSignInResponse>> =>
-	publicAxiosInstance.post("/auth/email/sign-in", { email, password });
-
-export const reissueAccessTokenApi = (refreshToken: string): Promise<AxiosResponse<ReissueAccessTokenResponse>> =>
-	publicAxiosInstance.post(
-		"/admin/auth/reissue",
-		{},
-		{
-			headers: { Authorization: `Bearer ${refreshToken}` },
-		},
-	);
+	authAxiosInstance.post("/auth/email/sign-in", { email, password });
+
+export const reissueAccessTokenApi = (): Promise<AxiosResponse<ReissueAccessTokenResponse>> =>
+	authAxiosInstance.post("/auth/reissue");
diff --git a/apps/admin/src/lib/api/client.ts b/apps/admin/src/lib/api/client.ts
index 711a44ed..c16356a6 100644
--- a/apps/admin/src/lib/api/client.ts
+++ b/apps/admin/src/lib/api/client.ts
@@ -1,13 +1,5 @@
-import axios, { type AxiosInstance } from "axios";
-import { reissueAccessTokenApi } from "@/lib/api/auth";
-import { isTokenExpired } from "@/lib/utils/jwtUtils";
-import {
-	loadAccessToken,
-	loadRefreshToken,
-	removeAccessToken,
-	removeRefreshToken,
-	saveAccessToken,
-} from "@/lib/utils/localStorage";
+import axios, { type AxiosInstance, type InternalAxiosRequestConfig } from "axios";
+import { clearSession, ensureSessionToken, reissueAccessTokenIfPossible } from "@/lib/auth/session";
 
 const convertToBearer = (token: string) => `Bearer ${token}`;
 
@@ -22,34 +14,24 @@ export const axiosInstance: AxiosInstance = axios.create({
 	withCredentials: true,
 });
 
+const redirectToLogin = () => {
+	if (typeof window !== "undefined" && window.location.pathname !== "/auth/login") {
+		window.location.replace("/auth/login");
+	}
+};
+
 axiosInstance.interceptors.request.use(
 	async (config) => {
 		const newConfig = { ...config };
-		let accessToken: string | null = loadAccessToken();
-
-		if (accessToken === null || isTokenExpired(accessToken)) {
-			const refreshToken = loadRefreshToken();
-			if (refreshToken === null || isTokenExpired(refreshToken)) {
-				removeAccessToken();
-				removeRefreshToken();
-				return config;
-			}
+		const accessToken = await ensureSessionToken();
 
-			await reissueAccessTokenApi(refreshToken)
-				.then((res) => {
-					accessToken = res.data.accessToken;
-					saveAccessToken(accessToken);
-				})
-				.catch((err) => {
-					removeAccessToken();
-					removeRefreshToken();
-					console.error("인증 토큰 갱신중 오류가 발생했습니다", err);
-				});
+		if (!accessToken) {
+			clearSession();
+			redirectToLogin();
+			return Promise.reject(new Error("로그인이 필요합니다."));
 		}
 
-		if (accessToken !== null) {
-			newConfig.headers.Authorization = convertToBearer(accessToken);
-		}
+		newConfig.headers.Authorization = convertToBearer(accessToken);
 		return newConfig;
 	},
 	(error) => Promise.reject(error),
@@ -58,37 +40,25 @@ axiosInstance.interceptors.request.use(
 axiosInstance.interceptors.response.use(
 	(response) => response,
 	async (error) => {
-		const newError = { ...error };
-		if (error.response?.status === 401 || error.response?.status === 403) {
-			const refreshToken = loadRefreshToken();
-
-			if (refreshToken === null || isTokenExpired(refreshToken)) {
-				removeAccessToken();
-				removeRefreshToken();
-				throw newError;
-			}
-
-			try {
-				const newAccessToken = await reissueAccessTokenApi(refreshToken).then((res) => res.data.accessToken);
-				saveAccessToken(newAccessToken);
+		const status = error.response?.status;
+		const originalRequest = error.config as (InternalAxiosRequestConfig & { _retry?: boolean }) | undefined;
 
-				if (error?.config.headers === undefined) {
-					newError.config.headers = {};
-				}
-				newError.config.headers.Authorization = convertToBearer(newAccessToken);
+		if ((status === 401 || status === 403) && originalRequest && !originalRequest._retry) {
+			originalRequest._retry = true;
 
-				return await axios.request(newError.config);
-			} catch (_err) {
-				removeAccessToken();
-				removeRefreshToken();
-				throw Error("로그인이 필요합니다");
+			const reissuedAccessToken = await reissueAccessTokenIfPossible();
+			if (reissuedAccessToken) {
+				originalRequest.headers = originalRequest.headers ?? {};
+				originalRequest.headers.Authorization = convertToBearer(reissuedAccessToken);
+				return axiosInstance(originalRequest);
 			}
-		} else {
-			throw newError;
 		}
+
+		if (status === 401 || status === 403) {
+			clearSession();
+			redirectToLogin();
+		}
+
+		return Promise.reject(error);
 	},
 );
-
-export const publicAxiosInstance: AxiosInstance = axios.create({
-	baseURL: API_SERVER_URL,
-});
diff --git a/apps/admin/src/lib/auth/session.ts b/apps/admin/src/lib/auth/session.ts
new file mode 100644
index 00000000..93c50c43
--- /dev/null
+++ b/apps/admin/src/lib/auth/session.ts
@@ -0,0 +1,77 @@
+import { redirect } from "@tanstack/react-router";
+import { reissueAccessTokenApi } from "@/lib/api/auth";
+import { isTokenExpired } from "@/lib/utils/jwtUtils";
+import { loadAccessToken, removeAccessToken, saveAccessToken } from "@/lib/utils/localStorage";
+
+let reissuePromise: Promise<string | null> | null = null;
+
+const getValidAccessToken = (): string | null => {
+	const accessToken = loadAccessToken();
+	if (!accessToken) {
+		return null;
+	}
+
+	if (isTokenExpired(accessToken)) {
+		removeAccessToken();
+		return null;
+	}
+
+	return accessToken;
+};
+
+export const clearSession = () => {
+	removeAccessToken();
+};
+
+export const reissueAccessTokenIfPossible = async (): Promise<string | null> => {
+	if (reissuePromise) {
+		return reissuePromise;
+	}
+
+	reissuePromise = (async () => {
+		try {
+			const response = await reissueAccessTokenApi();
+			const nextAccessToken = response.data.accessToken;
+
+			if (!nextAccessToken) {
+				clearSession();
+				return null;
+			}
+
+			saveAccessToken(nextAccessToken);
+			return nextAccessToken;
+		} catch {
+			clearSession();
+			return null;
+		} finally {
+			reissuePromise = null;
+		}
+	})();
+
+	return reissuePromise;
+};
+
+export const ensureSessionToken = async (): Promise<string | null> => {
+	const validAccessToken = getValidAccessToken();
+	if (validAccessToken) {
+		return validAccessToken;
+	}
+
+	return reissueAccessTokenIfPossible();
+};
+
+export const requireAdminSession = async (): Promise<string> => {
+	const token = await ensureSessionToken();
+	if (!token) {
+		throw redirect({ to: "/auth/login" });
+	}
+
+	return token;
+};
+
+export const redirectIfAuthenticated = async () => {
+	const token = await ensureSessionToken();
+	if (token) {
+		throw redirect({ to: "/scores" });
+	}
+};
diff --git a/apps/admin/src/lib/utils/localStorage.ts b/apps/admin/src/lib/utils/localStorage.ts
index 1e055473..d4d285da 100644
--- a/apps/admin/src/lib/utils/localStorage.ts
+++ b/apps/admin/src/lib/utils/localStorage.ts
@@ -1,28 +1,3 @@
-export const loadRefreshToken = () => {
-	try {
-		return localStorage.getItem("refreshToken");
-	} catch (err) {
-		console.error("Could not load refresh token", err);
-		return null;
-	}
-};
-
-export const saveRefreshToken = (token: string) => {
-	try {
-		localStorage.setItem("refreshToken", token);
-	} catch (err) {
-		console.error("Could not save refresh token", err);
-	}
-};
-
-export const removeRefreshToken = () => {
-	try {
-		localStorage.removeItem("refreshToken");
-	} catch (err) {
-		console.error("Could not remove refresh token", err);
-	}
-};
-
 export const loadAccessToken = () => {
 	try {
 		return localStorage.getItem("accessToken");
diff --git a/apps/admin/src/routes/auth/login.tsx b/apps/admin/src/routes/auth/login.tsx
index 9543b92d..c714565e 100644
--- a/apps/admin/src/routes/auth/login.tsx
+++ b/apps/admin/src/routes/auth/login.tsx
@@ -7,9 +7,13 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { adminSignInApi } from "@/lib/api/auth";
-import { saveAccessToken, saveRefreshToken } from "@/lib/utils/localStorage";
+import { redirectIfAuthenticated } from "@/lib/auth/session";
+import { saveAccessToken } from "@/lib/utils/localStorage";
 
 export const Route = createFileRoute("/auth/login")({
+	beforeLoad: async () => {
+		await redirectIfAuthenticated();
+	},
 	component: LoginPage,
 });
 
@@ -32,10 +36,9 @@ function LoginPage() {
 
 		try {
 			const response = await signInMutation.mutateAsync({ nextEmail: email, nextPassword: password });
-			const { accessToken, refreshToken } = response.data;
+			const { accessToken } = response.data;
 
 			saveAccessToken(accessToken);
-			saveRefreshToken(refreshToken);
 
 			toast("로그인 성공", {
 				description: "관리자 페이지로 이동합니다.",
diff --git a/apps/admin/src/routes/bruno/index.tsx b/apps/admin/src/routes/bruno/index.tsx
index 2e42e134..b43faa1e 100644
--- a/apps/admin/src/routes/bruno/index.tsx
+++ b/apps/admin/src/routes/bruno/index.tsx
@@ -1,8 +1,8 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 import { Copy, Play, RotateCcw } from "lucide-react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
-import { AdminSidebar } from "@/components/layout/AdminSidebar";
+import { AdminLayout } from "@/components/layout/AdminLayout";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -10,9 +10,8 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { axiosInstance } from "@/lib/api/client";
+import { requireAdminSession } from "@/lib/auth/session";
 import { cn } from "@/lib/utils";
-import { isTokenExpired } from "@/lib/utils/jwtUtils";
-import { loadAccessToken } from "@/lib/utils/localStorage";
 
 type DefinitionMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD" | "OPTIONS";
 type MethodFilter = "ALL" | DefinitionMethod;
@@ -172,13 +171,8 @@ const splitPathAndInlineQuery = (pathWithInlineQuery: string) => {
 const METHOD_FILTERS: MethodFilter[] = ["ALL", "GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"];
 
 export const Route = createFileRoute("/bruno/")({
-	beforeLoad: () => {
-		if (typeof window !== "undefined") {
-			const token = loadAccessToken();
-			if (!token || isTokenExpired(token)) {
-				throw redirect({ to: "/auth/login" });
-			}
-		}
+	beforeLoad: async () => {
+		await requireAdminSession();
 	},
 	component: BrunoApiPage,
 });
@@ -291,189 +285,183 @@ function BrunoApiPage() {
 	};
 
 	return (
-		<div className="mx-auto w-full max-w-[1440px] rounded-[24px] border border-k-100 bg-k-0 shadow-sdw-a">
-			<div className="flex min-h-[calc(100vh-96px)]">
-				<AdminSidebar activeMenu="bruno" />
-
-				<section className="flex-1 bg-bg-50 p-7">
-					<div className="grid gap-4 lg:grid-cols-[320px_minmax(0,1fr)]">
-						<Card className="border-k-100">
-							<CardHeader className="pb-3">
-								<CardTitle className="typo-sb-9 text-k-800">Bruno API 목록</CardTitle>
-								<Input
-									placeholder="도메인/엔드포인트 검색"
-									value={search}
-									onChange={(event) => setSearch(event.target.value)}
-								/>
-								<div className="flex flex-wrap gap-1">
-									{METHOD_FILTERS.map((method) => {
-										const active = methodFilter === method;
-										return (
-											<Button
-												key={method}
-												type="button"
-												size="sm"
-												variant={active ? "default" : "outline"}
-												onClick={() => setMethodFilter(method)}
-											>
-												{method}
-											</Button>
-										);
-									})}
-								</div>
-							</CardHeader>
-							<CardContent className="max-h-[680px] overflow-auto pt-0">
-								<div className="space-y-2">
-									{visibleEndpoints.map((endpoint) => {
-										const key = `${endpoint.domain}:${endpoint.name}`;
-										const active = key === selectedKey;
-
-										return (
-											<button
-												key={key}
-												type="button"
-												onClick={() => setSelectedKey(key)}
-												className={cn(
-													"w-full rounded-md border px-3 py-2 text-left transition-colors",
-													active ? "border-primary bg-primary-100" : "border-k-100 bg-k-0 hover:bg-k-50",
-												)}
-											>
-												<div className="flex items-center justify-between gap-2">
-													<span className="truncate typo-sb-11 text-k-800">{endpoint.name}</span>
-													<span className="rounded bg-k-100 px-1.5 py-0.5 typo-regular-4 text-k-700">
-														{endpoint.definition.method}
-													</span>
-												</div>
-												<p className="mt-1 truncate typo-regular-4 text-k-500">{endpoint.domain}</p>
-											</button>
-										);
-									})}
-								</div>
-							</CardContent>
-						</Card>
-
-						<div className="space-y-4">
-							<Card className="border-k-100">
-								<CardHeader className="pb-3">
-									<div className="flex items-center justify-between gap-2">
-										<CardTitle className="typo-sb-9 text-k-800">요청 빌더</CardTitle>
-										<div className="flex gap-2">
-											<Button type="button" variant="outline" onClick={handleResetEditors}>
-												<RotateCcw className="h-4 w-4" />
-												초기화
-											</Button>
-											<Button type="button" onClick={handleSendRequest} disabled={isSending || !selectedEndpoint}>
-												<Play className="h-4 w-4" />
-												{isSending ? "요청 중..." : "요청 보내기"}
-											</Button>
-										</div>
-									</div>
-									{selectedEndpoint ? (
-										<div className="rounded-md border border-k-100 bg-bg-50 px-3 py-2">
-											<p className="typo-sb-11 text-k-700">{selectedEndpoint.definition.method}</p>
-											<p className="mt-1 break-all typo-regular-4 text-k-600">{selectedEndpoint.definition.path}</p>
-										</div>
-									) : (
-										<p className="typo-regular-4 text-k-500">왼쪽에서 API를 선택해주세요.</p>
-									)}
-								</CardHeader>
-								<CardContent className="pt-0">
-									<Tabs defaultValue="path">
-										<TabsList>
-											<TabsTrigger value="path">Path Params</TabsTrigger>
-											<TabsTrigger value="query">Query</TabsTrigger>
-											<TabsTrigger value="body">Body</TabsTrigger>
-											<TabsTrigger value="headers">Headers</TabsTrigger>
-										</TabsList>
-
-										<TabsContent value="path">
-											<Textarea
-												value={pathParamsText}
-												onChange={(event) => setPathParamsText(event.target.value)}
-												className="min-h-36 font-mono"
-											/>
-										</TabsContent>
-										<TabsContent value="query">
-											<Textarea
-												value={queryParamsText}
-												onChange={(event) => setQueryParamsText(event.target.value)}
-												className="min-h-36 font-mono"
-											/>
-										</TabsContent>
-										<TabsContent value="body">
-											<Textarea
-												value={bodyText}
-												onChange={(event) => setBodyText(event.target.value)}
-												className="min-h-44 font-mono"
-											/>
-										</TabsContent>
-										<TabsContent value="headers">
-											<Textarea
-												value={headersText}
-												onChange={(event) => setHeadersText(event.target.value)}
-												className="min-h-36 font-mono"
-											/>
-										</TabsContent>
-									</Tabs>
-								</CardContent>
-							</Card>
-
-							<Card className="border-k-100">
-								<CardHeader className="pb-3">
-									<div className="flex items-center justify-between gap-2">
-										<CardTitle className="typo-sb-9 text-k-800">응답</CardTitle>
-										<Button type="button" variant="outline" onClick={handleCopyResponse} disabled={!requestResult}>
-											<Copy className="h-4 w-4" />
-											응답 복사
-										</Button>
-									</div>
-									{requestResult ? (
-										<div className="flex items-center gap-2 typo-regular-4 text-k-600">
-											<span className="rounded bg-k-100 px-2 py-1">HTTP {requestResult.status}</span>
-											<span>{requestResult.durationMs}ms</span>
-										</div>
-									) : null}
-								</CardHeader>
-								<CardContent className="pt-0">
-									{requestResult ? (
-										<Tabs defaultValue="body">
-											<TabsList>
-												<TabsTrigger value="body">Body</TabsTrigger>
-												<TabsTrigger value="headers">Headers</TabsTrigger>
-											</TabsList>
-											<TabsContent value="body">
-												<Textarea value={toPrettyJson(requestResult.body)} readOnly className="min-h-48 font-mono" />
-											</TabsContent>
-											<TabsContent value="headers">
-												<Table>
-													<TableHeader>
-														<TableRow>
-															<TableHead>Header</TableHead>
-															<TableHead>Value</TableHead>
-														</TableRow>
-													</TableHeader>
-													<TableBody>
-														{Object.entries(requestResult.headers).map(([key, value]) => (
-															<TableRow key={key}>
-																<TableCell className="font-mono text-k-600">{key}</TableCell>
-																<TableCell className="break-all font-mono text-k-700">{value}</TableCell>
-															</TableRow>
-														))}
-													</TableBody>
-												</Table>
-											</TabsContent>
-										</Tabs>
-									) : (
-										<div className="rounded-md border border-dashed border-k-200 bg-bg-50 px-4 py-8 text-center typo-regular-4 text-k-500">
-											요청을 보내면 응답이 여기에 표시됩니다.
+		<AdminLayout activeMenu="bruno" title="Bruno API" description="정의된 API를 조회하고 요청/응답을 검증합니다.">
+			<div className="grid gap-4 lg:grid-cols-[320px_minmax(0,1fr)]">
+				<Card className="border-k-100">
+					<CardHeader className="pb-3">
+						<CardTitle className="typo-sb-9 text-k-800">Bruno API 목록</CardTitle>
+						<Input
+							placeholder="도메인/엔드포인트 검색"
+							value={search}
+							onChange={(event) => setSearch(event.target.value)}
+						/>
+						<div className="flex flex-wrap gap-1">
+							{METHOD_FILTERS.map((method) => {
+								const active = methodFilter === method;
+								return (
+									<Button
+										key={method}
+										type="button"
+										size="sm"
+										variant={active ? "default" : "outline"}
+										onClick={() => setMethodFilter(method)}
+									>
+										{method}
+									</Button>
+								);
+							})}
+						</div>
+					</CardHeader>
+					<CardContent className="max-h-[680px] overflow-auto pt-0">
+						<div className="space-y-2">
+							{visibleEndpoints.map((endpoint) => {
+								const key = `${endpoint.domain}:${endpoint.name}`;
+								const active = key === selectedKey;
+
+								return (
+									<button
+										key={key}
+										type="button"
+										onClick={() => setSelectedKey(key)}
+										className={cn(
+											"w-full rounded-md border px-3 py-2 text-left transition-colors",
+											active ? "border-primary bg-primary-100" : "border-k-100 bg-k-0 hover:bg-k-50",
+										)}
+									>
+										<div className="flex items-center justify-between gap-2">
+											<span className="truncate typo-sb-11 text-k-800">{endpoint.name}</span>
+											<span className="rounded bg-k-100 px-1.5 py-0.5 typo-regular-4 text-k-700">
+												{endpoint.definition.method}
+											</span>
 										</div>
-									)}
-								</CardContent>
-							</Card>
+										<p className="mt-1 truncate typo-regular-4 text-k-500">{endpoint.domain}</p>
+									</button>
+								);
+							})}
 						</div>
-					</div>
-				</section>
+					</CardContent>
+				</Card>
+
+				<div className="space-y-4">
+					<Card className="border-k-100">
+						<CardHeader className="pb-3">
+							<div className="flex items-center justify-between gap-2">
+								<CardTitle className="typo-sb-9 text-k-800">요청 빌더</CardTitle>
+								<div className="flex gap-2">
+									<Button type="button" variant="outline" onClick={handleResetEditors}>
+										<RotateCcw className="h-4 w-4" />
+										초기화
+									</Button>
+									<Button type="button" onClick={handleSendRequest} disabled={isSending || !selectedEndpoint}>
+										<Play className="h-4 w-4" />
+										{isSending ? "요청 중..." : "요청 보내기"}
+									</Button>
+								</div>
+							</div>
+							{selectedEndpoint ? (
+								<div className="rounded-md border border-k-100 bg-bg-50 px-3 py-2">
+									<p className="typo-sb-11 text-k-700">{selectedEndpoint.definition.method}</p>
+									<p className="mt-1 break-all typo-regular-4 text-k-600">{selectedEndpoint.definition.path}</p>
+								</div>
+							) : (
+								<p className="typo-regular-4 text-k-500">왼쪽에서 API를 선택해주세요.</p>
+							)}
+						</CardHeader>
+						<CardContent className="pt-0">
+							<Tabs defaultValue="path">
+								<TabsList>
+									<TabsTrigger value="path">Path Params</TabsTrigger>
+									<TabsTrigger value="query">Query</TabsTrigger>
+									<TabsTrigger value="body">Body</TabsTrigger>
+									<TabsTrigger value="headers">Headers</TabsTrigger>
+								</TabsList>
+
+								<TabsContent value="path">
+									<Textarea
+										value={pathParamsText}
+										onChange={(event) => setPathParamsText(event.target.value)}
+										className="min-h-36 font-mono"
+									/>
+								</TabsContent>
+								<TabsContent value="query">
+									<Textarea
+										value={queryParamsText}
+										onChange={(event) => setQueryParamsText(event.target.value)}
+										className="min-h-36 font-mono"
+									/>
+								</TabsContent>
+								<TabsContent value="body">
+									<Textarea
+										value={bodyText}
+										onChange={(event) => setBodyText(event.target.value)}
+										className="min-h-44 font-mono"
+									/>
+								</TabsContent>
+								<TabsContent value="headers">
+									<Textarea
+										value={headersText}
+										onChange={(event) => setHeadersText(event.target.value)}
+										className="min-h-36 font-mono"
+									/>
+								</TabsContent>
+							</Tabs>
+						</CardContent>
+					</Card>
+
+					<Card className="border-k-100">
+						<CardHeader className="pb-3">
+							<div className="flex items-center justify-between gap-2">
+								<CardTitle className="typo-sb-9 text-k-800">응답</CardTitle>
+								<Button type="button" variant="outline" onClick={handleCopyResponse} disabled={!requestResult}>
+									<Copy className="h-4 w-4" />
+									응답 복사
+								</Button>
+							</div>
+							{requestResult ? (
+								<div className="flex items-center gap-2 typo-regular-4 text-k-600">
+									<span className="rounded bg-k-100 px-2 py-1">HTTP {requestResult.status}</span>
+									<span>{requestResult.durationMs}ms</span>
+								</div>
+							) : null}
+						</CardHeader>
+						<CardContent className="pt-0">
+							{requestResult ? (
+								<Tabs defaultValue="body">
+									<TabsList>
+										<TabsTrigger value="body">Body</TabsTrigger>
+										<TabsTrigger value="headers">Headers</TabsTrigger>
+									</TabsList>
+									<TabsContent value="body">
+										<Textarea value={toPrettyJson(requestResult.body)} readOnly className="min-h-48 font-mono" />
+									</TabsContent>
+									<TabsContent value="headers">
+										<Table>
+											<TableHeader>
+												<TableRow>
+													<TableHead>Header</TableHead>
+													<TableHead>Value</TableHead>
+												</TableRow>
+											</TableHeader>
+											<TableBody>
+												{Object.entries(requestResult.headers).map(([key, value]) => (
+													<TableRow key={key}>
+														<TableCell className="font-mono text-k-600">{key}</TableCell>
+														<TableCell className="break-all font-mono text-k-700">{value}</TableCell>
+													</TableRow>
+												))}
+											</TableBody>
+										</Table>
+									</TabsContent>
+								</Tabs>
+							) : (
+								<div className="rounded-md border border-dashed border-k-200 bg-bg-50 px-4 py-8 text-center typo-regular-4 text-k-500">
+									요청을 보내면 응답이 여기에 표시됩니다.
+								</div>
+							)}
+						</CardContent>
+					</Card>
+				</div>
 			</div>
-		</div>
+		</AdminLayout>
 	);
 }
diff --git a/apps/admin/src/routes/chat-socket/index.tsx b/apps/admin/src/routes/chat-socket/index.tsx
index 29fdd034..fd92c6b6 100644
--- a/apps/admin/src/routes/chat-socket/index.tsx
+++ b/apps/admin/src/routes/chat-socket/index.tsx
@@ -1,16 +1,16 @@
 import { Client, type IMessage, type StompHeaders, type StompSubscription } from "@stomp/stompjs";
 import { createFileRoute } from "@tanstack/react-router";
-import { KeyRound, Link2, LogIn, Plug, PlugZap, RefreshCw, Send } from "lucide-react";
+import { Link2, Plug, PlugZap, RefreshCw, Send } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import SockJS from "sockjs-client";
 import { toast } from "sonner";
-import { AdminSidebar } from "@/components/layout/AdminSidebar";
+import { AdminLayout } from "@/components/layout/AdminLayout";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { adminSignInApi } from "@/lib/api/auth";
-import { loadAccessToken, loadRefreshToken, saveAccessToken, saveRefreshToken } from "@/lib/utils/localStorage";
+import { requireAdminSession } from "@/lib/auth/session";
+import { loadAccessToken } from "@/lib/utils/localStorage";
 
 type ConnectionState = "DISCONNECTED" | "CONNECTING" | "CONNECTED" | "ERROR";
 
@@ -77,21 +77,6 @@ const parseJsonRecord = (text: string, label: string): Record<string, string> =>
 
 const parseJsonBody = (text: string) => JSON.stringify(JSON.parse(text));
 
-const extractApiErrorMessage = (error: unknown) =>
-	error && typeof error === "object" && "response" in error
-		? (error as { response?: { data?: { message?: string } } }).response?.data?.message
-		: undefined;
-
-const maskToken = (value: string | null) => {
-	if (!value) {
-		return "-";
-	}
-	if (value.length <= 20) {
-		return value;
-	}
-	return `${value.slice(0, 10)}...${value.slice(-10)}`;
-};
-
 const maskQueryToken = (value: string) => {
 	if (!value) {
 		return "";
@@ -103,6 +88,9 @@ const maskQueryToken = (value: string) => {
 };
 
 export const Route = createFileRoute("/chat-socket/")({
+	beforeLoad: async () => {
+		await requireAdminSession();
+	},
 	component: ChatSocketPage,
 });
 
@@ -113,9 +101,6 @@ function ChatSocketPage() {
 	const [connectionState, setConnectionState] = useState<ConnectionState>("DISCONNECTED");
 	const [serverUrl, setServerUrl] = useState(import.meta.env.VITE_API_SERVER_URL?.trim() ?? "");
 	const [token, setToken] = useState("");
-	const [refreshToken, setRefreshToken] = useState("");
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
 	const [roomId, setRoomId] = useState("");
 	const [topicTemplate, setTopicTemplate] = useState(defaultTopicTemplate);
 	const [destinationTemplate, setDestinationTemplate] = useState(defaultDestinationTemplate);
@@ -124,7 +109,6 @@ function ChatSocketPage() {
 	const [receivedMessages, setReceivedMessages] = useState<ReceivedMessage[]>([]);
 	const [eventLogs, setEventLogs] = useState<EventLog[]>([]);
 	const [isPending, setIsPending] = useState(false);
-	const [isSigningIn, setIsSigningIn] = useState(false);
 
 	const socketUrl = useMemo(() => {
 		const normalized = normalizeBaseUrl(serverUrl);
@@ -149,13 +133,9 @@ function ChatSocketPage() {
 
 	useEffect(() => {
 		const accessToken = loadAccessToken();
-		const refreshTokenFromStorage = loadRefreshToken();
 		if (accessToken) {
 			setToken(accessToken);
 		}
-		if (refreshTokenFromStorage) {
-			setRefreshToken(refreshTokenFromStorage);
-		}
 	}, []);
 
 	const deactivateClient = useCallback(
@@ -191,68 +171,33 @@ function ChatSocketPage() {
 
 	const handleLoadStoredToken = () => {
 		const accessToken = loadAccessToken();
-		const refreshTokenFromStorage = loadRefreshToken();
 		setToken(accessToken ?? "");
-		setRefreshToken(refreshTokenFromStorage ?? "");
 
 		if (accessToken) {
-			appendLog("SYSTEM", "저장된 AccessToken/RefreshToken을 불러왔습니다.");
-			toast.success("저장된 토큰을 불러왔습니다.");
+			appendLog("SYSTEM", "저장된 AccessToken을 불러왔습니다.");
+			toast.success("저장된 AccessToken을 불러왔습니다.");
 			return;
 		}
 
 		toast.error("저장된 AccessToken이 없습니다.");
 	};
 
-	const signInAndStoreTokens = async (nextEmail: string, nextPassword: string) => {
-		const response = await adminSignInApi(nextEmail.trim(), nextPassword);
-		const nextAccessToken = response.data.accessToken;
-		const nextRefreshToken = response.data.refreshToken;
-
-		saveAccessToken(nextAccessToken);
-		saveRefreshToken(nextRefreshToken);
-		setToken(nextAccessToken);
-		setRefreshToken(nextRefreshToken);
-		return nextAccessToken;
-	};
-
-	const handleSignIn = async () => {
-		if (!email.trim() || !password.trim()) {
-			toast.error("이메일/비밀번호를 입력해주세요.");
-			return;
-		}
-
-		setIsSigningIn(true);
-		try {
-			await signInAndStoreTokens(email, password);
-			appendLog("SYSTEM", "로그인 성공: 새 토큰이 반영되었습니다.");
-			toast.success("로그인 성공. AccessToken을 갱신했습니다.");
-		} catch (error) {
-			const message = extractApiErrorMessage(error);
-			appendLog("ERROR", `로그인 실패: ${message ?? "이메일/비밀번호를 확인해주세요."}`);
-			toast.error(message ?? "로그인에 실패했습니다.");
-		} finally {
-			setIsSigningIn(false);
-		}
-	};
-
 	useEffect(() => {
 		return () => {
 			void deactivateClient(false);
 		};
 	}, [deactivateClient]);
 
-	const handleConnect = async (tokenOverride?: string) => {
+	const handleConnect = async () => {
 		if (!roomId.trim()) {
 			toast.error("Room ID를 입력해주세요.");
 			return;
 		}
 
-		const nextToken = tokenOverride ?? token;
 		const normalizedServerUrl = normalizeBaseUrl(serverUrl);
 		const nextSocketUrl =
-			normalizedServerUrl && nextToken.trim()
-				? `${normalizedServerUrl}/connect?token=${encodeURIComponent(nextToken.trim())}`
+			normalizedServerUrl && token.trim()
+				? `${normalizedServerUrl}/connect?token=${encodeURIComponent(token.trim())}`
 				: "";
 
 		if (!nextSocketUrl) {
@@ -324,30 +269,6 @@ function ChatSocketPage() {
 		}
 	};
 
-	const handleSignInAndConnect = async () => {
-		if (!email.trim() || !password.trim()) {
-			toast.error("이메일/비밀번호를 입력해주세요.");
-			return;
-		}
-		if (!roomId.trim()) {
-			toast.error("Room ID를 입력해주세요.");
-			return;
-		}
-
-		setIsSigningIn(true);
-		try {
-			const nextAccessToken = await signInAndStoreTokens(email, password);
-			appendLog("SYSTEM", "로그인 성공: 새 토큰으로 소켓 연결을 시도합니다.");
-			await handleConnect(nextAccessToken);
-		} catch (error) {
-			const message = extractApiErrorMessage(error);
-			appendLog("ERROR", `로그인 실패: ${message ?? "이메일/비밀번호를 확인해주세요."}`);
-			toast.error(message ?? "로그인에 실패했습니다.");
-		} finally {
-			setIsSigningIn(false);
-		}
-	};
-
 	const handleSendRaw = () => {
 		const client = clientRef.current;
 		if (!client?.connected) {
@@ -387,215 +308,180 @@ function ChatSocketPage() {
 	};
 
 	return (
-		<div className="mx-auto w-full max-w-[1440px] rounded-[24px] border border-k-100 bg-k-0 shadow-sdw-a">
-			<div className="flex min-h-[calc(100vh-96px)]">
-				<AdminSidebar activeMenu="chatSocket" />
-
-				<section className="flex-1 bg-bg-50 p-7">
-					<div className="grid gap-4 lg:grid-cols-[420px_minmax(0,1fr)]">
-						<Card className="border-k-100">
-							<CardHeader className="pb-3">
-								<CardTitle className="typo-sb-9 text-k-800">채팅 소켓 테스트 콘솔</CardTitle>
-							</CardHeader>
-							<CardContent className="space-y-3 pt-0">
-								<div className="rounded-md border border-k-100 bg-bg-50 p-3">
-									<p className="typo-sb-11 text-k-700">즉시 로그인</p>
-									<p className="mt-1 typo-regular-4 text-k-500">
-										이 페이지에서 바로 로그인하면 AccessToken/RefreshToken을 저장하고 즉시 반영합니다.
-									</p>
-									<div className="mt-3 space-y-2">
-										<Input
-											placeholder="admin@example.com"
-											value={email}
-											onChange={(event) => setEmail(event.target.value)}
-										/>
-										<Input
-											type="password"
-											placeholder="비밀번호"
-											value={password}
-											onChange={(event) => setPassword(event.target.value)}
-										/>
-									</div>
-									<div className="mt-2 flex flex-wrap gap-2">
-										<Button type="button" variant="outline" onClick={() => void handleSignIn()} disabled={isSigningIn}>
-											<LogIn className="h-4 w-4" />
-											로그인 토큰 받기
-										</Button>
-										<Button
-											type="button"
-											onClick={() => void handleSignInAndConnect()}
-											disabled={isSigningIn || isPending}
-										>
-											<KeyRound className="h-4 w-4" />
-											로그인 + 연결
-										</Button>
-										<Button type="button" variant="ghost" onClick={handleLoadStoredToken}>
-											<RefreshCw className="h-4 w-4" />
-											저장 토큰 불러오기
-										</Button>
-									</div>
-									<div className="mt-2 rounded-md border border-k-100 bg-k-0 px-2 py-1">
-										<p className="font-mono text-[11px] text-k-500">refresh: {maskToken(refreshToken)}</p>
-									</div>
-								</div>
-								<div className="space-y-1">
-									<p className="typo-sb-11 text-k-700">API 서버 URL</p>
-									<Input value={serverUrl} onChange={(event) => setServerUrl(event.target.value)} />
-								</div>
-								<div className="space-y-1">
-									<p className="typo-sb-11 text-k-700">Access Token</p>
-									<Textarea
-										value={token}
-										onChange={(event) => setToken(event.target.value)}
-										className="min-h-20 font-mono"
-									/>
-								</div>
-								<div className="space-y-1">
-									<p className="typo-sb-11 text-k-700">Room ID</p>
-									<Input value={roomId} onChange={(event) => setRoomId(event.target.value)} placeholder="예: 123" />
-								</div>
-								<div className="space-y-1">
-									<p className="typo-sb-11 text-k-700">구독 Topic</p>
-									<Input
-										value={topicTemplate}
-										onChange={(event) => setTopicTemplate(event.target.value)}
-										placeholder="/topic/chat/{roomId}"
-									/>
-								</div>
-								<div className="rounded-md border border-k-100 bg-bg-50 px-3 py-2">
-									<p className="typo-sb-11 text-k-700">연결 URL</p>
-									<p className="break-all font-mono text-[12px] text-k-500">{maskedSocketUrl || "-"}</p>
-								</div>
-								<div className="rounded-md border border-k-100 bg-bg-50 px-3 py-2">
-									<p className="typo-sb-11 text-k-700">연결 상태</p>
-									<p className="font-mono text-[12px] text-k-500">{connectionState}</p>
-								</div>
-								<div className="flex gap-2">
-									<Button type="button" onClick={() => void handleConnect()} disabled={isPending}>
-										<Plug className="h-4 w-4" />
-										연결
-									</Button>
+		<AdminLayout
+			activeMenu="chatSocket"
+			title="채팅 소켓"
+			description="실시간 채팅 소켓 연결 상태와 메시지 발행/수신을 검증합니다."
+		>
+			<div className="grid gap-4 lg:grid-cols-[420px_minmax(0,1fr)]">
+				<Card className="border-k-100">
+					<CardHeader className="pb-3">
+						<CardTitle className="typo-sb-9 text-k-800">채팅 소켓 테스트 콘솔</CardTitle>
+					</CardHeader>
+					<CardContent className="space-y-3 pt-0">
+						<div className="rounded-md border border-k-100 bg-bg-50 p-3">
+							<p className="typo-sb-11 text-k-700">토큰 동기화</p>
+							<p className="mt-1 typo-regular-4 text-k-500">
+								로그인은 <span className="font-mono">/auth/login</span>에서 진행하고 저장된 AccessToken을 불러옵니다.
+							</p>
+							<div className="mt-2 flex flex-wrap gap-2">
+								<Button type="button" variant="outline" onClick={handleLoadStoredToken}>
+									<RefreshCw className="h-4 w-4" />
+									저장 토큰 불러오기
+								</Button>
+							</div>
+						</div>
+						<div className="space-y-1">
+							<p className="typo-sb-11 text-k-700">API 서버 URL</p>
+							<Input value={serverUrl} onChange={(event) => setServerUrl(event.target.value)} />
+						</div>
+						<div className="space-y-1">
+							<p className="typo-sb-11 text-k-700">Access Token</p>
+							<Textarea
+								value={token}
+								onChange={(event) => setToken(event.target.value)}
+								className="min-h-20 font-mono"
+							/>
+						</div>
+						<div className="space-y-1">
+							<p className="typo-sb-11 text-k-700">Room ID</p>
+							<Input value={roomId} onChange={(event) => setRoomId(event.target.value)} placeholder="예: 123" />
+						</div>
+						<div className="space-y-1">
+							<p className="typo-sb-11 text-k-700">구독 Topic</p>
+							<Input
+								value={topicTemplate}
+								onChange={(event) => setTopicTemplate(event.target.value)}
+								placeholder="/topic/chat/{roomId}"
+							/>
+						</div>
+						<div className="rounded-md border border-k-100 bg-bg-50 px-3 py-2">
+							<p className="typo-sb-11 text-k-700">연결 URL</p>
+							<p className="break-all font-mono text-[12px] text-k-500">{maskedSocketUrl || "-"}</p>
+						</div>
+						<div className="rounded-md border border-k-100 bg-bg-50 px-3 py-2">
+							<p className="typo-sb-11 text-k-700">연결 상태</p>
+							<p className="font-mono text-[12px] text-k-500">{connectionState}</p>
+						</div>
+						<div className="flex gap-2">
+							<Button type="button" onClick={() => void handleConnect()} disabled={isPending}>
+								<Plug className="h-4 w-4" />
+								연결
+							</Button>
+							<Button type="button" variant="outline" onClick={() => void deactivateClient(true)} disabled={isPending}>
+								<PlugZap className="h-4 w-4" />
+								연결 종료
+							</Button>
+						</div>
+					</CardContent>
+				</Card>
+
+				<div className="space-y-4">
+					<Card className="border-k-100">
+						<CardHeader className="pb-3">
+							<CardTitle className="typo-sb-9 text-k-800">메시지 발행</CardTitle>
+						</CardHeader>
+						<CardContent className="space-y-3 pt-0">
+							<div className="flex flex-wrap gap-2">
+								{publishPresets.map((preset) => (
 									<Button
+										key={preset.id}
 										type="button"
 										variant="outline"
-										onClick={() => void deactivateClient(true)}
-										disabled={isPending}
+										size="sm"
+										onClick={() => handleApplyPreset(preset)}
 									>
-										<PlugZap className="h-4 w-4" />
-										연결 종료
+										{preset.label}
 									</Button>
-								</div>
-							</CardContent>
-						</Card>
-
-						<div className="space-y-4">
-							<Card className="border-k-100">
-								<CardHeader className="pb-3">
-									<CardTitle className="typo-sb-9 text-k-800">메시지 발행</CardTitle>
-								</CardHeader>
-								<CardContent className="space-y-3 pt-0">
-									<div className="flex flex-wrap gap-2">
-										{publishPresets.map((preset) => (
-											<Button
-												key={preset.id}
-												type="button"
-												variant="outline"
-												size="sm"
-												onClick={() => handleApplyPreset(preset)}
-											>
-												{preset.label}
-											</Button>
-										))}
+								))}
+							</div>
+							<div className="space-y-1">
+								<p className="typo-sb-11 text-k-700">Destination</p>
+								<Input
+									value={destinationTemplate}
+									onChange={(event) => setDestinationTemplate(event.target.value)}
+									placeholder="/publish/chat/{roomId}"
+								/>
+							</div>
+							<div className="space-y-1">
+								<p className="typo-sb-11 text-k-700">Publish Headers(JSON Object)</p>
+								<Textarea
+									value={publishHeadersText}
+									onChange={(event) => setPublishHeadersText(event.target.value)}
+									className="min-h-20 font-mono"
+								/>
+								<p className="typo-regular-4 text-k-500">
+									`Authorization` 헤더가 없으면 현재 Access Token으로 자동 추가됩니다.
+								</p>
+							</div>
+							<div className="space-y-1">
+								<p className="typo-sb-11 text-k-700">Payload(JSON)</p>
+								<Textarea
+									value={jsonPayload}
+									onChange={(event) => setJsonPayload(event.target.value)}
+									className="min-h-36 font-mono"
+								/>
+							</div>
+							<Button type="button" onClick={handleSendRaw} disabled={connectionState !== "CONNECTED"}>
+								<Send className="h-4 w-4" />
+								메시지 전송
+							</Button>
+						</CardContent>
+					</Card>
+
+					<Card className="border-k-100">
+						<CardHeader className="pb-3">
+							<div className="flex items-center justify-between gap-2">
+								<CardTitle className="typo-sb-9 text-k-800">이벤트 로그</CardTitle>
+								<Button type="button" variant="outline" size="sm" onClick={() => setEventLogs([])}>
+									로그 비우기
+								</Button>
+							</div>
+						</CardHeader>
+						<CardContent className="space-y-2 pt-0">
+							{eventLogs.length === 0 ? (
+								<p className="typo-regular-4 text-k-500">로그가 없습니다.</p>
+							) : (
+								eventLogs.map((eventLog) => (
+									<div key={eventLog.id} className="rounded border border-k-100 bg-bg-50 px-3 py-2">
+										<div className="flex items-center gap-2">
+											<Link2 className="h-3 w-3 text-k-400" />
+											<p className="font-mono text-[11px] text-k-500">{eventLog.createdAt}</p>
+											<p className="font-mono text-[11px] text-k-700">{eventLog.type}</p>
+										</div>
+										<p className="mt-1 break-all font-mono text-[12px] text-k-600">{eventLog.message}</p>
 									</div>
-									<div className="space-y-1">
-										<p className="typo-sb-11 text-k-700">Destination</p>
-										<Input
-											value={destinationTemplate}
-											onChange={(event) => setDestinationTemplate(event.target.value)}
-											placeholder="/publish/chat/{roomId}"
-										/>
+								))
+							)}
+						</CardContent>
+					</Card>
+
+					<Card className="border-k-100">
+						<CardHeader className="pb-3">
+							<div className="flex items-center justify-between gap-2">
+								<CardTitle className="typo-sb-9 text-k-800">수신 메시지</CardTitle>
+								<Button type="button" variant="outline" size="sm" onClick={() => setReceivedMessages([])}>
+									메시지 비우기
+								</Button>
+							</div>
+						</CardHeader>
+						<CardContent className="space-y-2 pt-0">
+							{receivedMessages.length === 0 ? (
+								<p className="typo-regular-4 text-k-500">수신된 메시지가 없습니다.</p>
+							) : (
+								receivedMessages.map((item) => (
+									<div key={item.id} className="rounded border border-k-100 bg-bg-50 px-3 py-2">
+										<p className="font-mono text-[11px] text-k-500">{item.receivedAt}</p>
+										<p className="mt-1 font-mono text-[11px] text-k-600">topic: {item.destination}</p>
+										<p className="mt-1 font-mono text-[11px] text-k-500">headers: {JSON.stringify(item.headers)}</p>
+										<Textarea value={item.rawBody} readOnly className="mt-2 min-h-20 font-mono" />
 									</div>
-									<div className="space-y-1">
-										<p className="typo-sb-11 text-k-700">Publish Headers(JSON Object)</p>
-										<Textarea
-											value={publishHeadersText}
-											onChange={(event) => setPublishHeadersText(event.target.value)}
-											className="min-h-20 font-mono"
-										/>
-										<p className="typo-regular-4 text-k-500">
-											`Authorization` 헤더가 없으면 현재 Access Token으로 자동 추가됩니다.
-										</p>
-									</div>
-									<div className="space-y-1">
-										<p className="typo-sb-11 text-k-700">Payload(JSON)</p>
-										<Textarea
-											value={jsonPayload}
-											onChange={(event) => setJsonPayload(event.target.value)}
-											className="min-h-36 font-mono"
-										/>
-									</div>
-									<Button type="button" onClick={handleSendRaw} disabled={connectionState !== "CONNECTED"}>
-										<Send className="h-4 w-4" />
-										메시지 전송
-									</Button>
-								</CardContent>
-							</Card>
-
-							<Card className="border-k-100">
-								<CardHeader className="pb-3">
-									<div className="flex items-center justify-between gap-2">
-										<CardTitle className="typo-sb-9 text-k-800">이벤트 로그</CardTitle>
-										<Button type="button" variant="outline" size="sm" onClick={() => setEventLogs([])}>
-											로그 비우기
-										</Button>
-									</div>
-								</CardHeader>
-								<CardContent className="space-y-2 pt-0">
-									{eventLogs.length === 0 ? (
-										<p className="typo-regular-4 text-k-500">로그가 없습니다.</p>
-									) : (
-										eventLogs.map((eventLog) => (
-											<div key={eventLog.id} className="rounded border border-k-100 bg-bg-50 px-3 py-2">
-												<div className="flex items-center gap-2">
-													<Link2 className="h-3 w-3 text-k-400" />
-													<p className="font-mono text-[11px] text-k-500">{eventLog.createdAt}</p>
-													<p className="font-mono text-[11px] text-k-700">{eventLog.type}</p>
-												</div>
-												<p className="mt-1 break-all font-mono text-[12px] text-k-600">{eventLog.message}</p>
-											</div>
-										))
-									)}
-								</CardContent>
-							</Card>
-
-							<Card className="border-k-100">
-								<CardHeader className="pb-3">
-									<div className="flex items-center justify-between gap-2">
-										<CardTitle className="typo-sb-9 text-k-800">수신 메시지</CardTitle>
-										<Button type="button" variant="outline" size="sm" onClick={() => setReceivedMessages([])}>
-											메시지 비우기
-										</Button>
-									</div>
-								</CardHeader>
-								<CardContent className="space-y-2 pt-0">
-									{receivedMessages.length === 0 ? (
-										<p className="typo-regular-4 text-k-500">수신된 메시지가 없습니다.</p>
-									) : (
-										receivedMessages.map((item) => (
-											<div key={item.id} className="rounded border border-k-100 bg-bg-50 px-3 py-2">
-												<p className="font-mono text-[11px] text-k-500">{item.receivedAt}</p>
-												<p className="mt-1 font-mono text-[11px] text-k-600">topic: {item.destination}</p>
-												<p className="mt-1 font-mono text-[11px] text-k-500">headers: {JSON.stringify(item.headers)}</p>
-												<Textarea value={item.rawBody} readOnly className="mt-2 min-h-20 font-mono" />
-											</div>
-										))
-									)}
-								</CardContent>
-							</Card>
-						</div>
-					</div>
-				</section>
+								))
+							)}
+						</CardContent>
+					</Card>
+				</div>
 			</div>
-		</div>
+		</AdminLayout>
 	);
 }
diff --git a/apps/admin/src/routes/index.tsx b/apps/admin/src/routes/index.tsx
index 45d3c3eb..a3b60572 100644
--- a/apps/admin/src/routes/index.tsx
+++ b/apps/admin/src/routes/index.tsx
@@ -1,7 +1,9 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
+import { ensureSessionToken } from "@/lib/auth/session";
 
 export const Route = createFileRoute("/")({
-	beforeLoad: () => {
-		throw redirect({ to: "/scores" });
+	beforeLoad: async () => {
+		const token = await ensureSessionToken();
+		throw redirect({ to: token ? "/scores" : "/auth/login" });
 	},
 });
diff --git a/apps/admin/src/routes/scores/index.tsx b/apps/admin/src/routes/scores/index.tsx
index 5b7bc00b..db69cac0 100644
--- a/apps/admin/src/routes/scores/index.tsx
+++ b/apps/admin/src/routes/scores/index.tsx
@@ -1,21 +1,15 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 import { useId, useState } from "react";
 import { GpaScoreTable } from "@/components/features/scores/GpaScoreTable";
 import { LanguageScoreTable } from "@/components/features/scores/LanguageScoreTable";
-import { AdminSidebar } from "@/components/layout/AdminSidebar";
+import { AdminLayout } from "@/components/layout/AdminLayout";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { isTokenExpired } from "@/lib/utils/jwtUtils";
-import { loadAccessToken } from "@/lib/utils/localStorage";
+import { requireAdminSession } from "@/lib/auth/session";
 import type { VerifyStatus } from "@/types/scores";
 
 export const Route = createFileRoute("/scores/")({
-	beforeLoad: () => {
-		if (typeof window !== "undefined") {
-			const token = loadAccessToken();
-			if (!token || isTokenExpired(token)) {
-				throw redirect({ to: "/auth/login" });
-			}
-		}
+	beforeLoad: async () => {
+		await requireAdminSession();
 	},
 	component: ScoresPage,
 });
@@ -25,62 +19,53 @@ function ScoresPage() {
 	const verifyFilterId = useId();
 
 	return (
-		<div className="mx-auto w-full max-w-[1440px] rounded-[24px] border border-k-100 bg-k-0 shadow-sdw-a">
-			<div className="flex min-h-[calc(100vh-96px)]">
-				<AdminSidebar activeMenu="scores" />
-
-				<section className="flex-1 bg-bg-50 p-4 sm:p-6 lg:p-7">
-					<div className="h-full rounded-2xl border border-k-100 bg-k-0 p-4 shadow-[0_8px_24px_-22px_rgba(26,31,39,0.45)] sm:p-6">
-						<h1 className="typo-bold-1 text-k-900">성적 관리</h1>
-						<p className="mt-1 typo-regular-4 text-k-500">
-							원본 어드민 플로우를 기준으로 성적 검수 데이터를 관리합니다.
-						</p>
-
-						<div className="mt-4">
-							<label htmlFor={verifyFilterId} className="mb-1 block typo-sb-11 text-k-600">
-								검수 상태
-							</label>
-							<select
-								id={verifyFilterId}
-								value={verifyFilter}
-								onChange={(event) => setVerifyFilter(event.target.value as VerifyStatus)}
-								className="h-9 min-w-[180px] rounded-md border border-k-200 bg-k-0 px-3 typo-regular-4 text-k-700 outline-none focus-visible:border-primary"
-							>
-								<option value="PENDING">대기중</option>
-								<option value="APPROVED">승인됨</option>
-								<option value="REJECTED">거절됨</option>
-							</select>
-						</div>
+		<AdminLayout
+			activeMenu="scores"
+			title="성적 관리"
+			description="원본 어드민 플로우를 기준으로 성적 검수 데이터를 관리합니다."
+		>
+			<div className="mt-4">
+				<label htmlFor={verifyFilterId} className="mb-1 block typo-sb-11 text-k-600">
+					검수 상태
+				</label>
+				<select
+					id={verifyFilterId}
+					value={verifyFilter}
+					onChange={(event) => setVerifyFilter(event.target.value as VerifyStatus)}
+					className="h-9 min-w-[180px] rounded-md border border-k-200 bg-k-0 px-3 typo-regular-4 text-k-700 outline-none focus-visible:border-primary"
+				>
+					<option value="PENDING">대기중</option>
+					<option value="APPROVED">승인됨</option>
+					<option value="REJECTED">거절됨</option>
+				</select>
+			</div>
 
-						<div className="mt-5 rounded-xl border border-k-100 bg-k-0 p-3">
-							<Tabs defaultValue="gpa">
-								<TabsList className="h-9 rounded-md bg-k-50 p-1">
-									<TabsTrigger
-										value="gpa"
-										className="rounded-md px-4 typo-sb-11 data-[state=active]:bg-k-0 data-[state=active]:text-primary"
-									>
-										GPA 성적
-									</TabsTrigger>
-									<TabsTrigger
-										value="language"
-										className="rounded-md px-4 typo-sb-11 data-[state=active]:bg-k-0 data-[state=active]:text-primary"
-									>
-										어학성적
-									</TabsTrigger>
-								</TabsList>
+			<div className="mt-5 rounded-xl border border-k-100 bg-k-0 p-3">
+				<Tabs defaultValue="gpa">
+					<TabsList className="h-9 rounded-md bg-k-50 p-1">
+						<TabsTrigger
+							value="gpa"
+							className="rounded-md px-4 typo-sb-11 data-[state=active]:bg-k-0 data-[state=active]:text-primary"
+						>
+							GPA 성적
+						</TabsTrigger>
+						<TabsTrigger
+							value="language"
+							className="rounded-md px-4 typo-sb-11 data-[state=active]:bg-k-0 data-[state=active]:text-primary"
+						>
+							어학성적
+						</TabsTrigger>
+					</TabsList>
 
-								<TabsContent value="gpa" className="mt-3">
-									<GpaScoreTable verifyFilter={verifyFilter} />
-								</TabsContent>
+					<TabsContent value="gpa" className="mt-3">
+						<GpaScoreTable verifyFilter={verifyFilter} />
+					</TabsContent>
 
-								<TabsContent value="language" className="mt-3">
-									<LanguageScoreTable verifyFilter={verifyFilter} />
-								</TabsContent>
-							</Tabs>
-						</div>
-					</div>
-				</section>
+					<TabsContent value="language" className="mt-3">
+						<LanguageScoreTable verifyFilter={verifyFilter} />
+					</TabsContent>
+				</Tabs>
 			</div>
-		</div>
+		</AdminLayout>
 	);
 }
diff --git a/apps/admin/src/types/auth.ts b/apps/admin/src/types/auth.ts
index 73034795..46fa8d29 100644
--- a/apps/admin/src/types/auth.ts
+++ b/apps/admin/src/types/auth.ts
@@ -1,6 +1,6 @@
 export interface AdminSignInResponse {
 	accessToken: string;
-	refreshToken: string;
+	refreshToken?: string;
 }
 
 export interface ReissueAccessTokenResponse {