feat(agent-creator): 에이전트 소속 크리에이터 목록 조회 페이지 작성

src/views/Agent/Creators.vue

@@ -1,21 +1,171 @@
 <template>
-  <v-container fluid>
-    <v-row>
-      <v-col>
-        <h2>소속 크리에이터</h2>
-        <p class="mt-2 grey--text">
-          에이전트용 페이지입니다. 상세 내용은 추후에 추가될 예정입니다.
-        </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 justify="center">
+        <v-col
+          cols="12"
+          sm="10"
+          md="8"
+          lg="6"
+        >
+          <div class="table-center">
+            <v-data-table
+              :headers="headers"
+              :items="items"
+              :loading="is_loading"
+              :items-per-page="-1"
+              class="elevation-1 shrink-table"
+              hide-default-footer
+            >
+              <template v-slot:item.profileImageUrl="{ item }">
+                <v-avatar size="72">
+                  <v-img
+                    :src="item.profileImageUrl"
+                    alt="profile"
+                  />
+                </v-avatar>
+              </template>
+            </v-data-table>
+          </div>
+        </v-col>
+      </v-row>
+
+      <!-- 커스텀 페이지네이션 -->
+      <v-row
+        class="text-center"
+        justify="center"
+      >
+        <v-col
+          cols="12"
+          sm="10"
+          md="8"
+          lg="6"
+        >
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="onPage"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
 </template>
 
 <script>
+import * as api from '@/api/agent_calculate';
+
 export default {
-  name: 'AgentCreators'
+  name: 'AgentCreators',
+  data() {
+    return {
+      headers: [
+        { text: '프로필', value: 'profileImageUrl', align: 'center', sortable: false },
+        { text: '닉네임', value: 'creatorNickname', align: 'center' }
+      ],
+      items: [],
+      totalCount: 0,
+      page: 1,
+      itemsPerPage: 20,
+      total_page: 1,
+      is_loading: false
+    };
+  },
+  watch: {
+    itemsPerPage() {
+      // 페이지 크기 변경 시 첫 페이지부터 다시 조회
+      this.page = 1;
+      this.fetchItems();
+    }
+  },
+  mounted() {
+    this.fetchItems();
+  },
+  methods: {
+    notifyError(message) {
+      // 전역 dialog 플러그인이 없다면 콘솔로 폴백
+      if (this.$dialog && this.$dialog.notify && this.$dialog.notify.error) {
+        this.$dialog.notify.error(message)
+      } else {
+        // eslint-disable-next-line no-console
+        console.error(message)
+      }
+    },
+    async onPage() {
+      await this.fetchItems();
+    },
+    async fetchItems() {
+      try {
+        this.is_loading = true;
+        const res = await api.getAgentAssignedCreatorList(this.page, this.itemsPerPage);
+        // 성공 응답이 { success: true, data: {...} } 혹은 { data: {...} } 형태 모두 대응
+        let payload = null;
+        if (res && res.status === 200) {
+          if (res.data && res.data.success === true && res.data.data) {
+            payload = res.data.data;
+          } else if (res.data && res.data.data) {
+            payload = res.data.data;
+          } else if (res.data && (res.data.items || res.data.totalCount !== undefined)) {
+            // wrapping 없이 바로 내려오는 경우
+            payload = res.data;
+          }
+        }
+
+        if (!payload) {
+          this.notifyError(res?.data?.message || '목록을 불러오지 못했습니다. 다시 시도해 주세요.');
+          this.items = [];
+          this.totalCount = 0;
+          this.total_page = 1;
+          return;
+        }
+
+        this.totalCount = Number(payload.totalCount || 0);
+        this.items = Array.isArray(payload.items) ? payload.items : [];
+        const totalPage = Math.ceil(this.totalCount / this.itemsPerPage);
+        this.total_page = totalPage > 0 ? totalPage : 1;
+      } catch (e) {
+        // 최소한의 에러 로깅
+        // eslint-disable-next-line no-console
+        console.error('[AgentCreators] 목록 조회 실패', e);
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.');
+      } finally {
+        this.is_loading = false;
+      }
+    }
+  }
 }
 </script>
 
 <style scoped>
+/* 테이블을 화면 가운데 정렬하고, 내용 너비에 맞춰 축소 표시 */
+.table-center {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.shrink-table {
+  display: block;
+  /* 화면의 50% 너비로 고정 표시 */
+  width: 50vw;
+}
+
+/* 아이템(셀) 패딩 추가로 행 간격/여백 확보 (Vuetify 기본값보다 우선 적용) */
+.shrink-table ::v-deep .v-data-table__wrapper > table > tbody > tr > td {
+  padding: 10px !important;
+}
+
+/* 헤더 텍스트 가운데 정렬 (헤더 align 설정 보조) */
+.shrink-table ::v-deep thead th {
+  text-align: center !important;
+}
 </style>