feat: 바텀 내비 하단 고정(소프트키 위)·아이콘화 + 비밀번호 변경 정보변경 화면 통합

- AppBottomNav: position fixed 하단 고정(스크롤 무관 상시 노출), 아이콘 전용(28px)
- MainActivity: 시스템 바 인셋만큼 웹뷰 패딩 — 에지투에지(targetSdk36)에서 소프트키 겹침 해소
- ProfileEditView: 정보변경 화면에 비밀번호 변경 섹션 흡수(현재 비밀번호 재사용)
- AppHeader 비밀번호 아이콘·App.vue ChangePasswordModal 마운트 제거(진입점 일원화)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

android/app/src/main/java/kr/sblog/slimbudget/MainActivity.java

@@ -1,6 +1,11 @@
 package kr.sblog.slimbudget;
 
 import android.os.Bundle;
+import android.view.View;
+
+import androidx.core.graphics.Insets;
+import androidx.core.view.ViewCompat;
+import androidx.core.view.WindowInsetsCompat;
 
 import com.getcapacitor.BridgeActivity;
 
@@ -9,5 +14,17 @@ public class MainActivity extends BridgeActivity {
     public void onCreate(Bundle savedInstanceState) {
         registerPlugin(CardNotifPlugin.class);
         super.onCreate(savedInstanceState);
+
+        // targetSdk 35+ 의 에지투에지 강제 환경에서 웹뷰가 상태바/소프트키(시스템 내비) 뒤로
+        // 깔리는 것을 방지한다. 시스템 바 인셋만큼 웹뷰에 패딩을 줘서 콘텐츠(하단 고정 내비 포함)가
+        // 항상 안전 영역 안에 오도록 한다. (CSS env(safe-area-*) 가 기기별로 0 을 반환하는 문제 회피)
+        final View webView = getBridge().getWebView();
+        if (webView != null) {
+            ViewCompat.setOnApplyWindowInsetsListener(webView, (v, insets) -> {
+                Insets bars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
+                v.setPadding(bars.left, bars.top, bars.right, bars.bottom);
+                return insets;
+            });
+        }
     }
 }

src/App.vue

@@ -6,7 +6,6 @@ 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 ChangePasswordModal from '@/components/ChangePasswordModal.vue'
 import WebOnlyNotice from '@/components/WebOnlyNotice.vue'
 import { Capacitor } from '@capacitor/core'
 import { useAuthStore } from '@/stores/auth'
@@ -54,7 +53,6 @@ watch(() => route.fullPath, () => ui.closeSidebar())
 
     <LoginModal />
     <SignupModal />
-    <ChangePasswordModal />
   </template>
 </template>
 
@@ -81,6 +79,8 @@ watch(() => route.fullPath, () => ui.closeSidebar())
 .layout-body {
   grid-area: body;
   padding: 1.5rem 2rem;
+  /* 하단 고정 내비(56px)+소프트키 인셋만큼 비워 콘텐츠가 가리지 않게 */
+  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0) + 1rem);
   overflow: auto;
 }
 
@@ -127,6 +127,7 @@ watch(() => route.fullPath, () => ui.closeSidebar())
   }
   .layout-body {
     padding: 1rem;
+    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0) + 1rem);
   }
 }
 </style>

src/components/layout/AppBottomNav.vue

@@ -30,51 +30,52 @@ function goSettings() {
 
 <template>
   <nav class="bottom-nav" aria-label="앱 내비게이션">
-    <button type="button" class="nav-btn" @click="goBack">
+    <button type="button" class="nav-btn" aria-label="뒤로" title="뒤로" @click="goBack">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <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">
+    <button type="button" class="nav-btn" aria-label="앞으로" title="앞으로" @click="goForward">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <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">
+    <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" stroke-linecap="round" stroke-linejoin="round">
+      <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">
+    <button type="button" class="nav-btn" aria-label="새로고침" title="새로고침" @click="refresh">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <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">
+    <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" stroke-linecap="round" stroke-linejoin="round">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.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" />
+        <circle cx="12" cy="12" r="3" />
-        <path d="M20 21v-5" /><path d="M20 12V3" /><path d="M1 14h6" /><path d="M9 8h6" /><path d="M17 16h6" />
+        <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;
+  opacity: 0.85;
-  font-weight: 500;
-  opacity: 0.92;
   transition: opacity 0.15s ease, color 0.15s ease;
 }
