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

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

개요

• 작업일: 2025-12-17
• 목표: 전자결재 기안함 문서 작성 및 상세 모달 구현

---

1. 기안함 목록 페이지 (완료)

• 기안함 컴포넌트 구현 (src/components/approval/DraftBox/)
• 타입 정의 (types.ts)
• 메인 컴포넌트 (index.tsx)
• 라우트 페이지 (src/app/[locale]/(protected)/approval/draft/page.tsx)
• 통계 카드 수정 (진행, 완료, 반려, 임시 저장)
• 체크박스 선택 시에만 작업 버튼 표시
• 헤더 버튼 순서 조정 (상신/삭제 → 문서 작성)

접속 URL: http://localhost:3000/ko/approval/draft

---

2. 문서 작성 페이지 (완료)

2.1 공통 컴포넌트

• 타입 정의 (src/components/approval/DocumentCreate/types.ts)
• 기본 정보 섹션 (BasicInfoSection.tsx)
• 결재선 섹션 (ApprovalLineSection.tsx)
• 참조 섹션 (ReferenceSection.tsx)

2.2 문서 유형별 폼

• 품의서 폼 (ProposalForm.tsx)
• 지출결의서 폼 (ExpenseReportForm.tsx)
• 지출 예상 내역서 폼 (ExpenseEstimateForm.tsx)
  • Fragment key 에러 수정

2.3 메인 컴포넌트 및 라우트

• 메인 컴포넌트 (index.tsx)
• 라우트 페이지 (src/app/[locale]/(protected)/approval/draft/new/page.tsx)
• 기안함에서 문서 작성 버튼 클릭 시 페이지 이동 연결

접속 URL: http://localhost:3000/ko/approval/draft/new

---

3. 문서 상세 모달 (완료)

3.1 디자인 참고

• sam-design 프로젝트 QuoteDetailView.tsx 산출내역서 모달 구조 분석

3.2 공통 컴포넌트 (src/components/approval/DocumentDetail/)

• 타입 정의 (types.ts)
• 결재선 박스 (ApprovalLineBox.tsx)

3.3 문서 유형별 컴포넌트

• 품의서 문서 (ProposalDocument.tsx)
• 지출결의서 문서 (ExpenseReportDocument.tsx)
• 지출 예상 내역서 문서 (ExpenseEstimateDocument.tsx)

3.4 메인 모달 컴포넌트

• 메인 모달 (index.tsx - DocumentDetailModal)
  • 상단 버튼: 복제, 수정, 반려, 승인, 인쇄, 공유, 닫기
  • 공유 드롭다운: PDF, 이메일, 팩스, 카카오톡
  • 스크롤 가능한 문서 영역 (A4 형식)

3.5 기안함 연결

• 기안함 목록에서 문서 클릭 시 조건부 처리
  • 임시저장 상태 → 문서 작성 페이지 (수정 모드)
  • 그 외 상태 → 문서 상세 모달
• 문서 작성 화면에서 상세 버튼 클릭 시 미리보기 모달

---

4. 추가 작업 (완료)

• 빌드 테스트 (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