sodalive-vuejs-creator-admin/src/views/Agent/Creators.vue

<template>
  <div>
    <v-toolbar dark>
      <v-spacer />
      <v-toolbar-title>{{ $t('view.agent.creators.titleWithCount', { count: $n(totalCount, 'decimal') }) }}</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',
  data() {
    return {
      // headers는 locale 변경 시 동적으로 계산(computed headers)으로 대체
      items: [],
      totalCount: 0,
      page: 1,
      itemsPerPage: 20,
      total_page: 1,
      is_loading: false
    };
  },
  computed: {
    headers() {
      return [
        { text: this.$t('view.agent.creators.headers.no'), value: 'no', align: 'center', sortable: false },
        { text: this.$t('view.agent.creators.headers.profile'), value: 'profileImageUrl', align: 'center', sortable: false },
        { text: this.$t('view.agent.creators.headers.nickname'), value: 'creatorNickname', align: 'center' }
      ]
    }
  },
  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.$t('common.error.fetchFailed'));
          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;

        // 페이지 연속 역순 번호 부여 (전체 totalCount 기준)
        const startNo = this.totalCount - ((this.page - 1) * this.itemsPerPage);
        this.items = this.items.map((it, idx) => ({
          ...it,
          no: startNo - idx
        }));
      } catch (e) {
        // 최소한의 에러 로깅
        // eslint-disable-next-line no-console
        console.error('[AgentCreators] 목록 조회 실패', e);
        this.notifyError(this.$t('common.error.unknown'));
      } 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>