feat: 가계부·게시판 프론트엔드 구현 + Slim Budget 브랜딩/모바일 대응

- 가계부: 대시보드(예산 대비 지출·분류별 파이·기간별 막대·순자산 추이),
  내역(검색·필터·태그), 계좌(은행/카드/대출/투자), 예산, 분류, 정기 거래,
  태그, 투자 포트폴리오(종목·매수/매도·평가손익)
- 게시판: 목록/상세/작성(마크다운)/댓글/태그/열람제한
- 공통: 인증(Bearer 토큰·401 처리), 모바일 반응형(드로어·아이콘 버튼),
  Slim Budget 브랜딩(로고/타이틀/푸터), 홈 대시보드 자리
- 문서: docs/FRONTEND.md

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

src/components/LoginModal.vue

@@ -0,0 +1,184 @@
+<script setup>
+import { reactive, ref, watch, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { useUiStore } from '@/stores/ui'
+
+const auth = useAuthStore()
+const ui = useUiStore()
+const router = useRouter()
+
+// 로그인 닫고 회원가입 팝업 열기
+function goSignup() {
+  ui.openSignup()
+}
+
+const form = reactive({ loginId: '', password: '' })
+const loading = ref(false)
+const error = ref(null)
+
+// 팝업이 열릴 때마다 입력값 초기화
+watch(
+  () => ui.loginOpen,
+  (open) => {
+    if (open) {
+      form.loginId = ''
+      form.password = ''
+      error.value = null
+    }
+  },
+)
+
+async function handleLogin() {
+  error.value = null
+  if (!form.loginId || !form.password) {
+    error.value = '아이디와 비밀번호를 입력하세요.'
+    return
+  }
+  loading.value = true
+  try {
+    await auth.login(form.loginId, form.password)
+    const redirect = ui.redirectPath
+    ui.closeLogin()
+    if (redirect) router.push(redirect)
+  } catch (e) {
+    error.value = e.response?.data?.message || '로그인에 실패했습니다.'
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleNaverLogin() {
+  alert('네이버 로그인은 준비 중입니다.')
+}
+
+// ESC 로 닫기
+function onKeydown(e) {
+  if (e.key === 'Escape' && ui.loginOpen) ui.closeLogin()
+}
+onMounted(() => window.addEventListener('keydown', onKeydown))
+onUnmounted(() => window.removeEventListener('keydown', onKeydown))
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div v-if="ui.loginOpen" class="modal-backdrop" @click.self="ui.closeLogin()">
+        <div class="modal" role="dialog" aria-modal="true" aria-label="로그인">
+          <button class="close" type="button" aria-label="닫기" @click="ui.closeLogin()">×</button>
+          <h2>로그인</h2>
+
+          <form class="form" @submit.prevent="handleLogin">
+            <input v-model="form.loginId" type="text" placeholder="아이디" autocomplete="username" :disabled="loading" />
+            <input v-model="form.password" type="password" placeholder="비밀번호" autocomplete="current-password" :disabled="loading" />
+            <button class="submit" type="submit" :disabled="loading">{{ loading ? '로그인 중...' : '로그인' }}</button>
+          </form>
+
+          <p v-if="error" class="msg error">{{ error }}</p>
+
+          <button type="button" class="naver" :disabled="loading" @click="handleNaverLogin">
+            네이버로 로그인 (준비 중)
+          </button>
+
+          <p class="links">
+            계정이 없으신가요?
+            <a href="#" @click.prevent="goSignup">회원가입</a>
+          </p>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 1rem;
+}
+.modal {
+  position: relative;
+  width: 100%;
+  max-width: 360px;
+  padding: 1.75rem 1.5rem 1.5rem;
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+}
+.close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.6rem;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+}
+h2 {
+  margin-bottom: 1.25rem;
+  font-size: 1.3rem;
+  text-align: center;
+}
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.form input {
+  padding: 0.6rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+}
+.submit,
+.naver {
+  padding: 0.6rem 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+  cursor: pointer;
+}
+.submit:disabled,
+.naver:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.naver {
+  width: 100%;
+  margin-top: 0.75rem;
+  border-color: #03c75a;
+  color: #03c75a;
+}
+.links {
+  margin-top: 1.25rem;
+  text-align: center;
+  font-size: 0.9rem;
+}
+.msg {
+  margin: 0.75rem 0 0;
+}
+.msg.error {
+  color: #c0392b;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.18s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>