78 lines
5.5 KiB
Markdown
78 lines
5.5 KiB
Markdown
# 에이전트 소속 크리에이터 목록 페이지 구현 계획
|
|
|
|
- [ ] 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% 비율이 유지되는지 확인 (성공/실패)
|