ByungCheol
16b4bce136
CI / build (push) Failing after 14m36s
- AppBottomNav: position fixed 하단 고정(스크롤 무관 상시 노출), 아이콘 전용(28px) - MainActivity: 시스템 바 인셋만큼 웹뷰 패딩 — 에지투에지(targetSdk36)에서 소프트키 겹침 해소 - ProfileEditView: 정보변경 화면에 비밀번호 변경 섹션 흡수(현재 비밀번호 재사용) - AppHeader 비밀번호 아이콘·App.vue ChangePasswordModal 마운트 제거(진입점 일원화) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
134 lines
3.6 KiB
Vue
134 lines
3.6 KiB
Vue
<script setup>
|
|
import { onMounted, onUnmounted, watch } from 'vue'
|
|
import { RouterView, useRoute } 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 { Capacitor } from '@capacitor/core'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
import { useUiStore } from '@/stores/ui'
|
|
|
|
const auth = useAuthStore()
|
|
const ui = useUiStore()
|
|
const route = useRoute()
|
|
|
|
// 앱(Capacitor 네이티브)에서만 전체 이용. 웹(브라우저)은 안내 페이지만 노출.
|
|
// 단, 개발 모드(npm run dev)에서는 브라우저로도 전체 앱을 테스트할 수 있게 예외.
|
|
const isApp = Capacitor.isNativePlatform() || import.meta.env.DEV
|
|
|
|
// 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 }">
|
|
<AppHeader class="layout-top" />
|
|
<AppSidebar class="layout-left" />
|
|
<div class="sidebar-backdrop" @click="ui.closeSidebar()"></div>
|
|
<main class="layout-body">
|
|
<RouterView />
|
|
</main>
|
|
<AppBottomNav class="layout-bottom" />
|
|
</div>
|
|
|
|
<LoginModal />
|
|
<SignupModal />
|
|
</template>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.layout {
|
|
display: grid;
|
|
grid-template-areas:
|
|
'top 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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>
|