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>
4.2 KiB
4.2 KiB
계좌관리 구현 체크리스트
작성일: 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에 전달하여 계좌 내역 자동 수신
- 연동 성공 시 해당 계좌의 사용 내역이 자동으로 시스템에 반영됨
- 해당 타인에는 은행에서 빠른 조회 서비스 사전 등록 필요
삭제 시 주의사항
- 삭제된 계좌의 과거 사용 내역은 보존