서비스 운영 종료 안내와 모달 가독성 개선
This commit is contained in:
117
script/service-notice.js
Normal file
117
script/service-notice.js
Normal file
@@ -0,0 +1,117 @@
|
||||
/**
|
||||
* 모든 화면에서 서비스 종료 일정과 브라우저별 7일 숨김 선택을 안내한다.
|
||||
*/
|
||||
(function initServiceNotice() {
|
||||
const STORAGE_KEY = 'uniare.serviceNotice.hiddenUntil';
|
||||
const HIDE_DURATION_MS = 7 * 24 * 60 * 60 * 1000;
|
||||
const SUPPORTED_LANGUAGES = new Set(['ko', 'ja', 'en']);
|
||||
|
||||
/**
|
||||
* URL, 브라우저 저장값 순으로 안내 언어를 선택한다.
|
||||
* @returns {string} 지원 언어 코드
|
||||
*/
|
||||
function getLanguage() {
|
||||
const fromQuery = new URLSearchParams(window.location.search).get('lang');
|
||||
let selected = fromQuery;
|
||||
if (!selected) {
|
||||
try {
|
||||
selected = localStorage.getItem('lang');
|
||||
} catch {
|
||||
selected = 'ko';
|
||||
}
|
||||
}
|
||||
return SUPPORTED_LANGUAGES.has(selected) ? selected : 'ko';
|
||||
}
|
||||
|
||||
/**
|
||||
* 저장소가 차단되었거나 만료값이 유효하지 않으면 안내를 표시한다.
|
||||
* @returns {boolean} 7일 숨김 기간이 남아 있는지 여부
|
||||
*/
|
||||
function isHidden() {
|
||||
try {
|
||||
const hiddenUntil = Number(localStorage.getItem(STORAGE_KEY));
|
||||
return Number.isFinite(hiddenUntil) && hiddenUntil > Date.now();
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 페이지 번역과 같은 키를 사용하고, 로딩 실패 시 한국어 안내를 유지한다.
|
||||
* @param {HTMLDialogElement} dialog 안내 모달
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async function translateNotice(dialog) {
|
||||
try {
|
||||
const response = await fetch(`/i18n/translations.${getLanguage()}.json?v=4.0.29`);
|
||||
if (!response.ok) return;
|
||||
const translations = await response.json();
|
||||
dialog.querySelectorAll('[data-i18n]').forEach((element) => {
|
||||
const translated = translations[element.dataset.i18n];
|
||||
if (typeof translated === 'string') element.textContent = translated;
|
||||
});
|
||||
} catch {
|
||||
// 번역 요청 실패가 종료 안내 표시나 닫기를 막지 않도록 한다.
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 네이티브 모달로 배경 접근을 막고 키보드 포커스와 Escape 닫기를 제공한다.
|
||||
*/
|
||||
function showNotice() {
|
||||
if (isHidden() || document.getElementById('service-notice')) return;
|
||||
|
||||
const dialog = document.createElement('dialog');
|
||||
dialog.id = 'service-notice';
|
||||
dialog.setAttribute('aria-labelledby', 'service-notice-title');
|
||||
dialog.setAttribute('aria-describedby', 'service-notice-description service-notice-date service-notice-backup');
|
||||
dialog.className = 'm-auto max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-lg overflow-y-auto break-keep [overflow-wrap:break-word] rounded-2xl border border-slate-100 bg-white p-0 text-slate-700 shadow-xl shadow-slate-900/10 backdrop:bg-slate-900/25 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200';
|
||||
dialog.style.fontFamily = 'Pretendard, "Noto Sans KR", sans-serif';
|
||||
dialog.innerHTML = `
|
||||
<div class="p-6 sm:p-8">
|
||||
<h2 id="service-notice-title" data-i18n="serviceNoticeTitle" class="m-0 text-xl font-semibold tracking-tight">서비스 운영 종료 안내</h2>
|
||||
<p data-i18n="serviceNoticeThanks" class="mt-5 text-sm leading-7 text-slate-600 dark:text-slate-300">그동안 UNIARE를 이용해 주셔서 진심으로 감사합니다.</p>
|
||||
<p id="service-notice-description" data-i18n="serviceNoticeReason" class="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-300">서비스 운영 방향과 제반 여건을 종합적으로 검토한 결과, 서비스 운영을 종료하게 되었습니다.</p>
|
||||
<div class="mt-5 rounded-xl bg-slate-50 px-4 py-3 dark:bg-slate-700/40">
|
||||
<p data-i18n="serviceNoticeDateLabel" class="m-0 text-xs text-slate-500 dark:text-slate-400">서비스 운영 마지막 날</p>
|
||||
<p id="service-notice-date" class="mt-1.5 text-base font-medium"><time datetime="2026-12-11" data-i18n="serviceNoticeDate">2026년 12월 11일 (한국 시간)</time></p>
|
||||
</div>
|
||||
<p id="service-notice-backup" data-i18n="serviceNoticeBackup" class="mt-5 text-sm leading-7 text-slate-600 dark:text-slate-300">보관하고 싶은 덱은 종료 전에 덱 결과 화면에서 PNG 이미지로 다운로드해 주세요.</p>
|
||||
<p data-i18n="serviceNoticeClosing" class="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-300">마지막까지 이용에 불편이 없도록 최선을 다하겠습니다. 그동안 함께해 주신 모든 분께 감사드립니다.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 px-6 py-4 sm:px-8 dark:border-slate-700">
|
||||
<label class="flex cursor-pointer items-center gap-2 text-xs text-slate-500 sm:text-sm dark:text-slate-300">
|
||||
<input id="service-notice-hide-week" type="checkbox" class="h-4 w-4 shrink-0 cursor-pointer accent-slate-500 dark:accent-slate-400" />
|
||||
<span data-i18n="serviceNoticeHideWeek">1주일간 보지 않기</span>
|
||||
</label>
|
||||
<button id="service-notice-confirm" type="button" autofocus data-i18n="serviceNoticeConfirm" class="cursor-pointer rounded-lg border border-slate-200 bg-slate-50 px-5 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600">확인</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const previousOverflow = document.documentElement.style.overflow;
|
||||
const hideWeek = dialog.querySelector('#service-notice-hide-week');
|
||||
dialog.querySelector('#service-notice-confirm').addEventListener('click', () => dialog.close());
|
||||
dialog.addEventListener('close', () => {
|
||||
if (hideWeek.checked) {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, String(Date.now() + HIDE_DURATION_MS));
|
||||
} catch {
|
||||
// 저장소를 사용할 수 없어도 현재 화면의 안내는 정상적으로 닫는다.
|
||||
}
|
||||
}
|
||||
document.documentElement.style.overflow = previousOverflow;
|
||||
dialog.remove();
|
||||
}, { once: true });
|
||||
|
||||
document.body.appendChild(dialog);
|
||||
dialog.showModal();
|
||||
document.documentElement.style.overflow = 'hidden';
|
||||
translateNotice(dialog);
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', showNotice, { once: true });
|
||||
} else {
|
||||
showNotice();
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user