From 17e7dd53a617317233aebf466323fe342d7768c3 Mon Sep 17 00:00:00 2001
From: sb <sb@MacBook-Pro.local>
Date: Mon, 6 Jul 2026 23:27:26 +0900
Subject: [PATCH] =?UTF-8?q?style(ui):=20=EA=B3=84=EC=A2=8C=20=EC=B9=A9?=
 =?UTF-8?q?=EC=9D=84=20=EA=B7=A0=EC=9D=BC=20=EB=B0=95=EC=8A=A4=20=EA=B7=B8?=
 =?UTF-8?q?=EB=A6=AC=EB=93=9C=EB=A1=9C=20=E2=80=94=20=EC=9D=B4=EB=A6=84=20?=
 =?UTF-8?q?=EA=B8=B8=EC=9D=B4=20=EB=8B=AC=EB=9D=BC=EB=8F=84=20=EC=A0=95?=
 =?UTF-8?q?=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ChipSelect를 배경 있는 박스 그리드(auto-fill minmax 120px)로 변경.
자유 줄바꿈으로 들쭉날쭉하던 정렬 해소, 긴 이름은 …+툴팁.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/ui/ChipSelect.vue | 39 +++++++++++++-------------------
 1 file changed, 16 insertions(+), 23 deletions(-)

diff --git a/src/components/ui/ChipSelect.vue b/src/components/ui/ChipSelect.vue
index 530219a..80c9321 100644
--- a/src/components/ui/ChipSelect.vue
+++ b/src/components/ui/ChipSelect.vue
@@ -1,12 +1,11 @@
 <script setup>
-// select 대체 칩 선택기. 선택지가 적을 때(계좌 등) 드롭다운 대신 칩으로 노출.
+// select 대체 칩 선택기. 균일한 박스 그리드로 정렬(계좌 등 선택지가 적을 때 드롭다운 대신).
 // 사용: <ChipSelect v-model="form.walletId" :options="[{value,label}]" :disabled="..." />
 defineProps({
   modelValue: { type: [String, Number], default: '' },
   options: { type: Array, default: () => [] }, // [{ value, label }]
   disabled: { type: Boolean, default: false },
   emptyText: { type: String, default: '선택할 항목이 없습니다' },
-  cols: { type: Number, default: 0 }, // 0=자유 줄바꿈, N=한 줄에 N개(그리드)
 })
 const emit = defineEmits(['update:modelValue'])
 function pick(v, disabled) {
@@ -16,11 +15,7 @@ function pick(v, disabled) {
 </script>
 
 <template>
-  <div
-    class="chip-select"
-    :class="{ grid: cols > 0 }"
-    :style="cols > 0 ? { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` } : null"
-  >
+  <div class="chip-select">
     <button
       v-for="o in options"
       :key="String(o.value)"
@@ -28,6 +23,7 @@ function pick(v, disabled) {
       class="cs-chip"
       :class="{ active: modelValue === o.value }"
       :disabled="disabled"
+      :title="o.label"
       @click="pick(o.value, disabled)"
     >
       {{ o.label }}
@@ -37,31 +33,26 @@ function pick(v, disabled) {
 </template>
 
 <style scoped>
+/* 균일 박스 그리드 — 이름 길이가 달라도 정렬되게(폭에 맞춰 열 수 자동) */
 .chip-select {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.35rem;
-}
-.chip-select.grid {
   display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: 0.4rem;
 }
-.chip-select.grid .cs-chip {
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 .cs-chip {
-  padding: 0.28rem 0.75rem;
-  border: 1.5px solid var(--color-border);
-  border-radius: 100px;
+  padding: 0.55rem 0.6rem;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
   background: var(--color-background-soft);
   color: var(--color-text);
-  font-size: 0.82rem;
+  font-size: 0.85rem;
   font-weight: 500;
   cursor: pointer;
-  line-height: 1.4;
+  line-height: 1.3;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   transition:
     border-color 0.12s,
     background 0.12s,
@@ -75,8 +66,10 @@ function pick(v, disabled) {
   border-color: hsla(160, 100%, 37%, 1);
   background: hsla(160, 100%, 37%, 1);
   color: #fff;
+  font-weight: 700;
 }
 .cs-empty {
+  grid-column: 1 / -1;
   font-size: 0.82rem;
   opacity: 0.55;
   padding: 0.28rem 0;