From dba0741ccaed6626be4f2fca06598c807b8276cd Mon Sep 17 00:00:00 2001
From: ByungCheol <kenneth73510@nurier.co.kr>
Date: Tue, 9 Jun 2026 23:12:22 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=88=AC=EC=9E=90=20=EA=B3=84=EC=A2=8C?=
 =?UTF-8?q?=EB=A5=BC=20=ED=88=AC=EC=9E=90=EA=B8=88=C2=B7=ED=8F=89=EA=B0=80?=
 =?UTF-8?q?=EC=95=A1=20=EC=9E=85=EB=A0=A5=ED=98=95=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=8B=A8=EC=88=9C=ED=99=94=20(=EC=A2=85=EB=AA=A9=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EC=A0=9C=EA=B1=B0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/views/account/AccountWalletView.vue | 76 ++++++++++++++++---------
 1 file changed, 48 insertions(+), 28 deletions(-)

diff --git a/src/views/account/AccountWalletView.vue b/src/views/account/AccountWalletView.vue
index 6a29137..d02b471 100644
--- a/src/views/account/AccountWalletView.vue
+++ b/src/views/account/AccountWalletView.vue
@@ -3,7 +3,6 @@ import { onBeforeUnmount, onMounted, reactive, ref, watch, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import Sortable from 'sortablejs'
 import { accountApi } from '@/api/accountApi'
-import InvestPortfolio from './InvestPortfolio.vue'
 import IconBtn from '@/components/ui/IconBtn.vue'
 
 const router = useRouter()
@@ -88,21 +87,9 @@ function syncRows() {
 }
 watch([wallets, activeType], syncRows, { immediate: true })
 
-// 탭 선택 — 투자 탭이면 전체 시세를 갱신해 계좌 평가액에 반영
-const refreshingInvest = ref(false)
-async function selectTab(key) {
+// 탭 선택 (투자 계좌는 평가액 직접입력 방식 — 별도 시세갱신 없음)
+function selectTab(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, 터치 지원) =====
@@ -208,7 +195,7 @@ function issuerLabel(t) {
   return t === 'BANK' ? '은행명' : t === 'CARD' ? '카드사' : t === 'INVEST' ? '증권사' : '대출기관'
 }
 function openingLabel(t) {
-  return t === 'BANK' ? '초기 잔액' : t === 'CARD' ? '초기 미결제 금액' : t === 'INVEST' ? '초기 투입원금' : '대출 잔액(원금)'
+  return t === 'BANK' ? '초기 잔액' : t === 'CARD' ? '초기 미결제 금액' : t === 'INVEST' ? '투자금(투입원금)' : '대출 잔액(원금)'
 }
 // 투자 수익률(%) — 투입원금 대비 평가손익
 function returnPct(w) {
@@ -354,7 +341,6 @@ onBeforeUnmount(() => sortable?.destroy())
       <IconBtn class="tab-add" icon="plus" title="추가" variant="primary" @click="openCreate" />
     </div>
 
-    <p v-if="refreshingInvest" class="msg refresh-note">시세 갱신 중…</p>
     <p v-if="error" class="msg error">{{ error }}</p>
     <p v-if="loading" class="msg">불러오는 중...</p>
 
@@ -378,8 +364,7 @@ onBeforeUnmount(() => sortable?.destroy())
                   @click.stop="toggleReveal(w.id)"
                 >{{ revealedAccts.has(w.id) ? '🙈' : '👁' }}</button>
               </template>
-              <template v-if="w.type === 'INVEST' && w.manualValuation"> · 평가액 직접입력</template>
-              <template v-else-if="w.type === 'INVEST'"> · 예수금 {{ won(w.deposit) }} · 주식 {{ won(w.stockValue) }}</template>
+              <template v-if="w.type === 'INVEST'"> · 투자금 {{ won(w.investedAmount) }}</template>
             </span>
           </div>
           <div class="balance-wrap">
@@ -397,13 +382,20 @@ onBeforeUnmount(() => sortable?.destroy())
           </div>
         </div>
 
-        <!-- 드롭다운: 투자는 포트폴리오, 그 외는 계좌별 내역 -->
+        <!-- 드롭다운: 투자는 투자금·평가액 요약, 그 외는 계좌별 내역 -->
         <div v-if="expandedId === w.id" class="entry-drop">
-          <div v-if="w.type === 'INVEST' && w.manualValuation" class="manual-note">
-            <p>평가액을 <b>직접 입력</b>하는 계좌입니다. 종목을 관리하지 않고 입력한 현재 평가액({{ won(w.currentValue) }})을 사용합니다.</p>
-            <p class="manual-sub">평가액을 갱신하려면 위 <b>수정</b>에서 ‘현재 평가액’을 바꾸세요. 종목으로 자동계산하려면 평가액을 비우면 됩니다.</p>
+          <div v-if="w.type === 'INVEST'" class="manual-note">
+            <div class="invest-figs">
+              <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>
-          <InvestPortfolio v-else-if="w.type === 'INVEST'" :wallet-id="w.id" @changed="load" />
           <template v-else>
           <p v-if="loadingEntries" class="drop-msg">불러오는 중...</p>
           <template v-else-if="(entriesByWallet[w.id] || []).length">
@@ -454,12 +446,12 @@ onBeforeUnmount(() => sortable?.destroy())
               </label>
               <label>{{ openingLabel(form.type) }}<input v-model.number="form.openingBalance" type="number" min="0" :disabled="submitting" /></label>
               <template v-if="form.type === 'INVEST'">
-                <label>현재 평가액 (직접 입력)
-                  <input v-model.number="form.currentValue" type="number" min="0" placeholder="(선택) 퇴직연금·연금처럼 종목 관리가 어려운 계좌" :disabled="submitting" />
+                <label>현재 평가액
+                  <input v-model.number="form.currentValue" type="number" min="0" placeholder="예: 현재 계좌 평가금액" :disabled="submitting" />
                 </label>
                 <p class="form-hint">
-                  증권계좌 입금은 은행→투자 ‘이체’로 기록하세요. 계좌를 펼치면 <b>종목·매수/매도·현재가</b>를 관리할 수 있고, 평가금액·손익은 자동 계산됩니다.<br />
-                  <b>퇴직연금·연금</b>처럼 종목 단위 관리가 어려우면 위 <b>현재 평가액</b>만 주기적으로 갱신하세요. 입력하면 종목 자동계산 대신 이 값을 평가액으로 사용합니다.
+                  <b>투자금</b>(투입원금)과 <b>현재 평가액</b>만 입력하면 손익이 자동 계산됩니다. (퇴직연금·연금·증권계좌 공통)<br />
+                  평가액은 위 <b>수정</b>에서 주기적으로 갱신하세요.
                 </p>
               </template>
               <label>기준일<input v-model="form.openingDate" type="date" :disabled="submitting" /></label>
@@ -628,6 +620,34 @@ button.primary {
   font-size: 0.78rem;
   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 {
   display: flex;
   align-items: center;