/** * 인증 관련 Alpine.js 컴포넌트 */ // 인증 모달 컴포넌트 window.authModal = () => ({ showLogin: false, loginForm: { email: '', password: '' }, loginError: '', loginLoading: false, async login() { this.loginLoading = true; this.loginError = ''; try { console.log('🔐 로그인 시도:', this.loginForm.email); // API 클래스의 login 메서드 사용 (이미 토큰 설정과 사용자 정보 가져오기 포함) const result = await window.api.login(this.loginForm.email, this.loginForm.password); console.log('✅ 로그인 결과:', result); if (result.success) { // refresh_token 저장 (access_token은 API 클래스에서 이미 처리됨) const loginResponse = await fetch('/api/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(this.loginForm) }); const tokenData = await loginResponse.json(); localStorage.setItem('refresh_token', tokenData.refresh_token); console.log('💾 토큰 저장 완료'); // 전역 상태 업데이트 window.dispatchEvent(new CustomEvent('auth-changed', { detail: { isAuthenticated: true, user: result.user } })); // 모달 닫기 window.dispatchEvent(new CustomEvent('close-login-modal')); this.loginForm = { email: '', password: '' }; } else { this.loginError = result.message || '로그인에 실패했습니다'; } } catch (error) { console.error('❌ 로그인 오류:', error); this.loginError = error.message || '로그인에 실패했습니다'; } finally { this.loginLoading = false; } }, async logout() { try { await window.api.logout(); } catch (error) { console.error('Logout error:', error); } finally { // 로컬 스토리지 정리 localStorage.removeItem('refresh_token'); // 전역 상태 업데이트 window.dispatchEvent(new CustomEvent('auth-changed', { detail: { isAuthenticated: false, user: null } })); } } }); // 자동 토큰 갱신 async function refreshTokenIfNeeded() { const refreshToken = localStorage.getItem('refresh_token'); if (!refreshToken || !api.token) return; try { // 토큰 만료 확인 (JWT 디코딩) const tokenPayload = JSON.parse(atob(api.token.split('.')[1])); const now = Date.now() / 1000; // 토큰이 5분 내에 만료되면 갱신 if (tokenPayload.exp - now < 300) { const response = await api.refreshToken(refreshToken); api.setToken(response.access_token); localStorage.setItem('refresh_token', response.refresh_token); } } catch (error) { console.error('Token refresh failed:', error); // 갱신 실패시 로그아웃 window.api.setToken(null); localStorage.removeItem('refresh_token'); window.dispatchEvent(new CustomEvent('auth-changed', { detail: { isAuthenticated: false, user: null } })); } } // 5분마다 토큰 갱신 체크 setInterval(refreshTokenIfNeeded, 5 * 60 * 1000);