feat: 전자결재 시스템 구현 (기안함, 결재함, 참조함, 문서상세)

- 기안함(DraftBox): 문서 목록, 상신/삭제, 문서작성 연결
- 결재함(ApprovalBox): 결재 대기 문서 목록, 문서상세 모달 연결
- 참조함(ReferenceBox): 참조 문서 목록, 열람/미열람 처리
- 문서작성(DocumentCreate): 품의서, 지출결의서, 지출예상내역서 폼
- 문서상세(DocumentDetail): 공유 모달, 결재선 박스, 3종 문서 뷰어
- 테이블 번호 컬럼 추가 (1번부터 시작)
- sonner toast 적용

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

claudedocs/approval/[IMPL-2025-12-17] approval-document-checklist.md

@@ -0,0 +1,134 @@
+# 전자결재 문서 작성/상세 기능 구현 체크리스트
+
+## 개요
+- **작업일**: 2025-12-17
+- **목표**: 전자결재 기안함 문서 작성 및 상세 모달 구현
+
+---
+
+## 1. 기안함 목록 페이지 (완료)
+
+- [x] 기안함 컴포넌트 구현 (`src/components/approval/DraftBox/`)
+- [x] 타입 정의 (`types.ts`)
+- [x] 메인 컴포넌트 (`index.tsx`)
+- [x] 라우트 페이지 (`src/app/[locale]/(protected)/approval/draft/page.tsx`)
+- [x] 통계 카드 수정 (진행, 완료, 반려, 임시 저장)
+- [x] 체크박스 선택 시에만 작업 버튼 표시
+- [x] 헤더 버튼 순서 조정 (상신/삭제 → 문서 작성)
+
+**접속 URL**: `http://localhost:3000/ko/approval/draft`
+
+---
+
+## 2. 문서 작성 페이지 (완료)
+
+### 2.1 공통 컴포넌트
+- [x] 타입 정의 (`src/components/approval/DocumentCreate/types.ts`)
+- [x] 기본 정보 섹션 (`BasicInfoSection.tsx`)
+- [x] 결재선 섹션 (`ApprovalLineSection.tsx`)
+- [x] 참조 섹션 (`ReferenceSection.tsx`)
+
+### 2.2 문서 유형별 폼
+- [x] 품의서 폼 (`ProposalForm.tsx`)
+- [x] 지출결의서 폼 (`ExpenseReportForm.tsx`)
+- [x] 지출 예상 내역서 폼 (`ExpenseEstimateForm.tsx`)
+  - [x] Fragment key 에러 수정
+
+### 2.3 메인 컴포넌트 및 라우트
+- [x] 메인 컴포넌트 (`index.tsx`)
+- [x] 라우트 페이지 (`src/app/[locale]/(protected)/approval/draft/new/page.tsx`)
+- [x] 기안함에서 문서 작성 버튼 클릭 시 페이지 이동 연결
+
+**접속 URL**: `http://localhost:3000/ko/approval/draft/new`
+
+---
+
+## 3. 문서 상세 모달 (완료)
+
+### 3.1 디자인 참고
+- [x] sam-design 프로젝트 `QuoteDetailView.tsx` 산출내역서 모달 구조 분석
+
+### 3.2 공통 컴포넌트 (`src/components/approval/DocumentDetail/`)
+- [x] 타입 정의 (`types.ts`)
+- [x] 결재선 박스 (`ApprovalLineBox.tsx`)
+
+### 3.3 문서 유형별 컴포넌트
+- [x] 품의서 문서 (`ProposalDocument.tsx`)
+- [x] 지출결의서 문서 (`ExpenseReportDocument.tsx`)
+- [x] 지출 예상 내역서 문서 (`ExpenseEstimateDocument.tsx`)
+
+### 3.4 메인 모달 컴포넌트
+- [x] 메인 모달 (`index.tsx` - DocumentDetailModal)
+  - [x] 상단 버튼: 복제, 수정, 반려, 승인, 인쇄, 공유, 닫기
+  - [x] 공유 드롭다운: PDF, 이메일, 팩스, 카카오톡
+  - [x] 스크롤 가능한 문서 영역 (A4 형식)
+
+### 3.5 기안함 연결
+- [x] 기안함 목록에서 문서 클릭 시 조건부 처리
+  - 임시저장 상태 → 문서 작성 페이지 (수정 모드)
+  - 그 외 상태 → 문서 상세 모달
+- [x] 문서 작성 화면에서 상세 버튼 클릭 시 미리보기 모달
+
+---
+
+## 4. 추가 작업 (완료)
+
+- [x] 빌드 테스트 (2025-12-17 완료)
+  - ✓ Compiled successfully in 7.0s
+  - ✓ Generating static pages (108/108)
+- [ ] 근태관리 작업 버튼 수정 확인 (별도 작업)
+- [ ] 문서 URL 목록 업데이트 (`claudedocs/[REF] all-pages-test-urls.md`) (별도 작업)
+
+---
+
+## 파일 구조
+
+```
+src/components/approval/
+├── DraftBox/
+│   ├── types.ts
+│   └── index.tsx
+├── DocumentCreate/
+│   ├── types.ts
+│   ├── BasicInfoSection.tsx
+│   ├── ApprovalLineSection.tsx
+│   ├── ReferenceSection.tsx
+│   ├── ProposalForm.tsx
+│   ├── ExpenseReportForm.tsx
+│   ├── ExpenseEstimateForm.tsx
+│   └── index.tsx
+└── DocumentDetail/
+    ├── types.ts
+    ├── ApprovalLineBox.tsx
+    ├── ProposalDocument.tsx
+    ├── ExpenseReportDocument.tsx
+    ├── ExpenseEstimateDocument.tsx ✅
+    └── index.tsx ✅
+
+src/app/[locale]/(protected)/approval/
+├── draft/
+│   ├── page.tsx
+│   └── new/
+│       └── page.tsx
+```
+
+---
+
+## 참고 사항
+
+### 문서 유형
+1. **품의서** (`proposal`)
+   - 구매처 정보, 제목, 품의 내역, 품의 사유, 예상 비용, 첨부파일
+
+2. **지출결의서** (`expenseReport`)
+   - 지출 요청일/결제일, 내역 테이블, 법인카드, 총 비용, 첨부파일
+
+3. **지출 예상 내역서** (`expenseEstimate`)
+   - 월별 테이블, 소계, 지출 합계, 계좌 잔액, 최종 차액
+
+### 모달 디자인 구조 (sam-design 참고)
+- Dialog: `max-w-[95vw] md:max-w-[800px] lg:max-w-[900px] h-[95vh]`
+- 헤더: 고정 (`flex-shrink-0`)
+- 버튼 영역: 고정 (`flex-shrink-0 bg-muted/30`)
+- 문서 영역: 스크롤 (`flex-1 overflow-y-auto bg-gray-100`)
+- A4 크기: `max-w-[210mm] mx-auto bg-white shadow-lg rounded-lg p-8`