feat: 홈 일별 캘린더·시세 갱신·게시판 카테고리·약관동의·계좌 마스킹

- 홈: 6월 예산 아래 일별 수입/지출 캘린더(마우스오버/탭 시 내역 목록)
- 투자: 시세 자동조회 버튼/진입 시 갱신, 보유종목 2줄 표기, 평가액 직접입력
- 게시판: 커뮤니티/짠테크 수다방/재테크 팁 분리, 사이드바 영역 구분선
- 회원가입: 이용약관·개인정보 수집 동의(필수 체크)
- 보안: 계좌번호 화면 마스킹(끝 4자리+눈 토글)
- 정기→고정지출, 내역/정기 라디오·sticky 저장, 태그 드래그 정렬
- fix: 모바일웹 새로고침 시 로그인 팝업(restore localStorage 우선)

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

src/components/SignupModal.vue

@@ -1,7 +1,8 @@
 <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()
@@ -10,12 +11,29 @@ const form = reactive({ loginId: '', password: '', passwordConfirm: '', name: ''
 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: '' })
+      agree.terms = false
+      agree.privacy = false
+      openDoc.value = ''
       error.value = null
     }
   },
@@ -35,6 +53,10 @@ async function handleSignup() {
     error.value = '비밀번호가 일치하지 않습니다.'
     return
   }
+  if (!agree.terms || !agree.privacy) {
+    error.value = '필수 약관에 동의해 주세요.'
+    return
+  }
   loading.value = true
   try {
     await auth.signup({
@@ -73,6 +95,37 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
             <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" />
+
+            <!-- 약관 동의 -->
+            <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 +156,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 +206,66 @@ 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;
+}
 .links {
   margin-top: 1.25rem;
   text-align: center;

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()
@@ -15,18 +16,34 @@ const ui = useUiStore()
     </div>
     <nav class="menu">
       <RouterLink to="/" class="menu-item">홈</RouterLink>
+
+      <!-- 가계부 영역 -->
       <template v-if="auth.isAuthenticated">
+        <hr class="menu-divider" />
         <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 +91,10 @@ const ui = useUiStore()
   color: var(--color-text);
   font-size: 0.95rem;
 }
-.menu-item.sub {
-  padding: 0.5rem 1.5rem 0.5rem 2.6rem;
-  font-size: 0.88rem;
-  opacity: 0.9;
+.menu-divider {
+  border: 0;
+  border-top: 1px solid var(--color-border);
+  margin: 0.5rem 1.5rem;
 }
 .menu-item:hover {
   background: var(--color-background-mute);
@@ -89,7 +106,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>