feat: add dismissible domain migration notice

2026-09-21 10:04:37 +09:00
parent 8ed658e804
commit 4c049b0860
4 changed files with 53 additions and 1 deletions
@@ -0,0 +1,38 @@
+<script lang="ts">
+  let dismissed = false;
+</script>
+
+{#if !dismissed}
+<aside class="migration-notice" aria-labelledby="migration-title">
+  <div class="notice-inner">
+    <button class="dismiss" type="button" aria-label="사이트 주소 변경 안내 닫기" on:click={() => dismissed = true}><span aria-hidden="true">×</span></button>
+    <div class="notice-copy">
+      <h2 id="migration-title">9월 28일 00:00부터 사이트 주소가 doricalc.cc로 변경됩니다</h2>
+      <p>주소 변경 후에는 기존 저장 데이터가 자동으로 옮겨지지 않습니다. 지금 사용하는 브라우저에서 <strong>백업 내보내기</strong>로 JSON 파일을 보관해 주세요. 이전 완료 후 새 주소의 ‘사용자 데이터 → 일반’에서 <strong>백업 가져오기</strong>를 해주세요.</p>
+      <p class="notice-schedule">이전 예정: 2026년 9월 28일 00:00 (한국 시간) · 이전 직전에는 최신 데이터로 다시 백업해 주세요.</p>
+    </div>
+    <div class="notice-actions">
+      <a href="/data">사용자 데이터로 이동 <span aria-hidden="true">→</span></a>
+      <a href="https://gall.dcinside.com/mgallery/board/view/?id=holodreams&no=50312" target="_blank" rel="noopener noreferrer" aria-label="자세한 안내 (디시인사이드, 새 탭)">자세한 안내 <span aria-hidden="true">↗</span></a>
+    </div>
+  </div>
+</aside>
+{/if}
+
+<style>
+  .migration-notice { border-bottom: 1px solid #725536; background: #30261d; color: #f4e6d4; }
+  .notice-inner { position: relative; display: flex; align-items: center; gap: 16px 28px; width: min(var(--page-max-width), calc(100% - var(--page-gutter))); margin: 0 auto; padding: 16px 48px 16px 0; }
+  .dismiss { position: absolute; top: 10px; right: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #ffe1b8; font-size: 26px; cursor: pointer; }
+  .dismiss:hover { background: #493723; }
+  .notice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+  .notice-copy { flex: 1; min-width: 0; }
+  h2 { margin: 0 0 6px; color: #ffd49a; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
+  p { margin: 0; font-size: 13px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
+  .notice-schedule { margin-top: 4px; color: #d7c1a6; }
+  a { flex-shrink: 0; padding: 10px 14px; border: 1px solid #a88352; border-radius: 9px; color: #ffe1b8; font-size: 13px; font-weight: 750; line-height: 1.5; text-decoration: none; }
+  a:hover { background: #493723; }
+  a:focus-visible, button:focus-visible { outline: 3px solid #ffd49a; outline-offset: 3px; }
+  @media (max-width: 760px) {
+    .notice-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
+  }
+</style>