# 출금관리 (Withdrawal Management) 구현 체크리스트

> **상태**: ✅ 완료 (2025-12-18)
> **참고**: 입금관리(DepositManagement)와 동일한 구조

## 개요
- **경로**: `/accounting/withdrawals` (리스트), `/accounting/withdrawals/[id]` (상세)
- **기능**: 출금 내역 조회, 수정 (계좌 관리에 등록된 계좌의 자동 출금 내역 수집)
- **참고**: 스크린샷 3장

---

## Phase 1: 타입 및 상수 정의

### 1.1 types.ts 생성
- [ ] 출금 유형 타입 (WithdrawalType)
  - `unset` (미설정)
  - `purchasePayment` (매입대금)
  - `advance` (선급금)
  - `suspense` (가지급금)
  - `rent` (임대료)
  - `interestExpense` (이자비용)
  - `depositPayment` (보증금 지급)
  - `loanRepayment` (차입금 상환)
  - `dividendPayment` (배당금 지급)
  - `vatPayment` (부가세 납부)
  - `salary` (급여)
  - `insurance` (4대보험)
  - `tax` (세금)
  - `utilities` (공과금)
  - `expenses` (경비)
  - `other` (기타)

- [ ] 정렬 옵션 (SortOption): 최신순, 등록순, 금액 높은순, 금액 낮은순
- [ ] 출금 레코드 인터페이스 (WithdrawalRecord)
  - id, withdrawalDate, withdrawalAmount
  - accountName, recipientName (수취인명)
  - note (적요), withdrawalType
  - vendorId, vendorName
  - createdAt, updatedAt

---

## Phase 2: 리스트 페이지 구현

### 2.1 페이지 라우트
- [ ] `/src/app/[locale]/(protected)/accounting/withdrawals/page.tsx`

### 2.2 WithdrawalManagement 컴포넌트
- [ ] `/src/components/accounting/WithdrawalManagement/index.tsx`

#### 2.2.1 상단 통계 카드 (4개)
| 카드 | 값 | 아이콘 색상 |
|------|-----|------------|
| 출금 총액 | {amount}원 | blue |
| 당월 출금 | {amount}원 | green |
| 거래처 미설정 | {count}건 | orange |
| 출금유형 미설정 | {count}건 | red |

#### 2.2.2 헤더 액션
- [ ] DateRangeSelector (날짜 범위)
- [ ] 빠른 필터: 당해연도, 전년도, 전월, 당월, 어제, 오늘, 새로고침

#### 2.2.3 계정과목명 셀렉트 + 저장 버튼
- [ ] 계정과목명 Select (출금 유형 옵션)
- [ ] 저장 버튼 → "N개의 출금 유형을 {계정과목명}으로 모두 변경하시겠습니까?" Alert

#### 2.2.4 필터 (3개)
| 필터 | 옵션 |
|------|------|
| 거래처 | 전체, 거래처 목록 |
| 출금유형 | 전체, 매입대금, 선급금, 가지급금, 임대료, 이자비용, 보증금 지급, 차입금 상환, 배당금 지급, 부가세 납부, 급여, 4대보험, 세금, 공과금, 경비, 기타, 미설정 |
| 정렬 | 최신순, 등록순, 금액 높은순, 금액 낮은순 |

#### 2.2.5 테이블 컬럼 (체크박스 + 7개 + 작업)
| 순서 | 컬럼명 | 정렬 | 비고 |
|------|--------|------|------|
| 0 | 체크박스 | center | - |
| 1 | 출금일 | center | - |
| 2 | 출금계좌 | left | - |
| 3 | 수취인명 | left | - |
| 4 | 출금금액 | right | 금액 포맷 |
| 5 | 거래처 | left | 미설정시 빨간색 |
| 6 | 출금유형 | center | Badge |
| 7 | 작업 | center | 선택 시 수정/삭제 버튼 |

#### 2.2.6 테이블 합계 행
- [ ] 출금금액 합계

---

## Phase 3: 상세 페이지 구현

### 3.1 페이지 라우트
- [ ] `/src/app/[locale]/(protected)/accounting/withdrawals/[id]/page.tsx`

### 3.2 WithdrawalDetail 컴포넌트
- [ ] `/src/components/accounting/WithdrawalManagement/WithdrawalDetail.tsx`
- [ ] mode prop: `view` | `edit`

#### 3.2.1 상단 버튼
| 모드 | 버튼 |
|------|------|
| view | 목록, 삭제, 수정 |
| edit | 취소, 저장 |

#### 3.2.2 기본 정보 섹션
| 필드명 | 타입 | 편집 가능 | 비고 |
|--------|------|----------|------|
| 출금일 | date | ❌ | 읽기 전용 |
| 출금계좌 | text | ❌ | 읽기 전용 |
| 수취인명 | text | ❌ | 읽기 전용 |
| 출금금액 | number | ❌ | 읽기 전용 |
| 적요 | select | ✅ | 선택 가능 |
| 거래처 | select | ✅ | 필수 |
| 출금 유형 | select | ✅ | 필수 |

---

## Phase 4: 파일 구조

```
src/
├── app/[locale]/(protected)/accounting/withdrawals/
│   ├── page.tsx                    # 리스트 페이지
│   └── [id]/
│       └── page.tsx                # 상세/수정 페이지
└── components/accounting/WithdrawalManagement/
    ├── index.tsx                   # 리스트 컴포넌트
    ├── WithdrawalDetail.tsx        # 상세/수정 컴포넌트
    └── types.ts                    # 타입 및 상수 정의
```

---

## 테스트 URL

| 페이지 | URL |
|--------|-----|
| 리스트 | `/ko/accounting/withdrawals` |
| 상세 | `/ko/accounting/withdrawals/withdrawal-1` |
| 수정 | `/ko/accounting/withdrawals/withdrawal-1?mode=edit` |