feat(ui): 입력 모달 전체화면 슬라이드업 + 셀렉트→뱃지 전면 전환

- AppModal.vue: 전체화면 슬라이드업 공통 모달 (Teleport+Transition)
- CategoryPicker.vue: 대/소분류 아코디언 칩 공통 컴포넌트
  admin 모드(일반: 행 단위+수정/삭제, 순서변경: flat+SortableJS)
- AccountView: 계좌종류·구분 셀렉트→뱃지, 분류→CategoryPicker
- RecurringView: 구분·주기 셀렉트→뱃지, 계좌/카드→뱃지, 분류→CategoryPicker
- AccountWalletView: 카드종류·상환방식 셀렉트→뱃지
- BudgetView: 비고정/고정 라디오→뱃지, 카테고리→CategoryPicker
- CategoryView: 리스트 UI → CategoryPicker 칩 그리드 관리 모드

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

brand/LAUNCH-PROGRESS.md

@@ -99,6 +99,13 @@
 - **월별 예산 + 전월/다음달 복사** — budget에 year/month 추가, 기존 예산은 현재 월로 1회 이관
 - 내역추가 **전체화면 모달**(바깥 닫힘 방지) / 분류 **아코디언**(대분류 삼각형) / 계좌 셀렉트 정리(종류별 안내·이름만)
 - 구글 로그인 **Play 서명 SHA-1 등록**(Google Cloud Android OAuth 클라 추가)
+- **UI 전면 개편 (2026-07-04)** — 모든 입력 모달 전체화면 슬라이드업(AppModal) 적용:
+  - 공통 `CategoryPicker.vue` 컴포넌트 — 대분류/소분류 아코디언 칩 + 인라인 추가 (가계부·고정지출·예산 공통)
+  - `AccountView` 계좌종류·구분 셀렉트→뱃지, 분류→CategoryPicker
+  - `RecurringView` 구분·주기 셀렉트→뱃지, 계좌/카드→뱃지, 분류→CategoryPicker
+  - `AccountWalletView` 카드종류·상환방식 셀렉트→뱃지
+  - `BudgetView` 비고정/고정 라디오→뱃지, 카테고리→CategoryPicker
+  - `CategoryView` 리스트 UI → **칩 그리드 관리 모드** (CategoryPicker admin prop): ✏ 이름수정·✕ 삭제·⠿ 순서변경(토글 후 드래그)
 
 ---
 
@@ -124,9 +131,12 @@
 ## 🔨 빌드 상태
 - **v2** (versionCode 2, 1.0.1): 비공개 테스트 게시·검토통과
 - **v3** (versionCode 3): 위 'v2 이후 추가' 반영 — 빌드 후 비공개 트랙 업로드 (테스터에게 최신본 제공, 14일 카운트 리셋 안 됨)
+  - ⚠️ 서버 `.env`에 `SQL_INIT_MODE=always` 추가 필요 (budget_onetime 테이블 자동 생성)
+  - ⚠️ 가계부 내역 오류 미해결 — 서버 로그 + DevTools 확인 필요
 
 ---
 
 ## 다음 세션 재개 지점
-**테스터 12명 opt-in 진행상황 확인**(업체 의뢰) → 12명 + 14일 연속 충족되면 **프로덕션 액세스 신청**(`production-access-draft.md`).
+1. **테스터 12명 opt-in 진행상황 확인**(업체 의뢰) → 12명 + 14일 연속 충족되면 **프로덕션 액세스 신청**(`production-access-draft.md`)
-v3 AAB를 비공개 트랙에 업로드해 테스터가 최신본을 받게.
+2. **가계부 내역 오류 디버깅** — 서버 로그(`journalctl -u sb-backend`) + DevTools Network 탭
+3. v3 AAB를 비공개 트랙에 업로드해 테스터가 최신본을 받게

src/api/accountApi.js

