hyungi/M-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 근본적 화면 표시 로직 개선 - 로그인 창 깜빡임 완전 해결

Browse Source 
🎯 Root Cause Analysis:
- 기존: 기본적으로 로그인 화면 표시 → 인증 확인 후 메인 화면 전환
- 문제: 이미 로그인된 사용자도 로그인 화면이 잠깐 보임 (깜빡임)
- 원인: 잘못된 기본 화면 설정

🔧 Fundamental Fix:
- 기본 화면을 메인 화면으로 변경
- 로그인 화면은 기본 숨김 (hidden)
- AuthManager가 인증 실패 시에만 로그인 화면 표시

🎨 New Logic:
Before:
  페이지 로드 → 로그인 화면 표시 → 인증 체크 → 메인 화면 전환 (깜빡임)

After:
  페이지 로드 → 메인 화면 표시 → 인증 체크 → 실패 시에만 로그인 화면 (깜빡임 없음)

🔧 Code Changes:
- loginScreen: 기본 hidden 클래스 추가
- mainScreen: 기본 hidden 클래스 제거
- 인증 실패 시에만 화면 전환 로직 실행
- 불필요한 setTimeout 및 강제 스타일 제거

🎯 Expected Result:
✅ 이미 로그인된 사용자: 즉시 메인 화면 표시 (깜빡임 없음)
✅ 로그인 필요한 사용자: 로그인 화면 표시
✅ 깔끔한 사용자 경험
✅ 불필요한 화면 전환 제거
This commit is contained in:
Hyungi Ahn
2025-10-25 12:36:38 +09:00
parent f929f0cdaa
commit ccbd5fb103
1 changed files with 17 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/index.html
View File

@@ -169,8 +169,8 @@
</div>
</div>
<!-- 로그인 화면 -->
<div id="loginScreen" class="min-h-screen flex items-center justify-center p-4 bg-gray-50">
<!-- 로그인 화면 (기본 숨김 - AuthManager가 결정) -->
<div id="loginScreen" class="min-h-screen flex items-center justify-center p-4 bg-gray-50 hidden">
<div class="bg-white rounded-xl shadow-lg p-8 w-full max-w-sm">
<div class="text-center mb-6">
<i class="fas fa-clipboard-check text-5xl text-blue-500 mb-4"></i>
@@ -206,8 +206,8 @@
</div>
</div>
<!-- 메인 화면 -->
<div id="mainScreen" class="hidden min-h-screen bg-gray-50">
<!-- 메인 화면 (기본 표시 - AuthManager가 결정) -->
<div id="mainScreen" class="min-h-screen bg-gray-50">
<!-- 공통 헤더가 여기에 자동으로 삽입됩니다 -->
<!-- 부적합 등록 섹션 (모바일 최적화) -->
@@ -582,30 +582,8 @@
}
}, 500);
// 메인 화면 표시 (타이밍 문제 해결을 위한 지연)
setTimeout(() => {
console.log('🖥️ 지연된 화면 전환 시작');
const loginScreen = document.getElementById('loginScreen');
const mainScreen = document.getElementById('mainScreen');
console.log('loginScreen 요소:', !!loginScreen);
console.log('mainScreen 요소:', !!mainScreen);
if (loginScreen && mainScreen) {
// CSS 클래스와 인라인 스타일 모두 적용 (강제)
loginScreen.classList.add('hidden');
loginScreen.style.display = 'none';
mainScreen.classList.remove('hidden');
mainScreen.style.display = 'block';
console.log('✅ 메인 화면으로 전환 완료 (지연 후 강제 적용)');
console.log('loginScreen display:', loginScreen.style.display);
console.log('mainScreen display:', mainScreen.style.display);
} else {
console.error('❌ 화면 요소를 찾을 수 없음');
}
}, 100); // 100ms 지연
// 이미 로그인된 사용자는 메인 화면이 기본으로 표시됨
console.log('✅ 이미 로그인된 사용자 - 메인 화면 유지');
// 데이터 로드
await loadProjects();
@@ -614,12 +592,16 @@
} else {
console.log('❌ 인증되지 않은 사용자 - 로그인 화면 표시');
// 로그인 화면은 이미 기본으로 표시됨
// 로그인이 필요한 경우 로그인 화면 표시
document.getElementById('loginScreen').classList.remove('hidden');
document.getElementById('mainScreen').classList.add('hidden');
}
} catch (error) {
console.error('❌ 앱 초기화 실패:', error);
// 로그인 화면 표시 (기본 상태)
// 에러 발생 시 로그인 화면 표시
document.getElementById('loginScreen').classList.remove('hidden');
document.getElementById('mainScreen').classList.add('hidden');
}
}
@@ -646,19 +628,11 @@
await window.commonHeader.init(currentUser, 'issues_create');
}
// 메인 화면 표시 (타이밍 문제 해결을 위한 지연)
setTimeout(() => {
const loginScreen = document.getElementById('loginScreen');
const mainScreen = document.getElementById('mainScreen');
loginScreen.classList.add('hidden');
loginScreen.style.display = 'none';
mainScreen.classList.remove('hidden');
mainScreen.style.display = 'block';
console.log('✅ 로그인 후 메인 화면 전환 완료 (지연 후 강제 적용)');
}, 100);
// 로그인 성공 후 메인 화면 표시
document.getElementById('loginScreen').classList.add('hidden');
document.getElementById('mainScreen').classList.remove('hidden');
console.log('✅ 로그인 후 메인 화면 전환 완료');
// 데이터 로드
await loadProjects();