zenn
dbf02241e2
Express/SQLite API와 Docker 구성을 추가하고 로그인·덱 저장·공개 덱·관리자·프로필 화면을 구현했다. 결과 화면 저장 UX, 헤더 프로필, 애드센스용 app-shell 레이아웃(1280px) 및 문서를 반영했다. Co-authored-by: Cursor <cursoragent@cursor.com>
420 lines
20 KiB
HTML
420 lines
20 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4516420168710424" crossorigin="anonymous"></script>
|
|
<link rel="stylesheet" href="./style/output.css" />
|
|
<link rel="stylesheet" href="./style/app-shell.css" />
|
|
<link rel="stylesheet" href="./style/auth-header.css" />
|
|
<link rel="stylesheet" href="./style/profile.css" />
|
|
<title>내 프로필 - UADECK</title>
|
|
</head>
|
|
<body class="app-page profile-page">
|
|
<nav class="app-nav">
|
|
<div class="app-nav-inner">
|
|
<a href="/" class="app-brand">UADECK <span>v4.0.0</span></a>
|
|
<div id="auth-header-slot"></div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="app-ad-top">
|
|
<div class="app-ad-slot app-ad-slot--leaderboard" id="ad-leaderboard" aria-label="광고"></div>
|
|
</div>
|
|
|
|
<div class="app-shell">
|
|
<div class="app-body-layout">
|
|
<main class="app-main profile-content">
|
|
<header class="profile-header">
|
|
<h1>내 프로필</h1>
|
|
<p>프로필 사진, 사용자명, 이메일, 비밀번호를 변경할 수 있습니다.</p>
|
|
</header>
|
|
|
|
<div id="profile-loading" class="profile-card">
|
|
<div class="profile-body">
|
|
<p style="margin: 0; color: #64748b; font-size: 0.875rem">불러오는 중...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="profile-form-wrap" class="profile-card hidden">
|
|
<div class="profile-hero">
|
|
<div class="profile-avatar-wrap">
|
|
<img id="profile-avatar" class="profile-avatar" alt="프로필 사진" />
|
|
<button type="button" id="profile-avatar-btn" class="profile-avatar-btn" title="사진 변경">📷</button>
|
|
<input type="file" id="profile-avatar-file" accept="image/*" class="hidden" />
|
|
</div>
|
|
<div class="profile-hero-text">
|
|
<h2 id="profile-hero-name">—</h2>
|
|
<p id="profile-hero-email">—</p>
|
|
<button type="button" id="profile-avatar-remove" class="profile-avatar-remove hidden">
|
|
프로필 사진 제거
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="profile-body">
|
|
<div class="profile-field">
|
|
<label class="profile-label" for="profile-email">이메일</label>
|
|
<input type="email" id="profile-email" class="profile-input" autocomplete="email" />
|
|
</div>
|
|
<div class="profile-field">
|
|
<label class="profile-label" for="profile-username">사용자명</label>
|
|
<input type="text" id="profile-username" class="profile-input" autocomplete="username" />
|
|
</div>
|
|
|
|
<button type="button" id="profile-save" class="profile-btn profile-btn-primary" disabled>
|
|
프로필 저장
|
|
</button>
|
|
<p id="profile-error" class="profile-error hidden"></p>
|
|
<p id="profile-success" class="profile-success hidden"></p>
|
|
|
|
<div class="profile-divider"></div>
|
|
|
|
<h3 class="profile-section-title">덱 저장 설정</h3>
|
|
<p class="profile-section-desc">「내 덱으로 저장」시 공개 여부 기본값과 확인 방식을 설정합니다.</p>
|
|
|
|
<div class="profile-toggle-row">
|
|
<div>
|
|
<div class="profile-toggle-label">기본 공개</div>
|
|
<div class="profile-toggle-hint">저장 시 기본으로 공개 덱에 노출</div>
|
|
</div>
|
|
<button type="button" id="pref-public-toggle" class="profile-toggle" aria-pressed="true">
|
|
<span id="pref-public-circle" class="profile-toggle-circle is-on"></span>
|
|
</button>
|
|
<input type="checkbox" id="pref-public-check" class="hidden" checked />
|
|
</div>
|
|
|
|
<div class="profile-toggle-row">
|
|
<div>
|
|
<div class="profile-toggle-label">저장 시 공개 여부 물어보기</div>
|
|
<div class="profile-toggle-hint">끄면 설정한 기본값으로 바로 저장</div>
|
|
</div>
|
|
<button type="button" id="pref-ask-toggle" class="profile-toggle" aria-pressed="true">
|
|
<span id="pref-ask-circle" class="profile-toggle-circle is-on"></span>
|
|
</button>
|
|
<input type="checkbox" id="pref-ask-check" class="hidden" checked />
|
|
</div>
|
|
|
|
<div class="profile-divider"></div>
|
|
|
|
<button type="button" id="profile-open-password" class="profile-btn profile-btn-outline">
|
|
비밀번호 변경
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<aside class="app-ad-rail" aria-label="광고">
|
|
<div class="app-ad-slot app-ad-slot--skyscraper" id="ad-sidebar"></div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="password-modal" class="profile-modal">
|
|
<div class="profile-modal-box">
|
|
<h3>비밀번호 변경</h3>
|
|
<div class="profile-field">
|
|
<label class="profile-label" for="password-current">현재 비밀번호</label>
|
|
<input type="password" id="password-current" class="profile-input" autocomplete="current-password" />
|
|
</div>
|
|
<div class="profile-field">
|
|
<label class="profile-label" for="password-new">새 비밀번호</label>
|
|
<input type="password" id="password-new" class="profile-input" autocomplete="new-password" />
|
|
</div>
|
|
<div class="profile-field">
|
|
<label class="profile-label" for="password-confirm">새 비밀번호 확인</label>
|
|
<input type="password" id="password-confirm" class="profile-input" autocomplete="new-password" />
|
|
</div>
|
|
<p id="password-error" class="profile-error hidden"></p>
|
|
<div class="profile-modal-actions">
|
|
<button type="button" id="password-cancel" class="profile-btn profile-btn-outline">취소</button>
|
|
<button type="button" id="password-save" class="profile-btn profile-btn-primary">변경</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/script/api.js"></script>
|
|
<script src="/script/deck-prefs.js"></script>
|
|
<script src="/script/image-utils.js"></script>
|
|
<script src="/script/auth-header.js"></script>
|
|
<script>
|
|
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 pendingAvatarImage = null;
|
|
let pendingRemoveAvatar = false;
|
|
/** @type {{ email: string, username: string, hasAvatar: boolean }} */
|
|
let baseline = { email: '', username: '', hasAvatar: false };
|
|
|
|
/**
|
|
* 프로필 토글 UI
|
|
* @param {string} toggleId
|
|
* @param {string} circleId
|
|
* @param {string} checkboxId
|
|
* @param {boolean} on
|
|
*/
|
|
function setProfileToggle(toggleId, circleId, checkboxId, on) {
|
|
const toggle = document.getElementById(toggleId);
|
|
const circle = document.getElementById(circleId);
|
|
const checkbox = document.getElementById(checkboxId);
|
|
if (!toggle || !circle || !checkbox) return;
|
|
checkbox.checked = on;
|
|
toggle.setAttribute('aria-pressed', on ? 'true' : 'false');
|
|
toggle.classList.toggle('is-on', on);
|
|
circle.classList.toggle('is-on', on);
|
|
}
|
|
|
|
/**
|
|
* 덱 저장 설정 UI 반영
|
|
* @param {object} user
|
|
*/
|
|
function fillDeckPrefs(user) {
|
|
const prefs = UaDeckPrefs.getPrefs(user);
|
|
setProfileToggle('pref-public-toggle', 'pref-public-circle', 'pref-public-check', prefs.defaultPublic);
|
|
setProfileToggle(
|
|
'pref-ask-toggle',
|
|
'pref-ask-circle',
|
|
'pref-ask-check',
|
|
!prefs.skipPrompt,
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 덱 저장 설정 저장
|
|
*/
|
|
async function persistDeckPrefs() {
|
|
const prefs = {
|
|
defaultPublic: document.getElementById('pref-public-check').checked,
|
|
skipPrompt: !document.getElementById('pref-ask-check').checked,
|
|
};
|
|
await UaDeckPrefs.savePrefs(prefs);
|
|
const cached = UaDeckApi.getCachedUser();
|
|
if (cached) {
|
|
cached.defaultDeckPublic = prefs.defaultPublic;
|
|
cached.skipDeckPublicPrompt = prefs.skipPrompt;
|
|
UaDeckApi.saveAuth(UaDeckApi.getToken(), cached);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 저장 버튼 활성화 여부 갱신
|
|
*/
|
|
function updateSaveButton() {
|
|
const email = document.getElementById('profile-email').value.trim();
|
|
const username = document.getElementById('profile-username').value.trim();
|
|
const dirty =
|
|
email !== baseline.email ||
|
|
username !== baseline.username ||
|
|
pendingAvatarImage !== null ||
|
|
(pendingRemoveAvatar && baseline.hasAvatar);
|
|
const btn = document.getElementById('profile-save');
|
|
btn.disabled = !dirty;
|
|
}
|
|
|
|
/**
|
|
* 저장 기준값 설정 (저장 성공·초기 로드 후)
|
|
* @param {object} user
|
|
*/
|
|
function setBaseline(user) {
|
|
baseline = {
|
|
email: user.email || '',
|
|
username: user.username || '',
|
|
hasAvatar: Boolean(user.avatarUrl),
|
|
};
|
|
pendingAvatarImage = null;
|
|
pendingRemoveAvatar = false;
|
|
updateSaveButton();
|
|
}
|
|
|
|
/**
|
|
* 아바타 URL (캐시 무효화 포함)
|
|
* @param {object|null} user
|
|
* @returns {string}
|
|
*/
|
|
function resolveAvatarSrc(user) {
|
|
const raw = user?.avatarUrl;
|
|
if (!raw) return DEFAULT_AVATAR;
|
|
let url = UaDeckApi.resolveMediaUrl(raw) || raw;
|
|
if (user?.updatedAt && !url.startsWith('data:')) {
|
|
url += (url.includes('?') ? '&' : '?') + 't=' + encodeURIComponent(user.updatedAt);
|
|
}
|
|
return url;
|
|
}
|
|
|
|
/**
|
|
* 폼에 사용자 정보 반영
|
|
* @param {object} user
|
|
*/
|
|
function fillForm(user) {
|
|
document.getElementById('profile-hero-name').textContent = user.username || '—';
|
|
document.getElementById('profile-hero-email').textContent = user.email || '';
|
|
document.getElementById('profile-email').value = user.email || '';
|
|
document.getElementById('profile-username').value = user.username || '';
|
|
document.getElementById('profile-avatar').src = resolveAvatarSrc(user);
|
|
document.getElementById('profile-avatar-remove').classList.toggle('hidden', !user.avatarUrl);
|
|
}
|
|
|
|
/**
|
|
* 메시지 표시
|
|
* @param {'error'|'success'} type
|
|
* @param {string} text
|
|
*/
|
|
function showMessage(type, text) {
|
|
const errEl = document.getElementById('profile-error');
|
|
const okEl = document.getElementById('profile-success');
|
|
errEl.classList.add('hidden');
|
|
okEl.classList.add('hidden');
|
|
if (!text) return;
|
|
const el = type === 'error' ? errEl : okEl;
|
|
el.textContent = text;
|
|
el.classList.remove('hidden');
|
|
}
|
|
|
|
async function init() {
|
|
if (!UaDeckApi.getToken()) {
|
|
location.href = '/login.html?redirect=' + encodeURIComponent('/profile.html');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const { user } = await UaDeckApi.getMe();
|
|
currentUser = user;
|
|
UaDeckApi.saveAuth(UaDeckApi.getToken(), user);
|
|
fillForm(user);
|
|
setBaseline(user);
|
|
fillDeckPrefs(user);
|
|
document.getElementById('profile-loading').classList.add('hidden');
|
|
document.getElementById('profile-form-wrap').classList.remove('hidden');
|
|
} catch (err) {
|
|
document.getElementById('profile-loading').innerHTML =
|
|
'<div class="profile-body"><p class="profile-error" style="margin:0">' +
|
|
(err.message || '프로필을 불러올 수 없습니다.') +
|
|
'</p></div>';
|
|
}
|
|
}
|
|
|
|
document.getElementById('profile-email').addEventListener('input', updateSaveButton);
|
|
document.getElementById('profile-username').addEventListener('input', updateSaveButton);
|
|
|
|
document.getElementById('pref-public-toggle').addEventListener('click', async () => {
|
|
const checkbox = document.getElementById('pref-public-check');
|
|
setProfileToggle(
|
|
'pref-public-toggle',
|
|
'pref-public-circle',
|
|
'pref-public-check',
|
|
!checkbox.checked,
|
|
);
|
|
await persistDeckPrefs();
|
|
});
|
|
|
|
document.getElementById('pref-ask-toggle').addEventListener('click', async () => {
|
|
const checkbox = document.getElementById('pref-ask-check');
|
|
setProfileToggle('pref-ask-toggle', 'pref-ask-circle', 'pref-ask-check', !checkbox.checked);
|
|
await persistDeckPrefs();
|
|
});
|
|
|
|
document.getElementById('profile-avatar-btn').addEventListener('click', () => {
|
|
document.getElementById('profile-avatar-file').click();
|
|
});
|
|
|
|
document.getElementById('profile-avatar-file').addEventListener('change', async (e) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
try {
|
|
pendingAvatarImage = await UaImageUtils.resizeImageToPng(file);
|
|
pendingRemoveAvatar = false;
|
|
document.getElementById('profile-avatar').src = pendingAvatarImage;
|
|
document.getElementById('profile-avatar-remove').classList.remove('hidden');
|
|
showMessage('success', '사진이 선택되었습니다.「프로필 저장」을 눌러 적용하세요.');
|
|
updateSaveButton();
|
|
} catch (err) {
|
|
showMessage('error', err.message || '이미지 처리에 실패했습니다.');
|
|
}
|
|
e.target.value = '';
|
|
});
|
|
|
|
document.getElementById('profile-avatar-remove').addEventListener('click', () => {
|
|
pendingAvatarImage = null;
|
|
pendingRemoveAvatar = true;
|
|
document.getElementById('profile-avatar').src = DEFAULT_AVATAR;
|
|
document.getElementById('profile-avatar-remove').classList.add('hidden');
|
|
showMessage('success', '사진 제거가 예약되었습니다.「프로필 저장」을 눌러 적용하세요.');
|
|
updateSaveButton();
|
|
});
|
|
|
|
document.getElementById('profile-save').addEventListener('click', async () => {
|
|
showMessage('error', '');
|
|
showMessage('success', '');
|
|
const body = {
|
|
email: document.getElementById('profile-email').value.trim(),
|
|
username: document.getElementById('profile-username').value.trim(),
|
|
};
|
|
if (pendingAvatarImage) body.avatarImage = pendingAvatarImage;
|
|
if (pendingRemoveAvatar) body.removeAvatar = true;
|
|
|
|
try {
|
|
const { user } = await UaDeckApi.updateProfile(body);
|
|
currentUser = user;
|
|
UaDeckApi.saveAuth(UaDeckApi.getToken(), user);
|
|
fillForm(user);
|
|
setBaseline(user);
|
|
if (window.UaDeckAuth?.refresh) await window.UaDeckAuth.refresh();
|
|
showMessage('success', '프로필이 저장되었습니다.');
|
|
} catch (err) {
|
|
showMessage('error', err.message || '저장에 실패했습니다.');
|
|
}
|
|
});
|
|
|
|
const passwordModal = document.getElementById('password-modal');
|
|
|
|
document.getElementById('profile-open-password').addEventListener('click', () => {
|
|
document.getElementById('password-current').value = '';
|
|
document.getElementById('password-new').value = '';
|
|
document.getElementById('password-confirm').value = '';
|
|
document.getElementById('password-error').classList.add('hidden');
|
|
passwordModal.classList.add('open');
|
|
});
|
|
|
|
document.getElementById('password-cancel').addEventListener('click', () => {
|
|
passwordModal.classList.remove('open');
|
|
});
|
|
|
|
document.getElementById('password-save').addEventListener('click', async () => {
|
|
const errEl = document.getElementById('password-error');
|
|
errEl.classList.add('hidden');
|
|
const current = document.getElementById('password-current').value;
|
|
const pw = document.getElementById('password-new').value;
|
|
const confirm = document.getElementById('password-confirm').value;
|
|
if (pw.length < 8) {
|
|
errEl.textContent = '비밀번호는 8자 이상이어야 합니다.';
|
|
errEl.classList.remove('hidden');
|
|
return;
|
|
}
|
|
if (pw !== confirm) {
|
|
errEl.textContent = '새 비밀번호가 일치하지 않습니다.';
|
|
errEl.classList.remove('hidden');
|
|
return;
|
|
}
|
|
try {
|
|
await UaDeckApi.changePassword(current, pw);
|
|
passwordModal.classList.remove('open');
|
|
showMessage('success', '비밀번호가 변경되었습니다.');
|
|
} catch (err) {
|
|
errEl.textContent = err.message || '비밀번호 변경에 실패했습니다.';
|
|
errEl.classList.remove('hidden');
|
|
}
|
|
});
|
|
|
|
passwordModal.addEventListener('click', (e) => {
|
|
if (e.target === passwordModal) passwordModal.classList.remove('open');
|
|
});
|
|
|
|
init();
|
|
</script>
|
|
</body>
|
|
</html>
|