@@ -104,6 +104,19 @@ const realApi = {
   removeBudget(id) {
     return http.delete(`/account/budgets/${id}`)
   },
+  // 1회성 예산
+  onetimeBudgets() {
+    return http.get('/account/budgets/onetime')
+  },
+  createOnetimeBudget(payload) {
+    return http.post('/account/budgets/onetime', payload)
+  },
+  updateOnetimeBudget(id, payload) {
+    return http.put(`/account/budgets/onetime/${id}`, payload)
+  },
+  removeOnetimeBudget(id) {
+    return http.delete(`/account/budgets/onetime/${id}`)
+  },
   createWallet(payload) {
     return http.post('/account/wallets', payload)
   },

src/components/ui/AppModal.vue

@@ -0,0 +1,88 @@
+<script setup>
+defineProps({
+  modelValue: { type: Boolean, required: true },
+  title: { type: String, default: '' },
+  zIndex: { type: Number, default: 1000 },
+})
+defineEmits(['update:modelValue'])
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="am">
+      <div v-if="modelValue" class="am-wrap" :style="{ zIndex }">
+        <div class="am-panel" role="dialog" aria-modal="true">
+          <button class="am-close" type="button" @click="$emit('update:modelValue', false)">×</button>
+          <div class="am-inner">
+            <h2 v-if="title" class="am-title">{{ title }}</h2>
+            <slot />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.am-wrap {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.am-panel {
+  position: absolute;
+  inset: 0;
+  background: var(--color-background);
+  overflow-y: auto;
+  padding: calc(3rem + env(safe-area-inset-top)) 1.25rem calc(2rem + env(safe-area-inset-bottom));
+}
+
+.am-inner {
+  max-width: 460px;
+  margin: 0 auto;
+}
+
+.am-close {
+  position: absolute;
+  top: calc(0.5rem + env(safe-area-inset-top));
+  right: 0.6rem;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  background: transparent;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--color-text);
+  z-index: 1;
+}
+
+.am-title {
+  margin-bottom: 1.25rem;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+/* ── 슬라이드업 애니메이션 ── */
+.am-enter-active {
+  transition: background 0.25s ease;
+}
+.am-leave-active {
+  transition: background 0.2s ease;
+}
+.am-enter-from,
+.am-leave-to {
+  background: rgba(0, 0, 0, 0);
+}
+.am-enter-active .am-panel {
+  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+}
+.am-leave-active .am-panel {
+  transition: transform 0.22s cubic-bezier(0.4, 0, 1, 1);
+}
+.am-enter-from .am-panel,
+.am-leave-to .am-panel {
+  transform: translateY(100%);
+}
+</style>

src/components/ui/CategoryPicker.vue

@@ -0,0 +1,533 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import Sortable from 'sortablejs'
+import { accountApi } from '@/api/accountApi'
+
+const props = defineProps({
+  modelValue:  { type: String,  default: '' },
+  type:        { type: String,  required: true },
+  categories:  { type: Array,   default: () => [] },
+  disabled:    { type: Boolean, default: false },
+  admin:       { type: Boolean, default: false },
+  reorderable: { type: Boolean, default: false },
+})
+const emit = defineEmits(['update:modelValue', 'category-added', 'rename', 'delete', 'reorder'])
+
+// ─── accordion state ───────────────────────────────────────────────────
+const categoryMajor = ref('')
+
+const majorOptions = computed(() =>
+  props.categories.filter((c) => c.type === props.type && c.parentId == null)
+)
+// select 모드: 4개씩 행 분할
+const majorRows = computed(() => {
+  const rows = []
+  for (let i = 0; i < majorOptions.value.length; i += 4)
+    rows.push(majorOptions.value.slice(i, i + 4))
+  return rows
+})
+// admin 일반 모드: 2개씩 행 분할 (이름+아이콘 공간 확보)
+const adminRows = computed(() => {
+  const rows = []
+  for (let i = 0; i < majorOptions.value.length; i += 2)
+    rows.push(majorOptions.value.slice(i, i + 2))
+  return rows
+})
+const selectedMajorObj = computed(() =>
+  majorOptions.value.find((m) => m.name === categoryMajor.value) ?? null
+)
+function subsByMajor(majorId) {
+  return props.categories.filter((c) => c.parentId === majorId)
+}
+
+// select 모드: 클릭 시 accordion 토글 + 값 emit
+function onMajorClick(major) {
+  if (categoryMajor.value === major.name) {
+    categoryMajor.value = ''
+    emit('update:modelValue', '')
+  } else {
+    categoryMajor.value = major.name
+    if (!subsByMajor(major.id).length) emit('update:modelValue', major.name)
+    else emit('update:modelValue', '')
+  }
+}
+// admin 모드: 클릭 시 accordion 토글만 (값 emit 없음)
+function onAdminMajorClick(major) {
+  categoryMajor.value = categoryMajor.value === major.name ? '' : major.name
+}
+
+// modelValue / type / categories 변경 시 대분류 상태 동기화
+function syncFromValue() {
+  if (props.admin) return
+  const cur = props.modelValue
+  if (!cur) { categoryMajor.value = ''; return }
+  const c = props.categories.find((x) => x.type === props.type && x.name === cur)
+  if (c && c.parentId != null) {
+    const parent = props.categories.find((x) => x.id === c.parentId)
+    categoryMajor.value = parent ? parent.name : cur
+  } else {
+    categoryMajor.value = cur
+  }
+}
+watch(() => [props.modelValue, props.type, props.categories], syncFromValue, { immediate: true })
+
+// ─── 인라인 분류 추가 ──────────────────────────────────────────────────
+const addingCategory = ref(false)
+const addingAsMajor  = ref(true)
+const newCategoryName = ref('')
+const catSubmitting  = ref(false)
+
+function startAddMajor() {
+  if (!props.admin) { categoryMajor.value = ''; emit('update:modelValue', '') }
+  newCategoryName.value = ''
+  addingAsMajor.value = true
+  addingCategory.value = true
+}
+function startAddSub() {
+  newCategoryName.value = ''
+  addingAsMajor.value = false
+  addingCategory.value = true
+}
+function cancelAdd() {
+  addingCategory.value = false
+  newCategoryName.value = ''
+}
+async function confirmAdd() {
+  const name = newCategoryName.value.trim()
+  if (!name) return
+  catSubmitting.value = true
+  const parent = props.categories.find(
+    (c) => c.type === props.type && c.parentId == null && c.name === categoryMajor.value,
+  )
+  const parentId = parent ? parent.id : null
+  try {
+    await accountApi.createCategory({ type: props.type, name, parentId })
+    emit('category-added')
+    if (!props.admin) {
+      emit('update:modelValue', name)
+      if (!parentId) categoryMajor.value = name
+    } else {
+      if (!parentId) categoryMajor.value = name
+    }
+    cancelAdd()
+  } catch (e) {
+    if (e.response?.status === 409) {
+      if (!props.admin) emit('update:modelValue', name)
+      syncFromValue()
+      cancelAdd()
+    } else {
+      alert(e.response?.data?.message || '분류 추가에 실패했습니다.')
+    }
+  } finally {
+    catSubmitting.value = false
+  }
+}
+
+// ─── Admin: 인라인 이름 수정 ───────────────────────────────────────────
+const editingId = ref(null)
+const editingName = ref('')
+const editingCategory = ref(null)
+
+function startEdit(c) {
+  editingId.value = c.id
+  editingName.value = c.name
+  editingCategory.value = c
+  nextTick(() => {
+    const input = document.querySelector('.adm-edit-input')
+    if (input) input.focus()
+  })
+}
+function cancelEdit() {
+  editingId.value = null
+  editingName.value = ''
+  editingCategory.value = null
+}
+function confirmEdit() {
+  const name = editingName.value.trim()
+  if (name && editingCategory.value && name !== editingCategory.value.name) {
+    emit('rename', editingCategory.value, name)
+  }
+  cancelEdit()
+}
+
+// ─── Admin: SortableJS (순서변경 모드에서만 활성) ─────────────────────
+const majorGridEl = ref(null)
+const subGridEl   = ref(null)
+let majorSortable = null
+let subSortable   = null
+
+function destroySortables() {
+  majorSortable?.destroy(); majorSortable = null
+  subSortable?.destroy();   subSortable   = null
+}
+function initMajorSortable() {
+  if (!props.admin || !props.reorderable || !majorGridEl.value) return
+  majorSortable?.destroy()
+  majorSortable = Sortable.create(majorGridEl.value, {
+    handle: '.adm-handle',
+    draggable: '.admin-chip',
+    animation: 150,
+    onEnd: () => {
+      const ids = [...majorGridEl.value.querySelectorAll(':scope > .admin-chip')]
+        .map((el) => Number(el.dataset.id))
+      emit('reorder', ids)
+    },
+  })
+}
+function initSubSortable() {
+  if (!props.admin || !props.reorderable || !subGridEl.value) return
+  subSortable?.destroy()
+  subSortable = Sortable.create(subGridEl.value, {
+    handle: '.adm-handle',
+    draggable: '.admin-chip',
+    animation: 150,
+    onEnd: () => {
+      const ids = [...subGridEl.value.querySelectorAll(':scope > .admin-chip')]
+        .map((el) => Number(el.dataset.id))
+      if (ids.length) emit('reorder', ids)
+    },
+  })
+}
+
+watch(majorGridEl, (el) => { if (el && props.admin && props.reorderable) initMajorSortable() })
+watch(subGridEl,   (el) => { if (el && props.admin && props.reorderable) initSubSortable() })
+watch(
+  () => [props.admin, props.reorderable, props.categories],
+  async () => {
+    if (!props.admin || !props.reorderable) { destroySortables(); return }
+    await nextTick()
+    initMajorSortable()
+    initSubSortable()
+  },
+)
+
+onBeforeUnmount(destroySortables)
+</script>
+
+<template>
+  <!-- ═══ SELECT MODE ══════════════════════════════════════════ -->
+  <template v-if="!admin">
+    <div v-if="!addingCategory" class="cat-picker">
+      <template v-for="(row, rowIdx) in majorRows" :key="rowIdx">
+        <div class="acc-major-grid">
+          <button
+            v-for="m in row" :key="m.id"
+            type="button" class="acc-chip major"
+            :class="{ active: categoryMajor === m.name }"
+            :disabled="disabled"
+            @click="onMajorClick(m)"
+          >{{ m.name }}</button>
+        </div>
+        <div
+          v-if="selectedMajorObj && row.some(m => m.id === selectedMajorObj.id)"
+          class="acc-sub-grid"
+        >
+          <button
+            v-for="s in subsByMajor(selectedMajorObj.id)" :key="s.id"
+            type="button" class="acc-chip sub"
+            :class="{ active: modelValue === s.name }"
+            :disabled="disabled"
+            @click="$emit('update:modelValue', s.name)"
+          >{{ s.name }}</button>
+          <button type="button" class="acc-chip add-chip sub-add" :disabled="disabled" @click="startAddSub">+ 소분류</button>
+        </div>
+      </template>
+      <button type="button" class="acc-chip add-chip" :disabled="disabled" @click="startAddMajor">+ 대분류</button>
+    </div>
+    <div v-else class="cat-input">
+      <input
+        v-model="newCategoryName" type="text"
+        :placeholder="addingAsMajor
+          ? (type === 'EXPENSE' ? '새 지출 대분류' : '새 수입 대분류')
+          : `${categoryMajor} > 새 소분류`"
+        :disabled="catSubmitting"
+        @keyup.enter.prevent="confirmAdd"
+      />
+      <button type="button" class="cat-add-btn primary" :disabled="catSubmitting" @click="confirmAdd">확인</button>
+      <button type="button" class="cat-add-btn" :disabled="catSubmitting" @click="cancelAdd">취소</button>
+    </div>
+  </template>
+
+  <!-- ═══ ADMIN MODE ════════════════════════════════════════════ -->
+  <template v-else>
+    <div v-if="!addingCategory" class="cat-picker">
+
+      <!-- ─── 일반 모드: 행 단위, 소분류 정위치 ─────────────── -->
+      <template v-if="!reorderable">
+        <template v-for="(row, rowIdx) in adminRows" :key="rowIdx">
+          <div class="acc-major-grid">
+            <div
+              v-for="m in row" :key="m.id"
+              class="acc-chip major admin-chip"
+              :class="{ active: categoryMajor === m.name }"
+              @click="onAdminMajorClick(m)"
+            >
+              <template v-if="editingId === m.id">
+                <input
+                  v-model="editingName" class="adm-edit-input"
+                  @keyup.enter.stop="confirmEdit" @keyup.escape="cancelEdit" @click.stop
+                />
+                <button type="button" class="adm-ok" @mousedown.prevent @click.stop="confirmEdit">✓</button>
+              </template>
+              <span v-else class="adm-label">{{ m.name }}</span>
+              <button v-if="editingId !== m.id" type="button" class="adm-edit-btn" title="이름 수정" @click.stop="startEdit(m)">✏</button>
+              <button type="button" class="adm-del" title="삭제" @click.stop="$emit('delete', m)">✕</button>
+            </div>
+          </div>
+          <!-- 이 행에 선택된 대분류가 있을 때만 바로 아래에 소분류 트레이 노출 -->
+          <div
+            v-if="selectedMajorObj && row.some(m => m.id === selectedMajorObj.id)"
+            class="acc-sub-grid adm-sub-grid"
+          >
+            <div
+              v-for="s in subsByMajor(selectedMajorObj.id)" :key="s.id"
+              class="acc-chip sub admin-chip"
+              :data-id="s.id"
+            >
+              <template v-if="editingId === s.id">
+                <input
+                  v-model="editingName" class="adm-edit-input"
+                  @keyup.enter.stop="confirmEdit" @keyup.escape="cancelEdit" @click.stop
+                />
+                <button type="button" class="adm-ok" @mousedown.prevent @click.stop="confirmEdit">✓</button>
+              </template>
+              <span v-else class="adm-label">{{ s.name }}</span>
+              <button v-if="editingId !== s.id" type="button" class="adm-edit-btn" title="이름 수정" @click.stop="startEdit(s)">✏</button>
+              <button type="button" class="adm-del" title="삭제" @click.stop="$emit('delete', s)">✕</button>
+            </div>
+            <button type="button" class="acc-chip add-chip sub-add" @click="startAddSub">+ 소분류</button>
+          </div>
+        </template>
+        <button type="button" class="acc-chip add-chip" @click="startAddMajor">+ 대분류</button>
+      </template>
+
+      <!-- ─── 순서변경 모드: flat 그리드 + SortableJS ──────── -->
+      <template v-else>
+        <div class="acc-major-grid adm-grid" ref="majorGridEl">
+          <div
+            v-for="m in majorOptions" :key="m.id"
+            class="acc-chip major admin-chip"
+            :class="{ active: categoryMajor === m.name }"
+            :data-id="m.id"
+            @click="onAdminMajorClick(m)"
+          >
+            <span class="adm-handle" @click.stop>⠿</span>
+            <span class="adm-label">{{ m.name }}</span>
+          </div>
+        </div>
+        <!-- 선택된 대분류의 소분류 순서 변경 -->
+        <div
+          v-if="selectedMajorObj"
+          class="acc-sub-grid adm-sub-grid"
+          ref="subGridEl"
+          :data-major="selectedMajorObj.id"
+        >
+          <div
+            v-for="s in subsByMajor(selectedMajorObj.id)" :key="s.id"
+            class="acc-chip sub admin-chip"
+            :data-id="s.id"
+          >
+            <span class="adm-handle" @click.stop>⠿</span>
+            <span class="adm-label">{{ s.name }}</span>
+          </div>
+        </div>
+      </template>
+
+    </div>
+    <div v-else class="cat-input">
+      <input
+        v-model="newCategoryName" type="text"
+        :placeholder="addingAsMajor
+          ? (type === 'EXPENSE' ? '새 지출 대분류' : '새 수입 대분류')
+          : `${categoryMajor} > 새 소분류`"
+        :disabled="catSubmitting"
+        @keyup.enter.prevent="confirmAdd"
+      />
+      <button type="button" class="cat-add-btn primary" :disabled="catSubmitting" @click="confirmAdd">확인</button>
+      <button type="button" class="cat-add-btn" :disabled="catSubmitting" @click="cancelAdd">취소</button>
+    </div>
+  </template>
+</template>
+
+<style scoped>
+.cat-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.acc-major-grid,
+.acc-sub-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+.acc-sub-grid {
+  padding: 0.45rem;
+  border-radius: 0 6px 6px 6px;
+  background: var(--color-background-mute);
+  border-left: 3px solid hsla(160, 100%, 37%, 0.4);
+}
+.acc-chip {
+  flex: 1 1 calc(25% - 0.35rem);
+  min-width: 0;
+  padding: 0.38rem 0.4rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 0.82rem;
+  color: var(--color-text);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.acc-chip:disabled { opacity: 0.45; cursor: not-allowed; }
+.acc-chip.major.active {
+  border-color: hsla(160, 100%, 37%, 1);
+  background: hsla(160, 100%, 37%, 0.1);
+  color: hsla(160, 100%, 37%, 1);
+  font-weight: 600;
+}
+.acc-chip.sub { background: transparent; }
+.acc-chip.sub.active {
+  border-color: hsla(160, 100%, 37%, 1);
+  background: hsla(160, 100%, 37%, 0.1);
+  color: hsla(160, 100%, 37%, 1);
+  font-weight: 600;
+}
+.acc-chip.add-chip {
+  opacity: 0.55;
+  border-style: dashed;
+}
+.acc-chip.add-chip.sub-add { flex: 0 0 auto; }
+
+/* ── admin 칩 공통 ──────────────────────────────────────── */
+/* 2개씩 한 줄 (이름+아이콘 공간 확보) */
+.admin-chip {
+  flex: 1 1 calc(50% - 0.35rem) !important;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.32rem 0.4rem;
+  text-align: left;
+  cursor: default;
+  overflow: visible;
+}
+.adm-handle {
+  flex-shrink: 0;
+  cursor: grab;
+  color: var(--color-text);
+  opacity: 0.35;
+  font-size: 0.85rem;
+  touch-action: none;
+  user-select: none;
+  line-height: 1;
+}
+.adm-handle:active { cursor: grabbing; }
+.adm-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.adm-edit-input {
+  flex: 1;
+  min-width: 0;
+  padding: 0.1rem 0.3rem;
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-size: 0.8rem;
+}
+.adm-ok {
+  flex-shrink: 0;
+  width: 1.3rem;
+  height: 1.3rem;
+  border: 1px solid hsla(160, 100%, 37%, 0.5);
+  border-radius: 3px;
+  background: hsla(160, 100%, 37%, 0.1);
+  color: hsla(160, 100%, 37%, 1);
+  font-size: 0.65rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.adm-edit-btn {
+  flex-shrink: 0;
+  width: 1.3rem;
+  height: 1.3rem;
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  background: transparent;
+  color: var(--color-text);
+  opacity: 0.45;
+  font-size: 0.65rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.adm-edit-btn:hover { opacity: 0.9; }
+.adm-del {
+  flex-shrink: 0;
+  width: 1.3rem;
+  height: 1.3rem;
+  border: 1px solid rgba(192, 57, 43, 0.3);
+  border-radius: 3px;
+  background: rgba(192, 57, 43, 0.06);
+  color: #c0392b;
+  font-size: 0.65rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.adm-del:hover { background: rgba(192, 57, 43, 0.15); }
+
+.adm-sub-grid {
+  gap: 0.3rem;
+  background: var(--color-background-mute);
+  border-left: 3px solid hsla(160, 100%, 37%, 0.4);
+  border-radius: 0 6px 6px 6px;
+  padding: 0.45rem;
+}
+/* 소분류 칩은 트레이 배경이 보이도록 투명 처리 */
+.adm-sub-grid .admin-chip {
+  background: transparent;
+}
+
+/* ── 인라인 추가 입력 ──────────────────────────────────── */
+.cat-input {
+  display: flex;
+  gap: 0.35rem;
+  align-items: center;
+}
+.cat-input input {
+  flex: 1;
+  min-width: 0;
+  padding: 0.45rem 0.7rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+  font-size: 0.85rem;
+}
+.cat-add-btn {
+  padding: 0.38rem 0.7rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+  font-size: 0.82rem;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.cat-add-btn.primary {
+  border-color: hsla(160, 100%, 37%, 1);
+  color: hsla(160, 100%, 37%, 1);
+}
+.cat-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+</style>

src/views/account/AccountView.vue

@@ -6,6 +6,7 @@ import { useAuthStore } from '@/stores/auth'
 import { useDialog } from '@/composables/dialog'
 import { appLock } from '@/composables/appLock'
 import IconBtn from '@/components/ui/IconBtn.vue'
+import CategoryPicker from '@/components/ui/CategoryPicker.vue'
 import { imageToBlob, parseReceiptText } from '@/utils/receiptOcr'
 import { cardNotif } from '@/native/cardNotif'
 import { CARD_NOTIF_ENABLED } from '@/config/features'
@@ -290,12 +291,19 @@ async function loadWallets() {
 
 // 계좌 종류(콤보) → 해당 종류만 목록에
 const WALLET_KINDS = [
-  { value: 'BANK', label: '계좌' },
+  { value: 'BANK',  label: '계좌' },
-  { value: 'CASH', label: '현금' },
+  { value: 'CASH',  label: '현금' },
-  { value: 'CARD', label: '카드' },
+  { value: 'CARD',  label: '카드' },
-  { value: 'LOAN', label: '대출' },
+  { value: 'LOAN',  label: '대출' },
+  { value: 'MINUS', label: '마이너스' },
   { value: 'INVEST', label: '증권' },
 ]
+const TYPES = [
+  { value: 'EXPENSE',   label: '지출',    cls: 'chip-expense' },
+  { value: 'INCOME',    label: '수입',    cls: 'chip-income' },
+  { value: 'TRANSFER',  label: '이체',    cls: 'chip-transfer' },
+  { value: 'REPAYMENT', label: '상환/납부', cls: 'chip-repay' },
+]
 const walletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.walletKind))
 const toWalletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.toWalletKind))
 // 선택한 계좌 종류 라벨(계좌/현금/카드/대출/증권) — 셀렉트 안내문에 사용
@@ -327,111 +335,12 @@ async function loadCategories() {
     categories.value = []
   }
 }
-// ===== 분류: 대분류 아코디언 → 소분류 선택 =====
-const categoryMajor = ref('') // 펼쳐진 대분류 이름
-// 현재 구분의 대분류 객체 목록
-const majorOptionsData = computed(() =>
-  categories.value.filter((c) => c.type === form.type && c.parentId == null)
-)
-// 대분류를 4개씩 행으로 묶음
-const majorRows = computed(() => {
-  const items = majorOptionsData.value
-  const rows = []
-  for (let i = 0; i < items.length; i += 4) rows.push(items.slice(i, i + 4))
-  return rows
-})
-// 현재 펼쳐진 대분류 객체
-const selectedMajorObj = computed(() =>
-  majorOptionsData.value.find((m) => m.name === categoryMajor.value) ?? null
-)
-
-// 특정 대분류의 소분류 목록
-function subsByMajor(majorId) {
-  return categories.value.filter((c) => c.parentId === majorId)
-}
-// 대분류 클릭: 소분류 있으면 펼침 토글, 없으면 바로 선택
-function onMajorClick(major) {
-  if (categoryMajor.value === major.name) {
-    categoryMajor.value = ''
-    form.category = ''
-  } else {
-    categoryMajor.value = major.name
-    if (!subsByMajor(major.id).length) form.category = major.name
-    else form.category = ''
-  }
-}
-// form.category 로부터 대분류 추론 (편집 진입 시)
-function syncCategoryMajor() {
-  const cur = form.category
-  if (!cur) {
-    categoryMajor.value = ''
-    return
-  }
-  const c = categories.value.find((x) => x.type === form.type && x.name === cur)
-  if (c && c.parentId != null) {
-    const parent = categories.value.find((x) => x.id === c.parentId)
-    categoryMajor.value = parent ? parent.name : cur
-  } else {
-    categoryMajor.value = cur
-  }
-}
-
 // 필터용 전체 분류명 (중복 제거)
 const allCategoryNames = computed(() => [...new Set(categories.value.map((c) => c.name))])
 
-// 모달 내 분류 인라인 추가
-const addingCategory = ref(false)
-const addingAsMajor = ref(true) // true=대분류 추가, false=소분류 추가
-const newCategoryName = ref('')
-const catSubmitting = ref(false)
-function startAddMajorCategory() {
-  categoryMajor.value = ''
-  form.category = ''
-  newCategoryName.value = ''
-  addingAsMajor.value = true
-  addingCategory.value = true
-}
-function startAddSubCategory() {
-  newCategoryName.value = ''
-  addingAsMajor.value = false
-  addingCategory.value = true
-}
-function cancelAddCategory() {
-  addingCategory.value = false
-  newCategoryName.value = ''
-}
-async function confirmAddCategory() {
-  const name = newCategoryName.value.trim()
-  if (!name) return
-  catSubmitting.value = true
-  // 대분류가 선택돼 있으면 그 아래 소분류로 추가, 아니면 대분류로 추가
-  const parent = categories.value.find(
-    (c) => c.type === form.type && c.parentId == null && c.name === categoryMajor.value,
-  )
-  const parentId = parent ? parent.id : null
-  try {
-    await accountApi.createCategory({ type: form.type, name, parentId })
-    await loadCategories()
-    form.category = name
-    if (!parentId) categoryMajor.value = name // 새 대분류면 대분류로 선택
-    cancelAddCategory()
-  } catch (e) {
-    if (e.response?.status === 409) {
-      // 이미 있는 분류면 그대로 선택
-      form.category = name
-      syncCategoryMajor()
-      cancelAddCategory()
-    } else {
-      alert(e.response?.data?.message || '분류 추가에 실패했습니다.')
-    }
-  } finally {
-    catSubmitting.value = false
-  }
-}
 // 구분(수입/지출/이체) 변경 시 분류 초기화
 function onTypeChange() {
   form.category = ''
-  categoryMajor.value = ''
 }
 
 // 태그 (태그 관리에 등록된 태그 선택)
@@ -563,8 +472,6 @@ function openCreate() {
   editingPending.value = false
   Object.assign(form, { entryDate: todayStr(), type: 'EXPENSE', category: '', amount: null, memo: '', walletKind: 'BANK', walletId: '', toWalletKind: '', toWalletId: '', principal: null, interest: null, annualFee: null, installmentMonths: '', currency: 'KRW', foreignAmount: null, rate: null })
   selectedTagIds.value = []
-  syncCategoryMajor()
-  cancelAddCategory()
   formError.value = null
   formInfo.value = ''
   formOpen.value = true
@@ -598,8 +505,6 @@ function openEdit(e) {
   const nameToId = {}
   tagOptions.value.forEach((t) => (nameToId[t.name] = t.id))
   selectedTagIds.value = (e.tags || []).map((n) => nameToId[n]).filter(Boolean)
-  syncCategoryMajor()
-  cancelAddCategory()
   pasteDetected.value = null
   pasteModalOpen.value = false
   pasteText.value = ''
@@ -1084,7 +989,7 @@ onMounted(async () => {
 
     <!-- 추가/수정 모달 -->
     <Teleport to="body">
-      <Transition name="fade">
+      <Transition name="slide-up">
         <div v-if="formOpen" class="modal-backdrop entry-backdrop">
           <div class="modal entry-modal" role="dialog" aria-modal="true">
             <button class="close" type="button" @click="formOpen = false">×</button>
@@ -1122,24 +1027,26 @@ onMounted(async () => {
               </div>
 
               <label>거래일<input v-model="form.entryDate" type="date" :disabled="submitting" /></label>
-              <label>구분
+              <!-- 구분 배지 -->
-                <select v-model="form.type" :disabled="submitting" @change="onTypeChange">
-                  <option value="EXPENSE">지출</option>
-                  <option value="INCOME">수입</option>
-                  <option value="TRANSFER">이체</option>
-                  <option value="REPAYMENT">상환/납부</option>
-                </select>
-              </label>
-              <!-- 계좌 종류 먼저 선택(라디오) → 해당 종류만 셀렉트에 -->
               <div class="field">
-                <div class="field-row">
+                <span class="field-label">구분</span>
-                  <span class="field-label">계좌 종류</span>
+                <div class="type-chips">
-                  <div class="wallet-radios">
+                  <button v-for="t in TYPES" :key="t.value" type="button"
-                    <label v-for="k in WALLET_KINDS" :key="k.value" class="radio">
+                          class="chip" :class="[t.cls, { active: form.type === t.value }]"
-                      <input type="radio" :value="k.value" v-model="form.walletKind" :disabled="submitting" @change="onWalletKindChange" />
+                          :disabled="submitting" @click="form.type = t.value; onTypeChange()">
-                      {{ k.label }}
+                    {{ t.label }}
-                    </label>
+                  </button>
-                  </div>
+                </div>
+              </div>
+              <!-- 계좌 종류 먼저 선택(배지) → 해당 종류만 셀렉트에 -->
+              <div class="field">
+                <span class="field-label">계좌 종류</span>
+                <div class="wallet-chips">
+                  <button v-for="k in WALLET_KINDS" :key="k.value" type="button"
+                          class="chip" :class="{ active: form.walletKind === k.value }"
+                          :disabled="submitting" @click="form.walletKind = k.value; onWalletKindChange()">
+                    {{ k.label }}
+                  </button>
                 </div>
                 <select v-if="form.walletKind" v-model="form.walletId" :disabled="submitting">
                   <option value="">{{ form.walletKind === 'CASH' && (form.type === 'INCOME' || form.type === 'EXPENSE') ? '현금 (계좌 미지정)' : (form.type === 'INCOME' || form.type === 'EXPENSE' ? walletKindLabel + ' 선택' : '출금 계좌 선택') }}</option>
@@ -1158,14 +1065,13 @@ onMounted(async () => {
               </label>
               <template v-if="form.type === 'TRANSFER'">
                 <div class="field">
-                  <div class="field-row">
+                  <span class="field-label">입금 종류</span>
-                    <span class="field-label">입금 종류</span>
+                  <div class="wallet-chips">
-                    <div class="wallet-radios">
+                    <button v-for="k in WALLET_KINDS" :key="k.value" type="button"
-                      <label v-for="k in WALLET_KINDS" :key="k.value" class="radio">
+                            class="chip" :class="{ active: form.toWalletKind === k.value }"
-                        <input type="radio" :value="k.value" v-model="form.toWalletKind" :disabled="submitting" @change="onToWalletKindChange" />
+                            :disabled="submitting" @click="form.toWalletKind = k.value; onToWalletKindChange()">
-                        {{ k.label }}
+                      {{ k.label }}
-                      </label>
+                    </button>
-                    </div>
                   </div>
                   <select v-if="form.toWalletKind" v-model="form.toWalletId" :disabled="submitting">
                     <option value="">입금 계좌 선택</option>
@@ -1218,40 +1124,13 @@ onMounted(async () => {
               </template>
 
               <label v-if="form.type === 'INCOME' || form.type === 'EXPENSE'">분류
-                <div v-if="!addingCategory" class="cat-picker">
+                <CategoryPicker
-                  <!-- 대분류 행별 렌더링: 선택된 대분류가 속한 행 바로 아래 소분류 삽입 -->
+                  v-model="form.category"
-                  <template v-for="(row, rowIdx) in majorRows" :key="rowIdx">
+                  :type="form.type"
-                    <div class="acc-major-grid">
+                  :categories="categories"
-                      <button
+                  :disabled="submitting"
-                        v-for="m in row" :key="m.id"
+                  @category-added="loadCategories"
-                        type="button" class="acc-chip major"
+                />
-                        :class="{ active: categoryMajor === m.name }"
-                        :disabled="submitting"
-                        @click="onMajorClick(m)"
-                      >{{ m.name }}</button>
-                    </div>
-                    <div v-if="selectedMajorObj && row.some(m => m.id === selectedMajorObj.id) && subsByMajor(selectedMajorObj.id).length" class="acc-sub-grid">
-                      <button
-                        v-for="s in subsByMajor(selectedMajorObj.id)" :key="s.id"
-                        type="button" class="acc-chip sub"
-                        :class="{ active: form.category === s.name }"
-                        :disabled="submitting"
-                        @click="form.category = s.name"
-                      >{{ s.name }}</button>
-                      <button type="button" class="acc-chip add-chip sub-add" :disabled="submitting" @click="startAddSubCategory">+ 소분류</button>
-                    </div>
-                  </template>
-                  <button type="button" class="acc-chip add-chip" :disabled="submitting" @click="startAddMajorCategory">+ 대분류</button>
-                </div>
-                <div v-else class="cat-input">
-                  <input
-                    v-model="newCategoryName" type="text"
-                    :placeholder="addingAsMajor ? (form.type === 'EXPENSE' ? '새 지출 대분류' : '새 수입 대분류') : `${categoryMajor} > 새 소분류`"
-                    :disabled="catSubmitting" @keyup.enter.prevent="confirmAddCategory"
-                  />
-                  <button type="button" class="cat-add-btn primary" :disabled="catSubmitting" @click="confirmAddCategory">확인</button>
-                  <button type="button" class="cat-add-btn" :disabled="catSubmitting" @click="cancelAddCategory">취소</button>
-                </div>
               </label>
               <label v-if="!isRepayment" class="amount-label">
                 금액
@@ -1795,6 +1674,27 @@ button.primary {
   margin-left: auto;
   margin-right: auto;
 }
+/* 전체화면 내역 모달 슬라이드업 */
+.slide-up-enter-active {
+  transition: background 0.25s ease;
+}
+.slide-up-leave-active {
+  transition: background 0.2s ease;
+}
+.slide-up-enter-from.entry-backdrop,
+.slide-up-leave-to.entry-backdrop {
+  background: rgba(0, 0, 0, 0);
+}
+.slide-up-enter-active .modal.entry-modal {
+  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+}
+.slide-up-leave-active .modal.entry-modal {
+  transition: transform 0.22s cubic-bezier(0.4, 0, 1, 1);
+}
+.slide-up-enter-from .modal.entry-modal,
+.slide-up-leave-to .modal.entry-modal {
+  transform: translateY(100%);
+}
 .modal {
   position: relative;
   width: 100%;
@@ -1943,112 +1843,48 @@ 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;
+  opacity: 0.7;
 }
-.wallet-radios {
+.type-chips,
-  display: flex;
+.wallet-chips {
-  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;
-}
-.cat-input input {
-  flex: 1;
-  min-width: 0;
-}
-.cat-add-btn {
-  padding: 0.4rem 0.6rem;
-  font-size: 0.8rem;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-.cat-add-btn.primary {
-  border-color: hsla(160, 100%, 37%, 1);
-  color: hsla(160, 100%, 37%, 1);
-}
-/* 분류 칩 그리드 */
-.cat-picker {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
-.acc-major-grid,
-.acc-sub-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 0.35rem;
 }
-.acc-sub-grid {
+.chip {
-  padding: 0.4rem;
+  padding: 0.28rem 0.75rem;
-  border-radius: 6px;
+  border: 1.5px solid var(--color-border);
+  border-radius: 100px;
   background: var(--color-background-soft);
-}
-.acc-chip {
-  flex: 1 1 calc(25% - 0.35rem);
-  min-width: 0;
-  padding: 0.38rem 0.4rem;
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  background: transparent;
-  cursor: pointer;
-  font-size: 0.82rem;
   color: var(--color-text);
-  text-align: center;
+  font-size: 0.82rem;
-  white-space: nowrap;
+  font-weight: 500;
-  overflow: hidden;
+  cursor: pointer;
-  text-overflow: ellipsis;
+  line-height: 1.4;
+  transition: border-color 0.12s, background 0.12s, color 0.12s;
 }
-.acc-chip.major.active {
+.chip:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+/* 구분 배지 active 색상 */
+.chip-expense.active  { border-color: #c0392b; background: #c0392b; color: #fff; }
+.chip-income.active   { border-color: #2e7d32; background: #2e7d32; color: #fff; }
+.chip-transfer.active { border-color: #1565c0; background: #1565c0; color: #fff; }
+.chip-repay.active    { border-color: #6a1fa2; background: #6a1fa2; color: #fff; }
+/* 계좌 종류 배지 active 색상 */
+.wallet-chips .chip.active {
   border-color: hsla(160, 100%, 37%, 1);
-  background: hsla(160, 100%, 37%, 0.1);
+  background: hsla(160, 100%, 37%, 1);
-  color: hsla(160, 100%, 37%, 1);
+  color: #fff;
-  font-weight: 600;
-}
-.acc-chip.sub {
-  background: var(--color-background);
-}
-.acc-chip.sub.active {
-  border-color: hsla(160, 100%, 37%, 1);
-  background: hsla(160, 100%, 37%, 0.1);
-  color: hsla(160, 100%, 37%, 1);
-  font-weight: 600;
-}
-.acc-chip.add-chip {
-  opacity: 0.55;
-  border-style: dashed;
-}
-.acc-chip.add-chip.sub-add {
-  flex: 0 0 auto;
 }
 .loan-breakdown {
   display: flex;

src/views/account/AccountWalletView.vue

@@ -4,6 +4,7 @@ import Sortable from 'sortablejs'
 import { accountApi } from '@/api/accountApi'
 import { useDialog } from '@/composables/dialog'
 import IconBtn from '@/components/ui/IconBtn.vue'
+import AppModal from '@/components/ui/AppModal.vue'
 
 const dialog = useDialog()
 
@@ -12,8 +13,19 @@ const TABS = [
   { key: 'CASH', label: '현금' },
   { key: 'CARD', label: '신용/체크카드' },
   { key: 'LOAN', label: '대출' },
+  { key: 'MINUS', label: '마이너스통장' },
   { key: 'INVEST', label: '투자' },
 ]
+const CARD_TYPES = [
+  { value: 'CREDIT', label: '신용카드' },
+  { value: 'CHECK',  label: '체크카드' },
+]
+const LOAN_METHODS = [
+  { value: 'EQUAL_PAYMENT',   label: '원리금균등' },
+  { value: 'EQUAL_PRINCIPAL', label: '원금균등' },
+  { value: 'BULLET',          label: '만기일시' },
+  { value: '',                label: '선택안함' },
+]
 
 const wallets = ref([])
 const networth = ref({ totalAssets: 0, totalLiabilities: 0, netWorth: 0 })
@@ -85,7 +97,7 @@ function shiftMonth(w, delta) {
   entryMonth[w.id] = ms[j]
 }
 
-const isLiability = (t) => t === 'CARD' || t === 'LOAN'
+const isLiability = (t) => t === 'CARD' || t === 'LOAN' || t === 'MINUS'
 
 // 현재 탭(activeType)의 계좌 — 드래그 정렬 대상 (백엔드가 sort_order 순 정렬)
 const rows = ref([])
@@ -160,7 +172,7 @@ function entryDesc(e, w) {
   if (e.type === 'TRANSFER') {
     if (e.toWalletId === w.id) {
       // 이 계좌로 들어온 이체: 부채는 상환/납부, 그 외(은행·투자)는 입금
-      const inLabel = w.type === 'CARD' || w.type === 'LOAN' ? '상환/납부' : '입금'
+      const inLabel = w.type === 'CARD' || w.type === 'LOAN' || w.type === 'MINUS' ? '상환/납부' : '입금'
       return `${inLabel} ← ${e.walletName || '계좌'}${m}`
     }
     return `이체 → ${e.toWalletName || '계좌'}${m}`
@@ -199,10 +211,14 @@ function toggleReveal(id) {
   revealedAccts.value = s
 }
 function issuerLabel(t) {
-  return t === 'BANK' ? '은행명' : t === 'CARD' ? '카드사' : t === 'INVEST' ? '증권사' : '대출기관'
+  return t === 'BANK' || t === 'MINUS' ? '은행명' : t === 'CARD' ? '카드사' : t === 'INVEST' ? '증권사' : '대출기관'
 }
 function openingLabel(t) {
-  return t === 'BANK' || t === 'CASH' ? '초기 잔액' : t === 'CARD' ? '초기 미결제 금액' : t === 'INVEST' ? '투자금(투입원금)' : '기록 시작 시 잔액'
+  if (t === 'BANK' || t === 'CASH') return '초기 잔액'
+  if (t === 'CARD') return '초기 미결제 금액'
+  if (t === 'INVEST') return '투자금(투입원금)'
+  if (t === 'MINUS') return '기록 시작 시 사용 잔액'
+  return '기록 시작 시 잔액'
 }
 // 투자 수익률(%) — 투입원금 대비 평가손익
 function returnPct(w) {
@@ -378,7 +394,7 @@ onBeforeUnmount(() => sortable?.destroy())
             </div>
             <span class="sub">
               {{ w.issuer }}
-              <template v-if="w.type === 'BANK' && w.accountNumber">
+              <template v-if="(w.type === 'BANK' || w.type === 'MINUS') && w.accountNumber">
                 · {{ revealedAccts.has(w.id) ? w.accountNumber : maskAccount(w.accountNumber) }}
                 <button
                   type="button" class="acct-eye"
@@ -453,78 +469,75 @@ onBeforeUnmount(() => sortable?.destroy())
     <div v-if="!loading && !rows.length" class="empty-state">
       <p class="empty-emoji">🏦</p>
       <p class="empty-title">아직 등록된 계좌가 없어요</p>
-      <p class="empty-desc">은행·카드·현금·대출·투자를 추가해보세요.</p>
+      <p class="empty-desc">은행·카드·현금·대출·마이너스통장·투자를 추가해보세요.</p>
       <button type="button" class="empty-cta" @click="openCreate">＋ 계좌 추가</button>
     </div>
 
     <!-- 추가/수정 모달 -->
-    <Teleport to="body">
+    <AppModal v-model="formOpen" :title="`${TABS.find((t) => t.key === form.type)?.label} ${editId ? '수정' : '추가'}`">
-      <Transition name="fade">
+      <form class="wallet-form" @submit.prevent="submit">
-        <div v-if="formOpen" class="modal-backdrop" @click.self="formOpen = false">
+        <label>이름(별칭)<input v-model="form.name" type="text" placeholder="예: 월급통장 / 메인카드 / 신용대출" :disabled="submitting" /></label>
-          <div class="modal" role="dialog" aria-modal="true">
+        <label v-if="form.type !== 'CASH'">{{ issuerLabel(form.type) }}<input v-model="form.issuer" type="text" :disabled="submitting" /></label>
-            <button class="close" type="button" @click="formOpen = false">×</button>
+        <label v-if="form.type === 'BANK' || form.type === 'MINUS'">계좌번호<input v-model="form.accountNumber" type="text" placeholder="(선택)" :disabled="submitting" /></label>
-            <h2>{{ TABS.find((t) => t.key === form.type)?.label }} {{ editId ? '수정' : '추가' }}</h2>
+        <div v-if="form.type === 'CARD'" class="field">
-
+          <span class="field-label">카드 종류</span>
-            <form class="wallet-form" @submit.prevent="submit">
+          <div class="chip-group">
-              <label>이름(별칭)<input v-model="form.name" type="text" placeholder="예: 월급통장 / 메인카드 / 신용대출" :disabled="submitting" /></label>
+            <button
-              <label v-if="form.type !== 'CASH'">{{ issuerLabel(form.type) }}<input v-model="form.issuer" type="text" :disabled="submitting" /></label>
+              v-for="c in CARD_TYPES" :key="c.value"
-              <label v-if="form.type === 'BANK'">계좌번호<input v-model="form.accountNumber" type="text" placeholder="(선택)" :disabled="submitting" /></label>
+              type="button" class="chip" :class="{ active: form.cardType === c.value }"
-              <label v-if="form.type === 'CARD'">카드 종류
+              :disabled="submitting" @click="form.cardType = c.value"
-                <select v-model="form.cardType" :disabled="submitting">
+            >{{ c.label }}</button>
-                  <option value="CREDIT">신용카드</option>
-                  <option value="CHECK">체크카드</option>
-                </select>
-              </label>
-              <label>{{ openingLabel(form.type) }}<input v-model.number="form.openingBalance" type="number" min="0" :disabled="submitting" /></label>
-              <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>(투입원금)과 <b>현재 평가액</b>만 입력하면 손익이 자동 계산됩니다. (퇴직연금·연금·증권계좌 공통)<br />
-                  평가액은 위 <b>수정</b>에서 주기적으로 갱신하세요.
-                </p>
-              </template>
-              <label>기준일<input v-model="form.openingDate" type="date" :disabled="submitting" /></label>
-
-              <!-- 대출 전용 -->
-              <template v-if="form.type === 'LOAN'">
-                <label>대출 실행 금액(원금)
-                  <input v-model.number="form.loanAmount" type="number" min="0"
-                    placeholder="처음 빌린 금액 (예: 10000000)" :disabled="submitting" />
-                </label>
-                <label>연이자율(%)
-                  <input v-model.number="form.loanRate" type="number" min="0" max="100" step="0.01"
-                    placeholder="예: 5.25" :disabled="submitting" />
-                </label>
-                <label>상환방식
-                  <select v-model="form.loanMethod" :disabled="submitting">
-                    <option value="">(선택 안 함)</option>
-                    <option value="EQUAL_PAYMENT">원리금균등상환</option>
-                    <option value="EQUAL_PRINCIPAL">원금균등상환</option>
-                    <option value="BULLET">만기일시상환</option>
-                  </select>
-                </label>
-                <label>대출기간(개월)
-                  <input v-model.number="form.loanMonths" type="number" min="1"
-                    placeholder="예: 120 (10년)" :disabled="submitting" />
-                </label>
-                <label>대출시작일
-                  <input v-model="form.loanStart" type="date" :disabled="submitting" />
-                </label>
-              </template>
-
-              <p v-if="formError" class="msg error">{{ formError }}</p>
-
-              <div class="buttons">
-                <IconBtn icon="close" title="취소" @click="formOpen = false" />
-                <IconBtn icon="save" :title="editId ? '수정' : '등록'" variant="primary" type="submit" :disabled="submitting" />
-              </div>
-            </form>
           </div>
         </div>
-      </Transition>
+        <label>{{ openingLabel(form.type) }}<input v-model.number="form.openingBalance" type="number" min="0" :disabled="submitting" /></label>
-    </Teleport>
+        <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>(투입원금)과 <b>현재 평가액</b>만 입력하면 손익이 자동 계산됩니다. (퇴직연금·연금·증권계좌 공통)<br />
+            평가액은 위 <b>수정</b>에서 주기적으로 갱신하세요.
+          </p>
+        </template>
+        <label>기준일<input v-model="form.openingDate" type="date" :disabled="submitting" /></label>
+
+        <!-- 대출 전용 -->
+        <template v-if="form.type === 'LOAN'">
+          <label>대출 실행 금액(원금)
+            <input v-model.number="form.loanAmount" type="number" min="0"
+              placeholder="처음 빌린 금액 (예: 10000000)" :disabled="submitting" />
+          </label>
+          <label>연이자율(%)
+            <input v-model.number="form.loanRate" type="number" min="0" max="100" step="0.01"
+              placeholder="예: 5.25" :disabled="submitting" />
+          </label>
+          <div class="field">
+            <span class="field-label">상환방식</span>
+            <div class="chip-group">
+              <button
+                v-for="m in LOAN_METHODS" :key="m.value"
+                type="button" class="chip" :class="{ active: form.loanMethod === m.value }"
+                :disabled="submitting" @click="form.loanMethod = m.value"
+              >{{ m.label }}</button>
+            </div>
+          </div>
+          <label>대출기간(개월)
+            <input v-model.number="form.loanMonths" type="number" min="1"
+              placeholder="예: 120 (10년)" :disabled="submitting" />
+          </label>
+          <label>대출시작일
+            <input v-model="form.loanStart" type="date" :disabled="submitting" />
+          </label>
+        </template>
+
+        <p v-if="formError" class="msg error">{{ formError }}</p>
+
+        <div class="buttons">
+          <IconBtn icon="close" title="취소" @click="formOpen = false" />
+          <IconBtn icon="save" :title="editId ? '수정' : '등록'" variant="primary" type="submit" :disabled="submitting" />
+        </div>
+      </form>
+    </AppModal>
   </section>
 </template>
 
@@ -893,43 +906,6 @@ button.primary {
   color: #c0392b;
 }
 
-/* 모달 */
-.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);
-}
-.modal .close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.6rem;
-  width: 2rem;
-  height: 2rem;
-  border: 0;
-  background: transparent;
-  font-size: 1.5rem;
-  line-height: 1;
-}
-.modal h2 {
-  margin-bottom: 1rem;
-  font-size: 1.2rem;
-  text-align: center;
-}
 .wallet-form {
   display: flex;
   flex-direction: column;
@@ -949,21 +925,45 @@ button.primary {
   background: var(--color-background-soft);
   color: var(--color-text);
 }
+/* 배지형 선택 */
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+.field-label {
+  font-size: 0.82rem;
+  opacity: 0.7;
+}
+.chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+.chip {
+  padding: 0.28rem 0.75rem;
+  border: 1.5px solid var(--color-border);
+  border-radius: 100px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+  font-size: 0.82rem;
+  font-weight: 500;
+  cursor: pointer;
+  line-height: 1.4;
+  transition: border-color 0.12s, background 0.12s, color 0.12s;
+}
+.chip:disabled { opacity: 0.45; cursor: not-allowed; }
+.chip.active {
+  border-color: hsla(160, 100%, 37%, 1);
+  background: hsla(160, 100%, 37%, 1);
+  color: #fff;
+}
 .buttons {
   display: flex;
   justify-content: flex-end;
   gap: 0.5rem;
   margin-top: 0.5rem;
 }
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.18s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
 @media (max-width: 768px) {
   .wallet {
     max-width: 100%;

src/views/account/BudgetView.vue

@@ -3,6 +3,8 @@ import { computed, onMounted, reactive, ref } from 'vue'
 import { accountApi } from '@/api/accountApi'
 import { useDialog } from '@/composables/dialog'
 import IconBtn from '@/components/ui/IconBtn.vue'
+import AppModal from '@/components/ui/AppModal.vue'
+import CategoryPicker from '@/components/ui/CategoryPicker.vue'
 
 const dialog = useDialog()
 
@@ -39,26 +41,6 @@ async function loadCategories() {
     categories.value = []
   }
 }
-const categoryOptions = computed(() => {
-  const names = categories.value.filter((c) => c.type === 'EXPENSE').map((c) => c.name)
-  if (form.category && !names.includes(form.category)) names.unshift(form.category)
-  return names
-})
-// 대분류로 그룹핑 (소분류=optgroup 옵션 / 자식없는 대분류=단독 옵션)
-const categoryGroups = computed(() => {
-  const list = categories.value.filter((c) => c.type === 'EXPENSE')
-  const groups = []
-  if (form.category && !list.some((c) => c.name === form.category)) {
-    groups.push({ key: '_cur', label: null, options: [form.category] })
-  }
-  for (const m of list.filter((c) => c.parentId == null)) {
-    const children = list.filter((c) => c.parentId === m.id)
-    if (children.length) groups.push({ key: 'g' + m.id, label: m.name, options: children.map((c) => c.name) })
-    else groups.push({ key: 'i' + m.id, label: null, options: [m.name] })
-  }
-  return groups
-})
-
 const periodLabel = computed(() => `${year.value}년 ${String(month.value).padStart(2, '0')}월`)
 
 function won(n) {
@@ -273,10 +255,97 @@ async function remove(s) {
   }
 }
 
+// ===== 1회성 예산 =====
+const onetimes = ref([])
+const onetimeFormOpen = ref(false)
+const onetimeEditId = ref(null)
+const onetimeForm = reactive({ title: '', category: '', amount: null, startDate: '', endDate: '' })
+const onetimeSubmitting = ref(false)
+const onetimeFormError = ref(null)
+
+function todayStr() {
+  const d = new Date()
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+async function loadOnetime() {
+  try { onetimes.value = await accountApi.onetimeBudgets() }
+  catch { onetimes.value = [] }
+}
+
+function statusLabel(s) {
+  return s === 'UPCOMING' ? '예정' : s === 'ACTIVE' ? '진행' : '종료'
+}
+function onetimeRatio(o) {
+  if (!o.amount) return 0
+  return Math.min(Math.round((o.spent / o.amount) * 100), 999)
+}
+function onetimeBarClass(o) {
+  const r = o.amount ? o.spent / o.amount : 0
+  return r >= 1 ? 'over' : r >= 0.8 ? 'warn' : 'ok'
+}
+
+function openOnetimeCreate() {
+  onetimeEditId.value = null
+  Object.assign(onetimeForm, { title: '', category: '', amount: null, startDate: todayStr(), endDate: '' })
+  onetimeFormError.value = null
+  onetimeFormOpen.value = true
+}
+function openOnetimeEdit(o) {
+  onetimeEditId.value = o.id
+  Object.assign(onetimeForm, {
+    title: o.title,
+    category: o.category || '',
+    amount: o.amount,
+    startDate: o.startDate,
+    endDate: o.endDate,
+  })
+  onetimeFormError.value = null
+  onetimeFormOpen.value = true
+}
+
+async function submitOnetime() {
+  onetimeFormError.value = null
+  if (!onetimeForm.title.trim()) { onetimeFormError.value = '제목을 입력하세요.'; return }
+  if (!onetimeForm.amount || onetimeForm.amount <= 0) { onetimeFormError.value = '금액을 입력하세요.'; return }
+  if (!onetimeForm.startDate) { onetimeFormError.value = '시작일을 입력하세요.'; return }
+  if (!onetimeForm.endDate) { onetimeFormError.value = '종료일을 입력하세요.'; return }
+  if (onetimeForm.startDate > onetimeForm.endDate) { onetimeFormError.value = '종료일이 시작일보다 빠를 수 없습니다.'; return }
+  const payload = {
+    title: onetimeForm.title.trim(),
+    category: onetimeForm.category || null,
+    amount: Number(onetimeForm.amount),
+    startDate: onetimeForm.startDate,
+    endDate: onetimeForm.endDate,
+  }
+  onetimeSubmitting.value = true
+  try {
+    if (onetimeEditId.value) await accountApi.updateOnetimeBudget(onetimeEditId.value, payload)
+    else await accountApi.createOnetimeBudget(payload)
+    onetimeFormOpen.value = false
+    await loadOnetime()
+  } catch (e) {
+    onetimeFormError.value = e.response?.data?.message || '저장에 실패했습니다.'
+  } finally {
+    onetimeSubmitting.value = false
+  }
+}
+
+async function removeOnetime(o) {
+  if (!(await dialog.confirm(`'${o.title}' 1회성 예산을 삭제할까요?`, { title: '삭제', danger: true }))) return
+  try {
+    await accountApi.removeOnetimeBudget(o.id)
+    await loadOnetime()
+  } catch (e) {
+    alert(e.response?.data?.message || '삭제에 실패했습니다.')
+  }
+}
+
 onMounted(() => {
   load()
   loadCategories()
   loadIncome()
+  loadOnetime()
 })
 </script>
 
@@ -349,70 +418,126 @@ onMounted(() => {
     </ul>
     <p v-else-if="!loading" class="msg">설정된 예산이 없습니다. "예산 추가"로 시작하세요.</p>
 
-    <!-- 추가/수정 모달 -->
+    <!-- 1회성 예산 섹션 -->
-    <Teleport to="body">
+    <div class="onetime-section">
-      <Transition name="fade">
+      <div class="onetime-header">
-        <div v-if="formOpen" class="modal-backdrop" @click.self="formOpen = false">
+        <span class="onetime-title">1회성 예산</span>
-          <div class="modal" role="dialog" aria-modal="true">
+        <IconBtn icon="plus" title="1회성 예산 추가" variant="primary" size="sm" @click="openOnetimeCreate" />
-            <button class="close" type="button" @click="formOpen = false">×</button>
+      </div>
-            <h2>예산 {{ editId ? '수정' : '추가' }}</h2>
 
-            <form class="budget-form" @submit.prevent="submit">
+      <ul v-if="onetimes.length" class="onetime-list">
-              <label>카테고리
+        <li v-for="o in onetimes" :key="o.id" class="onetime-row">
-                <select v-model="form.category" :disabled="submitting">
+          <div class="ot-top">
-                  <option value="">(선택)</option>
+            <span class="ot-name">{{ o.title }}</span>
-                  <template v-for="g in categoryGroups" :key="g.key">
+            <span class="ot-status" :class="o.status.toLowerCase()">{{ statusLabel(o.status) }}</span>
-                    <optgroup v-if="g.label" :label="g.label">
+            <span class="ot-amounts">
-                      <option v-for="n in g.options" :key="n" :value="n">{{ n }}</option>
+              <span :class="o.remaining < 0 ? 'neg' : ''">{{ won(o.spent) }}</span>
-                    </optgroup>
+              <span class="ot-sep">/</span>
-                    <template v-else>
+              {{ won(o.amount) }}
-                      <option v-for="n in g.options" :key="n" :value="n">{{ n }}</option>
+            </span>
-                    </template>
+          </div>
-                  </template>
+          <div class="bar">
-                </select>
+            <div class="bar-fill" :class="onetimeBarClass(o)" :style="{ width: Math.min(onetimeRatio(o), 100) + '%' }"></div>
-              </label>
+          </div>
+          <div class="ot-bottom">
+            <span class="ot-date">{{ o.startDate }} ~ {{ o.endDate }}</span>
+            <span v-if="o.category" class="ot-cat">{{ o.category }}</span>
+            <span class="ot-remain" :class="o.remaining < 0 ? 'neg' : ''">
+              {{ o.remaining >= 0 ? `잔여 ${won(o.remaining)}` : `초과 ${won(-o.remaining)}` }}
+            </span>
+            <span class="acts">
+              <IconBtn icon="edit" title="수정" size="sm" @click="openOnetimeEdit(o)" />
+              <IconBtn icon="trash" title="삭제" variant="danger" size="sm" @click="removeOnetime(o)" />
+            </span>
+          </div>
+        </li>
+      </ul>
+      <p v-else class="msg ot-empty">등록된 1회성 예산이 없습니다.</p>
+    </div>
 
-              <div class="mode">
+    <!-- 1회성 예산 추가/수정 모달 -->
-                <label class="radio"><input type="radio" :value="false" v-model="form.fixed" /> 비고정(기간별 직접)</label>
+    <AppModal v-model="onetimeFormOpen" :title="`1회성 예산 ${onetimeEditId ? '수정' : '추가'}`">
-                <label class="radio"><input type="radio" :value="true" v-model="form.fixed" /> 고정(자동 환산)</label>
+      <form class="budget-form" @submit.prevent="submitOnetime">
-              </div>
+        <label>제목<input v-model="onetimeForm.title" type="text" placeholder="예: 7월 여행, 추석 준비" :disabled="onetimeSubmitting" /></label>
+        <div class="field">
+          <span class="field-label">카테고리 <span class="field-hint">(선택 — 비우면 전체 지출)</span></span>
+          <CategoryPicker
+            v-model="onetimeForm.category"
+            type="EXPENSE"
+            :categories="categories"
+            :disabled="onetimeSubmitting"
+            @category-added="loadCategories"
+          />
+        </div>
+        <label>예산 금액<input v-model.number="onetimeForm.amount" type="number" min="1" placeholder="원" :disabled="onetimeSubmitting" /></label>
+        <div class="date-range">
+          <label>시작일<input v-model="onetimeForm.startDate" type="date" :disabled="onetimeSubmitting" /></label>
+          <span class="range-sep">~</span>
+          <label>종료일<input v-model="onetimeForm.endDate" type="date" :disabled="onetimeSubmitting" /></label>
+        </div>
+        <p v-if="onetimeFormError" class="msg error">{{ onetimeFormError }}</p>
+        <div class="buttons">
+          <IconBtn icon="close" title="취소" @click="onetimeFormOpen = false" />
+          <IconBtn icon="save" :title="onetimeEditId ? '수정' : '등록'" variant="primary" type="submit" :disabled="onetimeSubmitting" />
+        </div>
+      </form>
+    </AppModal>
 
-              <!-- 고정 -->
+    <!-- 추가/수정 모달 (월별) -->
-              <template v-if="form.fixed">
+    <AppModal v-model="formOpen" :title="`예산 ${editId ? '수정' : '추가'}`">
-                <div class="fixed-base">
+      <form class="budget-form" @submit.prevent="submit">
-                  <select v-model="form.baseUnit" :disabled="submitting">
+        <div class="field">
-                    <option value="DAY">일</option>
+          <span class="field-label">카테고리</span>
-                    <option value="WEEK">주</option>
+          <CategoryPicker
-                    <option value="MONTH">월</option>
+            v-model="form.category"
-                  </select>
+            type="EXPENSE"
-                  <input v-model.number="form.baseAmount" type="number" min="0" placeholder="기준 금액(원)" :disabled="submitting" />
+            :categories="categories"
-                </div>
+            :disabled="submitting"
-                <p v-if="fixedPreview" class="preview">
+            @category-added="loadCategories"
-                  환산 — 주 {{ won(fixedPreview.weekly) }} · 월 {{ won(fixedPreview.monthly) }} · 년 {{ won(fixedPreview.yearly) }}
+          />
-                  <span class="note">(이번 달 {{ daysInMonth(year, month) }}일 / 올해 {{ daysInYear(year) }}일 기준)</span>
+        </div>
-                </p>
-              </template>
 
-              <!-- 비고정 -->
+        <div class="field">
-              <template v-else>
+          <span class="field-label">예산 방식</span>
-                <label>일 예산<input v-model.number="form.daily" type="number" min="0" placeholder="원" :disabled="submitting" /></label>
+          <div class="chip-group">
-                <label>주 예산<input v-model.number="form.weekly" type="number" min="0" placeholder="원" :disabled="submitting" /></label>
+            <button type="button" class="chip" :class="{ active: !form.fixed }" :disabled="submitting" @click="form.fixed = false">비고정 (기간별 직접)</button>
-                <label>월 예산<input v-model.number="form.monthly" type="number" min="0" placeholder="원" :disabled="submitting" /></label>
+            <button type="button" class="chip" :class="{ active: form.fixed }" :disabled="submitting" @click="form.fixed = true">고정 (자동 환산)</button>
-                <label>년 예산<input v-model.number="form.yearly" type="number" min="0" placeholder="원" :disabled="submitting" /></label>
-                <p class="note">예산 대비 지출은 '월 예산' 기준으로 비교됩니다.</p>
-              </template>
-
-              <p v-if="formError" class="msg error">{{ formError }}</p>
-
-              <div class="buttons">
-                <IconBtn icon="close" title="취소" @click="formOpen = false" />
-                <IconBtn icon="save" :title="editId ? '수정' : '등록'" variant="primary" type="submit" :disabled="submitting" />
-              </div>
-            </form>
           </div>
         </div>
-      </Transition>
+
-    </Teleport>
+        <!-- 고정 -->
+        <template v-if="form.fixed">
+          <div class="fixed-base">
+            <select v-model="form.baseUnit" :disabled="submitting">
+              <option value="DAY">일</option>
+              <option value="WEEK">주</option>
+              <option value="MONTH">월</option>
+            </select>
+            <input v-model.number="form.baseAmount" type="number" min="0" placeholder="기준 금액(원)" :disabled="submitting" />
+          </div>
+          <p v-if="fixedPreview" class="preview">
+            환산 — 주 {{ won(fixedPreview.weekly) }} · 월 {{ won(fixedPreview.monthly) }} · 년 {{ won(fixedPreview.yearly) }}
+            <span class="note">(이번 달 {{ daysInMonth(year, month) }}일 / 올해 {{ daysInYear(year) }}일 기준)</span>
+          </p>
+        </template>
+
+        <!-- 비고정 -->
+        <template v-else>
+          <label>일 예산<input v-model.number="form.daily" type="number" min="0" placeholder="원" :disabled="submitting" /></label>
+          <label>주 예산<input v-model.number="form.weekly" type="number" min="0" placeholder="원" :disabled="submitting" /></label>
+          <label>월 예산<input v-model.number="form.monthly" type="number" min="0" placeholder="원" :disabled="submitting" /></label>
+          <label>년 예산<input v-model.number="form.yearly" type="number" min="0" placeholder="원" :disabled="submitting" /></label>
+          <p class="note">예산 대비 지출은 '월 예산' 기준으로 비교됩니다.</p>
+        </template>
+
+        <p v-if="formError" class="msg error">{{ formError }}</p>
+
+        <div class="buttons">
+          <IconBtn icon="close" title="취소" @click="formOpen = false" />
+          <IconBtn icon="save" :title="editId ? '수정' : '등록'" variant="primary" type="submit" :disabled="submitting" />
+        </div>
+      </form>
+    </AppModal>
   </section>
 </template>
 
@@ -647,43 +772,6 @@ button.primary {
   color: #c0392b;
 }
 
-/* 모달 */
-.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: 380px;
-  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);
-}
-.modal .close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.6rem;
-  width: 2rem;
-  height: 2rem;
-  border: 0;
-  background: transparent;
-  font-size: 1.5rem;
-  line-height: 1;
-}
-.modal h2 {
-  margin-bottom: 1rem;
-  font-size: 1.2rem;
-  text-align: center;
-}
 .budget-form {
   display: flex;
   flex-direction: column;
@@ -703,17 +791,42 @@ button.primary {
   background: var(--color-background-soft);
   color: var(--color-text);
 }
-.mode {
+/* 배지형 선택 */
+.field {
   display: flex;
-  gap: 1rem;
+  flex-direction: column;
-  font-size: 0.85rem;
+  gap: 0.3rem;
-  padding: 0.25rem 0;
 }
-.radio {
+.field-label {
-  flex-direction: row !important;
+  font-size: 0.82rem;
-  align-items: center;
+  opacity: 0.7;
-  gap: 0.3rem !important;
+}
+.field-hint {
+  font-size: 0.75rem;
+  opacity: 0.7;
+}
+.chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+.chip {
+  padding: 0.28rem 0.75rem;
+  border: 1.5px solid var(--color-border);
+  border-radius: 100px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+  font-size: 0.82rem;
+  font-weight: 500;
   cursor: pointer;
+  line-height: 1.4;
+  transition: border-color 0.12s, background 0.12s, color 0.12s;
+}
+.chip:disabled { opacity: 0.45; cursor: not-allowed; }
+.chip.active {
+  border-color: hsla(160, 100%, 37%, 1);
+  background: hsla(160, 100%, 37%, 1);
+  color: #fff;
 }
 .fixed-base {
   display: flex;
@@ -741,12 +854,92 @@ button.primary {
   gap: 0.5rem;
   margin-top: 0.5rem;
 }
-.fade-enter-active,
+/* 1회성 예산 */
-.fade-leave-active {
+.onetime-section {
-  transition: opacity 0.18s ease;
+  margin-top: 2rem;
+  border-top: 2px solid var(--color-border);
+  padding-top: 1.25rem;
 }
-.fade-enter-from,
+.onetime-header {
-.fade-leave-to {
+  display: flex;
-  opacity: 0;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+.onetime-title {
+  font-size: 1rem;
+  font-weight: 700;
+}
+.onetime-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.onetime-row {
+  padding: 0.85rem 0;
+  border-bottom: 1px solid var(--color-border);
+}
+.ot-top {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  margin-bottom: 0.4rem;
+}
+.ot-name {
+  font-weight: 600;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ot-status {
+  font-size: 0.7rem;
+  border-radius: 3px;
+  padding: 0.05rem 0.35rem;
+  border: 1px solid;
+  white-space: nowrap;
+}
+.ot-status.active  { color: #2e7d32; border-color: #2e7d32; }
+.ot-status.upcoming { color: #1565c0; border-color: #1565c0; }
+.ot-status.ended   { opacity: 0.5; }
+.ot-amounts {
+  font-size: 0.9rem;
+  white-space: nowrap;
+}
+.ot-amounts .neg { color: #c0392b; font-weight: 600; }
+.ot-sep { opacity: 0.5; margin: 0 0.2rem; }
+.ot-bottom {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin-top: 0.35rem;
+  font-size: 0.8rem;
+  flex-wrap: wrap;
+}
+.ot-date { opacity: 0.65; }
+.ot-cat {
+  background: var(--color-background-mute);
+  border-radius: 3px;
+  padding: 0.05rem 0.35rem;
+  font-size: 0.75rem;
+}
+.ot-remain { opacity: 0.85; }
+.ot-remain.neg { color: #c0392b; opacity: 1; }
+.ot-empty { opacity: 0.6; }
+
+/* 날짜 범위 입력 */
+.date-range {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.4rem;
+}
+.date-range label {
+  flex: 1;
+}
+.range-sep {
+  padding-bottom: 0.55rem;
+  opacity: 0.6;
+  font-size: 0.9rem;
 }
 </style>

src/views/account/CategoryView.vue

@@ -1,19 +1,23 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, reactive, ref, watch, nextTick } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
-import Sortable from 'sortablejs'
 import { accountApi } from '@/api/accountApi'
 import IconBtn from '@/components/ui/IconBtn.vue'
-
+import CategoryPicker from '@/components/ui/CategoryPicker.vue'
 
 const categories = ref([])
-const rows = ref([]) // 현재 탭(activeType)의 분류 — 드래그 정렬 대상
 const loading = ref(false)
 const error = ref(null)
-const activeType = ref('EXPENSE') // EXPENSE / INCOME
+const activeType = ref('EXPENSE')
-const newName = ref('')
+const reorderMode = ref(false)
-const newParent = ref('') // 추가 시 대분류('' = 대분류로 추가)
 
-// 인앱 확인 모달 (네이티브 confirm 대신 — PC 팝업 제목 'sb_pt' 노출 방지)
+function toggleReorder() {
+  reorderMode.value = !reorderMode.value
+}
+
+// 탭 전환 시 순서변경 모드 초기화
+watch(activeType, () => { reorderMode.value = false })
+
+// 인앱 확인 모달
 const confirmState = reactive({ open: false, title: '', message: '', onOk: null })
 function askConfirm(title, message, onOk) {
   confirmState.title = title
@@ -26,22 +30,12 @@ function confirmOk() {
   confirmState.open = false
   if (fn) fn()
 }
-// 액션 오류도 네이티브 alert 대신 화면 상단 메시지로
 function showError(e, fallback) {
   error.value = e.response?.data?.message || fallback
 }
 
-// categories/activeType 변경 시 현재 탭 목록 동기화 (백엔드가 sort_order 순 정렬)
+const hasCategories = computed(() =>
-function syncRows() {
+  categories.value.some((c) => c.type === activeType.value)
-  rows.value = categories.value.filter((c) => c.type === activeType.value)
-}
-watch([categories, activeType], syncRows, { immediate: true })
-
-// 현재 탭의 대분류(parent 없는 것) 목록 — 추가 폼 대분류 선택용
-const majors = computed(() => rows.value.filter((c) => c.parentId == null))
-// 대분류 → 소분류 트리 (major/children 모두 실제 row 참조 유지 → v-model 바인딩 가능)
-const tree = computed(() =>
-  majors.value.map((m) => ({ major: m, children: rows.value.filter((c) => c.parentId === m.id) })),
 )
 
 async function load() {
@@ -55,111 +49,45 @@ async function load() {
     loading.value = false
   }
 }
-async function reload() {
-  await load()
-  await nextTick()
-  initSortable()
-}
 
-// ===== 계층 드래그 정렬 (대분류 블록 / 대분류 내 소분류) =====
+async function onRename(cat, newName) {
-// 스크롤하다 실수로 순서가 바뀌는 것 방지: 기본은 드래그 비활성, '순서변경' 버튼으로 켠다.
-const majorListEl = ref(null)
-const reorderMode = ref(false)
-
-let sortables = []
-function destroySortables() {
-  sortables.forEach((s) => s.destroy())
-  sortables = []
-}
-function toggleReorder() {
-  reorderMode.value = !reorderMode.value
-  nextTick(() => initSortable()) // 켜면 생성, 끄면 destroy 후 early-return
-}
-function initSortable() {
-  destroySortables()
-  if (!majorListEl.value || !reorderMode.value) return
-  // 대분류 순서 — 블록 단위라 소분류가 함께 이동
-  sortables.push(
-    Sortable.create(majorListEl.value, {
-      handle: '.major-handle',
-      draggable: '.major-block',
-      animation: 150,
-      onEnd: () => {
-        const ids = [...majorListEl.value.querySelectorAll(':scope > .major-block')].map((li) => Number(li.dataset.id))
-        persistOrder(ids)
-      },
-    }),
-  )
-  // 각 대분류의 소분류 순서 — 고유 group 으로 다른 대분류로는 이동 불가
-  majorListEl.value.querySelectorAll('.sub-list').forEach((ul) => {
-    sortables.push(
-      Sortable.create(ul, {
-        handle: '.sub-handle',
-        draggable: '.sub-item',
-        group: 'sub-' + ul.dataset.parent,
-        animation: 150,
-        onEnd: () => {
-          const ids = [...ul.querySelectorAll(':scope > .sub-item')].map((li) => Number(li.dataset.id))
-          if (ids.length) persistOrder(ids)
-        },
-      }),
-    )
-  })
-}
-// 로컬 순서 즉시 반영(스냅백 방지) 후 백엔드 저장
-function reorderLocal(ids) {
-  const idSet = new Set(ids)
-  const moved = ids.map((id) => categories.value.find((c) => c.id === id)).filter(Boolean)
-  let k = 0
-  categories.value = categories.value.map((c) => (idSet.has(c.id) ? moved[k++] : c))
-  syncRows()
-}
-async function persistOrder(ids) {
-  reorderLocal(ids)
-  try {
-    await accountApi.reorderCategories(activeType.value, ids)
-  } catch (e) {
-    showError(e, '순서 저장에 실패했습니다.')
-  }
-  await reload()
-}
-
-async function addCategory() {
-  const name = newName.value.trim()
-  if (!name) return
   error.value = null
   try {
-    await accountApi.createCategory({ type: activeType.value, name, parentId: newParent.value || null })
+    await accountApi.updateCategory(cat.id, { type: cat.type, name: newName, parentId: cat.parentId || null })
-    newName.value = ''
+    await load()
-    await reload()
-  } catch (e) {
-    showError(e, '추가에 실패했습니다.')
-  }
-}
-
-async function saveCategory(c) {
-  const name = (c.name || '').trim()
-  if (!name) return
-  error.value = null
-  try {
-    // parentId 는 항상 현재값을 함께 전송(미전송 시 대분류로 풀림)
-    await accountApi.updateCategory(c.id, { type: c.type, name, parentId: c.parentId || null })
-    await reload()
   } catch (e) {
     showError(e, '수정에 실패했습니다.')
   }
 }
 
-function removeCategory(c) {
+function onDelete(cat) {
-  askConfirm('분류 삭제', `'${c.name}' 분류를 삭제할까요?\n기존 내역의 분류명은 그대로 유지됩니다.`, async () => {
+  askConfirm(
-    error.value = null
+    '분류 삭제',
-    try {
+    `'${cat.name}' 분류를 삭제할까요?\n기존 내역의 분류명은 그대로 유지됩니다.`,
-      await accountApi.removeCategory(c.id)
+    async () => {
-      await reload()
+      error.value = null
-    } catch (e) {
+      try {
-      showError(e, '삭제에 실패했습니다.')
+        await accountApi.removeCategory(cat.id)
-    }
+        await load()
-  })
+      } catch (e) {
+        showError(e, '삭제에 실패했습니다.')
+      }
+    },
+  )
+}
+
+async function onReorder(ids) {
+  // 낙관적 로컬 반영
+  const idSet = new Set(ids)
+  const moved = ids.map((id) => categories.value.find((c) => c.id === id)).filter(Boolean)
+  let k = 0
+  categories.value = categories.value.map((c) => (idSet.has(c.id) ? moved[k++] : c))
+  try {
+    await accountApi.reorderCategories(activeType.value, ids)
+  } catch (e) {
+    showError(e, '순서 저장에 실패했습니다.')
+    await load()
+  }
 }
 
 function importDefaults() {
@@ -167,24 +95,13 @@ function importDefaults() {
     error.value = null
     try {
       categories.value = await accountApi.importCategories()
-      await nextTick()
-      initSortable()
     } catch (e) {
       showError(e, '불러오기에 실패했습니다.')
     }
   })
 }
 
-// 탭(수입/지출) 전환 시 재렌더 → 드래그 재초기화
+onMounted(load)
-watch(activeType, async () => {
-  await nextTick()
-  initSortable()
-})
-
-onMounted(async () => {
-  await reload()
-})
-onBeforeUnmount(destroySortables)
 </script>
 
 <template>
@@ -204,55 +121,34 @@ onBeforeUnmount(destroySortables)
       </div>
     </div>
 
-    <form class="new-cat" @submit.prevent="addCategory">
-      <select v-model="newParent" class="parent-sel" title="대분류 선택">
-        <option value="">대분류로 추가</option>
-        <option v-for="m in majors" :key="m.id" :value="m.id">{{ m.name }}</option>
-      </select>
-      <div class="nc-line">
-        <input v-model="newName" type="text" :placeholder="activeType === 'EXPENSE' ? '예: 식비, 교통' : '예: 급여, 용돈'" />
-        <IconBtn icon="plus" title="추가" variant="primary" type="submit" size="sm" />
-      </div>
-    </form>
     <p class="hint sm">
-      <template v-if="reorderMode">≡ 손잡이를 끌어 순서를 바꾸세요 — <b>대분류</b>는 소분류와 함께, <b>소분류</b>는 그 대분류 안에서만 이동. 끝나면 <b>완료</b>.</template>
+      <template v-if="reorderMode">⠿ 손잡이를 끌어 순서를 바꾸세요. 끝나면 <b>완료</b>.</template>
-      <template v-else><b>순서변경</b>을 누르면 분류 순서를 바꿀 수 있어요. (평소엔 스크롤 중 실수 방지로 잠겨 있어요)</template>
+      <template v-else>✏ 이름 수정 &nbsp;·&nbsp; ✕ 삭제 &nbsp;·&nbsp; 대분류 클릭 시 소분류 펼침</template>
     </p>
 
     <p v-if="error" class="msg error">{{ error }}</p>
     <p v-if="loading" class="msg">불러오는 중...</p>
 
-    <ul v-show="!loading && tree.length" ref="majorListEl" class="major-list">
+    <CategoryPicker
-      <li v-for="g in tree" :key="g.major.id" :data-id="g.major.id" class="major-block">
+      v-if="!loading || categories.length"
-        <div class="cat-row major-row">
+      :admin="true"
-          <div class="cat-main">
+      :reorderable="reorderMode"
-            <span v-show="reorderMode" class="drag-handle major-handle" title="대분류 순서 변경(소분류 함께 이동)">≡</span>
+      :type="activeType"
-            <input v-model="g.major.name" class="cat-name" @keyup.enter="saveCategory(g.major)" />
+      :categories="categories"
-            <IconBtn icon="check" title="저장" size="sm" @click="saveCategory(g.major)" />
+      @rename="onRename"
-            <IconBtn icon="trash" title="삭제" variant="danger" size="sm" @click="removeCategory(g.major)" />
+      @delete="onDelete"
-          </div>
+      @reorder="onReorder"
-        </div>
+      @category-added="load"
-        <ul class="sub-list" :data-parent="g.major.id">
+    />
-          <li v-for="s in g.children" :key="s.id" :data-id="s.id" class="sub-item cat-row child">
+
-            <div class="cat-main">
+    <div v-if="!loading && !hasCategories" class="empty-state">
-              <span v-show="reorderMode" class="drag-handle sub-handle" title="소분류 순서 변경">≡</span>
-              <span class="sub-mark">↳</span>
-              <input v-model="s.name" class="cat-name" @keyup.enter="saveCategory(s)" />
-              <IconBtn icon="check" title="저장" size="sm" @click="saveCategory(s)" />
-              <IconBtn icon="trash" title="삭제" variant="danger" size="sm" @click="removeCategory(s)" />
-            </div>
-          </li>
-        </ul>
-      </li>
-    </ul>
-    <div v-if="!loading && !tree.length" class="empty-state">
       <p class="empty-emoji">🗂️</p>
       <p class="empty-title">등록된 {{ activeType === 'EXPENSE' ? '지출' : '수입' }} 분류가 없어요</p>
       <p class="empty-desc">기본 분류를 불러오면 식비·교통 등이 한 번에 추가됩니다.</p>
       <button type="button" class="empty-cta" @click="importDefaults">기본 분류 불러오기</button>
     </div>
 
-    <!-- 인앱 확인 모달 (네이티브 confirm 대체 — 제목 'sb_pt' 노출 방지) -->
+    <!-- 인앱 확인 모달 -->
     <Teleport to="body">
       <Transition name="fade">
         <div v-if="confirmState.open" class="modal-backdrop" @click.self="confirmState.open = false">
@@ -275,41 +171,14 @@ onBeforeUnmount(destroySortables)
   max-width: 560px;
   margin: 0 auto;
 }
-.head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.head-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-h1 {
-  font-size: 1.5rem;
-}
 .hint {
   font-size: 0.85rem;
   opacity: 0.7;
   margin: 0.5rem 0 1rem;
 }
-input {
+.hint.sm {
-  padding: 0.5rem 0.7rem;
+  font-size: 0.78rem;
-  border: 1px solid var(--color-border);
+  margin: 0 0 0.75rem;
-  border-radius: 4px;
-  background: var(--color-background-soft);
-  color: var(--color-text);
-}
-button {
-  padding: 0.45rem 0.85rem;
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-  background: var(--color-background-soft);
-  color: var(--color-text);
-  cursor: pointer;
-}
-button.danger {
-  border-color: #c0392b;
-  color: #c0392b;
 }
 .tabs-row {
   display: flex;
@@ -317,11 +186,30 @@ button.danger {
   justify-content: space-between;
   gap: 0.75rem;
   margin-bottom: 1rem;
-  flex-wrap: wrap; /* 좁으면 액션 버튼이 아래 줄로 — 탭 텍스트가 깨지지 않게 */
+  flex-wrap: wrap;
 }
-.tabs-row .tabs {
+.tabs-row .tabs { flex: none; }
+.tabs {
+  display: flex;
+  gap: 0.25rem;
+  border-bottom: 1px solid var(--color-border);
   margin-bottom: 0;
-  flex: none; /* 탭은 줄어들지 않음 */
+}
+.tabs button {
+  border: 0;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  padding: 0.6rem 1rem;
+  white-space: nowrap;
+  cursor: pointer;
+  color: var(--color-text);
+  font-size: 0.9rem;
+}
+.tabs button.active {
+  border-bottom-color: hsla(160, 100%, 37%, 1);
+  color: hsla(160, 100%, 37%, 1);
+  font-weight: 600;
 }
 .tabs-actions {
   display: flex;
@@ -330,150 +218,29 @@ button.danger {
   flex-wrap: wrap;
   justify-content: flex-end;
 }
+.text-btn {
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+  padding: 0.4rem 0.75rem;
+  font-size: 0.82rem;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.text-btn:hover { background: var(--color-background-mute); }
 .reorder-btn.active {
   color: #fff;
   background: hsla(160, 100%, 37%, 1);
-  border-radius: 6px;
+  border-color: hsla(160, 100%, 37%, 1);
-}
-.tabs {
-  display: flex;
-  gap: 0.25rem;
-  border-bottom: 1px solid var(--color-border);
-  margin-bottom: 1rem;
-}
-.tabs button {
-  border: 0;
-  border-bottom: 2px solid transparent;
-  border-radius: 0;
-  background: transparent;
-  padding: 0.6rem 1rem;
-  white-space: nowrap; /* '지출 분류' 두 줄로 깨짐 방지 */
-}
-.tabs button.active {
-  border-bottom-color: hsla(160, 100%, 37%, 1);
-  color: hsla(160, 100%, 37%, 1);
-  font-weight: 600;
-}
-.new-cat {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-.nc-line {
-  display: flex;
-  gap: 0.5rem;
-}
-.nc-line input {
-  flex: 1;
-  min-width: 0;
-}
-.major-list {
-  list-style: none;
-  padding-left: 0;
-  margin: 0;
-}
-.major-block {
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  margin-bottom: 0.5rem;
-  overflow: hidden;
-}
-.major-row {
-  background: var(--color-background-soft);
-  border-bottom: 0 !important;
-}
-.sub-list {
-  list-style: none;
-  padding: 0 0 0 0.4rem;
-  margin: 0;
-}
-.sub-item:last-child {
-  border-bottom: 0;
-}
-.cat-row {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-  padding: 0.5rem 0.5rem;
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-background);
-}
-.cat-main {
-  display: flex;
-  gap: 0.4rem;
-  align-items: center;
-}
-.cat-parent {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding-left: 1.4rem;
-  font-size: 0.8rem;
-  opacity: 0.85;
-}
-.cat-parent .pl {
-  flex: 0 0 auto;
-  opacity: 0.6;
-}
-.cat-parent .parent-sel {
-  flex: 1;
-  min-width: 0;
-}
-.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;
-}
-.cat-name {
-  flex: 1;
-  min-width: 0;
-}
-.cat-row.child {
-  padding-left: 1.2rem;
-}
-.cat-row.child .cat-name {
-  background: var(--color-background-soft);
-}
-.sub-mark {
-  opacity: 0.45;
-}
-
-.hint.sm {
-  font-size: 0.78rem;
-  margin: 0 0 0.75rem;
-}
-.msg {
-  margin: 0.75rem 0;
-}
-.msg.error {
-  color: #c0392b;
-}
-/* 신규 유저 빈 상태 */
-.empty-state {
-  text-align: center;
-  padding: 2.2rem 1rem 2rem;
-}
-.empty-emoji {
-  font-size: 2.6rem;
-}
-.empty-title {
-  margin-top: 0.6rem;
-  font-size: 1.05rem;
-  font-weight: 700;
-  color: var(--color-heading);
-}
-.empty-desc {
-  margin-top: 0.3rem;
-  font-size: 0.88rem;
-  opacity: 0.7;
 }
+.msg { margin: 0.75rem 0; font-size: 0.9rem; }
+.msg.error { color: #c0392b; }
+/* 빈 상태 */
+.empty-state { text-align: center; padding: 2.2rem 1rem 2rem; }
+.empty-emoji { font-size: 2.6rem; }
+.empty-title { margin-top: 0.6rem; font-size: 1.05rem; font-weight: 700; color: var(--color-heading); }
+.empty-desc  { margin-top: 0.3rem; font-size: 0.88rem; opacity: 0.7; }
 .empty-cta {
   margin-top: 1.1rem;
   padding: 0.7rem 1.6rem;
@@ -485,17 +252,11 @@ button.danger {
   font-weight: 700;
   cursor: pointer;
 }
-.empty-cta:hover {
+.empty-cta:hover { background: hsla(160, 100%, 32%, 1); }
-  background: hsla(160, 100%, 32%, 1);
+/* 확인 모달 */
-}
-/* 인앱 확인 모달 */
 .modal-backdrop {
-  position: fixed;
+  position: fixed; inset: 0; z-index: 1000;
-  inset: 0;
+  display: flex; align-items: center; justify-content: center;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   background: rgba(0, 0, 0, 0.5);
   padding: 1rem;
 }
@@ -508,27 +269,9 @@ button.danger {
   border: 1px solid var(--color-border);
   border-radius: 12px;
 }
-.modal h2 {
+.modal h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
-  font-size: 1.05rem;
+.confirm-body { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.5; white-space: pre-line; }
-  margin: 0 0 0.6rem;
+.buttons { display: flex; justify-content: flex-end; gap: 0.5rem; }
-}
+.fade-enter-active, .fade-leave-active { transition: opacity 0.15s; }
-.confirm-body {
+.fade-enter-from, .fade-leave-to { opacity: 0; }
-  margin: 0 0 1rem;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  white-space: pre-line;
-}
-.buttons {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-}
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.15s;
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
 </style>

src/views/account/InvestPortfolio.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, reactive, ref } from 'vue'
 import { accountApi } from '@/api/accountApi'
 import IconBtn from '@/components/ui/IconBtn.vue'
+import AppModal from '@/components/ui/AppModal.vue'
 
 const props = defineProps({ walletId: { type: [Number, String], required: true } })
 const emit = defineEmits(['changed'])
@@ -339,93 +340,69 @@ onMounted(async () => {
     </ul>
 
     <!-- 종목 추가/수정 모달 -->
-    <Teleport to="body">
+    <AppModal v-model="holdingModal" :title="`종목 ${holdingEditId ? '수정' : '추가'}`">
-      <Transition name="fade">
+      <form class="pf-form" @submit.prevent="submitHolding">
-        <div v-if="holdingModal" class="modal-backdrop" @click.self="holdingModal = false">
+        <label>종목명<input v-model="hForm.name" type="text" placeholder="예: 삼성전자" :disabled="hSubmitting" /></label>
-          <div class="modal" role="dialog" aria-modal="true">
+        <label>종목코드<input v-model="hForm.ticker" type="text" placeholder="예: 005930 (국내 상장)" :disabled="hSubmitting" /></label>
-            <button class="close" type="button" @click="holdingModal = false">×</button>
+        <label>현재가<input v-model.number="hForm.currentPrice" type="number" min="0" placeholder="(비우면 시세 갱신으로 자동)" :disabled="hSubmitting" /></label>
-            <h2>종목 {{ holdingEditId ? '수정' : '추가' }}</h2>
+        <p class="pf-form-hint">종목코드(6자리)를 입력하면 <b>시세 갱신</b> 버튼으로 현재가를 자동으로 불러옵니다.</p>
-            <form class="pf-form" @submit.prevent="submitHolding">
+        <p v-if="hError" class="pf-msg err">{{ hError }}</p>
-              <label>종목명<input v-model="hForm.name" type="text" placeholder="예: 삼성전자" :disabled="hSubmitting" /></label>
+        <div class="pf-buttons">
-              <label>종목코드<input v-model="hForm.ticker" type="text" placeholder="예: 005930 (국내 상장)" :disabled="hSubmitting" /></label>
+          <IconBtn icon="close" title="취소" @click="holdingModal = false" />
-              <label>현재가<input v-model.number="hForm.currentPrice" type="number" min="0" placeholder="(비우면 시세 갱신으로 자동)" :disabled="hSubmitting" /></label>
+          <IconBtn icon="save" title="저장" variant="primary" type="submit" :disabled="hSubmitting" />
-              <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" />
-                <IconBtn icon="save" title="저장" variant="primary" type="submit" :disabled="hSubmitting" />
-              </div>
-            </form>
-          </div>
         </div>
-      </Transition>
+      </form>
-    </Teleport>
+    </AppModal>
 
-    <!-- 매매 모달 -->
+    <!-- 매매 모달 (매매내역 위에 표시되도록 z-index 높게) -->
-    <Teleport to="body">
+    <AppModal v-model="tradeModal" :title="`${tradeHolding?.name} ${tradeEditId ? '매매 수정' : (tForm.tradeType === 'SELL' ? '매도' : '매수')}`" :zIndex="1100">
-      <Transition name="fade">
+      <form class="pf-form" @submit.prevent="submitTrade">
-        <div v-if="tradeModal" class="modal-backdrop" @click.self="tradeModal = false">
+        <label>구분
-          <div class="modal" role="dialog" aria-modal="true">
+          <select v-model="tForm.tradeType" :disabled="tSubmitting">
-            <button class="close" type="button" @click="tradeModal = false">×</button>
+            <option value="BUY">매수</option>
-            <h2>{{ tradeHolding?.name }} {{ tradeEditId ? '매매 수정' : (tForm.tradeType === 'SELL' ? '매도' : '매수') }}</h2>
+            <option value="SELL" :disabled="(tradeHolding?.quantity || 0) <= 0">매도</option>
-            <form class="pf-form" @submit.prevent="submitTrade">
+          </select>
-              <label>구분
+        </label>
-                <select v-model="tForm.tradeType" :disabled="tSubmitting">
+        <label>거래일<input v-model="tForm.tradeDate" type="date" :disabled="tSubmitting" /></label>
-                  <option value="BUY">매수</option>
+        <label>수량(주)<input v-model.number="tForm.quantity" type="number" min="0" step="any" inputmode="decimal" placeholder="예: 0.5 / 1.25 (소수점 가능)" :disabled="tSubmitting" /></label>
-                  <option value="SELL" :disabled="(tradeHolding?.quantity || 0) <= 0">매도</option>
+        <label>입력 방식
-                </select>
+          <select v-model="tForm.inputMode" :disabled="tSubmitting">
-              </label>
+            <option value="PRICE">단가로 입력</option>
-              <label>거래일<input v-model="tForm.tradeDate" type="date" :disabled="tSubmitting" /></label>
+            <option value="AMOUNT">금액으로 입력 (소수점 매수)</option>
-              <label>수량(주)<input v-model.number="tForm.quantity" type="number" min="0" step="any" inputmode="decimal" placeholder="예: 0.5 / 1.25 (소수점 가능)" :disabled="tSubmitting" /></label>
+          </select>
-              <label>입력 방식
+        </label>
-                <select v-model="tForm.inputMode" :disabled="tSubmitting">
+        <label v-if="tForm.inputMode === 'PRICE'">단가(원)
-                  <option value="PRICE">단가로 입력</option>
+          <input v-model.number="tForm.price" type="number" min="0" :disabled="tSubmitting" />
-                  <option value="AMOUNT">금액으로 입력 (소수점 매수)</option>
+          <small v-if="tradeQty > 0 && tForm.price" class="pf-hint">총 약 {{ won(tradeAmount) }}원</small>
-                </select>
+        </label>
-              </label>
+        <label v-else>금액(총, 원)
-              <label v-if="tForm.inputMode === 'PRICE'">단가(원)
+          <input v-model.number="tForm.amount" type="number" min="0" placeholder="이 금액어치 매매" :disabled="tSubmitting" />
-                <input v-model.number="tForm.price" type="number" min="0" :disabled="tSubmitting" />
+          <small v-if="tradeQty > 0 && tForm.amount" class="pf-hint">단가 약 {{ won(tradePrice) }}원</small>
-                <small v-if="tradeQty > 0 && tForm.price" class="pf-hint">총 약 {{ won(tradeAmount) }}원</small>
+        </label>
-              </label>
+        <label>수수료/세금<input v-model.number="tForm.fee" type="number" min="0" placeholder="(선택)" :disabled="tSubmitting" /></label>
-              <label v-else>금액(총, 원)
+        <p v-if="tForm.tradeType === 'SELL'" class="pf-hint">보유 {{ shares(tradeHolding?.quantity) }}주 · 평단 {{ won(tradeHolding?.avgPrice) }}</p>
-                <input v-model.number="tForm.amount" type="number" min="0" placeholder="이 금액어치 매매" :disabled="tSubmitting" />
+        <p v-if="tError" class="pf-msg err">{{ tError }}</p>
-                <small v-if="tradeQty > 0 && tForm.amount" class="pf-hint">단가 약 {{ won(tradePrice) }}원</small>
+        <div class="pf-buttons">
-              </label>
+          <IconBtn icon="close" title="취소" @click="tradeModal = false" />
-              <label>수수료/세금<input v-model.number="tForm.fee" type="number" min="0" placeholder="(선택)" :disabled="tSubmitting" /></label>
+          <IconBtn icon="save" :title="tradeEditId ? '수정' : '등록'" variant="primary" type="submit" :disabled="tSubmitting" />
-              <p v-if="tForm.tradeType === 'SELL'" class="pf-hint">보유 {{ shares(tradeHolding?.quantity) }}주 · 평단 {{ won(tradeHolding?.avgPrice) }}</p>
-              <p v-if="tError" class="pf-msg err">{{ tError }}</p>
-              <div class="pf-buttons">
-                <IconBtn icon="close" title="취소" @click="tradeModal = false" />
-                <IconBtn icon="save" :title="tradeEditId ? '수정' : '등록'" variant="primary" type="submit" :disabled="tSubmitting" />
-              </div>
-            </form>
-          </div>
         </div>
-      </Transition>
+      </form>
-    </Teleport>
+    </AppModal>
 
-    <!-- 전체 매매내역 모달 (스크롤) -->
+    <!-- 전체 매매내역 모달 -->
-    <Teleport to="body">
+    <AppModal v-model="allTradesModal" :title="`${allTradesHolding?.name} 매매내역`" :zIndex="1050">
-      <Transition name="fade">
+      <ul class="trade-list modal-trades">
-        <div v-if="allTradesModal" class="modal-backdrop trades-backdrop" @click.self="allTradesModal = false">
+        <li v-for="t in allTradesList" :key="t.id" class="trade-row">
-          <div class="modal trades-modal" role="dialog" aria-modal="true">
+          <span class="t-date">{{ tDate(t.tradeDate) }}</span>
-            <button class="close" type="button" @click="allTradesModal = false">×</button>
+          <span class="t-type" :class="t.tradeType === 'SELL' ? 'sell' : 'buy'">{{ t.tradeType === 'SELL' ? '매도' : '매수' }}</span>
-            <h2>{{ allTradesHolding?.name }} 매매내역</h2>
+          <span class="t-qty">{{ shares(t.quantity) }}주 × {{ won(t.price) }}</span>
-            <ul class="trade-list modal-trades">
+          <span class="t-fee" v-if="t.fee">수수료 {{ won(t.fee) }}</span>
-              <li v-for="t in allTradesList" :key="t.id" class="trade-row">
+          <span class="t-amt">{{ won(t.amount) }}</span>
-                <span class="t-date">{{ tDate(t.tradeDate) }}</span>
+          <IconBtn icon="edit" title="매매 수정" size="sm" @click="openEditTrade(allTradesHolding, t)" />
-                <span class="t-type" :class="t.tradeType === 'SELL' ? 'sell' : 'buy'">{{ t.tradeType === 'SELL' ? '매도' : '매수' }}</span>
+          <IconBtn class="t-del" icon="trash" title="매매 삭제" variant="danger" size="sm" @click="removeTrade(t, allTradesHolding.id)" />
-                <span class="t-qty">{{ shares(t.quantity) }}주 × {{ won(t.price) }}</span>
+        </li>
-                <span class="t-fee" v-if="t.fee">수수료 {{ won(t.fee) }}</span>
+      </ul>
-                <span class="t-amt">{{ won(t.amount) }}</span>
+    </AppModal>
-                <IconBtn icon="edit" title="매매 수정" size="sm" @click="openEditTrade(allTradesHolding, t)" />
-                <IconBtn class="t-del" icon="trash" title="매매 삭제" variant="danger" size="sm" @click="removeTrade(t, allTradesHolding.id)" />
-              </li>
-            </ul>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
   </div>
 </template>
 
@@ -608,16 +585,7 @@ onMounted(async () => {
 .more-trades:hover {
   border-color: var(--color-border-hover);
 }
-/* 전체보기 모달: 매매목록 아래 매수 모달이 위에 오도록 한 단계 낮게 */
-.modal-backdrop.trades-backdrop {
-  z-index: 1090;
-}
-.trades-modal {
-  max-width: 420px;
-}
 .modal-trades {
-  max-height: 60vh;
-  overflow-y: auto;
   margin-top: 0.5rem;
 }
 .trade-list {
@@ -662,44 +630,6 @@ onMounted(async () => {
   line-height: 1;
 }
 
-/* 모달 (계좌 관리와 동일 톤) */
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 1100;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.5);
-  padding: 1rem;
-}
-.modal {
-  position: relative;
-  width: 100%;
-  max-width: 340px;
-  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);
-}
-.modal .close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.6rem;
-  width: 2rem;
-  height: 2rem;
-  border: 0;
-  background: transparent;
-  font-size: 1.5rem;
-  line-height: 1;
-  cursor: pointer;
-}
-.modal h2 {
-  margin-bottom: 1rem;
-  font-size: 1.1rem;
-  text-align: center;
-}
 .pf-form {
   display: flex;
   flex-direction: column;
@@ -741,15 +671,6 @@ onMounted(async () => {
   border-color: hsla(160, 100%, 37%, 1);
   color: hsla(160, 100%, 37%, 1);
 }
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.18s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
 /* ===== 모바일: 매매이력 2줄, 글자 세로쪼개짐 방지 ===== */
 @media (max-width: 768px) {
   .hold-row {

src/views/account/RecurringView.vue

@@ -3,6 +3,8 @@ import { computed, onMounted, reactive, ref } from 'vue'
 import { accountApi } from '@/api/accountApi'
 import { useDialog } from '@/composables/dialog'
 import IconBtn from '@/components/ui/IconBtn.vue'
+import AppModal from '@/components/ui/AppModal.vue'
+import CategoryPicker from '@/components/ui/CategoryPicker.vue'
 
 const dialog = useDialog()
 
@@ -36,30 +38,25 @@ const submitting = ref(false)
 const formError = ref(null)
 
 const DOW = ['', '월', '화', '수', '목', '금', '토', '일']
-const categoryOptions = computed(() => {
+
-  const names = categories.value.filter((c) => c.type === form.type).map((c) => c.name)
+const TYPES = [
-  if (form.category && !names.includes(form.category)) names.unshift(form.category)
+  { value: 'EXPENSE',  label: '지출',  cls: 'chip-expense' },
-  return names
+  { value: 'INCOME',   label: '수입',  cls: 'chip-income' },
-})
+  { value: 'TRANSFER', label: '이체',  cls: 'chip-transfer' },
-// 대분류로 그룹핑 (소분류=optgroup 옵션 / 자식없는 대분류=단독 옵션)
+]
-const categoryGroups = computed(() => {
+const FREQS = [
-  const list = categories.value.filter((c) => c.type === form.type)
+  { value: 'DAILY',   label: '매일' },
-  const groups = []
+  { value: 'WEEKLY',  label: '매주' },
-  if (form.category && !list.some((c) => c.name === form.category)) {
+  { value: 'MONTHLY', label: '매월' },
-    groups.push({ key: '_cur', label: null, options: [form.category] })
+  { value: 'YEARLY',  label: '매년' },
-  }
+]
-  for (const m of list.filter((c) => c.parentId == null)) {
+
-    const children = list.filter((c) => c.parentId === m.id)
+// 계좌/카드 종류
-    if (children.length) groups.push({ key: 'g' + m.id, label: m.name, options: children.map((c) => c.name) })
-    else groups.push({ key: 'i' + m.id, label: null, options: [m.name] })
-  }
-  return groups
-})
-// 계좌/카드 — 종류(계좌/카드)를 라디오로 고르고, 그 종류만 셀렉트로 노출
 const WALLET_KINDS = [
-  { value: 'BANK', label: '계좌' },
+  { value: 'BANK',  label: '계좌' },
-  { value: 'CASH', label: '현금' },
+  { value: 'CASH',  label: '현금' },
-  { value: 'CARD', label: '카드' },
+  { value: 'CARD',  label: '카드' },
+  { value: 'MINUS', label: '마이너스' },
 ]
 const walletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.walletKind))
 const toWalletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.toWalletKind))
@@ -67,16 +64,11 @@ function walletKindOf(id) {
   const w = wallets.value.find((x) => x.id === id)
   return w ? w.type : ''
 }
-function onWalletKindChange() {
+function onWalletKindChange() { form.walletId = '' }
-  form.walletId = ''
+function onToWalletKindChange() { form.toWalletId = '' }
-}
+function onTypeChange() { form.category = '' }
-function onToWalletKindChange() {
-  form.toWalletId = ''
-}
 
-function won(n) {
+function won(n) { return (n ?? 0).toLocaleString('ko-KR') }
-  return (n ?? 0).toLocaleString('ko-KR')
-}
 function typeLabel(t) {
   return t === 'INCOME' ? '수입' : t === 'TRANSFER' ? '이체' : '지출'
 }
@@ -87,18 +79,16 @@ function freqLabel(r) {
   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
+  return r.dayOfMonth || 0
 }
 
-// 월간/년간 분리 → 카테고리별 그룹 → 결제일순 정렬 → 소계·합계 (활성 건만 합산, 중지 건은 표시만)
 const PERIODS = [
   { key: 'MONTH', label: '월간 거래', freqs: ['DAILY', 'WEEKLY', 'MONTHLY'] },
-  { key: 'YEAR', label: '년간 거래', freqs: ['YEARLY'] },
+  { key: 'YEAR',  label: '년간 거래', freqs: ['YEARLY'] },
 ]
 const grouped = computed(() =>
   PERIODS.map((p) => {
@@ -111,7 +101,6 @@ const grouped = computed(() =>
       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'))
@@ -119,6 +108,7 @@ const grouped = computed(() =>
     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')}`
@@ -157,7 +147,8 @@ function openCreate() {
   editId.value = null
   Object.assign(form, {
     title: '', type: 'EXPENSE', amount: null, category: '', memo: '',
-    walletKind: '', walletId: '', toWalletKind: '', 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
@@ -168,7 +159,8 @@ function openEdit(r) {
   Object.assign(form, {
     title: r.title, type: r.type, amount: r.amount, category: r.category || '', memo: r.memo || '',
     walletKind: walletKindOf(r.walletId), walletId: r.walletId || '',
-    toWalletKind: walletKindOf(r.toWalletId), toWalletId: r.toWalletId || '', frequency: r.frequency,
+    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,
   })
@@ -178,22 +170,13 @@ function openEdit(r) {
 
 async function submit() {
   formError.value = null
-  if (!form.title.trim()) {
+  if (!form.title.trim()) { formError.value = '이름을 입력하세요.'; return }
-    formError.value = '이름을 입력하세요.'
+  if (!form.amount || form.amount <= 0) { formError.value = '금액을 입력하세요.'; return }
-    return
-  }
-  if (!form.amount || form.amount <= 0) {
-    formError.value = '금액을 입력하세요.'
-    return
-  }
   if (form.type === 'TRANSFER' && (!form.walletId || !form.toWalletId || form.walletId === form.toWalletId)) {
     formError.value = '이체는 서로 다른 출금/입금 계좌를 선택하세요.'
     return
   }
-  if (!form.startDate) {
+  if (!form.startDate) { formError.value = '시작일을 입력하세요.'; return }
-    formError.value = '시작일을 입력하세요.'
-    return
-  }
   submitting.value = true
   const payload = {
     title: form.title.trim(),
@@ -238,7 +221,7 @@ onMounted(load)
 
 <template>
   <section class="recur">
-    <p class="hint">등록한 주기에 맞춰 가계부 진입 시 자동으로 <b>‘확인 필요’</b> 내역이 생성됩니다(중복 없이). 가계부에서 실제 결제·이체를 확인한 뒤 <b>‘확인’</b>을 눌러 확정하세요.</p>
+    <p class="hint">등록한 주기에 맞춰 가계부 진입 시 자동으로 <b>'확인 필요'</b> 내역이 생성됩니다(중복 없이). 가계부에서 실제 결제·이체를 확인한 뒤 <b>'확인'</b>을 눌러 확정하세요.</p>
     <div class="recur-actions">
       <IconBtn icon="refresh" title="지금 반영" @click="runNow" />
       <IconBtn icon="plus" title="고정 지출 추가" variant="primary" @click="openCreate" />
@@ -281,108 +264,114 @@ onMounted(load)
     <p v-else-if="!loading" class="msg">등록된 고정 지출가 없습니다.</p>
 
     <!-- 추가/수정 모달 -->
-    <Teleport to="body">
+    <AppModal v-model="formOpen" :title="`고정 지출 ${editId ? '수정' : '추가'}`">
-      <Transition name="fade">
+      <form class="recur-form" @submit.prevent="submit">
-        <div v-if="formOpen" class="modal-backdrop" @click.self="formOpen = false">
+        <label>이름<input v-model="form.title" type="text" placeholder="예: 월세, 급여" :disabled="submitting" /></label>
-          <div class="modal" role="dialog" aria-modal="true">
-            <button class="close" type="button" @click="formOpen = false">×</button>
-            <h2>고정 지출 {{ editId ? '수정' : '추가' }}</h2>
 
-            <form class="recur-form" @submit.prevent="submit">
+        <!-- 구분 배지 -->
-              <label>이름<input v-model="form.title" type="text" placeholder="예: 월세, 급여" :disabled="submitting" /></label>
+        <div class="field">
-              <label>구분
+          <span class="field-label">구분</span>
-                <select v-model="form.type" :disabled="submitting">
+          <div class="type-chips">
-                  <option value="EXPENSE">지출</option>
+            <button
-                  <option value="INCOME">수입</option>
+              v-for="t in TYPES" :key="t.value"
-                  <option value="TRANSFER">이체</option>
+              type="button" class="chip" :class="[t.cls, { active: form.type === t.value }]"
-                </select>
+              :disabled="submitting"
-              </label>
+              @click="form.type = t.value; onTypeChange()"
-              <label>금액<input v-model.number="form.amount" type="number" min="0" placeholder="원" :disabled="submitting" /></label>
+            >{{ t.label }}</button>
-
-              <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 walletsOfKind" :key="w.id" :value="w.id">
-                    {{ w.name }}{{ w.issuer ? ` (${w.issuer})` : '' }}
-                  </option>
-                </select>
-              </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>
-                  <template v-for="g in categoryGroups" :key="g.key">
-                    <optgroup v-if="g.label" :label="g.label">
-                      <option v-for="n in g.options" :key="n" :value="n">{{ n }}</option>
-                    </optgroup>
-                    <template v-else>
-                      <option v-for="n in g.options" :key="n" :value="n">{{ n }}</option>
-                    </template>
-                  </template>
-                </select>
-              </label>
-              <label>메모<input v-model="form.memo" type="text" placeholder="(선택)" :disabled="submitting" /></label>
-
-              <label>주기
-                <select v-model="form.frequency" :disabled="submitting">
-                  <option value="DAILY">매일</option>
-                  <option value="WEEKLY">매주</option>
-                  <option value="MONTHLY">매월</option>
-                  <option value="YEARLY">매년</option>
-                </select>
-              </label>
-              <label v-if="form.frequency === 'WEEKLY'">요일
-                <select v-model.number="form.dayOfWeek" :disabled="submitting">
-                  <option v-for="d in 7" :key="d" :value="d">{{ DOW[d] }}</option>
-                </select>
-              </label>
-              <label v-if="form.frequency === 'YEARLY'">월
-                <input v-model.number="form.monthOfYear" type="number" min="1" max="12" :disabled="submitting" />
-              </label>
-              <label v-if="['MONTHLY', 'YEARLY'].includes(form.frequency)">일(날짜)
-                <input v-model.number="form.dayOfMonth" type="number" min="1" max="31" :disabled="submitting" />
-              </label>
-
-              <label>시작일<input v-model="form.startDate" type="date" :disabled="submitting" /></label>
-              <label>종료일(선택)<input v-model="form.endDate" type="date" :disabled="submitting" /></label>
-              <label class="row"><input type="checkbox" v-model="form.active" :disabled="submitting" /> 활성</label>
-
-              <p v-if="formError" class="msg error">{{ formError }}</p>
-
-              <div class="buttons">
-                <IconBtn icon="close" title="취소" @click="formOpen = false" />
-                <IconBtn icon="save" :title="editId ? '수정' : '등록'" variant="primary" type="submit" :disabled="submitting" />
-              </div>
-            </form>
           </div>
         </div>
-      </Transition>
+
-    </Teleport>
+        <label>금액<input v-model.number="form.amount" type="number" min="0" placeholder="원" :disabled="submitting" /></label>
+
+        <!-- 출금 계좌 종류 배지 -->
+        <div class="field">
+          <span class="field-label">{{ form.type === 'TRANSFER' ? '출금 계좌' : '계좌/카드' }}</span>
+          <div class="wallet-chips">
+            <button
+              v-for="k in WALLET_KINDS" :key="k.value"
+              type="button" class="chip" :class="{ active: form.walletKind === k.value }"
+              :disabled="submitting"
+              @click="form.walletKind = k.value; onWalletKindChange()"
+            >{{ k.label }}</button>
+          </div>
+          <select v-if="form.walletKind" v-model="form.walletId" :disabled="submitting">
+            <option value="">(선택)</option>
+            <option v-for="w in walletsOfKind" :key="w.id" :value="w.id">
+              {{ w.name }}{{ w.issuer ? ` (${w.issuer})` : '' }}
+            </option>
+          </select>
+        </div>
+
+        <!-- 입금 계좌 종류 배지 (이체일 때만) -->
+        <div v-if="form.type === 'TRANSFER'" class="field">
+          <span class="field-label">입금 계좌</span>
+          <div class="wallet-chips">
+            <button
+              v-for="k in WALLET_KINDS" :key="k.value"
+              type="button" class="chip" :class="{ active: form.toWalletKind === k.value }"
+              :disabled="submitting"
+              @click="form.toWalletKind = k.value; onToWalletKindChange()"
+            >{{ k.label }}</button>
+          </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>
+
+        <!-- 분류 — CategoryPicker (이체 제외) -->
+        <div v-if="form.type !== 'TRANSFER'" class="field">
+          <span class="field-label">분류</span>
+          <CategoryPicker
+            v-model="form.category"
+            :type="form.type"
+            :categories="categories"
+            :disabled="submitting"
+            @category-added="load()"
+          />
+        </div>
+
+        <label>메모<input v-model="form.memo" type="text" placeholder="(선택)" :disabled="submitting" /></label>
+
+        <!-- 주기 배지 -->
+        <div class="field">
+          <span class="field-label">주기</span>
+          <div class="type-chips">
+            <button
+              v-for="f in FREQS" :key="f.value"
+              type="button" class="chip" :class="{ active: form.frequency === f.value }"
+              :disabled="submitting"
+              @click="form.frequency = f.value"
+            >{{ f.label }}</button>
+          </div>
+        </div>
+
+        <label v-if="form.frequency === 'WEEKLY'">요일
+          <select v-model.number="form.dayOfWeek" :disabled="submitting">
+            <option v-for="d in 7" :key="d" :value="d">{{ DOW[d] }}</option>
+          </select>
+        </label>
+        <label v-if="form.frequency === 'YEARLY'">월
+          <input v-model.number="form.monthOfYear" type="number" min="1" max="12" :disabled="submitting" />
+        </label>
+        <label v-if="['MONTHLY', 'YEARLY'].includes(form.frequency)">일(날짜)
+          <input v-model.number="form.dayOfMonth" type="number" min="1" max="31" :disabled="submitting" />
+        </label>
+
+        <label>시작일<input v-model="form.startDate" type="date" :disabled="submitting" /></label>
+        <label>종료일(선택)<input v-model="form.endDate" type="date" :disabled="submitting" /></label>
+        <label class="row"><input type="checkbox" v-model="form.active" :disabled="submitting" /> 활성</label>
+
+        <p v-if="formError" class="msg error">{{ formError }}</p>
+
+        <div class="buttons">
+          <IconBtn icon="close" title="취소" @click="formOpen = false" />
+          <IconBtn icon="save" :title="editId ? '수정' : '등록'" variant="primary" type="submit" :disabled="submitting" />
+        </div>
+      </form>
+    </AppModal>
   </section>
 </template>
 
@@ -391,20 +380,6 @@ onMounted(load)
   max-width: 640px;
   margin: 0 auto;
 }
-.head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-.head-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-h1 {
-  font-size: 1.5rem;
-}
 .hint {
   font-size: 0.85rem;
   opacity: 0.7;
@@ -424,24 +399,12 @@ button {
   color: var(--color-text);
   cursor: pointer;
 }
-button:disabled {
+button:disabled { opacity: 0.5; cursor: not-allowed; }
-  opacity: 0.5;
+button.danger  { border-color: #c0392b; color: #c0392b; }
-  cursor: not-allowed;
+button.primary { border-color: hsla(160, 100%, 37%, 1); color: hsla(160, 100%, 37%, 1); }
-}
+
-button.danger {
+.recur-groups { margin-top: 0.5rem; }
-  border-color: #c0392b;
+.period-group { margin-bottom: 1.5rem; }
-  color: #c0392b;
-}
-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;
@@ -450,18 +413,9 @@ button.primary {
   border-bottom: 2px solid var(--color-border);
   margin-bottom: 0.5rem;
 }
-.period-head h2 {
+.period-head h2 { font-size: 1.1rem; font-weight: 700; }
-  font-size: 1.1rem;
+.period-total { font-size: 0.95rem; font-weight: 700; color: hsla(160, 100%, 37%, 1); }
-  font-weight: 700;
+.cat-group { margin-bottom: 0.6rem; }
-}
-.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;
@@ -470,20 +424,9 @@ button.primary {
   background: var(--color-background-soft);
   border-radius: 4px;
 }
-.cat-name {
+.cat-name    { font-size: 0.88rem; font-weight: 600; }
-  font-size: 0.88rem;
+.cat-subtotal { font-size: 0.82rem; font-weight: 600; opacity: 0.8; }
-  font-weight: 600;
+.recur-list { list-style: none; padding-left: 0; margin: 0; }
-}
-.cat-subtotal {
-  font-size: 0.82rem;
-  font-weight: 600;
-  opacity: 0.8;
-}
-.recur-list {
-  list-style: none;
-  padding-left: 0;
-  margin: 0;
-}
 .recur-row {
   display: flex;
   align-items: flex-start;
@@ -492,104 +435,27 @@ button.primary {
   padding: 0.7rem 0;
   border-bottom: 1px solid var(--color-border);
 }
-.info {
+.info { flex: 1; min-width: 0; }
-  flex: 1;
+.recur-row.inactive { opacity: 0.55; }
-  min-width: 0;
+.line1 { display: flex; align-items: center; gap: 0.4rem; }
-}
+.title { font-weight: 600; }
-.recur-row.inactive {
-  opacity: 0.55;
-}
-.line1 {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-}
-.title {
-  font-weight: 600;
-}
 .type-badge {
   font-size: 0.72rem;
   border: 1px solid var(--color-border);
   border-radius: 3px;
   padding: 0.05rem 0.35rem;
 }
-.type-badge.income {
+.type-badge.income  { color: #2e7d32; border-color: #2e7d32; }
-  color: #2e7d32;
+.type-badge.expense { color: #c0392b; border-color: #c0392b; }
-  border-color: #2e7d32;
+.off  { font-size: 0.72rem; opacity: 0.6; }
-}
+.sub  { font-size: 0.83rem; opacity: 0.75; margin-top: 0.15rem; }
-.type-badge.expense {
+.next { font-size: 0.78rem; opacity: 0.6; margin-top: 0.1rem; }
-  color: #c0392b;
+.actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
-  border-color: #c0392b;
+.actions button { padding: 0.2rem 0.55rem; font-size: 0.82rem; }
-}
+.msg { margin: 0.75rem 0; }
-.off {
+.msg.error { color: #c0392b; }
-  font-size: 0.72rem;
-  opacity: 0.6;
-}
-.sub {
-  font-size: 0.83rem;
-  opacity: 0.75;
-  margin-top: 0.15rem;
-}
-.next {
-  font-size: 0.78rem;
-  opacity: 0.6;
-  margin-top: 0.1rem;
-}
-.actions {
-  display: flex;
-  gap: 0.4rem;
-  flex-shrink: 0;
-}
-.actions button {
-  padding: 0.2rem 0.55rem;
-  font-size: 0.82rem;
-}
-.msg {
-  margin: 0.75rem 0;
-}
-.msg.error {
-  color: #c0392b;
-}
 
-/* 모달 */
+/* 폼 */
-.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;
-  max-height: 90vh;
-  overflow-y: auto;
-  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);
-}
-.modal .close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.6rem;
-  width: 2rem;
-  height: 2rem;
-  border: 0;
-  background: transparent;
-  font-size: 1.5rem;
-  line-height: 1;
-}
-.modal h2 {
-  margin-bottom: 1rem;
-  font-size: 1.2rem;
-  text-align: center;
-}
 .recur-form {
   display: flex;
   flex-direction: column;
@@ -601,11 +467,7 @@ button.primary {
   gap: 0.25rem;
   font-size: 0.85rem;
 }
-.recur-form label.row {
+.recur-form label.row { flex-direction: row; align-items: center; gap: 0.4rem; }
-  flex-direction: row;
-  align-items: center;
-  gap: 0.4rem;
-}
 .recur-form input,
 .recur-form select {
   padding: 0.5rem 0.7rem;
@@ -614,66 +476,45 @@ button.primary {
   background: var(--color-background-soft);
   color: var(--color-text);
 }
-.recur-form label.row input {
+.recur-form label.row input { padding: 0; }
-  padding: 0;
+
-}
+/* 배지형 선택 */
-/* 계좌/카드 라디오 선택 */
 .field {
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
 }
-.field-row {
+.field-label { font-size: 0.82rem; opacity: 0.7; }
+.type-chips,
+.wallet-chips {
   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;
+  gap: 0.35rem;
-  padding: 0.1rem 0;
 }
-.wallet-radios .radio {
+.chip {
-  display: flex;
+  padding: 0.28rem 0.75rem;
-  flex-direction: row;
+  border: 1.5px solid var(--color-border);
-  align-items: center;
+  border-radius: 100px;
-  gap: 0.3rem;
+  background: var(--color-background-soft);
-  font-size: 0.85rem;
+  color: var(--color-text);
+  font-size: 0.82rem;
+  font-weight: 500;
   cursor: pointer;
+  line-height: 1.4;
+  transition: border-color 0.12s, background 0.12s, color 0.12s;
 }
-.wallet-radios .radio input {
+.chip:disabled { opacity: 0.45; cursor: not-allowed; }
-  padding: 0;
+/* 기본 active (계좌/주기) */
-  width: auto;
+.chip.active { border-color: hsla(160, 100%, 37%, 1); background: hsla(160, 100%, 37%, 1); color: #fff; }
-  margin: 0;
+/* 구분 배지 type별 색상 */
-}
+.chip-expense.active  { border-color: #c0392b; background: #c0392b; }
-.r-issuer {
+.chip-income.active   { border-color: #2e7d32; background: #2e7d32; }
-  margin-left: 0.2rem;
+.chip-transfer.active { border-color: #1565c0; background: #1565c0; }
-  font-size: 0.72rem;
+
-  opacity: 0.6;
-}
-.empty-hint {
-  font-size: 0.78rem;
-  opacity: 0.6;
-}
 .buttons {
   display: flex;
   justify-content: flex-end;
   gap: 0.5rem;
   margin-top: 0.5rem;
 }
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.18s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
 </style>