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:
419
profile.html
Normal file
419
profile.html
Normal file
@@ -0,0 +1,419 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user