sodalive-vuejs-creator-admin/docs/20260413_에이전트소속크리에이터목록.md

에이전트 소속 크리에이터 목록 페이지 구현 계획

• 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% 비율이 유지되는지 확인 (성공/실패)