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

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

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

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">
-      <li v-for="t in tags" :key="t.id" class="tag-row">
+    <ul v-show="!loading && tags.length" ref="listEl" class="tag-list">
+      <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

@@ -363,7 +363,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 +378,7 @@ function openEdit(e) {
     category: e.category || '',
     amount: e.amount,
     memo: e.memo || '',
-    walletKind: walletKindOf(e.walletId),
+    walletKind: e.walletId ? walletKindOf(e.walletId) : (e.type === 'TRANSFER' ? '' : 'CASH'),
     walletId: e.walletId || '',
     toWalletKind: walletKindOf(e.toWalletId),
     toWalletId: e.toWalletId || '',
@@ -653,21 +653,27 @@ onMounted(async () => {
                   <option v-if="!editId" value="REPAYMENT">상환/납부</option>
                 </select>
               </label>
-              <!-- 계좌 종류 먼저 선택 → 해당 종류만 목록에 -->
-              <label>계좌 종류
-                <select v-model="form.walletKind" :disabled="submitting" @change="onWalletKindChange">
-                  <option value="">{{ form.type === 'INCOME' || form.type === 'EXPENSE' ? '(선택 안 함)' : '(선택)' }}</option>
-                  <option v-for="k in WALLET_KINDS" :key="k.value" :value="k.value">{{ k.label }}</option>
-                </select>
-              </label>
-              <label v-if="form.walletKind">{{ form.type === 'INCOME' || form.type === 'EXPENSE' ? '계좌/카드' : '출금 계좌' }}
-                <select v-model="form.walletId" :disabled="submitting">
-                  <option value="">(선택)</option>
+              <!-- 계좌 종류 먼저 선택(라디오) → 해당 종류만 셀렉트에 -->
+              <div 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.walletKind" :disabled="submitting" @change="onWalletKindChange" />
+                      {{ k.label }}
+                    </label>
+                    <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 +683,23 @@ onMounted(async () => {
                 <small v-if="installmentMonthly" class="install-hint">월 약 {{ won(installmentMonthly) }}원</small>
               </label>
               <template v-if="form.type === 'TRANSFER'">
-                <label>입금 종류
-                  <select v-model="form.toWalletKind" :disabled="submitting" @change="onToWalletKindChange">
-                    <option value="">(선택)</option>
-                    <option v-for="k in WALLET_KINDS" :key="k.value" :value="k.value">{{ k.label }}</option>
-                  </select>
-                </label>
-                <label v-if="form.toWalletKind">입금 계좌
-                  <select v-model="form.toWalletId" :disabled="submitting">
-                    <option value="">(선택)</option>
+                <div 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>
-                </label>
+                </div>
               </template>
 
               <!-- 상환/납부: 대상(대출/카드) + 원금 + 이자 -->
@@ -1071,7 +1080,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 +1219,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 +1334,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 === 'INVEST'"> · 예수금 {{ won(w.deposit) }} · 주식 {{ won(w.stockValue) }}</template>
+              <template v-if="w.type === 'BANK' && w.accountNumber">
+                · {{ 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">
-                증권계좌 입금은 은행→투자 ‘이체’로 기록하세요. 계좌를 펼치면 <b>종목·매수/매도·현재가</b>를 관리할 수 있고, 평가금액·손익은 자동 계산됩니다.
-              </p>
+              <template v-if="form.type === 'INVEST'">
+                <label>현재 평가액 (직접 입력)
+                  <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) }}
-                <template v-if="h.currentPrice != null"> · 현재가 {{ won(h.currentPrice) }}</template>
-                <span v-else class="noprice"> · 현재가 미입력</span>
+                <div class="h-sub-qty">{{ shares(h.quantity) }}주</div>
+                <div class="h-sub-price">
+                  평단 {{ 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.number="hForm.currentPrice" type="number" min="0" placeholder="(수동 갱신)" :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>
+              <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">
-      <li v-for="r in recurrings" :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) }}<template v-if="r.category"> · {{ r.category }}</template>
-          </div>
-          <div v-if="r.nextDate" class="next">다음 {{ r.nextDate }}</div>
+    <div v-else-if="recurrings.length" class="recur-groups">
+      <section v-for="g in grouped" :key="g.key" class="period-group">
+        <div class="period-head">
+          <h2>{{ g.label }}</h2>
+          <span class="period-total">합계 {{ won(g.total) }}</span>
         </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 v-for="c in g.cats" :key="c.category" class="cat-group">
+          <div class="cat-head">
+            <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>
-    </ul>
-    <p v-else-if="!loading" class="msg">등록된 정기 거래가 없습니다.</p>
+      </section>
+    </div>
+    <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' ? '출금 계좌' : '계좌/카드' }}
-                <select v-model="form.walletId" :disabled="submitting">
-                  <option value="">(선택 안 함)</option>
-                  <option v-for="w in wallets" :key="w.id" :value="w.id">{{ w.name }}</option>
-                </select>
-              </label>
-              <label v-if="form.type === 'TRANSFER'">입금 계좌
-                <select v-model="form.toWalletId" :disabled="submitting">
+              <div class="field">
+                <div class="field-row">
+                  <span class="field-label">{{ form.type === 'TRANSFER' ? '출금 계좌' : '계좌/카드' }}</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.walletKind" :disabled="submitting" @change="onWalletKindChange" />
+                      {{ k.label }}
+                    </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;