fix: 외화 입력폼 다듬기 — 자동 버튼 높이 일치 + 환율 4자리 반올림
CI / build (push) Failing after 15m22s

- 환율 input과 '↻ 자동' 버튼을 한 행(stretch)으로 묶어 높이 일치
- 자동조회 환율을 소수점 4자리로 반올림(입력폼 step·표시 일관)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ByungCheol
2026-06-30 21:56:04 +09:00
parent 5795f328a1
commit f996075da7
+26 -13
View File
@@ -103,7 +103,8 @@ async function fetchRate() {
fxLoading.value = true fxLoading.value = true
try { try {
const res = await accountApi.fxRate(form.currency, 'KRW') const res = await accountApi.fxRate(form.currency, 'KRW')
if (res?.rate != null) form.rate = Number(res.rate) // 환율은 소수점 4자리로 통일(입력폼 step·저장 정밀도 일치)
if (res?.rate != null) form.rate = Math.round(Number(res.rate) * 10000) / 10000
else formInfo.value = '환율을 가져오지 못했어요. 직접 입력해 주세요.' else formInfo.value = '환율을 가져오지 못했어요. 직접 입력해 주세요.'
} catch { } catch {
formInfo.value = '환율 조회에 실패했어요. 직접 입력해 주세요.' formInfo.value = '환율 조회에 실패했어요. 직접 입력해 주세요.'
@@ -1150,10 +1151,13 @@ onMounted(async () => {
</div> </div>
</label> </label>
<div v-if="!isRepayment && isForeign" class="fx-row"> <div v-if="!isRepayment && isForeign" class="fx-row">
<label class="fx-rate">환율(1 {{ form.currency }}) <div class="fx-rate-field">
<input v-model.number="form.rate" type="number" min="0" step="0.0001" placeholder="원" :disabled="submitting" /> <span class="fx-label">환율(1 {{ form.currency }})</span>
</label> <div class="fx-rate-input">
<button type="button" class="fx-auto" :disabled="submitting || fxLoading" @click="fetchRate">{{ fxLoading ? '' : ' 자동' }}</button> <input v-model.number="form.rate" type="number" min="0" step="0.0001" placeholder="원" :disabled="submitting" />
<button type="button" class="fx-auto" :disabled="submitting || fxLoading" @click="fetchRate">{{ fxLoading ? '' : ' 자동' }}</button>
</div>
</div>
<span class="fx-krw">= {{ (convertedKrw || 0).toLocaleString('ko-KR') }}</span> <span class="fx-krw">= {{ (convertedKrw || 0).toLocaleString('ko-KR') }}</span>
</div> </div>
<label>메모<input v-model="form.memo" type="text" placeholder="(선택)" :disabled="submitting" /></label> <label>메모<input v-model="form.memo" type="text" placeholder="(선택)" :disabled="submitting" /></label>
@@ -1937,34 +1941,43 @@ button.primary {
} }
.fx-row { .fx-row {
display: flex; display: flex;
align-items: center; align-items: flex-end;
gap: 0.5rem; gap: 0.6rem;
flex-wrap: wrap; flex-wrap: wrap;
margin: -0.3rem 0 0.2rem; margin: -0.3rem 0 0.2rem;
} }
.fx-rate { .fx-rate-field {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 0.8rem;
} }
.fx-rate input { .fx-label {
font-size: 0.8rem;
margin-bottom: 0.2rem;
}
/* input 과 버튼을 한 행으로 — stretch 로 버튼 높이를 input 에 맞춤 */
.fx-rate-input {
display: flex;
align-items: stretch;
gap: 0.4rem;
}
.fx-rate-input input {
width: 7rem; width: 7rem;
} }
.fx-auto { .fx-auto {
align-self: flex-end; padding: 0 0.7rem;
padding: 0.4rem 0.7rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 6px; border-radius: 6px;
background: var(--color-background-soft); background: var(--color-background-soft);
color: var(--color-text); color: var(--color-text);
font-size: 0.82rem; font-size: 0.82rem;
white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
.fx-krw { .fx-krw {
align-self: flex-end;
font-weight: 700; font-weight: 700;
color: #b8860b; color: #b8860b;
font-size: 0.9rem; font-size: 0.9rem;
padding-bottom: 0.45rem;
} }
.row-wallet { .row-wallet {
margin-right: 0.35rem; margin-right: 0.35rem;