fix: 동시성 이슈 수정

package.json

@@ -18,6 +18,7 @@
 		"@radix-ui/react-toast": "^1.2.6",
 		"@radix-ui/react-tooltip": "^1.2.0",
 		"@tanstack/react-query": "^5.65.1",
+		"@toss/utils": "^1.6.1",
 		"@use-funnel/browser": "^0.0.11",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",

src/components/spurtyLoader/SpurtyLoader.tsx

@@ -46,8 +46,14 @@ const SpurtyLoader = () => {
 					priority
 				/>
 			</div>
-			<div className="mt-2 flex justify-center whitespace-pre-line text-center b2">
-				로딩 중...
+			<div
+				className="s3 flex items-center justify-center whitespace-nowrap rounded-[999px] px-[14px] py-[10px] text-[#BDBDF5]"
+				style={{
+					background: "var(--Elevated-PointPriamry, rgba(107, 107, 225, 0.20))",
+					backdropFilter: "blur(30px)",
+				}}
+			>
+				<span>잠시만 기다려주세요</span>
 			</div>
 		</div>
 	);

src/lib/serverKy.ts

@@ -1,14 +1,56 @@
-import ky, { type KyResponse } from "ky";
+import { batchRequestsOf } from "@toss/utils"; // ①
+import ky from "ky";
 import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
 
 const REFRESH_ENDPOINT = "/v1/auth/token/refresh";
 const UNAUTHORIZED_CODE = 401;
 
-let refreshPromise: Promise<{
-	accessToken: string;
-	refreshToken: string;
-}> | null = null;
+async function refreshTokenOnce(): Promise<string> {
+	const cookieStore = await cookies();
+	const oldRefreshToken = cookieStore.get("refreshToken")?.value;
+
+	const res = await fetch(
+		`${process.env.NEXT_PUBLIC_API_URL}${REFRESH_ENDPOINT}`,
+		{
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ refreshToken: oldRefreshToken }),
+		},
+	);
+
+	if (!res.ok) {
+		const errText = await res.text();
+		console.error("Refresh API 실패:", errText);
+		cookieStore.delete("accessToken");
+		cookieStore.delete("refreshToken");
+		throw new Error("refresh failed");
+	}
+
+	const { accessToken, refreshToken: newRefreshToken } = (await res.json()) as {
+		accessToken: string;
+		refreshToken: string;
+	};
+
+	cookieStore.set("accessToken", accessToken, {
+		httpOnly: true,
+		secure: true,
+		sameSite: "none",
+		path: "/",
+		maxAge: 60 * 60,
+	});
+	cookieStore.set("refreshToken", newRefreshToken, {
+		httpOnly: true,
+		secure: true,
+		sameSite: "none",
+		path: "/",
+		maxAge: 60 * 60 * 24 * 7,
+	});
+
+	return accessToken;
+}
+
+const batchedRefresh = batchRequestsOf(refreshTokenOnce);
 
 export const serverApi = ky.create({
 	prefixUrl: process.env.NEXT_PUBLIC_API_URL,
@@ -23,89 +65,24 @@ export const serverApi = ky.create({
 		beforeRequest: [
 			async (request) => {
 				const cookieStore = await cookies();
-				const accessToken = cookieStore.get("accessToken")?.value;
-				if (accessToken) {
-					request.headers.set("Authorization", `Bearer ${accessToken}`);
+				const token = cookieStore.get("accessToken")?.value;
+				if (token) {
+					request.headers.set("Authorization", `Bearer ${token}`);
 				}
 			},
 		],
 		afterResponse: [
 			async (request, options, response) => {
-				if (response.status !== UNAUTHORIZED_CODE) {
-					return response;
-				}
-
-				if (!refreshPromise) {
-					refreshPromise = (async () => {
-						const cookieStore = await cookies();
-						const oldRefreshToken = cookieStore.get("refreshToken")?.value;
-
-						const refreshRes = await fetch(
-							`${process.env.NEXT_PUBLIC_API_URL}${REFRESH_ENDPOINT}`,
-							{
-								method: "POST",
-								headers: { "Content-Type": "application/json" },
-								body: JSON.stringify({ refreshToken: oldRefreshToken }),
-							},
-						);
-
-						if (!refreshRes.ok) {
-							cookieStore.delete("accessToken");
-							cookieStore.delete("refreshToken");
-							throw new Error("Refresh failed");
-						}
-
-						const { accessToken, refreshToken: newRefreshToken } =
-							await refreshRes.json();
-
-						cookieStore.set("accessToken", accessToken, {
-							httpOnly: true,
-							secure: true,
-							sameSite: "none",
-							path: "/",
-							maxAge: 60 * 60,
-						});
-						cookieStore.set("refreshToken", newRefreshToken, {
-							httpOnly: true,
-							secure: true,
-							sameSite: "none",
-							path: "/",
-							maxAge: 60 * 60 * 24 * 7,
-						});
-
-						return { accessToken, refreshToken: newRefreshToken };
-					})();
-				}
-
-				try {
-					const { accessToken, refreshToken: newRefreshToken } =
-						await refreshPromise;
-					request.headers.set("Authorization", `Bearer ${accessToken}`);
-
-					// ! 이 코드가 의미가 있을까..?
-					const cookieStore = await cookies();
-
-					cookieStore.set("accessToken", accessToken, {
-						httpOnly: true,
-						secure: true,
-						sameSite: "none",
-						path: "/",
-						maxAge: 60 * 60,
-					});
-					cookieStore.set("refreshToken", newRefreshToken, {
-						httpOnly: true,
-						secure: true,
-						sameSite: "none",
-						path: "/",
-						maxAge: 60 * 60 * 24 * 7,
-					});
-
-					return serverApi(request, options);
-				} catch (err) {
-					return NextResponse.redirect(new URL("/login", request.url));
-				} finally {
-					refreshPromise = null;
+				if (response.status === UNAUTHORIZED_CODE) {
+					try {
+						const newToken = await batchedRefresh();
+						request.headers.set("Authorization", `Bearer ${newToken}`);
+						return serverApi(request, options);
+					} catch {
+						return NextResponse.redirect(new URL("/login", request.url));
+					}
 				}
+				return response;
 			},
 		],
 	},