/**
* 헤더 프로필 드롭다운
*/
(function initAuthHeader() {
const DEFAULT_AVATAR =
'data:image/svg+xml,' +
encodeURIComponent(
'',
);
let currentUser = null;
let dropdownOpen = false;
/**
* @param {string} key
* @param {string} fallback
* @returns {string}
*/
function t(key, fallback) {
if (window.UaPageI18n?.t) {
return window.UaPageI18n.t(key, fallback);
}
return fallback;
}
/**
* HTML 이스케이프
* @param {string} str
* @returns {string}
*/
function escapeHtml(str) {
return String(str ?? '')
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/"/g, '"');
}
/**
* 드롭다운 닫기
*/
function closeDropdown() {
const dd = document.getElementById('auth-dropdown');
if (dd) dd.classList.remove('open');
dropdownOpen = false;
}
/**
* 아바타 이미지 src (캐시 무효화 포함)
* @param {object|null} user
* @returns {string}
*/
function resolveAvatarSrc(user) {
const raw = user?.avatarUrl;
if (!raw) return DEFAULT_AVATAR;
let src =
window.UaDeckApi?.resolveMediaUrl
? window.UaDeckApi.resolveMediaUrl(raw) || raw
: raw;
if (user?.updatedAt && src && !src.startsWith('data:')) {
src += (src.includes('?') ? '&' : '?') + 't=' + encodeURIComponent(user.updatedAt);
}
return src;
}
/**
* 표시용 닉네임
* @param {object|null} user
* @returns {string}
*/
function getDisplayName(user) {
if (!user) return '';
return String(user.username || user.displayName || '').trim();
}
/**
* 아바타 HTML
* @param {object|null} user
* @returns {string}
*/
function avatarHtml(user) {
const src = resolveAvatarSrc(user);
return `
`;
}
/**
* 프로필 버튼 HTML (아바타 + 닉네임)
* @param {object|null} user
* @returns {string}
*/
function profileBtnHtml(user) {
const name = getDisplayName(user);
const avatar = avatarHtml(user);
if (!name) {
return `${avatar}`;
}
return `
${avatar}
${escapeHtml(name)}
`;
}
/**
* 드롭다운 메뉴 렌더
*/
function renderDropdown() {
const dd = document.getElementById('auth-dropdown');
if (!dd) return;
if (!currentUser) {
dd.innerHTML = `
${escapeHtml(t('authLogin', '로그인'))}
${escapeHtml(t('authSignup', '회원가입'))}
`;
return;
}
const adminLink =
currentUser.role === 'admin'
? `${escapeHtml(t('authAdmin', '관리자'))}`
: '';
dd.innerHTML = `
${escapeHtml(t('authMyProfile', '내 프로필'))}
${escapeHtml(t('authMyDecks', '내 덱 관리'))}
${escapeHtml(t('authPublicDecks', '공개 덱'))}
${adminLink}
`;
const logoutBtn = document.getElementById('auth-logout-btn');
if (logoutBtn) {
logoutBtn.addEventListener('click', () => {
window.UaDeckApi.logout();
currentUser = null;
closeDropdown();
location.href = '/';
});
}
}
/**
* 헤더 UI 갱신
*/
function renderHeader() {
const btn = document.getElementById('auth-avatar-btn');
if (btn) {
const name = getDisplayName(currentUser);
btn.innerHTML = profileBtnHtml(currentUser);
btn.classList.toggle('auth-profile-trigger--named', Boolean(name));
btn.classList.toggle('auth-profile-trigger--guest', !name);
const menuLabel = name
? t('authAccountMenuNamed', '{name} 계정 메뉴').replace('{name}', name)
: t('authAccountMenu', '계정 메뉴');
btn.setAttribute('aria-label', menuLabel);
}
renderDropdown();
}
/**
* 슬롯에 헤더 마운트
* @param {HTMLElement} slot
*/
function mount(slot) {
slot.innerHTML = `
`;
document.getElementById('auth-avatar-btn').addEventListener('click', async (e) => {
e.stopPropagation();
dropdownOpen = !dropdownOpen;
const dd = document.getElementById('auth-dropdown');
if (dropdownOpen) {
await refreshCurrentUser();
renderHeader();
dd.classList.add('open');
} else {
dd.classList.remove('open');
}
});
document.addEventListener('click', closeDropdown);
}
/**
* 서버에서 최신 사용자 정보 동기화
*/
async function refreshCurrentUser() {
if (!window.UaDeckApi?.getToken()) {
currentUser = null;
return;
}
try {
const { user } = await window.UaDeckApi.getMe();
currentUser = user;
window.UaDeckApi.saveAuth(window.UaDeckApi.getToken(), user);
} catch {
window.UaDeckApi.logout();
currentUser = null;
}
}
/**
* 초기화
*/
async function init() {
if (window.UaPageI18n?.applyPageI18n) {
await window.UaPageI18n.applyPageI18n();
}
currentUser = window.UaDeckApi.getCachedUser();
await refreshCurrentUser();
const slot = document.getElementById('auth-header-slot');
if (slot) {
mount(slot);
renderHeader();
} else {
renderHeader();
}
}
document.addEventListener('DOMContentLoaded', init);
window.UaDeckAuth = {
getUser: () => currentUser,
refresh: init,
refreshCurrentUser,
};
})();