From 27beaf28d4a1828ac94fbf7d2507142acb9776ff Mon Sep 17 00:00:00 2001
From: ByungCheol <kenneth73510@nurier.co.kr>
Date: Mon, 22 Jun 2026 23:49:39 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=B6=84=EB=A5=98=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=20=ED=96=89=20=EA=B0=80=EB=A1=9C=20=EC=98=A4=EB=B2=84=ED=94=8C?=
 =?UTF-8?q?=EB=A1=9C=EC=9A=B0=20=E2=80=94=20=EC=9D=B4=EB=A6=84+=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=9C=97=EC=A4=84=20/=20=EB=8C=80=EB=B6=84?=
 =?UTF-8?q?=EB=A5=98=20select=20=EC=95=84=EB=9E=AB=EC=A4=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 좁은 화면에서 버튼이 화면 밖으로 밀리던 문제 해결
- 행을 2단(이름·저장·삭제 / 대분류 선택)으로 분리, 버튼 sm 크기
- 추가 폼도 대분류 선택은 윗줄, 이름+추가는 아랫줄로 분리

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/views/account/CategoryView.vue | 70 +++++++++++++++++++++---------
 1 file changed, 49 insertions(+), 21 deletions(-)

diff --git a/src/views/account/CategoryView.vue b/src/views/account/CategoryView.vue
index 489e14d..07174d9 100644
--- a/src/views/account/CategoryView.vue
+++ b/src/views/account/CategoryView.vue
@@ -143,8 +143,10 @@ onBeforeUnmount(() => sortable?.destroy())
         <option value="">대분류로 추가</option>
         <option v-for="m in majors" :key="m.id" :value="m.id">{{ m.name }}의 소분류</option>
       </select>
-      <input v-model="newName" type="text" :placeholder="activeType === 'EXPENSE' ? '예: 식비, 교통' : '예: 급여, 용돈'" />
-      <IconBtn icon="plus" title="추가" variant="primary" type="submit" />
+      <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">≡ 손잡이를 끌어 순서 변경. 각 행의 대분류를 바꾸면 소분류로 묶입니다.</p>
 
@@ -153,15 +155,20 @@ onBeforeUnmount(() => sortable?.destroy())
 
     <ul v-show="!loading && rows.length" ref="listEl" class="cat-list">
       <li v-for="c in rows" :key="c.id" :data-id="c.id" class="cat-row" :class="{ child: c.parentId != null }">
-        <span class="drag-handle" title="드래그하여 순서 변경">≡</span>
-        <span v-if="c.parentId != null" class="sub-mark" title="소분류">↳</span>
-        <input v-model="c.name" class="cat-name" @keyup.enter="saveCategory(c)" />
-        <select v-model="c.parentId" class="parent-sel" title="대분류" @change="saveCategory(c)">
-          <option :value="null">(대분류)</option>
-          <option v-for="m in parentOptions(c)" :key="m.id" :value="m.id">{{ m.name }}</option>
-        </select>
-        <IconBtn icon="check" title="저장" @click="saveCategory(c)" />
-        <IconBtn icon="trash" title="삭제" variant="danger" @click="removeCategory(c)" />
+        <div class="cat-main">
+          <span class="drag-handle" title="드래그하여 순서 변경">≡</span>
+          <span v-if="c.parentId != null" class="sub-mark" title="소분류">↳</span>
+          <input v-model="c.name" class="cat-name" @keyup.enter="saveCategory(c)" />
+          <IconBtn icon="check" title="저장" size="sm" @click="saveCategory(c)" />
+          <IconBtn icon="trash" title="삭제" variant="danger" size="sm" @click="removeCategory(c)" />
+        </div>
+        <label class="cat-parent">
+          <span class="pl">대분류</span>
+          <select v-model="c.parentId" class="parent-sel" title="대분류" @change="saveCategory(c)">
+            <option :value="null">(없음 · 대분류)</option>
+            <option v-for="m in parentOptions(c)" :key="m.id" :value="m.id">{{ m.name }}</option>
+          </select>
+        </label>
       </li>
     </ul>
     <p v-if="!loading && !rows.length" class="msg">
@@ -231,11 +238,17 @@ button.danger {
 }
 .new-cat {
   display: flex;
+  flex-direction: column;
   gap: 0.5rem;
   margin-bottom: 1rem;
 }
-.new-cat input {
+.nc-line {
+  display: flex;
+  gap: 0.5rem;
+}
+.nc-line input {
   flex: 1;
+  min-width: 0;
 }
 .cat-list {
   list-style: none;
@@ -244,12 +257,33 @@ button.danger {
 }
 .cat-row {
   display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  padding: 0.4rem 0;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 0.5rem 0;
   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;
@@ -265,12 +299,6 @@ button.danger {
   flex: 1;
   min-width: 0;
 }
-.parent-sel {
-  max-width: 40%;
-}
-.new-cat .parent-sel {
-  flex: 0 0 auto;
-}
 .cat-row.child {
   padding-left: 1.2rem;
 }