From 2adb0d5daa62a5a5e4bd45cd7b0578debeb72df5 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Sat, 11 Apr 2026 20:51:28 +0900
Subject: [PATCH] =?UTF-8?q?feat(agent):=20AgentList.vue=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20=E2=80=94=20=EC=B4=9D=20=EC=97=90=EC=9D=B4=EC=A0=84?=
 =?UTF-8?q?=ED=8A=B8=20=EC=88=98,=20=EC=A0=95=EC=82=B0=20=ED=95=AD?=
 =?UTF-8?q?=EB=AA=A9=EB=B3=84=20=EA=B8=88=EC=95=A1,=20=ED=95=A9=EA=B3=84?=
 =?UTF-8?q?=20=ED=91=9C=EC=8B=9C=20=EB=B0=8F=20=EB=9D=BC=EC=9A=B0=ED=8C=85?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- api: /admin/partner/agent/list 연동을 위한 api/agent.js 추가(getAgentList)
- router: 에이전트 상세 및 5종 정산 상세 라우트 추가(파라미터 agentId 사용)
- AgentDetail.vue와 정산 상세 5개 뷰(플레이스홀더) 추가
- 숫자/통화 포맷 적용 및 클릭 가능한 스타일 클래스 추가
---
 src/api/agent.js                              |  12 +
 src/router/index.js                           |  36 +++
 .../Agent/AgentChannelDonationSettlement.vue  |  37 +++
 src/views/Agent/AgentCommunitySettlement.vue  |  37 +++
 .../Agent/AgentContentDonationSettlement.vue  |  37 +++
 src/views/Agent/AgentContentSettlement.vue    |  37 +++
 src/views/Agent/AgentDetail.vue               |  37 +++
 src/views/Agent/AgentList.vue                 | 221 +++++++++++++++++-
 src/views/Agent/AgentLiveSettlement.vue       |  37 +++
 9 files changed, 483 insertions(+), 8 deletions(-)
 create mode 100644 src/api/agent.js
 create mode 100644 src/views/Agent/AgentChannelDonationSettlement.vue
 create mode 100644 src/views/Agent/AgentCommunitySettlement.vue
 create mode 100644 src/views/Agent/AgentContentDonationSettlement.vue
 create mode 100644 src/views/Agent/AgentContentSettlement.vue
 create mode 100644 src/views/Agent/AgentDetail.vue
 create mode 100644 src/views/Agent/AgentLiveSettlement.vue

diff --git a/src/api/agent.js b/src/api/agent.js
new file mode 100644
index 0000000..e6b1b5b
--- /dev/null
+++ b/src/api/agent.js
@@ -0,0 +1,12 @@
+import Vue from 'vue'
+
+// 에이전트 리스트 조회
+// 서버 스펙에 페이지네이션이 없다면 단순 GET으로 사용
+// 추후 필요 시 params(page,size) 확장 가능
+async function getAgentList() {
+  return Vue.axios.get('/admin/partner/agent/list')
+}
+
+export {
+  getAgentList
+}
diff --git a/src/router/index.js b/src/router/index.js
index 4eaa859..4d6fddc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -56,6 +56,42 @@ const routes = [
                 name: 'AgentList',
                 component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentList.vue')
             },
