sb-front/src/components/WebOnlyNotice.vue

<script setup>
import { RouterLink } from 'vue-router'
import AdBanner from '@/components/AdBanner.vue'
// PC·모바일 웹에서 노출되는 안내 페이지. 실제 이용은 앱(모바일) 또는 PC 데스크톱 클라이언트에서.
// PC 설치파일은 서버 /download/ 경로(영속 디렉터리)에서 서빙 — nginx 설정 참고.
const PC_DOWNLOAD_URL = '/download/DonDwaeji-Setup.exe'
// 모바일 앱(APK/스토어) 링크는 준비되면 연결
const mobileReady = false
</script>

<template>
  <main class="web-only">
    <div class="card">
      <h1 class="brand">돈돼지 가계부</h1>
      <p class="tagline">슬림하게 관리하는 가계부 · 자산 · 예산</p>

      <div class="notice">
        <p class="lead">
          <span class="ln">🖥️ PC는 <b>설치형 앱</b>으로,</span>
          <span class="ln">📱 모바일은 <b>앱</b>으로 이용해요.</span>
        </p>
        <p class="sub">
          <span class="ln">웹 브라우저에서는 안내만 제공됩니다.</span>
          <span class="ln">설치한 뒤 로그인해 주세요.</span>
        </p>
      </div>

      <div class="dl-group">
        <a class="dl-btn" :href="PC_DOWNLOAD_URL" download>
          🖥️ PC 버전 다운로드 (Windows)
        </a>
        <button type="button" class="dl-btn ghost" :disabled="!mobileReady">
          {{ mobileReady ? '📱 모바일 앱 다운로드' : '📱 모바일 앱 (준비 중)' }}
        </button>
      </div>

      <ul class="features">
        <li><span class="f-icon">📒</span><b>간편한 가계부</b><span>수입·지출을 빠르게 기록</span></li>
        <li><span class="f-icon">🏦</span><b>자산·부채 관리</b><span>계좌·카드·대출·투자까지</span></li>
        <li><span class="f-icon">🎯</span><b>예산과 분석</b><span>예산 대비 지출·차트</span></li>
      </ul>

      <nav class="legal-links">
        <RouterLink to="/privacy">개인정보처리방침</RouterLink>
        <span aria-hidden="true">·</span>
        <RouterLink to="/terms">이용약관</RouterLink>
        <span aria-hidden="true">·</span>
        <RouterLink to="/account-deletion">계정 삭제</RouterLink>
      </nav>
    </div>

    <!-- 하단 광고 (유료 회원 제외) -->
    <AdBanner class="web-ad" />
  </main>
</template>

<style scoped>
.web-only {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: 1.5rem;
  background:
    radial-gradient(120% 120% at 50% 0%, hsla(160, 100%, 37%, 0.12), transparent 60%),
    var(--color-background);
}
.web-ad {
  margin-top: auto; /* 페이지 하단으로 */
}
.card {
  width: 100%;
  max-width: 420px;
  text-align: center;
  padding: 2.4rem 1.6rem;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-background-soft);
  /* 한국어는 단어(어절) 단위로 줄바꿈 — 'O요.' 가 혼자 다음 줄로 떨어지는 현상 방지 */
  word-break: keep-all;
}
.brand {
  font-size: 2rem;
  letter-spacing: -0.5px;
}
.tagline {
  margin-top: 0.4rem;
  opacity: 0.75;
  font-size: 0.95rem;
}
.notice {
  margin: 1.6rem 0 1.2rem;
}
.lead {
  font-size: 1.05rem;
  font-weight: 700;
}
.sub {
  margin-top: 0.5rem;
  font-size: 0.86rem;
  opacity: 0.7;
}
/* 각 구절을 한 덩어리로 — 좁으면 절(span) 경계에서만 줄바꿈, 넓으면 한 줄 */
.lead .ln,
.sub .ln {
  display: inline-block;
}
.dl-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.dl-btn {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid hsla(160, 100%, 37%, 1);
  border-radius: 10px;
  background: hsla(160, 100%, 37%, 1);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.dl-btn:hover {
  background: hsla(160, 100%, 32%, 1);
}
.dl-btn.ghost {
  background: transparent;
  color: hsla(160, 100%, 37%, 1);
}
.dl-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.features {
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 0;
  display: grid;
  gap: 0.6rem;
  text-align: left;
}
.features li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.7rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.features .f-icon {
  grid-row: 1 / 3;
  font-size: 1.5rem;
}
.features b {
  font-size: 0.9rem;
}
.features li > span:last-child {
  font-size: 0.78rem;
  opacity: 0.65;
}
.legal-links {
  margin-top: 1.4rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  opacity: 0.7;
}
.legal-links a {
  color: var(--color-text);
}
.legal-links a:hover {
  color: hsla(160, 100%, 37%, 1);
}
</style>