feat(WEB): DatePicker 공통화 및 공정관리/작업자화면 대폭 개선

DatePicker 공통화:
- date-picker.tsx 공통 컴포넌트 신규 추가
- 전체 폼 컴포넌트 DatePicker 통일 적용 (50+ 파일)
- DateRangeSelector 개선

공정관리:
- RuleModal 대폭 리팩토링 (-592줄 → 간소화)
- ProcessForm, StepForm 개선
- ProcessDetail 수정, actions 확장

작업자화면:
- WorkerScreen 기능 대폭 확장 (+543줄)
- WorkItemCard 개선
- types 확장

회계/인사/영업/품질:
- BadDebtDetail, BillDetail, DepositDetail, SalesDetail 등 DatePicker 적용
- EmployeeForm, VacationDialog 등 DatePicker 적용
- OrderRegistration, QuoteRegistration DatePicker 적용
- InspectionCreate, InspectionDetail DatePicker 적용

공사관리/CEO대시보드:
- BiddingDetail, ContractDetail, HandoverReport 등 DatePicker 적용
- ScheduleDetailModal, TodayIssueSection 개선

기타:
- WorkOrderCreate/Edit/Detail/List 개선
- ShipmentCreate/Edit, ReceivingDetail 개선
- calendar, calendarEvents 수정
- datepicker 마이그레이션 체크리스트 추가

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

src/components/accounting/BadDebtCollection/BadDebtDetail.tsx

