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>
2.1 KiB
2.1 KiB
미수금 현황 페이지 구현 체크리스트
기본 정보
- 생성일: 2025-12-18
- 경로:
/ko/accounting/receivables-status - 참고 페이지: 매출관리, 거래처원장
Phase 1: 기본 구조 설정
- 페이지 라우트 생성 (
src/app/[locale]/(protected)/accounting/receivables-status/page.tsx) - 컴포넌트 디렉토리 생성 (
src/components/accounting/ReceivablesStatus/) - 메인 컴포넌트 생성 (
index.tsx) - 타입 정의 파일 생성 (
types.ts)
Phase 2: 레이아웃 구현
- DateRangeSelector 공통 달력 적용
- 프리셋 버튼 (당해년도, 전전월, 전월, 당월, 어제, 오늘)
- 엑셀 다운로드 버튼
- 저장 버튼 (엑셀 다운로드 아래)
- 검색창 (거래처 검색)
Phase 3: 테이블 구현 (특수 구조)
테이블 구조 (스크린샷 기준):
-
컬럼: 거래처/연체, 구분, 1월~12월, 합계
-
그룹핑: 거래처별로 묶이고 각 거래처 아래 구분 (5개: 매출, 입금, 어음, 미수금, 메모)
-
거래처별 그룹핑 테이블 구조 (rowSpan=5 사용)
-
월별 컬럼 (1월~12월 + 합계)
-
구분 행 (매출, 입금, 어음, 미수금, 메모) - 5개 카테고리
-
연체 토글 (거래처/연체 컬럼 내)
-
연체 영역 전체 하이라이트 (토글 ON 시 해당 월 전체 빨간 배경)
Phase 4: 토글 기능
스크린샷 Description 기준:
-
ON: 연체 상태로 표시, 연체일수 시작
-
OFF: 정상 상태
-
거래처 상세에서 연체 설정과 연동
-
Switch 컴포넌트로 연체 토글 구현
-
토글 상태에 따른 UI 변화
-
연체 상태 표시 로직
Phase 5: 추가 기능
- Mock 데이터 생성
- 합계 행 계산
- 모바일 카드 뷰 (추후 필요시)
- 반응형 레이아웃 (overflow-x-auto)
진행 상태
- 현재 단계: 완료
- 마지막 업데이트: 2025-12-18
참고 사항
- Description 영역 (수취 어음 등록 시 표시, 메모 입력박스)은 현재 스코프에서 제외
- 기본 기능 먼저 구현 후 추가 기능 논의