-.nav-btn span {
-  line-height: 1;
-}
 .nav-btn svg {
-  width: 25px;
+  width: 28px;
-  height: 25px;
+  height: 28px;
 }
 .nav-btn:hover {
   opacity: 1;

src/components/layout/AppHeader.vue

@@ -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()" />

src/views/settings/ProfileEditView.vue

@@ -8,8 +8,9 @@ const auth = useAuthStore()
 const router = useRouter()
 
 const step = ref('verify') // 'verify' → 'edit'
-const password = ref('')
+const password = ref('') // verify 단계에서 입력한 현재 비밀번호 (비밀번호 변경 시 재사용)
 const form = reactive({ name: '', email: '' })
+const pw = reactive({ next: '', confirm: '' }) // 비밀번호 변경(선택)
 const loading = ref(false)
 const error = ref('')
 
@@ -52,14 +53,34 @@ async function save() {
     error.value = '이메일 형식이 올바르지 않습니다.'
     return
   }
+  // 비밀번호 변경(선택) — 새 비밀번호를 입력한 경우에만 검증/적용
+  const changePw = !!pw.next
+  if (changePw) {
+    if (pw.next.length < 8 || pw.next.length > 64) {
+      error.value = '새 비밀번호는 8~64자여야 합니다.'
+      return
+    }
+    if (pw.next !== pw.confirm) {
+      error.value = '새 비밀번호 확인이 일치하지 않습니다.'
+      return
+    }
+    if (pw.next === password.value) {
+      error.value = '새 비밀번호가 현재 비밀번호와 동일합니다.'
+      return
+    }
+  }
   loading.value = true
   try {
     const res = await authApi.updateProfile({ name, email: email || null })
     await auth.applyUser({ name: res.name, email: res.email })
-    window.alert('가입정보가 변경되었습니다.')
+    // verify 단계에서 입력한 현재 비밀번호를 그대로 사용해 비밀번호도 변경
+    if (changePw) {
+      await authApi.changePassword({ currentPassword: password.value, newPassword: pw.next })
+    }
+    window.alert(changePw ? '가입정보와 비밀번호가 변경되었습니다.' : '가입정보가 변경되었습니다.')
     router.push('/settings/account')
   } catch (e) {
-    error.value = e.response?.data?.message || '가입정보 변경에 실패했습니다.'
+    error.value = e.response?.data?.message || '변경에 실패했습니다.'
   } finally {
     loading.value = false
   }
@@ -112,6 +133,18 @@ function cancel() {
         <span class="flabel">이메일</span>
         <input v-model="form.email" type="email" maxlength="255" placeholder="이메일 (선택)" :disabled="loading" />
       </label>
+
+      <hr class="divider" />
+      <p class="section-label">비밀번호 변경 <span class="opt">(변경 시에만 입력)</span></p>
+      <label class="field">
+        <span class="flabel">새 비밀번호</span>
+        <input v-model="pw.next" type="password" autocomplete="new-password" maxlength="64" placeholder="새 비밀번호 (8~64자)" :disabled="loading" />
+      </label>
+      <label class="field">
+        <span class="flabel">새 비밀번호 확인</span>
+        <input v-model="pw.confirm" type="password" autocomplete="new-password" maxlength="64" placeholder="새 비밀번호 확인" :disabled="loading" />
+      </label>
+
       <p v-if="error" class="error">{{ error }}</p>
       <div class="actions">
         <button class="ghost-btn" type="button" :disabled="loading" @click="cancel">취소</button>
@@ -192,6 +225,21 @@ function cancel() {
   font-size: 0.74rem;
   opacity: 0.5;
 }
+.divider {
+  border: 0;
+  border-top: 1px solid var(--color-border);
+  margin: 0.25rem 0;
+}
+.section-label {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+.section-label .opt {
+  font-weight: 400;
+  font-size: 0.78rem;
+  opacity: 0.55;
+}
 .error {
   margin: 0;
   color: #c0392b;