fix(WEB): 폼 컴포넌트 DatePicker 적용 및 코드 정리

- ExpectedExpenseManagement DatePicker 적용 및 간소화
- BoardForm 날짜 필드 개선
- AttendanceInfoDialog, ReasonInfoDialog 코드 정리
- ReceivingDetail 기능 보강
- ShipmentCreate/Edit DatePicker 적용
- VehicleDispatchEdit 수정
- WorkOrderCreate 개선

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

src/components/accounting/ExpectedExpenseManagement/index.tsx

@@ -42,8 +42,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { Calendar } from '@/components/ui/calendar';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { DatePicker } from '@/components/ui/date-picker';
 import { TableRow, TableCell } from '@/components/ui/table';
 import {
   Select,
@@ -142,7 +141,7 @@ export function ExpectedExpenseManagement({
 
   // 예상 지급일 변경 다이얼로그
   const [showDateChangeDialog, setShowDateChangeDialog] = useState(false);
-  const [newExpectedDate, setNewExpectedDate] = useState<Date | undefined>(undefined);
+  const [newExpectedDate, setNewExpectedDate] = useState('');
 
   // 삭제 다이얼로그
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
@@ -166,7 +165,6 @@ export function ExpectedExpenseManagement({
     paymentStatus: 'pending',
     note: '',
   });
-  const [formExpectedDate, setFormExpectedDate] = useState<Date | undefined>(new Date());
 
   // 거래처/계좌 옵션
   const [clientOptions, setClientOptions] = useState<{ id: string; name: string }[]>([]);
@@ -207,7 +205,6 @@ export function ExpectedExpenseManagement({
       paymentStatus: 'pending',
       note: '',
     });
-    setFormExpectedDate(new Date());
     setEditingItem(null);
   }, []);
 
@@ -232,7 +229,6 @@ export function ExpectedExpenseManagement({
       paymentStatus: item.paymentStatus,
       note: item.note,
     });
-    setFormExpectedDate(item.expectedPaymentDate ? new Date(item.expectedPaymentDate) : new Date());
     setShowFormDialog(true);
   }, []);
 
@@ -520,22 +516,21 @@ export function ExpectedExpenseManagement({
   // ===== 예상 지급일 변경 핸들러 =====
   const handleOpenDateChangeDialog = useCallback(() => {
     if (selectedItems.size === 0) return;
-    setNewExpectedDate(undefined);
+    setNewExpectedDate('');
     setShowDateChangeDialog(true);
   }, [selectedItems.size]);
 
   const handleConfirmDateChange = useCallback(async () => {
     if (!newExpectedDate || selectedItems.size === 0) return;
 
-    const newDateStr = format(newExpectedDate, 'yyyy-MM-dd');
     const selectedIds = Array.from(selectedItems);
 
     startTransition(async () => {
-      const result = await updateExpectedPaymentDate(selectedIds, newDateStr);
+      const result = await updateExpectedPaymentDate(selectedIds, newExpectedDate);
       if (result.success) {
         setData(prev => prev.map(item =>
           selectedItems.has(item.id)
-            ? { ...item, expectedPaymentDate: newDateStr }
+            ? { ...item, expectedPaymentDate: newExpectedDate }
             : item
         ));
         toast.success(`${result.updatedCount || selectedIds.length}건의 예상 지급일이 변경되었습니다.`);
@@ -544,7 +539,7 @@ export function ExpectedExpenseManagement({
         toast.error(result.error || '예상 지급일 변경에 실패했습니다.');
       }
       setShowDateChangeDialog(false);
-      setNewExpectedDate(undefined);
+      setNewExpectedDate('');
     });
   }, [newExpectedDate, selectedItems]);
 
@@ -1063,24 +1058,11 @@ export function ExpectedExpenseManagement({
             {/* 예상 지급일 선택 */}
             <div className="space-y-2">
               <label className="text-sm font-medium text-gray-700">변경할 예상 지급일</label>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className="w-full justify-start text-left font-normal"
-                  >
-                    <CalendarIcon className="mr-2 h-4 w-4" />
-                    {newExpectedDate ? format(newExpectedDate, 'yyyy-MM-dd') : '날짜 선택'}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0" align="start">
-                  <Calendar
-                    mode="single"
-                    selected={newExpectedDate}
-                    onSelect={setNewExpectedDate}
-                  />
-                </PopoverContent>
-              </Popover>
+              <DatePicker
+                value={newExpectedDate}
+                onChange={setNewExpectedDate}
+                className="w-full"
+              />
             </div>
           </div>
 
@@ -1113,29 +1095,11 @@ export function ExpectedExpenseManagement({
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label>예상 지급일 *</Label>
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <Button
-                      variant="outline"
-                      className="w-full justify-start text-left font-normal"
-                    >
-                      <CalendarIcon className="mr-2 h-4 w-4" />
-                      {formExpectedDate ? format(formExpectedDate, 'yyyy-MM-dd') : '날짜 선택'}
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-auto p-0" align="start">
-                    <Calendar
-                      mode="single"
-                      selected={formExpectedDate}
-                      onSelect={(date) => {
-                        setFormExpectedDate(date);
-                        if (date) {
-                          setFormData(prev => ({ ...prev, expectedPaymentDate: format(date, 'yyyy-MM-dd') }));
-                        }
-                      }}
-                    />
-                  </PopoverContent>
-                </Popover>
+                <DatePicker
+                  value={formData.expectedPaymentDate}
+                  onChange={(date) => setFormData(prev => ({ ...prev, expectedPaymentDate: date }))}
+                  className="w-full"
+                />
               </div>
 
               {/* 거래유형 */}