- AppBottomNav: position fixed 하단 고정(스크롤 무관 상시 노출), 아이콘 전용(28px) - MainActivity: 시스템 바 인셋만큼 웹뷰 패딩 — 에지투에지(targetSdk36)에서 소프트키 겹침 해소 - ProfileEditView: 정보변경 화면에 비밀번호 변경 섹션 흡수(현재 비밀번호 재사용) - AppHeader 비밀번호 아이콘·App.vue ChangePasswordModal 마운트 제거(진입점 일원화) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -30,51 +30,52 @@ function goSettings() {
|
||||
|
||||
<template>
|
||||
<nav class="bottom-nav" aria-label="앱 내비게이션">
|
||||
<button type="button" class="nav-btn" @click="goBack">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<button type="button" class="nav-btn" aria-label="뒤로" title="뒤로" @click="goBack">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M19 12H5" /><path d="M12 19l-7-7 7-7" />
|
||||
</svg>
|
||||
<span>뒤로</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="nav-btn" @click="goForward">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<button type="button" class="nav-btn" aria-label="앞으로" title="앞으로" @click="goForward">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14" /><path d="M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
<span>앞으로</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="nav-btn" :class="{ active: isHome }" @click="goHome">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<button type="button" class="nav-btn" :class="{ active: isHome }" aria-label="홈" title="홈" @click="goHome">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><path d="M9 22V12h6v10" />
|
||||
</svg>
|
||||
<span>홈</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="nav-btn" @click="refresh">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<button type="button" class="nav-btn" aria-label="새로고침" title="새로고침" @click="refresh">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M23 4v6h-6" /><path d="M1 20v-6h6" />
|
||||
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10" /><path d="M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
|
||||
</svg>
|
||||
<span>새로고침</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="nav-btn" :class="{ active: isSettings }" @click="goSettings">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M4 21v-7" /><path d="M4 10V3" /><path d="M12 21v-9" /><path d="M12 8V3" />
|
||||
<path d="M20 21v-5" /><path d="M20 12V3" /><path d="M1 14h6" /><path d="M9 8h6" /><path d="M17 16h6" />
|
||||
<button type="button" class="nav-btn" :class="{ active: isSettings }" aria-label="설정" title="설정" @click="goSettings">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
||||
</svg>
|
||||
<span>설정</span>
|
||||
</button>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-around;
|
||||
height: 62px;
|
||||
height: 56px;
|
||||
/* 안드로이드 소프트키(시스템 내비게이션 바) 위에 위치 */
|
||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||
background: var(--color-background-soft);
|
||||
border-top: 1px solid var(--color-border);
|
||||
@@ -82,25 +83,18 @@ function goSettings() {
|
||||
.nav-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
opacity: 0.92;
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
.nav-btn span {
|
||||
line-height: 1;
|
||||
}
|
||||
.nav-btn svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
.nav-btn:hover {
|
||||
opacity: 1;
|
||||
|
||||
@@ -38,7 +38,6 @@ async function handleLogout() {
|
||||
<div class="header-right">
|
||||
<template v-if="auth.isAuthenticated">
|
||||
<span class="username">{{ auth.user?.name || auth.user?.loginId }}님</span>
|
||||
<IconBtn icon="lock" title="비밀번호 변경" @click="ui.openPassword()" />
|
||||
<IconBtn icon="logout" title="로그아웃" @click="handleLogout" />
|
||||
</template>
|
||||
<IconBtn v-else icon="login" title="로그인" variant="primary" @click="ui.openLogin()" />
|
||||
|
||||
Reference in New Issue
Block a user