# 미수금 현황 페이지 구현 체크리스트

## 기본 정보
- **생성일**: 2025-12-18
- **경로**: `/ko/accounting/receivables-status`
- **참고 페이지**: 매출관리, 거래처원장

---

## Phase 1: 기본 구조 설정

- [x] 페이지 라우트 생성 (`src/app/[locale]/(protected)/accounting/receivables-status/page.tsx`)
- [x] 컴포넌트 디렉토리 생성 (`src/components/accounting/ReceivablesStatus/`)
- [x] 메인 컴포넌트 생성 (`index.tsx`)
- [x] 타입 정의 파일 생성 (`types.ts`)

---

## Phase 2: 레이아웃 구현

- [x] DateRangeSelector 공통 달력 적용
- [x] 프리셋 버튼 (당해년도, 전전월, 전월, 당월, 어제, 오늘)
- [x] 엑셀 다운로드 버튼
- [x] 저장 버튼 (엑셀 다운로드 아래)
- [x] 검색창 (거래처 검색)

---

## Phase 3: 테이블 구현 (특수 구조)

테이블 구조 (스크린샷 기준):
- 컬럼: 거래처/연체, 구분, 1월~12월, 합계
- 그룹핑: 거래처별로 묶이고 각 거래처 아래 구분 (5개: 매출, 입금, 어음, 미수금, 메모)

- [x] 거래처별 그룹핑 테이블 구조 (rowSpan=5 사용)
- [x] 월별 컬럼 (1월~12월 + 합계)
- [x] 구분 행 (매출, 입금, 어음, 미수금, 메모) - 5개 카테고리
- [x] 연체 토글 (거래처/연체 컬럼 내)
- [x] 연체 영역 전체 하이라이트 (토글 ON 시 해당 월 전체 빨간 배경)

---

## Phase 4: 토글 기능

스크린샷 Description 기준:
- ON: 연체 상태로 표시, 연체일수 시작
- OFF: 정상 상태
- 거래처 상세에서 연체 설정과 연동

- [x] Switch 컴포넌트로 연체 토글 구현
- [x] 토글 상태에 따른 UI 변화
- [x] 연체 상태 표시 로직

---

## Phase 5: 추가 기능

- [x] Mock 데이터 생성
- [x] 합계 행 계산
- [ ] 모바일 카드 뷰 (추후 필요시)
- [x] 반응형 레이아웃 (overflow-x-auto)

---

## 진행 상태
- **현재 단계**: 완료
- **마지막 업데이트**: 2025-12-18

---

## 참고 사항
- Description 영역 (수취 어음 등록 시 표시, 메모 입력박스)은 현재 스코프에서 제외
- 기본 기능 먼저 구현 후 추가 기능 논의