sb-front/src/App.vue

<script setup>
import { computed, onMounted, onUnmounted, watch } from 'vue'
import { RouterView, useRoute, useRouter } from 'vue-router'
import AppHeader from '@/components/layout/AppHeader.vue'
import AppSidebar from '@/components/layout/AppSidebar.vue'
import AppBottomNav from '@/components/layout/AppBottomNav.vue'
import LoginModal from '@/components/LoginModal.vue'
import SignupModal from '@/components/SignupModal.vue'
import WebOnlyNotice from '@/components/WebOnlyNotice.vue'
import AppDialog from '@/components/ui/AppDialog.vue'
import { Capacitor } from '@capacitor/core'
import { useAuthStore } from '@/stores/auth'
import { useUiStore } from '@/stores/ui'
import { demo, exitDemo } from '@/demo'

const auth = useAuthStore()
const ui = useUiStore()
const route = useRoute()
const router = useRouter()

// 로그인 또는 둘러보기(데모) 상태면 사이드바/전체 셸 표시
const authed = computed(() => auth.isAuthenticated || demo.on)

function leaveDemo() {
  exitDemo()
  router.push('/')
}

// 앱(Capacitor 네이티브) 또는 데스크톱(Electron) 클라이언트에서 전체 이용.
// 웹(브라우저)은 안내 페이지만 노출. 개발 모드(npm run dev)는 예외로 전체 앱 표시.
const isDesktop = /electron/i.test(navigator.userAgent)
const isApp = Capacitor.isNativePlatform() || import.meta.env.DEV || isDesktop

// http.js 의 401 처리에서 발생시키는 이벤트 → 세션 정리 후 로그인 팝업
function onUnauthorized() {
  auth.clear()
  ui.openLogin()
}
onMounted(() => {
  if (!isApp) return // 웹은 안내만 — 앱 전용 초기화 생략
  window.addEventListener('auth:unauthorized', onUnauthorized)
  ui.loadSignupEnabled() // 회원가입 허용 여부 선로딩(랜딩/로그인 가입 버튼에 반영)
})
onUnmounted(() => window.removeEventListener('auth:unauthorized', onUnauthorized))

// 페이지 이동 시 모바일 사이드바 자동 닫힘
watch(() => route.fullPath, () => ui.closeSidebar())
</script>

<template>
  <!-- 웹(브라우저): 안내 페이지만 -->
  <WebOnlyNotice v-if="!isApp" />

  <!-- 앱(Capacitor): 전체 기능 -->
  <template v-else>
    <div class="layout" :class="{ 'sidebar-open': ui.sidebarOpen, 'no-sidebar': !authed }">
      <AppHeader class="layout-top" />
      <!-- 로그인/둘러보기 전에는 메뉴가 없어 사이드바를 숨김(빈 칸 제거·중앙 정렬) -->
      <template v-if="authed">
        <AppSidebar class="layout-left" />
        <div class="sidebar-backdrop" @click="ui.closeSidebar()"></div>
      </template>
      <main class="layout-body">
        <div v-if="demo.on" class="demo-bar">
          <span>👀 <b>둘러보기 모드</b> · 샘플 데이터입니다.</span>
          <span class="demo-actions">
            <button type="button" class="db-login" @click="ui.openLogin('/account')">로그인</button>
            <button type="button" class="db-exit" @click="leaveDemo">나가기</button>
          </span>
        </div>
        <RouterView />
      </main>
      <AppBottomNav class="layout-bottom" />
    </div>

    <LoginModal />
    <SignupModal />
  </template>

  <!-- 공용 인앱 다이얼로그 (네이티브 alert/confirm/prompt 대체) -->
  <AppDialog />
</template>

<style scoped>
.layout {
  display: grid;
  grid-template-areas:
    'left   top'
    'left   body'
    'bottom bottom';
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.layout-top {
  grid-area: top;
}

.layout-left {
  grid-area: left;
}

.demo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid hsla(160, 100%, 37%, 0.4);
  border-radius: 8px;
  background: hsla(160, 100%, 37%, 0.08);
  font-size: 0.88rem;
}
.demo-actions {
  display: flex;
  gap: 0.4rem;
}
.demo-bar button {
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.db-login {
  border: 1px solid hsla(160, 100%, 37%, 1);
  background: hsla(160, 100%, 37%, 1);
  color: #fff;
}
.db-exit {
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text);
}
.layout-body {
  grid-area: body;
  padding: 1.5rem 2rem;
  /* 하단 고정 내비(56px)+소프트키 인셋만큼 비워 콘텐츠가 가리지 않게 */
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0) + 1rem);
  overflow: auto;
}

.layout-bottom {
  grid-area: bottom;
}

/* 로그인 전: 사이드바 없이 단일 컬럼 — 콘텐츠가 창 중앙에 오도록 */
.layout.no-sidebar {
  grid-template-columns: 1fr;
  grid-template-areas:
    'top'
    'body'
    'bottom';
}

.sidebar-backdrop {
  display: none;
}

/* 모바일: 사이드바를 오프캔버스 드로어로 */
@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      'top'
      'body'
      'bottom';
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .layout-left {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1200;
    width: 78%;
    max-width: 280px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.25);
  }
  .layout.sidebar-open .layout-left {
    transform: translateX(0);
  }
  .layout.sidebar-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(0, 0, 0, 0.45);
  }
  .layout-body {
    padding: 1rem;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0) + 1rem);
  }
}
</style>