feat: 앱 하단 내비게이션·설정/계정정보·가입정보 변경 + 프론트 테스트·CI 게이트

- 하단 내비게이션(뒤로/앞으로/홈/새로고침/설정), 사이드바 홈 제거
- 설정 화면: 계정정보·앱 버전(package.json)·App Data 삭제
- 가입정보 변경: 비밀번호 재인증 → 이름/이메일 수정
- 로그인 후 대시보드(/) 이동, 로그인 전 햄버거·네이버 로그인 버튼 숨김
- Vitest 도입(32): authApi/accountApi 와이어링, auth/ui 스토어, 로그인 플로우
- CI(.gitea): npm test 게이트 추가

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

.gitea/workflows/ci.yaml

@@ -29,6 +29,10 @@ jobs:
           npx oxlint .
           npx eslint .
 
+      # 단위/컴포넌트 테스트 — 실패 시 빌드/배포 차단(게이트)
+      - name: Test
+        run: npm test
+
       - name: Build
         run: npm run build
 

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

@@ -49,11 +49,18 @@ public class CardNotifListenerService extends NotificationListenerService {
         }
     }
 
-    /** 결제 알림 후보 판별: 금액(####원) + 승인/결제/카드 키워드 */
+    /**
+     * 결제 알림 후보 판별: 금액(####원) + 결제/승인/출금 키워드.
+     * '카드'는 광고에도 흔해 제외. 강한 승인신호(승인/출금/취소/환불) 없이 광고성 표현이 있으면 제외.
+     * (1차 필터 — 최종 판별은 백엔드 파서)
+     */
     private boolean looksLikePayment(String s) {
         boolean money = s.matches("(?s).*\\d[\\d,]{2,}\\s*원.*");
-        boolean kw = s.contains("승인") || s.contains("결제") || s.contains("카드");
+        boolean kw = s.contains("승인") || s.contains("결제") || s.contains("출금");
-        return money && kw;
+        if (!money || !kw) return false;
+        boolean strong = s.contains("승인") || s.contains("출금") || s.contains("취소") || s.contains("환불");
+        boolean adLike = s.matches("(?s).*(이벤트|광고|혜택|쿠폰|할인|적립|포인트|캐시백|마일리지|리워드|당첨|응모|추첨|프로모션|배너|무료|증정|모집).*");
+        return strong || !adLike;
     }
 
     private void post(String pkg, String title, String text, String token) {

docs/release-2026-06-06.md

@@ -0,0 +1,46 @@
+# Slim Budget — 변경 내역 (2026-06-06 배포)
+
+이번 작업 세션에서 추가·수정한 기능 정리. (프론트 `sb_pt`, 백엔드 `sb_bt`, 안드로이드 앱 포함)
+
+---
+
+## 1. 홈 대시보드
+- **일별 수입·지출 캘린더** 추가 (예산 대비 지출 아래). 날짜에 마우스 오버/탭 시 그 날의 내역 목록 표시.
+
+## 2. 투자 / 계좌
+- **시세 자동조회**: 종목코드(6자리)로 네이버 금융에서 현재가 자동 갱신. 투자 탭 진입·포트폴리오 펼침 시 자동, "↻ 시세 갱신" 버튼도 제공.
+- **퇴직연금·연금 등 평가액 직접입력형 계좌**: 종목 없이 현재 평가액만 입력해 관리(누적 적립원금 대비 손익% 표시).
+- 보유 종목 표기 2줄 정리(수량 / 평단·현재가).
+- **계좌번호 암호화**: DB에 AES-256-GCM으로 저장(키는 서버 `.env` `ACCOUNT_CRYPTO_KEY`). 화면에서는 **끝 4자리만 노출 + 👁 전체보기 토글**로 마스킹.
+
+## 3. 가계부 내역 / 고정 지출
+- "정기 거래" → **"고정 지출"** 명칭 변경, 월간/년간 분리·카테고리 소계/합계.
+- 내역·고정지출 추가 시 계좌 종류 **라디오 + 셀렉트** 패턴, 저장 버튼 sticky.
+
+## 4. 카드 결제 알림 자동인식 (버그 수정)
+- **현금으로 잘못 선택되던 문제**: 알림 자동인식(pending) 건은 매칭 실패해도 계좌 종류를 **'카드'로 기본 선택**. 백엔드 카드 매칭을 양방향 부분일치(`KB국민↔국민`) + 카드가 1개뿐이면 자동 매칭으로 개선.
+- **광고 푸시 오인식 차단**: 강한 승인신호(승인/출금/취소/환불) 없이 광고성 표현(이벤트·할인·적립·포인트·캐시백·쿠폰 등)이 있으면 결제로 보지 않음. 네이티브 1차 필터에서 '카드' 키워드 제거.
+- 확인(확정) 실패 시 **HTTP 상태코드 노출** + 즉시 UI 반영.
+
+## 5. 게시판
+- "자유게시판" → **커뮤니티 / 짠테크 수다방 / 재테크 팁** 3개 게시판으로 분리(카테고리).
+- 사이드바를 **가계부 / 게시판 / 관리자 영역 구분선**으로 정리.
+- 글 번호 컬럼 미노출.
+
+## 6. 회원가입 / 인증
+- **이용약관·개인정보 수집 동의**(필수 체크) 추가.
+- **관리자 회원가입 제한 토글**: 회원 관리 화면에서 신규 가입 on/off. 제한 시 가입 진입(랜딩·로그인·가입 팝업)부터 차단.
+- **봇 가입 차단**: 허니팟(숨김 필드) + IP 레이트리밋(Redis, 1시간 5회). *Cloudflare Turnstile은 앱 환경 제약으로 제외.*
+- **모바일 웹 새로고침 시 로그아웃 버그 수정**: 세션 복원을 localStorage 우선으로(Preferences 예외에 견고).
+- **세션 유실(주기적 로그아웃) 해결**: Redis AOF 활성화로 재시작에도 세션 영속(서버 설정).
+
+## 7. 웹 접근 정책
+- **PC·모바일 웹은 안내 페이지만** 노출(앱 다운로드 안내). 실제 이용은 **앱(Capacitor)에서만**. 개발 모드(`npm run dev`)는 예외로 전체 앱 표시.
+
+---
+
+## 운영 반영 시 체크
+- 서버 `/opt/sb-backend/.env`
+  - `ACCOUNT_CRYPTO_KEY` — 계좌번호 암호화를 켤 때만(미설정 시 평문, 깨지지 않음).
+- `app_setting` 테이블 — 배포 시 `member.sql` 초기화로 자동 생성(회원가입 허용 플래그).
+- Redis `appendonly yes` — 세션 영속(이미 적용).

eslint.config.js

@@ -16,6 +16,7 @@ export default defineConfig([
     languageOptions: {
       globals: {
         ...globals.browser,
+        __APP_VERSION__: 'readonly',
       },
     },
   },

package.json

@@ -1,12 +1,14 @@
 {
   "name": "sb_pt",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "build:app": "vite build --mode capacitor",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "cap:sync": "npm run build:app && cap sync",
     "cap:android": "cap open android",
     "preview": "vite preview",
@@ -32,15 +34,19 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@pinia/testing": "^1.0.3",
     "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/test-utils": "^2.4.11",
     "eslint": "^10.2.1",
     "eslint-plugin-oxlint": "~1.60.0",
     "eslint-plugin-vue": "~10.8.0",
     "globals": "^17.5.0",
+    "jsdom": "^29.1.1",
     "npm-run-all2": "^8.0.4",
     "oxlint": "~1.60.0",
     "vite": "^8.0.8",
-    "vite-plugin-vue-devtools": "^8.1.1"
+    "vite-plugin-vue-devtools": "^8.1.1",
+    "vitest": "^4.1.8"
   },
   "engines": {
     "node": "^20.19.0 || >=22.12.0"

src/App.vue

@@ -3,10 +3,12 @@ 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 AppFooter from '@/components/layout/AppFooter.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'
 import { useUiStore } from '@/stores/ui'
 
@@ -14,12 +16,20 @@ 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(() => window.addEventListener('auth:unauthorized', onUnauthorized))
+onMounted(() => {
+  if (!isApp) return // 웹은 안내만 — 앱 전용 초기화 생략
+  window.addEventListener('auth:unauthorized', onUnauthorized)
+  ui.loadSignupEnabled() // 회원가입 허용 여부 선로딩(랜딩/로그인 가입 버튼에 반영)
+})
 onUnmounted(() => window.removeEventListener('auth:unauthorized', onUnauthorized))
 
 // 페이지 이동 시 모바일 사이드바 자동 닫힘
@@ -27,19 +37,25 @@ watch(() => route.fullPath, () => ui.closeSidebar())
 </script>
 
 <template>
-  <div class="layout" :class="{ 'sidebar-open': ui.sidebarOpen }">
+  <!-- 웹(브라우저): 안내 페이지만 -->
-    <AppHeader class="layout-top" />
+  <WebOnlyNotice v-if="!isApp" />
-    <AppSidebar class="layout-left" />
-    <div class="sidebar-backdrop" @click="ui.closeSidebar()"></div>
-    <main class="layout-body">
-      <RouterView />
-    </main>
-    <AppFooter class="layout-bottom" />
-  </div>
 
-  <LoginModal />
+  <!-- 앱(Capacitor): 전체 기능 -->
-  <SignupModal />
+  <template v-else>
-  <ChangePasswordModal />
+    <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 />
+    <ChangePasswordModal />
+  </template>
 </template>
 
 <style scoped>

src/api/accountApi.js

@@ -109,6 +109,12 @@ export const accountApi = {
   removeHolding(id) {
     return http.delete(`/account/invest/holdings/${id}`)
   },
+  refreshPrices(walletId) {
+    return http.post('/account/invest/holdings/refresh-prices', null, { params: { walletId } })
+  },
+  refreshAllPrices() {
+    return http.post('/account/invest/refresh-prices')
+  },
   holdingTrades(holdingId) {
     return http.get(`/account/invest/holdings/${holdingId}/trades`)
   },
@@ -152,6 +158,9 @@ export const accountApi = {
   removeTag(id) {
     return http.delete(`/account/tags/${id}`)
   },
+  reorderTags(ids) {
+    return http.put('/account/tags/reorder', { ids })
+  },
 
   // 카드 결제 알림 자동인식 (미확인 내역)
   pendingCount() {

src/api/accountApi.spec.js

@@ -0,0 +1,69 @@
+import { describe, it, expect, vi } from 'vitest'
+
+vi.mock('@/api/http', () => ({
+  default: {
+    get: vi.fn(() => Promise.resolve({})),
+    post: vi.fn(() => Promise.resolve({})),
+    put: vi.fn(() => Promise.resolve({})),
+    delete: vi.fn(() => Promise.resolve({})),
+  },
+}))
+
+import http from '@/api/http'
+import { accountApi } from '@/api/accountApi'
+
+describe('accountApi 가계부 CRUD 와이어링', () => {
+  it('list → GET /account/entries (필터 params)', () => {
+    accountApi.list({ year: 2026, month: 6, type: 'EXPENSE' })
+    expect(http.get).toHaveBeenCalledWith('/account/entries', {
+      params: { year: 2026, month: 6, type: 'EXPENSE', category: undefined, walletId: undefined, keyword: undefined, tagId: undefined },
+    })
+  })
+
+  it('create → POST /account/entries', () => {
+    const payload = { type: 'EXPENSE', amount: 1000, category: '식비' }
+    accountApi.create(payload)
+    expect(http.post).toHaveBeenCalledWith('/account/entries', payload)
+  })
+
+  it('update → PUT /account/entries/:id', () => {
+    accountApi.update(42, { amount: 2000 })
+    expect(http.put).toHaveBeenCalledWith('/account/entries/42', { amount: 2000 })
+  })
+
+  it('remove → DELETE /account/entries/:id', () => {
+    accountApi.remove(42)
+    expect(http.delete).toHaveBeenCalledWith('/account/entries/42')
+  })
+
+  it('summary → GET /account/summary', () => {
+    accountApi.summary({ year: 2026, month: 6 })
+    expect(http.get).toHaveBeenCalledWith('/account/summary', { params: { year: 2026, month: 6 } })
+  })
+
+  it('netWorth → GET /account/networth', () => {
+    accountApi.netWorth()
+    expect(http.get).toHaveBeenCalledWith('/account/networth')
+  })
+
+  it('budgetStatus → GET /account/budgets/status', () => {
+    accountApi.budgetStatus({ year: 2026, month: 6 })
+    expect(http.get).toHaveBeenCalledWith('/account/budgets/status', { params: { year: 2026, month: 6 } })
+  })
+
+  it('pendingCount → GET /account/entries/pending/count', () => {
+    accountApi.pendingCount()
+    expect(http.get).toHaveBeenCalledWith('/account/entries/pending/count')
+  })
+
+  it('confirmEntry → POST /account/entries/:id/confirm (payload 기본값 {})', () => {
+    accountApi.confirmEntry(7)
+    expect(http.post).toHaveBeenCalledWith('/account/entries/7/confirm', {})
+  })
+
+  it('createWallet → POST /account/wallets', () => {
+    const payload = { name: '주거래', type: 'ASSET' }
+    accountApi.createWallet(payload)
+    expect(http.post).toHaveBeenCalledWith('/account/wallets', payload)
+  })
+})

src/api/adminApi.js

@@ -30,6 +30,14 @@ export const adminApi = {
     return http.put('/admin/board-setting', { tagCategoryId })
   },
 
+  // 앱 설정 (관리자)
+  getSignupSetting() {
+    return http.get('/admin/signup-setting')
+  },
+  setSignupSetting(enabled) {
+    return http.put('/admin/signup-setting', { enabled })
+  },
+
   // 회원 관리 (관리자)
   members() {
     return http.get('/admin/members')

src/api/authApi.js

@@ -5,6 +5,9 @@ export const authApi = {
   signup(payload) {
     return http.post('/auth/signup', payload)
   },
+  signupEnabled() {
+    return http.get('/auth/signup-enabled')
+  },
   login(payload) {
     return http.post('/auth/login', payload)
   },
@@ -17,4 +20,12 @@ export const authApi = {
   changePassword(payload) {
     return http.put('/auth/password', payload)
   },
+  // 가입정보 변경 진입 전 비밀번호 재인증
+  verifyPassword(password) {
+    return http.post('/auth/verify-password', { password })
+  },
+  // 가입정보(이름/이메일) 변경
+  updateProfile(payload) {
+    return http.put('/auth/profile', payload)
+  },
 }

src/api/authApi.spec.js

@@ -0,0 +1,60 @@
+import { describe, it, expect, vi } from 'vitest'
+
+// http(axios 인스턴스)를 모킹 — 실제 네트워크 없이 호출 형태만 검증
+vi.mock('@/api/http', () => ({
+  default: {
+    get: vi.fn(() => Promise.resolve({})),
+    post: vi.fn(() => Promise.resolve({})),
+    put: vi.fn(() => Promise.resolve({})),
+    delete: vi.fn(() => Promise.resolve({})),
+  },
+}))
+
+import http from '@/api/http'
+import { authApi } from '@/api/authApi'
+
+describe('authApi 엔드포인트 와이어링', () => {
+  it('signup → POST /auth/signup', () => {
+    const payload = { loginId: 'u1', password: 'pw', name: '홍길동' }
+    authApi.signup(payload)
+    expect(http.post).toHaveBeenCalledWith('/auth/signup', payload)
+  })
+
+  it('signupEnabled → GET /auth/signup-enabled', () => {
+    authApi.signupEnabled()
+    expect(http.get).toHaveBeenCalledWith('/auth/signup-enabled')
+  })
+
+  it('login → POST /auth/login', () => {
+    const payload = { loginId: 'u1', password: 'pw', rememberMe: true }
+    authApi.login(payload)
+    expect(http.post).toHaveBeenCalledWith('/auth/login', payload)
+  })
+
+  it('logout → POST /auth/logout', () => {
+    authApi.logout()
+    expect(http.post).toHaveBeenCalledWith('/auth/logout')
+  })
+
+  it('me → GET /auth/me', () => {
+    authApi.me()
+    expect(http.get).toHaveBeenCalledWith('/auth/me')
+  })
+
+  it('changePassword → PUT /auth/password', () => {
+    const payload = { currentPassword: 'a', newPassword: 'bbbbbbbb' }
+    authApi.changePassword(payload)
+    expect(http.put).toHaveBeenCalledWith('/auth/password', payload)
+  })
+
+  it('verifyPassword → POST /auth/verify-password (password 래핑)', () => {
+    authApi.verifyPassword('secret')
+    expect(http.post).toHaveBeenCalledWith('/auth/verify-password', { password: 'secret' })
+  })
+
+  it('updateProfile → PUT /auth/profile', () => {
+    const payload = { name: '새이름', email: 'a@b.com' }
+    authApi.updateProfile(payload)
+    expect(http.put).toHaveBeenCalledWith('/auth/profile', payload)
+  })
+})

src/api/boardApi.js

@@ -2,9 +2,10 @@ import http from './http'
 
 // 백엔드 /api/board 엔드포인트와 매핑
 export const boardApi = {
-  list({ page = 1, size = 10, tag = '', keyword = '', searchType = '' } = {}) {
+  list({ category = '', page = 1, size = 10, tag = '', keyword = '', searchType = '' } = {}) {
     return http.get('/board/posts', {
       params: {
+        category: category || undefined,
         page,
         size,
         tag: tag || undefined,

src/components/LoginModal.spec.js

@@ -0,0 +1,81 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { setActivePinia, createPinia } from 'pinia'
+
+// useRouter().push 를 캡처
+const { pushMock } = vi.hoisted(() => ({ pushMock: vi.fn() }))
+vi.mock('vue-router', () => ({ useRouter: () => ({ push: pushMock }) }))
+
+vi.mock('@/api/authApi', () => ({
+  authApi: {
+    login: vi.fn(),
+    signupEnabled: vi.fn(() => Promise.resolve({ enabled: true })),
+  },
+}))
+
+vi.mock('@capacitor/preferences', () => ({
+  Preferences: {
+    set: vi.fn(() => Promise.resolve()),
+    get: vi.fn(() => Promise.resolve({ value: null })),
+    remove: vi.fn(() => Promise.resolve()),
+  },
+}))
+
+import { authApi } from '@/api/authApi'
+import { useUiStore } from '@/stores/ui'
+import LoginModal from '@/components/LoginModal.vue'
+
+function mountOpen() {
+  const ui = useUiStore()
+  return { ui, wrapper: mount(LoginModal, { global: { stubs: { teleport: true } } }) }
+}
+
+async function submitLogin(wrapper) {
+  await wrapper.find('input[autocomplete="username"]').setValue('u1')
+  await wrapper.find('input[autocomplete="current-password"]').setValue('pw')
+  await wrapper.find('form').trigger('submit')
+  await flushPromises()
+}
+
+describe('LoginModal 로그인 플로우', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    localStorage.clear()
+    authApi.login.mockResolvedValue({ token: 'tok', member: { id: 1, loginId: 'u1', name: 'N' } })
+  })
+
+  it('redirect 없으면 로그인 후 대시보드(/)로 이동', async () => {
+    const { ui, wrapper } = mountOpen()
+    ui.openLogin('')
+    await wrapper.vm.$nextTick()
+
+    await submitLogin(wrapper)
+
+    expect(authApi.login).toHaveBeenCalledWith({ loginId: 'u1', password: 'pw', rememberMe: true })
+    expect(pushMock).toHaveBeenCalledWith('/')
+    expect(ui.loginOpen).toBe(false)
+  })
+
+  it('redirect 있으면 보존된 목적지로 이동', async () => {
+    const { ui, wrapper } = mountOpen()
+    ui.openLogin('/account/wallets')
+    await wrapper.vm.$nextTick()
+
+    await submitLogin(wrapper)
+
+    expect(pushMock).toHaveBeenCalledWith('/account/wallets')
+  })
+
+  it('로그인 실패 시 에러 표시 + 이동 없음', async () => {
+    authApi.login.mockRejectedValueOnce({ response: { data: { message: '아이디 또는 비밀번호가 올바르지 않습니다.' } } })
+    const { ui, wrapper } = mountOpen()
+    ui.openLogin('')
+    await wrapper.vm.$nextTick()
+
+    await submitLogin(wrapper)
+
+    expect(pushMock).not.toHaveBeenCalled()
+    expect(ui.loginOpen).toBe(true)
+    expect(wrapper.text()).toContain('아이디 또는 비밀번호가 올바르지 않습니다.')
+  })
+})

src/components/LoginModal.vue

@@ -13,6 +13,9 @@ function goSignup() {
   ui.openSignup()
 }
 
+// 소셜 로그인(네이버)은 준비 중 — 잠시 숨김. 구현 완료 시 true 로 전환.
+const SOCIAL_LOGIN_ENABLED = false
+
 const form = reactive({ loginId: '', password: '', rememberMe: true })
 const loading = ref(false)
 const error = ref(null)
@@ -41,7 +44,8 @@ async function handleLogin() {
     await auth.login(form.loginId, form.password, form.rememberMe)
     const redirect = ui.redirectPath
     ui.closeLogin()
-    if (redirect) router.push(redirect)
+    // 가드가 보존한 목적지가 있으면 그곳으로, 없으면 대시보드(홈)로 이동
+    router.push(redirect || '/')
   } catch (e) {
     error.value = e.response?.data?.message || '로그인에 실패했습니다.'
   } finally {
@@ -81,13 +85,16 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
 
           <p v-if="error" class="msg error">{{ error }}</p>
 
-          <button type="button" class="naver" :disabled="loading" @click="handleNaverLogin">
+          <button v-if="SOCIAL_LOGIN_ENABLED" type="button" class="naver" :disabled="loading" @click="handleNaverLogin">
             네이버로 로그인 (준비 중)
           </button>
 
           <p class="links">
-            계정이 없으신가요?
+            <template v-if="ui.signupEnabled">
-            <a href="#" @click.prevent="goSignup">회원가입</a>
+              계정이 없으신가요?
+              <a href="#" @click.prevent="goSignup">회원가입</a>
+            </template>
+            <span v-else class="signup-off">회원가입이 제한되어 있습니다.</span>
           </p>
         </div>
       </div>

src/components/SignupModal.vue

@@ -1,21 +1,40 @@
 <script setup>
-import { reactive, ref, watch, onMounted, onUnmounted } from 'vue'
+import { reactive, ref, watch, computed, onMounted, onUnmounted } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import { useUiStore } from '@/stores/ui'
+import { TERMS_OF_SERVICE, PRIVACY_POLICY } from '@/constants/terms'
 
 const auth = useAuthStore()
 const ui = useUiStore()
 
-const form = reactive({ loginId: '', password: '', passwordConfirm: '', name: '', email: '' })
+// website = 허니팟(숨김 필드, 봇이 채우면 서버에서 차단)
+const form = reactive({ loginId: '', password: '', passwordConfirm: '', name: '', email: '', website: '' })
 const loading = ref(false)
 const error = ref(null)
 
+// 약관 동의 상태
+const agree = reactive({ terms: false, privacy: false })
+const openDoc = ref('') // 'terms' | 'privacy' | '' (열린 전문)
+const allAgreed = computed({
+  get: () => agree.terms && agree.privacy,
+  set: (v) => {
+    agree.terms = v
+    agree.privacy = v
+  },
+})
+function toggleDoc(key) {
+  openDoc.value = openDoc.value === key ? '' : key
+}
+
 // 팝업이 열릴 때마다 입력값 초기화
 watch(
   () => ui.signupOpen,
   (open) => {
     if (open) {
-      Object.assign(form, { loginId: '', password: '', passwordConfirm: '', name: '', email: '' })
+      Object.assign(form, { loginId: '', password: '', passwordConfirm: '', name: '', email: '', website: '' })
+      agree.terms = false
+      agree.privacy = false
+      openDoc.value = ''
       error.value = null
     }
   },
@@ -23,6 +42,10 @@ watch(
 
 async function handleSignup() {
   error.value = null
+  if (!ui.signupEnabled) {
+    error.value = '현재 회원가입이 제한되어 있습니다.'
+    return
+  }
   if (!form.loginId || !form.password || !form.name) {
     error.value = '아이디, 비밀번호, 이름은 필수입니다.'
     return
@@ -35,6 +58,10 @@ async function handleSignup() {
     error.value = '비밀번호가 일치하지 않습니다.'
     return
   }
+  if (!agree.terms || !agree.privacy) {
+    error.value = '필수 약관에 동의해 주세요.'
+    return
+  }
   loading.value = true
   try {
     await auth.signup({
@@ -42,6 +69,7 @@ async function handleSignup() {
       password: form.password,
       name: form.name,
       email: form.email || null,
+      website: form.website, // 허니팟(정상 사용자는 빈 값)
     })
     alert('회원가입이 완료되었습니다. 로그인해 주세요.')
     ui.openLogin() // 회원가입 닫고 로그인 팝업으로 전환
@@ -67,12 +95,51 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
           <button class="close" type="button" aria-label="닫기" @click="ui.closeSignup()">×</button>
           <h2>회원가입</h2>
 
-          <form class="form" @submit.prevent="handleSignup">
+          <!-- 회원가입 제한 시: 폼 대신 안내 -->
+          <div v-if="!ui.signupEnabled" class="signup-blocked">
+            <p class="blk-title">🔒 현재 회원가입이 제한되어 있습니다.</p>
+            <p class="blk-desc">관리자 설정에 따라 신규 회원가입을 받지 않고 있습니다.</p>
+          </div>
+
+          <form v-else class="form" @submit.prevent="handleSignup">
             <input v-model="form.loginId" type="text" placeholder="아이디 (4~50자)" autocomplete="username" :disabled="loading" />
             <input v-model="form.password" type="password" placeholder="비밀번호 (8자 이상)" autocomplete="new-password" :disabled="loading" />
             <input v-model="form.passwordConfirm" type="password" placeholder="비밀번호 확인" autocomplete="new-password" :disabled="loading" />
             <input v-model="form.name" type="text" placeholder="이름" :disabled="loading" />
             <input v-model="form.email" type="email" placeholder="이메일 (선택)" autocomplete="email" :disabled="loading" />
+            <!-- 허니팟: 사람에겐 숨김, 봇이 채우면 차단 -->
+            <input v-model="form.website" type="text" name="website" class="hp-field" tabindex="-1" autocomplete="off" aria-hidden="true" />
+
+            <!-- 약관 동의 -->
+            <div class="agree">
+              <label class="agree-all">
+                <input v-model="allAgreed" type="checkbox" :disabled="loading" />
+                <span>약관에 모두 동의합니다.</span>
+              </label>
+
+              <div class="agree-row">
+                <label class="agree-item">
+                  <input v-model="agree.terms" type="checkbox" :disabled="loading" />
+                  <span><b class="req">[필수]</b> 이용약관 동의</span>
+                </label>
+                <button type="button" class="doc-toggle" @click="toggleDoc('terms')">
+                  {{ openDoc === 'terms' ? '닫기' : '보기' }}
+                </button>
+              </div>
+              <pre v-if="openDoc === 'terms'" class="doc-box">{{ TERMS_OF_SERVICE }}</pre>
+
+              <div class="agree-row">
+                <label class="agree-item">
+                  <input v-model="agree.privacy" type="checkbox" :disabled="loading" />
+                  <span><b class="req">[필수]</b> 개인정보 수집·이용 동의</span>
+                </label>
+                <button type="button" class="doc-toggle" @click="toggleDoc('privacy')">
+                  {{ openDoc === 'privacy' ? '닫기' : '보기' }}
+                </button>
+              </div>
+              <pre v-if="openDoc === 'privacy'" class="doc-box">{{ PRIVACY_POLICY }}</pre>
+            </div>
+
             <button class="submit" type="submit" :disabled="loading">{{ loading ? '처리 중...' : '회원가입' }}</button>
           </form>
 
@@ -103,6 +170,8 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
   position: relative;
   width: 100%;
   max-width: 360px;
+  max-height: 90vh;
+  overflow-y: auto;
   padding: 1.75rem 1.5rem 1.5rem;
   background: var(--color-background);
   border: 1px solid var(--color-border);
@@ -151,6 +220,89 @@ h2 {
   opacity: 0.6;
   cursor: not-allowed;
 }
+/* 약관 동의 */
+.agree {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 0.6rem 0.2rem 0.2rem;
+  border-top: 1px solid var(--color-border);
+  margin-top: 0.1rem;
+}
+.agree-all {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+.agree-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+.agree-item {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+.agree-item input {
+  flex-shrink: 0;
+}
+.req {
+  color: hsla(160, 100%, 37%, 1);
+}
+.doc-toggle {
+  flex-shrink: 0;
+  padding: 0.15rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+  font-size: 0.78rem;
+  cursor: pointer;
+}
+.doc-box {
+  max-height: 180px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0.6rem 0.7rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+  font-family: inherit;
+  font-size: 0.76rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+/* 허니팟: 화면 밖으로 숨김(스크린리더/봇 인식 위해 display:none 대신 off-screen) */
+.hp-field {
+  position: absolute !important;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+.signup-blocked {
+  text-align: center;
+  padding: 1.5rem 0.5rem 0.5rem;
+}
+.blk-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #c0392b;
+}
+.blk-desc {
+  margin-top: 0.5rem;
+  font-size: 0.85rem;
+  opacity: 0.75;
+}
 .links {
   margin-top: 1.25rem;
   text-align: center;

src/components/WebOnlyNotice.vue

@@ -0,0 +1,119 @@
+<script setup>
+// PC·모바일 웹에서 노출되는 안내 페이지. 실제 이용은 앱(Capacitor)에서만.
+// 앱 다운로드 링크는 준비되면 download() / href 에 연결.
+const downloadReady = false
+function download() {
+  // TODO: 앱 다운로드 링크 연결 (Play 스토어 / 직접 APK URL)
+}
+</script>
+
+<template>
+  <main class="web-only">
+    <div class="card">
+      <h1 class="brand">Slim Budget</h1>
+      <p class="tagline">슬림하게 관리하는 가계부 · 자산 · 예산</p>
+
+      <div class="notice">
+        <p class="lead">📱 이 서비스는 <b>앱에서</b> 이용할 수 있어요.</p>
+        <p class="sub">PC·모바일 웹에서는 안내만 제공됩니다. 앱을 설치한 뒤 로그인해 주세요.</p>
+      </div>
+
+      <button type="button" class="dl-btn" :disabled="!downloadReady" @click="download">
+        {{ downloadReady ? '앱 다운로드' : '앱 다운로드 (준비 중)' }}
+      </button>
+
+      <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);
+}
+.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-btn {
+  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;
+  cursor: pointer;
+}
+.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>

src/components/layout/AppBottomNav.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+const isHome = computed(() => route.path === '/')
+const isSettings = computed(() => route.path.startsWith('/settings'))
+
+function goBack() {
+  // 히스토리가 있으면 뒤로, 없으면 홈으로 (앱 첫 화면에서 빠져나가지 않게)
+  if (window.history.length > 1) router.back()
+  else router.push('/')
+}
+function goForward() {
+  router.forward()
+}
+function goHome() {
+  if (!isHome.value) router.push('/')
+}
+function refresh() {
+  // 현재 화면 데이터를 다시 불러옴 — 저장된 세션은 복원되므로 로그아웃되지 않음
+  window.location.reload()
+}
+function goSettings() {
+  if (!isSettings.value) router.push('/settings')
+}
+</script>
+
+<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">
+        <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">
+        <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">
+        <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">
+        <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" />
+      </svg>
+      <span>설정</span>
+    </button>
+  </nav>
+</template>
+
+<style scoped>
+.bottom-nav {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-around;
+  height: 56px;
+  padding-bottom: env(safe-area-inset-bottom, 0);
+  background: var(--color-background-soft);
+  border-top: 1px solid var(--color-border);
+}
+.nav-btn {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.15rem;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  cursor: pointer;
+  font-size: 0.68rem;
+  opacity: 0.78;
+  transition: opacity 0.15s ease, color 0.15s ease;
+}
+.nav-btn svg {
+  width: 22px;
+  height: 22px;
+}
+.nav-btn:hover {
+  opacity: 1;
+}
+.nav-btn:active {
+  opacity: 0.5;
+}
+.nav-btn.active {
+  color: hsla(160, 100%, 37%, 1);
+  opacity: 1;
+}
+</style>

src/components/layout/AppHeader.vue

@@ -17,7 +17,7 @@ async function handleLogout() {
 <template>
   <header class="app-header">
     <div class="header-left">
-      <button class="hamburger" type="button" aria-label="메뉴" @click="ui.toggleSidebar()">
+      <button v-if="auth.isAuthenticated" class="hamburger" type="button" aria-label="메뉴" @click="ui.toggleSidebar()">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
           <path d="M3 12h18" /><path d="M3 6h18" /><path d="M3 18h18" />
         </svg>

src/components/layout/AppSidebar.vue

@@ -2,6 +2,7 @@
 import { RouterLink } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useUiStore } from '@/stores/ui'
+import { BOARDS } from '@/constants/boards'
 
 const auth = useAuthStore()
 const ui = useUiStore()
@@ -14,19 +15,32 @@ const ui = useUiStore()
       <button class="drawer-close" type="button" aria-label="닫기" @click="ui.closeSidebar()">×</button>
     </div>
     <nav class="menu">
-      <RouterLink to="/" class="menu-item">홈</RouterLink>
+      <!-- 가계부 영역 (홈은 하단 내비게이션으로 이동) -->
       <template v-if="auth.isAuthenticated">
         <RouterLink to="/account/entries" class="menu-item">가계부 내역</RouterLink>
         <RouterLink to="/account/stats" class="menu-item">통계</RouterLink>
-        <RouterLink to="/account/recurrings" class="menu-item">정기 거래</RouterLink>
+        <RouterLink to="/account/recurrings" class="menu-item">고정 지출</RouterLink>
         <RouterLink to="/account/wallets" class="menu-item">계좌 관리</RouterLink>
         <RouterLink to="/account/categories" class="menu-item">분류 관리</RouterLink>
         <RouterLink to="/account/budget" class="menu-item">예산 설정</RouterLink>
         <RouterLink to="/account/tags" class="menu-item">태그 관리</RouterLink>
-        <RouterLink to="/board" class="menu-item">자유게시판</RouterLink>
+
+        <!-- 게시판 영역 -->
+        <hr class="menu-divider" />
+        <RouterLink
+          v-for="b in BOARDS"
+          :key="b.key"
+          :to="`/board/${b.key}`"
+          class="menu-item"
+        >{{ b.label }}</RouterLink>
+      </template>
+
+      <!-- 관리자 영역 -->
+      <template v-if="auth.user?.role === 'ADMIN'">
+        <hr class="menu-divider" />
+        <RouterLink to="/users" class="menu-item">회원 관리</RouterLink>
+        <RouterLink to="/admin/tags" class="menu-item">태그 관리(관리자)</RouterLink>
       </template>
-      <RouterLink v-if="auth.user?.role === 'ADMIN'" to="/users" class="menu-item">회원 관리</RouterLink>
-      <RouterLink v-if="auth.user?.role === 'ADMIN'" to="/admin/tags" class="menu-item">태그 관리(관리자)</RouterLink>
     </nav>
   </aside>
 </template>
@@ -74,10 +88,10 @@ const ui = useUiStore()
   color: var(--color-text);
   font-size: 0.95rem;
 }
-.menu-item.sub {
+.menu-divider {
-  padding: 0.5rem 1.5rem 0.5rem 2.6rem;
+  border: 0;
-  font-size: 0.88rem;
+  border-top: 1px solid var(--color-border);
-  opacity: 0.9;
+  margin: 0.5rem 1.5rem;
 }
 .menu-item:hover {
   background: var(--color-background-mute);
@@ -89,7 +103,4 @@ const ui = useUiStore()
   padding-left: calc(1.5rem - 3px);
   background: transparent;
 }
-.menu-item.sub.router-link-exact-active {
-  padding-left: calc(2.6rem - 3px);
-}
 </style>

src/constants/boards.js

@@ -0,0 +1,19 @@
+// 게시판(보드) 구분. key = 라우트 파라미터 = 백엔드 category 값
+export const BOARDS = [
+  { key: 'community', label: '커뮤니티' },
+  { key: 'saving', label: '짠테크 수다방' },
+  { key: 'tips', label: '재테크 팁' },
+]
+
+export const DEFAULT_BOARD = 'community'
+
+export function boardLabel(key) {
+  return BOARDS.find((b) => b.key === key)?.label || '커뮤니티'
+}
+
+export function isBoard(key) {
+  return BOARDS.some((b) => b.key === key)
+}
+
+// 라우트 파라미터 정규식 (라우터 path 제약용)
+export const BOARD_PARAM = BOARDS.map((b) => b.key).join('|')

src/constants/terms.js

@@ -0,0 +1,58 @@
+// 회원가입 약관 본문. 모달에서 '전문 보기'로 노출.
+// 서비스명: Slim Budget (가계부·자산·예산 관리)
+
+export const SERVICE_NAME = 'Slim Budget'
+
+export const TERMS_OF_SERVICE = `제1조 (목적)
+이 약관은 ${SERVICE_NAME}(이하 "서비스")가 제공하는 가계부·자산·예산 관리 서비스의 이용과 관련하여 서비스와 회원 간의 권리, 의무 및 책임사항을 규정함을 목적으로 합니다.
+
+제2조 (정의)
+1. "회원"이란 본 약관에 동의하고 서비스에 가입하여 이용하는 자를 말합니다.
+2. "계정"이란 회원 식별과 서비스 이용을 위해 회원이 등록한 아이디와 비밀번호를 말합니다.
+
+제3조 (약관의 효력 및 변경)
+1. 본 약관은 회원이 가입 시 동의함으로써 효력이 발생합니다.
+2. 서비스는 관련 법령을 위반하지 않는 범위에서 약관을 변경할 수 있으며, 변경 시 적용일자와 사유를 명시하여 사전에 공지합니다.
+
+제4조 (서비스의 이용)
+1. 회원은 본인이 입력한 가계부·자산·거래 내역 등 개인 데이터를 본인만 열람·관리할 수 있습니다.
+2. 서비스는 회원이 입력한 데이터의 보관 및 처리를 제공하며, 그 정확성에 대한 책임은 입력한 회원에게 있습니다.
+3. 본 서비스가 제공하는 통계·시세 등 정보는 참고용이며, 투자 권유나 재무 자문이 아닙니다. 시세 정보는 제3자 출처를 인용하므로 지연·오류가 있을 수 있습니다.
+
+제5조 (회원의 의무)
+1. 회원은 계정 정보를 직접 관리할 책임이 있으며, 이를 타인에게 양도하거나 대여할 수 없습니다.
+2. 회원은 타인의 정보를 도용하거나 서비스 운영을 방해하는 행위를 하여서는 안 됩니다.
+
+제6조 (게시물)
+회원이 게시판 등에 작성한 게시물의 권리와 책임은 작성자에게 있으며, 서비스 운영이나 타인의 권리를 침해하는 게시물은 사전 통지 없이 제한될 수 있습니다.
+
+제7조 (계약 해지)
+회원은 언제든지 탈퇴를 요청할 수 있으며, 탈퇴 시 회원의 데이터는 관련 법령에서 정한 경우를 제외하고 지체 없이 삭제됩니다.
+
+제8조 (면책)
+서비스는 천재지변, 회원의 귀책사유, 제3자 서비스(시세 제공처 등)의 장애 등 합리적으로 통제할 수 없는 사유로 인한 손해에 대하여 책임을 지지 않습니다.
+
+부칙
+본 약관은 가입 시점부터 적용됩니다.`
+
+export const PRIVACY_POLICY = `${SERVICE_NAME}는 회원가입 및 서비스 제공을 위해 아래와 같이 개인정보를 수집·이용합니다.
+
+1. 수집 항목
+- 필수: 아이디, 비밀번호(암호화 저장), 이름
+- 선택: 이메일
+- 서비스 이용 과정에서 회원이 직접 입력하는 가계부·자산·거래 내역 등
+
+2. 수집·이용 목적
+- 회원 식별 및 로그인 등 계정 관리
+- 가계부·자산·예산 관리 기능 제공 및 회원 데이터 보관
+- 서비스 운영, 문의 응대 및 부정 이용 방지
+
+3. 보유 및 이용 기간
+- 회원 탈퇴 시까지 보유하며, 탈퇴 시 지체 없이 파기합니다.
+- 다만 관련 법령에 따라 보존이 필요한 경우 해당 기간 동안 보관합니다.
+
+4. 동의 거부 권리 및 불이익
+- 회원은 개인정보 수집·이용 동의를 거부할 권리가 있습니다.
+- 다만 필수 항목에 동의하지 않을 경우 회원가입 및 서비스 이용이 제한됩니다.
+
+비밀번호는 복호화가 불가능한 방식으로 암호화하여 저장되며, 운영자도 원문을 확인할 수 없습니다.`

src/router/index.js

@@ -17,30 +17,34 @@ const router = createRouter({
       component: () => import('../views/UsersView.vue'),
       meta: { requiresAuth: true, requiresAdmin: true },
     },
+    // 게시판: 카테고리(community/saving/tips)별 목록·작성·상세·수정
+    { path: '/board', redirect: '/board/community' },
     {
-      path: '/board',
+      path: '/board/:category(community|saving|tips)',
       name: 'board',
       component: () => import('../views/board/BoardListView.vue'),
       meta: { requiresAuth: true },
     },
     {
-      path: '/board/write',
+      path: '/board/:category(community|saving|tips)/write',
       name: 'board-write',
       component: () => import('../views/board/BoardWriteView.vue'),
       meta: { requiresAuth: true },
     },
     {
-      path: '/board/:id(\\d+)',
+      path: '/board/:category(community|saving|tips)/:id(\\d+)',
       name: 'board-detail',
       component: () => import('../views/board/BoardDetailView.vue'),
       meta: { requiresAuth: true },
     },
     {
-      path: '/board/:id(\\d+)/edit',
+      path: '/board/:category(community|saving|tips)/:id(\\d+)/edit',
       name: 'board-edit',
       component: () => import('../views/board/BoardWriteView.vue'),
       meta: { requiresAuth: true },
     },
+    // 구버전 링크(/board/123) 호환 — 커뮤니티 상세로 이동
+    { path: '/board/:id(\\d+)', redirect: (to) => `/board/community/${to.params.id}` },
     {
       path: '/admin/tags',
       name: 'admin-tags',
@@ -94,6 +98,25 @@ const router = createRouter({
       component: () => import('../views/account/RecurringView.vue'),
       meta: { requiresAuth: true },
     },
+    // 설정 (앱 하단 내비게이션 → 설정)
+    {
+      path: '/settings',
+      name: 'settings',
+      component: () => import('../views/settings/SettingsView.vue'),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: '/settings/account',
+      name: 'settings-account',
+      component: () => import('../views/settings/AccountInfoView.vue'),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: '/settings/account/edit',
+      name: 'settings-account-edit',
+      component: () => import('../views/settings/ProfileEditView.vue'),
+      meta: { requiresAuth: true },
+    },
   ],
 })
 

src/stores/auth.js

@@ -24,26 +24,35 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   async function persist() {
+    // localStorage 미러는 항상 먼저(동기) — Preferences 실패해도 토큰 유실 없음
     mirrorLocal()
-    if (token.value) await Preferences.set({ key: TOKEN_KEY, value: token.value })
+    try {
-    else await Preferences.remove({ key: TOKEN_KEY })
+      if (token.value) await Preferences.set({ key: TOKEN_KEY, value: token.value })
-    if (user.value) await Preferences.set({ key: USER_KEY, value: JSON.stringify(user.value) })
+      else await Preferences.remove({ key: TOKEN_KEY })
-    else await Preferences.remove({ key: USER_KEY })
+      if (user.value) await Preferences.set({ key: USER_KEY, value: JSON.stringify(user.value) })
+      else await Preferences.remove({ key: USER_KEY })
+    } catch {
+      // Preferences 사용 불가(일부 모바일 웹/시크릿 모드) — localStorage 미러로 충분
+    }
   }
 
   // 앱/웹 시작 시 저장된 세션 복원 (자동 로그인). main.js 에서 mount 전 await.
   async function restore() {
+    // 1) localStorage 우선 — 웹에서 항상 동작하고 http.js 의 토큰 소스와 동일.
+    //    (Preferences.get 가 모바일 웹에서 throw 해도 토큰을 잃지 않도록 먼저 읽는다)
+    let t = localStorage.getItem(TOKEN_KEY) || ''
+    let uRaw = localStorage.getItem(USER_KEY)
+    // 2) 네이티브(Preferences)에만 있고 localStorage 에 없으면 보강. 실패해도 무시.
     try {
-      const t = (await Preferences.get({ key: TOKEN_KEY })).value || localStorage.getItem(TOKEN_KEY) || ''
+      if (!t) t = (await Preferences.get({ key: TOKEN_KEY })).value || ''
-      const uRaw = (await Preferences.get({ key: USER_KEY })).value || localStorage.getItem(USER_KEY)
+      if (!uRaw) uRaw = (await Preferences.get({ key: USER_KEY })).value || null
-      token.value = t
-      user.value = safeParse(uRaw)
-      mirrorLocal()
     } catch {
-      // 무시 — 비로그인 상태로 시작
+      // Preferences 사용 불가(일부 모바일 웹/시크릿 모드) — localStorage 값으로 진행
-    } finally {
-      ready.value = true
     }
+    token.value = t
+    user.value = safeParse(uRaw)
+    mirrorLocal()
+    ready.value = true
   }
 
   async function login(loginId, password, rememberMe = false) {
@@ -75,13 +84,19 @@ export const useAuthStore = defineStore('auth', () => {
     await clear()
   }
 
+  // 가입정보 변경 등으로 바뀐 사용자 필드를 로컬 세션에 병합 (헤더 이름 등 즉시 반영)
+  async function applyUser(partial) {
+    user.value = { ...(user.value || {}), ...partial }
+    await persist()
+  }
+
   async function clear() {
     token.value = ''
     user.value = null
     await persist()
   }
 
-  return { token, user, ready, isAuthenticated, restore, login, signup, fetchMe, logout, clear }
+  return { token, user, ready, isAuthenticated, restore, login, signup, fetchMe, applyUser, logout, clear }
 })
 
 function safeParse(value) {

src/stores/auth.spec.js

@@ -0,0 +1,100 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+
+vi.mock('@/api/authApi', () => ({
+  authApi: {
+    login: vi.fn(),
+    logout: vi.fn(() => Promise.resolve()),
+    me: vi.fn(),
+    signup: vi.fn(),
+    signupEnabled: vi.fn(),
+  },
+}))
+
+// 네이티브 저장소 — 테스트에선 no-op (localStorage 미러만 검증)
+vi.mock('@capacitor/preferences', () => ({
+  Preferences: {
+    set: vi.fn(() => Promise.resolve()),
+    get: vi.fn(() => Promise.resolve({ value: null })),
+    remove: vi.fn(() => Promise.resolve()),
+    clear: vi.fn(() => Promise.resolve()),
+  },
+}))
+
+import { authApi } from '@/api/authApi'
+import { useAuthStore } from '@/stores/auth'
+
+describe('auth 스토어', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    localStorage.clear()
+  })
+
+  it('login: 토큰/사용자 저장 + localStorage 미러 + isAuthenticated', async () => {
+    authApi.login.mockResolvedValue({
+      token: 'tok123',
+      member: { id: 1, loginId: 'u1', name: '홍길동', email: 'a@b.com' },
+    })
+    const store = useAuthStore()
+    await store.login('u1', 'pw', true)
+
+    expect(authApi.login).toHaveBeenCalledWith({ loginId: 'u1', password: 'pw', rememberMe: true })
+    expect(store.token).toBe('tok123')
+    expect(store.isAuthenticated).toBe(true)
+    expect(store.user.email).toBe('a@b.com')
+    expect(localStorage.getItem('token')).toBe('tok123')
+    expect(JSON.parse(localStorage.getItem('auth_user')).name).toBe('홍길동')
+  })
+
+  it('logout: 상태/스토리지 정리', async () => {
+    authApi.login.mockResolvedValue({ token: 't', member: { id: 1, loginId: 'u1' } })
+    const store = useAuthStore()
+    await store.login('u1', 'pw', false)
+    expect(store.isAuthenticated).toBe(true)
+
+    await store.logout()
+    expect(authApi.logout).toHaveBeenCalled()
+    expect(store.token).toBe('')
+    expect(store.user).toBeNull()
+    expect(store.isAuthenticated).toBe(false)
+    expect(localStorage.getItem('token')).toBeNull()
+    expect(localStorage.getItem('auth_user')).toBeNull()
+  })
+
+  it('logout: 서버 401 이어도 클라이언트는 정리', async () => {
+    authApi.login.mockResolvedValue({ token: 't', member: { id: 1 } })
+    authApi.logout.mockRejectedValueOnce(new Error('401'))
+    const store = useAuthStore()
+    await store.login('u1', 'pw', false)
+
+    await store.logout()
+    expect(store.token).toBe('')
+    expect(store.isAuthenticated).toBe(false)
+  })
+
+  it('restore: localStorage 세션 복원 + ready', async () => {
+    localStorage.setItem('token', 't2')
+    localStorage.setItem('auth_user', JSON.stringify({ id: 2, name: '복원유저' }))
+    const store = useAuthStore()
+    await store.restore()
+
+    expect(store.token).toBe('t2')
+    expect(store.user.name).toBe('복원유저')
+    expect(store.isAuthenticated).toBe(true)
+    expect(store.ready).toBe(true)
+  })
+
+  it('applyUser: 변경 필드 병합 + 미러 갱신 (가입정보 변경 반영)', async () => {
+    authApi.login.mockResolvedValue({
+      token: 't',
+      member: { id: 1, loginId: 'u1', name: '원래이름', email: 'old@b.com' },
+    })
+    const store = useAuthStore()
+    await store.login('u1', 'pw', false)
+
+    await store.applyUser({ name: '새이름', email: 'new@b.com' })
+    expect(store.user.name).toBe('새이름')
+    expect(store.user.loginId).toBe('u1') // 기존 필드 보존
+    expect(JSON.parse(localStorage.getItem('auth_user')).email).toBe('new@b.com')
+  })
+})

src/stores/ui.js

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import { authApi } from '@/api/authApi'
 
 // 전역 UI 상태 (로그인/회원가입 레이어 팝업 등)
 export const useUiStore = defineStore('ui', () => {
@@ -7,6 +8,17 @@ export const useUiStore = defineStore('ui', () => {
   const signupOpen = ref(false)
   const redirectPath = ref('')
 
+  // 회원가입 허용 여부(관리자 설정). 비로그인도 조회 가능한 공개 API.
+  const signupEnabled = ref(true)
+  async function loadSignupEnabled() {
+    try {
+      const res = await authApi.signupEnabled()
+      signupEnabled.value = !!res.enabled
+    } catch {
+      signupEnabled.value = true // 조회 실패 시 기본 허용(서버가 최종 검증)
+    }
+  }
+
   // 모바일 사이드바 드로어
   const sidebarOpen = ref(false)
   function toggleSidebar() {
@@ -36,10 +48,11 @@ export const useUiStore = defineStore('ui', () => {
     redirectPath.value = ''
   }
 
-  // 회원가입 팝업 (로그인 팝업은 닫고 전환)
+  // 회원가입 팝업 (로그인 팝업은 닫고 전환). 열 때 최신 허용 여부 갱신.
   function openSignup() {
     loginOpen.value = false
     signupOpen.value = true
+    loadSignupEnabled()
   }
   function closeSignup() {
     signupOpen.value = false
@@ -47,6 +60,7 @@ export const useUiStore = defineStore('ui', () => {
 
   return {
     loginOpen, signupOpen, redirectPath, openLogin, closeLogin, openSignup, closeSignup,
+    signupEnabled, loadSignupEnabled,
     sidebarOpen, toggleSidebar, closeSidebar,
     passwordOpen, openPassword, closePassword,
   }

src/stores/ui.spec.js

@@ -0,0 +1,64 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+
+vi.mock('@/api/authApi', () => ({
+  authApi: {
+    signupEnabled: vi.fn(() => Promise.resolve({ enabled: true })),
+  },
+}))
+
+import { authApi } from '@/api/authApi'
+import { useUiStore } from '@/stores/ui'
+
+describe('ui 스토어', () => {
+  beforeEach(() => setActivePinia(createPinia()))
+
+  it('openLogin: 로그인 열고 회원가입 닫고 redirect 보존', () => {
+    const ui = useUiStore()
+    ui.signupOpen = true
+    ui.openLogin('/account/entries')
+    expect(ui.loginOpen).toBe(true)
+    expect(ui.signupOpen).toBe(false)
+    expect(ui.redirectPath).toBe('/account/entries')
+  })
+
+  it('closeLogin: 닫고 redirect 초기화', () => {
+    const ui = useUiStore()
+    ui.openLogin('/x')
+    ui.closeLogin()
+    expect(ui.loginOpen).toBe(false)
+    expect(ui.redirectPath).toBe('')
+  })
+
+  it('openSignup: 회원가입 열고 로그인 닫고 허용여부 재조회', () => {
+    const ui = useUiStore()
+    ui.loginOpen = true
+    ui.openSignup()
+    expect(ui.signupOpen).toBe(true)
+    expect(ui.loginOpen).toBe(false)
+    expect(authApi.signupEnabled).toHaveBeenCalled()
+  })
+
+  it('toggleSidebar / closeSidebar', () => {
+    const ui = useUiStore()
+    expect(ui.sidebarOpen).toBe(false)
+    ui.toggleSidebar()
+    expect(ui.sidebarOpen).toBe(true)
+    ui.closeSidebar()
+    expect(ui.sidebarOpen).toBe(false)
+  })
+
+  it('loadSignupEnabled: API 값 반영', async () => {
+    authApi.signupEnabled.mockResolvedValueOnce({ enabled: false })
+    const ui = useUiStore()
+    await ui.loadSignupEnabled()
+    expect(ui.signupEnabled).toBe(false)
+  })
+
+  it('loadSignupEnabled: 조회 실패 시 기본 허용(true)', async () => {
+    authApi.signupEnabled.mockRejectedValueOnce(new Error('net'))
+    const ui = useUiStore()
+    await ui.loadSignupEnabled()
+    expect(ui.signupEnabled).toBe(true)
+  })
+})

src/views/HomeView.vue

@@ -17,6 +17,7 @@ const summary = ref({ totalIncome: 0, totalExpense: 0, balance: 0 })
 const networth = ref({ totalAssets: 0, totalLiabilities: 0, netWorth: 0 })
 const budgetTotal = ref(0)
 const spentTotal = ref(0)
+const entries = ref([])
 const loading = ref(false)
 const error = ref(null)
 
@@ -33,13 +34,61 @@ function won(n) {
   return (n ?? 0).toLocaleString('ko-KR')
 }
 
+// ===== 일별 수입/지출 캘린더 =====
+const WEEKDAYS = ['일', '월', '화', '수', '목', '금', '토']
+
+// 일자 → { income, expense, items[] }
+const dayMap = computed(() => {
+  const m = {}
+  for (const e of entries.value) {
+    const d = (e.entryDate || '').slice(0, 10)
+    const day = Number(d.slice(8, 10))
+    if (!day) continue
+    if (!m[day]) m[day] = { income: 0, expense: 0, items: [] }
+    if (e.type === 'INCOME') m[day].income += e.amount || 0
+    else if (e.type === 'EXPENSE') m[day].expense += e.amount || 0
+    m[day].items.push(e)
+  }
+  return m
+})
+
+const daysInMonth = computed(() => new Date(year, month, 0).getDate())
+const firstWeekday = computed(() => new Date(year, month - 1, 1).getDay()) // 0=일
+const todayDate = now.getFullYear() === year && now.getMonth() + 1 === month ? now.getDate() : 0
+
+const calendarCells = computed(() => {
+  const cells = []
+  for (let i = 0; i < firstWeekday.value; i++) cells.push(null)
+  for (let d = 1; d <= daysInMonth.value; d++) {
+    const info = dayMap.value[d] || { income: 0, expense: 0, items: [] }
+    cells.push({ day: d, ...info })
+  }
+  return cells
+})
+
+// 마우스 오버 / 탭한 날짜의 내역 목록
+const activeDay = ref(0)
+const activeItems = computed(() => (activeDay.value ? dayMap.value[activeDay.value]?.items || [] : []))
+const activeDateLabel = computed(() => {
+  if (!activeDay.value) return ''
+  const wd = WEEKDAYS[new Date(year, month - 1, activeDay.value).getDay()]
+  return `${month}월 ${activeDay.value}일 (${wd})`
+})
+function itemLabel(e) {
+  if (e.type === 'TRANSFER') return '이체'
+  return e.category || (e.type === 'INCOME' ? '수입' : '지출')
+}
+function itemSign(t) {
+  return t === 'INCOME' ? '+' : t === 'EXPENSE' ? '-' : ''
+}
+
 // 가계부 주요 화면 바로가기
 const shortcuts = [
   { to: '/account/entries', icon: '📒', label: '가계부 내역', desc: '수입·지출 기록' },
   { to: '/account/stats', icon: '📊', label: '통계', desc: '차트로 보기' },
   { to: '/account/wallets', icon: '🏦', label: '계좌 관리', desc: '자산·부채' },
   { to: '/account/budget', icon: '🎯', label: '예산 설정', desc: '예산 대비 지출' },
-  { to: '/account/recurrings', icon: '🔁', label: '정기 거래', desc: '반복 수입·지출' },
+  { to: '/account/recurrings', icon: '🔁', label: '고정 지출', desc: '매월·매년 반복' },
   { to: '/account/categories', icon: '🗂️', label: '분류 관리', desc: '카테고리' },
 ]
 
@@ -48,15 +97,17 @@ async function load() {
   loading.value = true
   error.value = null
   try {
-    const [sum, nw, status] = await Promise.all([
+    const [sum, nw, status, list] = await Promise.all([
       accountApi.summary({ year, month }),
       accountApi.netWorth(),
       accountApi.budgetStatus({ year, month }),
+      accountApi.list({ year, month }),
     ])
     summary.value = sum
     networth.value = nw
     budgetTotal.value = (status || []).reduce((s, x) => s + (x.monthlyBudget || 0), 0)
     spentTotal.value = (status || []).reduce((s, x) => s + (x.spent || 0), 0)
+    entries.value = list || []
   } catch (e) {
     error.value = e.response?.data?.message || '요약을 불러오지 못했습니다.'
   } finally {
@@ -72,6 +123,8 @@ watch(() => auth.isAuthenticated, (v) => {
     networth.value = { totalAssets: 0, totalLiabilities: 0, netWorth: 0 }
     budgetTotal.value = 0
     spentTotal.value = 0
+    entries.value = []
+    activeDay.value = 0
   }
 })
 
@@ -159,6 +212,52 @@ onMounted(load)
         <RouterLink v-else to="/account/budget" class="budget-empty">예산을 설정하면 지출 진행률을 볼 수 있어요 →</RouterLink>
       </div>
 
+      <!-- 일별 수입/지출 캘린더 -->
+      <div class="card cal-card">
+        <div class="card-head">
+          <span class="card-title">{{ month }}월 일별 수입·지출</span>
+          <RouterLink to="/account/entries" class="more">내역 →</RouterLink>
+        </div>
+
+        <div class="cal-grid cal-head">
+          <span v-for="(w, i) in WEEKDAYS" :key="w" class="cal-wd" :class="{ sun: i === 0, sat: i === 6 }">{{ w }}</span>
+        </div>
+        <div class="cal-grid">
+          <template v-for="(c, i) in calendarCells" :key="i">
+            <span v-if="!c" class="cal-cell empty"></span>
+            <button
+              v-else
+              type="button"
+              class="cal-cell"
+              :class="{ today: c.day === todayDate, active: c.day === activeDay, has: c.items.length }"
+              @mouseenter="activeDay = c.day"
+              @click="activeDay = activeDay === c.day ? 0 : c.day"
+            >
+              <span class="cal-day">{{ c.day }}</span>
+              <span v-if="c.income" class="cal-amt income">+{{ won(c.income) }}</span>
+              <span v-if="c.expense" class="cal-amt expense">-{{ won(c.expense) }}</span>
+            </button>
+          </template>
+        </div>
+
+        <!-- 선택/오버한 날짜의 내역 목록 -->
+        <div class="cal-detail" :class="{ open: activeDay && activeItems.length }">
+          <template v-if="activeDay && activeItems.length">
+            <div class="cd-date">{{ activeDateLabel }}</div>
+            <ul class="cd-list">
+              <li v-for="(e, idx) in activeItems" :key="idx" class="cd-item">
+                <span class="cd-cat">{{ itemLabel(e) }}</span>
+                <span v-if="e.memo" class="cd-memo">{{ e.memo }}</span>
+                <span class="cd-amt" :class="{ income: e.type === 'INCOME', expense: e.type === 'EXPENSE' }">
+                  {{ itemSign(e.type) }}{{ won(e.amount) }}
+                </span>
+              </li>
+            </ul>
+          </template>
+          <p v-else class="cd-hint">날짜에 마우스를 올리거나 탭하면 내역이 표시됩니다.</p>
+        </div>
+      </div>
+
       <!-- 바로가기 -->
       <div class="shortcuts">
         <RouterLink v-for="s in shortcuts" :key="s.to" :to="s.to" class="shortcut">
@@ -179,9 +278,9 @@ onMounted(load)
           <p class="tagline">슬림하게 관리하는 가계부 · 자산 · 예산</p>
           <div class="cta">
             <button type="button" class="btn primary" @click="ui.openLogin('/account')">로그인</button>
-            <button type="button" class="btn" @click="ui.openSignup()">회원가입</button>
+            <button v-if="ui.signupEnabled" type="button" class="btn" @click="ui.openSignup()">회원가입</button>
           </div>
-          <p class="cta-note">로그인하면 나의 가계부 요약을 볼 수 있어요.</p>
+          <p class="cta-note">{{ ui.signupEnabled ? '로그인하면 나의 가계부 요약을 볼 수 있어요.' : '현재 회원가입이 제한되어 있습니다.' }}</p>
         </div>
 
         <ul class="features">
@@ -317,6 +416,133 @@ onMounted(load)
   color: hsla(160, 100%, 37%, 1);
 }
 
+/* 일별 캘린더 */
+.cal-card {
+  margin-bottom: 1.2rem;
+}
+.cal-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 3px;
+}
+.cal-head {
+  margin-bottom: 4px;
+}
+.cal-wd {
+  text-align: center;
+  font-size: 0.72rem;
+  opacity: 0.6;
+  padding: 2px 0;
+}
+.cal-wd.sun {
+  color: #c0392b;
+}
+.cal-wd.sat {
+  color: #2c6bbf;
+}
+.cal-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+  min-height: 46px;
+  padding: 3px 4px;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-background);
+  color: var(--color-text);
+  cursor: pointer;
+  overflow: hidden;
+}
+.cal-cell.empty {
+  border: none;
+  background: transparent;
+  cursor: default;
+  min-height: 0;
+}
+.cal-cell.has {
+  border-color: hsla(160, 100%, 37%, 0.4);
+}
+.cal-cell.today {
+  box-shadow: inset 0 0 0 1.5px hsla(160, 100%, 37%, 0.8);
+}
+.cal-cell.active {
+  background: hsla(160, 100%, 37%, 0.12);
+  border-color: hsla(160, 100%, 37%, 0.7);
+}
+.cal-day {
+  font-size: 0.72rem;
+  font-weight: 600;
+  opacity: 0.75;
+}
+.cal-amt {
+  font-size: 0.62rem;
+  font-weight: 700;
+  line-height: 1.1;
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cal-amt.income {
+  color: #2e7d32;
+}
+.cal-amt.expense {
+  color: #c0392b;
+}
+.cal-detail {
+  margin-top: 0.7rem;
+  padding-top: 0.7rem;
+  border-top: 1px solid var(--color-border);
+  min-height: 1.2rem;
+}
+.cd-date {
+  font-size: 0.82rem;
+  font-weight: 700;
+  margin-bottom: 0.4rem;
+}
+.cd-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.cd-item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  font-size: 0.82rem;
+}
+.cd-cat {
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.cd-memo {
+  opacity: 0.6;
+  font-size: 0.76rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cd-amt {
+  margin-left: auto;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.cd-amt.income {
+  color: #2e7d32;
+}
+.cd-amt.expense {
+  color: #c0392b;
+}
+.cd-hint {
+  font-size: 0.78rem;
+  opacity: 0.5;
+  margin: 0;
+}
+
 /* 바로가기 그리드 */
 .shortcuts {
   display: grid;

src/views/UsersView.vue

@@ -41,6 +41,31 @@ async function load() {
   }
 }
 
+// 회원가입 허용 설정
+const signupEnabled = ref(true)
+const signupSaving = ref(false)
+async function loadSignupSetting() {
+  try {
+    const res = await adminApi.getSignupSetting()
+    signupEnabled.value = !!res.enabled
+  } catch {
+    /* 무시 — 기본 허용 표시 */
+  }
+}
+async function toggleSignup() {
+  if (signupSaving.value) return
+  const next = !signupEnabled.value
+  signupSaving.value = true
+  try {
+    const res = await adminApi.setSignupSetting(next)
+    signupEnabled.value = !!res.enabled
+  } catch (e) {
+    alert(e.response?.data?.message || '설정 변경에 실패했습니다.')
+  } finally {
+    signupSaving.value = false
+  }
+}
+
 async function changeRole(m, role) {
   if (role === m.role) return
   try {
@@ -73,7 +98,10 @@ async function remove(m) {
   }
 }
 
-onMounted(load)
+onMounted(() => {
+  load()
+  loadSignupSetting()
+})
 </script>
 
 <template>
@@ -87,6 +115,19 @@ onMounted(load)
     </header>
     <p class="hint">가입한 회원의 역할·상태를 관리합니다. (관리자 전용)</p>
 
+    <!-- 회원가입 허용 토글 -->
+    <div class="signup-toggle" :class="{ off: !signupEnabled }">
+      <div class="st-text">
+        <strong>회원가입 {{ signupEnabled ? '허용' : '제한' }}</strong>
+        <span class="st-desc">{{ signupEnabled ? '누구나 회원가입할 수 있습니다.' : '신규 회원가입이 차단됩니다.' }}</span>
+      </div>
+      <button
+        type="button" class="switch" :class="{ on: signupEnabled }"
+        :disabled="signupSaving" role="switch" :aria-checked="signupEnabled"
+        @click="toggleSignup"
+      ><span class="knob"></span></button>
+    </div>
+
     <p v-if="error" class="msg error">{{ error }}</p>
     <p v-if="loading" class="msg">불러오는 중...</p>
 
@@ -171,6 +212,66 @@ h1 {
   opacity: 0.7;
   margin: 0.5rem 0 1rem;
 }
+.signup-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.8rem 1rem;
+  margin-bottom: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  background: var(--color-background-soft);
+}
+.signup-toggle.off {
+  border-color: #c0392b;
+  background: rgba(192, 57, 43, 0.06);
+}
+.st-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+}
+.st-text strong {
+  font-size: 0.95rem;
+}
+.st-desc {
+  font-size: 0.8rem;
+  opacity: 0.7;
+}
+.switch {
+  flex-shrink: 0;
+  width: 48px;
+  height: 28px;
+  border: 0;
+  border-radius: 999px;
+  background: #b0b0b0;
+  position: relative;
+  cursor: pointer;
+  transition: background 0.18s;
+  padding: 0;
+}
+.switch.on {
+  background: hsla(160, 100%, 37%, 1);
+}
+.switch:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.switch .knob {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform 0.18s;
+}
+.switch.on .knob {
+  transform: translateX(20px);
+}
 .member-table {
   width: 100%;
   border-collapse: collapse;

src/views/account/AccountTagView.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { onBeforeUnmount, onMounted, ref, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
+import Sortable from 'sortablejs'
 import { accountApi } from '@/api/accountApi'
 import IconBtn from '@/components/ui/IconBtn.vue'
 
@@ -23,6 +24,37 @@ async function load() {
   }
 }
 
+// ===== 드래그앤드랍 정렬 (SortableJS, 터치 지원) =====
+const listEl = ref(null)
+let sortable = null
+function initSortable() {
+  if (sortable) {
+    sortable.destroy()
+    sortable = null
+  }
+  if (!listEl.value) return
+  sortable = Sortable.create(listEl.value, {
+    handle: '.drag-handle',
+    animation: 150,
+    onEnd: (evt) => {
+      if (evt.oldIndex === evt.newIndex) return
+      const arr = tags.value
+      const moved = arr.splice(evt.oldIndex, 1)[0]
+      arr.splice(evt.newIndex, 0, moved)
+      persistOrder(arr.map((t) => t.id))
+    },
+  })
+}
+async function persistOrder(ids) {
+  try {
+    await accountApi.reorderTags(ids)
+    await load()
+  } catch (e) {
+    alert(e.response?.data?.message || '순서 저장에 실패했습니다.')
+    await load()
+  }
+}
+
 async function addTag() {
   const name = newName.value.trim()
   if (!name) return
@@ -56,7 +88,12 @@ async function removeTag(tag) {
   }
 }
 
-onMounted(load)
+onMounted(async () => {
+  await load()
+  await nextTick()
+  initSortable()
+})
+onBeforeUnmount(() => sortable?.destroy())
 </script>
 
 <template>
@@ -75,14 +112,15 @@ onMounted(load)
     <p v-if="error" class="msg error">{{ error }}</p>
     <p v-if="loading" class="msg">불러오는 중...</p>
 
-    <ul v-else-if="tags.length" class="tag-list">
+    <ul v-show="!loading && tags.length" ref="listEl" class="tag-list">
-      <li v-for="t in tags" :key="t.id" class="tag-row">
+      <li v-for="t in tags" :key="t.id" :data-id="t.id" class="tag-row">
+        <span class="drag-handle" title="드래그하여 순서 변경">≡</span>
         <input v-model="t.name" class="tag-name" @keyup.enter="saveTag(t)" />
         <IconBtn icon="check" title="저장" @click="saveTag(t)" />
         <IconBtn icon="trash" title="삭제" variant="danger" @click="removeTag(t)" />
       </li>
     </ul>
-    <p v-else-if="!loading" class="msg">등록된 태그가 없습니다.</p>
+    <p v-if="!loading && !tags.length" class="msg">등록된 태그가 없습니다.</p>
   </section>
 </template>
 
@@ -143,6 +181,17 @@ button.danger {
   padding: 0.4rem 0;
   border-bottom: 1px solid var(--color-border);
 }
+.drag-handle {
+  cursor: grab;
+  user-select: none;
+  opacity: 0.5;
+  font-size: 1.1rem;
+  padding: 0 0.2rem;
+  touch-action: none;
+}
+.drag-handle:active {
+  cursor: grabbing;
+}
 .tag-name {
   flex: 1;
 }

src/views/account/AccountView.vue

@@ -39,10 +39,12 @@ async function loadPendingCount() {
 async function confirmRow(e) {
   try {
     await accountApi.confirmEntry(e.id, {})
+    e.pending = false // UI 즉시 반영(목록 재로딩 전)
     await load()
     await loadPendingCount()
   } catch (err) {
-    alert(err.response?.data?.message || '확인 처리에 실패했습니다.')
+    const st = err.response?.status
+    alert(err.response?.data?.message || `확인 처리에 실패했습니다.${st ? ' (HTTP ' + st + ')' : ' (네트워크 오류)'}`)
   }
 }
 
@@ -363,7 +365,7 @@ function todayStr() {
 function openCreate() {
   editId.value = null
   editingPending.value = false
-  Object.assign(form, { entryDate: todayStr(), type: 'EXPENSE', category: '', amount: null, memo: '', walletKind: '', walletId: '', toWalletKind: '', toWalletId: '', principal: null, interest: null, installmentMonths: '' })
+  Object.assign(form, { entryDate: todayStr(), type: 'EXPENSE', category: '', amount: null, memo: '', walletKind: 'BANK', walletId: '', toWalletKind: '', toWalletId: '', principal: null, interest: null, installmentMonths: '' })
   selectedTagIds.value = []
   cancelAddCategory()
   formError.value = null
@@ -378,7 +380,10 @@ function openEdit(e) {
     category: e.category || '',
     amount: e.amount,
     memo: e.memo || '',
-    walletKind: walletKindOf(e.walletId),
+    // 알림 자동인식(pending) 건은 카드 결제이므로 매칭 실패해도 '카드'로 기본 선택(현금 X)
+    walletKind: e.walletId
+      ? walletKindOf(e.walletId)
+      : (e.pending ? 'CARD' : (e.type === 'TRANSFER' ? '' : 'CASH')),
     walletId: e.walletId || '',
     toWalletKind: walletKindOf(e.toWalletId),
     toWalletId: e.toWalletId || '',
@@ -653,21 +658,27 @@ onMounted(async () => {
                   <option v-if="!editId" value="REPAYMENT">상환/납부</option>
                 </select>
               </label>
-              <!-- 계좌 종류 먼저 선택 → 해당 종류만 목록에 -->
+              <!-- 계좌 종류 먼저 선택(라디오) → 해당 종류만 셀렉트에 -->
-              <label>계좌 종류
+              <div class="field">
-                <select v-model="form.walletKind" :disabled="submitting" @change="onWalletKindChange">
+                <div class="field-row">
-                  <option value="">{{ form.type === 'INCOME' || form.type === 'EXPENSE' ? '(선택 안 함)' : '(선택)' }}</option>
+                  <span class="field-label">계좌 종류</span>
-                  <option v-for="k in WALLET_KINDS" :key="k.value" :value="k.value">{{ k.label }}</option>
+                  <div class="wallet-radios">
-                </select>
+                    <label v-for="k in WALLET_KINDS" :key="k.value" class="radio">
-              </label>
+                      <input type="radio" :value="k.value" v-model="form.walletKind" :disabled="submitting" @change="onWalletKindChange" />
-              <label v-if="form.walletKind">{{ form.type === 'INCOME' || form.type === 'EXPENSE' ? '계좌/카드' : '출금 계좌' }}
+                      {{ k.label }}
-                <select v-model="form.walletId" :disabled="submitting">
+                    </label>
-                  <option value="">(선택)</option>
+                    <label v-if="form.type !== 'TRANSFER'" class="radio">
+                      <input type="radio" value="CASH" v-model="form.walletKind" :disabled="submitting" @change="onWalletKindChange" /> 현금
+                    </label>
+                  </div>
+                </div>
+                <select v-if="form.walletKind && form.walletKind !== 'CASH'" v-model="form.walletId" :disabled="submitting">
+                  <option value="">{{ form.type === 'INCOME' || form.type === 'EXPENSE' ? '계좌/카드 선택' : '출금 계좌 선택' }}</option>
                   <option v-for="w in walletsOfKind" :key="w.id" :value="w.id">
                     {{ w.name }}{{ w.issuer ? ` (${w.issuer})` : '' }}
                   </option>
                 </select>
-              </label>
+              </div>
               <!-- 카드 지출: 할부 개월수 (일시불 또는 2~24개월) -->
               <label v-if="showInstallment">할부
                 <select v-model="form.installmentMonths" :disabled="submitting">
@@ -677,20 +688,23 @@ onMounted(async () => {
                 <small v-if="installmentMonthly" class="install-hint">월 약 {{ won(installmentMonthly) }}원</small>
               </label>
               <template v-if="form.type === 'TRANSFER'">
-                <label>입금 종류
+                <div class="field">
-                  <select v-model="form.toWalletKind" :disabled="submitting" @change="onToWalletKindChange">
+                  <div class="field-row">
-                    <option value="">(선택)</option>
+                    <span class="field-label">입금 종류</span>
-                    <option v-for="k in WALLET_KINDS" :key="k.value" :value="k.value">{{ k.label }}</option>
+                    <div class="wallet-radios">
-                  </select>
+                      <label v-for="k in WALLET_KINDS" :key="k.value" class="radio">
-                </label>
+                        <input type="radio" :value="k.value" v-model="form.toWalletKind" :disabled="submitting" @change="onToWalletKindChange" />
-                <label v-if="form.toWalletKind">입금 계좌
+                        {{ k.label }}
-                  <select v-model="form.toWalletId" :disabled="submitting">
+                      </label>
-                    <option value="">(선택)</option>
+                    </div>
+                  </div>
+                  <select v-if="form.toWalletKind" v-model="form.toWalletId" :disabled="submitting">
+                    <option value="">입금 계좌 선택</option>
                     <option v-for="w in toWalletsOfKind" :key="w.id" :value="w.id">
                       {{ w.name }}{{ w.issuer ? ` (${w.issuer})` : '' }}
                     </option>
                   </select>
-                </label>
+                </div>
               </template>
 
               <!-- 상환/납부: 대상(대출/카드) + 원금 + 이자 -->
@@ -1071,7 +1085,10 @@ button.primary {
   position: relative;
   width: 100%;
   max-width: 360px;
-  padding: 1.75rem 1.5rem 1.5rem;
+  /* 폼이 길어도 모달 안에서 스크롤되도록 + 하단 소프트키/제스처바 안전영역 확보 */
+  max-height: calc(100vh - 2rem);
+  overflow-y: auto;
+  padding: 1.75rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
   background: var(--color-background);
   border: 1px solid var(--color-border);
   border-radius: 8px;
@@ -1207,6 +1224,41 @@ button.primary {
   background: var(--color-background-soft);
   color: var(--color-text);
 }
+/* 계좌 종류 라디오 (라벨+라디오 한 줄, 선택 종류는 셀렉트로 아래) */
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+.field-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.field-label {
+  font-size: 0.82rem;
+  flex-shrink: 0;
+}
+.wallet-radios {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 0.3rem 0.5rem;
+}
+.wallet-radios .radio {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.15rem;
+  font-size: 0.82rem;
+  cursor: pointer;
+}
+.wallet-radios .radio input {
+  padding: 0;
+  width: auto;
+  margin: 0;
+}
 .cat-input {
   display: flex;
   gap: 0.4rem;
@@ -1287,6 +1339,11 @@ button.primary {
   justify-content: flex-end;
   gap: 0.5rem;
   margin-top: 0.5rem;
+  /* 폼이 길 때도 저장/취소 버튼이 항상 보이도록 하단 고정 */
+  position: sticky;
+  bottom: calc(-1.5rem - env(safe-area-inset-bottom));
+  padding: 0.6rem 0 0.2rem;
+  background: var(--color-background);
 }
 .fade-enter-active,
 .fade-leave-active {

src/views/account/AccountWalletView.vue

@@ -51,6 +51,23 @@ function syncRows() {
 }
 watch([wallets, activeType], syncRows, { immediate: true })
 
+// 탭 선택 — 투자 탭이면 전체 시세를 갱신해 계좌 평가액에 반영
+const refreshingInvest = ref(false)
+async function selectTab(key) {
+  activeType.value = key
+  if (key === 'INVEST' && wallets.value.some((w) => w.type === 'INVEST')) {
+    refreshingInvest.value = true
+    try {
+      await accountApi.refreshAllPrices()
+      await load()
+    } catch {
+      // 시세 갱신 실패는 조용히 무시(기존 값 유지)
+    } finally {
+      refreshingInvest.value = false
+    }
+  }
+}
+
 // ===== 드래그앤드랍 순서 변경 (SortableJS, 터치 지원) =====
 const listEl = ref(null)
 let sortable = null
@@ -128,6 +145,25 @@ function entryDate(v) {
 function won(n) {
   return (n ?? 0).toLocaleString('ko-KR')
 }
+
+// 계좌번호 마스킹: 끝 4자리만 노출(구분자 유지), 눈 버튼으로 전체 보기 토글
+const revealedAccts = ref(new Set())
+function maskAccount(num) {
+  if (!num) return ''
+  const digitCount = (num.match(/\d/g) || []).length
+  if (digitCount <= 4) return num
+  const keep = digitCount - 4
+  let seen = 0
+  return num.replace(/\d/g, (d) => {
+    seen += 1
+    return seen <= keep ? '*' : d
+  })
+}
+function toggleReveal(id) {
+  const s = new Set(revealedAccts.value)
+  s.has(id) ? s.delete(id) : s.add(id)
+  revealedAccts.value = s
+}
 function issuerLabel(t) {
   return t === 'BANK' ? '은행명' : t === 'CARD' ? '카드사' : t === 'INVEST' ? '증권사' : '대출기관'
 }
@@ -272,12 +308,13 @@ onBeforeUnmount(() => sortable?.destroy())
           :key="t.key"
           type="button"
           :class="{ active: activeType === t.key }"
-          @click="activeType = t.key"
+          @click="selectTab(t.key)"
         >{{ t.label }}</button>
       </div>
       <IconBtn class="tab-add" icon="plus" title="추가" variant="primary" @click="openCreate" />
     </div>
 
+    <p v-if="refreshingInvest" class="msg refresh-note">시세 갱신 중…</p>
     <p v-if="error" class="msg error">{{ error }}</p>
     <p v-if="loading" class="msg">불러오는 중...</p>
 
@@ -293,8 +330,16 @@ onBeforeUnmount(() => sortable?.destroy())
             </div>
             <span class="sub">
               {{ w.issuer }}
-              <template v-if="w.type === 'BANK' && w.accountNumber"> · {{ w.accountNumber }}</template>
+              <template v-if="w.type === 'BANK' && w.accountNumber">
-              <template v-if="w.type === 'INVEST'"> · 예수금 {{ won(w.deposit) }} · 주식 {{ won(w.stockValue) }}</template>
+                · {{ revealedAccts.has(w.id) ? w.accountNumber : maskAccount(w.accountNumber) }}
+                <button
+                  type="button" class="acct-eye"
+                  :title="revealedAccts.has(w.id) ? '가리기' : '전체 보기'"
+                  @click.stop="toggleReveal(w.id)"
+                >{{ revealedAccts.has(w.id) ? '🙈' : '👁' }}</button>
+              </template>
+              <template v-if="w.type === 'INVEST' && w.manualValuation"> · 평가액 직접입력</template>
+              <template v-else-if="w.type === 'INVEST'"> · 예수금 {{ won(w.deposit) }} · 주식 {{ won(w.stockValue) }}</template>
             </span>
           </div>
           <div class="balance-wrap">
@@ -314,7 +359,11 @@ onBeforeUnmount(() => sortable?.destroy())
 
         <!-- 드롭다운: 투자는 포트폴리오, 그 외는 계좌별 내역 -->
         <div v-if="expandedId === w.id" class="entry-drop">
-          <InvestPortfolio v-if="w.type === 'INVEST'" :wallet-id="w.id" @changed="load" />
+          <div v-if="w.type === 'INVEST' && w.manualValuation" class="manual-note">
+            <p>평가액을 <b>직접 입력</b>하는 계좌입니다. 종목을 관리하지 않고 입력한 현재 평가액({{ won(w.currentValue) }})을 사용합니다.</p>
+            <p class="manual-sub">평가액을 갱신하려면 위 <b>수정</b>에서 ‘현재 평가액’을 바꾸세요. 종목으로 자동계산하려면 평가액을 비우면 됩니다.</p>
+          </div>
+          <InvestPortfolio v-else-if="w.type === 'INVEST'" :wallet-id="w.id" @changed="load" />
           <template v-else>
           <p v-if="loadingEntries" class="drop-msg">불러오는 중...</p>
           <ul v-else-if="(entriesByWallet[w.id] || []).length" class="drop-list">
@@ -352,9 +401,15 @@ onBeforeUnmount(() => sortable?.destroy())
                 </select>
               </label>
               <label>{{ openingLabel(form.type) }}<input v-model.number="form.openingBalance" type="number" min="0" :disabled="submitting" /></label>
-              <p v-if="form.type === 'INVEST'" class="form-hint">
+              <template v-if="form.type === 'INVEST'">
-                증권계좌 입금은 은행→투자 ‘이체’로 기록하세요. 계좌를 펼치면 <b>종목·매수/매도·현재가</b>를 관리할 수 있고, 평가금액·손익은 자동 계산됩니다.
+                <label>현재 평가액 (직접 입력)
-              </p>
+                  <input v-model.number="form.currentValue" type="number" min="0" placeholder="(선택) 퇴직연금·연금처럼 종목 관리가 어려운 계좌" :disabled="submitting" />
+                </label>
+                <p class="form-hint">
+                  증권계좌 입금은 은행→투자 ‘이체’로 기록하세요. 계좌를 펼치면 <b>종목·매수/매도·현재가</b>를 관리할 수 있고, 평가금액·손익은 자동 계산됩니다.<br />
+                  <b>퇴직연금·연금</b>처럼 종목 단위 관리가 어려우면 위 <b>현재 평가액</b>만 주기적으로 갱신하세요. 입력하면 종목 자동계산 대신 이 값을 평가액으로 사용합니다.
+                </p>
+              </template>
               <label>기준일<input v-model="form.openingDate" type="date" :disabled="submitting" /></label>
 
               <p v-if="formError" class="msg error">{{ formError }}</p>
@@ -505,6 +560,22 @@ button.primary {
   opacity: 0.65;
   padding: 0.5rem 0;
 }
+.refresh-note {
+  font-size: 0.82rem;
+  opacity: 0.6;
+}
+.manual-note {
+  padding: 0.6rem 0.2rem;
+  font-size: 0.85rem;
+}
+.manual-note p {
+  margin: 0 0 0.3rem;
+}
+.manual-note .manual-sub {
+  opacity: 0.6;
+  font-size: 0.78rem;
+  margin: 0;
+}
 .drop-list {
   list-style: none;
 }
@@ -560,6 +631,18 @@ button.primary {
   font-size: 0.82rem;
   opacity: 0.7;
 }
+.acct-eye {
+  border: 0;
+  background: transparent;
+  padding: 0 0.15rem;
+  font-size: 0.78rem;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+}
+.acct-eye:hover {
+  opacity: 1;
+}
 .balance-wrap {
   text-align: right;
   white-space: nowrap;

src/views/account/InvestPortfolio.vue

@@ -70,6 +70,27 @@ async function load() {
   }
 }
 
+// 종목코드로 현재가 시세 일괄 갱신
+const refreshing = ref(false)
+const refreshMsg = ref('')
+async function refreshPrices() {
+  if (refreshing.value) return
+  refreshing.value = true
+  refreshMsg.value = ''
+  try {
+    holdings.value = await accountApi.refreshPrices(props.walletId)
+    emit('changed')
+    const noTicker = holdings.value.filter((h) => !h.ticker).length
+    refreshMsg.value = noTicker
+      ? `시세 갱신 완료 · 종목코드 없는 ${noTicker}개는 제외`
+      : '시세 갱신 완료'
+  } catch {
+    refreshMsg.value = '시세 갱신에 실패했습니다.'
+  } finally {
+    refreshing.value = false
+  }
+}
+
 /* ===== 종목 ===== */
 function openAddHolding() {
   holdingEditId.value = null
@@ -189,15 +210,29 @@ async function removeTrade(t, holdingId) {
   }
 }
 
-onMounted(load)
+onMounted(async () => {
+  await load()
+  // 투자 계좌를 펼치면 종목코드 있는 종목 현재가를 자동으로 시세 갱신
+  if (holdings.value.some((h) => h.ticker)) {
+    refreshPrices()
+  }
+})
 </script>
 
 <template>
   <div class="portfolio">
     <div class="pf-head">
       <span class="pf-title">보유 종목</span>
-      <IconBtn icon="plus" title="종목 추가" variant="primary" size="sm" @click="openAddHolding" />
+      <div class="pf-head-btns">
+        <button
+          type="button" class="refresh-btn"
+          :disabled="refreshing || !holdings.length"
+          @click="refreshPrices"
+        >{{ refreshing ? '갱신 중…' : '↻ 시세 갱신' }}</button>
+        <IconBtn icon="plus" title="종목 추가" variant="primary" size="sm" @click="openAddHolding" />
+      </div>
     </div>
+    <p v-if="refreshMsg" class="pf-refresh-msg">{{ refreshMsg }}</p>
 
     <p v-if="loading" class="pf-msg">불러오는 중...</p>
     <p v-else-if="!holdings.length" class="pf-msg">보유 종목이 없습니다. 종목을 추가하고 매수를 기록하세요.</p>
@@ -210,9 +245,12 @@ onMounted(load)
             <div>
               <div class="h-name">{{ h.name }}<span v-if="h.ticker" class="h-ticker">{{ h.ticker }}</span></div>
               <div class="h-sub">
-                {{ shares(h.quantity) }}주 · 평단 {{ won(h.avgPrice) }}
+                <div class="h-sub-qty">{{ shares(h.quantity) }}주</div>
-                <template v-if="h.currentPrice != null"> · 현재가 {{ won(h.currentPrice) }}</template>
+                <div class="h-sub-price">
-                <span v-else class="noprice"> · 현재가 미입력</span>
+                  평단 {{ won(h.avgPrice) }}
+                  <template v-if="h.currentPrice != null"> · 현재가 {{ won(h.currentPrice) }}</template>
+                  <span v-else class="noprice"> · 현재가 미입력</span>
+                </div>
               </div>
             </div>
           </div>
@@ -257,8 +295,9 @@ onMounted(load)
             <h2>종목 {{ holdingEditId ? '수정' : '추가' }}</h2>
             <form class="pf-form" @submit.prevent="submitHolding">
               <label>종목명<input v-model="hForm.name" type="text" placeholder="예: 삼성전자" :disabled="hSubmitting" /></label>
-              <label>종목코드<input v-model="hForm.ticker" type="text" placeholder="(선택) 예: 005930" :disabled="hSubmitting" /></label>
+              <label>종목코드<input v-model="hForm.ticker" type="text" placeholder="예: 005930 (국내 상장)" :disabled="hSubmitting" /></label>
-              <label>현재가<input v-model.number="hForm.currentPrice" type="number" min="0" placeholder="(수동 갱신)" :disabled="hSubmitting" /></label>
+              <label>현재가<input v-model.number="hForm.currentPrice" type="number" min="0" placeholder="(비우면 시세 갱신으로 자동)" :disabled="hSubmitting" /></label>
+              <p class="pf-form-hint">종목코드(6자리)를 입력하면 <b>시세 갱신</b> 버튼으로 현재가를 자동으로 불러옵니다.</p>
               <p v-if="hError" class="pf-msg err">{{ hError }}</p>
               <div class="pf-buttons">
                 <IconBtn icon="close" title="취소" @click="holdingModal = false" />
@@ -330,6 +369,35 @@ onMounted(load)
   font-weight: 600;
   opacity: 0.8;
 }
+.pf-head-btns {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.refresh-btn {
+  padding: 0.25rem 0.6rem;
+  font-size: 0.78rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.refresh-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.pf-refresh-msg {
+  font-size: 0.78rem;
+  opacity: 0.7;
+  margin: 0 0 0.4rem;
+}
+.pf-form-hint {
+  font-size: 0.76rem;
+  opacity: 0.6;
+  margin: -0.2rem 0 0;
+}
 .pf-add {
   padding: 0.25rem 0.6rem;
   font-size: 0.8rem;
@@ -389,6 +457,12 @@ onMounted(load)
   font-size: 0.76rem;
   opacity: 0.7;
 }
+.h-sub-qty {
+  font-weight: 600;
+}
+.h-sub-price {
+  margin-top: 1px;
+}
 .noprice {
   color: #e67e22;
 }

src/views/account/RecurringView.vue

@@ -20,7 +20,9 @@ const form = reactive({
   amount: null,
   category: '',
   memo: '',
+  walletKind: '',
   walletId: '',
+  toWalletKind: '',
   toWalletId: '',
   frequency: 'MONTHLY',
   dayOfMonth: 1,
@@ -39,6 +41,23 @@ const categoryOptions = computed(() => {
   if (form.category && !names.includes(form.category)) names.unshift(form.category)
   return names
 })
+// 계좌/카드 — 종류(계좌/카드)를 라디오로 고르고, 그 종류만 셀렉트로 노출
+const WALLET_KINDS = [
+  { value: 'BANK', label: '계좌' },
+  { value: 'CARD', label: '카드' },
+]
+const walletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.walletKind))
+const toWalletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.toWalletKind))
+function walletKindOf(id) {
+  const w = wallets.value.find((x) => x.id === id)
+  return w ? w.type : ''
+}
+function onWalletKindChange() {
+  form.walletId = ''
+}
+function onToWalletKindChange() {
+  form.toWalletId = ''
+}
 
 function won(n) {
   return (n ?? 0).toLocaleString('ko-KR')
@@ -52,6 +71,39 @@ function freqLabel(r) {
   if (r.frequency === 'MONTHLY') return `매월 ${r.dayOfMonth}일`
   return `매년 ${r.monthOfYear}/${r.dayOfMonth}`
 }
+
+// 결제일 정렬 키 (작을수록 먼저): 매일<매주(요일)<매월(일) / 매년(월·일)
+function payKey(r) {
+  if (r.frequency === 'DAILY') return 0
+  if (r.frequency === 'WEEKLY') return r.dayOfWeek || 0
+  if (r.frequency === 'YEARLY') return (r.monthOfYear || 0) * 100 + (r.dayOfMonth || 0)
+  return r.dayOfMonth || 0 // MONTHLY
+}
+
+// 월간/년간 분리 → 카테고리별 그룹 → 결제일순 정렬 → 소계·합계 (활성 건만 합산, 중지 건은 표시만)
+const PERIODS = [
+  { key: 'MONTH', label: '월간 거래', freqs: ['DAILY', 'WEEKLY', 'MONTHLY'] },
+  { key: 'YEAR', label: '년간 거래', freqs: ['YEARLY'] },
+]
+const grouped = computed(() =>
+  PERIODS.map((p) => {
+    const items = recurrings.value.filter((r) => p.freqs.includes(r.frequency))
+    const catMap = {}
+    for (const r of items) {
+      const cat = r.type === 'TRANSFER' ? '이체' : r.category || '미분류'
+      if (!catMap[cat]) catMap[cat] = { category: cat, items: [], subtotal: 0, minKey: Infinity }
+      catMap[cat].items.push(r)
+      catMap[cat].minKey = Math.min(catMap[cat].minKey, payKey(r))
+      if (r.active) catMap[cat].subtotal += r.amount || 0
+    }
+    // 카테고리 안 항목은 결제일순, 카테고리도 가장 이른 결제일순으로 정렬
+    const cats = Object.values(catMap)
+    cats.forEach((c) => c.items.sort((a, b) => payKey(a) - payKey(b)))
+    cats.sort((a, b) => a.minKey - b.minKey || a.category.localeCompare(b.category, 'ko'))
+    const total = items.filter((r) => r.active).reduce((s, r) => s + (r.amount || 0), 0)
+    return { ...p, cats, total, count: items.length }
+  }).filter((g) => g.count > 0),
+)
 function todayStr() {
   const d = new Date()
   return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
@@ -79,7 +131,7 @@ async function load() {
 async function runNow() {
   try {
     const res = await accountApi.runRecurrings()
-    alert(`${res.generated}건의 정기 거래가 반영되었습니다.`)
+    alert(`${res.generated}건의 고정 지출가 반영되었습니다.`)
     await load()
   } catch (e) {
     alert(e.response?.data?.message || '반영에 실패했습니다.')
@@ -90,7 +142,7 @@ function openCreate() {
   editId.value = null
   Object.assign(form, {
     title: '', type: 'EXPENSE', amount: null, category: '', memo: '',
-    walletId: '', toWalletId: '', frequency: 'MONTHLY', dayOfMonth: 1, dayOfWeek: 1,
+    walletKind: '', walletId: '', toWalletKind: '', toWalletId: '', frequency: 'MONTHLY', dayOfMonth: 1, dayOfWeek: 1,
     monthOfYear: 1, startDate: todayStr(), endDate: '', active: true,
   })
   formError.value = null
@@ -100,7 +152,8 @@ function openEdit(r) {
   editId.value = r.id
   Object.assign(form, {
     title: r.title, type: r.type, amount: r.amount, category: r.category || '', memo: r.memo || '',
-    walletId: r.walletId || '', toWalletId: r.toWalletId || '', frequency: r.frequency,
+    walletKind: walletKindOf(r.walletId), walletId: r.walletId || '',
+    toWalletKind: walletKindOf(r.toWalletId), toWalletId: r.toWalletId || '', frequency: r.frequency,
     dayOfMonth: r.dayOfMonth || 1, dayOfWeek: r.dayOfWeek || 1, monthOfYear: r.monthOfYear || 1,
     startDate: r.startDate, endDate: r.endDate || '', active: r.active,
   })
@@ -156,7 +209,7 @@ async function submit() {
 }
 
 async function remove(r) {
-  if (!confirm(`'${r.title}' 정기 거래를 삭제할까요? (이미 생성된 내역은 유지됩니다)`)) return
+  if (!confirm(`'${r.title}' 고정 지출를 삭제할까요? (이미 생성된 내역은 유지됩니다)`)) return
   try {
     await accountApi.removeRecurring(r.id)
     await load()
@@ -171,11 +224,11 @@ onMounted(load)
 <template>
   <section class="recur">
     <header class="head">
-      <h1>정기 거래</h1>
+      <h1>고정 지출</h1>
       <div class="head-actions">
         <IconBtn icon="refresh" title="지금 반영" @click="runNow" />
         <IconBtn icon="back" title="가계부로" @click="router.push('/account')" />
-        <IconBtn icon="plus" title="정기 거래 추가" variant="primary" @click="openCreate" />
+        <IconBtn icon="plus" title="고정 지출 추가" variant="primary" @click="openCreate" />
       </div>
     </header>
     <p class="hint">등록한 주기에 맞춰 가계부 진입 시 자동으로 내역이 생성됩니다. (중복 없이)</p>
@@ -183,26 +236,38 @@ onMounted(load)
     <p v-if="error" class="msg error">{{ error }}</p>
     <p v-if="loading" class="msg">불러오는 중...</p>
 
-    <ul v-else-if="recurrings.length" class="recur-list">
+    <div v-else-if="recurrings.length" class="recur-groups">
-      <li v-for="r in recurrings" :key="r.id" class="recur-row" :class="{ inactive: !r.active }">
+      <section v-for="g in grouped" :key="g.key" class="period-group">
-        <div class="info">
+        <div class="period-head">
-          <div class="line1">
+          <h2>{{ g.label }}</h2>
-            <span class="title">{{ r.title }}</span>
+          <span class="period-total">합계 {{ won(g.total) }}</span>
-            <span class="type-badge" :class="r.type.toLowerCase()">{{ typeLabel(r.type) }}</span>
-            <span v-if="!r.active" class="off">중지</span>
-          </div>
-          <div class="sub">
-            {{ freqLabel(r) }} · {{ won(r.amount) }}<template v-if="r.category"> · {{ r.category }}</template>
-          </div>
-          <div v-if="r.nextDate" class="next">다음 {{ r.nextDate }}</div>
         </div>
-        <div class="actions">
+        <div v-for="c in g.cats" :key="c.category" class="cat-group">
-          <IconBtn icon="edit" title="수정" size="sm" @click="openEdit(r)" />
+          <div class="cat-head">
-          <IconBtn icon="trash" title="삭제" variant="danger" size="sm" @click="remove(r)" />
+            <span class="cat-name">{{ c.category }}</span>
+            <span class="cat-subtotal">소계 {{ won(c.subtotal) }}</span>
+          </div>
+          <ul class="recur-list">
+            <li v-for="r in c.items" :key="r.id" class="recur-row" :class="{ inactive: !r.active }">
+              <div class="info">
+                <div class="line1">
+                  <span class="title">{{ r.title }}</span>
+                  <span class="type-badge" :class="r.type.toLowerCase()">{{ typeLabel(r.type) }}</span>
+                  <span v-if="!r.active" class="off">중지</span>
+                </div>
+                <div class="sub">{{ freqLabel(r) }} · {{ won(r.amount) }}</div>
+                <div v-if="r.nextDate" class="next">다음 {{ r.nextDate }}</div>
+              </div>
+              <div class="actions">
+                <IconBtn icon="edit" title="수정" size="sm" @click="openEdit(r)" />
+                <IconBtn icon="trash" title="삭제" variant="danger" size="sm" @click="remove(r)" />
+              </div>
+            </li>
+          </ul>
         </div>
-      </li>
+      </section>
-    </ul>
+    </div>
-    <p v-else-if="!loading" class="msg">등록된 정기 거래가 없습니다.</p>
+    <p v-else-if="!loading" class="msg">등록된 고정 지출가 없습니다.</p>
 
     <!-- 추가/수정 모달 -->
     <Teleport to="body">
@@ -210,7 +275,7 @@ onMounted(load)
         <div v-if="formOpen" class="modal-backdrop" @click.self="formOpen = false">
           <div class="modal" role="dialog" aria-modal="true">
             <button class="close" type="button" @click="formOpen = false">×</button>
-            <h2>정기 거래 {{ editId ? '수정' : '추가' }}</h2>
+            <h2>고정 지출 {{ editId ? '수정' : '추가' }}</h2>
 
             <form class="recur-form" @submit.prevent="submit">
               <label>이름<input v-model="form.title" type="text" placeholder="예: 월세, 급여" :disabled="submitting" /></label>
@@ -223,18 +288,40 @@ onMounted(load)
               </label>
               <label>금액<input v-model.number="form.amount" type="number" min="0" placeholder="원" :disabled="submitting" /></label>
 
-              <label>{{ form.type === 'TRANSFER' ? '출금 계좌' : '계좌/카드' }}
+              <div class="field">
-                <select v-model="form.walletId" :disabled="submitting">
+                <div class="field-row">
-                  <option value="">(선택 안 함)</option>
+                  <span class="field-label">{{ form.type === 'TRANSFER' ? '출금 계좌' : '계좌/카드' }}</span>
-                  <option v-for="w in wallets" :key="w.id" :value="w.id">{{ w.name }}</option>
+                  <div class="wallet-radios">
-                </select>
+                    <label v-for="k in WALLET_KINDS" :key="k.value" class="radio">
-              </label>
+                      <input type="radio" :value="k.value" v-model="form.walletKind" :disabled="submitting" @change="onWalletKindChange" />
-              <label v-if="form.type === 'TRANSFER'">입금 계좌
+                      {{ k.label }}
-                <select v-model="form.toWalletId" :disabled="submitting">
+                    </label>
+                  </div>
+                </div>
+                <select v-if="form.walletKind" v-model="form.walletId" :disabled="submitting">
                   <option value="">(선택)</option>
-                  <option v-for="w in wallets" :key="w.id" :value="w.id">{{ w.name }}</option>
+                  <option v-for="w in walletsOfKind" :key="w.id" :value="w.id">
+                    {{ w.name }}{{ w.issuer ? ` (${w.issuer})` : '' }}
+                  </option>
                 </select>
-              </label>
+              </div>
+              <div v-if="form.type === 'TRANSFER'" class="field">
+                <div class="field-row">
+                  <span class="field-label">입금 계좌</span>
+                  <div class="wallet-radios">
+                    <label v-for="k in WALLET_KINDS" :key="k.value" class="radio">
+                      <input type="radio" :value="k.value" v-model="form.toWalletKind" :disabled="submitting" @change="onToWalletKindChange" />
+                      {{ k.label }}
+                    </label>
+                  </div>
+                </div>
+                <select v-if="form.toWalletKind" v-model="form.toWalletId" :disabled="submitting">
+                  <option value="">(선택)</option>
+                  <option v-for="w in toWalletsOfKind" :key="w.id" :value="w.id">
+                    {{ w.name }}{{ w.issuer ? ` (${w.issuer})` : '' }}
+                  </option>
+                </select>
+              </div>
               <label v-if="form.type !== 'TRANSFER'">분류
                 <select v-model="form.category" :disabled="submitting">
                   <option value="">(선택)</option>
@@ -325,6 +412,49 @@ button.primary {
   border-color: hsla(160, 100%, 37%, 1);
   color: hsla(160, 100%, 37%, 1);
 }
+.recur-groups {
+  margin-top: 0.5rem;
+}
+.period-group {
+  margin-bottom: 1.5rem;
+}
+.period-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding-bottom: 0.3rem;
+  border-bottom: 2px solid var(--color-border);
+  margin-bottom: 0.5rem;
+}
+.period-head h2 {
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+.period-total {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: hsla(160, 100%, 37%, 1);
+}
+.cat-group {
+  margin-bottom: 0.6rem;
+}
+.cat-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 0.25rem 0.1rem;
+  background: var(--color-background-soft);
+  border-radius: 4px;
+}
+.cat-name {
+  font-size: 0.88rem;
+  font-weight: 600;
+}
+.cat-subtotal {
+  font-size: 0.82rem;
+  font-weight: 600;
+  opacity: 0.8;
+}
 .recur-list {
   list-style: none;
   padding-left: 0;
@@ -463,6 +593,51 @@ button.primary {
 .recur-form label.row input {
   padding: 0;
 }
+/* 계좌/카드 라디오 선택 */
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+.field-row {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+}
+.field-label {
+  font-size: 0.85rem;
+  flex-shrink: 0;
+}
+.wallet-radios {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 0.4rem 0.9rem;
+  padding: 0.1rem 0;
+}
+.wallet-radios .radio {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+.wallet-radios .radio input {
+  padding: 0;
+  width: auto;
+  margin: 0;
+}
+.r-issuer {
+  margin-left: 0.2rem;
+  font-size: 0.72rem;
+  opacity: 0.6;
+}
+.empty-hint {
+  font-size: 0.78rem;
+  opacity: 0.6;
+}
 .buttons {
   display: flex;
   justify-content: flex-end;

src/views/board/BoardDetailView.vue

@@ -7,12 +7,15 @@ import { formatRelative } from '@/utils/datetime'
 import MarkdownViewer from '@/components/editor/MarkdownViewer.vue'
 import MarkdownEditor from '@/components/editor/MarkdownEditor.vue'
 import IconBtn from '@/components/ui/IconBtn.vue'
+import { DEFAULT_BOARD } from '@/constants/boards'
 
 const route = useRoute()
 const router = useRouter()
 const auth = useAuthStore()
 
 const postId = route.params.id
+// 게시판(카테고리): URL 우선, 없으면 글의 category, 그래도 없으면 기본
+const category = computed(() => route.params.category || post.value?.category || DEFAULT_BOARD)
 const post = ref(null)
 const loading = ref(false)
 const error = ref(null)
@@ -49,7 +52,7 @@ async function removePost() {
   if (!confirm('이 게시글을 삭제하시겠습니까?')) return
   try {
     await boardApi.remove(postId)
-    router.replace('/board')
+    router.replace(`/board/${category.value}`)
   } catch (e) {
     alert(e.response?.data?.message || '삭제에 실패했습니다.')
   }
@@ -137,14 +140,14 @@ onMounted(load)
       </div>
 
       <div class="actions">
-        <IconBtn icon="back" title="목록" @click="router.push('/board')" />
+        <IconBtn icon="back" title="목록" @click="router.push(`/board/${category}`)" />
         <div class="right-actions">
           <!-- 관리자 제한/해제 -->
           <button v-if="isAdmin && !post.blocked" type="button" class="warn" @click="blockPost">열람 제한</button>
           <button v-if="isAdmin && post.blocked" type="button" class="warn" @click="unblockPost">제한 해제</button>
           <!-- 작성자/관리자 수정·삭제 -->
           <template v-if="canModifyPost && !restricted">
-            <IconBtn v-if="!post.blocked" icon="edit" title="수정" @click="router.push(`/board/${post.id}/edit`)" />
+            <IconBtn v-if="!post.blocked" icon="edit" title="수정" @click="router.push(`/board/${category}/${post.id}/edit`)" />
             <IconBtn icon="trash" title="삭제" variant="danger" @click="removePost" />
           </template>
         </div>

src/views/board/BoardListView.vue

@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { boardApi } from '@/api/boardApi'
 import { formatRelative } from '@/utils/datetime'
 import { useAuthStore } from '@/stores/auth'
+import { boardLabel, DEFAULT_BOARD } from '@/constants/boards'
 import IconBtn from '@/components/ui/IconBtn.vue'
 
 const route = useRoute()
@@ -11,6 +12,10 @@ const router = useRouter()
 const auth = useAuthStore()
 const isAdmin = computed(() => auth.user?.role === 'ADMIN')
 
+// 현재 게시판(카테고리)
+const category = computed(() => route.params.category || DEFAULT_BOARD)
+const boardTitle = computed(() => boardLabel(category.value))
+
 const posts = ref([])
 const tags = ref([])
 const loading = ref(false)
@@ -38,6 +43,7 @@ async function load() {
   error.value = null
   try {
     const res = await boardApi.list({
+      category: category.value,
       page: page.value,
       size: size.value,
       tag: activeTag.value,
@@ -107,14 +113,9 @@ function clearSearch() {
   pushQuery({ page: 1, tag: activeTag.value })
 }
 
-// 목록 표시 순번: 전체건수 기준 내림차순 (최신글이 큰 번호)
+// 경로(게시판 전환)·쿼리(검색·페이지·뒤로가기)가 바뀌면 상태 동기화 후 재조회
-function rowNumber(index) {
-  return totalElements.value - (page.value - 1) * size.value - index
-}
-
-// 쿼리가 바뀔 때마다(검색·페이지 이동·뒤로가기 포함) 상태 동기화 후 재조회
 watch(
-  () => route.query,
+  () => route.fullPath,
   () => {
     syncFromQuery()
     load()
@@ -128,8 +129,8 @@ onMounted(loadTags)
 <template>
   <section class="board">
     <header class="board-head">
-      <h1>자유게시판</h1>
+      <h1>{{ boardTitle }}</h1>
-      <IconBtn icon="edit" title="글쓰기" variant="primary" @click="router.push('/board/write')" />
+      <IconBtn icon="edit" title="글쓰기" variant="primary" @click="router.push(`/board/${category}/write`)" />
     </header>
 
     <div v-if="tags.length" class="tag-filter">
@@ -155,7 +156,6 @@ onMounted(loadTags)
     <table v-else-if="posts.length" class="post-table">
       <thead>
         <tr>
-          <th class="col-id">번호</th>
           <th>제목</th>
           <th class="col-author">작성자</th>
           <th class="col-num">조회</th>
@@ -163,8 +163,7 @@ onMounted(loadTags)
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(p, index) in posts" :key="p.id" @click="router.push(`/board/${p.id}`)">
+        <tr v-for="p in posts" :key="p.id" @click="router.push(`/board/${category}/${p.id}`)">
-          <td class="col-id">{{ rowNumber(index) }}</td>
           <td>
             <template v-if="p.blocked && !isAdmin">
               <span class="blocked-msg">🚫 관리자에 의해 제한된 게시글입니다.</span>
@@ -291,7 +290,6 @@ button:disabled {
 .post-table tbody tr:hover {
   background: var(--color-background-soft);
 }
-.col-id,
 .col-num {
   width: 60px;
   text-align: center;
@@ -440,20 +438,14 @@ button:disabled {
     font-size: 0.8rem;
     opacity: 0.7;
   }
-  /* 제목(2번째 셀): 첫 줄 전체 */
+  /* 제목(첫 번째 셀): 첫 줄 전체 */
-  .post-table td:nth-child(2) {
+  .post-table td:nth-child(1) {
     order: 0;
     width: 100% !important;
     font-size: 0.97rem;
     opacity: 1;
     font-weight: 500;
   }
-  .post-table .col-id {
-    order: 1;
-  }
-  .post-table .col-id::before {
-    content: '#';
-  }
   .post-table .col-author {
     order: 2;
   }

src/views/board/BoardWriteView.vue

@@ -4,10 +4,12 @@ import { useRoute, useRouter } from 'vue-router'
 import { boardApi } from '@/api/boardApi'
 import MarkdownEditor from '@/components/editor/MarkdownEditor.vue'
 import IconBtn from '@/components/ui/IconBtn.vue'
+import { DEFAULT_BOARD } from '@/constants/boards'
 
 const route = useRoute()
 const router = useRouter()
 
+const category = route.params.category || DEFAULT_BOARD
 const editId = route.params.id || null
 const isEdit = computed(() => !!editId)
 
@@ -62,13 +64,14 @@ async function submit() {
   const payload = {
     title: title.value.trim(),
     content: content.value,
+    category,
     tagIds: selectedTagIds.value,
   }
   try {
     const saved = isEdit.value
       ? await boardApi.update(editId, payload)
       : await boardApi.create(payload)
-    router.replace(`/board/${saved.id}`)
+    router.replace(`/board/${category}/${saved.id}`)
   } catch (e) {
     error.value = e.response?.data?.message || '저장에 실패했습니다.'
   } finally {
@@ -77,8 +80,8 @@ async function submit() {
 }
 
 function cancel() {
-  if (isEdit.value) router.replace(`/board/${editId}`)
+  if (isEdit.value) router.replace(`/board/${category}/${editId}`)
-  else router.replace('/board')
+  else router.replace(`/board/${category}`)
 }
 
 onMounted(async () => {

src/views/settings/AccountInfoView.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+const router = useRouter()
+
+const u = computed(() => auth.user || {})
+const isLocal = computed(() => (u.value.provider || 'LOCAL') === 'LOCAL')
+
+const providerLabel = computed(() => {
+  switch (u.value.provider) {
+    case 'NAVER': return '네이버'
+    case 'LOCAL':
+    default: return '일반(아이디/비밀번호)'
+  }
+})
+const roleLabel = computed(() => (u.value.role === 'ADMIN' ? '관리자' : '일반회원'))
+
+function goEdit() {
+  router.push('/settings/account/edit')
+}
+function goBack() {
+  router.push('/settings')
+}
+</script>
+
+<template>
+  <div class="account-info">
+    <button type="button" class="back" @click="goBack">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M19 12H5" /><path d="M12 19l-7-7 7-7" />
+      </svg>
+      <span>설정</span>
+    </button>
+
+    <h1 class="page-title">계정정보</h1>
+
+    <section class="card">
+      <div class="row">
+        <span class="k">아이디</span>
+        <span class="v">{{ u.loginId || '-' }}</span>
+      </div>
+      <div class="row">
+        <span class="k">이름</span>
+        <span class="v">{{ u.name || '-' }}</span>
+      </div>
+      <div class="row">
+        <span class="k">이메일</span>
+        <span class="v">{{ u.email || '-' }}</span>
+      </div>
+      <div class="row">
+        <span class="k">가입유형</span>
+        <span class="v">{{ providerLabel }}</span>
+      </div>
+      <div class="row">
+        <span class="k">권한</span>
+        <span class="v">{{ roleLabel }}</span>
+      </div>
+    </section>
+
+    <button v-if="isLocal" type="button" class="primary-btn" @click="goEdit">정보변경</button>
+    <p v-else class="hint">소셜 로그인 계정은 앱에서 가입정보를 변경할 수 없습니다.</p>
+  </div>
+</template>
+
+<style scoped>
+.account-info {
+  max-width: 560px;
+  margin: 0 auto;
+}
+.back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  margin-bottom: 0.75rem;
+  padding: 0.3rem 0.1rem;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  opacity: 0.75;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+.back:hover {
+  opacity: 1;
+}
+.back svg {
+  width: 18px;
+  height: 18px;
+}
+.page-title {
+  font-size: 1.4rem;
+  margin-bottom: 1rem;
+}
+.card {
+  background: var(--color-background-soft);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.95rem 1.1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.row:last-child {
+  border-bottom: 0;
+}
+.k {
+  font-size: 0.88rem;
+  opacity: 0.65;
+}
+.v {
+  font-size: 0.95rem;
+  font-weight: 600;
+  text-align: right;
+  word-break: break-all;
+}
+.primary-btn {
+  width: 100%;
+  margin-top: 1.25rem;
+  padding: 0.8rem 1rem;
+  border: 1px solid hsla(160, 100%, 37%, 1);
+  border-radius: 8px;
+  background: hsla(160, 100%, 37%, 1);
+  color: #fff;
+  font-size: 0.98rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.primary-btn:hover {
+  background: hsla(160, 100%, 32%, 1);
+}
+.hint {
+  margin-top: 1.25rem;
+  font-size: 0.85rem;
+  opacity: 0.6;
+  text-align: center;
+}
+</style>

src/views/settings/ProfileEditView.vue

@@ -0,0 +1,238 @@
+<script setup>
+import { reactive, ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { authApi } from '@/api/authApi'
+
+const auth = useAuthStore()
+const router = useRouter()
+
+const step = ref('verify') // 'verify' → 'edit'
+const password = ref('')
+const form = reactive({ name: '', email: '' })
+const loading = ref(false)
+const error = ref('')
+
+onMounted(() => {
+  // 소셜 계정은 비밀번호 인증 불가 → 계정정보로 돌려보냄
+  if ((auth.user?.provider || 'LOCAL') !== 'LOCAL') {
+    router.replace('/settings/account')
+  }
+})
+
+async function verify() {
+  error.value = ''
+  if (!password.value) {
+    error.value = '비밀번호를 입력하세요.'
+    return
+  }
+  loading.value = true
+  try {
+    await authApi.verifyPassword(password.value)
+    // 인증 통과 → 현재 값으로 폼 채우고 변경 화면 진입
+    form.name = auth.user?.name || ''
+    form.email = auth.user?.email || ''
+    step.value = 'edit'
+  } catch (e) {
+    error.value = e.response?.data?.message || '비밀번호 인증에 실패했습니다.'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function save() {
+  error.value = ''
+  const name = form.name.trim()
+  if (!name) {
+    error.value = '이름을 입력하세요.'
+    return
+  }
+  const email = form.email.trim()
+  if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    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('가입정보가 변경되었습니다.')
+    router.push('/settings/account')
+  } catch (e) {
+    error.value = e.response?.data?.message || '가입정보 변경에 실패했습니다.'
+  } finally {
+    loading.value = false
+  }
+}
+
+function cancel() {
+  router.push('/settings/account')
+}
+</script>
+
+<template>
+  <div class="profile-edit">
+    <button type="button" class="back" @click="cancel">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M19 12H5" /><path d="M12 19l-7-7 7-7" />
+      </svg>
+      <span>계정정보</span>
+    </button>
+
+    <h1 class="page-title">가입정보 변경</h1>
+
+    <!-- 1단계: 비밀번호 재인증 -->
+    <form v-if="step === 'verify'" class="card form" @submit.prevent="verify">
+      <p class="guide">본인 확인을 위해 비밀번호를 입력하세요.</p>
+      <label class="field">
+        <span class="flabel">비밀번호</span>
+        <input
+          v-model="password" type="password" autocomplete="current-password"
+          placeholder="현재 비밀번호" :disabled="loading"
+        />
+      </label>
+      <p v-if="error" class="error">{{ error }}</p>
+      <button class="primary-btn" type="submit" :disabled="loading">
+        {{ loading ? '확인 중…' : '확인' }}
+      </button>
+    </form>
+
+    <!-- 2단계: 가입정보 변경 -->
+    <form v-else class="card form" @submit.prevent="save">
+      <label class="field">
+        <span class="flabel">아이디</span>
+        <input :value="auth.user?.loginId" type="text" disabled />
+        <span class="fnote">아이디는 변경할 수 없습니다.</span>
+      </label>
+      <label class="field">
+        <span class="flabel">이름</span>
+        <input v-model="form.name" type="text" maxlength="100" placeholder="이름" :disabled="loading" />
+      </label>
+      <label class="field">
+        <span class="flabel">이메일</span>
+        <input v-model="form.email" type="email" maxlength="255" 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>
+        <button class="primary-btn" type="submit" :disabled="loading">
+          {{ loading ? '저장 중…' : '저장' }}
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.profile-edit {
+  max-width: 560px;
+  margin: 0 auto;
+}
+.back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  margin-bottom: 0.75rem;
+  padding: 0.3rem 0.1rem;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  opacity: 0.75;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+.back:hover {
+  opacity: 1;
+}
+.back svg {
+  width: 18px;
+  height: 18px;
+}
+.page-title {
+  font-size: 1.4rem;
+  margin-bottom: 1rem;
+}
+.card {
+  background: var(--color-background-soft);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: 1.25rem 1.1rem;
+}
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.guide {
+  font-size: 0.88rem;
+  opacity: 0.7;
+  margin: 0;
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+.flabel {
+  font-size: 0.82rem;
+  opacity: 0.7;
+}
+.field input {
+  padding: 0.65rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-size: 0.95rem;
+}
+.field input:disabled {
+  opacity: 0.6;
+}
+.fnote {
+  font-size: 0.74rem;
+  opacity: 0.5;
+}
+.error {
+  margin: 0;
+  color: #c0392b;
+  font-size: 0.85rem;
+}
+.actions {
+  display: flex;
+  gap: 0.6rem;
+}
+.actions .primary-btn {
+  flex: 1;
+}
+.primary-btn {
+  padding: 0.75rem 1rem;
+  border: 1px solid hsla(160, 100%, 37%, 1);
+  border-radius: 8px;
+  background: hsla(160, 100%, 37%, 1);
+  color: #fff;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.primary-btn:hover:not(:disabled) {
+  background: hsla(160, 100%, 32%, 1);
+}
+.primary-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.ghost-btn {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-size: 0.95rem;
+  cursor: pointer;
+}
+.ghost-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>

src/views/settings/SettingsView.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { ref } from 'vue'
+import { RouterLink } from 'vue-router'
+import { Preferences } from '@capacitor/preferences'
+
+const appVersion = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '-'
+const clearing = ref(false)
+
+async function clearAppData() {
+  if (clearing.value) return
+  const ok = window.confirm(
+    '앱에 저장된 모든 데이터(로그인 정보·캐시)를 삭제합니다.\n' +
+    '삭제 후 로그아웃되며 첫 화면으로 이동합니다.\n계속하시겠습니까?',
+  )
+  if (!ok) return
+  clearing.value = true
+  try {
+    try { await Preferences.clear() } catch { /* 네이티브 저장소 없음 무시 */ }
+    try { localStorage.clear() } catch { /* 무시 */ }
+    try { sessionStorage.clear() } catch { /* 무시 */ }
+    try {
+      if (window.caches?.keys) {
+        const keys = await window.caches.keys()
+        await Promise.all(keys.map((k) => window.caches.delete(k)))
+      }
+    } catch { /* 무시 */ }
+  } finally {
+    // 초기화 상태로 첫 화면 재시작
+    window.location.replace('/')
+  }
+}
+</script>
+
+<template>
+  <div class="settings">
+    <h1 class="page-title">설정</h1>
+
+    <section class="card">
+      <RouterLink to="/settings/account" class="row row-link">
+        <div class="row-main">
+          <span class="row-label">계정정보</span>
+          <span class="row-sub">아이디·이름·이메일 확인 및 변경</span>
+        </div>
+        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M9 18l6-6-6-6" />
+        </svg>
+      </RouterLink>
+
+      <div class="row">
+        <div class="row-main">
+          <span class="row-label">앱 버전 정보</span>
+        </div>
+        <span class="row-value">v{{ appVersion }}</span>
+      </div>
+
+      <button type="button" class="row row-btn" :disabled="clearing" @click="clearAppData">
+        <div class="row-main">
+          <span class="row-label danger">App Data 삭제</span>
+          <span class="row-sub">저장된 로그인 정보·캐시를 모두 비웁니다</span>
+        </div>
+        <span class="row-value danger">{{ clearing ? '삭제 중…' : '삭제' }}</span>
+      </button>
+    </section>
+
+    <p class="copyright">© 2026 SlimBudget. All rights reserved.</p>
+  </div>
+</template>
+
+<style scoped>
+.settings {
+  max-width: 560px;
+  margin: 0 auto;
+}
+.page-title {
+  font-size: 1.4rem;
+  margin-bottom: 1rem;
+}
+.card {
+  background: var(--color-background-soft);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 0.75rem;
+  padding: 1rem 1.1rem;
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+.row:last-child {
+  border-bottom: 0;
+}
+.row-link,
+.row-btn {
+  cursor: pointer;
+}
+.row-link:hover,
+.row-btn:hover:not(:disabled) {
+  background: var(--color-background-mute);
+}
+.row-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.row-main {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+.row-label {
+  font-size: 0.98rem;
+  font-weight: 600;
+}
+.row-sub {
+  font-size: 0.78rem;
+  opacity: 0.6;
+}
+.row-value {
+  font-size: 0.9rem;
+  opacity: 0.8;
+  white-space: nowrap;
+}
+.danger {
+  color: #c0392b;
+}
+.chevron {
+  width: 18px;
+  height: 18px;
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+.copyright {
+  margin-top: 1.5rem;
+  text-align: center;
+  font-size: 0.78rem;
+  opacity: 0.5;
+}
+</style>

vite.config.js

@@ -1,11 +1,18 @@
 import { fileURLToPath, URL } from 'node:url'
+import { readFileSync } from 'node:fs'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
+// 앱 버전 정보(설정 > 앱 버전)에 노출 — package.json 을 단일 출처로 사용
+const pkg = JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf-8'))
+
 // https://vite.dev/config/
 export default defineConfig({
+  define: {
+    __APP_VERSION__: JSON.stringify(pkg.version),
+  },
   plugins: [
     vue(),
     vueDevTools(),

vitest.config.js

@@ -0,0 +1,23 @@
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+
+// 단위/컴포넌트 테스트 전용 설정. (앱 빌드 설정은 vite.config.js)
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  define: {
+    // 일부 컴포넌트가 참조하는 빌드타임 상수
+    __APP_VERSION__: JSON.stringify('test'),
+  },
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    include: ['src/**/*.{spec,test}.{js,mjs}'],
+    clearMocks: true,
+  },
+})