document-server/frontend/static/js/auth.js

/**
 * 인증 관련 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);