diff options
| -rw-r--r-- | components/login/login-form-shi.tsx | 41 | ||||
| -rw-r--r-- | components/login/login-form.tsx | 39 |
2 files changed, 78 insertions, 2 deletions
diff --git a/components/login/login-form-shi.tsx b/components/login/login-form-shi.tsx index fa27e0f3..a8443d2f 100644 --- a/components/login/login-form-shi.tsx +++ b/components/login/login-form-shi.tsx @@ -22,6 +22,7 @@ import { buttonVariants } from "@/components/ui/button" import Link from "next/link" import { KnoxSSOButton } from './saml-login-button'; // SAML 로그인 버튼 import import Loading from "../common/loading/loading"; +import Animation from "../common/loading/animation"; import { VideoBackground } from "./video-background"; export function LoginFormSHI({ @@ -54,6 +55,8 @@ export function LoginFormSHI({ const [otpSent, setOtpSent] = useState(false); const [isLoading, setIsLoading] = useState(false); const [otp, setOtp] = useState(''); + const [loadingStartTime, setLoadingStartTime] = useState<number | null>(null); + const [showCookieHint, setShowCookieHint] = useState(false); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); @@ -183,6 +186,24 @@ export function LoginFormSHI({ verifyToken(); }, [token, toast, t]); + // 세션 로딩 시간 추적 및 쿠키 힌트 표시 + useEffect(() => { + if (status === 'loading') { + if (!loadingStartTime) { + setLoadingStartTime(Date.now()); + } + // 5초 후 쿠키 힌트 표시 + const timer = setTimeout(() => { + setShowCookieHint(true); + }, 5000); + return () => clearTimeout(timer); + } else { + // 로딩이 끝나면 초기화 + setLoadingStartTime(null); + setShowCookieHint(false); + } + }, [status, loadingStartTime]); + // 이미 로그인된 사용자 리다이렉트 처리 useEffect(() => { if (status === 'authenticated' && session?.user) { @@ -204,7 +225,25 @@ export function LoginFormSHI({ // 세션 로딩 중이거나 이미 인증된 상태에서는 로딩 표시 if (status === 'loading') { - return <Loading message={t('loading')} />; + return ( + <div className="container relative flex h-screen flex-col items-center justify-center"> + <div className="flex items-center space-x-2"> + <span className="text-md font-bold">eVCP</span> + </div> + <div> + <Animation /> + </div> + <div className="mt-4 text-sm text-muted-foreground">{t('loading')}</div> + {showCookieHint && ( + <div className="mt-4 text-xs text-destructive bg-muted/50 p-3 rounded-lg border border-border max-w-md text-center"> + <div className="font-medium mb-1 text-foreground">Loading taking longer than expected?</div> + <div className="text-muted-foreground"> + Try pressing <kbd className="px-1 py-0.5 bg-muted text-muted-foreground rounded text-xs border">Ctrl+Shift+Delete</kbd> to clear cookies and refresh the page. + </div> + </div> + )} + </div> + ); } if (status === 'authenticated' && session?.user) { diff --git a/components/login/login-form.tsx b/components/login/login-form.tsx index 70a1e775..5fe6ab51 100644 --- a/components/login/login-form.tsx +++ b/components/login/login-form.tsx @@ -21,6 +21,7 @@ import { import { requestPasswordResetAction } from "@/lib/users/auth/partners-auth"; import { checkEmailAndStartAuth, resendEmailOtp } from "@/lib/users/auth/email-auth"; import Loading from "../common/loading/loading"; +import Animation from "../common/loading/animation"; import { VideoBackground } from "./video-background"; export function LoginForm() { @@ -37,6 +38,8 @@ export function LoginForm() { // 상태 관리 const [isFirstAuthLoading, setIsFirstAuthLoading] = useState(false); const [showForgotPassword, setShowForgotPassword] = useState(false); + const [loadingStartTime, setLoadingStartTime] = useState<number | null>(null); + const [showCookieHint, setShowCookieHint] = useState(false); // MFA 관련 상태 const [showMfaForm, setShowMfaForm] = useState(false); @@ -78,6 +81,24 @@ export function LoginForm() { } }, []); + // 세션 로딩 시간 추적 및 쿠키 힌트 표시 + useEffect(() => { + if (status === 'loading') { + if (!loadingStartTime) { + setLoadingStartTime(Date.now()); + } + // 5초 후 쿠키 힌트 표시 + const timer = setTimeout(() => { + setShowCookieHint(true); + }, 5000); + return () => clearTimeout(timer); + } else { + // 로딩이 끝나면 초기화 + setLoadingStartTime(null); + setShowCookieHint(false); + } + }, [status, loadingStartTime]); + // // 영문 페이지에서 S-Gips 로그인 비활성화 시 기본 로그인 방법 설정 // useEffect(() => { // if (lng === 'en' && loginMethod === 'sgips') { @@ -543,7 +564,23 @@ export function LoginForm() { // 세션 로딩 중이거나 이미 인증된 상태에서는 로딩 표시 if (status === 'loading') { return ( - <Loading message={t('loading')} /> + <div className="container relative flex h-screen flex-col items-center justify-center"> + <div className="flex items-center space-x-2"> + <span className="text-md font-bold">eVCP</span> + </div> + <div> + <Animation /> + </div> + <div className="mt-4 text-sm text-muted-foreground">{t('loading')}</div> + {showCookieHint && ( + <div className="mt-4 text-xs text-destructive bg-muted/50 p-3 rounded-lg border border-border max-w-md text-center"> + <div className="font-medium mb-1 text-foreground">Loading taking longer than expected?</div> + <div className="text-muted-foreground"> + Try pressing <kbd className="px-1 py-0.5 bg-muted text-muted-foreground rounded text-xs border">Ctrl+Shift+Delete</kbd> to clear cookies and refresh the page. + </div> + </div> + )} + </div> ); } |