# 카드 내역 조회 구현 체크리스트

## 개요
- **페이지 경로**: `/ko/accounting/card-transactions`
- **참고**: 입출금 계좌조회 페이지와 유사한 구조

## 화면 구성

### 1. 상단 영역
- 제목: "카드 내역 조회"
- 부제: "법인카드 사용 내역을 조회합니다"

### 2. 날짜 선택 + 빠른 버튼
- 날짜 범위 선택
- 빠른 버튼: 당해년도, 전전월, 전월, 당월, 어제, 오늘
- 새로고침 버튼 (출금관리 스타일, 오른쪽 위치)

### 3. 요약 카드 (2개)
- 전월 사용액: 금액 표시
- 당월 사용액: 금액 표시

### 4. 필터 영역
- 검색 입력창 (좌측)
- 총 N건 표시
- 필터 2개:
  - 카드명 필터 (전체, 카드명 목록) - 디폴트: 전체
  - 정렬 필터 (최신순, 등록순, 금액 높은순, 금액 낮은순) - 디폴트: 최신순

### 5. 테이블
- **체크박스 없음**
- **번호 컬럼 없음**
- 컬럼 순서:
  1. 카드
  2. 카드명
  3. 사용자
  4. 사용일시
  5. 가맹점명
  6. 사용금액

### 6. 합계 행
- 테이블 마지막에 합계 행
- 사용금액 열에만 합계 표시

---

## 구현 체크리스트

### Phase 1: 파일 구조 생성
- [x] types.ts 생성 (타입 정의)
- [x] index.tsx 생성 (메인 컴포넌트)
- [x] page.tsx 생성 (라우트)

### Phase 2: 타입 정의
- [x] CardTransaction 인터페이스
- [x] SortOption 타입

### Phase 3: 컴포넌트 구현
- [x] 헤더 영역 (제목, 부제)
- [x] 날짜 선택 + 빠른 버튼
- [x] 새로고침 버튼
- [x] 요약 카드 2개 (전월/당월 사용액)
- [x] 검색 + 필터 영역 (카드명, 정렬)
- [x] 테이블 (체크박스/번호 없음)
- [x] 합계 행

### Phase 4: 테스트 및 문서화
- [x] all-pages-test-urls.md 업데이트

### Phase 5: 템플릿 기능 추가
- [x] IntegratedListTemplateV2에 showCheckbox props 추가
- [x] 조건부 체크박스 렌더링 구현

---

## Mock 데이터 예시
```typescript
{
  card: '신한 1234',
  cardName: '법인카드1',
  user: '홍길동',
  usedAt: '2025-12-12 12:12',
  merchantName: '가맹점명',
  amount: 100000
}
```

## 참고 파일
- `src/components/accounting/BankTransactionInquiry/index.tsx`
- `src/components/accounting/BankTransactionInquiry/types.ts`