feat: 투자 계좌를 투자금·평가액 입력형으로 단순화 (종목 관리 제거)
CI / build (push) Successful in 34s

- 종목(매수/매도/현재가) 관리 UI(InvestPortfolio) 제거 — 퇴직연금·연금처럼
  투자금(투입원금)과 현재 평가액만 입력하면 손익·수익률 자동 계산
- 계좌 펼침: 종목 포트폴리오 → 투자금/평가액/손익 요약 카드
- 폼: '현재 평가액'을 기본 입력 필드로, 안내 문구 정리
- 투자 탭 진입 시 자동 시세갱신 로직 제거(불필요)
- 백엔드 변경 없음(평가액 직접입력 경로 그대로 사용)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ByungCheol
2026-06-09 23:12:22 +09:00
parent 9807472474
commit dba0741cca
+48 -28
View File
@@ -3,7 +3,6 @@ import { onBeforeUnmount, onMounted, reactive, ref, watch, nextTick } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import Sortable from 'sortablejs' import Sortable from 'sortablejs'
import { accountApi } from '@/api/accountApi' import { accountApi } from '@/api/accountApi'
import InvestPortfolio from './InvestPortfolio.vue'
import IconBtn from '@/components/ui/IconBtn.vue' import IconBtn from '@/components/ui/IconBtn.vue'
const router = useRouter() const router = useRouter()
@@ -88,21 +87,9 @@ function syncRows() {
} }
watch([wallets, activeType], syncRows, { immediate: true }) watch([wallets, activeType], syncRows, { immediate: true })
// 탭 선택 투자 탭이면 전체 시세를 갱신해 계좌 평가액에 반영 // 탭 선택 (투자 계좌는 평가액 직접입력 방식 — 별도 시세갱신 없음)
const refreshingInvest = ref(false) function selectTab(key) {
async function selectTab(key) {
activeType.value = key activeType.value = key
if (key === 'INVEST' && wallets.value.some((w) => w.type === 'INVEST')) {
refreshingInvest.value = true
try {
await accountApi.refreshAllPrices()
await load()
} catch {
// 시세 갱신 실패는 조용히 무시(기존 값 유지)
} finally {
refreshingInvest.value = false
}
}
} }
// ===== 드래그앤드랍 순서 변경 (SortableJS, 터치 지원) ===== // ===== 드래그앤드랍 순서 변경 (SortableJS, 터치 지원) =====
@@ -208,7 +195,7 @@ function issuerLabel(t) {
return t === 'BANK' ? '은행명' : t === 'CARD' ? '카드사' : t === 'INVEST' ? '증권사' : '대출기관' return t === 'BANK' ? '은행명' : t === 'CARD' ? '카드사' : t === 'INVEST' ? '증권사' : '대출기관'
} }
function openingLabel(t) { function openingLabel(t) {
return t === 'BANK' ? '초기 잔액' : t === 'CARD' ? '초기 미결제 금액' : t === 'INVEST' ? '초기 투입원금' : '대출 잔액(원금)' return t === 'BANK' ? '초기 잔액' : t === 'CARD' ? '초기 미결제 금액' : t === 'INVEST' ? '투자금(투입원금)' : '대출 잔액(원금)'
} }
// 투자 수익률(%) — 투입원금 대비 평가손익 // 투자 수익률(%) — 투입원금 대비 평가손익
function returnPct(w) { function returnPct(w) {
@@ -354,7 +341,6 @@ onBeforeUnmount(() => sortable?.destroy())
<IconBtn class="tab-add" icon="plus" title="추가" variant="primary" @click="openCreate" /> <IconBtn class="tab-add" icon="plus" title="추가" variant="primary" @click="openCreate" />
</div> </div>
<p v-if="refreshingInvest" class="msg refresh-note">시세 갱신 </p>
<p v-if="error" class="msg error">{{ error }}</p> <p v-if="error" class="msg error">{{ error }}</p>
<p v-if="loading" class="msg">불러오는 중...</p> <p v-if="loading" class="msg">불러오는 중...</p>
@@ -378,8 +364,7 @@ onBeforeUnmount(() => sortable?.destroy())
@click.stop="toggleReveal(w.id)" @click.stop="toggleReveal(w.id)"
>{{ revealedAccts.has(w.id) ? '🙈' : '👁' }}</button> >{{ revealedAccts.has(w.id) ? '🙈' : '👁' }}</button>
</template> </template>
<template v-if="w.type === 'INVEST' && w.manualValuation"> · 평가액 직접입력</template> <template v-if="w.type === 'INVEST'"> · 투자금 {{ won(w.investedAmount) }}</template>
<template v-else-if="w.type === 'INVEST'"> · 예수금 {{ won(w.deposit) }} · 주식 {{ won(w.stockValue) }}</template>
</span> </span>
</div> </div>
<div class="balance-wrap"> <div class="balance-wrap">
@@ -397,13 +382,20 @@ onBeforeUnmount(() => sortable?.destroy())
</div> </div>
</div> </div>
<!-- 드롭다운: 투자는 포트폴리오, 외는 계좌별 내역 --> <!-- 드롭다운: 투자는 투자금·평가액 요약, 외는 계좌별 내역 -->
<div v-if="expandedId === w.id" class="entry-drop"> <div v-if="expandedId === w.id" class="entry-drop">
<div v-if="w.type === 'INVEST' && w.manualValuation" class="manual-note"> <div v-if="w.type === 'INVEST'" class="manual-note">
<p>평가액을 <b>직접 입력</b>하는 계좌입니다. 종목을 관리하지 않고 입력한 현재 평가액({{ won(w.currentValue) }}) 사용합니다.</p> <div class="invest-figs">
<p class="manual-sub">평가액을 갱신하려면 <b>수정</b>에서 현재 평가액 바꾸세요. 종목으로 자동계산하려면 평가액을 비우면 됩니다.</p> <div class="fig"><span class="fig-k">투자금</span><span class="fig-v">{{ won(w.investedAmount) }}</span></div>
<div class="fig"><span class="fig-k">평가액</span><span class="fig-v">{{ won(w.balance) }}</span></div>
<div class="fig"><span class="fig-k">손익</span>
<span class="fig-v" :class="(w.valuationGain || 0) < 0 ? 'neg' : 'pos'">
{{ (w.valuationGain || 0) >= 0 ? '+' : '' }}{{ won(w.valuationGain || 0) }}<span v-if="returnPct(w) != null"> ({{ returnPct(w) }}%)</span>
</span>
</div>
</div>
<p class="manual-sub">평가액을 갱신하려면 <b>수정</b>에서 현재 평가액 바꾸세요.</p>
</div> </div>
<InvestPortfolio v-else-if="w.type === 'INVEST'" :wallet-id="w.id" @changed="load" />
<template v-else> <template v-else>
<p v-if="loadingEntries" class="drop-msg">불러오는 중...</p> <p v-if="loadingEntries" class="drop-msg">불러오는 중...</p>
<template v-else-if="(entriesByWallet[w.id] || []).length"> <template v-else-if="(entriesByWallet[w.id] || []).length">
@@ -454,12 +446,12 @@ onBeforeUnmount(() => sortable?.destroy())
</label> </label>
<label>{{ openingLabel(form.type) }}<input v-model.number="form.openingBalance" type="number" min="0" :disabled="submitting" /></label> <label>{{ openingLabel(form.type) }}<input v-model.number="form.openingBalance" type="number" min="0" :disabled="submitting" /></label>
<template v-if="form.type === 'INVEST'"> <template v-if="form.type === 'INVEST'">
<label>현재 평가액 (직접 입력) <label>현재 평가액
<input v-model.number="form.currentValue" type="number" min="0" placeholder="(선택) 퇴직연금·연금처럼 종목 관리가 어려운 계좌" :disabled="submitting" /> <input v-model.number="form.currentValue" type="number" min="0" placeholder="예: 현재 계좌 평가금액" :disabled="submitting" />
</label> </label>
<p class="form-hint"> <p class="form-hint">
증권계좌 입금은 은행투자 이체 기록하세요. 계좌를 펼치면 <b>종목·매수/매도·현재가</b> 관리할 있고, 평가금액·손익은 자동 계산됩니다.<br /> <b>투자금</b>(투입원금) <b>현재 평가액</b> 입력하면 손익이 자동 계산됩니다. (퇴직연금·연금·증권계좌 공통)<br />
<b>퇴직연금·연금</b>처럼 종목 단위 관리가 어려우면 <b>현재 평가액</b> 주기적으로 갱신하세요. 입력하면 종목 자동계산 대신 값을 평가액으로 사용합니다. 평가액은 <b>수정</b>에서 주기적으로 갱신하세요.
</p> </p>
</template> </template>
<label>기준일<input v-model="form.openingDate" type="date" :disabled="submitting" /></label> <label>기준일<input v-model="form.openingDate" type="date" :disabled="submitting" /></label>
@@ -628,6 +620,34 @@ button.primary {
font-size: 0.78rem; font-size: 0.78rem;
margin: 0; margin: 0;
} }
.invest-figs {
display: flex;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.invest-figs .fig {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.5rem 0.6rem;
background: var(--color-background-soft, #f4f5f7);
border-radius: 8px;
}
.invest-figs .fig-k {
font-size: 0.72rem;
opacity: 0.6;
}
.invest-figs .fig-v {
font-size: 0.95rem;
font-weight: 600;
}
.invest-figs .fig-v.pos {
color: #1a7f37;
}
.invest-figs .fig-v.neg {
color: #cf222e;
}
.month-nav { .month-nav {
display: flex; display: flex;
align-items: center; align-items: center;