Merge branch 'dev'

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>
+      <div class="nc-line">
         <input v-model="newName" type="text" :placeholder="activeType === 'EXPENSE' ? '예: 식비, 교통' : '예: 급여, 용돈'" />
-      <IconBtn icon="plus" title="추가" variant="primary" type="submit" />
+        <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 }">
+        <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 :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)" />
+        </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;
 }