From acfdd0188fc6bc93ed5af4c4d08beb0d27173373 Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Sat, 21 Feb 2026 01:46:12 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EC=96=B4=EB=93=9C=EB=AF=BC=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EB=B6=84=EB=A6=AC=EC=99=80=20=EC=84=B1=EC=A0=81=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20UX=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/layout/AdminLayout.tsx     |  18 +-
 apps/admin/src/components/ui/card.tsx         |   8 +-
 apps/admin/src/routeTree.gen.ts               |  24 ++-
 apps/admin/src/routes/__root.tsx              |   4 +-
 apps/admin/src/routes/auth/login.tsx          |  37 ++--
 apps/admin/src/routes/login.tsx               |   7 +
 apps/admin/src/routes/scores/index.tsx        | 180 +++++-------------
 apps/admin/src/styles.css                     |   6 +-
 8 files changed, 117 insertions(+), 167 deletions(-)
 create mode 100644 apps/admin/src/routes/login.tsx

diff --git a/apps/admin/src/components/layout/AdminLayout.tsx b/apps/admin/src/components/layout/AdminLayout.tsx
index d60d44a5..f1be337c 100644
--- a/apps/admin/src/components/layout/AdminLayout.tsx
+++ b/apps/admin/src/components/layout/AdminLayout.tsx
@@ -4,8 +4,22 @@ interface AdminLayoutProps {
 
 export function AdminLayout({ children }: AdminLayoutProps) {
 	return (
-		<div className="min-h-screen bg-bg-50 text-k-800">
-			<main className="p-6">{children}</main>
+		<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">
+				<header className="mb-4 flex items-center justify-between rounded-2xl border border-k-100 bg-k-0 px-4 py-3 shadow-[0_10px_30px_-24px_rgba(26,31,39,0.45)]">
+					<div className="flex items-center gap-3">
+						<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary-100 text-primary typo-sb-9">
+							SC
+						</div>
+						<div className="leading-tight">
+							<p className="typo-medium-4 text-k-500">Solid Connection</p>
+							<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>
+				</header>
+				<main className="flex-1">{children}</main>
+			</div>
 		</div>
 	);
 }
diff --git a/apps/admin/src/components/ui/card.tsx b/apps/admin/src/components/ui/card.tsx
index 63ba9666..90091311 100644
--- a/apps/admin/src/components/ui/card.tsx
+++ b/apps/admin/src/components/ui/card.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-	<div ref={ref} className={cn("rounded-xl border bg-card text-card-foreground shadow", className)} {...props} />
+	<div ref={ref} className={cn("rounded-xl border border-k-100 bg-k-0 text-k-800 shadow", className)} {...props} />
 ));
 Card.displayName = "Card";
 
@@ -16,15 +16,13 @@ CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
 	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props} />
+		<div ref={ref} className={cn("leading-none tracking-tight", className)} {...props} />
 	),
 );
 CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
-	),
+	({ className, ...props }, ref) => <div ref={ref} className={cn("text-sm text-k-500", className)} {...props} />,
 );
 CardDescription.displayName = "CardDescription";
 
diff --git a/apps/admin/src/routeTree.gen.ts b/apps/admin/src/routeTree.gen.ts
index add56e7f..88db48fb 100644
--- a/apps/admin/src/routeTree.gen.ts
+++ b/apps/admin/src/routeTree.gen.ts
@@ -9,10 +9,16 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as LoginRouteImport } from './routes/login'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as ScoresIndexRouteImport } from './routes/scores/index'
 import { Route as AuthLoginRouteImport } from './routes/auth/login'
 