@@ -12,6 +12,7 @@ import { format } from 'date-fns';
 import { Plus, X, FileText, Receipt, CreditCard, Upload, Download, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { PhoneInput } from '@/components/ui/phone-input';
 import { BusinessNumberInput } from '@/components/ui/business-number-input';
@@ -836,23 +837,19 @@ export function BadDebtDetail({ mode, recordId, initialData }: BadDebtDetailProp
               {/* 악성채권 발생일 */}
               <div className="space-y-2">
                 <Label className="text-sm font-medium text-gray-700">악성채권 발생일</Label>
-                <Input
-                  type="date"
+                <DatePicker
                   value={formData.occurrenceDate}
-                  onChange={(e) => handleChange('occurrenceDate', e.target.value)}
+                  onChange={(date) => handleChange('occurrenceDate', date)}
                   disabled={isViewMode}
-                  className="bg-white"
                 />
               </div>
               {/* 악성채권 종료일 */}
               <div className="space-y-2">
                 <Label className="text-sm font-medium text-gray-700">악성채권 종료일</Label>
-                <Input
-                  type="date"
+                <DatePicker
                   value={formData.endDate || ''}
-                  onChange={(e) => handleChange('endDate', e.target.value || null)}
+                  onChange={(date) => handleChange('endDate', date || null)}
                   disabled={isViewMode}
-                  className="bg-white"
                   placeholder="-"
                 />
               </div>

src/components/accounting/BillManagement/BillDetail.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { Plus, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { CurrencyInput } from '@/components/ui/currency-input';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -301,11 +302,9 @@ export function BillDetail({ billId, mode }: BillDetailProps) {
               <Label htmlFor="issueDate">
                 발행일 <span className="text-red-500">*</span>
               </Label>
-              <Input
-                id="issueDate"
-                type="date"
+              <DatePicker
                 value={issueDate}
-                onChange={(e) => setIssueDate(e.target.value)}
+                onChange={setIssueDate}
                 disabled={isViewMode}
               />
             </div>
@@ -315,11 +314,9 @@ export function BillDetail({ billId, mode }: BillDetailProps) {
               <Label htmlFor="maturityDate">
                 만기일 <span className="text-red-500">*</span>
               </Label>
-              <Input
-                id="maturityDate"
-                type="date"
+              <DatePicker
                 value={maturityDate}
-                onChange={(e) => setMaturityDate(e.target.value)}
+                onChange={setMaturityDate}
                 disabled={isViewMode}
               />
             </div>
@@ -399,12 +396,10 @@ export function BillDetail({ billId, mode }: BillDetailProps) {
                   <TableRow key={inst.id}>
                     <TableCell>{index + 1}</TableCell>
                     <TableCell>
-                      <Input
-                        type="date"
+                      <DatePicker
                         value={inst.date}
-                        onChange={(e) => handleUpdateInstallment(inst.id, 'date', e.target.value)}
+                        onChange={(date) => handleUpdateInstallment(inst.id, 'date', date)}
                         disabled={isViewMode}
-                        className="w-full"
                       />
                     </TableCell>
                     <TableCell>

src/components/accounting/BillManagement/BillDetailV2.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { Plus, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { CurrencyInput } from '@/components/ui/currency-input';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -369,11 +370,9 @@ export function BillDetailV2({ billId, mode }: BillDetailProps) {
               <Label htmlFor="issueDate">
                 발행일 <span className="text-red-500">*</span>
               </Label>
-              <Input
-                id="issueDate"
-                type="date"
+              <DatePicker
                 value={formData.issueDate}
-                onChange={(e) => updateField('issueDate', e.target.value)}
+                onChange={(date) => updateField('issueDate', date)}
                 disabled={isViewMode}
               />
             </div>
@@ -383,11 +382,9 @@ export function BillDetailV2({ billId, mode }: BillDetailProps) {
               <Label htmlFor="maturityDate">
                 만기일 <span className="text-red-500">*</span>
               </Label>
-              <Input
-                id="maturityDate"
-                type="date"
+              <DatePicker
                 value={formData.maturityDate}
-                onChange={(e) => updateField('maturityDate', e.target.value)}
+                onChange={(date) => updateField('maturityDate', date)}
                 disabled={isViewMode}
               />
             </div>
@@ -471,12 +468,10 @@ export function BillDetailV2({ billId, mode }: BillDetailProps) {
                   <TableRow key={inst.id}>
                     <TableCell>{index + 1}</TableCell>
                     <TableCell>
-                      <Input
-                        type="date"
+                      <DatePicker
                         value={inst.date}
-                        onChange={(e) => handleUpdateInstallment(inst.id, 'date', e.target.value)}
+                        onChange={(date) => handleUpdateInstallment(inst.id, 'date', date)}
                         disabled={isViewMode}
-                        className="w-full"
                       />
                     </TableCell>
                     <TableCell>

src/components/accounting/DailyReport/index.tsx

@@ -15,7 +15,7 @@ import {
   TableRow,
   TableFooter,
 } from '@/components/ui/table';
-import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { PageLayout } from '@/components/organisms/PageLayout';
 import { PageHeader } from '@/components/organisms/PageHeader';
 import { Badge } from '@/components/ui/badge';
@@ -197,11 +197,11 @@ export function DailyReport({ initialNoteReceivables = [], initialDailyAccounts
               <div className="flex items-center gap-2">
                 <Calendar className="h-4 w-4 text-gray-500" />
                 <span className="text-sm font-medium text-gray-700">조회 일자</span>
-                <Input
-                  type="date"
+                <DatePicker
                   value={selectedDate}
-                  onChange={(e) => setSelectedDate(e.target.value)}
-                  className="w-[160px]"
+                  onChange={setSelectedDate}
+                  className="w-[170px]"
+                  size="sm"
                 />
               </div>
             </div>

src/components/accounting/DepositManagement/DepositDetail.tsx

@@ -8,6 +8,7 @@ import {
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
@@ -214,11 +215,8 @@ export function DepositDetail({ depositId, mode }: DepositDetailProps) {
             {/* 입금일 */}
             <div className="space-y-2">
               <Label htmlFor="depositDate">입금일</Label>
-              <Input
-                id="depositDate"
-                type="date"
+              <DatePicker
                 value={depositDate}
-                readOnly
                 disabled
                 className="bg-gray-50"
               />

src/components/accounting/PurchaseManagement/PurchaseDetail.tsx

@@ -4,6 +4,7 @@ import { useState, useCallback, useMemo, useEffect } from 'react';
 import { format } from 'date-fns';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { Badge } from '@/components/ui/badge';
@@ -380,10 +381,9 @@ export function PurchaseDetail({ purchaseId, mode }: PurchaseDetailProps) {
                 {/* 매입일 */}
                 <div className="space-y-2">
                   <Label>매입일</Label>
-                  <Input
-                    type="date"
+                  <DatePicker
                     value={purchaseDate}
-                    onChange={(e) => setPurchaseDate(e.target.value)}
+                    onChange={setPurchaseDate}
                     disabled={isViewMode}
                   />
                 </div>

src/components/accounting/PurchaseManagement/PurchaseDetailModal.tsx

@@ -9,6 +9,7 @@ import {
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { QuantityInput } from '@/components/ui/quantity-input';
 import { CurrencyInput } from '@/components/ui/currency-input';
@@ -199,10 +200,9 @@ export function PurchaseDetailModal({
                 {/* 매입일자 */}
                 <div className="space-y-2">
                   <Label>매입일자</Label>
-                  <Input
-                    type="date"
+                  <DatePicker
                     value={formData.purchaseDate}
-                    onChange={(e) => handleFieldChange('purchaseDate', e.target.value)}
+                    onChange={(date) => handleFieldChange('purchaseDate', date)}
                   />
                 </div>
 

src/components/accounting/SalesManagement/SalesDetail.tsx

@@ -10,6 +10,7 @@ import {
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Switch } from '@/components/ui/switch';
@@ -296,11 +297,9 @@ export function SalesDetail({ mode, salesId }: SalesDetailProps) {
             {/* 매출일 */}
             <div className="space-y-2">
               <Label htmlFor="salesDate">매출일</Label>
-              <Input
-                id="salesDate"
-                type="date"
+              <DatePicker
                 value={salesDate}
-                onChange={(e) => setSalesDate(e.target.value)}
+                onChange={setSalesDate}
                 disabled={isViewMode}
               />
             </div>

src/components/accounting/WithdrawalManagement/WithdrawalDetail.tsx

@@ -8,6 +8,7 @@ import {
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
@@ -214,11 +215,8 @@ export function WithdrawalDetail({ withdrawalId, mode }: WithdrawalDetailProps)
             {/* 출금일 */}
             <div className="space-y-2">
               <Label htmlFor="withdrawalDate">출금일</Label>
-              <Input
-                id="withdrawalDate"
-                type="date"
+              <DatePicker
                 value={withdrawalDate}
-                readOnly
                 disabled
                 className="bg-gray-50"
               />