fix: 분류 아코디언 화면 교정 — 분류관리 롤백 · 내역추가 적용
- CategoryView(분류 관리): 잘못 적용된 대분류 아코디언 제거, 소분류 항상 표시로 복원 - AccountView(내역 추가/수정): 2단 드롭다운 → 대분류 아코디언으로 교체 · 대분류 클릭 → 소분류 펼침(없으면 바로 선택) · 소분류 클릭 → 즉시 선택 / 선택 항목 초록 하이라이트 · 수정 진입 시 해당 대분류 자동 펼침 유지 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -66,17 +66,6 @@ async function reload() {
|
||||
const majorListEl = ref(null)
|
||||
const reorderMode = ref(false)
|
||||
|
||||
// ===== 대분류 펼침(아코디언) — 삼각형 누르면 소분류 표시 =====
|
||||
const expanded = ref(new Set())
|
||||
function toggleExpand(id) {
|
||||
const s = new Set(expanded.value)
|
||||
if (s.has(id)) s.delete(id)
|
||||
else s.add(id)
|
||||
expanded.value = s
|
||||
}
|
||||
function isExpanded(id) {
|
||||
return expanded.value.has(id)
|
||||
}
|
||||
let sortables = []
|
||||
function destroySortables() {
|
||||
sortables.forEach((s) => s.destroy())
|
||||
@@ -140,16 +129,9 @@ async function addCategory() {
|
||||
if (!name) return
|
||||
error.value = null
|
||||
try {
|
||||
const parentId = newParent.value || null
|
||||
await accountApi.createCategory({ type: activeType.value, name, parentId })
|
||||
await accountApi.createCategory({ type: activeType.value, name, parentId: newParent.value || null })
|
||||
newName.value = ''
|
||||
await reload()
|
||||
// 소분류를 추가했으면 그 대분류를 펼쳐 바로 보이게
|
||||
if (parentId) {
|
||||
const s = new Set(expanded.value)
|
||||
s.add(Number(parentId))
|
||||
expanded.value = s
|
||||
}
|
||||
} catch (e) {
|
||||
showError(e, '추가에 실패했습니다.')
|
||||
}
|
||||
@@ -245,18 +227,12 @@ onBeforeUnmount(destroySortables)
|
||||
<div class="cat-row major-row">
|
||||
<div class="cat-main">
|
||||
<span v-show="reorderMode" class="drag-handle major-handle" title="대분류 순서 변경(소분류 함께 이동)">≡</span>
|
||||
<button
|
||||
type="button" class="expand-btn" :class="{ open: isExpanded(g.major.id), empty: !g.children.length }"
|
||||
:title="g.children.length ? (isExpanded(g.major.id) ? '소분류 접기' : '소분류 펼치기') : '소분류 없음'"
|
||||
:disabled="!g.children.length" @click="toggleExpand(g.major.id)"
|
||||
>▶</button>
|
||||
<input v-model="g.major.name" class="cat-name" @keyup.enter="saveCategory(g.major)" />
|
||||
<span v-if="g.children.length && !isExpanded(g.major.id)" class="sub-count">{{ g.children.length }}</span>
|
||||
<IconBtn icon="check" title="저장" size="sm" @click="saveCategory(g.major)" />
|
||||
<IconBtn icon="trash" title="삭제" variant="danger" size="sm" @click="removeCategory(g.major)" />
|
||||
</div>
|
||||
</div>
|
||||
<ul v-show="isExpanded(g.major.id) || reorderMode" class="sub-list" :data-parent="g.major.id">
|
||||
<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">
|
||||
<span v-show="reorderMode" class="drag-handle sub-handle" title="소분류 순서 변경">≡</span>
|
||||
@@ -468,37 +444,7 @@ button.danger {
|
||||
.sub-mark {
|
||||
opacity: 0.45;
|
||||
}
|
||||
/* 대분류 펼침 삼각형 */
|
||||
.expand-btn {
|
||||
flex: none;
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
font-size: 0.7rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.expand-btn.open {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.expand-btn.empty {
|
||||
opacity: 0.15;
|
||||
cursor: default;
|
||||
}
|
||||
.sub-count {
|
||||
flex: none;
|
||||
min-width: 1.2rem;
|
||||
text-align: center;
|
||||
font-size: 0.72rem;
|
||||
padding: 0.05rem 0.3rem;
|
||||
border-radius: 999px;
|
||||
background: var(--color-border);
|
||||
color: var(--color-text);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.hint.sm {
|
||||
font-size: 0.78rem;
|
||||
margin: 0 0 0.75rem;
|
||||
|
||||
Reference in New Issue
Block a user