From da6606ef891d8498a4479cadb82e270e52b19166 Mon Sep 17 00:00:00 2001
From: joonhoekim <26rote@gmail.com>
Date: Tue, 11 Nov 2025 15:48:50 +0900
Subject: (김준회) 세션 로딩 애니메이션이 5초 이상 지속되면 쿠키삭제 힌트
 보이도록 가이드 처리
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/login/login-form-shi.tsx | 41 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

(limited to 'components/login/login-form-shi.tsx')

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) {
-- 
cgit v1.2.3

