v4.0.0: 회원·덱 API, 인증 UI, 프로필 및 레이아웃 통일
Express/SQLite API와 Docker 구성을 추가하고 로그인·덱 저장·공개 덱·관리자·프로필 화면을 구현했다. 결과 화면 저장 UX, 헤더 프로필, 애드센스용 app-shell 레이아웃(1280px) 및 문서를 반영했다. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
207
script/auth-header.js
Normal file
207
script/auth-header.js
Normal file
@@ -0,0 +1,207 @@
|
||||
/**
|
||||
* 헤더 프로필 드롭다운
|
||||
*/
|
||||
(function initAuthHeader() {
|
||||
const DEFAULT_AVATAR =
|
||||
'data:image/svg+xml,' +
|
||||
encodeURIComponent(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#94a3b8"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/></svg>',
|
||||
);
|
||||
|
||||
let currentUser = null;
|
||||
let dropdownOpen = false;
|
||||
|
||||
/**
|
||||
* HTML 이스케이프
|
||||
* @param {string} str
|
||||
* @returns {string}
|
||||
*/
|
||||
function escapeHtml(str) {
|
||||
return String(str ?? '')
|
||||
.replace(/&/g, '&')
|
||||
.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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 아바타 HTML
|
||||
* @param {object|null} user
|
||||
* @returns {string}
|
||||
*/
|
||||
function avatarHtml(user) {
|
||||
const src = resolveAvatarSrc(user);
|
||||
return `<img src="${src}" alt="profile" onerror="this.src='${DEFAULT_AVATAR}'" />`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 프로필 버튼 HTML (아바타 + 사용자명)
|
||||
* @param {object|null} user
|
||||
* @returns {string}
|
||||
*/
|
||||
function profileBtnHtml(user) {
|
||||
const avatar = avatarHtml(user);
|
||||
if (!user?.username) {
|
||||
return `<span class="auth-avatar-wrap">${avatar}</span>`;
|
||||
}
|
||||
return `
|
||||
<span class="auth-avatar-wrap">${avatar}</span>
|
||||
<span class="auth-username">${escapeHtml(user.username)}</span>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 드롭다운 메뉴 렌더
|
||||
*/
|
||||
function renderDropdown() {
|
||||
const dd = document.getElementById('auth-dropdown');
|
||||
if (!dd) return;
|
||||
|
||||
if (!currentUser) {
|
||||
dd.innerHTML = `
|
||||
<a href="/login.html" class="auth-dropdown-item">로그인</a>
|
||||
<a href="/signup.html" class="auth-dropdown-item">회원가입</a>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const adminLink =
|
||||
currentUser.role === 'admin'
|
||||
? `<a href="/admin.html" class="auth-dropdown-item">관리자</a>`
|
||||
: '';
|
||||
|
||||
dd.innerHTML = `
|
||||
<div class="auth-dropdown-header">
|
||||
<div class="auth-dropdown-name">${currentUser.username}</div>
|
||||
<div class="auth-dropdown-email">${currentUser.email || ''}</div>
|
||||
</div>
|
||||
<a href="/profile.html" class="auth-dropdown-item">내 프로필</a>
|
||||
<a href="/deckHistory.html" class="auth-dropdown-item">내 덱 관리</a>
|
||||
<a href="/preset.html" class="auth-dropdown-item">공개 덱</a>
|
||||
${adminLink}
|
||||
<div class="auth-dropdown-divider"></div>
|
||||
<button type="button" class="auth-dropdown-item danger" id="auth-logout-btn">로그아웃</button>
|
||||
`;
|
||||
|
||||
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) {
|
||||
btn.innerHTML = profileBtnHtml(currentUser);
|
||||
btn.classList.toggle('auth-profile-btn--named', Boolean(currentUser?.username));
|
||||
}
|
||||
renderDropdown();
|
||||
}
|
||||
|
||||
/**
|
||||
* 슬롯에 헤더 마운트
|
||||
* @param {HTMLElement} slot
|
||||
*/
|
||||
function mount(slot) {
|
||||
slot.innerHTML = `
|
||||
<div class="auth-header-wrap">
|
||||
<button type="button" id="auth-avatar-btn" class="auth-avatar-btn" aria-label="계정 메뉴">
|
||||
${profileBtnHtml(currentUser)}
|
||||
</button>
|
||||
<div id="auth-dropdown" class="auth-dropdown"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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() {
|
||||
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,
|
||||
};
|
||||
})();
|
||||
Reference in New Issue
Block a user