+const LoginRoute = LoginRouteImport.update({
+  id: '/login',
+  path: '/login',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -31,36 +37,47 @@ const AuthLoginRoute = AuthLoginRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/login': typeof LoginRoute
   '/auth/login': typeof AuthLoginRoute
   '/scores/': typeof ScoresIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/login': typeof LoginRoute
   '/auth/login': typeof AuthLoginRoute
   '/scores': typeof ScoresIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/login': typeof LoginRoute
   '/auth/login': typeof AuthLoginRoute
   '/scores/': typeof ScoresIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/auth/login' | '/scores/'
+  fullPaths: '/' | '/login' | '/auth/login' | '/scores/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/auth/login' | '/scores'
-  id: '__root__' | '/' | '/auth/login' | '/scores/'
+  to: '/' | '/login' | '/auth/login' | '/scores'
+  id: '__root__' | '/' | '/login' | '/auth/login' | '/scores/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  LoginRoute: typeof LoginRoute
   AuthLoginRoute: typeof AuthLoginRoute
   ScoresIndexRoute: typeof ScoresIndexRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/login': {
+      id: '/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof LoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -87,6 +104,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  LoginRoute: LoginRoute,
   AuthLoginRoute: AuthLoginRoute,
   ScoresIndexRoute: ScoresIndexRoute,
 }
diff --git a/apps/admin/src/routes/__root.tsx b/apps/admin/src/routes/__root.tsx
index 23718ea8..a6f1e9d2 100644
--- a/apps/admin/src/routes/__root.tsx
+++ b/apps/admin/src/routes/__root.tsx
@@ -3,8 +3,6 @@ import { createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";
 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
 import { Toaster } from "sonner";
 
-import { AdminLayout } from "@/components/layout/AdminLayout";
-
 import appCss from "../styles.css?url";
 
 export const Route = createRootRoute({
@@ -39,7 +37,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
 				<HeadContent />
 			</head>
 			<body>
-				<AdminLayout>{children}</AdminLayout>
+				{children}
 				<Toaster />
 				<TanStackDevtools
 					config={{
diff --git a/apps/admin/src/routes/auth/login.tsx b/apps/admin/src/routes/auth/login.tsx
index 9c7fbc9d..e722492f 100644
--- a/apps/admin/src/routes/auth/login.tsx
+++ b/apps/admin/src/routes/auth/login.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { type FormEvent, useState } from "react";
+import { type FormEvent, useId, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -14,6 +14,8 @@ export const Route = createFileRoute("/auth/login")({
 
 function LoginPage() {
 	const navigate = useNavigate();
+	const emailInputId = useId();
+	const passwordInputId = useId();
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
@@ -45,46 +47,49 @@ function LoginPage() {
 	};
 
 	return (
-		<div className="flex h-screen items-center justify-center bg-slate-50">
-			<Card className="w-[360px]">
-				<CardHeader className="space-y-1 pb-4">
-					<CardTitle className="text-center text-xl">관리자 로그인</CardTitle>
-					<CardDescription className="text-center text-sm">솔리드 커넥션 관리자 페이지입니다</CardDescription>
+		<div className="flex min-h-[calc(100vh-132px)] items-center justify-center px-4 py-8">
+			<Card className="w-full max-w-[400px] border-k-100 bg-k-0 shadow-sdw-a">
+				<CardHeader className="space-y-1.5 pb-4">
+					<div className="mx-auto mb-1 flex h-12 w-12 items-center justify-center rounded-full bg-primary-100 text-primary typo-bold-4">
+						SC
+					</div>
+					<CardTitle className="text-center typo-bold-4 text-k-900">관리자 로그인</CardTitle>
+					<CardDescription className="text-center typo-regular-3 text-k-500">
+						솔리드 커넥션 운영 콘솔에 접속합니다
+					</CardDescription>
 				</CardHeader>
 				<CardContent>
-					<form onSubmit={handleSubmit} className="space-y-3">
+					<form onSubmit={handleSubmit} className="space-y-4">
 						<div className="space-y-1">
-							<Label htmlFor="email" className="text-sm">
+							<Label htmlFor={emailInputId} className="typo-sb-11 text-k-700">
 								이메일
 							</Label>
-							{/* biome-ignore lint/correctness/useUniqueElementIds: login form is singleton */}
 							<Input
-								id="email"
+								id={emailInputId}
 								type="email"
 								placeholder="admin@example.com"
 								value={email}
 								onChange={(e) => setEmail(e.target.value)}
 								disabled={isLoading}
 								required
-								className="h-9"
+								className="h-11 border-k-100 bg-bg-50 typo-regular-3 text-k-800 placeholder:text-k-400"
 							/>
 						</div>
 						<div className="space-y-1">
-							<Label htmlFor="password" className="text-sm">
+							<Label htmlFor={passwordInputId} className="typo-sb-11 text-k-700">
 								비밀번호
 							</Label>
-							{/* biome-ignore lint/correctness/useUniqueElementIds: login form is singleton */}
 							<Input
-								id="password"
+								id={passwordInputId}
 								type="password"
 								value={password}
 								onChange={(e) => setPassword(e.target.value)}
 								disabled={isLoading}
 								required
-								className="h-9"
+								className="h-11 border-k-100 bg-bg-50 typo-regular-3 text-k-800"
 							/>
 						</div>
-						<Button type="submit" className="mt-2 h-9 w-full" disabled={isLoading}>
+						<Button type="submit" className="mt-2 h-11 w-full rounded-lg typo-sb-9" disabled={isLoading}>
 							{isLoading ? "로그인 중..." : "로그인"}
 						</Button>
 					</form>
diff --git a/apps/admin/src/routes/login.tsx b/apps/admin/src/routes/login.tsx
new file mode 100644
index 00000000..92b693e4
--- /dev/null
+++ b/apps/admin/src/routes/login.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/login")({
+	beforeLoad: () => {
+		throw redirect({ to: "/auth/login" });
+	},
+});
diff --git a/apps/admin/src/routes/scores/index.tsx b/apps/admin/src/routes/scores/index.tsx
index d37c217f..80fbfa08 100644
--- a/apps/admin/src/routes/scores/index.tsx
+++ b/apps/admin/src/routes/scores/index.tsx
@@ -1,12 +1,9 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { Building2, FileText, Search, SquarePen, UserCircle2 } from "lucide-react";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { GpaScoreTable } from "@/components/features/scores/GpaScoreTable";
 import { LanguageScoreTable } from "@/components/features/scores/LanguageScoreTable";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { AdminLayout } from "@/components/layout/AdminLayout";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { cn } from "@/lib/utils";
 import { isTokenExpired } from "@/lib/utils/jwtUtils";
 import { loadAccessToken } from "@/lib/utils/localStorage";
 import type { VerifyStatus } from "@/types/scores";
@@ -26,141 +23,56 @@ export const Route = createFileRoute("/scores/")({
 
 function ScoresPage() {
 	const [verifyFilter, setVerifyFilter] = useState<VerifyStatus>("PENDING");
-	const [searchKeyword, setSearchKeyword] = useState("");
-
-	const sideMenus = [
-		{ label: "대학 관리", icon: Building2, active: true },
-		{ label: "멘토 관리", icon: UserCircle2, active: false },
-		{ label: "유저 관리", icon: UserCircle2, active: false },
-		{ label: "성적 관리", icon: FileText, active: false },
-	] as const;
-
-	const topTabs = ["권역/나라", "나라/대학", "대학 지원 정보", "대학 상세 정보"] as const;
-
-	const verifyFilters: Array<{ value: VerifyStatus; label: string }> = [
-		{ value: "PENDING", label: "대기중" },
-		{ value: "APPROVED", label: "승인됨" },
-		{ value: "REJECTED", label: "거절됨" },
-	];
+	const verifyFilterId = useId();
 
 	return (
-		<div className="mx-auto w-full max-w-[1280px] rounded-[24px] border border-k-100 bg-k-0 shadow-sdw-a">
-			<div className="flex min-h-[calc(100vh-96px)]">
-				<aside className="flex w-[212px] flex-col border-r border-k-100 bg-bg-100 px-5 py-7">
-					<div className="mb-10">
-						<p className="typo-sb-11 text-primary">Solid Connection</p>
-						<h1 className="mt-1 typo-bold-1 tracking-[-0.03em] text-primary-700">
-							Admin
-							<br />
-							boards
-						</h1>
-					</div>
-
-					<p className="mb-4 typo-sb-11 text-k-400">관리 메뉴</p>
-					<nav className="space-y-1.5">
-						{sideMenus.map((menu) => (
-							<button
-								key={menu.label}
-								type="button"
-								className={cn(
-									"flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left typo-medium-3 transition-colors",
-									menu.active ? "bg-primary-100 text-primary" : "text-k-400 hover:bg-k-0 hover:text-k-700",
-								)}
-							>
-								<menu.icon className="h-4 w-4" />
-								{menu.label}
-							</button>
-						))}
-					</nav>
-				</aside>
-
-				<section className="flex-1 bg-bg-50 p-7">
-					<div className="h-full rounded-2xl border border-k-100 bg-k-0 p-6 shadow-[0_8px_24px_-22px_rgba(26,31,39,0.45)]">
-						<div className="inline-flex items-center gap-1.5 rounded-lg bg-k-50 p-1">
-							{topTabs.map((tab) => (
-								<button
-									key={tab}
-									type="button"
-									className={cn(
-										"rounded-md px-3 py-1.5 typo-sb-11 tracking-[-0.01em] transition-colors",
-										tab === "권역/나라" ? "bg-k-0 text-primary shadow-sm" : "text-k-500 hover:text-k-700",
-									)}
-								>
-									{tab}
-								</button>
-							))}
-						</div>
+		<AdminLayout>
+			<div className="mx-auto w-full max-w-[1200px] rounded-2xl border border-k-100 bg-k-0 p-4 shadow-sdw-a sm:p-6">
+				<h1 className="typo-bold-1 text-k-900">성적 관리</h1>
 
-						<div className="mt-6 flex flex-wrap items-center gap-2">
-							<h2 className="mr-auto typo-bold-4 tracking-[-0.01em] text-k-800">권역/나라</h2>
+				<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="relative min-w-[300px] flex-1">
-								<Input
-									value={searchKeyword}
-									onChange={(event) => setSearchKeyword(event.target.value)}
-									placeholder="검색어를 입력한 후 검색할 카테고리를 선택해주세요"
-									className="h-9 border-k-100 bg-bg-50 pr-10 typo-regular-4 text-k-700"
-								/>
-								<Search className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-k-400" />
-							</div>
-
-							<Button type="button" className="h-9 rounded-md bg-primary px-3 typo-sb-11 text-k-0 hover:bg-primary-600">
-								<SquarePen className="h-3.5 w-3.5" />
-								권역/나라 생성하기
-							</Button>
-						</div>
-
-						<div className="mt-4 flex items-center gap-4">
-							{verifyFilters.map((option) => (
-								<button
-									key={option.value}
-									type="button"
-									onClick={() => setVerifyFilter(option.value)}
-									className={cn(
-										"inline-flex items-center gap-2 typo-medium-4 transition-colors",
-										verifyFilter === option.value ? "text-primary" : "text-k-400 hover:text-k-600",
-									)}
-								>
-									<span
-										className={cn(
-											"h-2.5 w-2.5 rounded-full border",
-											verifyFilter === option.value ? "border-primary bg-primary" : "border-k-300 bg-k-0",
-										)}
-									/>
-									{option.label}
-								</button>
-							))}
-						</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>
-		</div>
+		</AdminLayout>
 	);
 }
diff --git a/apps/admin/src/styles.css b/apps/admin/src/styles.css
index a873aaf3..2fe9bc3d 100644
--- a/apps/admin/src/styles.css
+++ b/apps/admin/src/styles.css
@@ -2,15 +2,13 @@
 
 body {
   @apply m-0;
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: "Pretendard", system-ui, -apple-system, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 @layer utilities {

From 826f7bc89048f0d07b172af644bf9f8cc3b670b9 Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Sat, 21 Feb 2026 02:16:53 +0900
Subject: [PATCH 2/4] =?UTF-8?q?chore:=20=EC=96=B4=EB=93=9C=EB=AF=BC=20Reac?=
 =?UTF-8?q?t=20Query=20=EA=B3=B5=ED=86=B5=20=EC=84=A4=EC=A0=95=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/admin/package.json                       |  7 ++++---
 .../components/providers/QueryProvider.tsx    | 13 ++++++++++++
 apps/admin/src/lib/query/queryClient.ts       | 21 +++++++++++++++++++
 apps/admin/src/routes/__root.tsx              |  3 ++-
 pnpm-lock.yaml                                |  3 +++
 5 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 apps/admin/src/components/providers/QueryProvider.tsx
 create mode 100644 apps/admin/src/lib/query/queryClient.ts

diff --git a/apps/admin/package.json b/apps/admin/package.json
index 0d5b3669..2f556981 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -22,9 +22,10 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-devtools": "^0.7.0",
-    "@tanstack/react-router": "^1.132.0",
-    "@tanstack/react-router-devtools": "^1.132.0",
-    "@tanstack/react-router-ssr-query": "^1.131.7",
+		"@tanstack/react-router": "^1.132.0",
+		"@tanstack/react-router-devtools": "^1.132.0",
+		"@tanstack/react-query": "^5.84.1",
+		"@tanstack/react-router-ssr-query": "^1.131.7",
     "@tanstack/react-start": "^1.132.0",
     "@tanstack/router-plugin": "^1.132.0",
     "axios": "^1.6.7",
diff --git a/apps/admin/src/components/providers/QueryProvider.tsx b/apps/admin/src/components/providers/QueryProvider.tsx
new file mode 100644
index 00000000..99e4009f
--- /dev/null
+++ b/apps/admin/src/components/providers/QueryProvider.tsx
@@ -0,0 +1,13 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { type ReactNode, useState } from "react";
+import { createQueryClient } from "@/lib/query/queryClient";
+
+interface QueryProviderProps {
+	children: ReactNode;
+}
+
+export function QueryProvider({ children }: QueryProviderProps) {
+	const [queryClient] = useState(createQueryClient);
+
+	return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}
diff --git a/apps/admin/src/lib/query/queryClient.ts b/apps/admin/src/lib/query/queryClient.ts
new file mode 100644
index 00000000..8a1cd128
--- /dev/null
+++ b/apps/admin/src/lib/query/queryClient.ts
@@ -0,0 +1,21 @@
+import { QueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+
+export const createQueryClient = () =>
+	new QueryClient({
+		defaultOptions: {
+			queries: {
+				staleTime: 60 * 1000,
+				gcTime: 10 * 60 * 1000,
+				refetchOnWindowFocus: false,
+				retry: (failureCount, error) => {
+					const status = (error as AxiosError | undefined)?.response?.status;
+					if (status === 401 || status === 403) {
+						return false;
+					}
+
+					return failureCount < 1;
+				},
+			},
+		},
+	});
diff --git a/apps/admin/src/routes/__root.tsx b/apps/admin/src/routes/__root.tsx
index a6f1e9d2..9a4b8a72 100644
--- a/apps/admin/src/routes/__root.tsx
+++ b/apps/admin/src/routes/__root.tsx
@@ -2,6 +2,7 @@ import { TanStackDevtools } from "@tanstack/react-devtools";
 import { createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";
 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
 import { Toaster } from "sonner";
+import { QueryProvider } from "@/components/providers/QueryProvider";
 
 import appCss from "../styles.css?url";
 
@@ -37,7 +38,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
 				<HeadContent />
 			</head>
 			<body>
-				{children}
+				<QueryProvider>{children}</QueryProvider>
 				<Toaster />
 				<TanStackDevtools
 					config={{
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b0f05e58..3eb090fa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
       '@tanstack/react-devtools':
         specifier: ^0.7.0
         version: 0.7.11(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(csstype@3.2.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(solid-js@1.9.11)
+      '@tanstack/react-query':
+        specifier: ^5.84.1
+        version: 5.90.19(react@19.2.4)
       '@tanstack/react-router':
         specifier: ^1.132.0
         version: 1.158.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)

From d4690c0ec59a0c1e8a328369011f810555a7eb6d Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Sat, 21 Feb 2026 02:16:57 +0900
Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=EC=96=B4=EB=93=9C=EB=AF=BC=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=EA=B3=BC=20=EC=84=B1=EC=A0=81=20?=
 =?UTF-8?q?=EA=B2=80=EC=88=98=20API=EB=A5=BC=20React=20Query=EB=A1=9C=20?=
 =?UTF-8?q?=EC=A0=84=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/scores/GpaScoreTable.tsx         |  73 +-
 .../features/scores/LanguageScoreTable.tsx    |  73 +-
 apps/admin/src/lib/api/client.ts              |  10 +-
 apps/admin/src/routes/auth/login.tsx          |  14 +-
 apps/admin/src/routes/scores/index.tsx        | 665 ++----------------
 5 files changed, 153 insertions(+), 682 deletions(-)

diff --git a/apps/admin/src/components/features/scores/GpaScoreTable.tsx b/apps/admin/src/components/features/scores/GpaScoreTable.tsx
index 4ecea310..5d3855db 100644
--- a/apps/admin/src/components/features/scores/GpaScoreTable.tsx
+++ b/apps/admin/src/components/features/scores/GpaScoreTable.tsx
@@ -1,5 +1,6 @@
+import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { format } from "date-fns";
-import { useCallback, useEffect, useState } from "react";
+import { useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
@@ -12,39 +13,49 @@ interface Props {
 	verifyFilter: VerifyStatus;
 }
 
-const S3_BASE_URL = import.meta.env.VITE_S3_BASE_URL;
+const S3_BASE_URL = (import.meta.env.VITE_S3_BASE_URL as string | undefined) || "";
 
 export function GpaScoreTable({ verifyFilter }: Props) {
-	const [scores, setScores] = useState<GpaScoreWithUser[]>([]);
+	const queryClient = useQueryClient();
 	const [page, setPage] = useState(1);
-	const [totalPages, setTotalPages] = useState(1);
-	const [loading, setLoading] = useState(false);
 	const [editingId, setEditingId] = useState<number | null>(null);
 	const [editingGpa, setEditingGpa] = useState<number>(0);
 	const [editingGpaCriteria, setEditingGpaCriteria] = useState<number>(0);
 
-	const fetchScores = useCallback(async () => {
-		setLoading(true);
-		try {
-			const response = await scoreApi.getGpaScores({ verifyStatus: verifyFilter }, page);
-			setScores(response.content);
-			setTotalPages(response.totalPages);
-		} catch (error) {
-			console.error("Failed to fetch GPA scores:", error);
-		} finally {
-			setLoading(false);
-		}
-	}, [verifyFilter, page]);
+	const { data, isLoading, isFetching } = useQuery({
+		queryKey: ["scores", "gpa", verifyFilter, page],
+		queryFn: () => scoreApi.getGpaScores({ verifyStatus: verifyFilter }, page),
+		placeholderData: keepPreviousData,
+	});
 
-	useEffect(() => {
-		fetchScores();
-	}, [fetchScores]);
+	const updateGpaMutation = useMutation({
+		mutationFn: ({
+			id,
+			status,
+			reason,
+			score,
+		}: {
+			id: number;
+			status: VerifyStatus;
+			reason?: string;
+			score: GpaScoreWithUser;
+		}) => scoreApi.updateGpaScore(id, status, reason, score),
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({ queryKey: ["scores", "gpa"] });
+		},
+	});
+
+	const scores = data?.content ?? [];
+	const totalPages = data?.totalPages ?? 1;
 
 	const handleVerifyStatus = async (id: number, status: VerifyStatus, reason?: string) => {
 		try {
 			const score = scores.find((s) => s.gpaScoreStatusResponse.id === id);
-			await scoreApi.updateGpaScore(id, status, reason, score);
-			fetchScores();
+			if (!score) {
+				throw new Error("Score data is required");
+			}
+
+			await updateGpaMutation.mutateAsync({ id, status, reason, score });
 		} catch (error) {
 			console.error("Failed to update GPA score:", error);
 			toast.error("성적 상태 업데이트에 실패했습니다");
@@ -59,11 +70,11 @@ export function GpaScoreTable({ verifyFilter }: Props) {
 
 	const handleSave = async (score: GpaScoreWithUser) => {
 		try {
-			await scoreApi.updateGpaScore(
-				score.gpaScoreStatusResponse.id,
-				score.gpaScoreStatusResponse.verifyStatus,
-				score.gpaScoreStatusResponse.rejectedReason || undefined,
-				{
+			await updateGpaMutation.mutateAsync({
+				id: score.gpaScoreStatusResponse.id,
+				status: score.gpaScoreStatusResponse.verifyStatus,
+				reason: score.gpaScoreStatusResponse.rejectedReason || undefined,
+				score: {
 					...score,
 					gpaScoreStatusResponse: {
 						...score.gpaScoreStatusResponse,
@@ -74,9 +85,8 @@ export function GpaScoreTable({ verifyFilter }: Props) {
 						},
 					},
 				},
-			);
+			});
 			setEditingId(null);
-			fetchScores();
 			toast.success("GPA가 수정되었습니다");
 		} catch (error) {
 			console.error("Failed to update GPA:", error);
@@ -91,6 +101,9 @@ export function GpaScoreTable({ verifyFilter }: Props) {
 
 	return (
 		<div className="rounded-lg border border-k-100 bg-k-0">
+			{isFetching && !isLoading ? (
+				<div className="border-b border-k-100 px-4 py-2 typo-regular-4 text-k-500">최신 데이터를 불러오는 중...</div>
+			) : null}
 			<div className="overflow-x-auto">
 				<Table>
 					<TableHeader>
@@ -107,7 +120,7 @@ export function GpaScoreTable({ verifyFilter }: Props) {
 						</TableRow>
 					</TableHeader>
 					<TableBody>
-						{loading ? (
+						{isLoading ? (
 							<TableRow>
 								<TableCell colSpan={9} className="text-center">
 									<div className="flex items-center justify-center">
diff --git a/apps/admin/src/components/features/scores/LanguageScoreTable.tsx b/apps/admin/src/components/features/scores/LanguageScoreTable.tsx
index 344a6a83..6009a6f0 100644
--- a/apps/admin/src/components/features/scores/LanguageScoreTable.tsx
+++ b/apps/admin/src/components/features/scores/LanguageScoreTable.tsx
@@ -1,5 +1,6 @@
+import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { format } from "date-fns";
-import { useCallback, useEffect, useState } from "react";
+import { useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
@@ -12,7 +13,7 @@ interface Props {
 	verifyFilter: VerifyStatus;
 }
 
-const S3_BASE_URL = import.meta.env.VITE_S3_BASE_URL;
+const S3_BASE_URL = (import.meta.env.VITE_S3_BASE_URL as string | undefined) || "";
 
 const LANGUAGE_TEST_OPTIONS: { value: LanguageTestType; label: string }[] = [
 	{ value: "TOEIC", label: "TOEIC" },
@@ -30,36 +31,46 @@ const LANGUAGE_TEST_OPTIONS: { value: LanguageTestType; label: string }[] = [
 ];
 
 export function LanguageScoreTable({ verifyFilter }: Props) {
-	const [scores, setScores] = useState<LanguageScoreWithUser[]>([]);
+	const queryClient = useQueryClient();
 	const [page, setPage] = useState(1);
-	const [totalPages, setTotalPages] = useState(1);
-	const [loading, setLoading] = useState(false);
 	const [editingId, setEditingId] = useState<number | null>(null);
 	const [editingScore, setEditingScore] = useState<string>("");
 	const [editingType, setEditingType] = useState<LanguageTestType>("TOEIC");
 
-	const fetchScores = useCallback(async () => {
-		setLoading(true);
-		try {
-			const response = await scoreApi.getLanguageScores({ verifyStatus: verifyFilter }, page);
-			setScores(response.content);
-			setTotalPages(response.totalPages);
-		} catch (error) {
-			console.error("Failed to fetch Language scores:", error);
-		} finally {
-			setLoading(false);
-		}
-	}, [verifyFilter, page]);
+	const { data, isLoading, isFetching } = useQuery({
+		queryKey: ["scores", "language", verifyFilter, page],
+		queryFn: () => scoreApi.getLanguageScores({ verifyStatus: verifyFilter }, page),
+		placeholderData: keepPreviousData,
+	});
 
-	useEffect(() => {
-		fetchScores();
-	}, [fetchScores]);
+	const updateLanguageMutation = useMutation({
+		mutationFn: ({
+			id,
+			status,
+			reason,
+			score,
+		}: {
+			id: number;
+			status: VerifyStatus;
+			reason?: string;
+			score: LanguageScoreWithUser;
+		}) => scoreApi.updateLanguageScore(id, status, reason, score),
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({ queryKey: ["scores", "language"] });
+		},
+	});
+
+	const scores = data?.content ?? [];
+	const totalPages = data?.totalPages ?? 1;
 
 	const handleVerifyStatus = async (id: number, status: VerifyStatus, reason?: string) => {
 		try {
 			const score = scores.find((s) => s.languageTestScoreStatusResponse.id === id);
-			await scoreApi.updateLanguageScore(id, status, reason, score);
-			fetchScores();
+			if (!score) {
+				throw new Error("Score data is required");
+			}
+
+			await updateLanguageMutation.mutateAsync({ id, status, reason, score });
 		} catch (error) {
 			console.error("Failed to update Language score:", error);
 			toast.error("성적 상태 업데이트에 실패했습니다");
@@ -74,11 +85,11 @@ export function LanguageScoreTable({ verifyFilter }: Props) {
 
 	const handleSave = async (score: LanguageScoreWithUser) => {
 		try {
-			await scoreApi.updateLanguageScore(
-				score.languageTestScoreStatusResponse.id,
-				score.languageTestScoreStatusResponse.verifyStatus,
-				score.languageTestScoreStatusResponse.rejectedReason || undefined,
-				{
+			await updateLanguageMutation.mutateAsync({
+				id: score.languageTestScoreStatusResponse.id,
+				status: score.languageTestScoreStatusResponse.verifyStatus,
+				reason: score.languageTestScoreStatusResponse.rejectedReason || undefined,
+				score: {
 					...score,
 					languageTestScoreStatusResponse: {
 						...score.languageTestScoreStatusResponse,
@@ -89,9 +100,8 @@ export function LanguageScoreTable({ verifyFilter }: Props) {
 						},
 					},
 				},
-			);
+			});
 			setEditingId(null);
-			fetchScores();
 			toast.success("어학성적이 수정되었습니다");
 		} catch (error) {
 			console.error("Failed to update language score:", error);
@@ -106,6 +116,9 @@ export function LanguageScoreTable({ verifyFilter }: Props) {
 
 	return (
 		<div className="rounded-lg border border-k-100 bg-k-0">
+			{isFetching && !isLoading ? (
+				<div className="border-b border-k-100 px-4 py-2 typo-regular-4 text-k-500">최신 데이터를 불러오는 중...</div>
+			) : null}
 			<div className="overflow-x-auto">
 				<Table>
 					<TableHeader>
@@ -122,7 +135,7 @@ export function LanguageScoreTable({ verifyFilter }: Props) {
 						</TableRow>
 					</TableHeader>
 					<TableBody>
-						{loading ? (
+						{isLoading ? (
 							<TableRow>
 								<TableCell colSpan={9} className="text-center">
 									<div className="flex items-center justify-center">
diff --git a/apps/admin/src/lib/api/client.ts b/apps/admin/src/lib/api/client.ts
index ea475449..93f054b4 100644
--- a/apps/admin/src/lib/api/client.ts
+++ b/apps/admin/src/lib/api/client.ts
@@ -11,8 +11,14 @@ import {
 
 const convertToBearer = (token: string) => `Bearer ${token}`;
 
+const API_SERVER_URL = (import.meta.env.VITE_API_SERVER_URL as string | undefined) || "";
+
+if (import.meta.env.DEV && API_SERVER_URL.length === 0) {
+	console.warn("[admin] VITE_API_SERVER_URL is not configured. API requests will use current origin.");
+}
+
 export const axiosInstance: AxiosInstance = axios.create({
-	baseURL: import.meta.env.VITE_API_SERVER_URL,
+	baseURL: API_SERVER_URL,
 	withCredentials: true,
 });
 
@@ -84,5 +90,5 @@ axiosInstance.interceptors.response.use(
 );
 
 export const publicAxiosInstance: AxiosInstance = axios.create({
-	baseURL: import.meta.env.VITE_API_SERVER_URL,
+	baseURL: API_SERVER_URL,
 });
diff --git a/apps/admin/src/routes/auth/login.tsx b/apps/admin/src/routes/auth/login.tsx
index e722492f..9543b92d 100644
--- a/apps/admin/src/routes/auth/login.tsx
+++ b/apps/admin/src/routes/auth/login.tsx
@@ -1,3 +1,4 @@
+import { useMutation } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { type FormEvent, useId, useState } from "react";
 import { toast } from "sonner";
@@ -18,14 +19,19 @@ function LoginPage() {
 	const passwordInputId = useId();
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
-	const [isLoading, setIsLoading] = useState(false);
+
+	const signInMutation = useMutation({
+		mutationFn: ({ nextEmail, nextPassword }: { nextEmail: string; nextPassword: string }) =>
+			adminSignInApi(nextEmail, nextPassword),
+	});
+
+	const isLoading = signInMutation.isPending;
 
 	const handleSubmit = async (e: FormEvent) => {
 		e.preventDefault();
-		setIsLoading(true);
 
 		try {
-			const response = await adminSignInApi(email, password);
+			const response = await signInMutation.mutateAsync({ nextEmail: email, nextPassword: password });
 			const { accessToken, refreshToken } = response.data;
 
 			saveAccessToken(accessToken);
@@ -41,8 +47,6 @@ function LoginPage() {
 			toast.error("로그인 실패", {
 				description: error.response?.data?.message || "로그인에 실패했습니다.",
 			});
-		} finally {
-			setIsLoading(false);
 		}
 	};
 
diff --git a/apps/admin/src/routes/scores/index.tsx b/apps/admin/src/routes/scores/index.tsx
index 419ea776..5b7bc00b 100644
--- a/apps/admin/src/routes/scores/index.tsx
+++ b/apps/admin/src/routes/scores/index.tsx
@@ -1,26 +1,13 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { Database, Search, SquarePen, UserCircle2 } from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
+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 { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
-import { adminApi } from "@/lib/api/admin";
-import { cn } from "@/lib/utils";
 import { isTokenExpired } from "@/lib/utils/jwtUtils";
 import { loadAccessToken } from "@/lib/utils/localStorage";
 import type { VerifyStatus } from "@/types/scores";
 
-type Region = { code: string; koreanName: string };
-type Country = { code: string; koreanName: string; regionCode: string };
-
-const toPrettyJson = (value: unknown) => JSON.stringify(value, null, 2);
-
 export const Route = createFileRoute("/scores/")({
 	beforeLoad: () => {
 		if (typeof window !== "undefined") {
@@ -30,619 +17,67 @@ export const Route = createFileRoute("/scores/")({
 			}
 		}
 	},
-	component: AdminApiDashboardPage,
+	component: ScoresPage,
 });
 
-function AdminApiDashboardPage() {
+function ScoresPage() {
 	const [verifyFilter, setVerifyFilter] = useState<VerifyStatus>("PENDING");
-	const [searchKeyword, setSearchKeyword] = useState("");
-
-	const [mentorStatus, setMentorStatus] = useState("PENDING");
-	const [mentorPage, setMentorPage] = useState("1");
-	const [mentorSize, setMentorSize] = useState("10");
-	const [mentorNickname, setMentorNickname] = useState("");
-	const [mentorCreatedAt, setMentorCreatedAt] = useState("");
-	const [mentorListResult, setMentorListResult] = useState<unknown>(null);
-	const [mentorCountResult, setMentorCountResult] = useState<unknown>(null);
-	const [historySiteUserId, setHistorySiteUserId] = useState("");
-	const [mentorHistoryResult, setMentorHistoryResult] = useState<unknown>(null);
-	const [actionMentorId, setActionMentorId] = useState("");
-	const [rejectReason, setRejectReason] = useState("");
-	const [assignUniversityId, setAssignUniversityId] = useState("");
-	const [mentorActionResult, setMentorActionResult] = useState<unknown>(null);
-
-	const [regions, setRegions] = useState<Region[]>([]);
-	const [countries, setCountries] = useState<Country[]>([]);
-	const [regionCode, setRegionCode] = useState("");
-	const [regionName, setRegionName] = useState("");
-	const [countryCode, setCountryCode] = useState("");
-	const [countryName, setCountryName] = useState("");
-	const [countryRegionCode, setCountryRegionCode] = useState("");
-	const [regionActionResult, setRegionActionResult] = useState<unknown>(null);
-
-	const topTabs = ["권역/나라", "멘토 지원", "성적 검증", "API 응답"] as const;
-
-	const verifyFilters: Array<{ value: VerifyStatus; label: string }> = [
-		{ value: "PENDING", label: "대기중" },
-		{ value: "APPROVED", label: "승인됨" },
-		{ value: "REJECTED", label: "거절됨" },
-	];
-
-	const handleError = (message: string, error: unknown) => {
-		console.error(message, error);
-		toast.error(message);
-	};
-
-	const fetchMentorApplications = async () => {
-		try {
-			const res = await adminApi.getMentorApplicationList({
-				page: Number.parseInt(mentorPage, 10) || 1,
-				size: Number.parseInt(mentorSize, 10) || 10,
-				mentorApplicationStatus: mentorStatus || undefined,
-				nickname: mentorNickname || undefined,
-				createdAt: mentorCreatedAt || undefined,
-			});
-			setMentorListResult(res);
-			toast.success("멘토 지원 목록 조회 완료");
-		} catch (error) {
-			handleError("멘토 지원 목록 조회 실패", error);
-		}
-	};
-
-	const fetchMentorCount = async () => {
-		try {
-			const res = await adminApi.getCountMentorApplicationByStatus();
-			setMentorCountResult(res);
-			toast.success("멘토 상태 카운트 조회 완료");
-		} catch (error) {
-			handleError("멘토 상태 카운트 조회 실패", error);
-		}
-	};
-
-	const fetchMentorHistory = async () => {
-		if (!historySiteUserId) {
-			toast.error("site_user_id를 입력해주세요.");
-			return;
-		}
-
-		try {
-			const res = await adminApi.getMentorApplicationHistoryList(historySiteUserId);
-			setMentorHistoryResult(res);
-			toast.success("멘토 지원 히스토리 조회 완료");
-		} catch (error) {
-			handleError("멘토 지원 히스토리 조회 실패", error);
-		}
-	};
-
-	const approveMentor = async () => {
-		if (!actionMentorId) {
-			toast.error("mentorApplicationId를 입력해주세요.");
-			return;
-		}
-
-		try {
-			const res = await adminApi.postApproveMentorApplication(actionMentorId);
-			setMentorActionResult(res);
-			toast.success("멘토 지원 승인 완료");
-		} catch (error) {
-			handleError("멘토 지원 승인 실패", error);
-		}
-	};
-
-	const rejectMentor = async () => {
-		if (!actionMentorId || !rejectReason) {
-			toast.error("mentorApplicationId와 거절 사유를 입력해주세요.");
-			return;
-		}
-
-		try {
-			const res = await adminApi.postRejectMentorApplication(actionMentorId, rejectReason);
-			setMentorActionResult(res);
-			toast.success("멘토 지원 거절 완료");
-		} catch (error) {
-			handleError("멘토 지원 거절 실패", error);
-		}
-	};
-
-	const assignUniversity = async () => {
-		if (!actionMentorId || !assignUniversityId) {
-			toast.error("mentorApplicationId와 universityId를 입력해주세요.");
-			return;
-		}
-
-		try {
-			const res = await adminApi.postMappingMentorapplicationUniversity(
-				actionMentorId,
-				Number.parseInt(assignUniversityId, 10),
-			);
-			setMentorActionResult(res);
-			toast.success("대학 매핑 완료");
-		} catch (error) {
-			handleError("대학 매핑 실패", error);
-		}
-	};
-
-	const fetchRegions = async () => {
-		try {
-			const res = await adminApi.get권역조회();
-			const nextRegions = Array.isArray(res) ? (res as Region[]) : [];
-			setRegions(nextRegions);
-			setRegionActionResult(res);
-			toast.success("권역 조회 완료");
-		} catch (error) {
-			handleError("권역 조회 실패", error);
-		}
-	};
-
-	const createRegion = async () => {
-		if (!regionName) {
-			toast.error("권역명을 입력해주세요.");
-			return;
-		}
-
-		try {
-			const res = await adminApi.post권역생성({ code: regionCode || undefined, koreanName: regionName });
-			setRegionActionResult(res);
-			toast.success("권역 생성 완료");
-			await fetchRegions();
-		} catch (error) {
-			handleError("권역 생성 실패", error);
-		}
-	};
-
-	const updateRegion = async () => {
-		if (!regionCode || !regionName) {
-			toast.error("수정할 권역 코드와 이름을 입력해주세요.");
-			return;
-		}
-
-		try {
-			const res = await adminApi.put권역수정(regionCode, { code: regionCode, koreanName: regionName });
-			setRegionActionResult(res);
-			toast.success("권역 수정 완료");
-			await fetchRegions();
-		} catch (error) {
-			handleError("권역 수정 실패", error);
-		}
-	};
-
-	const deleteRegion = async () => {
-		if (!regionCode) {
-			toast.error("삭제할 권역 코드를 입력해주세요.");
-			return;
-		}
-
-		try {
-			const res = await adminApi.delete권역삭제(regionCode);
-			setRegionActionResult(res);
-			toast.success("권역 삭제 완료");
-			await fetchRegions();
-		} catch (error) {
-			handleError("권역 삭제 실패", error);
-		}
-	};
-
-	const fetchCountries = async () => {
-		try {
-			const res = await adminApi.get지역조회();
-			const nextCountries = Array.isArray(res) ? (res as Country[]) : [];
-			setCountries(nextCountries);
-			setRegionActionResult(res);
-			toast.success("지역 조회 완료");
-		} catch (error) {
-			handleError("지역 조회 실패", error);
-		}
-	};
-
-	const createCountry = async () => {
-		if (!countryName || !countryRegionCode) {
-			toast.error("지역명과 권역 코드를 입력해주세요.");
-			return;
-		}
-
-		try {
-			const res = await adminApi.post지역생성({
-				code: countryCode || undefined,
-				koreanName: countryName,
-				regionCode: countryRegionCode,
-			});
-			setRegionActionResult(res);
-			toast.success("지역 생성 완료");
-			await fetchCountries();
-		} catch (error) {
-			handleError("지역 생성 실패", error);
-		}
-	};
-
-	const updateCountry = async () => {
-		if (!countryCode || !countryName || !countryRegionCode) {
-			toast.error("수정할 지역 코드/이름/권역 코드를 입력해주세요.");
-			return;
-		}
-
-		try {
-			const res = await adminApi.put지역수정(countryCode, {
-				code: countryCode,
-				koreanName: countryName,
-				regionCode: countryRegionCode,
-			});
-			setRegionActionResult(res);
-			toast.success("지역 수정 완료");
-			await fetchCountries();
-		} catch (error) {
-			handleError("지역 수정 실패", error);
-		}
-	};
-
-	const deleteCountry = async () => {
-		if (!countryCode) {
-			toast.error("삭제할 지역 코드를 입력해주세요.");
-			return;
-		}
-
-		try {
-			const res = await adminApi.delete지역삭제(countryCode);
-			setRegionActionResult(res);
-			toast.success("지역 삭제 완료");
-			await fetchCountries();
-		} catch (error) {
-			handleError("지역 삭제 실패", error);
-		}
-	};
+	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-7">
-					<div className="h-full rounded-2xl border border-k-100 bg-k-0 p-6 shadow-[0_8px_24px_-22px_rgba(26,31,39,0.45)]">
-						<div className="inline-flex items-center gap-1.5 rounded-lg bg-k-50 p-1">
-							{topTabs.map((tab) => (
-								<button
-									key={tab}
-									type="button"
-									className={cn(
-										"rounded-md px-3 py-1.5 typo-sb-11 tracking-[-0.01em] transition-colors",
-										["권역/나라", "멘토 지원"].includes(tab)
-											? "bg-k-0 text-primary shadow-sm"
-											: "text-k-500 hover:text-k-700",
-									)}
-								>
-									{tab}
-								</button>
-							))}
+				<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>
 
-						<div className="mt-6 flex flex-wrap items-center gap-2">
-							<h2 className="mr-auto typo-bold-4 tracking-[-0.01em] text-k-800">Admin API 통합 대시보드</h2>
-
-							<div className="relative min-w-[300px] flex-1">
-								<Input
-									value={searchKeyword}
-									onChange={(event) => setSearchKeyword(event.target.value)}
-									placeholder="필터 키워드(시각적 보조용)"
-									className="h-9 border-k-100 bg-bg-50 pr-10 typo-regular-4 text-k-700"
-								/>
-								<Search className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-k-400" />
-							</div>
-
-							<Button type="button" className="h-9 rounded-md bg-primary px-3 typo-sb-11 text-k-0 hover:bg-primary-600">
-								<SquarePen className="h-3.5 w-3.5" />
-								기능 연결 완료
-							</Button>
+						<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="language" className="mt-3">
+									<LanguageScoreTable verifyFilter={verifyFilter} />
+								</TabsContent>
+							</Tabs>
 						</div>
-
-						<Tabs defaultValue="mentor" className="mt-5">
-							<TabsList className="h-9 rounded-md bg-k-50 p-1">
-								<TabsTrigger
-									value="mentor"
-									className="rounded-md px-4 typo-sb-11 data-[state=active]:bg-k-0 data-[state=active]:text-primary"
-								>
-									멘토 지원 API (6)
-								</TabsTrigger>
-								<TabsTrigger
-									value="regions"
-									className="rounded-md px-4 typo-sb-11 data-[state=active]:bg-k-0 data-[state=active]:text-primary"
-								>
-									권역/지역 API (8)
-								</TabsTrigger>
-								<TabsTrigger
-									value="scores"
-									className="rounded-md px-4 typo-sb-11 data-[state=active]:bg-k-0 data-[state=active]:text-primary"
-								>
-									성적 API (4)
-								</TabsTrigger>
-							</TabsList>
-
-							<TabsContent value="mentor" className="mt-4 space-y-4">
-								<div className="grid gap-4 lg:grid-cols-2">
-									<div className="rounded-xl border border-k-100 bg-bg-50 p-4">
-										<h3 className="mb-3 flex items-center gap-2 typo-sb-9 text-k-800">
-											<UserCircle2 className="h-4 w-4" />
-											멘토 지원 목록/카운트/히스토리 조회
-										</h3>
-										<div className="grid grid-cols-2 gap-2">
-											<Input
-												value={mentorStatus}
-												onChange={(e) => setMentorStatus(e.target.value)}
-												placeholder="status"
-											/>
-											<Input value={mentorPage} onChange={(e) => setMentorPage(e.target.value)} placeholder="page" />
-											<Input value={mentorSize} onChange={(e) => setMentorSize(e.target.value)} placeholder="size" />
-											<Input
-												value={mentorNickname}
-												onChange={(e) => setMentorNickname(e.target.value)}
-												placeholder="nickname"
-											/>
-										</div>
-										<Input
-											className="mt-2"
-											value={mentorCreatedAt}
-											onChange={(e) => setMentorCreatedAt(e.target.value)}
-											placeholder="createdAt (YYYY-MM-DD)"
-										/>
-										<div className="mt-2 flex flex-wrap gap-2">
-											<Button type="button" onClick={fetchMentorApplications}>
-												목록 조회
-											</Button>
-											<Button type="button" variant="secondary" onClick={fetchMentorCount}>
-												상태 카운트
-											</Button>
-										</div>
-										<div className="mt-3 flex gap-2">
-											<Input
-												value={historySiteUserId}
-												onChange={(e) => setHistorySiteUserId(e.target.value)}
-												placeholder="site_user_id"
-											/>
-											<Button type="button" variant="outline" onClick={fetchMentorHistory}>
-												히스토리 조회
-											</Button>
-										</div>
-									</div>
-
-									<div className="rounded-xl border border-k-100 bg-bg-50 p-4">
-										<h3 className="mb-3 typo-sb-9 text-k-800">멘토 지원 승인/거절/대학 매핑</h3>
-										<Input
-											value={actionMentorId}
-											onChange={(e) => setActionMentorId(e.target.value)}
-											placeholder="mentorApplicationId"
-										/>
-										<div className="mt-2 flex flex-wrap gap-2">
-											<Button type="button" onClick={approveMentor}>
-												승인
-											</Button>
-											<Button type="button" variant="destructive" onClick={rejectMentor}>
-												거절
-											</Button>
-										</div>
-										<Textarea
-											className="mt-2"
-											value={rejectReason}
-											onChange={(e) => setRejectReason(e.target.value)}
-											placeholder="거절 사유"
-										/>
-										<div className="mt-2 flex gap-2">
-											<Input
-												value={assignUniversityId}
-												onChange={(e) => setAssignUniversityId(e.target.value)}
-												placeholder="universityId"
-											/>
-											<Button type="button" variant="outline" onClick={assignUniversity}>
-												대학 매핑
-											</Button>
-										</div>
-									</div>
-								</div>
-
-								<div className="grid gap-4 lg:grid-cols-2">
-									<div className="rounded-xl border border-k-100 bg-k-0 p-3">
-										<p className="mb-2 typo-sb-11 text-k-700">멘토 지원 목록 응답</p>
-										<Textarea
-											readOnly
-											value={mentorListResult ? toPrettyJson(mentorListResult) : "{}"}
-											className="min-h-56 font-mono"
-										/>
-									</div>
-									<div className="rounded-xl border border-k-100 bg-k-0 p-3">
-										<p className="mb-2 typo-sb-11 text-k-700">카운트/히스토리/액션 응답</p>
-										<Textarea
-											readOnly
-											value={
-												mentorActionResult || mentorCountResult || mentorHistoryResult
-													? toPrettyJson({ mentorCountResult, mentorHistoryResult, mentorActionResult })
-													: "{}"
-											}
-											className="min-h-56 font-mono"
-										/>
-									</div>
-								</div>
-							</TabsContent>
-
-							<TabsContent value="regions" className="mt-4 space-y-4">
-								<div className="grid gap-4 lg:grid-cols-2">
-									<div className="rounded-xl border border-k-100 bg-bg-50 p-4">
-										<h3 className="mb-3 flex items-center gap-2 typo-sb-9 text-k-800">
-											<Database className="h-4 w-4" />
-											권역 API (조회/생성/수정/삭제)
-										</h3>
-										<div className="grid grid-cols-2 gap-2">
-											<Input value={regionCode} onChange={(e) => setRegionCode(e.target.value)} placeholder="code" />
-											<Input
-												value={regionName}
-												onChange={(e) => setRegionName(e.target.value)}
-												placeholder="koreanName"
-											/>
-										</div>
-										<div className="mt-2 flex flex-wrap gap-2">
-											<Button type="button" onClick={fetchRegions}>
-												조회
-											</Button>
-											<Button type="button" variant="secondary" onClick={createRegion}>
-												생성
-											</Button>
-											<Button type="button" variant="outline" onClick={updateRegion}>
-												수정
-											</Button>
-											<Button type="button" variant="destructive" onClick={deleteRegion}>
-												삭제
-											</Button>
-										</div>
-
-										<div className="mt-3 rounded-md border border-k-100 bg-k-0 p-2">
-											<Table>
-												<TableHeader>
-													<TableRow>
-														<TableHead>권역 코드</TableHead>
-														<TableHead>권역명</TableHead>
-													</TableRow>
-												</TableHeader>
-												<TableBody>
-													{regions.length === 0 ? (
-														<TableRow>
-															<TableCell colSpan={2} className="text-center text-k-500">
-																권역 데이터 없음
-															</TableCell>
-														</TableRow>
-													) : (
-														regions.map((region) => (
-															<TableRow key={region.code}>
-																<TableCell>{region.code}</TableCell>
-																<TableCell>{region.koreanName}</TableCell>
-															</TableRow>
-														))
-													)}
-												</TableBody>
-											</Table>
-										</div>
-									</div>
-
-									<div className="rounded-xl border border-k-100 bg-bg-50 p-4">
-										<h3 className="mb-3 flex items-center gap-2 typo-sb-9 text-k-800">
-											<Database className="h-4 w-4" />
-											지역 API (조회/생성/수정/삭제)
-										</h3>
-										<div className="grid grid-cols-3 gap-2">
-											<Input value={countryCode} onChange={(e) => setCountryCode(e.target.value)} placeholder="code" />
-											<Input
-												value={countryName}
-												onChange={(e) => setCountryName(e.target.value)}
-												placeholder="koreanName"
-											/>
-											<Input
-												value={countryRegionCode}
-												onChange={(e) => setCountryRegionCode(e.target.value)}
-												placeholder="regionCode"
-											/>
-										</div>
-										<div className="mt-2 flex flex-wrap gap-2">
-											<Button type="button" onClick={fetchCountries}>
-												조회
-											</Button>
-											<Button type="button" variant="secondary" onClick={createCountry}>
-												생성
-											</Button>
-											<Button type="button" variant="outline" onClick={updateCountry}>
-												수정
-											</Button>
-											<Button type="button" variant="destructive" onClick={deleteCountry}>
-												삭제
-											</Button>
-										</div>
-
-										<div className="mt-3 rounded-md border border-k-100 bg-k-0 p-2">
-											<Table>
-												<TableHeader>
-													<TableRow>
-														<TableHead>지역 코드</TableHead>
-														<TableHead>지역명</TableHead>
-														<TableHead>권역 코드</TableHead>
-													</TableRow>
-												</TableHeader>
-												<TableBody>
-													{countries.length === 0 ? (
-														<TableRow>
-															<TableCell colSpan={3} className="text-center text-k-500">
-																지역 데이터 없음
-															</TableCell>
-														</TableRow>
-													) : (
-														countries.map((country) => (
-															<TableRow key={country.code}>
-																<TableCell>{country.code}</TableCell>
-																<TableCell>{country.koreanName}</TableCell>
-																<TableCell>{country.regionCode}</TableCell>
-															</TableRow>
-														))
-													)}
-												</TableBody>
-											</Table>
-										</div>
-									</div>
-								</div>
-
-								<div className="rounded-xl border border-k-100 bg-k-0 p-3">
-									<p className="mb-2 typo-sb-11 text-k-700">권역/지역 API 응답</p>
-									<Textarea
-										readOnly
-										value={regionActionResult ? toPrettyJson(regionActionResult) : "{}"}
-										className="min-h-48 font-mono"
-									/>
-								</div>
-							</TabsContent>
-
-							<TabsContent value="scores" className="mt-4 space-y-4">
-								<div className="flex items-center gap-4">
-									{verifyFilters.map((option) => (
-										<button
-											key={option.value}
-											type="button"
-											onClick={() => setVerifyFilter(option.value)}
-											className={cn(
-												"inline-flex items-center gap-2 typo-medium-4 transition-colors",
-												verifyFilter === option.value ? "text-primary" : "text-k-400 hover:text-k-600",
-											)}
-										>
-											<span
-												className={cn(
-													"h-2.5 w-2.5 rounded-full border",
-													verifyFilter === option.value ? "border-primary bg-primary" : "border-k-300 bg-k-0",
-												)}
-											/>
-											{option.label}
-										</button>
-									))}
-								</div>
-
-								<div className="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="language" className="mt-3">
-											<LanguageScoreTable verifyFilter={verifyFilter} />
-										</TabsContent>
-									</Tabs>
-								</div>
-							</TabsContent>
-						</Tabs>
 					</div>
 				</section>
 			</div>

From 3282def43d2e1cd5cd83f2cb1144c6ab2a80976c Mon Sep 17 00:00:00 2001
From: manNomi <hanmw110@naver.com>
Date: Sat, 21 Feb 2026 02:33:08 +0900
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=EC=96=B4=EB=93=9C=EB=AF=BC=20VITE?=
 =?UTF-8?q?=20=ED=99=98=EA=B2=BD=EB=B3=80=EC=88=98=20=EC=A0=84=EB=8B=AC=20?=
 =?UTF-8?q?=EB=B0=8F=20API=20URL=20=ED=95=84=EC=88=98=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/admin/src/lib/api/client.ts | 6 +++---
 turbo.json                       | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/admin/src/lib/api/client.ts b/apps/admin/src/lib/api/client.ts
index 93f054b4..711a44ed 100644
--- a/apps/admin/src/lib/api/client.ts
+++ b/apps/admin/src/lib/api/client.ts
@@ -11,10 +11,10 @@ import {
 
 const convertToBearer = (token: string) => `Bearer ${token}`;
 
-const API_SERVER_URL = (import.meta.env.VITE_API_SERVER_URL as string | undefined) || "";
+const API_SERVER_URL = import.meta.env.VITE_API_SERVER_URL?.trim();
 
-if (import.meta.env.DEV && API_SERVER_URL.length === 0) {
-	console.warn("[admin] VITE_API_SERVER_URL is not configured. API requests will use current origin.");
+if (!API_SERVER_URL) {
+	throw new Error("[admin] VITE_API_SERVER_URL is required. Configure it in your environment.");
 }
 
 export const axiosInstance: AxiosInstance = axios.create({
diff --git a/turbo.json b/turbo.json
index f2f03b7e..d3499836 100644
--- a/turbo.json
+++ b/turbo.json
@@ -5,7 +5,7 @@
     "build": {
       "dependsOn": ["^build"],
       "outputs": ["dist/**", ".output/**"],
-      "env": ["NODE_ENV", "NEXT_PUBLIC_*"]
+      "env": ["NODE_ENV", "NEXT_PUBLIC_*", "VITE_*"]
     },
     "@solid-connect/web#build": {
       "dependsOn": ["^build"],