diff --git a/docs/20260413_에이전트소속크리에이터목록.md b/docs/20260413_에이전트소속크리에이터목록.md new file mode 100644 index 0000000..9d76ecc --- /dev/null +++ b/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-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` + - ``로 변경 + - `.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% 비율이 유지되는지 확인 (성공/실패) diff --git a/src/api/agent_calculate.js b/src/api/agent_calculate.js index 7e9f526..62e5a83 100644 --- a/src/api/agent_calculate.js +++ b/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, diff --git a/src/views/Agent/Creators.vue b/src/views/Agent/Creators.vue index 36b794a..bc3176a 100644 --- a/src/views/Agent/Creators.vue +++ b/src/views/Agent/Creators.vue @@ -1,21 +1,171 @@