# 계좌관리 구현 체크리스트

> 작성일: 2025-12-19
> 경로: 기준정보 > 계좌관리

---

## 스크린샷 분석

### 리스트 페이지 (계좌관리)
- **경로**: `/ko/settings/accounts`
- **화면명**: 계좌관리
- **제목**: 계좌관리
- **부제목**: 계좌 목록을 관리합니다

**테이블 컬럼**:
| No. | 컬럼명 | 설명 |
|-----|--------|------|
| 1 | No. | 번호 (1부터 시작) |
| 2 | 은행 | 신한은행, 국민은행, 우리은행 등 |
| 3 | 계좌번호 | 1234-****-****-1234 (마스킹) |
| 4 | 계좌명 | 계좌명 |
| 5 | 예금주 | 예금주명 |
| 6 | 작업 | 수정/삭제 버튼 (체크박스 선택 시) |

**상단 UI**:
- 검색창
- 페이지 개수 선택 (12개 선택)
- 삭제 버튼 (다중 선택)
- 계좌 등록 버튼

**버튼 동작**:
- 계좌 등록: 계좌 상세 화면(등록 모드)으로 이동
- 삭제 (상단): "선택하신 N개의 계좌를 정말 삭제하시겠습니까?" 확인 팝업
- 수정 (행): 계좌 상세 화면으로 이동
- 삭제 (행): "계좌를 정말 삭제하시겠습니까?" 확인 팝업

---

### 상세 페이지 (계좌 상세)
- **경로**: `/ko/settings/accounts/[id]` (상세), `/ko/settings/accounts/new` (등록)
- **화면명**: 계좌 상세
- **제목**: 계좌 상세
- **부제목**: 계좌 정보를 관리합니다

**상단 버튼**: 삭제, 수정

**기본 정보 섹션**:
| 필드 | 타입 | 설명 |
|------|------|------|
| 은행 | Dropdown | 은행명 선택 |
| 계좌번호 | Text (readonly) | 1234-1234-1234-1234 |
| 예금주 | Text | 예금주명 |
| 계좌 비밀번호 (빠른 조회 서비스) | Password | 마스킹 처리 |
| 계좌명 | Text | 계좌명을 입력해주세요 |
| 상태 | Dropdown | 사용/정지 |

**상태 옵션**:
- 사용: 계좌 활성화
- 정지: 해당 계좌의 자동 조회 중지

---

## 구현 체크리스트

### Phase 1: 파일 구조 생성
- [ ] `src/app/[locale]/(protected)/settings/accounts/page.tsx` 생성
- [ ] `src/app/[locale]/(protected)/settings/accounts/[id]/page.tsx` 생성
- [ ] `src/app/[locale]/(protected)/settings/accounts/new/page.tsx` 생성
- [ ] `src/components/settings/AccountManagement/index.tsx` 생성
- [ ] `src/components/settings/AccountManagement/types.ts` 생성
- [ ] `src/components/settings/AccountManagement/AccountDetail.tsx` 생성
- [ ] `src/components/settings/AccountManagement/AccountForm.tsx` 생성

### Phase 2: 타입 정의
- [ ] Account 인터페이스 정의
- [ ] AccountFormData 타입 정의
- [ ] 은행 목록 상수 정의
- [ ] 상태 옵션 상수 정의

### Phase 3: 리스트 페이지 구현
- [ ] IntegratedListTemplateV2 사용
- [ ] 테이블 컬럼 정의 (No., 은행, 계좌번호, 계좌명, 예금주, 작업)
- [ ] 계좌번호 마스킹 처리
- [ ] 검색 기능
- [ ] 페이지네이션
- [ ] 다중 선택 삭제 기능
- [ ] 계좌 등록 버튼 → /settings/accounts/new 이동
- [ ] 수정 버튼 → /settings/accounts/[id] 이동
- [ ] 삭제 확인 AlertDialog

### Phase 4: 상세/등록 페이지 구현
- [ ] 등록 페이지 (/new) - AccountForm mode="create"
- [ ] 상세 페이지 (/[id]) - AccountDetail + AccountForm mode="view/edit"
- [ ] 기본 정보 섹션 레이아웃
- [ ] 은행 선택 드롭다운
- [ ] 계좌번호 필드 (상세에서 readonly)
- [ ] 예금주 필드
- [ ] 계좌 비밀번호 필드 (마스킹)
- [ ] 계좌명 필드
- [ ] 상태 드롭다운 (사용/정지)
- [ ] 삭제/수정 버튼

### Phase 5: Mock 데이터 & 테스트
- [ ] Mock 계좌 데이터 생성
- [ ] 리스트 페이지 테스트
- [ ] 상세 페이지 테스트
- [ ] 등록 페이지 테스트
- [ ] 삭제 기능 테스트

### Phase 6: 마무리
- [ ] URL 테스트 문서 업데이트
- [ ] 체크리스트 완료 표시

---

## 참고 사항

### Description (스크린샷 오른쪽 패널)
- 계좌 인증 정보, 비밀번호(빠른 조회 서비스)를 바로결제 API에 전달하여 계좌 내역 자동 수신
- 연동 성공 시 해당 계좌의 사용 내역이 자동으로 시스템에 반영됨
- 해당 타인에는 은행에서 빠른 조회 서비스 사전 등록 필요

### 삭제 시 주의사항
- 삭제된 계좌의 과거 사용 내역은 보존