# DatePicker 전체 교체 계획서

> `input type="date"` → `DatePicker` 컴포넌트 교체
> 작성일: 2026-02-06

## 개요
- 기존 브라우저 기본 `input type="date"`를 공통 `DatePicker` 컴포넌트로 교체
- 공휴일/토요일/일요일 색상, 연월 직접 선택, 오늘 버튼 등 통일된 UX 제공

## 교체 패턴
```tsx
// Before
<Input type="date" value={value} onChange={(e) => setValue(e.target.value)} />

// After
import { DatePicker } from '@/components/ui/date-picker';
<DatePicker value={value} onChange={setValue} />
```

---

## Phase 1: 공통 템플릿 (우선 - 파급 효과 큼) ✅ 완료
- [x] `molecules/DateRangeSelector.tsx` (4곳)
- [x] `molecules/FormField.tsx` (1곳)
- [x] `templates/IntegratedDetailTemplate/FieldRenderer.tsx` (1곳)
- [x] `templates/IntegratedDetailTemplate/FieldInput.tsx` (1곳)
- [x] `items/DynamicItemForm/fields/DateField.tsx` (1곳)

## Phase 2: 회계 ✅ 완료
- [x] `accounting/DepositManagement/DepositDetail.tsx` (1곳)
- [x] `accounting/WithdrawalManagement/WithdrawalDetail.tsx` (1곳)
- [x] `accounting/BadDebtCollection/BadDebtDetail.tsx` (2곳)
- [x] `accounting/DailyReport/index.tsx` (1곳)
- [x] `accounting/PurchaseManagement/PurchaseDetailModal.tsx` (1곳)
- [x] `accounting/PurchaseManagement/PurchaseDetail.tsx` (1곳)
- [x] `accounting/BillManagement/BillDetailV2.tsx` (3곳)
- [x] `accounting/BillManagement/BillDetail.tsx` (3곳)
- [x] `accounting/SalesManagement/SalesDetail.tsx` (1곳)

## Phase 3: 건설/현장 ✅ 완료
- [x] `construction/bidding/BiddingDetailForm.tsx` (5곳)
- [x] `construction/site-briefings/SiteBriefingForm.tsx` (2곳)
- [x] `construction/issue-management/IssueDetailForm.tsx` (2곳)
- [x] `construction/structure-review/StructureReviewDetailForm.tsx` (2곳)
- [x] `construction/contract/ContractDetailForm.tsx` (3곳)
- [x] `construction/management/ConstructionDetailClient.tsx` (1곳)
- [x] `construction/management/ProjectEndDialog.tsx` (2곳)
- [x] `construction/estimates/sections/EstimateInfoSection.tsx` (3곳)
- [x] `construction/order-management/cards/ConstructionDetailCard.tsx` (2곳)
- [x] `construction/order-management/tables/OrderDetailItemTable.tsx` (5곳)
- [x] `construction/handover-report/HandoverReportDetailForm.tsx` (3곳)

## Phase 4: 주문/견적/단가 ✅ 완료
- [x] `quotes/QuoteRegistrationV2.tsx` (1곳)
- [x] `quotes/QuoteRegistration.tsx` (2곳)
- [x] `orders/OrderSalesDetailEdit.tsx` (2곳)
- [x] `orders/OrderRegistration.tsx` (2곳)
- [x] `pricing/PricingFormClient.tsx` (2곳)
- [x] `pricing-distribution/PriceDistributionDetail.tsx` (1곳)

## Phase 5: 인사 ✅ 완료
- [x] `hr/VacationManagement/VacationRequestDialog.tsx` (2곳)
- [x] `hr/VacationManagement/VacationGrantDialog.tsx` (1곳)
- [x] `hr/EmployeeManagement/EmployeeDialog.tsx` (1곳)
- [x] `hr/EmployeeManagement/EmployeeForm.tsx` (2곳)

## Phase 6: 품질 ✅ 완료
- [x] `quality/InspectionManagement/InspectionCreate.tsx` (3곳)
- [x] `quality/InspectionManagement/InspectionDetail.tsx` (3곳)

## Phase 7: 생산/자재/출고 ✅ 완료
- [x] `production/WorkOrders/WorkOrderCreate.tsx` (1곳)
- [x] `production/WorkOrders/WorkOrderEdit.tsx` (1곳)
- [x] `production/WorkerScreen/index.tsx` (1곳)
- [x] `material/ReceivingManagement/InspectionCreate.tsx` (1곳)
- [x] `material/ReceivingManagement/ReceivingDetail.tsx` (2곳)
- [x] `outbound/ShipmentManagement/ShipmentCreate.tsx` (2곳)
- [x] `outbound/ShipmentManagement/ShipmentEdit.tsx` (2곳)

## Phase 8: 결재/설정/기타 ✅ 완료
- [x] `approval/DocumentCreate/ProposalForm.tsx` (1곳)
- [x] `approval/DocumentCreate/ExpenseReportForm.tsx` (2곳)
- [x] `settings/PopupManagement/PopupForm.tsx` (2곳)
- [x] `items/ItemForm/forms/ProductForm.tsx` (2곳)
- [x] `app/sales/order-management-sales/[id]/edit/page.tsx` (2곳)

## 제외 대상
- ~~`hr/documents/page.tsx`~~ - 메뉴 미연결 페이지
- ~~`hr/documents/new/page.tsx`~~ - 메뉴 미연결 페이지
- ~~`CEODashboard/TodayIssueSection.tsx`~~ - 이미 적용 완료
- ~~`CEODashboard/ScheduleDetailModal.tsx`~~ - 이미 적용 완료

---

## 진행 상황
| Phase | 파일 수 | 완료 | 상태 |
|-------|---------|------|------|
| 1. 공통 템플릿 | 5 | 5 | ✅ 완료 |
| 2. 회계 | 9 | 9 | ✅ 완료 |
| 3. 건설/현장 | 11 | 11 | ✅ 완료 |
| 4. 주문/견적/단가 | 6 | 6 | ✅ 완료 |
| 5. 인사 | 4 | 4 | ✅ 완료 |
| 6. 품질 | 2 | 2 | ✅ 완료 |
| 7. 생산/자재/출고 | 7 | 7 | ✅ 완료 |
| 8. 결재/설정/기타 | 5 | 5 | ✅ 완료 |
| **합계** | **49** | **49** | ✅ 전체 완료 |