From 6f49a7eef01252e2d887c3bcd07fd0b3699c4775 Mon Sep 17 00:00:00 2001
From: ByungCheol <kenneth73510@nurier.co.kr>
Date: Thu, 9 Jul 2026 23:47:09 +0900
Subject: [PATCH] =?UTF-8?q?feat(point):=20=ED=8F=AC=EC=9D=B8=ED=8A=B8=20re?=
 =?UTF-8?q?ason=20=ED=95=9C=EA=B8=80=ED=99=94=20+=20=EC=9B=94=EB=B3=84=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/api/authApi.js                     |  7 ++-
 src/views/settings/AccountInfoView.vue | 81 ++++++++++++++++++++++++--
 2 files changed, 80 insertions(+), 8 deletions(-)

diff --git a/src/api/authApi.js b/src/api/authApi.js
index 5270aa3..1fd85f9 100644
--- a/src/api/authApi.js
+++ b/src/api/authApi.js
@@ -47,9 +47,10 @@ export const authApi = {
   points() {
     return http.get('/auth/points')
   },
-  // 포인트 적립/차감 내역 (최신순)
-  pointHistory() {
-    return http.get('/auth/point-history')
+  // 포인트 적립/차감 내역 — year+month 지정 시 해당 월, 미지정 시 최근 100건
+  pointHistory(year, month) {
+    const params = year && month ? { year, month } : {}
+    return http.get('/auth/point-history', { params })
   },
   // 현재 사용자 전체 프로필(아바타·포인트 포함) — 재로그인 없이 최신값 동기화
   profile() {
diff --git a/src/views/settings/AccountInfoView.vue b/src/views/settings/AccountInfoView.vue
index 44244d0..bd15c97 100644
--- a/src/views/settings/AccountInfoView.vue
+++ b/src/views/settings/AccountInfoView.vue
@@ -26,24 +26,59 @@ onMounted(async () => {
 })
 
 // 포인트 적립내역 모달
-const POINT_REASONS = { BOARD_WRITE: '게시판 작성' }
+const POINT_REASONS = {
+  BOARD_WRITE:    '게시판 작성',
+  POST_UPVOTED:   '게시글 추천받음',
+  POST_DOWNVOTED: '게시글 비추천받음',
+  VOTE_REWARD:    '추천 참여',
+  VOTE_CANCEL:    '추천 취소',
+  ACCOUNT_ENTRY:  '가계부 기록',
+}
 function reasonLabel(r) {
+  if (r && r.startsWith('MONTH_COMPLETE_')) {
+    const ym = r.slice('MONTH_COMPLETE_'.length)
+    return `${ym.slice(0, 4)}년 ${parseInt(ym.slice(4), 10)}월 개근 보너스`
+  }
   return POINT_REASONS[r] || r
 }
+
+const _now = new Date()
+const histYear = ref(_now.getFullYear())
+const histMonth = ref(_now.getMonth() + 1)
 const historyOpen = ref(false)
 const history = ref([])
 const historyLoading = ref(false)
-async function openHistory() {
-  historyOpen.value = true
+
+const isCurrentMonth = computed(() => {
+  const n = new Date()
+  return histYear.value === n.getFullYear() && histMonth.value === n.getMonth() + 1
+})
+
+async function loadHistory() {
   historyLoading.value = true
   try {
-    history.value = await authApi.pointHistory()
+    history.value = await authApi.pointHistory(histYear.value, histMonth.value)
   } catch {
     history.value = []
   } finally {
     historyLoading.value = false
   }
 }
+function prevMonth() {
+  if (histMonth.value === 1) { histYear.value--; histMonth.value = 12 }
+  else histMonth.value--
+  loadHistory()
+}
+function nextMonth() {
+  if (isCurrentMonth.value) return
+  if (histMonth.value === 12) { histYear.value++; histMonth.value = 1 }
+  else histMonth.value++
+  loadHistory()
+}
+async function openHistory() {
+  historyOpen.value = true
+  await loadHistory()
+}
 function fmtDateTime(s) {
   if (!s) return ''
   const d = new Date(s)
@@ -376,8 +411,13 @@ async function withdraw() {
             <strong>포인트 적립내역</strong>
             <button type="button" class="ph-close" aria-label="닫기" @click="historyOpen = false">×</button>
           </div>
+          <div class="ph-month-nav">
+            <button type="button" class="ph-nav-btn" @click="prevMonth">‹</button>
+            <span class="ph-month-label">{{ histYear }}년 {{ histMonth }}월</span>
+            <button type="button" class="ph-nav-btn" :disabled="isCurrentMonth" @click="nextMonth">›</button>
+          </div>
           <p v-if="historyLoading" class="ph-msg">불러오는 중…</p>
-          <p v-else-if="!history.length" class="ph-msg">적립 내역이 없습니다.</p>
+          <p v-else-if="!history.length" class="ph-msg">이 달 적립 내역이 없습니다.</p>
           <ul v-else class="ph-list">
             <li v-for="(h, i) in history" :key="i">
               <div class="ph-main">
@@ -655,6 +695,37 @@ async function withdraw() {
   line-height: 1;
   cursor: pointer;
 }
+.ph-month-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 0.55rem 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.ph-month-label {
+  font-size: 0.9rem;
+  font-weight: 600;
+  min-width: 7rem;
+  text-align: center;
+}
+.ph-nav-btn {
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  font-size: 1.3rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+}
+.ph-nav-btn:disabled {
+  opacity: 0.25;
+  cursor: default;
+}
+.ph-nav-btn:not(:disabled):hover {
+  background: var(--color-background-mute);
+}
 .ph-msg {
   padding: 2rem 1rem;
   text-align: center;