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
[IMPL-2025-12-18] 거래처원장 (Vendor Ledger) 구현
개요
- 화면명: 거래처원장
- 경로: 회계관리 > 거래처원장
- 구성: 리스트 페이지 + 상세 페이지
Phase 1: 리스트 페이지 (VendorLedger/index.tsx)
1.1 헤더 영역
- 제목: "거래처원장"
- 설명: "거래처별 기간 내역을 조회합니다."
- 기간 선택기: 2025-09-01 ~ 2025-09-03 형식
- 기간 버튼: 당해년도, 전년월, 전월, 당월, 어제, 오늘
- 엑셀 다운로드 버튼
1.2 요약 카드 (4개)
- 전기 이월: 3,123,000원
- 매출: 3,123,000원
- 수금: 3,123,000원
- 잔액: 3,123,000원
1.3 테이블 영역
- 검색 필드
- 총 N건 표시
- 테이블 컬럼:
- No.
- 거래처명
- 이월잔액
- 매출
- 수금
- 잔액
- 결제일
- 합계 행 (테이블 하단)
- 행 클릭 시 상세 페이지 이동
Phase 2: 상세 페이지 (VendorLedger/VendorLedgerDetail.tsx)
2.1 헤더 영역
- 제목: "거래처원장 상세 (거래명세서별)"
- 설명: "거래처 상세 내역을 조회합니다."
- 기간 선택기: 2025-09-01 ~ 2025-09-03
- 기간 버튼: 당해년도, 전년월, 전월, 당월, 어제, 오늘
- PDF 다운로드 버튼
2.2 거래처 정보 섹션 (2열 레이아웃)
- 좌측 열:
- 회사명: [값]
- 사업자등록번호: 123-12-12345
- 전화번호: 02-1234-1234
- 팩스: 02-1234-1236
- 주소: 주소영
- 우측 열:
- 기간: 2025-01-01 ~ 2025-12-31
- 대표자: 홍길동
- 모바일: 02-1234-1235
- 이메일: abc@email.com
2.3 판매/수금 내역 테이블
- 컬럼: 일자, 적요, 판매, 수금, 잔액, 작업
- 이월잔액 행 (첫 행, 적요에 "이월잔액")
- 거래 행 (◆ 아이콘 + 날짜)
- 클릭 시 어음 상세 화면 이동
- 거래명세서 행 (클릭 시 문서 상세 팝업)
- 품목명 행 (세금계산서 미발행 시 노란색 하이라이트)
- 누계 행 (※ 123건 누계 (VAT 포함) 형식)
- 월별 계 행 (회색 배경, 예: "2025/01 계", "2025/09 계")
- 작업 컬럼: 수정 아이콘 (✏️)
Phase 3: 타입 및 라우트
3.1 types.ts
- VendorLedgerItem 인터페이스
- VendorLedgerDetail 인터페이스
- TransactionEntry 인터페이스
3.2 라우트 설정
/ko/accounting/vendor-ledger- 리스트 페이지/ko/accounting/vendor-ledger/[id]- 상세 페이지
스크린샷 상세 분석
리스트 페이지 테이블 데이터 예시
| No. | 거래처명 | 이월잔액 | 매출 | 수금 | 잔액 | 결제일 |
|---|---|---|---|---|---|---|
| 7 | 회사명 | -100,000 | ||||
| 6 | 회사명 | 10,000,000 | 10,000,000 | 10,000,000 | ||
| 5 | 회사명 | 10,000,000 | ||||
| ... | ||||||
| 합계 | 10,000,000 | 10,000,000 | 10,000,000 | 10,000,000 |
상세 페이지 판매/수금 내역 예시
| 일자 | 적요 | 판매 | 수금 | 잔액 | 작업 |
|---|---|---|---|---|---|
| 이월잔액 | 10,000,000 | ||||
| ◆ 2025-01-01 | 수취 어음 (만기 1/5) | 3,000,000 | 10,000,000 | ✏️ | |
| ◆ 2025-01-05 | 어음 회수 | 3,000,000 | |||
| 2025/01 계 | |||||
| ◆ 2025-09-25 | 매출 입력 | 1,000,000 | |||
| 품목명 | 🟡 500,000 | ||||
| ※ 123건 누계 (VAT 포함) | 1,000,000 | 1,000,000 | |||
| 2025/09 계 | 1,000,000 | 8,000,000 |
작업 진행 상황
- Phase 1: 리스트 페이지 구현
- Phase 2: 상세 페이지 구현
- Phase 3: 타입 및 라우트 설정
- Phase 4: 테스트 및 검증
생성된 파일
src/components/accounting/VendorLedger/types.ts- 타입 정의src/components/accounting/VendorLedger/index.tsx- 리스트 페이지src/components/accounting/VendorLedger/VendorLedgerDetail.tsx- 상세 페이지src/app/[locale]/(protected)/accounting/vendor-ledger/page.tsx- 리스트 라우트src/app/[locale]/(protected)/accounting/vendor-ledger/[id]/page.tsx- 상세 라우트
접속 URL
- 리스트:
/ko/accounting/vendor-ledger - 상세:
/ko/accounting/vendor-ledger/[id]