feat(WEB): 카드 거래 DevFill 자동 입력 기능 추가

- DevToolbar: 카드 버튼 경로 /new로 변경, fillEnabled 활성화
- CardTransactionDetailClient: useDevFill 훅 연동
- cardTransactionDetailConfig: transformInitialData에서 cardId 처리 수정
- accountingData: generateCardTransactionData 함수 추가

src/components/accounting/CardTransactionInquiry/CardTransactionDetailClient.tsx

@@ -12,7 +12,9 @@ import {
   createCardTransaction,
   updateCardTransaction,
   deleteCardTransaction,
+  getCardList,
 } from './actions';
+import { useDevFill, generateCardTransactionData } from '@/components/dev';
 
 // ===== Props =====
 interface CardTransactionDetailClientProps {
@@ -29,6 +31,19 @@ export default function CardTransactionDetailClient({
   const [transaction, setTransaction] = useState<CardTransaction | null>(null);
   const [isLoading, setIsLoading] = useState(initialMode !== 'create');
 
+  // ===== DevFill: 자동 입력 기능 =====
+  useDevFill('cardTransaction', useCallback(async () => {
+    if (initialMode === 'create') {
+      // 카드 목록 가져오기
+      const cardResult = await getCardList();
+      const cards = cardResult.success ? cardResult.data : undefined;
+
+      const mockData = generateCardTransactionData({ cards });
+      setTransaction(mockData as unknown as CardTransaction);
+      toast.success('카드 사용내역 데이터가 자동 입력되었습니다.');
+    }
+  }, [initialMode]));
+
   // ===== 데이터 로드 =====
   useEffect(() => {
     const loadTransaction = async () => {

src/components/accounting/CardTransactionInquiry/cardTransactionDetailConfig.ts

@@ -97,6 +97,8 @@ export const cardTransactionDetailConfig: DetailConfig = {
   },
   transformInitialData: (data: Record<string, unknown>): Record<string, unknown> => {
     const record = data as unknown as CardTransaction;
+    // DevFill에서 전달된 cardId 또는 기존 데이터의 cardId
+    const inputCardId = (data as Record<string, unknown>).cardId;
     // usedAt을 datetime-local 형식으로 변환 (YYYY-MM-DDTHH:mm)
     let usedAtFormatted = '';
     if (record.usedAt) {
@@ -104,7 +106,7 @@ export const cardTransactionDetailConfig: DetailConfig = {
       usedAtFormatted = record.usedAt.replace(' ', 'T').slice(0, 16);
     }
     return {
-      cardId: record.id ? '' : '', // 수정 시에는 카드 변경 불가
+      cardId: inputCardId ? String(inputCardId) : '', // create 모드에서 DevFill로 전달된 cardId 사용
       usedAt: usedAtFormatted,
       merchantName: record.merchantName || '',
       amount: record.amount || 0,

src/components/dev/DevToolbar.tsx

@@ -54,7 +54,7 @@ const PAGE_PATTERNS: { pattern: RegExp; type: DevFillPageType; label: string }[]
   { pattern: /\/accounting\/deposits\/new/, type: 'deposit', label: '입금' },
   { pattern: /\/accounting\/withdrawals\/new/, type: 'withdrawal', label: '출금' },
   { pattern: /\/approval\/draft\/new/, type: 'purchaseApproval', label: '매입' },
-  { pattern: /\/accounting\/card-transactions/, type: 'cardTransaction', label: '카드' },
+  { pattern: /\/accounting\/card-transactions\/new/, type: 'cardTransaction', label: '카드' },
 ];
 
 // 플로우 단계 정의
@@ -71,7 +71,7 @@ const ACCOUNTING_STEPS: { type: DevFillPageType; label: string; icon: typeof Fil
   { type: 'deposit', label: '입금', icon: ArrowDownToLine, path: '/accounting/deposits/new', fillEnabled: true },
   { type: 'withdrawal', label: '출금', icon: ArrowUpFromLine, path: '/accounting/withdrawals/new', fillEnabled: true },
   { type: 'purchaseApproval', label: '매입', icon: Receipt, path: '/approval/draft/new', fillEnabled: true },
-  { type: 'cardTransaction', label: '카드', icon: CreditCard, path: '/accounting/card-transactions', fillEnabled: false }, // 이동만
+  { type: 'cardTransaction', label: '카드', icon: CreditCard, path: '/accounting/card-transactions/new', fillEnabled: true },
 ];
 
 export function DevToolbar() {

src/components/dev/index.ts

@@ -14,4 +14,4 @@ export { generateQuoteData, generateQuoteItem } from './generators/quoteData';
 export { generateOrderData, generateOrderDataFull } from './generators/orderData';
 export { generateWorkOrderData } from './generators/workOrderData';
 export { generateShipmentData } from './generators/shipmentData';
-export { generateDepositData, generateWithdrawalData, generatePurchaseApprovalData } from './generators/accountingData';
+export { generateDepositData, generateWithdrawalData, generatePurchaseApprovalData, generateCardTransactionData } from './generators/accountingData';