sam-react-prod/claudedocs/accounting/[IMPL-2025-12-18] withdrawal-management-checklist.md

출금관리 (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