(김준회) 세션 로딩 애니메이션이 5초 이상 지속되면 쿠키삭제 힌트 보이도록 가이드 처리

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>
         );
     }