From 71e99fed1ad72de8d4957a7840b45062d14711ac Mon Sep 17 00:00:00 2001 From: Hyungi Ahn Date: Sat, 25 Oct 2025 12:39:09 +0900 Subject: [PATCH] =?UTF-8?q?perf:=20=EA=B3=B5=ED=86=B5=20=ED=97=A4=EB=8D=94?= =?UTF-8?q?=20=ED=91=9C=EC=8B=9C=20=ED=83=80=EC=9D=B4=EB=B0=8D=20=EB=8C=80?= =?UTF-8?q?=ED=8F=AD=20=EA=B0=9C=EC=84=A0=20-=20=ED=95=9C=EB=B0=95?= =?UTF-8?q?=EC=9E=90=20=EB=8A=A6=EC=9D=8C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🎯 Issue: 헀더가 ν•œλ°•μž 늦게 λ‚˜μ˜€λŠ” 문제 - κΈ°μ‘΄: API 슀크립트 λ‘œλ“œ β†’ 인증 체크 β†’ 헀더 μ΄ˆκΈ°ν™” (느림) - κ°œμ„ : DOM λ‘œλ“œ μ¦‰μ‹œ β†’ μΊμ‹œλœ μ‚¬μš©μžλ‘œ 헀더 ν‘œμ‹œ (빠름) ⚑ Performance Improvements: 1. DOM λ‘œλ“œ μ‹œμ μ—μ„œ μ¦‰μ‹œ 헀더 ν‘œμ‹œ μ‹œλ„ 2. AuthManager μΊμ‹œλœ μ‚¬μš©μž 정보 ν™œμš© 3. 곡톡 헀더 μ΄ˆκΈ°ν™” ν•¨μˆ˜ 뢄리 및 쀑볡 방지 4. 3단계 헀더 μ΄ˆκΈ°ν™” μ „λž΅ πŸ”§ 3-Tier Header Loading Strategy: Tier 1: DOM λ‘œλ“œ μ‹œμ  (κ°€μž₯ 빠름) - AuthManager μΊμ‹œ 확인 - μ‚¬μš©μž 정보 있으면 μ¦‰μ‹œ 헀더 ν‘œμ‹œ Tier 2: API 슀크립트 λ‘œλ“œ ν›„ (보쑰) - μΊμ‹œλœ μ‚¬μš©μžλ‘œ μ¦‰μ‹œ 헀더 μ΄ˆκΈ°ν™” - 이미 μ΄ˆκΈ°ν™”λ˜μ—ˆμœΌλ©΄ μŠ€ν‚΅ Tier 3: 인증 체크 ν›„ (μ΅œμ’… 확인) - 이미 μ΄ˆκΈ°ν™”λ˜μ—ˆμœΌλ©΄ μŠ€ν‚΅ - 쀑볡 μ΄ˆκΈ°ν™” 방지 🎨 Enhanced UX: - 헀더 ν‘œμ‹œ 지연 μ΅œμ†Œν™” (거의 μ¦‰μ‹œ) - 쀑볡 μ΄ˆκΈ°ν™” λ°©μ§€λ‘œ κΉœλΉ‘μž„ μ—†μŒ - 둜그인된 μ‚¬μš©μž κ²½ν—˜ λŒ€ν­ κ°œμ„  πŸ”§ Code Improvements: - initializeCommonHeader() ν•¨μˆ˜ 뢄리 - window.commonHeaderInitialized ν”Œλž˜κ·Έ - 곡톡 헀더 λͺ¨λ“ˆ λ‘œλ“œ λŒ€κΈ° 둜직 - 쀑볡 방지 및 μ—λŸ¬ 처리 Expected Result: βœ… 헀더 μ¦‰μ‹œ ν‘œμ‹œ (ν•œλ°•μž 늦음 ν•΄κ²°) βœ… λ§€λ„λŸ¬μš΄ νŽ˜μ΄μ§€ λ‘œλ”© βœ… 쀑볡 μ΄ˆκΈ°ν™” 방지 βœ… μ•ˆμ •μ μΈ 헀더 ν‘œμ‹œ --- frontend/index.html | 72 +++++++++++++++++++++++++++++++++------------ 1 file changed, 53 insertions(+), 19 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 741a47a..f954270 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -489,6 +489,27 @@ let currentPhotos = []; let issues = []; + // 곡톡 헀더 μ΄ˆκΈ°ν™” ν•¨μˆ˜ (쀑볡 방지) + async function initializeCommonHeader(user) { + console.log('πŸ”§ 곡톡 헀더 μ΄ˆκΈ°ν™” μ‹œμž‘:', user.username); + + if (window.commonHeader && typeof window.commonHeader.init === 'function') { + await window.commonHeader.init(user, 'issues_create'); + window.commonHeaderInitialized = true; + console.log('βœ… 곡톡 헀더 μ΄ˆκΈ°ν™” μ™„λ£Œ'); + } else { + console.error('❌ 곡톡 헀더 λͺ¨λ“ˆμ΄ λ‘œλ“œλ˜μ§€ μ•ŠμŒ'); + // 지연 μž¬μ‹œλ„ + setTimeout(async () => { + if (window.commonHeader && typeof window.commonHeader.init === 'function') { + console.log('πŸ”„ μ§€μ—°λœ 곡톡 헀더 μ΄ˆκΈ°ν™”'); + await window.commonHeader.init(user, 'issues_create'); + window.commonHeaderInitialized = true; + } + }, 200); + } + } + // μˆ˜λ™ μ΄ˆκΈ°ν™” ν•¨μˆ˜ (initializeApp ν•¨μˆ˜κ°€ λ‘œλ“œλ˜μ§€ μ•Šμ„ λ•Œ μ‚¬μš©) async function manualInitialize() { console.log('πŸ”§ μˆ˜λ™ μ΄ˆκΈ°ν™” μ‹œμž‘'); @@ -549,6 +570,13 @@ async function initializeApp() { console.log('πŸš€ μ•± μ΄ˆκΈ°ν™” μ‹œμž‘ (AuthManager μ‚¬μš©)'); + // AuthManagerκ°€ 이미 μ‚¬μš©μž 정보λ₯Ό 가지고 μžˆλ‹€λ©΄ μ¦‰μ‹œ 헀더 ν‘œμ‹œ + if (window.authManager.isLoggedIn()) { + const cachedUser = window.authManager.getCurrentUser(); + console.log('⚑ μΊμ‹œλœ μ‚¬μš©μžλ‘œ μ¦‰μ‹œ 헀더 μ΄ˆκΈ°ν™”:', cachedUser.username); + await initializeCommonHeader(cachedUser); + } + try { // AuthManagerλ₯Ό ν†΅ν•œ 인증 체크 (μΊμ‹œ μš°μ„ , ν•„μš”μ‹œμ—λ§Œ API 호좜) const user = await window.authManager.checkAuth(); @@ -557,20 +585,11 @@ currentUser = user; console.log('βœ… currentUser μ „μ—­ λ³€μˆ˜ μ—…λ°μ΄νŠΈ:', currentUser.username); - // 곡톡 헀더 μ΄ˆκΈ°ν™” - console.log('πŸ”§ 곡톡 헀더 μ΄ˆκΈ°ν™” μ‹œμž‘:', user.username); - - if (window.commonHeader && typeof window.commonHeader.init === 'function') { - await window.commonHeader.init(user, 'issues_create'); - console.log('βœ… 곡톡 헀더 μ΄ˆκΈ°ν™” μ™„λ£Œ'); + // 곡톡 헀더 μ΄ˆκΈ°ν™” (이미 μ΄ˆκΈ°ν™”λ˜μ—ˆλ‹€λ©΄ μŠ€ν‚΅) + if (!window.commonHeaderInitialized) { + await initializeCommonHeader(user); } else { - console.error('❌ 곡톡 헀더 λͺ¨λ“ˆμ΄ λ‘œλ“œλ˜μ§€ μ•ŠμŒ'); - setTimeout(() => { - if (window.commonHeader && typeof window.commonHeader.init === 'function') { - console.log('πŸ”„ μ§€μ—°λœ 곡톡 헀더 μ΄ˆκΈ°ν™”'); - window.commonHeader.init(user, 'issues_create'); - } - }, 200); + console.log('βœ… 곡톡 헀더 이미 μ΄ˆκΈ°ν™”λ¨ - μŠ€ν‚΅'); } // νŽ˜μ΄μ§€ μ ‘κ·Ό κΆŒν•œ 체크 @@ -605,9 +624,26 @@ } } - // DOM λ‘œλ“œ μ™„λ£Œ μ‹œ λŒ€κΈ° (API μŠ€ν¬λ¦½νŠΈκ°€ λ‘œλ“œλ˜λ©΄ initializeApp 호좜됨) - window.addEventListener('DOMContentLoaded', () => { - console.log('πŸ“„ DOM λ‘œλ“œ μ™„λ£Œ - API 슀크립트 λ‘œλ”© λŒ€κΈ° 쀑...'); + // DOM λ‘œλ“œ μ™„λ£Œ μ‹œ μ¦‰μ‹œ 헀더 ν‘œμ‹œ μ‹œλ„ + window.addEventListener('DOMContentLoaded', async () => { + console.log('πŸ“„ DOM λ‘œλ“œ μ™„λ£Œ - μ¦‰μ‹œ 헀더 ν‘œμ‹œ μ‹œλ„'); + + // AuthManagerκ°€ 이미 λ‘œλ“œλ˜μ—ˆκ³  μ‚¬μš©μž 정보가 μžˆλ‹€λ©΄ μ¦‰μ‹œ 헀더 ν‘œμ‹œ + if (window.authManager && window.authManager.isLoggedIn()) { + const cachedUser = window.authManager.getCurrentUser(); + console.log('⚑ DOM λ‘œλ“œ μ‹œμ μ—μ„œ μ¦‰μ‹œ 헀더 ν‘œμ‹œ:', cachedUser.username); + + // 곡톡 헀더 λͺ¨λ“ˆμ΄ λ‘œλ“œλ  λ•ŒκΉŒμ§€ μž μ‹œ λŒ€κΈ° + let attempts = 0; + while (!window.commonHeader && attempts < 10) { + await new Promise(resolve => setTimeout(resolve, 50)); + attempts++; + } + + if (window.commonHeader) { + await initializeCommonHeader(cachedUser); + } + } }); // 둜그인 (AuthManager μ‚¬μš©) @@ -624,9 +660,7 @@ console.log('βœ… 둜그인 성곡 - 메인 ν™”λ©΄ μ΄ˆκΈ°ν™”'); // 곡톡 헀더 μ΄ˆκΈ°ν™” - if (window.commonHeader && typeof window.commonHeader.init === 'function') { - await window.commonHeader.init(currentUser, 'issues_create'); - } + await initializeCommonHeader(currentUser); // 둜그인 성곡 ν›„ 메인 ν™”λ©΄ ν‘œμ‹œ document.getElementById('loginScreen').classList.add('hidden');