From c7a02ea4ccb88ff1158c46962ce682def03b0679 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Sat, 11 Apr 2026 22:20:18 +0900
Subject: [PATCH] =?UTF-8?q?feat(agent):=20=EC=97=90=EC=9D=B4=EC=A0=84?=
 =?UTF-8?q?=ED=8A=B8=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- api/agent.js에 소속 관리 API 추가 (조회/검색/소속/해제) 및 Pageable 0-based 처리
- AgentDetail.vue 구현 — 목록/페이지네이션/소속 추가(자정 00:00:00)/소속 해제(날짜+시간)
- AgentList.vue에서 상세 진입 시 닉네임을 쿼리로 전달하여 상세에서 표시
- AgentDetail.vue에 간단한 스타일 클래스 추가
---
 src/api/agent.js                |  38 +++
 src/views/Agent/AgentDetail.vue | 415 +++++++++++++++++++++++++++++++-
 src/views/Agent/AgentList.vue   |   2 +-
 3 files changed, 448 insertions(+), 7 deletions(-)

diff --git a/src/api/agent.js b/src/api/agent.js
index b14de7c..d1a19c4 100644
--- a/src/api/agent.js
+++ b/src/api/agent.js
@@ -39,10 +39,48 @@ async function searchAgentByNickname(query) {
   }
 }
 
+// 에이전트 소속 크리에이터 목록 조회
+// GET /admin/partner/agent/{agentId}/creator/list
+// params: { page, size }
+async function getAgentAssignedCreatorList(agentId, page = 1, size = 20) {
+  // Spring Pageable은 일반적으로 0-based page index를 사용
+  const zeroBasedPage = Math.max(0, Number(page || 1) - 1)
+  return Vue.axios.get(`/admin/partner/agent/${agentId}/creator/list`, {
+    params: { page: zeroBasedPage, size }
+  })
+}
+
+// 추가 가능한 크리에이터 검색
+// GET /admin/partner/agent/creator/search?search_word=...
+async function searchAdminAgentAssignableCreators(search_word) {
+  return Vue.axios.get('/admin/partner/agent/creator/search', {
+    params: { search_word }
+  })
+}
+
+// 에이전트에 크리에이터 소속 시키기
+// POST /admin/partner/agent/assignment
+// payload: { agentId, creatorId, assignedAt }  // assignedAt: LocalDateTime string (yyyy-MM-ddTHH:mm:ss)
+async function assignAgentCreator(payload) {
+  return Vue.axios.post('/admin/partner/agent/assignment', payload)
+}
+
+// 크리에이터 소속 해제
+// POST /admin/partner/agent/assignment/remove
+// payload: { creatorId, unassignedAt } // unassignedAt: LocalDateTime string
+async function removeAgentCreator(payload) {
+  return Vue.axios.post('/admin/partner/agent/assignment/remove', payload)
+}
+
 export {
   getAgentList,
   getAgentSettlementRatioList,
   createAgentSettlementRatio,
   updateAgentSettlementRatio,
   searchAgentByNickname,
+  // 에이전트 상세 - 소속 크리에이터 관리
+  getAgentAssignedCreatorList,
+  searchAdminAgentAssignableCreators,
+  assignAgentCreator,
+  removeAgentCreator,
 }
diff --git a/src/views/Agent/AgentDetail.vue b/src/views/Agent/AgentDetail.vue
index d5c20ca..fc62204 100644
--- a/src/views/Agent/AgentDetail.vue
+++ b/src/views/Agent/AgentDetail.vue
@@ -7,21 +7,262 @@
       >
         <v-icon>mdi-arrow-left</v-icon>
       </v-btn>
-      <v-toolbar-title>에이전트 상세</v-toolbar-title>
+      <v-toolbar-title>{{ (agentNickname || '-') + ' 소속 크리에이터' }}</v-toolbar-title>
       <v-spacer />
+      <v-btn
+        color="#3bb9f1"
+        dark
+        :loading="assignDialog.loading"
+        @click="openAssignDialog"
+      >
+        소속 추가
+      </v-btn>
     </v-toolbar>
+
+    <br>
+
     <v-container>
+      <!-- 소속 크리에이터 목록 -->
       <v-row>
         <v-col>
-          <h3>에이전트 상세 페이지 (준비중)</h3>
-          <p>Agent ID: {{ agentId }}</p>
+          <v-simple-table class="elevation-10">
+            <template>
+              <thead>
+                <tr>
+                  <th class="text-center">
+                    닉네임
+                  </th>
+                  <th class="text-center">
+                    소속일
+                  </th>
+                  <th class="text-center">
+                    관리
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-if="is_loading">
+                  <td
+                    colspan="3"
+                    class="text-center"
+                  >
+                    불러오는 중...
+                  </td>
+                </tr>
+                <tr v-else-if="items.length === 0">
+                  <td
+                    colspan="3"
+                    class="text-center"
+                  >
+                    소속된 크리에이터가 없습니다.
+                  </td>
+                </tr>
+                <tr
+                  v-for="row in items"
+                  :key="row.creatorId"
+                >
+                  <td class="text-center">
+                    {{ row.creatorNickname }}
+                  </td>
+                  <td class="text-center">
+                    {{ formatDateTime(row.assignedAt) }}
+                  </td>
+                  <td class="text-center">
+                    <v-btn
+                      text
+                      small
+                      color="error"
+                      @click="openUnassignDialog(row)"
+                    >
+                      소속 해제
+                    </v-btn>
+                  </td>
+                </tr>
+              </tbody>
+            </template>
+          </v-simple-table>
+        </v-col>
+      </v-row>
+
+      <v-row
+        v-if="total_page > 1"
+        class="text-center"
+      >
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="fetchList"
+          />
         </v-col>
       </v-row>
     </v-container>
