feat(WEB): 회계/설정/카드 관리 페이지 대규모 기능 추가 및 리팩토링

- 일반전표입력, 상품권관리, 세금계산서 발행/조회 신규 페이지 추가
- 바로빌 연동 설정 페이지 추가
- 카드관리/계좌관리 리스트 UniversalListPage 공통 구조로 전환
- 카드거래조회/은행거래조회 리팩토링 (모달 분리, 액션 확장)
- 계좌 상세 폼(AccountDetailForm) 신규 구현
- 카드 상세(CardDetail) 신규 구현 + CardNumberInput 적용
- DateRangeSelector, StatCards, IntegratedListTemplateV2 공통 컴포넌트 개선
- 레거시 파일 정리 (CardManagementUnified, cardConfig, _legacy 등)

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

src/components/accounting/CardTransactionInquiry/ManualInputModal.tsx

@@ -0,0 +1,322 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { toast } from 'sonner';
+import { Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { FormField } from '@/components/molecules/FormField';
+import { DatePicker } from '@/components/ui/date-picker';
+import { TimePicker } from '@/components/ui/time-picker';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import type { ManualInputFormData } from './types';
+import { DEDUCTION_OPTIONS, ACCOUNT_SUBJECT_OPTIONS } from './types';
+import { getCardList, createCardTransaction } from './actions';
+
+interface ManualInputModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: () => void;
+}
+
+const initialFormData: ManualInputFormData = {
+  cardId: '',
+  usedDate: new Date().toISOString().slice(0, 10),
+  usedTime: '',
+  approvalNumber: '',
+  approvalType: 'approved',
+  supplyAmount: 0,
+  taxAmount: 0,
+  merchantName: '',
+  businessNumber: '',
+  deductionType: 'deductible',
+  accountSubject: '',
+  vendorName: '',
+  description: '',
+  memo: '',
+};
+
+export function ManualInputModal({ open, onOpenChange, onSuccess }: ManualInputModalProps) {
+  const [formData, setFormData] = useState<ManualInputFormData>(initialFormData);
+  const [cardOptions, setCardOptions] = useState<Array<{ id: number; name: string; cardNumber: string }>>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isLoadingCards, setIsLoadingCards] = useState(false);
+
+  // 카드 목록 로드
+  useEffect(() => {
+    if (open) {
+      setIsLoadingCards(true);
+      getCardList()
+        .then(result => {
+          if (result.success) setCardOptions(result.data);
+        })
+        .finally(() => setIsLoadingCards(false));
+      setFormData(initialFormData);
+    }
+  }, [open]);
+
+  const handleChange = useCallback((key: keyof ManualInputFormData, value: string | number) => {
+    setFormData(prev => ({ ...prev, [key]: value }));
+  }, []);
+
+  const totalAmount = formData.supplyAmount + formData.taxAmount;
+
+  const handleSubmit = useCallback(async () => {
+    if (!formData.cardId) {
+      toast.error('카드를 선택해주세요.');
+      return;
+    }
+    if (!formData.usedDate) {
+      toast.error('사용일을 입력해주세요.');
+      return;
+    }
+    if (formData.supplyAmount <= 0 && formData.taxAmount <= 0) {
+      toast.error('공급가액 또는 세액을 입력해주세요.');
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const result = await createCardTransaction(formData);
+      if (result.success) {
+        toast.success('카드사용 내역이 등록되었습니다.');
+        onOpenChange(false);
+        onSuccess();
+      } else {
+        toast.error(result.error || '등록에 실패했습니다.');
+      }
+    } catch {
+      toast.error('등록 중 오류가 발생했습니다.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [formData, onOpenChange, onSuccess]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>카드사용 수기 입력</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          {/* 카드 선택 (동적 API Select - FormField 예외) */}
+          <div>
+            <Label className="text-sm font-medium">
+              카드 선택 <span className="text-red-500">*</span>
+            </Label>
+            <Select
+              value={formData.cardId}
+              onValueChange={(v) => handleChange('cardId', v)}
+              disabled={isLoadingCards}
+            >
+              <SelectTrigger className="mt-1">
+                <SelectValue placeholder="카드를 선택하세요" />
+              </SelectTrigger>
+              <SelectContent>
+                {cardOptions.map(card => (
+                  <SelectItem key={card.id} value={String(card.id)}>
+                    {card.cardNumber} {card.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 사용일 + 사용시간 (공통 DatePicker/TimePicker) */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label className="text-sm font-medium">
+                사용일 <span className="text-red-500">*</span>
+              </Label>
+              <DatePicker
+                value={formData.usedDate}
+                onChange={(v) => handleChange('usedDate', v)}
+                placeholder="날짜 선택"
+                className="mt-1"
+              />
+            </div>
+            <div>
+              <Label className="text-sm font-medium">사용시간</Label>
+              <TimePicker
+                value={formData.usedTime}
+                onChange={(v) => handleChange('usedTime', v)}
+                placeholder="시간 선택"
+                showSeconds
+                secondStep={1}
+                minuteStep={1}
+                className="mt-1"
+              />
+            </div>
+          </div>
+
+          {/* 승인번호 + 승인유형 */}
+          <div className="grid grid-cols-2 gap-4">
+            <FormField
+              label="승인번호"
+              value={formData.approvalNumber}
+              onChange={(v) => handleChange('approvalNumber', v)}
+              placeholder="승인번호"
+            />
+            <div>
+              <Label className="text-sm font-medium">
+                승인유형 <span className="text-red-500">*</span>
+              </Label>
+              <RadioGroup
+                value={formData.approvalType}
+                onValueChange={(v) => handleChange('approvalType', v)}
+                className="flex items-center gap-4 mt-2"
+              >
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="approved" id="approval-approved" />
+                  <Label htmlFor="approval-approved" className="text-sm">승인</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="cancelled" id="approval-cancelled" />
+                  <Label htmlFor="approval-cancelled" className="text-sm">취소</Label>
+                </div>
+              </RadioGroup>
+            </div>
+          </div>
+
+          {/* 공급가액 + 세액 */}
+          <div className="grid grid-cols-2 gap-4">
+            <FormField
+              type="number"
+              label="공급가액"
+              required
+              value={formData.supplyAmount || ''}
+              onChange={(v) => handleChange('supplyAmount', Number(v) || 0)}
+              placeholder="0"
+            />
+            <FormField
+              type="number"
+              label="세액"
+              required
+              value={formData.taxAmount || ''}
+              onChange={(v) => handleChange('taxAmount', Number(v) || 0)}
+              placeholder="0"
+            />
+          </div>
+
+          {/* 가맹점명 + 사업자번호 */}
+          <div className="grid grid-cols-2 gap-4">
+            <FormField
+              label="가맹점명"
+              value={formData.merchantName}
+              onChange={(v) => handleChange('merchantName', v)}
+              placeholder="가맹점명"
+            />
+            <FormField
+              type="businessNumber"
+              label="사업자번호"
+              value={formData.businessNumber}
+              onChange={(v) => handleChange('businessNumber', v)}
+              placeholder="123-12-12345"
+            />
+          </div>
+
+          {/* 공제여부 + 계정과목 (Select - FormField 예외) */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label className="text-sm font-medium">
+                공제여부 <span className="text-red-500">*</span>
+              </Label>
+              <Select
+                value={formData.deductionType}
+                onValueChange={(v) => handleChange('deductionType', v)}
+              >
+                <SelectTrigger className="mt-1">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {DEDUCTION_OPTIONS.map(opt => (
+                    <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className="text-sm font-medium">계정과목</Label>
+              <Select
+                value={formData.accountSubject || 'none'}
+                onValueChange={(v) => handleChange('accountSubject', v === 'none' ? '' : v)}
+              >
+                <SelectTrigger className="mt-1">
+                  <SelectValue placeholder="선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">선택</SelectItem>
+                  {ACCOUNT_SUBJECT_OPTIONS.filter(o => o.value !== '').map(opt => (
+                    <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* 증빙/판매자상호 + 내역 */}
+          <div className="grid grid-cols-2 gap-4">
+            <FormField
+              label="증빙/판매자상호"
+              value={formData.vendorName}
+              onChange={(v) => handleChange('vendorName', v)}
+              placeholder="증빙/판매자상호"
+            />
+            <FormField
+              label="내역"
+              value={formData.description}
+              onChange={(v) => handleChange('description', v)}
+              placeholder="내역"
+            />
+          </div>
+
+          {/* 메모 */}
+          <FormField
+            type="textarea"
+            label="메모"
+            value={formData.memo}
+            onChange={(v) => handleChange('memo', v)}
+            rows={3}
+          />
+
+          {/* 합계 금액 */}
+          <div className="bg-muted/50 rounded-lg p-3 flex items-center justify-between">
+            <span className="text-sm font-medium">합계 금액 (공급가액 + 세액)</span>
+            <span className="text-lg font-bold">{totalAmount.toLocaleString()}원</span>
+          </div>
+        </div>
+
+        <DialogFooter className="gap-3">
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
+            취소
+          </Button>
+          <Button onClick={handleSubmit} disabled={isSubmitting}>
+            {isSubmitting ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                등록 중...
+              </>
+            ) : (
+              '등록'
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}