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

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

---

## 1. 페이지 개요

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

---

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

### 2.1 헤더 영역
- [x] 페이지 타이틀: "입출금 계좌조회"
- [x] 설명: "은행 계좌 정보와 입출금 내역을 조회할 수 있습니다"

### 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` 인터페이스 정의
  ```typescript
  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` 업데이트
  ```markdown
  | 입출금 계좌조회 | `/ko/accounting/bank-transactions` | 🆕 NEW |
  ```

---

## 7. 예상 소요 시간

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

---

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