From 28ebe0676713284c4aa21c960ae772c94f29dd20 Mon Sep 17 00:00:00 2001
From: ByungCheol <kenneth73510@nurier.co.kr>
Date: Wed, 1 Jul 2026 00:13:58 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=B6=84=EB=A5=98=20=EC=84=A0=ED=83=9D?=
 =?UTF-8?q?=20UI=20=E2=80=94=20=EC=84=B8=EB=A1=9C=20=EC=95=84=EC=BD=94?=
 =?UTF-8?q?=EB=94=94=EC=96=B8=E2=86=92=EA=B0=80=EB=A1=9C=20=EC=B9=A9=20?=
 =?UTF-8?q?=EA=B7=B8=EB=A6=AC=EB=93=9C=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 대분류: flex-wrap 그리드(한 줄 4개)로 나열, 분류 수 증가해도 가로로 쌓임
- 대분류 선택 시 소분류가 구분선 아래 동일 그리드로 펼침
- 선택된 항목 초록 테두리·배경 강조

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

diff --git a/src/views/account/AccountView.vue b/src/views/account/AccountView.vue
index 475b0fa..288ccb1 100644
--- a/src/views/account/AccountView.vue
+++ b/src/views/account/AccountView.vue
@@ -282,7 +282,11 @@ const categoryMajor = ref('') // 펼쳐진 대분류 이름
 const majorOptionsData = computed(() =>
   categories.value.filter((c) => c.type === form.type && c.parentId == null)
 )
-// 특정 대분류의 소분류 객체 목록
+// 현재 펼쳐진 대분류 객체
+const selectedMajorObj = computed(() =>
+  majorOptionsData.value.find((m) => m.name === categoryMajor.value) ?? null
+)
+// 특정 대분류의 소분류 목록
 function subsByMajor(majorId) {
   return categories.value.filter((c) => c.parentId === majorId)
 }
@@ -1120,28 +1124,28 @@ onMounted(async () => {
               </template>
 
               <label v-if="form.type === 'INCOME' || form.type === 'EXPENSE'">분류
-                <div v-if="!addingCategory" class="cat-accordion">
-                  <div v-for="m in majorOptionsData" :key="m.id" class="acc-major">
+                <div v-if="!addingCategory" class="cat-picker">
+                  <!-- 대분류: 한 줄에 4개씩 -->
+                  <div class="acc-major-grid">
                     <button
-                      type="button" class="acc-major-btn"
-                      :class="{ active: form.category === m.name && !subsByMajor(m.id).length, expanded: categoryMajor === m.name && subsByMajor(m.id).length }"
+                      v-for="m in majorOptionsData" :key="m.id"
+                      type="button" class="acc-chip major"
+                      :class="{ active: categoryMajor === m.name }"
                       :disabled="submitting"
                       @click="onMajorClick(m)"
-                    >
-                      <span class="acc-arrow">{{ subsByMajor(m.id).length ? (categoryMajor === m.name ? '▼' : '▶') : '' }}</span>
-                      {{ m.name }}
-                    </button>
-                    <div v-if="categoryMajor === m.name && subsByMajor(m.id).length" class="acc-subs">
-                      <button
-                        v-for="s in subsByMajor(m.id)" :key="s.id"
-                        type="button" class="acc-sub-btn"
-                        :class="{ active: form.category === s.name }"
-                        :disabled="submitting"
-                        @click="form.category = s.name"
-                      >{{ s.name }}</button>
-                    </div>
+                    >{{ 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>
-                  <button type="button" class="cat-add-btn acc-add" :disabled="submitting" @click="startAddCategory">+ 추가</button>
                 </div>
                 <div v-else class="cat-input">
                   <input
@@ -1896,78 +1900,55 @@ button.primary {
   border-color: hsla(160, 100%, 37%, 1);
   color: hsla(160, 100%, 37%, 1);
 }
-/* 분류 아코디언 */
-.cat-accordion {
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  overflow: hidden;
-  max-height: 200px;
-  overflow-y: auto;
-}
-.acc-major-btn {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.45rem 0.7rem;
-  border: 0;
-  border-bottom: 1px solid var(--color-border);
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-  font-size: 0.88rem;
-  color: var(--color-text);
-}
-.acc-major-btn:last-child {
-  border-bottom: 0;
-}
-.acc-major-btn.active,
-.acc-major-btn.expanded {
-  background: var(--color-background-soft);
-  font-weight: 600;
-}
-.acc-major-btn.active {
-  color: hsla(160, 100%, 37%, 1);
-}
-.acc-arrow {
-  font-size: 0.6rem;
-  flex: none;
-  width: 0.9rem;
-  text-align: center;
-  opacity: 0.6;
-}
-.acc-subs {
+/* 분류 칩 그리드 */
+.cat-picker {
   display: flex;
   flex-direction: column;
+  gap: 0.4rem;
 }
-.acc-sub-btn {
-  padding: 0.38rem 0.7rem 0.38rem 2rem;
-  border: 0;
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-background-soft);
+.acc-major-grid,
+.acc-sub-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+.acc-sub-grid {
+  padding-top: 0.15rem;
+  border-top: 1px solid var(--color-border);
+}
+.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;
-  text-align: left;
-  font-size: 0.84rem;
+  font-size: 0.82rem;
   color: var(--color-text);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.acc-sub-btn:last-child {
-  border-bottom: 0;
-}
-.acc-sub-btn.active {
+.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-add {
-  display: block;
-  width: 100%;
-  border: 0;
-  border-top: 1px dashed var(--color-border);
-  border-radius: 0;
-  background: transparent;
-  text-align: center;
-  color: var(--color-text);
-  opacity: 0.6;
-  font-size: 0.82rem;
+.acc-chip.sub {
+  background: var(--color-background-soft);
+}
+.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;
 }
 .tag-field {
   display: flex;