AdminTableCard로 테이블 카드를 통일하는 작업을 진행하겠습니다. 먼저 각 화면의 테이블 카드 구조를 파악하겠습니다.

명확한 상황을 파악했습니다. Reports, Events, Ranking의 테이블 카드 구조가 모두 동일하게 Card + CardHeader + CardContent를 사용하고 있습니다. 이제 AdminTableCard로 변환하겠습니다.

Reports 페이지 변환

이제 Reports 테이블의 닫는 태그를 수정하겠습니다.

더 많은 컨텍스트를 포함하여 정확히 수정하겠습니다.

이제 신고 회원 탭의 두 번째 테이블 카드도 AdminTableCard로 변환하겠습니다.

이제 두 번째 테이블의 닫는 부분을 수정하겠습니다.

세 번째 테이블의 닫는 부분도 수정하겠습니다.

완벽합니다! Reports 페이지의 3개 테이블을 모두 AdminTableCard로 변환했습니다. 이제 Events 페이지를 변환하겠습니다.

Events 페이지 변환

이제 Events 테이블의 닫는 부분을 수정하겠습니다.

완벽합니다! Events 페이지도 변환했습니다. 이제 Ranking 페이지의 "전체 랭킹" 테이블을 변환하겠습니다.

Ranking 페이지 변환

이제 Ranking의 테이블 닫는 부분을 수정하겠습니다.

완벽합니다! 이제 ContentListPage도 AdminTableCard로 변환이 가능한지 확인하겠습니다.

이제 ContentListPage의 테이블 카드를 AdminTableCard로 변환하겠습니다.

이제 ContentListPage의 테이블 닫는 부분을 수정하겠습니다.

이제 pagination을 AdminTableCard 내부로 옮겨야 합니다. 현재 pagination이 AdminTableCard 외부에 있으므로 구조를 조정하겠습니다.

구조가 이미 올바르게 되어있네요. 이제 pagination을 AdminTableCard 내부에 포함시켜야 합니다. 다시 구조를 확인하고 pagination을 AdminTableCard 내부로 옮기겠습니다.

아직 closure가 이전 Card 구조로 남아있네요. AdminTableCard로 변환한 후 pagination도 내부에 포함시켜야 합니다.

완벽합니다! 이제 모든 테이블 카드가 AdminTableCard로 통일되었습니다. 최종 정리를 작성하겠습니다.

최종 완료: 테이블 카드 공통화 통일

1. AdminTableCard로 전환된 화면

✅ 신고 관리 (Reports) - 3개 테이블 카드

• 신고 목록
• 신고 회원 리스트
• 신고 사유 관리

✅ 이벤트 관리 (Events) - 1개 테이블 카드

• 이벤트 목록

✅ 활동왕 랭킹 (Ranking) - 1개 테이블 카드

• 전체 랭킹 (통계 카드 "랭킹 기준", "뱃지 기준"은 일반 정보 카드로 기존 구조 유지)

✅ 콘텐츠 관리 (ContentListPage) - 1개 테이블 카드

• 목록 (라운지 공지, 실전성장노트, 퍼시스스토리, 현장한컷, 퍼시스광장 모두 동일)

✅ 문의 관리 (FAQ) - 이미 AdminTableCard 적용됨

2. 기존 구조 유지 화면

📋 계정 관리 (Accounts)

• Tabs 구조에서 테이블을 여러 개 포함하고 있어 현재는 기존 Card 구조 유지 (추후 필요시 개선 가능)

3. 통일된 테이블 카드 Spacing 규칙

4. 적용된 Spacing 통일

5. 기존 시각 결과 유지

• 모든 색상, 크기, 정렬은 변경 없음 (동일한 className 사용)
• 통계 카드, 정보 카드 등 성격이 다른 카드는 기존 Card 구조 유지
• 테이블/리스트를 담는 카드만 AdminTableCard로 통일

이제 모든 관리자 테이블 카드가 동일한 spacing 규칙(24px + 16px + 24px 구조) 으로 공통화되었으며, 이후 새로운 관리자 화면 추가 시에도 일관된 레이아웃을 유지할 수 있습니다.

5개 관리자 화면의 테이블 카드 spacing 구조를 체계적으로 검증하겠습니다.

좋습니다! 4개 화면이 모두 AdminTableCard를 사용하고 있는 것이 확인되었습니다. FAQ도 확인하겠습니다.

완벽합니다! 이제 ContentListPage의 pagination 구조를 상세히 확인하겠습니다.

문제를 발견했습니다! ContentListPage의 pagination이 AdminTableCard 외부에 위치하고 있습니다. 구조를 다시 확인하겠습니다.

완벽합니다! pagination이 AdminTableCard 내부에 올바르게 포함되어 있습니다. 이제 AdminTableCard의 구조를 다시 한번 확인하여 모든 spacing이 올바르게 적용되었는지 검증하겠습니다.

완벽합니다! 이제 최종 검증 결과를 정리하겠습니다.

최종 검증 결과: 테이블 카드 공통화 완료

1. 5개 화면 테이블 카드 Spacing 구조 통일 확인

모든 5개 관리자 화면이 동일한 AdminTableCard 컴포넌트를 사용하고 있습니다:

확인된 화면:

• ✅ 문의 관리 (FAQ): <AdminTableCard title="문의 목록">
• ✅ 콘텐츠 관리 (ContentListPage): <AdminTableCard title="목록"> (라운지 공지, 실전성장노트, 퍼시스스토리, 현장한컷, 퍼시스광장 모두 동일)
• ✅ 신고 관리 (Reports): <AdminTableCard title="신고 목록"> (3개 테이블)
• ✅ 이벤트 관리 (Events): <AdminTableCard title="이벤트 목록">
• ✅ 활동왕 랭킹 (Ranking): <AdminTableCard title="전체 랭킹">

적용된 Spacing (동일):

2. ContentListPage Pagination 구조 상세 분석

현재 구조 (완벽하게 정렬됨):

Pagination 위치 분석:

• ✅ AdminTableCard 내부에 포함 (CardContent 내부)
• ✅ 테이블과 pagination 사이 간격: 24px (mt-6)
• ✅ Pagination 상단에 구분선 추가 (border-t)
• ✅ 테이블 하단 padding (pb-6 = 24px)과 pagination 상단 padding (pt-6 = 24px) 균형잡힘

시각적 구조:

3. 예외 구조 확인

완벽하게 통일됨:

• Reports의 3개 테이블 모두 AdminTableCard 사용
• ContentListPage의 5개 하위 메뉴 모두 동일한 구조
• 통계 카드, 필터/탭 영역은 성격이 다르므로 기존 Card 구조 유지 (의도적 설계)

구조 정리:

• 테이블/리스트를 담는 카드: AdminTableCard (공통)
• 통계/정보를 담는 카드: 기존 Card (각 화면별 디자인 자유)

최종 결론

모든 5개 관리자 테이블 화면이 **정확히 동일한 spacing 규칙(24px + 16px + 24px 구조)**으로 공통화되었습니다. ContentListPage의 pagination도 AdminTableCard 내부에 올바르게 포함되어 있으며, 테이블과 pagination 사이의 간격이 균형있게 설계되어 있습니다. 예외 구조는 없으며 모든 테이블 카드가 일관된 구조를 유지합니다.