sam-react-prod/claudedocs/guides/[IMPL-2026-02-06] datepicker-migration-checklist.md

DatePicker 전체 교체 계획서

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

개요

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

교체 패턴

// 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: 공통 템플릿 (우선 - 파급 효과 큼) ✅ 완료

• molecules/DateRangeSelector.tsx (4곳)
• molecules/FormField.tsx (1곳)
• templates/IntegratedDetailTemplate/FieldRenderer.tsx (1곳)
• templates/IntegratedDetailTemplate/FieldInput.tsx (1곳)
• items/DynamicItemForm/fields/DateField.tsx (1곳)

Phase 2: 회계 ✅ 완료

• accounting/DepositManagement/DepositDetail.tsx (1곳)
• accounting/WithdrawalManagement/WithdrawalDetail.tsx (1곳)
• accounting/BadDebtCollection/BadDebtDetail.tsx (2곳)
• accounting/DailyReport/index.tsx (1곳)
• accounting/PurchaseManagement/PurchaseDetailModal.tsx (1곳)
• accounting/PurchaseManagement/PurchaseDetail.tsx (1곳)
• accounting/BillManagement/BillDetailV2.tsx (3곳)
• accounting/BillManagement/BillDetail.tsx (3곳)
• accounting/SalesManagement/SalesDetail.tsx (1곳)

Phase 3: 건설/현장 ✅ 완료

• construction/bidding/BiddingDetailForm.tsx (5곳)
• construction/site-briefings/SiteBriefingForm.tsx (2곳)
• construction/issue-management/IssueDetailForm.tsx (2곳)
• construction/structure-review/StructureReviewDetailForm.tsx (2곳)
• construction/contract/ContractDetailForm.tsx (3곳)
• construction/management/ConstructionDetailClient.tsx (1곳)
• construction/management/ProjectEndDialog.tsx (2곳)
• construction/estimates/sections/EstimateInfoSection.tsx (3곳)
• construction/order-management/cards/ConstructionDetailCard.tsx (2곳)
• construction/order-management/tables/OrderDetailItemTable.tsx (5곳)
• construction/handover-report/HandoverReportDetailForm.tsx (3곳)

Phase 4: 주문/견적/단가 ✅ 완료

• quotes/QuoteRegistrationV2.tsx (1곳)
• quotes/QuoteRegistration.tsx (2곳)
• orders/OrderSalesDetailEdit.tsx (2곳)
• orders/OrderRegistration.tsx (2곳)
• pricing/PricingFormClient.tsx (2곳)
• pricing-distribution/PriceDistributionDetail.tsx (1곳)

Phase 5: 인사 ✅ 완료

• hr/VacationManagement/VacationRequestDialog.tsx (2곳)
• hr/VacationManagement/VacationGrantDialog.tsx (1곳)
• hr/EmployeeManagement/EmployeeDialog.tsx (1곳)
• hr/EmployeeManagement/EmployeeForm.tsx (2곳)

Phase 6: 품질 ✅ 완료

• quality/InspectionManagement/InspectionCreate.tsx (3곳)
• quality/InspectionManagement/InspectionDetail.tsx (3곳)

Phase 7: 생산/자재/출고 ✅ 완료

• production/WorkOrders/WorkOrderCreate.tsx (1곳)
• production/WorkOrders/WorkOrderEdit.tsx (1곳)
• production/WorkerScreen/index.tsx (1곳)
• material/ReceivingManagement/InspectionCreate.tsx (1곳)
• material/ReceivingManagement/ReceivingDetail.tsx (2곳)
• outbound/ShipmentManagement/ShipmentCreate.tsx (2곳)
• outbound/ShipmentManagement/ShipmentEdit.tsx (2곳)

Phase 8: 결재/설정/기타 ✅ 완료

• approval/DocumentCreate/ProposalForm.tsx (1곳)
• approval/DocumentCreate/ExpenseReportForm.tsx (2곳)
• settings/PopupManagement/PopupForm.tsx (2곳)
• items/ItemForm/forms/ProductForm.tsx (2곳)
• 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	✅ 전체 완료