sb-front/src/components/WebOnlyNotice.vue

<script setup>
// 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">🖥️ PC는 <b>설치형 앱</b>으로, 📱 모바일은 <b>앱</b>으로 이용해요.</p>
        <p class="sub">웹 브라우저에서는 안내만 제공됩니다. 설치한 뒤 로그인해 주세요.</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>
    </div>
  </main>
</template>

<style scoped>
.web-only {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(120% 120% at 50% 0%, hsla(160, 100%, 37%, 0.12), transparent 60%),
    var(--color-background);
}
.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;
}
.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;
}
</style>