feat(ui): 공통 ChipSelect + 계좌 선택을 칩(2열)으로

select 대체 ChipSelect 컴포넌트(cols 지원) 신설. 계좌 선택 드롭다운을 칩(한 줄 2개)으로 교체: - AccountView 출금·입금·상환대상 계좌 - RecurringView 출금·입금 계좌 계좌 종류 뱃지로 이미 걸러지고 무료 한도(종류별 2개)라 칩 수도 적당. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-06 23:06:17 +09:00
parent e2d9b8ea37
commit 810a5d9380
3 changed files with 148 additions and 32 deletions
@@ -0,0 +1,84 @@
+<script setup>
+// 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) {
+  if (disabled) return
+  emit('update:modelValue', v)
+}
+</script>
+
+<template>
+  <div
+    class="chip-select"
+    :class="{ grid: cols > 0 }"
+    :style="cols > 0 ? { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` } : null"
+  >
+    <button
+      v-for="o in options"
+      :key="String(o.value)"
+      type="button"
+      class="cs-chip"
+      :class="{ active: modelValue === o.value }"
+      :disabled="disabled"
+      @click="pick(o.value, disabled)"
+    >
+      {{ o.label }}
+    </button>
+    <span v-if="!options.length" class="cs-empty">{{ emptyText }}</span>
+  </div>
+</template>
+
+<style scoped>
+.chip-select {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+.chip-select.grid {
+  display: grid;
+  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;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+  font-size: 0.82rem;
+  font-weight: 500;
+  cursor: pointer;
+  line-height: 1.4;
+  transition:
+    border-color 0.12s,
+    background 0.12s,
+    color 0.12s;
+}
+.cs-chip:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.cs-chip.active {
+  border-color: hsla(160, 100%, 37%, 1);
+  background: hsla(160, 100%, 37%, 1);
+  color: #fff;
+}
+.cs-empty {
+  font-size: 0.82rem;
+  opacity: 0.55;
+  padding: 0.28rem 0;
+}
+</style>
@@ -7,6 +7,7 @@ import { useDialog } from '@/composables/dialog'
 import { appLock } from '@/composables/appLock'
 import IconBtn from '@/components/ui/IconBtn.vue'
 import CategoryPicker from '@/components/ui/CategoryPicker.vue'
+import ChipSelect from '@/components/ui/ChipSelect.vue'
 import { imageToBlob, parseReceiptText } from '@/utils/receiptOcr'
 import { cardNotif } from '@/native/cardNotif'
 import { CARD_NOTIF_ENABLED } from '@/config/features'
@@ -355,6 +356,20 @@ const TYPES = [
 ]
 const walletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.walletKind))
 const toWalletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.toWalletKind))
