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

[IMPL-2025-12-18] 매입관리 페이지 구현

개요

회계관리 > 매입관리 페이지 구현 (리스트 + 상세)

참고자료

• 기안함 리스트 페이지: src/components/approval/DraftBox/index.tsx
• 공통 템플릿: IntegratedListTemplateV2
• 공통 컴포넌트: DateRangeSelector, ListMobileCard

---

Phase 1: 리스트 페이지

1.1 페이지 구조

• 라우트 생성: /accounting/purchase
• 컴포넌트 생성: src/components/accounting/PurchaseManagement/index.tsx
• 타입 정의: src/components/accounting/PurchaseManagement/types.ts

1.2 상단 영역

• 날짜 범위 선택 (DateRangeSelector)
• 탭 버튼: 담대조건, 진행중, 당일, 이달, 이번, 미결

1.3 통계 카드 (4개)

• 매입금액 합계 (원)
• 출금액 합계 (원)
• 매입 건수
• 미결 건수

1.4 필터 셀렉트 박스

• 부가세여부 필터 (다중 선택): 부가세여부, 상품매입, 오주경비, 소모품비, 수선비, 원재료비, 사무용품비 등
• 거래처 필터 (검색 + 다중 선택)
• 증빙 필터 (다중 선택): 증빙유형 목록

1.5 테이블 컬럼

컬럼	설명
No	순번
매입일자	매입 등록일
매입금액	금액
거래처	거래처명
출금액	실제 출금액
부가세	부가세 금액
매입유형	유형 분류
증빙유형	세금계산서 등

1.6 기능

• 매입 자동 등록: 지출예상내역서 승인 완료 시 자동 등록
• 매입/매출등록 Alert 표시 (API 연동 예정)
• 일람표/거래처원장 연계 출력

---

Phase 2: 상세 페이지 (모달)

2.1 기본 정보 섹션

• 근거 문서명: 품의서 또는 지출결의서 표시
• 결재 버튼: 클릭 시 매입 문서 상세 팝업
• 예상 비용 표시: 품의서/지출결의서 예상/총 비용

2.2 매입 정보 섹션

• 매입일자: 문서번호 + 상세조회 아이콘
• 출금계좌 셀렉트 박스: 등록된 계좌 목록 (계좌번호 마지막 4자리 + 별명)
• 거래처 셀렉트 박스: 검색 기능
• 매입 유형 셀렉트 박스: 부자재매입, 상품매입, 오주경비, 소모품비, 수선비, 원재료비, 사무용품비, 임차료, 수도광열비, 통신비, 차량유지비, 잡비, 보험료, 기타경비, 미상담

2.3 품목 정보 섹션

• 테이블: 품목명, 수량, 단가, 공급가액, 부가세, 적요
• 행 추가/삭제 기능
• 합계 표시

2.4 세금계산서 섹션

• 세금계산서 수취 토글 버튼
• 토글 시 미수취/수취완료 상태 변경
• 수취 완료 후 완료 상태로 변경

---

Phase 3: 연동 및 마무리

• 전자결재 시스템 연동 (지출예상내역서 승인 → 매입 자동 등록)
• API 연동 준비 (비포템 API 자동 등록 예정)
• 일람표/거래처원장 출력 기능

---

파일 구조

src/
├── app/[locale]/(protected)/accounting/
│   └── purchase/
│       └── page.tsx
├── components/accounting/
│   └── PurchaseManagement/
│       ├── index.tsx          # 리스트 페이지
│       ├── types.ts           # 타입 정의
│       └── PurchaseDetailModal.tsx  # 상세 모달

---

진행 상태

• 요구사항 분석 완료
• 계획서 작성 완료
• Phase 1 완료 (리스트 페이지)
• Phase 2 완료 (상세 모달)
• Phase 3 대기 (API 연동)

테스트 URL

http://localhost:3000/ko/accounting/purchase