c6b605200d
신규 페이지: - 회계관리: 거래처, 예상비용, 청구서, 발주서 - 게시판: 공지사항, 자료실, 커뮤니티 - 고객센터: 문의/FAQ - 설정: 계정, 알림, 출퇴근, 팝업, 구독, 결제내역 - 리포트 (차트 시각화) - 개발자 테스트 URL 페이지 기능 개선: - HR 직원관리/휴가관리/카드관리 강화 - IntegratedListTemplateV2 확장 - AuthenticatedLayout 패딩 표준화 - 로그인 페이지 UI 개선 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2.2 KiB
2.2 KiB
카드 내역 조회 구현 체크리스트
개요
- 페이지 경로:
/ko/accounting/card-transactions - 참고: 입출금 계좌조회 페이지와 유사한 구조
화면 구성
1. 상단 영역
- 제목: "카드 내역 조회"
- 부제: "법인카드 사용 내역을 조회합니다"
2. 날짜 선택 + 빠른 버튼
- 날짜 범위 선택
- 빠른 버튼: 당해년도, 전전월, 전월, 당월, 어제, 오늘
- 새로고침 버튼 (출금관리 스타일, 오른쪽 위치)
3. 요약 카드 (2개)
- 전월 사용액: 금액 표시
- 당월 사용액: 금액 표시
4. 필터 영역
- 검색 입력창 (좌측)
- 총 N건 표시
- 필터 2개:
- 카드명 필터 (전체, 카드명 목록) - 디폴트: 전체
- 정렬 필터 (최신순, 등록순, 금액 높은순, 금액 낮은순) - 디폴트: 최신순
5. 테이블
- 체크박스 없음
- 번호 컬럼 없음
- 컬럼 순서:
- 카드
- 카드명
- 사용자
- 사용일시
- 가맹점명
- 사용금액
6. 합계 행
- 테이블 마지막에 합계 행
- 사용금액 열에만 합계 표시
구현 체크리스트
Phase 1: 파일 구조 생성
- types.ts 생성 (타입 정의)
- index.tsx 생성 (메인 컴포넌트)
- page.tsx 생성 (라우트)
Phase 2: 타입 정의
- CardTransaction 인터페이스
- SortOption 타입
Phase 3: 컴포넌트 구현
- 헤더 영역 (제목, 부제)
- 날짜 선택 + 빠른 버튼
- 새로고침 버튼
- 요약 카드 2개 (전월/당월 사용액)
- 검색 + 필터 영역 (카드명, 정렬)
- 테이블 (체크박스/번호 없음)
- 합계 행
Phase 4: 테스트 및 문서화
- all-pages-test-urls.md 업데이트
Phase 5: 템플릿 기능 추가
- IntegratedListTemplateV2에 showCheckbox props 추가
- 조건부 체크박스 렌더링 구현
Mock 데이터 예시
{
card: '신한 1234',
cardName: '법인카드1',
user: '홍길동',
usedAt: '2025-12-12 12:12',
merchantName: '가맹점명',
amount: 100000
}
참고 파일
src/components/accounting/BankTransactionInquiry/index.tsxsrc/components/accounting/BankTransactionInquiry/types.ts