+// 칩 선택용 옵션(계좌 선택을 select→칩으로)
+function walletOpts(list) {
+  return list.map((w) => ({ value: w.id, label: w.name || w.issuer }))
+}
+// 출금/결제 계좌: 현금 지출·수입은 '미지정' 선택 허용
+const fromWalletOptions = computed(() => {
+  const opts = walletOpts(walletsOfKind.value)
+  if (form.walletKind === 'CASH' && (form.type === 'INCOME' || form.type === 'EXPENSE')) {
+    opts.unshift({ value: '', label: '현금(미지정)' })
+  }
+  return opts
+})
+const toWalletOptions = computed(() => walletOpts(toWalletsOfKind.value))
+const repayTargetOptions = computed(() => walletOpts(liabilityWallets.value))
 // 선택한 계좌 종류 라벨(계좌/현금/카드/대출/증권) — 셀렉트 안내문에 사용
 const walletKindLabel = computed(() => WALLET_KINDS.find((k) => k.value === form.walletKind)?.label || '계좌')
 function walletKindOf(id) {
@@ -1139,12 +1154,14 @@ onMounted(async () => {
                    {{ k.label }}
                  </button>
                </div>
-                <select v-if="form.walletKind" v-model="form.walletId" :disabled="submitting">
-                  <option value="">{{ form.walletKind === 'CASH' && (form.type === 'INCOME' || form.type === 'EXPENSE') ? '현금 (계좌 미지정)' : (form.type === 'INCOME' || form.type === 'EXPENSE' ? walletKindLabel + ' 선택' : '출금 계좌 선택') }}</option>
-                  <option v-for="w in walletsOfKind" :key="w.id" :value="w.id">
-                    {{ w.name || w.issuer }}
-                  </option>
-                </select>
+                <ChipSelect
+                  v-if="form.walletKind"
+                  v-model="form.walletId"
+                  :options="fromWalletOptions"
+                  :cols="2"
+                  :disabled="submitting"
+                  :empty-text="`등록된 ${walletKindLabel}이(가) 없습니다`"
+                />
              </div>
              <!-- 카드 지출: 할부 개월수 (일시불 또는 2~24개월) -->
              <label v-if="showInstallment">할부
@@ -1164,25 +1181,29 @@ onMounted(async () => {
                      {{ k.label }}
                    </button>
                  </div>
-                  <select v-if="form.toWalletKind" v-model="form.toWalletId" :disabled="submitting">
-                    <option value="">입금 계좌 선택</option>
-                    <option v-for="w in toWalletsOfKind" :key="w.id" :value="w.id">
-                      {{ w.name || w.issuer }}
-                    </option>
-                  </select>
+                  <ChipSelect
+                    v-if="form.toWalletKind"
+                    v-model="form.toWalletId"
+                    :options="toWalletOptions"
+                    :cols="2"
+                    :disabled="submitting"
+                    empty-text="등록된 계좌가 없습니다"
+                  />
                </div>
              </template>

              <!-- 상환/납부: 대상(대출/카드) + 원금 + 이자 (+카드면 연회비). 원금=이체·이자/연회비=지출 -->
              <template v-if="isRepayment">
-                <label>대상(대출/카드)
-                  <select v-model="form.toWalletId" :disabled="submitting">
-                    <option value="">(선택)</option>
-                    <option v-for="w in liabilityWallets" :key="w.id" :value="w.id">
-                      {{ w.name || w.issuer }}
-                    </option>
-                  </select>
-                </label>
+                <div class="field">
+                  <span class="field-label">대상(대출/카드)</span>
+                  <ChipSelect
+                    v-model="form.toWalletId"
+                    :options="repayTargetOptions"
+                    :cols="2"
+                    :disabled="submitting"
+                    empty-text="등록된 대출/카드가 없습니다"
+                  />
+                </div>
                <!-- 금리 설정된 대출 계좌: 방식별 자동계산 -->
                <template v-if="repayTargetLoanWallet">
                  <!-- 원리금균등: 납입금액 직접 입력 -->
@@ -5,6 +5,7 @@ import { useDialog } from '@/composables/dialog'
 import IconBtn from '@/components/ui/IconBtn.vue'
 import AppModal from '@/components/ui/AppModal.vue'
 import CategoryPicker from '@/components/ui/CategoryPicker.vue'
+import ChipSelect from '@/components/ui/ChipSelect.vue'

 const dialog = useDialog()

@@ -60,6 +61,12 @@ const WALLET_KINDS = [
 ]
 const walletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.walletKind))
 const toWalletsOfKind = computed(() => wallets.value.filter((w) => w.type === form.toWalletKind))
+// 계좌 선택 칩 옵션
+function walletOpts(list) {
+  return list.map((w) => ({ value: w.id, label: `${w.name}${w.issuer ? ` (${w.issuer})` : ''}` }))
+}
+const fromWalletOptions = computed(() => walletOpts(walletsOfKind.value))
+const toWalletOptions = computed(() => walletOpts(toWalletsOfKind.value))
 function walletKindOf(id) {
  const w = wallets.value.find((x) => x.id === id)
  return w ? w.type : ''
@@ -294,12 +301,14 @@ onMounted(load)
              @click="form.walletKind = k.value; onWalletKindChange()"
            >{{ k.label }}</button>
          </div>
-          <select v-if="form.walletKind" v-model="form.walletId" :disabled="submitting">
-            <option value="">(선택)</option>
-            <option v-for="w in walletsOfKind" :key="w.id" :value="w.id">
-              {{ w.name }}{{ w.issuer ? ` (${w.issuer})` : '' }}
-            </option>
-          </select>
+          <ChipSelect
+            v-if="form.walletKind"
+            v-model="form.walletId"
+            :options="fromWalletOptions"
+            :cols="2"
+            :disabled="submitting"
+            empty-text="등록된 계좌가 없습니다"
+          />
        </div>

        <!-- 입금 계좌 종류 배지 (이체일 때만) -->
@@ -313,12 +322,14 @@ onMounted(load)
              @click="form.toWalletKind = k.value; onToWalletKindChange()"
            >{{ k.label }}</button>
          </div>
-          <select v-if="form.toWalletKind" v-model="form.toWalletId" :disabled="submitting">
-            <option value="">(선택)</option>
-            <option v-for="w in toWalletsOfKind" :key="w.id" :value="w.id">
-              {{ w.name }}{{ w.issuer ? ` (${w.issuer})` : '' }}
-            </option>
-          </select>
+          <ChipSelect
+            v-if="form.toWalletKind"
+            v-model="form.toWalletId"
+            :options="toWalletOptions"
+            :cols="2"
+            :disabled="submitting"
+            empty-text="등록된 계좌가 없습니다"
+          />
        </div>

        <!-- 분류 — CategoryPicker (이체 제외) -->