+            {
+                path: '/agent/:agentId',
+                name: 'AgentDetail',
+                props: true,
+                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentDetail.vue')
+            },
+            {
+                path: '/agent/:agentId/settlement/live',
+                name: 'AgentSettlementLive',
+                props: true,
+                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentLiveSettlement.vue')
+            },
+            {
+                path: '/agent/:agentId/settlement/content',
+                name: 'AgentSettlementContent',
+                props: true,
+                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentContentSettlement.vue')
+            },
+            {
+                path: '/agent/:agentId/settlement/community',
+                name: 'AgentSettlementCommunity',
+                props: true,
+                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentCommunitySettlement.vue')
+            },
+            {
+                path: '/agent/:agentId/settlement/content-donation',
+                name: 'AgentSettlementContentDonation',
+                props: true,
+                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentContentDonationSettlement.vue')
+            },
+            {
+                path: '/agent/:agentId/settlement/channel-donation',
+                name: 'AgentSettlementChannelDonation',
+                props: true,
+                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentChannelDonationSettlement.vue')
+            },
             {
                 path: '/agent/settlement-ratio',
                 name: 'AgentSettlementRatio',
diff --git a/src/views/Agent/AgentChannelDonationSettlement.vue b/src/views/Agent/AgentChannelDonationSettlement.vue
new file mode 100644
index 0000000..151ad27
--- /dev/null
+++ b/src/views/Agent/AgentChannelDonationSettlement.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>에이전트 정산 상세 - 채널 후원</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+    <v-container>
+      <v-row>
+        <v-col>
+          <h3>채널 후원 정산 상세 페이지 (준비중)</h3>
+          <p>Agent ID: {{ agentId }}</p>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentChannelDonationSettlement',
+  props: {
+    agentId: {
+      type: [String, Number],
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Agent/AgentCommunitySettlement.vue b/src/views/Agent/AgentCommunitySettlement.vue
new file mode 100644
index 0000000..524d50c
--- /dev/null
+++ b/src/views/Agent/AgentCommunitySettlement.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>에이전트 정산 상세 - 커뮤니티</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+    <v-container>
+      <v-row>
+        <v-col>
+          <h3>커뮤니티 정산 상세 페이지 (준비중)</h3>
+          <p>Agent ID: {{ agentId }}</p>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentCommunitySettlement',
+  props: {
+    agentId: {
+      type: [String, Number],
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Agent/AgentContentDonationSettlement.vue b/src/views/Agent/AgentContentDonationSettlement.vue
new file mode 100644
index 0000000..8800d26
--- /dev/null
+++ b/src/views/Agent/AgentContentDonationSettlement.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>에이전트 정산 상세 - 콘텐츠 후원</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+    <v-container>
+      <v-row>
+        <v-col>
+          <h3>콘텐츠 후원 정산 상세 페이지 (준비중)</h3>
+          <p>Agent ID: {{ agentId }}</p>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentContentDonationSettlement',
+  props: {
+    agentId: {
+      type: [String, Number],
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Agent/AgentContentSettlement.vue b/src/views/Agent/AgentContentSettlement.vue
new file mode 100644
index 0000000..4a64401
--- /dev/null
+++ b/src/views/Agent/AgentContentSettlement.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>에이전트 정산 상세 - 콘텐츠</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+    <v-container>
+      <v-row>
+        <v-col>
+          <h3>콘텐츠 정산 상세 페이지 (준비중)</h3>
+          <p>Agent ID: {{ agentId }}</p>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentContentSettlement',
+  props: {
+    agentId: {
+      type: [String, Number],
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Agent/AgentDetail.vue b/src/views/Agent/AgentDetail.vue
new file mode 100644
index 0000000..d5c20ca
--- /dev/null
+++ b/src/views/Agent/AgentDetail.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>에이전트 상세</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+    <v-container>
+      <v-row>
+        <v-col>
+          <h3>에이전트 상세 페이지 (준비중)</h3>
+          <p>Agent ID: {{ agentId }}</p>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentDetail',
+  props: {
+    agentId: {
+      type: [String, Number],
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Agent/AgentList.vue b/src/views/Agent/AgentList.vue
index 09b22cd..b47325c 100644
--- a/src/views/Agent/AgentList.vue
+++ b/src/views/Agent/AgentList.vue
@@ -1,19 +1,224 @@
 <template>
-  <v-container fluid>
-    <v-row>
-      <v-col cols="12">
-        <h2>에이전트 리스트</h2>
-        <p>에이전트 목록을 관리합니다. (구현 예정)</p>
-      </v-col>
-    </v-row>
-  </v-container>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>에이전트 리스트</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-col
+          cols="12"
+          class="text-right"
+        >
+          총 에이전트 수: <strong>{{ totalCount | numberFormat }}</strong>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-simple-table class="elevation-10">
+            <template>
+              <thead>
+                <tr>
+                  <th class="text-center">
+                    에이전트 닉네임
+                  </th>
+                  <th class="text-center">
+                    소속 크리에이터 수
+                  </th>
+                  <th class="text-center">
+                    라이브
+                  </th>
+                  <th class="text-center">
+                    콘텐츠
+                  </th>
+                  <th class="text-center">
+                    커뮤니티
+                  </th>
+                  <th class="text-center">
+                    콘텐츠 후원
+                  </th>
+                  <th class="text-center">
+                    채널 후원
+                  </th>
+                  <th class="text-center">
+                    합계
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="item in agentList"
+                  :key="item.agentId"
+                >
+                  <td
+                    class="link"
+                    @click="goAgentDetail(item)"
+                  >
+                    {{ item.agentNickname }}
+                  </td>
+                  <td class="text-center">
+                    {{ item.assignedCreatorCount | numberFormat }}
+                  </td>
+                  <td
+                    class="text-right clickable"
+                    @click="goSettlement(item, 'live')"
+                  >
+                    {{ formatCurrency(item.liveAgentSettlementAmount) }}
+                  </td>
+                  <td
+                    class="text-right clickable"
+                    @click="goSettlement(item, 'content')"
+                  >
+                    {{ formatCurrency(item.contentAgentSettlementAmount) }}
+                  </td>
+                  <td
+                    class="text-right clickable"
+                    @click="goSettlement(item, 'community')"
+                  >
+                    {{ formatCurrency(item.communityAgentSettlementAmount) }}
+                  </td>
+                  <td
+                    class="text-right clickable"
+                    @click="goSettlement(item, 'content-donation')"
+                  >
+                    {{ formatCurrency(item.contentDonationAgentSettlementAmount) }}
+                  </td>
+                  <td
+                    class="text-right clickable"
+                    @click="goSettlement(item, 'channel-donation')"
+                  >
+                    {{ formatCurrency(item.channelDonationAgentSettlementAmount) }}
+                  </td>
+                  <td class="text-right">
+                    {{ formatCurrency(totalAmount(item)) }}
+                  </td>
+                </tr>
+              </tbody>
+            </template>
+          </v-simple-table>
+        </v-col>
+      </v-row>
+
+      <!-- 페이지네이션은 서버 지원 시 활성화
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="fetchList"
+          />
+        </v-col>
+      </v-row>
+      -->
+    </v-container>
+  </div>
 </template>
 
 <script>
+import { getAgentList } from '@/api/agent'
+
 export default {
   name: 'AgentList',
+  filters: {
+    numberFormat(v) {
+      if (v === null || v === undefined) return '-'
+      try {
+        return new Intl.NumberFormat('ko-KR').format(v)
+      } catch (e) {
+        return v
+      }
+    }
+  },
+  data() {
+    return {
+      agentList: [],
+      totalCount: 0,
+      // 페이지네이션(필요 시)
+      page: 1,
+      total_page: 1,
+      page_size: 20,
+      is_loading: false,
+    }
+  },
+  created() {
+    this.fetchList()
+  },
+  methods: {
+    async fetchList() {
+      if (this.is_loading) return
+      this.is_loading = true
+      try {
+        const res = await getAgentList(/* this.page, this.page_size */)
+        // 일부 API는 { data: { totalCount, items } } 형태로 한 번 더 래핑됨을 대비
+        let payload = (res && res.data) ? res.data : null
+        if (payload && payload.data && (!payload.items && !payload.totalCount)) {
+          payload = payload.data
+        }
+        const data = payload || { totalCount: 0, items: [] }
+        this.totalCount = data.totalCount || 0
+        this.agentList = Array.isArray(data.items) ? data.items : []
+        // 서버가 페이지네이션 정보를 주면 설정하도록 남김
+        this.total_page = Math.max(1, Math.ceil(this.totalCount / this.page_size))
+      } catch (e) {
+        this.totalCount = 0
+        this.agentList = []
+      } finally {
+        this.is_loading = false
+      }
+    },
+    formatCurrency(n) {
+      const num = Number(n || 0)
+      return new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW', maximumFractionDigits: 0 }).format(num)
+    },
+    totalAmount(item) {
+      const {
+        liveAgentSettlementAmount = 0,
+        contentAgentSettlementAmount = 0,
+        communityAgentSettlementAmount = 0,
+        contentDonationAgentSettlementAmount = 0,
+        channelDonationAgentSettlementAmount = 0,
+      } = item || {}
+      return (
+        (liveAgentSettlementAmount || 0) +
+        (contentAgentSettlementAmount || 0) +
+        (communityAgentSettlementAmount || 0) +
+        (contentDonationAgentSettlementAmount || 0) +
+        (channelDonationAgentSettlementAmount || 0)
+      )
+    },
+    goAgentDetail(item) {
+      this.$router.push({ name: 'AgentDetail', params: { agentId: item.agentId } })
+    },
+    goSettlement(item, type) {
+      const id = item.agentId
+      const nameMap = {
+        'live': 'AgentSettlementLive',
+        'content': 'AgentSettlementContent',
+        'community': 'AgentSettlementCommunity',
+        'content-donation': 'AgentSettlementContentDonation',
+        'channel-donation': 'AgentSettlementChannelDonation',
+      }
+      const name = nameMap[type]
+      if (!name) return
+      this.$router.push({ name, params: { agentId: id } })
+    }
+  }
 }
 </script>
 
 <style scoped>
+.link {
+  color: #3f51b5;
+  cursor: pointer;
+  text-decoration: underline;
+}
+.clickable {
+  cursor: pointer;
+}
 </style>
diff --git a/src/views/Agent/AgentLiveSettlement.vue b/src/views/Agent/AgentLiveSettlement.vue
new file mode 100644
index 0000000..3d43e9c
--- /dev/null
+++ b/src/views/Agent/AgentLiveSettlement.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>에이전트 정산 상세 - 라이브</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+    <v-container>
+      <v-row>
+        <v-col>
+          <h3>라이브 정산 상세 페이지 (준비중)</h3>
+          <p>Agent ID: {{ agentId }}</p>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentLiveSettlement',
+  props: {
+    agentId: {
+      type: [String, Number],
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>