From 1e9ff0408c635cb935987968409e855ad51edcf9 Mon Sep 17 00:00:00 2001
From: ByungCheol <kenneth73510@nurier.co.kr>
Date: Wed, 1 Jul 2026 00:32:59 +0900
Subject: [PATCH] =?UTF-8?q?feat(account):=20=EB=82=B4=EC=97=AD=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B6=84=EB=A5=98=20=E2=80=94=20=ED=96=89=20?=
 =?UTF-8?q?=EC=82=BD=EC=9E=85=ED=98=95=20=EC=95=84=EC=BD=94=EB=94=94?=
 =?UTF-8?q?=EC=96=B8=20+=20=EB=8C=80/=EC=86=8C=EB=B6=84=EB=A5=98=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B2=84=ED=8A=BC=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 대분류를 4개씩 행으로 렌더링(majorRows computed)
- 선택된 대분류가 속한 행 바로 아래 소분류 칩 삽입(rowContainsSelected)
- + 소분류 버튼: 소분류 행 내부, 선택된 대분류 하위로 추가
- + 대분류 버튼: 맨 아래, 선택 초기화 후 대분류로 추가
- 입력 placeholder에 추가 맥락 표시(대분류명 > 새 소분류)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/views/account/AccountView.vue | 72 +++++++++++++++++++++----------
 1 file changed, 49 insertions(+), 23 deletions(-)

diff --git a/src/views/account/AccountView.vue b/src/views/account/AccountView.vue
index 4616868..178603b 100644
--- a/src/views/account/AccountView.vue
+++ b/src/views/account/AccountView.vue
@@ -282,10 +282,22 @@ 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 rowContainsSelected(row) {
+  if (!selectedMajorObj.value) return false
+  return row.some((m) => m.id === selectedMajorObj.value.id)
+}
 // 특정 대분류의 소분류 목록
 function subsByMajor(majorId) {
   return categories.value.filter((c) => c.parentId === majorId)
@@ -322,10 +334,19 @@ const allCategoryNames = computed(() => [...new Set(categories.value.map((c) =>
 
 // 모달 내 분류 인라인 추가
 const addingCategory = ref(false)
+const addingAsMajor = ref(true) // true=대분류 추가, false=소분류 추가
 const newCategoryName = ref('')
 const catSubmitting = ref(false)
-function startAddCategory() {
+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() {
@@ -1125,32 +1146,34 @@ onMounted(async () => {
 
               <label v-if="form.type === 'INCOME' || form.type === 'EXPENSE'">분류
                 <div v-if="!addingCategory" class="cat-picker">
-                  <!-- 대분류: 한 줄에 4개씩 -->
-                  <div class="acc-major-grid">
-                    <button
-                      v-for="m in majorOptionsData" :key="m.id"
-                      type="button" class="acc-chip major"
-                      :class="{ active: categoryMajor === m.name }"
-                      :disabled="submitting"
-                      @click="onMajorClick(m)"
-                    >{{ m.name }}</button>
-                    <button type="button" class="acc-chip add-chip" :disabled="submitting" @click="startAddCategory">+ 추가</button>
-                  </div>
-                  <!-- 소분류: 선택된 대분류가 있을 때만 표시 -->
-                  <div v-if="selectedMajorObj && 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>
-                  </div>
+                  <!-- 대분류 행별 렌더링: 선택된 대분류가 속한 행 바로 아래 소분류 삽입 -->
+                  <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="submitting"
+                        @click="onMajorClick(m)"
+                      >{{ m.name }}</button>
+                    </div>
+                    <div v-if="rowContainsSelected(row) && selectedMajorObj && 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="form.type === 'EXPENSE' ? '새 지출 분류' : '새 수입 분류'"
+                    :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>
@@ -1951,6 +1974,9 @@ button.primary {
   opacity: 0.55;
   border-style: dashed;
 }
+.acc-chip.add-chip.sub-add {
+  flex: 0 0 auto;
+}
 .tag-field {
   display: flex;
   flex-direction: column;