+
+    <!-- 소속 추가 다이얼로그 -->
+    <v-dialog
+      v-model="assignDialog.visible"
+      max-width="600px"
+    >
+      <v-card>
+        <v-card-title>크리에이터 소속 추가</v-card-title>
+        <v-card-text>
+          <v-autocomplete
+            v-model="assignDialog.selectedCreatorId"
+            :items="assignDialog.searchItems"
+            :loading="assignDialog.searchLoading"
+            :search-input.sync="assignDialog.searchQuery"
+            hide-no-data
+            hide-selected
+            clearable
+            label="크리에이터 검색"
+            item-text="creatorNickname"
+            item-value="creatorId"
+            @update:search-input="onSearchCreators"
+          />
+
+          <v-menu
+            ref="menuAssignedDate"
+            v-model="assignDialog.menu"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-model="assignDialog.assignedDate"
+                label="소속 날짜(자정으로 처리)"
+                readonly
+                dense
+                v-bind="attrs"
+                clearable
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="assignDialog.assignedDate"
+              locale="ko-kr"
+              @input="$refs.menuAssignedDate.save(assignDialog.assignedDate)"
+            />
+          </v-menu>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            text
+            @click="closeAssignDialog"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            color="primary"
+            :disabled="!canAssign"
+            :loading="assignDialog.loading"
+            @click="onAssign"
+          >
+            추가
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- 소속 해제 다이얼로그 -->
+    <v-dialog
+      v-model="unassignDialog.visible"
+      max-width="600px"
+    >
+      <v-card>
+        <v-card-title>소속 해제</v-card-title>
+        <v-card-text>
+          <div class="mb-3">
+            크리에이터: <strong>{{ unassignDialog.target && unassignDialog.target.creatorNickname || '-' }}</strong>
+          </div>
+
+          <v-menu
+            ref="menuUnassignDate"
+            v-model="unassignDialog.menuDate"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-model="unassignDialog.date"
+                label="해제 날짜"
+                readonly
+                dense
+                v-bind="attrs"
+                clearable
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="unassignDialog.date"
+              locale="ko-kr"
+              @input="$refs.menuUnassignDate.save(unassignDialog.date)"
+            />
+          </v-menu>
+
+          <v-menu
+            ref="menuUnassignTime"
+            v-model="unassignDialog.menuTime"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="290px"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-model="unassignDialog.time"
+                label="해제 시간(시:분)"
+                readonly
+                dense
+                v-bind="attrs"
+                clearable
+                v-on="on"
+              />
+            </template>
+            <v-time-picker
+              v-if="unassignDialog.menuTime"
+              v-model="unassignDialog.time"
+              format="24hr"
+              full-width
+              @click:minute="$refs.menuUnassignTime.save(unassignDialog.time)"
+            />
+          </v-menu>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            text
+            @click="closeUnassignDialog"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            color="error"
+            :disabled="!canUnassign"
+            :loading="unassignDialog.loading"
+            @click="onUnassign"
+          >
+            해제
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <script>
+import {
+  getAgentAssignedCreatorList,
+  searchAdminAgentAssignableCreators,
+  assignAgentCreator,
+  removeAgentCreator
+} from '@/api/agent'
+
 export default {
   name: 'AgentDetail',
   props: {
@@ -29,9 +270,171 @@ export default {
       type: [String, Number],
       required: true
     }
+  },
+  data() {
+    return {
+      agentNickname: this.$route && this.$route.query ? this.$route.query.nickname : '',
+      is_loading: false,
+      items: [],
+      totalCount: 0,
+      page: 1,
+      page_size: 20,
+
+      assignDialog: {
+        visible: false,
+        loading: false,
+        selectedCreatorId: null,
+        assignedDate: this.todayStr(),
+        menu: false,
+        searchQuery: '',
+        searchItems: [],
+        searchLoading: false,
+      },
+
+      unassignDialog: {
+        visible: false,
+        loading: false,
+        target: null,
+        date: this.todayStr(),
+        time: this.nowTimeHHmm(),
+        menuDate: false,
+        menuTime: false,
+      },
+    }
+  },
+  computed: {
+    total_page() {
+      return Math.max(1, Math.ceil((this.totalCount || 0) / this.page_size))
+    },
+    canAssign() {
+      return !!(this.assignDialog.selectedCreatorId && this.assignDialog.assignedDate)
+    },
+    canUnassign() {
+      return !!(this.unassignDialog.target && this.unassignDialog.date && this.unassignDialog.time)
+    }
+  },
+  created() {
+    this.fetchList(1)
+  },
+  methods: {
+    async fetchList(page = this.page) {
+      if (this.is_loading) return
+      this.is_loading = true
+      try {
+        this.page = page
+        const res = await getAgentAssignedCreatorList(this.agentId, Math.max(1, this.page), this.page_size)
+        // ApiResponse<GetAdminAgentAssignedCreatorResponse>
+        let payload = res && res.data ? res.data : null
+        if (payload && payload.data) payload = payload.data
+        const data = payload || { totalCount: 0, items: [] }
+        this.totalCount = data.totalCount || 0
+        this.items = Array.isArray(data.items) ? data.items : []
+      } catch (e) {
+        this.totalCount = 0
+        this.items = []
+      } finally {
+        this.is_loading = false
+      }
+    },
+    openAssignDialog() {
+      this.assignDialog.visible = true
+      this.assignDialog.selectedCreatorId = null
+      this.assignDialog.assignedDate = this.todayStr()
+      this.assignDialog.searchQuery = ''
+      this.assignDialog.searchItems = []
+    },
+    closeAssignDialog() {
+      this.assignDialog.visible = false
+    },
+    async onSearchCreators(q) {
+      const query = (q || '').trim()
+      this.assignDialog.searchQuery = query
+      if (!query) {
+        this.assignDialog.searchItems = []
+        return
+      }
+      this.assignDialog.searchLoading = true
+      try {
+        const res = await searchAdminAgentAssignableCreators(query)
+        let payload = res && res.data ? res.data : null
+        if (payload && payload.data) payload = payload.data
+        const data = payload || { totalCount: 0, items: [] }
+        this.assignDialog.searchItems = Array.isArray(data.items) ? data.items : []
+      } catch (e) {
+        this.assignDialog.searchItems = []
+      } finally {
+        this.assignDialog.searchLoading = false
+      }
+    },
+    async onAssign() {
+      if (!this.canAssign) return
+      this.assignDialog.loading = true
+      try {
+        const assignedAt = `${this.assignDialog.assignedDate}T00:00:00`
+        await assignAgentCreator({
+          agentId: Number(this.agentId),
+          creatorId: Number(this.assignDialog.selectedCreatorId),
+          assignedAt,
+        })
+        this.closeAssignDialog()
+        this.fetchList(1)
+      } catch (e) {
+        // noop: 에러 토스트 자리는 프로젝트 전역 플러그인 유무에 따라 추가 가능
+      } finally {
+        this.assignDialog.loading = false
+      }
+    },
+    openUnassignDialog(row) {
+      this.unassignDialog.visible = true
+      this.unassignDialog.loading = false
+      this.unassignDialog.target = row
+      this.unassignDialog.date = this.todayStr()
+      this.unassignDialog.time = this.nowTimeHHmm()
+    },
+    closeUnassignDialog() {
+      this.unassignDialog.visible = false
+    },
+    async onUnassign() {
+      if (!this.canUnassign) return
+      this.unassignDialog.loading = true
+      try {
+        const time = this.unassignDialog.time || '00:00'
+        const unassignedAt = `${this.unassignDialog.date}T${time}:00`
+        await removeAgentCreator({
+          creatorId: Number(this.unassignDialog.target.creatorId),
+          unassignedAt,
+        })
+        this.closeUnassignDialog()
+        this.fetchList(this.page)
+      } catch (e) {
+        // noop
+      } finally {
+        this.unassignDialog.loading = false
+      }
+    },
+    formatDateTime(s) {
+      if (!s) return '-'
+      try {
+        // s는 LocalDateTime 문자열(예: 2026-01-01T00:00:00)
+        const [d, t] = String(s).split('T')
+        const hhmm = (t || '').slice(0,5)
+        return `${d} ${hhmm}`
+      } catch (e) {
+        return s
+      }
+    },
+    todayStr() {
+      const d = new Date()
+      const mm = String(d.getMonth() + 1).padStart(2, '0')
+      const dd = String(d.getDate()).padStart(2, '0')
+      return `${d.getFullYear()}-${mm}-${dd}`
+    },
+    nowTimeHHmm() {
+      const d = new Date()
+      const hh = String(d.getHours()).padStart(2, '0')
+      const mm = String(d.getMinutes()).padStart(2, '0')
+      return `${hh}:${mm}`
+    }
   }
 }
 </script>
-
-<style scoped>
-</style>
diff --git a/src/views/Agent/AgentList.vue b/src/views/Agent/AgentList.vue
index b47325c..83d45b1 100644
--- a/src/views/Agent/AgentList.vue
+++ b/src/views/Agent/AgentList.vue
@@ -193,7 +193,7 @@ export default {
       )
     },
     goAgentDetail(item) {
-      this.$router.push({ name: 'AgentDetail', params: { agentId: item.agentId } })
+      this.$router.push({ name: 'AgentDetail', params: { agentId: item.agentId }, query: { nickname: item.agentNickname } })
     },
     goSettlement(item, type) {
       const id = item.agentId