sam-react-prod/claudedocs/accounting/[PLAN-2025-12-19] bank-account-transaction-inquiry.md

[PLAN-2025-12-19] 입출금 계좌조회 페이지 구현 계획서

작성일: 2025-12-19 상태: 📋 대기 (사용자 확인 필요) 참조: DepositManagement, IntegratedListTemplateV2

---

1. 페이지 개요

항목	내용
페이지명	입출금 계좌조회
설명	은행 계좌 정보와 입출금 내역을 조회할 수 있습니다
URL	/ko/accounting/bank-transactions
아이콘	Building2 (은행) 또는 Wallet

---

2. UI 구성 분석 (스크린샷 기준)

2.1 헤더 영역

• 페이지 타이틀: "입출금 계좌조회"
• 설명: "은행 계좌 정보와 입출금 내역을 조회할 수 있습니다"

2.2 필터 영역 (DateRangeSelector 확장)

• 기간 선택: 시작일 ~ 종료일 (DateRangeSelector 컴포넌트)
• 탭 버튼 그룹:
  • 전체(선택) - 전체 입출금 내역
  • 입금/수입 - 입금만 필터
  • 출금 - 출금만 필터
  • 입금 - (중복인지 확인 필요, 스크린샷 확인)
  • 어제 - 어제 날짜 빠른 선택
  • 오늘 - 오늘 날짜 빠른 선택
  • 새로고침 - 데이터 새로고침 버튼

2.3 통계 카드 (4개)

순서	라벨	값 예시	아이콘 색상
1	입금	3,123,000원	🔵 blue
2	출금	3,123,000원	🔴 red
3	입금 유형 미설정	4건	🟢 green
4	출금 유형 미설정	4건	🟠 orange

2.4 검색 영역

• 검색창 (은행명, 계좌번호, 거래처, 비고 검색)

2.5 테이블 컬럼 (14개)

순서	컬럼명	key	정렬	비고
1	체크박스	checkbox	center	선택용
2	번호	no	center	globalIndex
3	은행명	bankName	left
4	계좌명	accountName	left
5	거래일시	transactionDate	center
6	구분	type	center	입금/출금 Badge
7	적요	note	left
8	거래처	vendorName	left
9	입금자/수취인	depositorName	left
10	입금	depositAmount	right	숫자 포맷
11	출금	withdrawalAmount	right	숫자 포맷
12	잔액	balance	right	숫자 포맷
13	입출금 유형	transactionType	center	Badge
14	작업	actions	center	수정 버튼 (체크 시 표시)

2.6 테이블 합계 행

• 합계 행 표시 (입금액 합계, 출금액 합계)

2.7 수정 버튼 동작

• 수정 버튼 클릭 시:
  • 입금 데이터 → /ko/accounting/deposits/{id}?mode=edit 이동
  • 출금 데이터 → /ko/accounting/withdrawals/{id}?mode=edit 이동

---

3. 구현 체크리스트

Phase 1: 기본 구조 설정

• 1.1 페이지 라우트 생성 (/accounting/bank-transactions/page.tsx)
• 1.2 컴포넌트 폴더 생성 (/components/accounting/BankTransactionInquiry/)
• 1.3 types.ts 작성 (타입 정의)
• 1.4 index.tsx 기본 구조 작성

Phase 2: 타입 정의

• 2.1 BankTransaction 인터페이스 정의

  interface BankTransaction {
    id: string;
    bankName: string;           // 은행명
    accountName: string;        // 계좌명
    transactionDate: string;    // 거래일시
    type: 'deposit' | 'withdrawal'; // 구분 (입금/출금)
    note?: string;              // 적요
    vendorId?: string;          // 거래처 ID
    vendorName?: string;        // 거래처명
    depositorName?: string;     // 입금자/수취인
    depositAmount: number;      // 입금
    withdrawalAmount: number;   // 출금
    balance: number;            // 잔액
    transactionType?: string;   // 입출금 유형
    sourceId: string;           // 원본 입금/출금 ID (상세 이동용)
  }
  

• 2.2 필터 타입 정의
• 2.3 정렬 옵션 정의

Phase 3: 통계 카드 구현

• 3.1 총 입금 카드
• 3.2 총 출금 카드
• 3.3 입금 건 카드
• 3.4 출금 건 카드

Phase 4: 필터 영역 구현

• 4.1 DateRangeSelector 연동
• 4.2 탭 버튼 그룹 구현 (전체/입금/수입/출금/어제/오늘)
• 4.3 새로고침 버튼
• 4.4 빠른 날짜 선택 (어제/오늘) 로직

Phase 5: 테이블 구현

• 5.1 IntegratedListTemplateV2 연동
• 5.2 테이블 컬럼 정의 (14개 컬럼)
• 5.3 체크박스 기능
• 5.4 번호 컬럼 (globalIndex 사용)
• 5.5 구분 컬럼 Badge (입금: 파랑, 출금: 빨강)
• 5.6 금액 컬럼 숫자 포맷팅
• 5.7 합계 행 구현 (tableFooter)
• 5.8 작업 컬럼 (체크 시 수정 버튼 표시)

Phase 6: 상세 이동 로직

• 6.1 수정 버튼 클릭 핸들러
• 6.2 type에 따른 분기 처리
  • deposit → /ko/accounting/deposits/{sourceId}?mode=edit
  • withdrawal → /ko/accounting/withdrawals/{sourceId}?mode=edit

Phase 7: Mock 데이터 및 테스트

• 7.1 Mock 데이터 생성 함수
• 7.2 필터링 로직 테스트
• 7.3 정렬 로직 테스트
• 7.4 페이지네이션 테스트

Phase 8: 마무리

• 8.1 모바일 카드 뷰 구현
• 8.2 코드 정리 및 최적화
• 8.3 테스트 URL 문서 업데이트 ([REF] all-pages-test-urls.md)

---

4. 파일 구조

src/
├── app/[locale]/(protected)/accounting/
│   └── bank-transactions/
│       └── page.tsx                    # 페이지 라우트
└── components/accounting/
    └── BankTransactionInquiry/
        ├── index.tsx                   # 메인 컴포넌트
        └── types.ts                    # 타입 정의

---

5. 참고 사항

5.1 기존 컴포넌트 재사용

• IntegratedListTemplateV2 - 리스트 템플릿
• DateRangeSelector - 날짜 범위 선택
• StatCard - 통계 카드
• ListMobileCard - 모바일 카드

5.2 스크린샷 Description 정보 참고

• 필터 탭: 전체(선택), 입금/수입, 출금, 입금, 어제, 오늘
• 수정 버튼 클릭 시 입금/출금 상세 화면으로 이동
• 종류(정렬): 취입선, 등록순, 입력순

5.3 레이아웃 일치 확인 사항

• DepositManagement와 동일한 레이아웃 구조 사용
• 카드 4개 가로 배치
• 테이블 합계 행 스타일 일치

---

6. 완료 후 작업

• claudedocs/[REF] all-pages-test-urls.md 업데이트

  | 입출금 계좌조회 | `/ko/accounting/bank-transactions` | 🆕 NEW |
  

---

7. 예상 소요 시간

Phase	작업	예상
1-2	기본 구조 + 타입	-
3-4	카드 + 필터	-
5	테이블	-
6-7	상세 이동 + Mock	-
8	마무리	-

---

확인 후 작업 시작하겠습니다!