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인지 확인 (성공/실패)

src/views/Agent/Creators.vue

@@ -2,7 +2,7 @@
   <div>
     <v-toolbar dark>
       <v-spacer />
-      <v-toolbar-title>소속 크리에이터</v-toolbar-title>
+      <v-toolbar-title>소속 크리에이터 - {{ totalCount }}명</v-toolbar-title>
       <v-spacer />
     </v-toolbar>
 
@@ -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