docs/20260413_에이전트소속크리에이터목록.md

@@ -0,0 +1,77 @@
+# 에이전트 소속 크리에이터 목록 페이지 구현 계획
+
+- [ ] API 호출 함수 추가 (`src/api/agent_calculate.js`)
+- [ ] 페이지 테이블 구현 (`src/views/Agent/Creators.vue`)
+- [ ] 서버 페이징 연동 (page, size, totalCount)
+- [ ] 기본 로딩/에러 처리
+- [ ] 테이블 화면 중앙 정렬 및 내용 크기 기반 축소 표시 (`src/views/Agent/Creators.vue`)
+ - [ ] 프로필 이미지/테이블 2배 확대 (`src/views/Agent/Creators.vue`)
+ - [ ] v-pagination으로 커스텀 페이징 적용 (`src/views/Agent/Creators.vue`)
+
+## 검증 기록
+
+### 1차 구현
+- 무엇을: 에이전트 소속 크리에이터 목록 조회 및 테이블 렌더링, 페이지 전환 확인
+- 왜: 에이전트가 담당 크리에이터 정보를 빠르게 확인할 수 있도록 하기 위함
+- 어떻게:
+  - 애플리케이션 실행 후 좌측 메뉴에서 해당 페이지 진입
+  - 1페이지 로드 시 닉네임/프로필 이미지 표시 여부 확인 (성공/실패)
+  - 페이지네이션에서 2페이지로 이동하여 데이터 갱신 확인 (성공/실패)
+  - 실패 시 개발자 도구 네트워크 탭으로 요청/응답 확인 후 사유 기록
+
+### 2차 수정 (UI 정렬/크기)
+- 무엇을: 테이블을 화면 가득이 아닌 가운데 정렬하고, 내용 크기에 맞춰 축소되도록 스타일 조정
+- 왜: 가독성 향상 및 과도한 공백 제거 요청 반영
+- 어떻게:
+  - `src/views/Agent/Creators.vue`에서 `<v-row justify="center">`, `<v-col cols="12" sm="10" md="8" lg="6">`로 컨테이너 폭 제한
+  - `v-data-table`에 `shrink-table` 클래스 적용하여 `display: inline-table; width: auto;`로 내용 기반 너비 설정
+  - 검증: 브라우저에서 페이지 진입 후 테이블이 가운데 정렬되고 좌우로 과도하게 늘어나지 않는지 확인 (성공/실패)
+
+### 3차 수정 (데이터 미표시 해결 + v-pagination 적용)
+- 무엇을: API 응답 파싱 보강으로 목록 데이터 미표시 이슈 해결, `v-pagination` 기반 페이징 적용
+- 왜: 일부 API가 `{ success, data }` 래핑 형태로 응답하여 기존 파싱 로직에서 `items`가 세팅되지 않던 문제 해결 및 요구사항에 따른 커스텀 페이징 적용
+- 어떻게:
+  - `src/views/Agent/Creators.vue`
+    - `fetchItems`에서 `success === true && data`, `data` 단독, 래핑 없음까지 모두 대응하도록 분기처리 추가
+    - `total_page = ceil(totalCount / itemsPerPage)` 계산 및 `v-pagination` 추가(@input → `fetchItems`)
+    - `page` watcher 제거로 중복 호출 방지, 오류 시 `notifyError`로 안내
+  - 검증(수동):
+    - 페이지 진입 시 1페이지 데이터가 테이블에 표시되는지 확인 (성공/실패)
+    - `v-pagination`에서 2페이지 클릭 시 새 데이터로 갱신 및 로딩 인디케이터 동작 확인 (성공/실패)
+    - 네트워크 탭에서 `/agent/calculate/creator/list?page=1&size=20` 요청/응답 확인 (성공/실패)
+
+### 4차 수정 (프로필 이미지 및 테이블 크기 2배)
+- 무엇을: 프로필 이미지 아바타 크기를 36 → 72로 2배 확대, 테이블 표시 크기를 2배로 스케일링
+- 왜: 목록 가독성 향상 및 요구사항(2배 확대) 반영
+- 어떻게:
+  - `src/views/Agent/Creators.vue`
+    - `<v-avatar size="72">`로 변경
+    - `.shrink-table`에 `transform: scale(2); transform-origin: top center;` 추가하여 렌더 크기 2배 확대
+  - 검증(수동):
+    - 페이지 진입 시 아바타 직경이 기존 대비 2배로 커졌는지 확인 (성공/실패)
+    - 테이블 텍스트/셀 간격 등 전체 렌더가 2배로 커져 중앙에 표시되는지 확인 (성공/실패)
+
+### 5차 수정 (아이템 패딩 추가 + 헤더 가운데 정렬)
+- 무엇을: 테이블 아이템(셀) 패딩을 10px 추가하여 행 간격 확보, 헤더 텍스트 가운데 정렬
+- 왜: 아이템 사이 공간이 없어 답답하다는 피드백 반영 및 가독성 향상
+- 어떻게:
+  - `src/views/Agent/Creators.vue`
+    - headers `align: 'center'`로 업데이트(프로필/닉네임)
+    - `.shrink-table ::v-deep .v-data-table__wrapper table tbody tr > td { padding: 10px; }` 추가
+    - 보조로 `.shrink-table ::v-deep thead th { text-align: center !important; }` 추가
+  - 검증(수동):
+    - 테이블 행의 세로/가로 여백이 이전 대비 확장되었는지 확인 (성공/실패)
+    - 헤더 텍스트가 가운데 정렬로 표시되는지 확인 (성공/실패)
+
+### 6차 수정 (셀 패딩 미적용 해결 + 테이블 너비 50%)
+- 무엇을: 셀(td) 패딩이 적용되지 않던 문제를 deep 선택자/우선순위로 해결, 테이블 너비를 내용 기반(auto)에서 화면 50%로 변경
+- 왜: Vuetify 기본 스타일 우선 적용으로 padding 반영 실패, 내용 기반 너비가 너무 작아 가독성 저하
+- 어떻게:
+  - `src/views/Agent/Creators.vue`
+    - `.shrink-table ::v-deep .v-data-table__wrapper > table > tbody > tr > td { padding: 10px !important; }`로 선택자 보강 및 `!important` 적용
+    - `.shrink-table { display: block; width: 50vw; }`로 변경하여 중앙 정렬 상태에서 화면의 50% 너비 유지
+    - 기존 `transform: scale(2)`는 제거하여 너비 계산 왜곡 방지(아바타 72px 확대는 유지)
+  - 검증(수동):
+    - 각 셀에 10px 패딩이 실제로 적용되는지 확인(개발자 도구로 td 컴퓨티드 스타일 확인) (성공/실패)
+    - 브라우저 폭 기준 테이블이 약 50% 너비를 차지하고 중앙에 정렬되는지 확인 (성공/실패)
+    - 창 크기를 조절해도 50% 비율이 유지되는지 확인 (성공/실패)

src/api/agent_calculate.js

@@ -2,6 +2,12 @@ import Vue from 'vue';
 
 // 에이전트 전용 정산 API
 
+async function getAgentAssignedCreatorList(page, size) {
+  return Vue.axios.get(
+    '/agent/calculate/creator/list?page=' + (page - 1) + '&size=' + size
+  );
+}
+
 async function getLiveByCreator(startDate, endDate, page, size) {
   return Vue.axios.get(
     '/agent/calculate/live-by-creator?startDateStr=' + startDate +
@@ -38,6 +44,7 @@ async function getChannelDonationByCreator(startDate, endDate, page, size) {
 }
 
 export {
+  getAgentAssignedCreatorList,
   getLiveByCreator,
   getContentByCreator,
   getContentDonationByCreator,

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>
+  <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>