From c24103f303447705aa6ea88429aadf5a29e2752d Mon Sep 17 00:00:00 2001 From: Yu Sung Date: Mon, 13 Apr 2026 19:39:54 +0900 Subject: [PATCH] =?UTF-8?q?feat(agent):=20=ED=88=B4=EB=B0=94=20=EC=A0=9C?= =?UTF-8?q?=EB=AA=A9=EC=97=90=20=ED=81=AC=EB=A6=AC=EC=97=90=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EC=88=98=20=ED=91=9C=EC=8B=9C,=20=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=EC=97=90=20=EC=88=9C=EB=B2=88=20=ED=91=9C?= =?UTF-8?q?=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/20260413_에이전트소속크리에이터목록.md | 13 +++++++++++++ src/views/Agent/Creators.vue | 10 +++++++++- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/docs/20260413_에이전트소속크리에이터목록.md b/docs/20260413_에이전트소속크리에이터목록.md index 9d76ecc..f23905d 100644 --- a/docs/20260413_에이전트소속크리에이터목록.md +++ b/docs/20260413_에이전트소속크리에이터목록.md @@ -7,6 +7,7 @@ - [ ] 테이블 화면 중앙 정렬 및 내용 크기 기반 축소 표시 (`src/views/Agent/Creators.vue`) - [ ] 프로필 이미지/테이블 2배 확대 (`src/views/Agent/Creators.vue`) - [ ] v-pagination으로 커스텀 페이징 적용 (`src/views/Agent/Creators.vue`) + - [ ] 순번 컬럼 추가(역순, 페이지 연속) (`src/views/Agent/Creators.vue`) ## 검증 기록 @@ -75,3 +76,15 @@ - 각 셀에 10px 패딩이 실제로 적용되는지 확인(개발자 도구로 td 컴퓨티드 스타일 확인) (성공/실패) - 브라우저 폭 기준 테이블이 약 50% 너비를 차지하고 중앙에 정렬되는지 확인 (성공/실패) - 창 크기를 조절해도 50% 비율이 유지되는지 확인 (성공/실패) + +### 7차 수정 (순번 컬럼 역순/페이지 연속) +- 무엇을: 테이블 맨 앞에 순번 컬럼을 추가하고 전체 인원 기준 역순으로 번호를 표시. 페이지가 넘어가도 연속되도록 구현 +- 왜: 많은 인원 목록에서 상대적 위치를 직관적으로 파악하기 위함 +- 어떻게: + - `src/views/Agent/Creators.vue` + - headers에 `{ text: '순번', value: 'no', align: 'center', sortable: false }` 추가 + - `fetchItems` 완료 후 `no = totalCount - ((page - 1) * itemsPerPage) - index` 로 각 아이템에 번호 주입 + - 검증(수동): + - 1페이지에서 첫 행의 순번이 `totalCount`와 동일하고, 아래로 갈수록 1씩 감소하는지 확인 (성공/실패) + - 2페이지로 이동 시 이전 페이지 마지막 다음 번호가 이어서 표시되는지 확인 (성공/실패) + - 마지막 페이지 마지막 행의 번호가 1인지 확인 (성공/실패) diff --git a/src/views/Agent/Creators.vue b/src/views/Agent/Creators.vue index 4d58416..922a39b 100644 --- a/src/views/Agent/Creators.vue +++ b/src/views/Agent/Creators.vue @@ -2,7 +2,7 @@
- 소속 크리에이터 + 소속 크리에이터 - {{ totalCount }}명 @@ -69,6 +69,7 @@ export default { data() { return { headers: [ + { text: '순번', value: 'no', align: 'center', sortable: false }, { text: '프로필', value: 'profileImageUrl', align: 'center', sortable: false }, { text: '닉네임', value: 'creatorNickname', align: 'center' } ], @@ -132,6 +133,13 @@ export default { 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