# 전자결재 문서 작성/상세 기능 구현 체크리스트

## 개요
- **작업일**: 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`