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>
2026-07-04 01:24:15 +09:00
parent d364b52c73
commit ea9fbc359b
10 changed files with 1545 additions and 1367 deletions
@@ -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>
@@ -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>