[ICC-240] /refresh 한번만 나가게 함

src/features/auth/model/useLoginRedirect.js

@@ -6,14 +6,27 @@ import {
   readLastEndpoint,
 } from "#shared/lib/lastEndpointStorage";
 
+let refreshPromise;
+
+const refreshOnce = async () => {
+  if (!refreshPromise) {
+    refreshPromise = authService.refresh().catch((error) => {
+      refreshPromise = null;
+      throw error;
+    });
+  }
+
+  return refreshPromise;
+};
+
 export const useLoginRedirect = ({ navigate }) => {
   useEffect(() => {
     let isMounted = true;
 
     const redirectAfterRefresh = async () => {
       let refreshSucceeded = true;
       try {
-        await authService.refresh();
+        await refreshOnce();
       } catch (error) {
         refreshSucceeded = false;
         console.error("로그인 리다이렉트 실패:", error);

src/pages/Login/index.css

@@ -19,25 +19,6 @@
   text-align: center;
 }
 
-.login-title {
-  margin: 0;
-  font-size: 28px;
-  font-weight: 700;
-  color: #1f2937;
-}
-
-.login-subtitle {
-  margin: 0;
-  font-size: 15px;
-  color: #6b7280;
-}
-
-.login-status {
-  margin: 0;
-  font-size: 14px;
-  color: #4b5563;
-}
-
 .login-actions {
   display: flex;
   flex-direction: column;
@@ -59,13 +40,7 @@
   justify-content: center;
 }
 
-.login-button--disabled {
-  background: #a5b4fc;
-  cursor: default;
-  pointer-events: none;
-}
-
-.login-button:not(.login-button--disabled):hover {
+.login-button:hover {
   background: #4338ca;
 }
 
@@ -74,7 +49,7 @@
   color: #191919;
 }
 
-.login-button--kakao:not(.login-button--disabled):hover {
+.login-button--kakao:hover {
   background: #f5dc00;
 }
 
@@ -84,6 +59,6 @@
   border: 1px solid #e5e7eb;
 }
 
-.login-button--google:not(.login-button--disabled):hover {
+.login-button--google:hover {
   background: #f9fafb;
 }

src/pages/Login/index.jsx

@@ -1,50 +1,25 @@
 import { useTranslation } from "i18nexus";
 import React from "react";
-import { useNavigate } from "react-router-dom";
-import { useLogin } from "#features/auth";
 import "./index.css";
+import Logo from "#shared/ui/logo";
 
 const Login = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
-  const {
-    state: { isChecking },
-  } = useLogin({ t, navigate });
   const baseUrl = import.meta.env.VITE_BASE_URL || "";
-  const normalizedBaseUrl = baseUrl.endsWith("/") ? baseUrl.slice(0, -1) : baseUrl;
-  const kakaoLoginUrl = `${normalizedBaseUrl}/oauth2/authorization/kakao`;
-  const googleLoginUrl = `${normalizedBaseUrl}/oauth2/authorization/google`;
-
-  const handlePreventIfChecking = (event) => {
-    if (isChecking) {
-      event.preventDefault();
-    }
-  };
+  const kakaoLoginUrl = `${baseUrl}/oauth2/authorization/kakao`;
+  const googleLoginUrl = `${baseUrl}/oauth2/authorization/google`;
 
   return (
     <div className="login-page">
       <div className="login-card">
-        <h1 className="login-title">Q-Asker</h1>
-        <p className="login-subtitle">
-          {t("로그인이 필요합니다.")}
-        </p>
-        {isChecking && (
-          <p className="login-status">{t("로그인 상태 확인 중...")}</p>
-        )}
+        <Logo />
         <div className="login-actions">
-          <a
-            className={`login-button login-button--kakao ${isChecking ? "login-button--disabled" : ""}`}
-            href={kakaoLoginUrl}
-            onClick={handlePreventIfChecking}
-            aria-disabled={isChecking}
-          >
+          <a className="login-button login-button--kakao" href={kakaoLoginUrl}>
             {t("카카오 로그인")}
           </a>
           <a
-            className={`login-button login-button--google ${isChecking ? "login-button--disabled" : ""}`}
+            className="login-button login-button--google"
             href={googleLoginUrl}
-            onClick={handlePreventIfChecking}
-            aria-disabled={isChecking}
           >
             {t("구글 로그인")}
           </a>

src/shared/lib/lastEndpointStorage.js

@@ -1,7 +1,6 @@
 const STORAGE_KEY = "lastEndpoint";
 
-export const readLastEndpoint = () =>
-  localStorage.getItem(STORAGE_KEY) || "/";
+export const readLastEndpoint = () => localStorage.getItem(STORAGE_KEY) || "/";
 
 export const writeLastEndpoint = (value) => {
   localStorage.setItem(STORAGE_KEY, value);

src/shared/ui/logo/index.css

@@ -0,0 +1,20 @@
+.logo {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.logo-icon {
+  width: 28px;
+  height: 28px;
+  margin-right: 8px;
+  margin-bottom: 5px;
+}
+
+.logo-text {
+  font-size: 24px;
+  color: #6366f1;
+  font-weight: bold;
+}

src/shared/ui/logo/index.js

@@ -0,0 +1 @@
+export { default } from "./index.jsx";

src/shared/ui/logo/index.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import "./index.css";
+
+const Logo = ({ className = "" }) => {
+  const logoClassName = ["logo", className].filter(Boolean).join(" ");
+
+  return (
+    <span className={logoClassName}>
+      <img src="/favicon-256x256.png" alt="Q-Asker" className="logo-icon" />
+      <span className="logo-text">Q-Asker</span>
+    </span>
+  );
+};
+
+export default Logo;

src/widgets/header/index.css

@@ -28,23 +28,7 @@
 
 .logo-link {
   text-decoration: none;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-}
-
-.logo-icon {
-  width: 28px;
-  height: 28px;
-  margin-right: 8px;
-  margin-bottom: 5px;
-}
-
-.logo-text {
-  font-size: 24px;
-  color: #6366f1;
-  font-weight: bold;
+  color: inherit;
 }
 
 .auth-buttons .text-button {

src/widgets/header/index.jsx

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import { useHeader } from "./model/useHeader";
 import { useClickOutside } from "#shared/lib/useClickOutside";
+import Logo from "#shared/ui/logo";
 import "./index.css";
 
 const Header = ({
@@ -51,13 +52,7 @@ const Header = ({
             ☰
           </button>
           <Link to="/" className="logo-link">
-            <img
-              src="/favicon-256x256.png"
-              alt="Q-Asker"
-              className="logo-icon"
-            />
-
-            <div className="logo-text">Q-Asker</div>
+            <Logo />
           </Link>
         </div>
         <div className="nav-link-area">