From 2e3f6f21ac547be481be70f06f37bf48882fd334 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Thu, 5 Feb 2026 07:48:03 +0900
Subject: [PATCH] =?UTF-8?q?feat:=EC=9D=BC=EC=9D=BC=EC=9E=90=EA=B8=88?=
 =?UTF-8?q?=EC=9D=BC=EB=B3=B4/=EC=B9=B4=EB=93=9C=EA=B1=B0=EB=9E=98?=
 =?UTF-8?q?=EB=82=B4=EC=97=AD=20=EB=AA=A9=EC=97=85=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=E2=86=92=20DB=20CRUD=20=EC=A0=84=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 일일자금일보: API 호출 방식 전환 (list/store/update/destroy/memo)
- 카드거래내역: API 호출 방식 전환 (list/store/update/destroy)
- 라우트 추가 (daily-fund, card-transactions API 그룹)
- 로딩 상태, 에러 핸들링 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../views/finance/card-transactions.blade.php |  694 +++--------
 resources/views/finance/daily-fund.blade.php  | 1021 +++++------------
 routes/web.php                                |   17 +
 3 files changed, 430 insertions(+), 1302 deletions(-)

diff --git a/resources/views/finance/card-transactions.blade.php b/resources/views/finance/card-transactions.blade.php
index 4e2890f4..00484601 100644
--- a/resources/views/finance/card-transactions.blade.php
+++ b/resources/views/finance/card-transactions.blade.php
@@ -4,13 +4,12 @@
 
 @push('styles')
 <style>
-    @media print {
-        .no-print { display: none !important; }
-    }
+    @media print { .no-print { display: none !important; } }
 </style>
 @endpush
 
 @section('content')
+<meta name="csrf-token" content="{{ csrf_token() }}">
 <div id="card-transactions-root"></div>
 @endsection
 
@@ -23,7 +22,6 @@
 <script type="text/babel">
 const { useState, useRef, useEffect } = React;
 
-// Lucide 아이콘 래핑
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
@@ -40,7 +38,6 @@
 const CreditCard = createIcon('credit-card');
 const Plus = createIcon('plus');
 const Search = createIcon('search');
-const Filter = createIcon('filter');
 const Download = createIcon('download');
 const Calendar = createIcon('calendar');
 const X = createIcon('x');
@@ -54,143 +51,14 @@
 const Car = createIcon('car');
 const Utensils = createIcon('utensils');
 const Building = createIcon('building');
-const MoreHorizontal = createIcon('more-horizontal');
-const ChevronLeft = createIcon('chevron-left');
-const ChevronRight = createIcon('chevron-right');
 
 function CardTransactionsManagement() {
-    // 카드 목록 (실제로는 API에서 가져옴)
-    const [cards] = useState([
-        { id: 1, cardName: '업무용 법인카드', cardNumber: '9410-****-****-9012', holder: '김대표' },
-        { id: 2, cardName: '마케팅 법인카드', cardNumber: '5412-****-****-1098', holder: '박마케팅' },
-        { id: 3, cardName: '개발팀 체크카드', cardNumber: '4532-****-****-3333', holder: '이개발' },
-    ]);
+    const [cards, setCards] = useState([]);
+    const [transactions, setTransactions] = useState([]);
+    const [stats, setStats] = useState({ total: 0, totalAmount: 0, approvedAmount: 0, cancelledAmount: 0 });
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
 
-    // 거래내역 데이터
-    const [transactions, setTransactions] = useState([
-        {
-            id: 1,
-            cardId: 1,
-            date: '2026-01-21',
-            time: '12:30',
-            merchant: '스타벅스 강남역점',
-            category: '식비',
-            amount: 15000,
-            approvalNo: '12345678',
-            status: 'approved',
-            memo: '팀 미팅'
-        },
-        {
-            id: 2,
-            cardId: 1,
-            date: '2026-01-21',
-            time: '14:20',
-            merchant: 'AWS Korea',
-            category: '운영비',
-            amount: 2500000,
-            approvalNo: '23456789',
-            status: 'approved',
-            memo: '1월 클라우드 비용'
-        },
-        {
-            id: 3,
-            cardId: 2,
-            date: '2026-01-21',
-            time: '10:15',
-            merchant: '네이버 광고',
-            category: '마케팅비',
-            amount: 500000,
-            approvalNo: '34567890',
-            status: 'approved',
-            memo: '검색광고 충전'
-        },
-        {
-            id: 4,
-            cardId: 1,
-            date: '2026-01-20',
-            time: '18:45',
-            merchant: '교보문고 광화문점',
-            category: '도서/교육',
-            amount: 89000,
-            approvalNo: '45678901',
-            status: 'approved',
-            memo: '개발 서적 구매'
-        },
-        {
-            id: 5,
-            cardId: 3,
-            date: '2026-01-20',
-            time: '16:30',
-            merchant: '쿠팡',
-            category: '사무용품',
-            amount: 156000,
-            approvalNo: '56789012',
-            status: 'approved',
-            memo: '모니터 거치대, 키보드'
-        },
-        {
-            id: 6,
-            cardId: 1,
-            date: '2026-01-19',
-            time: '19:20',
-            merchant: '한우명가',
-            category: '접대비',
-            amount: 450000,
-            approvalNo: '67890123',
-            status: 'approved',
-            memo: '고객사 미팅 식사'
-        },
-        {
-            id: 7,
-            cardId: 2,
-            date: '2026-01-19',
-            time: '11:00',
-            merchant: 'Google Ads',
-            category: '마케팅비',
-            amount: 800000,
-            approvalNo: '78901234',
-            status: 'approved',
-            memo: '디스플레이 광고'
-        },
-        {
-            id: 8,
-            cardId: 1,
-            date: '2026-01-18',
-            time: '09:30',
-            merchant: 'KTX 예매',
-            category: '교통비',
-            amount: 112000,
-            approvalNo: '89012345',
-            status: 'approved',
-            memo: '부산 출장'
-        },
-        {
-            id: 9,
-            cardId: 3,
-            date: '2026-01-18',
-            time: '15:00',
-            merchant: '다나와',
-            category: '장비구매',
-            amount: 1890000,
-            approvalNo: '90123456',
-            status: 'approved',
-            memo: '개발용 노트북 SSD 업그레이드'
-        },
-        {
-            id: 10,
-            cardId: 1,
-            date: '2026-01-17',
-            time: '13:00',
-            merchant: '취소-스타벅스',
-            category: '식비',
-            amount: -8500,
-            approvalNo: '01234567',
-            status: 'cancelled',
-            memo: '주문 취소'
-        }
-    ]);
-
-    // 필터 상태
     const [searchTerm, setSearchTerm] = useState('');
     const [filterCard, setFilterCard] = useState('all');
     const [filterCategory, setFilterCategory] = useState('all');
@@ -200,14 +68,14 @@ function CardTransactionsManagement() {
         end: new Date().toISOString().split('T')[0]
     });
 
-    // 모달 상태
     const [showModal, setShowModal] = useState(false);
     const [modalMode, setModalMode] = useState('add');
     const [editingTransaction, setEditingTransaction] = useState(null);
 
-    // 폼 초기값
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+
     const initialFormState = {
-        cardId: 1,
+        cardId: '',
         date: new Date().toISOString().split('T')[0],
         time: '',
         merchant: '',
@@ -219,10 +87,8 @@ function CardTransactionsManagement() {
     };
     const [formData, setFormData] = useState(initialFormState);
 
-    // 카테고리 목록
     const categories = ['식비', '교통비', '운영비', '마케팅비', '사무용품', '도서/교육', '접대비', '장비구매', '기타'];
 
-    // 카테고리 아이콘
     const getCategoryIcon = (category) => {
         switch (category) {
             case '식비': return <Utensils className="w-4 h-4" />;
@@ -236,7 +102,6 @@ function CardTransactionsManagement() {
         }
     };
 
-    // 카테고리 색상
     const getCategoryColor = (category) => {
         const colors = {
             '식비': 'bg-orange-100 text-orange-700',
@@ -252,142 +117,141 @@ function CardTransactionsManagement() {
         return colors[category] || 'bg-gray-100 text-gray-700';
     };
 
-    // 금액 포맷
-    const formatCurrency = (num) => {
-        if (!num) return '0';
-        return num.toLocaleString();
-    };
-
-    // 입력용 금액 포맷 (3자리 콤마)
+    const formatCurrency = (num) => num ? num.toLocaleString() : '0';
     const formatInputCurrency = (value) => {
         if (!value && value !== 0) return '';
         const num = String(value).replace(/[^\d-]/g, '');
-        if (!num) return '';
         const isNegative = num.startsWith('-');
         const absNum = num.replace('-', '');
         if (!absNum) return isNegative ? '-' : '';
         return (isNegative ? '-' : '') + Number(absNum).toLocaleString();
     };
+    const parseInputCurrency = (value) => String(value).replace(/[^\d-]/g, '');
 
-    // 입력값에서 숫자만 추출
-    const parseInputCurrency = (value) => {
-        const num = String(value).replace(/[^\d-]/g, '');
-        return num;
+    const fetchTransactions = async () => {
+        setLoading(true);
+        try {
+            const params = new URLSearchParams({
+                startDate: dateRange.start,
+                endDate: dateRange.end,
+            });
+            const res = await fetch(`/finance/card-transactions/list?${params}`);
+            const data = await res.json();
+            if (data.success) {
+                setTransactions(data.data);
+                setStats(data.stats);
+                if (data.cards) setCards(data.cards);
+            }
+        } catch (err) {
+            console.error('거래내역 조회 실패:', err);
+        } finally {
+            setLoading(false);
+        }
     };
 
-    // 필터링된 거래내역
+    useEffect(() => { fetchTransactions(); }, [dateRange.start, dateRange.end]);
+
+    // 클라이언트 필터링
     const filteredTransactions = transactions.filter(tx => {
         const matchesSearch = tx.merchant.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                             tx.memo.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                             tx.approvalNo.includes(searchTerm);
+                             (tx.memo || '').toLowerCase().includes(searchTerm.toLowerCase()) ||
+                             (tx.approvalNo || '').includes(searchTerm);
         const matchesCard = filterCard === 'all' || tx.cardId === parseInt(filterCard);
         const matchesCategory = filterCategory === 'all' || tx.category === filterCategory;
         const matchesStatus = filterStatus === 'all' || tx.status === filterStatus;
-        const matchesDate = tx.date >= dateRange.start && tx.date <= dateRange.end;
-        return matchesSearch && matchesCard && matchesCategory && matchesStatus && matchesDate;
-    }).sort((a, b) => {
-        if (a.date !== b.date) return b.date.localeCompare(a.date);
-        return b.time.localeCompare(a.time);
+        return matchesSearch && matchesCard && matchesCategory && matchesStatus;
     });
 
-    // 통계 계산
     const totalAmount = filteredTransactions.reduce((sum, tx) => sum + tx.amount, 0);
     const approvedAmount = filteredTransactions.filter(tx => tx.status === 'approved').reduce((sum, tx) => sum + tx.amount, 0);
     const cancelledAmount = filteredTransactions.filter(tx => tx.status === 'cancelled').reduce((sum, tx) => sum + Math.abs(tx.amount), 0);
 
-    // 카테고리별 합계
     const categoryTotals = filteredTransactions
         .filter(tx => tx.status === 'approved' && tx.amount > 0)
-        .reduce((acc, tx) => {
-            acc[tx.category] = (acc[tx.category] || 0) + tx.amount;
-            return acc;
-        }, {});
+        .reduce((acc, tx) => { acc[tx.category] = (acc[tx.category] || 0) + tx.amount; return acc; }, {});
 
-    // 거래 추가 모달 열기
     const handleAddTransaction = () => {
         setModalMode('add');
-        setFormData(initialFormState);
+        setFormData({ ...initialFormState, cardId: cards.length > 0 ? cards[0].id : '' });
         setShowModal(true);
     };
 
-    // 거래 수정 모달 열기
     const handleEditTransaction = (transaction) => {
         setModalMode('edit');
         setEditingTransaction(transaction);
         setFormData({
             cardId: transaction.cardId,
             date: transaction.date,
-            time: transaction.time,
+            time: transaction.time || '',
             merchant: transaction.merchant,
-            category: transaction.category,
+            category: transaction.category || '기타',
             amount: transaction.amount,
-            approvalNo: transaction.approvalNo,
+            approvalNo: transaction.approvalNo || '',
             status: transaction.status,
-            memo: transaction.memo
+            memo: transaction.memo || ''
         });
         setShowModal(true);
     };
 
-    // 저장
-    const handleSave = () => {
-        if (!formData.merchant || !formData.amount) {
-            alert('가맹점명과 금액을 입력해주세요.');
-            return;
-        }
-
-        if (modalMode === 'add') {
-            const newTransaction = {
-                id: Date.now(),
+    const handleSave = async () => {
+        if (!formData.merchant || !formData.amount) { alert('가맹점명과 금액을 입력해주세요.'); return; }
+        setSaving(true);
+        try {
+            const payload = {
                 ...formData,
-                cardId: parseInt(formData.cardId),
+                cardId: parseInt(formData.cardId) || null,
                 amount: parseInt(formData.amount) || 0,
-                time: formData.time || new Date().toTimeString().slice(0, 5)
+                time: formData.time || null,
             };
-            setTransactions(prev => [newTransaction, ...prev]);
-        } else {
-            setTransactions(prev => prev.map(tx =>
-                tx.id === editingTransaction.id
-                    ? { ...tx, ...formData, cardId: parseInt(formData.cardId), amount: parseInt(formData.amount) || 0 }
-                    : tx
-            ));
-        }
-
-        setShowModal(false);
-        setEditingTransaction(null);
-    };
-
-    // 삭제
-    const handleDelete = (id) => {
-        if (confirm('정말 삭제하시겠습니까?')) {
-            setTransactions(prev => prev.filter(tx => tx.id !== id));
-            if (showModal) {
-                setShowModal(false);
-                setEditingTransaction(null);
+            const url = modalMode === 'add' ? '/finance/card-transactions/store' : `/finance/card-transactions/${editingTransaction.id}`;
+            const res = await fetch(url, {
+                method: modalMode === 'add' ? 'POST' : 'PUT',
+                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
+                body: JSON.stringify(payload),
+            });
+            const data = await res.json();
+            if (!res.ok) {
+                const errors = data.errors ? Object.values(data.errors).flat().join('\n') : data.message;
+                alert(errors || '저장에 실패했습니다.');
+                return;
             }
+            setShowModal(false);
+            setEditingTransaction(null);
+            fetchTransactions();
+        } catch (err) {
+            alert('저장에 실패했습니다.');
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    const handleDelete = async (id) => {
+        if (!confirm('정말 삭제하시겠습니까?')) return;
+        try {
+            const res = await fetch(`/finance/card-transactions/${id}`, {
+                method: 'DELETE',
+                headers: { 'X-CSRF-TOKEN': csrfToken },
+            });
+            if (res.ok) {
+                if (showModal) { setShowModal(false); setEditingTransaction(null); }
+                fetchTransactions();
+            }
+        } catch (err) {
+            alert('삭제에 실패했습니다.');
         }
     };
 
-    // Excel 다운로드
     const handleDownload = () => {
         const rows = [
             ['법인카드 거래내역', `${dateRange.start} ~ ${dateRange.end}`],
             [],
             ['날짜', '시간', '카드', '가맹점', '카테고리', '금액', '승인번호', '상태', '메모'],
             ...filteredTransactions.map(tx => [
-                tx.date,
-                tx.time,
-                cards.find(c => c.id === tx.cardId)?.cardName || '',
-                tx.merchant,
-                tx.category,
-                tx.amount,
-                tx.approvalNo,
-                tx.status === 'approved' ? '승인' : '취소',
-                tx.memo
+                tx.date, tx.time, cards.find(c => c.id === tx.cardId)?.cardName || '', tx.merchant, tx.category, tx.amount, tx.approvalNo, tx.status === 'approved' ? '승인' : '취소', tx.memo
             ]),
             [],
             ['총 사용금액', '', '', '', '', totalAmount]
         ];
-
         const csvContent = rows.map(row => row.join(',')).join('\n');
         const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
         const link = document.createElement('a');
@@ -396,7 +260,6 @@ function CardTransactionsManagement() {
         link.click();
     };
 
-    // 날짜 그룹화
     const groupedTransactions = filteredTransactions.reduce((groups, tx) => {
         const date = tx.date;
         if (!groups[date]) groups[date] = [];
@@ -404,7 +267,6 @@ function CardTransactionsManagement() {
         return groups;
     }, {});
 
-    // 날짜 포맷
     const formatDateDisplay = (dateStr) => {
         const date = new Date(dateStr);
         const days = ['일', '월', '화', '수', '목', '금', '토'];
@@ -413,185 +275,92 @@ function CardTransactionsManagement() {
 
     return (
         <div className="bg-gray-50 min-h-screen">
-            {/* 헤더 */}
             <header className="bg-white border-b border-gray-200 rounded-t-xl mb-6">
                 <div className="px-6 py-4">
                     <div className="flex items-center justify-between">
                         <div className="flex items-center gap-4">
-                            <div className="p-2 bg-indigo-100 rounded-xl">
-                                <Receipt className="w-6 h-6 text-indigo-600" />
-                            </div>
-                            <div>
-                                <h1 className="text-xl font-bold text-gray-900">법인카드 거래내역</h1>
-                                <p className="text-sm text-gray-500">Corporate Card Transactions</p>
-                            </div>
+                            <div className="p-2 bg-indigo-100 rounded-xl"><Receipt className="w-6 h-6 text-indigo-600" /></div>
+                            <div><h1 className="text-xl font-bold text-gray-900">법인카드 거래내역</h1><p className="text-sm text-gray-500">Corporate Card Transactions</p></div>
                         </div>
                         <div className="flex items-center gap-3">
-                            <button
-                                onClick={handleDownload}
-                                className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
-                            >
-                                <Download className="w-4 h-4" />
-                                <span className="text-sm">Excel</span>
-                            </button>
-                            <button
-                                onClick={handleAddTransaction}
-                                className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors"
-                            >
-                                <Plus className="w-4 h-4" />
-                                <span className="text-sm font-medium">거래 등록</span>
-                            </button>
+                            <button onClick={handleDownload} className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg"><Download className="w-4 h-4" /><span className="text-sm">Excel</span></button>
+                            <button onClick={handleAddTransaction} className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg"><Plus className="w-4 h-4" /><span className="text-sm font-medium">거래 등록</span></button>
                         </div>
                     </div>
                 </div>
             </header>
 
-            {/* 요약 카드 */}
             <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                 <div className="bg-white rounded-xl border border-gray-200 p-6">
-                    <div className="flex items-center justify-between mb-2">
-                        <span className="text-sm text-gray-500">조회 건수</span>
-                        <Receipt className="w-5 h-5 text-gray-400" />
-                    </div>
+                    <div className="flex items-center justify-between mb-2"><span className="text-sm text-gray-500">조회 건수</span><Receipt className="w-5 h-5 text-gray-400" /></div>
                     <p className="text-2xl font-bold text-gray-900">{filteredTransactions.length}건</p>
                     <p className="text-xs text-gray-400 mt-1">승인 {filteredTransactions.filter(t => t.status === 'approved').length}건</p>
                 </div>
                 <div className="bg-white rounded-xl border border-indigo-200 p-6 bg-indigo-50/30">
-                    <div className="flex items-center justify-between mb-2">
-                        <span className="text-sm text-indigo-700">총 사용금액</span>
-                        <CreditCard className="w-5 h-5 text-indigo-500" />
-                    </div>
+                    <div className="flex items-center justify-between mb-2"><span className="text-sm text-indigo-700">총 사용금액</span><CreditCard className="w-5 h-5 text-indigo-500" /></div>
                     <p className="text-2xl font-bold text-indigo-600">{formatCurrency(totalAmount)}원</p>
-                    <p className="text-xs text-indigo-500 mt-1">취소 제외</p>
                 </div>
                 <div className="bg-white rounded-xl border border-emerald-200 p-6">
-                    <div className="flex items-center justify-between mb-2">
-                        <span className="text-sm text-emerald-700">승인 금액</span>
-                        <TrendingUp className="w-5 h-5 text-emerald-500" />
-                    </div>
+                    <div className="flex items-center justify-between mb-2"><span className="text-sm text-emerald-700">승인 금액</span><TrendingUp className="w-5 h-5 text-emerald-500" /></div>
                     <p className="text-2xl font-bold text-emerald-600">{formatCurrency(approvedAmount)}원</p>
                 </div>
                 <div className="bg-white rounded-xl border border-rose-200 p-6">
-                    <div className="flex items-center justify-between mb-2">
-                        <span className="text-sm text-rose-700">취소 금액</span>
-                        <TrendingDown className="w-5 h-5 text-rose-500" />
-                    </div>
+                    <div className="flex items-center justify-between mb-2"><span className="text-sm text-rose-700">취소 금액</span><TrendingDown className="w-5 h-5 text-rose-500" /></div>
                     <p className="text-2xl font-bold text-rose-600">{formatCurrency(cancelledAmount)}원</p>
                 </div>
             </div>
 
-            {/* 카테고리별 사용현황 */}
             {Object.keys(categoryTotals).length > 0 && (
                 <div className="bg-white rounded-xl border border-gray-200 p-4 mb-6">
                     <h3 className="text-sm font-medium text-gray-700 mb-3">카테고리별 사용현황</h3>
                     <div className="flex flex-wrap gap-2">
-                        {Object.entries(categoryTotals)
-                            .sort((a, b) => b[1] - a[1])
-                            .map(([cat, amount]) => (
-                                <div key={cat} className={`flex items-center gap-2 px-3 py-2 rounded-lg ${getCategoryColor(cat)}`}>
-                                    {getCategoryIcon(cat)}
-                                    <span className="text-sm font-medium">{cat}</span>
-                                    <span className="text-sm">{formatCurrency(amount)}원</span>
-                                </div>
-                            ))
-                        }
+                        {Object.entries(categoryTotals).sort((a, b) => b[1] - a[1]).map(([cat, amount]) => (
+                            <div key={cat} className={`flex items-center gap-2 px-3 py-2 rounded-lg ${getCategoryColor(cat)}`}>
+                                {getCategoryIcon(cat)}<span className="text-sm font-medium">{cat}</span><span className="text-sm">{formatCurrency(amount)}원</span>
+                            </div>
+                        ))}
                     </div>
                 </div>
             )}
 
-            {/* 필터 영역 */}
             <div className="bg-white rounded-xl border border-gray-200 p-4 mb-6">
                 <div className="grid grid-cols-1 md:grid-cols-6 gap-4">
-                    {/* 검색 */}
                     <div className="md:col-span-2 relative">
                         <Search className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
-                        <input
-                            type="text"
-                            placeholder="가맹점, 메모, 승인번호 검색..."
-                            value={searchTerm}
-                            onChange={(e) => setSearchTerm(e.target.value)}
-                            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
-                        />
+                        <input type="text" placeholder="가맹점, 메모, 승인번호 검색..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500" />
                     </div>
-
-                    {/* 카드 필터 */}
-                    <div>
-                        <select
-                            value={filterCard}
-                            onChange={(e) => setFilterCard(e.target.value)}
-                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
-                        >
-                            <option value="all">전체 카드</option>
-                            {cards.map(card => (
-                                <option key={card.id} value={card.id}>{card.cardName}</option>
-                            ))}
-                        </select>
-                    </div>
-
-                    {/* 카테고리 필터 */}
-                    <div>
-                        <select
-                            value={filterCategory}
-                            onChange={(e) => setFilterCategory(e.target.value)}
-                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
-                        >
-                            <option value="all">전체 카테고리</option>
-                            {categories.map(cat => (
-                                <option key={cat} value={cat}>{cat}</option>
-                            ))}
-                        </select>
-                    </div>
-
-                    {/* 기간 필터 */}
+                    <select value={filterCard} onChange={(e) => setFilterCard(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg">
+                        <option value="all">전체 카드</option>
+                        {cards.map(card => <option key={card.id} value={card.id}>{card.cardName}</option>)}
+                    </select>
+                    <select value={filterCategory} onChange={(e) => setFilterCategory(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg">
+                        <option value="all">전체 카테고리</option>
+                        {categories.map(cat => <option key={cat} value={cat}>{cat}</option>)}
+                    </select>
                     <div className="flex items-center gap-2">
-                        <input
-                            type="date"
-                            value={dateRange.start}
-                            onChange={(e) => setDateRange(prev => ({ ...prev, start: e.target.value }))}
-                            className="flex-1 px-2 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-sm"
-                        />
+                        <input type="date" value={dateRange.start} onChange={(e) => setDateRange(prev => ({ ...prev, start: e.target.value }))} className="flex-1 px-2 py-2 border border-gray-300 rounded-lg text-sm" />
                         <span className="text-gray-400">~</span>
-                        <input
-                            type="date"
-                            value={dateRange.end}
-                            onChange={(e) => setDateRange(prev => ({ ...prev, end: e.target.value }))}
-                            className="flex-1 px-2 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-sm"
-                        />
+                        <input type="date" value={dateRange.end} onChange={(e) => setDateRange(prev => ({ ...prev, end: e.target.value }))} className="flex-1 px-2 py-2 border border-gray-300 rounded-lg text-sm" />
                     </div>
-
-                    {/* 상태 필터 버튼 */}
                     <div className="flex gap-1">
-                        <button
-                            onClick={() => setFilterStatus('all')}
-                            className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-                                filterStatus === 'all' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-                            }`}
-                        >
-                            전체
-                        </button>
-                        <button
-                            onClick={() => setFilterStatus('approved')}
-                            className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-                                filterStatus === 'approved' ? 'bg-emerald-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-                            }`}
-                        >
-                            승인
-                        </button>
-                        <button
-                            onClick={() => setFilterStatus('cancelled')}
-                            className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-                                filterStatus === 'cancelled' ? 'bg-rose-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-                            }`}
-                        >
-                            취소
-                        </button>
+                        {['all', 'approved', 'cancelled'].map(s => (
+                            <button key={s} onClick={() => setFilterStatus(s)} className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium ${filterStatus === s ? (s === 'approved' ? 'bg-emerald-600 text-white' : s === 'cancelled' ? 'bg-rose-600 text-white' : 'bg-indigo-600 text-white') : 'bg-gray-100 text-gray-600'}`}>
+                                {s === 'all' ? '전체' : s === 'approved' ? '승인' : '취소'}
+                            </button>
+                        ))}
                     </div>
                 </div>
             </div>
 
-            {/* 거래 내역 목록 */}
             <div className="space-y-4">
-                {Object.entries(groupedTransactions).length === 0 ? (
+                {loading ? (
+                    <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
+                        <div className="flex items-center justify-center gap-2 text-gray-400">
+                            <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                            불러오는 중...
+                        </div>
+                    </div>
+                ) : Object.entries(groupedTransactions).length === 0 ? (
                     <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
                         <Receipt className="w-12 h-12 mx-auto mb-4 text-gray-300" />
                         <p className="text-gray-400">거래 내역이 없습니다.</p>
@@ -600,67 +369,36 @@ className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                     Object.entries(groupedTransactions).map(([date, txList]) => (
                         <div key={date} className="bg-white rounded-xl border border-gray-200 overflow-hidden">
                             <div className="px-6 py-3 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
-                                <div className="flex items-center gap-2">
-                                    <Calendar className="w-4 h-4 text-gray-400" />
-                                    <span className="font-medium text-gray-700">{formatDateDisplay(date)}</span>
-                                </div>
-                                <span className="text-sm text-gray-500">
-                                    {txList.length}건 / {formatCurrency(txList.reduce((s, t) => s + t.amount, 0))}원
-                                </span>
+                                <div className="flex items-center gap-2"><Calendar className="w-4 h-4 text-gray-400" /><span className="font-medium text-gray-700">{formatDateDisplay(date)}</span></div>
+                                <span className="text-sm text-gray-500">{txList.length}건 / {formatCurrency(txList.reduce((s, t) => s + t.amount, 0))}원</span>
                             </div>
                             <div className="divide-y divide-gray-100">
                                 {txList.map(tx => (
-                                    <div
-                                        key={tx.id}
-                                        onClick={() => handleEditTransaction(tx)}
-                                        className="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors"
-                                    >
+                                    <div key={tx.id} onClick={() => handleEditTransaction(tx)} className="px-6 py-4 hover:bg-gray-50 cursor-pointer">
                                         <div className="flex items-center justify-between">
                                             <div className="flex items-center gap-4">
-                                                <div className={`p-2 rounded-lg ${getCategoryColor(tx.category)}`}>
-                                                    {getCategoryIcon(tx.category)}
-                                                </div>
+                                                <div className={`p-2 rounded-lg ${getCategoryColor(tx.category)}`}>{getCategoryIcon(tx.category)}</div>
                                                 <div>
                                                     <div className="flex items-center gap-2 mb-1">
                                                         <span className="font-medium text-gray-900">{tx.merchant}</span>
-                                                        <span className={`px-2 py-0.5 rounded text-xs ${
-                                                            tx.status === 'approved'
-                                                                ? 'bg-emerald-100 text-emerald-700'
-                                                                : 'bg-rose-100 text-rose-700'
-                                                        }`}>
-                                                            {tx.status === 'approved' ? '승인' : '취소'}
-                                                        </span>
+                                                        <span className={`px-2 py-0.5 rounded text-xs ${tx.status === 'approved' ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700'}`}>{tx.status === 'approved' ? '승인' : '취소'}</span>
                                                     </div>
                                                     <div className="flex items-center gap-3 text-sm text-gray-500">
                                                         <span>{tx.time}</span>
                                                         <span>{cards.find(c => c.id === tx.cardId)?.cardName}</span>
-                                                        <span className={`px-1.5 py-0.5 rounded text-xs ${getCategoryColor(tx.category)}`}>
-                                                            {tx.category}
-                                                        </span>
+                                                        <span className={`px-1.5 py-0.5 rounded text-xs ${getCategoryColor(tx.category)}`}>{tx.category}</span>
                                                         {tx.memo && <span className="text-gray-400">| {tx.memo}</span>}
                                                     </div>
                                                 </div>
                                             </div>
                                             <div className="flex items-center gap-4">
                                                 <div className="text-right">
-                                                    <p className={`text-lg font-bold ${tx.amount < 0 ? 'text-rose-600' : 'text-gray-900'}`}>
-                                                        {tx.amount < 0 ? '' : ''}{formatCurrency(tx.amount)}원
-                                                    </p>
-                                                    <p className="text-xs text-gray-400">승인번호: {tx.approvalNo}</p>
+                                                    <p className={`text-lg font-bold ${tx.amount < 0 ? 'text-rose-600' : 'text-gray-900'}`}>{formatCurrency(tx.amount)}원</p>
+                                                    {tx.approvalNo && <p className="text-xs text-gray-400">승인번호: {tx.approvalNo}</p>}
                                                 </div>
-                                                <div className="flex items-center gap-1">
-                                                    <button
-                                                        onClick={(e) => { e.stopPropagation(); handleEditTransaction(tx); }}
-                                                        className="p-2 text-gray-400 hover:text-blue-500 hover:bg-blue-50 rounded-lg transition-colors"
-                                                    >
-                                                        <Edit className="w-4 h-4" />
-                                                    </button>
-                                                    <button
-                                                        onClick={(e) => { e.stopPropagation(); handleDelete(tx.id); }}
-                                                        className="p-2 text-gray-400 hover:text-rose-500 hover:bg-rose-50 rounded-lg transition-colors"
-                                                    >
-                                                        <Trash2 className="w-4 h-4" />
-                                                    </button>
+                                                <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+                                                    <button onClick={() => handleEditTransaction(tx)} className="p-2 text-gray-400 hover:text-blue-500 hover:bg-blue-50 rounded-lg"><Edit className="w-4 h-4" /></button>
+                                                    <button onClick={() => handleDelete(tx.id)} className="p-2 text-gray-400 hover:text-rose-500 hover:bg-rose-50 rounded-lg"><Trash2 className="w-4 h-4" /></button>
                                                 </div>
                                             </div>
                                         </div>
@@ -672,167 +410,48 @@ className="p-2 text-gray-400 hover:text-rose-500 hover:bg-rose-50 rounded-lg tra
                 )}
             </div>
 
-            {/* 등록/수정 모달 */}
             {showModal && (
                 <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
                     <div className="bg-white rounded-xl p-6 w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
                         <div className="flex items-center justify-between mb-6">
-                            <h3 className="text-lg font-bold text-gray-900">
-                                {modalMode === 'add' ? '거래 등록' : '거래 수정'}
-                            </h3>
-                            <button
-                                onClick={() => { setShowModal(false); setEditingTransaction(null); }}
-                                className="p-1 hover:bg-gray-100 rounded-lg"
-                            >
-                                <X className="w-5 h-5 text-gray-500" />
-                            </button>
+                            <h3 className="text-lg font-bold text-gray-900">{modalMode === 'add' ? '거래 등록' : '거래 수정'}</h3>
+                            <button onClick={() => { setShowModal(false); setEditingTransaction(null); }} className="p-1 hover:bg-gray-100 rounded-lg"><X className="w-5 h-5 text-gray-500" /></button>
                         </div>
-
                         <div className="space-y-4">
                             <div className="grid grid-cols-2 gap-4">
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700 mb-1">카드 *</label>
-                                    <select
-                                        value={formData.cardId}
-                                        onChange={(e) => setFormData(prev => ({ ...prev, cardId: e.target.value }))}
-                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
-                                    >
-                                        {cards.map(card => (
-                                            <option key={card.id} value={card.id}>{card.cardName}</option>
-                                        ))}
+                                <div><label className="block text-sm font-medium text-gray-700 mb-1">카드</label>
+                                    <select value={formData.cardId} onChange={(e) => setFormData(prev => ({ ...prev, cardId: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg">
+                                        <option value="">선택</option>
+                                        {cards.map(card => <option key={card.id} value={card.id}>{card.cardName}</option>)}
                                     </select>
                                 </div>
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700 mb-1">카테고리</label>
-                                    <select
-                                        value={formData.category}
-                                        onChange={(e) => setFormData(prev => ({ ...prev, category: e.target.value }))}
-                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
-                                    >
-                                        {categories.map(cat => (
-                                            <option key={cat} value={cat}>{cat}</option>
-                                        ))}
+                                <div><label className="block text-sm font-medium text-gray-700 mb-1">카테고리</label>
+                                    <select value={formData.category} onChange={(e) => setFormData(prev => ({ ...prev, category: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg">
+                                        {categories.map(cat => <option key={cat} value={cat}>{cat}</option>)}
                                     </select>
                                 </div>
                             </div>
-
                             <div className="grid grid-cols-2 gap-4">
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700 mb-1">날짜 *</label>
-                                    <input
-                                        type="date"
-                                        value={formData.date}
-                                        onChange={(e) => setFormData(prev => ({ ...prev, date: e.target.value }))}
-                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
-                                    />
-                                </div>
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700 mb-1">시간</label>
-                                    <input
-                                        type="time"
-                                        value={formData.time}
-                                        onChange={(e) => setFormData(prev => ({ ...prev, time: e.target.value }))}
-                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
-                                    />
-                                </div>
+                                <div><label className="block text-sm font-medium text-gray-700 mb-1">날짜 *</label><input type="date" value={formData.date} onChange={(e) => setFormData(prev => ({ ...prev, date: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
+                                <div><label className="block text-sm font-medium text-gray-700 mb-1">시간</label><input type="time" value={formData.time} onChange={(e) => setFormData(prev => ({ ...prev, time: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
                             </div>
-
-                            <div>
-                                <label className="block text-sm font-medium text-gray-700 mb-1">가맹점명 *</label>
-                                <input
-                                    type="text"
-                                    value={formData.merchant}
-                                    onChange={(e) => setFormData(prev => ({ ...prev, merchant: e.target.value }))}
-                                    placeholder="가맹점명을 입력하세요"
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
-                                />
-                            </div>
-
+                            <div><label className="block text-sm font-medium text-gray-700 mb-1">가맹점명 *</label><input type="text" value={formData.merchant} onChange={(e) => setFormData(prev => ({ ...prev, merchant: e.target.value }))} placeholder="가맹점명" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
                             <div className="grid grid-cols-2 gap-4">
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700 mb-1">금액 *</label>
-                                    <input
-                                        type="text"
-                                        value={formatInputCurrency(formData.amount)}
-                                        onChange={(e) => setFormData(prev => ({ ...prev, amount: parseInputCurrency(e.target.value) }))}
-                                        placeholder="0"
-                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-right"
-                                    />
-                                    <p className="text-xs text-gray-400 mt-1">취소 시 음수(-) 입력</p>
-                                </div>
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700 mb-1">승인번호</label>
-                                    <input
-                                        type="text"
-                                        value={formData.approvalNo}
-                                        onChange={(e) => setFormData(prev => ({ ...prev, approvalNo: e.target.value }))}
-                                        placeholder="승인번호"
-                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
-                                    />
-                                </div>
+                                <div><label className="block text-sm font-medium text-gray-700 mb-1">금액 *</label><input type="text" value={formatInputCurrency(formData.amount)} onChange={(e) => setFormData(prev => ({ ...prev, amount: parseInputCurrency(e.target.value) }))} placeholder="0" className="w-full px-3 py-2 border border-gray-300 rounded-lg text-right" /><p className="text-xs text-gray-400 mt-1">취소 시 음수(-) 입력</p></div>
+                                <div><label className="block text-sm font-medium text-gray-700 mb-1">승인번호</label><input type="text" value={formData.approvalNo} onChange={(e) => setFormData(prev => ({ ...prev, approvalNo: e.target.value }))} placeholder="승인번호" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
                             </div>
-
-                            <div>
-                                <label className="block text-sm font-medium text-gray-700 mb-1">상태</label>
+                            <div><label className="block text-sm font-medium text-gray-700 mb-1">상태</label>
                                 <div className="flex gap-4">
-                                    <label className="flex items-center gap-2 cursor-pointer">
-                                        <input
-                                            type="radio"
-                                            name="status"
-                                            value="approved"
-                                            checked={formData.status === 'approved'}
-                                            onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value }))}
-                                            className="w-4 h-4 text-indigo-600"
-                                        />
-                                        <span className="text-sm text-gray-700">승인</span>
-                                    </label>
-                                    <label className="flex items-center gap-2 cursor-pointer">
-                                        <input
-                                            type="radio"
-                                            name="status"
-                                            value="cancelled"
-                                            checked={formData.status === 'cancelled'}
-                                            onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value }))}
-                                            className="w-4 h-4 text-indigo-600"
-                                        />
-                                        <span className="text-sm text-gray-700">취소</span>
-                                    </label>
+                                    <label className="flex items-center gap-2 cursor-pointer"><input type="radio" name="status" value="approved" checked={formData.status === 'approved'} onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value }))} className="w-4 h-4 text-indigo-600" /><span className="text-sm">승인</span></label>
+                                    <label className="flex items-center gap-2 cursor-pointer"><input type="radio" name="status" value="cancelled" checked={formData.status === 'cancelled'} onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value }))} className="w-4 h-4 text-indigo-600" /><span className="text-sm">취소</span></label>
                                 </div>
                             </div>
-
-                            <div>
-                                <label className="block text-sm font-medium text-gray-700 mb-1">메모</label>
-                                <input
-                                    type="text"
-                                    value={formData.memo}
-                                    onChange={(e) => setFormData(prev => ({ ...prev, memo: e.target.value }))}
-                                    placeholder="메모를 입력하세요"
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
-                                />
-                            </div>
+                            <div><label className="block text-sm font-medium text-gray-700 mb-1">메모</label><input type="text" value={formData.memo} onChange={(e) => setFormData(prev => ({ ...prev, memo: e.target.value }))} placeholder="메모" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
                         </div>
-
                         <div className="flex gap-3 mt-6">
-                            {modalMode === 'edit' && (
-                                <button
-                                    onClick={() => handleDelete(editingTransaction.id)}
-                                    className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center gap-2"
-                                >
-                                    <span>🗑️</span> 삭제
-                                </button>
-                            )}
-                            <button
-                                onClick={() => { setShowModal(false); setEditingTransaction(null); }}
-                                className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 flex items-center justify-center gap-2"
-                            >
-                                <span>✕</span> 취소
-                            </button>
-                            <button
-                                onClick={handleSave}
-                                className="flex-1 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg flex items-center justify-center gap-2"
-                            >
-                                <span>✓</span> {modalMode === 'add' ? '등록' : '저장'}
-                            </button>
+                            {modalMode === 'edit' && <button onClick={() => handleDelete(editingTransaction.id)} className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg">삭제</button>}
+                            <button onClick={() => { setShowModal(false); setEditingTransaction(null); }} className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">취소</button>
+                            <button onClick={handleSave} disabled={saving} className="flex-1 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg disabled:opacity-50">{saving ? '저장 중...' : (modalMode === 'add' ? '등록' : '저장')}</button>
                         </div>
                     </div>
                 </div>
@@ -841,11 +460,8 @@ className="flex-1 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded
     );
 }
 
-// React 앱 마운트
 const rootElement = document.getElementById('card-transactions-root');
-if (rootElement) {
-    ReactDOM.createRoot(rootElement).render(<CardTransactionsManagement />);
-}
+if (rootElement) { ReactDOM.createRoot(rootElement).render(<CardTransactionsManagement />); }
 </script>
 @endverbatim
 @endpush
diff --git a/resources/views/finance/daily-fund.blade.php b/resources/views/finance/daily-fund.blade.php
index 7115b665..085c31ff 100644
--- a/resources/views/finance/daily-fund.blade.php
+++ b/resources/views/finance/daily-fund.blade.php
@@ -9,7 +9,6 @@
         .print-only { display: block !important; }
         body { background: white !important; }
     }
-    /* React 앱용 스타일 */
     #daily-fund-root .min-h-screen {
         min-height: auto;
         background: transparent;
@@ -18,6 +17,7 @@
 @endpush
 
 @section('content')
+<meta name="csrf-token" content="{{ csrf_token() }}">
 <div id="daily-fund-root"></div>
 @endsection
 
@@ -29,7 +29,6 @@
 <script type="text/babel" data-version="{{ time() }}">
 const { useState, useRef, useEffect } = React;
 
-// Lucide 아이콘을 SVG 컴포넌트로 래핑
 const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
@@ -69,7 +68,6 @@
 function DailyFundReport() {
     const today = new Date();
     const [selectedDate, setSelectedDate] = useState(today.toISOString().split('T')[0]);
-    const [isEditing, setIsEditing] = useState(false);
     const [showSendModal, setShowSendModal] = useState(false);
     const [showAddModal, setShowAddModal] = useState(false);
     const [addType, setAddType] = useState('income');
@@ -77,88 +75,55 @@ function DailyFundReport() {
     const [showEditModal, setShowEditModal] = useState(false);
     const [editingItem, setEditingItem] = useState(null);
     const [editType, setEditType] = useState('income');
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
 
-    // 계좌 데이터
-    const [accounts] = useState([
-        { id: 1, bank: '국민은행', accountNumber: '123-456-789012', type: '보통예금', color: 'yellow' },
-        { id: 2, bank: '신한은행', accountNumber: '234-567-890123', type: '법인카드 출금', color: 'blue' },
-        { id: 3, bank: '우리은행', accountNumber: '345-678-901234', type: '정기예금', color: 'red' },
-        { id: 4, bank: '하나은행', accountNumber: '456-789-012345', type: '보통예금', color: 'teal' }
-    ]);
+    const [incomeList, setIncomeList] = useState([]);
+    const [expenseList, setExpenseList] = useState([]);
+    const [previousBalance, setPreviousBalance] = useState(0);
+    const [memo, setMemo] = useState('');
+    const [author, setAuthor] = useState('');
+    const [updatedAt, setUpdatedAt] = useState('');
 
-    // 일별 데이터 (실제로는 API에서 가져옴)
-    const [dailyData, setDailyData] = useState({
-        '2026-01-21': {
-            previousBalance: {
-                1: 450000000,
-                2: 85000000,
-                3: 200000000,
-                4: 50000000
-            },
-            income: [
-                { id: 1, time: '09:30', accountId: 1, description: '(주)제조산업 개발비 1차', amount: 80000000, category: '개발비', note: '계약금 50%' },
-                { id: 2, time: '11:00', accountId: 1, description: '(주)테크솔루션 구독료', amount: 500000, category: '구독료', note: '1월분' },
-                { id: 3, time: '14:30', accountId: 4, description: '(주)스마트팩토리 계약금', amount: 50000000, category: '개발비', note: '계약금 50%' }
-            ],
-            expense: [
-                { id: 1, time: '10:00', accountId: 2, description: 'AWS 호스팅 비용', amount: 2500000, category: '운영비', note: '1월분' },
-                { id: 2, time: '13:00', accountId: 2, description: '사무용품 구입', amount: 150000, category: '소모품비', note: '' },
-                { id: 3, time: '15:00', accountId: 1, description: '외주 개발비 지급', amount: 15000000, category: '외주비', note: '김개발' },
-                { id: 4, time: '16:30', accountId: 4, description: '통신비', amount: 350000, category: '운영비', note: 'KT 인터넷' }
-            ],
-            memo: '오늘 (주)제조산업 개발비 1차 입금 완료. 스마트팩토리 계약 체결.',
-            author: '재무팀 김재무',
-            createdAt: '2026-01-21 18:00'
-        },
-        '2026-01-20': {
-            previousBalance: {
-                1: 385000000,
-                2: 87500000,
-                3: 200000000,
-                4: 50350000
-            },
-            income: [
-                { id: 1, time: '10:00', accountId: 1, description: '(주)AI산업 구독료', amount: 500000, category: '구독료', note: '1월분' },
-                { id: 2, time: '15:00', accountId: 1, description: '(주)디지털제조 잔금', amount: 65000000, category: '개발비', note: '잔금 50%' }
-            ],
-            expense: [
-                { id: 1, time: '11:00', accountId: 2, description: '급여 지급', amount: 18000000, category: '인건비', note: '정규직 5명' },
-                { id: 2, time: '14:00', accountId: 4, description: '사무실 임대료', amount: 3500000, category: '임대료', note: '1월분' }
-            ],
-            memo: '1월 급여 지급 완료',
-            author: '재무팀 김재무',
-            createdAt: '2026-01-20 18:30'
-        }
-    });
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
 
-    // 새 거래 폼
     const [newTransaction, setNewTransaction] = useState({
         time: '',
-        accountId: 1,
+        accountName: '',
         description: '',
         amount: '',
         category: '',
         note: ''
     });
 
-    // 현재 선택된 날짜의 데이터
-    const currentData = dailyData[selectedDate] || {
-        previousBalance: { 1: 0, 2: 0, 3: 0, 4: 0 },
-        income: [],
-        expense: [],
-        memo: '',
-        author: '',
-        createdAt: ''
+    const fetchData = async (date) => {
+        setLoading(true);
+        try {
+            const res = await fetch(`/finance/daily-fund/list?date=${date || selectedDate}`);
+            const data = await res.json();
+            if (data.success) {
+                setIncomeList(data.data.income || []);
+                setExpenseList(data.data.expense || []);
+                setPreviousBalance(data.data.previousBalance || 0);
+                setMemo(data.data.memo || '');
+                setAuthor(data.data.author || '');
+                setUpdatedAt(data.data.updatedAt || '');
+            }
+        } catch (err) {
+            console.error('데이터 조회 실패:', err);
+        } finally {
+            setLoading(false);
+        }
     };
 
-    // 날짜 이동
+    useEffect(() => { fetchData(selectedDate); }, [selectedDate]);
+
     const moveDate = (days) => {
         const date = new Date(selectedDate);
         date.setDate(date.getDate() + days);
         setSelectedDate(date.toISOString().split('T')[0]);
     };
 
-    // 금액 포맷
     const formatCurrency = (num) => {
         if (!num) return '0';
         return num.toLocaleString();
@@ -172,7 +137,6 @@ function DailyFundReport() {
         return num.toLocaleString();
     };
 
-    // 입력용 금액 포맷 (3자리 콤마)
     const formatInputCurrency = (value) => {
         if (!value && value !== 0) return '';
         const num = String(value).replace(/[^\d]/g, '');
@@ -180,182 +144,146 @@ function DailyFundReport() {
         return Number(num).toLocaleString();
     };
 
-    // 입력값에서 숫자만 추출
-    const parseInputCurrency = (value) => {
-        return String(value).replace(/[^\d]/g, '');
-    };
+    const parseInputCurrency = (value) => String(value).replace(/[^\d]/g, '');
 
-    // 요일 계산
     const getDayOfWeek = (dateStr) => {
         const days = ['일', '월', '화', '수', '목', '금', '토'];
         return days[new Date(dateStr).getDay()];
     };
 
-    // 날짜 포맷
     const formatDate = (dateStr) => {
         const date = new Date(dateStr);
         return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 (${getDayOfWeek(dateStr)})`;
     };
 
-    // 총 입금액
-    const totalIncome = currentData.income.reduce((sum, item) => sum + item.amount, 0);
+    const totalIncome = incomeList.reduce((sum, item) => sum + item.amount, 0);
+    const totalExpense = expenseList.reduce((sum, item) => sum + item.amount, 0);
+    const totalCurrentBalance = previousBalance + totalIncome - totalExpense;
 
-    // 총 출금액
-    const totalExpense = currentData.expense.reduce((sum, item) => sum + item.amount, 0);
-
-    // 전일 잔액 합계
-    const totalPreviousBalance = Object.values(currentData.previousBalance).reduce((sum, val) => sum + val, 0);
-
-    // 금일 잔액
-    const totalCurrentBalance = totalPreviousBalance + totalIncome - totalExpense;
-
-    // 계좌별 금일 잔액 계산
-    const getAccountCurrentBalance = (accountId) => {
-        const prevBalance = currentData.previousBalance[accountId] || 0;
-        const accountIncome = currentData.income
-            .filter(item => item.accountId === accountId)
-            .reduce((sum, item) => sum + item.amount, 0);
-        const accountExpense = currentData.expense
-            .filter(item => item.accountId === accountId)
-            .reduce((sum, item) => sum + item.amount, 0);
-        return prevBalance + accountIncome - accountExpense;
-    };
-
-    // 계좌별 입금액
-    const getAccountIncome = (accountId) => {
-        return currentData.income
-            .filter(item => item.accountId === accountId)
-            .reduce((sum, item) => sum + item.amount, 0);
-    };
-
-    // 계좌별 출금액
-    const getAccountExpense = (accountId) => {
-        return currentData.expense
-            .filter(item => item.accountId === accountId)
-            .reduce((sum, item) => sum + item.amount, 0);
-    };
-
-    // 카테고리별 집계
     const getCategoryTotals = (items) => {
         const totals = {};
         items.forEach(item => {
-            if (!totals[item.category]) {
-                totals[item.category] = 0;
-            }
+            if (!totals[item.category]) totals[item.category] = 0;
             totals[item.category] += item.amount;
         });
         return Object.entries(totals).sort((a, b) => b[1] - a[1]);
     };
 
-    // 거래 추가
-    const handleAddTransaction = () => {
+    const handleAddTransaction = async () => {
         if (!newTransaction.description || !newTransaction.amount) return;
-
-        const transaction = {
-            id: Date.now(),
-            time: newTransaction.time || new Date().toTimeString().slice(0, 5),
-            accountId: parseInt(newTransaction.accountId),
-            description: newTransaction.description,
-            amount: parseInt(newTransaction.amount),
-            category: newTransaction.category,
-            note: newTransaction.note
-        };
-
-        setDailyData(prev => ({
-            ...prev,
-            [selectedDate]: {
-                ...currentData,
-                [addType]: [...currentData[addType], transaction]
+        setSaving(true);
+        try {
+            const res = await fetch('/finance/daily-fund/store', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
+                body: JSON.stringify({
+                    transactionDate: selectedDate,
+                    type: addType,
+                    time: newTransaction.time || new Date().toTimeString().slice(0, 5),
+                    accountName: newTransaction.accountName,
+                    description: newTransaction.description,
+                    amount: parseInt(newTransaction.amount) || 0,
+                    category: newTransaction.category,
+                    note: newTransaction.note,
+                }),
+            });
+            if (res.ok) {
+                setNewTransaction({ time: '', accountName: '', description: '', amount: '', category: '', note: '' });
+                setShowAddModal(false);
+                fetchData(selectedDate);
+            } else {
+                const data = await res.json();
+                alert(data.message || '등록에 실패했습니다.');
             }
-        }));
-
-        setNewTransaction({
-            time: '',
-            accountId: 1,
-            description: '',
-            amount: '',
-            category: '',
-            note: ''
-        });
-        setShowAddModal(false);
+        } catch (err) {
+            alert('등록에 실패했습니다.');
+        } finally {
+            setSaving(false);
+        }
     };
 
-    // 거래 삭제
-    const handleDeleteTransaction = (type, id) => {
+    const handleDeleteTransaction = async (type, id) => {
         if (!confirm('정말 삭제하시겠습니까?')) return;
-
-        setDailyData(prev => ({
-            ...prev,
-            [selectedDate]: {
-                ...currentData,
-                [type]: currentData[type].filter(item => item.id !== id)
-            }
-        }));
+        try {
+            const res = await fetch(`/finance/daily-fund/${id}`, {
+                method: 'DELETE',
+                headers: { 'X-CSRF-TOKEN': csrfToken },
+            });
+            if (res.ok) fetchData(selectedDate);
+        } catch (err) {
+            alert('삭제에 실패했습니다.');
+        }
     };
 
-    // 거래 수정 모달 열기
     const handleEditTransaction = (type, item) => {
         setEditType(type);
-        setEditingItem({ ...item });
+        setEditingItem({ ...item, amount: item.amount.toString() });
         setShowEditModal(true);
     };
 
-    // 거래 수정 저장
-    const handleSaveEdit = () => {
+    const handleSaveEdit = async () => {
         if (!editingItem.description || !editingItem.amount) return;
-
-        setDailyData(prev => ({
-            ...prev,
-            [selectedDate]: {
-                ...currentData,
-                [editType]: currentData[editType].map(item =>
-                    item.id === editingItem.id
-                        ? { ...editingItem, amount: parseInt(editingItem.amount), accountId: parseInt(editingItem.accountId) }
-                        : item
-                )
+        setSaving(true);
+        try {
+            const res = await fetch(`/finance/daily-fund/${editingItem.id}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
+                body: JSON.stringify({
+                    type: editType,
+                    time: editingItem.time,
+                    accountName: editingItem.accountName,
+                    description: editingItem.description,
+                    amount: parseInt(editingItem.amount) || 0,
+                    category: editingItem.category,
+                    note: editingItem.note,
+                }),
+            });
+            if (res.ok) {
+                setShowEditModal(false);
+                setEditingItem(null);
+                fetchData(selectedDate);
+            } else {
+                const data = await res.json();
+                alert(data.message || '수정에 실패했습니다.');
             }
-        }));
-
-        setShowEditModal(false);
-        setEditingItem(null);
+        } catch (err) {
+            alert('수정에 실패했습니다.');
+        } finally {
+            setSaving(false);
+        }
     };
 
-    // 인쇄
-    const handlePrint = () => {
-        window.print();
+    const handleSaveMemo = async () => {
+        try {
+            const res = await fetch('/finance/daily-fund/memo', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
+                body: JSON.stringify({ date: selectedDate, memo, author: author || '재무팀' }),
+            });
+            const data = await res.json();
+            if (data.success) {
+                setUpdatedAt(data.data.updatedAt);
+            }
+        } catch (err) {
+            alert('메모 저장에 실패했습니다.');
+        }
     };
 
-    // Excel 다운로드 (CSV)
+    const handlePrint = () => window.print();
+
     const handleDownload = () => {
         const rows = [
             ['일일자금일보', formatDate(selectedDate)],
             [],
             ['구분', '시간', '계좌', '적요', '금액', '카테고리', '비고'],
-            ...currentData.income.map(item => [
-                '입금',
-                item.time,
-                accounts.find(a => a.id === item.accountId)?.bank || '',
-                item.description,
-                item.amount,
-                item.category,
-                item.note
-            ]),
-            ...currentData.expense.map(item => [
-                '출금',
-                item.time,
-                accounts.find(a => a.id === item.accountId)?.bank || '',
-                item.description,
-                item.amount,
-                item.category,
-                item.note
-            ]),
+            ...incomeList.map(item => ['입금', item.time, item.accountName || '', item.description, item.amount, item.category, item.note]),
+            ...expenseList.map(item => ['출금', item.time, item.accountName || '', item.description, item.amount, item.category, item.note]),
             [],
-            ['전일 잔액', '', '', '', totalPreviousBalance],
+            ['전일 잔액', '', '', '', previousBalance],
             ['금일 입금', '', '', '', totalIncome],
             ['금일 출금', '', '', '', totalExpense],
             ['금일 잔액', '', '', '', totalCurrentBalance]
         ];
-
         const csvContent = rows.map(row => row.join(',')).join('\n');
         const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
         const link = document.createElement('a');
@@ -364,528 +292,203 @@ function DailyFundReport() {
         link.click();
     };
 
-    // 보고 전송
     const handleSendReport = () => {
-        // 실제로는 API 호출
         setReportSent(true);
         setShowSendModal(false);
         setTimeout(() => setReportSent(false), 3000);
     };
 
-    // 은행 색상
-    const getBankColor = (color) => {
-        const colors = {
-            yellow: 'bg-yellow-100 text-yellow-800 border-yellow-300',
-            blue: 'bg-blue-100 text-blue-800 border-blue-300',
-            red: 'bg-red-100 text-red-800 border-red-300',
-            teal: 'bg-teal-100 text-teal-800 border-teal-300'
-        };
-        return colors[color] || 'bg-gray-100 text-gray-800 border-gray-300';
-    };
+    const renderTransactionList = (items, type, colorClass, signPrefix) => (
+        items.length === 0 ? (
+            <p className="text-center text-gray-400 py-8">{type === 'income' ? '입금' : '출금'} 내역이 없습니다</p>
+        ) : (
+            <div className="space-y-3">
+                {items.map(item => (
+                    <div key={item.id} className={`flex items-center justify-between p-3 ${colorClass} rounded-lg border cursor-pointer hover:opacity-80 transition-colors`} onClick={() => handleEditTransaction(type, item)}>
+                        <div className="flex-1">
+                            <div className="flex items-center gap-2 mb-1">
+                                <span className="text-xs text-gray-400">{item.time}</span>
+                                {item.accountName && <span className="px-1.5 py-0.5 rounded text-xs bg-gray-200 text-gray-600">{item.accountName}</span>}
+                                <span className="text-xs text-gray-400">{item.category}</span>
+                            </div>
+                            <p className="text-sm text-gray-900">{item.description}</p>
+                            {item.note && <p className="text-xs text-gray-400 mt-0.5">{item.note}</p>}
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <span className={`text-sm font-semibold ${type === 'income' ? 'text-emerald-600' : 'text-rose-600'}`}>{signPrefix}{formatCurrency(item.amount)}원</span>
+                            <button onClick={(e) => { e.stopPropagation(); handleEditTransaction(type, item); }} className="p-1.5 text-gray-400 hover:text-blue-500 hover:bg-blue-50 rounded transition-colors no-print"><Edit className="w-4 h-4" /></button>
+                            <button onClick={(e) => { e.stopPropagation(); handleDeleteTransaction(type, item.id); }} className="p-1.5 text-gray-400 hover:text-rose-500 hover:bg-rose-50 rounded transition-colors no-print"><Trash2 className="w-4 h-4" /></button>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        )
+    );
 
     return (
         <div className="bg-gray-50">
-            {/* 헤더 */}
             <header className="bg-white border-b border-gray-200 rounded-t-xl mb-6 no-print">
                 <div className="px-6 py-4">
                     <div className="flex items-center justify-between">
                         <div className="flex items-center gap-4">
-                            <div className="p-2 bg-emerald-100 rounded-xl">
-                                <FileSpreadsheet className="w-6 h-6 text-emerald-600" />
-                            </div>
-                            <div>
-                                <h1 className="text-xl font-bold text-gray-900">일일자금일보</h1>
-                                <p className="text-sm text-gray-500">Daily Fund Report</p>
-                            </div>
+                            <div className="p-2 bg-emerald-100 rounded-xl"><FileSpreadsheet className="w-6 h-6 text-emerald-600" /></div>
+                            <div><h1 className="text-xl font-bold text-gray-900">일일자금일보</h1><p className="text-sm text-gray-500">Daily Fund Report</p></div>
                         </div>
                         <div className="flex items-center gap-3">
-                            <button
-                                onClick={handleDownload}
-                                className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
-                            >
-                                <Download className="w-4 h-4" />
-                                <span className="text-sm">Excel</span>
-                            </button>
-                            <button
-                                onClick={handlePrint}
-                                className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
-                            >
-                                <Printer className="w-4 h-4" />
-                                <span className="text-sm">인쇄</span>
-                            </button>
-                            <button
-                                onClick={() => setShowSendModal(true)}
-                                className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors"
-                            >
-                                <Send className="w-4 h-4" />
-                                <span className="text-sm">보고</span>
-                            </button>
+                            <button onClick={handleDownload} className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg"><Download className="w-4 h-4" /><span className="text-sm">Excel</span></button>
+                            <button onClick={handlePrint} className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg"><Printer className="w-4 h-4" /><span className="text-sm">인쇄</span></button>
+                            <button onClick={() => setShowSendModal(true)} className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg"><Send className="w-4 h-4" /><span className="text-sm">보고</span></button>
                         </div>
                     </div>
                 </div>
             </header>
 
-            {/* 보고 완료 알림 */}
             {reportSent && (
                 <div className="fixed top-20 right-6 bg-emerald-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-2 z-50 no-print">
-                    <CheckCircle className="w-5 h-5" />
-                    <span>보고가 전송되었습니다.</span>
+                    <CheckCircle className="w-5 h-5" /><span>보고가 전송되었습니다.</span>
                 </div>
             )}
 
-            {/* 날짜 선택 */}
             <div className="bg-white rounded-xl border border-gray-200 p-4 mb-6 no-print">
                 <div className="flex items-center justify-between">
-                    <button
-                        onClick={() => moveDate(-1)}
-                        className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-                    >
-                        <ChevronLeft className="w-5 h-5 text-gray-600" />
-                    </button>
+                    <button onClick={() => moveDate(-1)} className="p-2 hover:bg-gray-100 rounded-lg"><ChevronLeft className="w-5 h-5 text-gray-600" /></button>
                     <div className="flex items-center gap-3">
                         <Calendar className="w-5 h-5 text-gray-400" />
-                        <input
-                            type="date"
-                            value={selectedDate}
-                            onChange={(e) => setSelectedDate(e.target.value)}
-                            className="text-lg font-semibold text-gray-900 border-0 focus:ring-0 cursor-pointer"
-                        />
+                        <input type="date" value={selectedDate} onChange={(e) => setSelectedDate(e.target.value)} className="text-lg font-semibold text-gray-900 border-0 focus:ring-0 cursor-pointer" />
                         <span className="text-lg text-gray-600">({getDayOfWeek(selectedDate)})</span>
                     </div>
-                    <button
-                        onClick={() => moveDate(1)}
-                        className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-                    >
-                        <ChevronRight className="w-5 h-5 text-gray-600" />
-                    </button>
+                    <button onClick={() => moveDate(1)} className="p-2 hover:bg-gray-100 rounded-lg"><ChevronRight className="w-5 h-5 text-gray-600" /></button>
                 </div>
             </div>
 
-            {/* 인쇄용 헤더 */}
             <div className="hidden print-only mb-8">
                 <h1 className="text-2xl font-bold text-center mb-2">일 일 자 금 일 보</h1>
                 <p className="text-center text-gray-600">{formatDate(selectedDate)}</p>
             </div>
 
-            {/* 요약 카드 */}
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-                <div className="bg-white rounded-xl border border-gray-200 p-6">
-                    <div className="flex items-center justify-between mb-4">
-                        <span className="text-sm text-gray-500">전일 잔액</span>
-                        <div className="p-2 bg-gray-100 rounded-lg">
-                            <Wallet className="w-4 h-4 text-gray-600" />
+            {loading ? (
+                <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
+                    <div className="flex items-center justify-center gap-2 text-gray-400">
+                        <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                        불러오는 중...
+                    </div>
+                </div>
+            ) : (
+                <>
+                    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+                        <div className="bg-white rounded-xl border border-gray-200 p-6">
+                            <div className="flex items-center justify-between mb-4"><span className="text-sm text-gray-500">전일 잔액</span><div className="p-2 bg-gray-100 rounded-lg"><Wallet className="w-4 h-4 text-gray-600" /></div></div>
+                            <p className="text-2xl font-bold text-gray-900">{formatCurrencyShort(previousBalance)}원</p>
+                            <p className="text-xs text-gray-400 mt-1">{formatCurrency(previousBalance)}원</p>
+                        </div>
+                        <div className="bg-white rounded-xl border border-emerald-200 p-6 bg-emerald-50/30">
+                            <div className="flex items-center justify-between mb-4"><span className="text-sm text-emerald-700">금일 입금</span><div className="p-2 bg-emerald-100 rounded-lg"><ArrowUpRight className="w-4 h-4 text-emerald-600" /></div></div>
+                            <p className="text-2xl font-bold text-emerald-600">+{formatCurrencyShort(totalIncome)}원</p>
+                            <p className="text-xs text-emerald-500 mt-1">{formatCurrency(totalIncome)}원</p>
+                        </div>
+                        <div className="bg-white rounded-xl border border-rose-200 p-6 bg-rose-50/30">
+                            <div className="flex items-center justify-between mb-4"><span className="text-sm text-rose-700">금일 출금</span><div className="p-2 bg-rose-100 rounded-lg"><ArrowDownRight className="w-4 h-4 text-rose-600" /></div></div>
+                            <p className="text-2xl font-bold text-rose-600">-{formatCurrencyShort(totalExpense)}원</p>
+                            <p className="text-xs text-rose-500 mt-1">{formatCurrency(totalExpense)}원</p>
+                        </div>
+                        <div className="bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl p-6 text-white">
+                            <div className="flex items-center justify-between mb-4"><span className="text-sm text-blue-100">금일 잔액</span><div className="p-2 bg-white/20 rounded-lg"><Wallet className="w-4 h-4 text-white" /></div></div>
+                            <p className="text-2xl font-bold">{formatCurrencyShort(totalCurrentBalance)}원</p>
+                            <p className="text-xs text-blue-200 mt-1">{formatCurrency(totalCurrentBalance)}원</p>
                         </div>
                     </div>
-                    <p className="text-2xl font-bold text-gray-900">{formatCurrencyShort(totalPreviousBalance)}원</p>
-                    <p className="text-xs text-gray-400 mt-1">{formatCurrency(totalPreviousBalance)}원</p>
-                </div>
-                <div className="bg-white rounded-xl border border-emerald-200 p-6 bg-emerald-50/30">
-                    <div className="flex items-center justify-between mb-4">
-                        <span className="text-sm text-emerald-700">금일 입금</span>
-                        <div className="p-2 bg-emerald-100 rounded-lg">
-                            <ArrowUpRight className="w-4 h-4 text-emerald-600" />
-                        </div>
-                    </div>
-                    <p className="text-2xl font-bold text-emerald-600">+{formatCurrencyShort(totalIncome)}원</p>
-                    <p className="text-xs text-emerald-500 mt-1">{formatCurrency(totalIncome)}원</p>
-                </div>
-                <div className="bg-white rounded-xl border border-rose-200 p-6 bg-rose-50/30">
-                    <div className="flex items-center justify-between mb-4">
-                        <span className="text-sm text-rose-700">금일 출금</span>
-                        <div className="p-2 bg-rose-100 rounded-lg">
-                            <ArrowDownRight className="w-4 h-4 text-rose-600" />
-                        </div>
-                    </div>
-                    <p className="text-2xl font-bold text-rose-600">-{formatCurrencyShort(totalExpense)}원</p>
-                    <p className="text-xs text-rose-500 mt-1">{formatCurrency(totalExpense)}원</p>
-                </div>
-                <div className="bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl p-6 text-white">
-                    <div className="flex items-center justify-between mb-4">
-                        <span className="text-sm text-blue-100">금일 잔액</span>
-                        <div className="p-2 bg-white/20 rounded-lg">
-                            <Wallet className="w-4 h-4 text-white" />
-                        </div>
-                    </div>
-                    <p className="text-2xl font-bold">{formatCurrencyShort(totalCurrentBalance)}원</p>
-                    <p className="text-xs text-blue-200 mt-1">{formatCurrency(totalCurrentBalance)}원</p>
-                </div>
-            </div>
 
-            {/* 계좌별 현황 */}
-            <div className="bg-white rounded-xl border border-gray-200 p-6 mb-6">
-                <h3 className="text-lg font-bold text-gray-900 mb-4">계좌별 현황</h3>
-                <div className="overflow-x-auto">
-                    <table className="w-full">
-                        <thead>
-                            <tr className="border-b border-gray-200">
-                                <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">은행</th>
-                                <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">계좌번호</th>
-                                <th className="text-right py-3 px-4 text-sm font-semibold text-gray-700">전일잔액</th>
-                                <th className="text-right py-3 px-4 text-sm font-semibold text-emerald-700">입금</th>
-                                <th className="text-right py-3 px-4 text-sm font-semibold text-rose-700">출금</th>
-                                <th className="text-right py-3 px-4 text-sm font-semibold text-blue-700">금일잔액</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {accounts.map(account => (
-                                <tr key={account.id} className="border-b border-gray-100 hover:bg-gray-50">
-                                    <td className="py-3 px-4">
-                                        <span className={`px-2 py-1 rounded text-xs font-medium border ${getBankColor(account.color)}`}>
-                                            {account.bank}
-                                        </span>
-                                    </td>
-                                    <td className="py-3 px-4 text-sm text-gray-600 font-mono">{account.accountNumber}</td>
-                                    <td className="py-3 px-4 text-sm text-right text-gray-900">
-                                        {formatCurrency(currentData.previousBalance[account.id] || 0)}원
-                                    </td>
-                                    <td className="py-3 px-4 text-sm text-right text-emerald-600 font-medium">
-                                        {getAccountIncome(account.id) > 0 && '+'}
-                                        {formatCurrency(getAccountIncome(account.id))}원
-                                    </td>
-                                    <td className="py-3 px-4 text-sm text-right text-rose-600 font-medium">
-                                        {getAccountExpense(account.id) > 0 && '-'}
-                                        {formatCurrency(getAccountExpense(account.id))}원
-                                    </td>
-                                    <td className="py-3 px-4 text-sm text-right text-blue-600 font-bold">
-                                        {formatCurrency(getAccountCurrentBalance(account.id))}원
-                                    </td>
-                                </tr>
-                            ))}
-                        </tbody>
-                        <tfoot>
-                            <tr className="bg-gray-50 font-semibold">
-                                <td className="py-3 px-4 text-sm text-gray-700" colSpan="2">합계</td>
-                                <td className="py-3 px-4 text-sm text-right text-gray-900">{formatCurrency(totalPreviousBalance)}원</td>
-                                <td className="py-3 px-4 text-sm text-right text-emerald-600">+{formatCurrency(totalIncome)}원</td>
-                                <td className="py-3 px-4 text-sm text-right text-rose-600">-{formatCurrency(totalExpense)}원</td>
-                                <td className="py-3 px-4 text-sm text-right text-blue-600 font-bold">{formatCurrency(totalCurrentBalance)}원</td>
-                            </tr>
-                        </tfoot>
-                    </table>
-                </div>
-            </div>
-
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-                {/* 입금 내역 */}
-                <div className="bg-white rounded-xl border border-gray-200 p-6">
-                    <div className="flex items-center justify-between mb-4">
-                        <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
-                            <div className="w-3 h-3 bg-emerald-500 rounded-full"></div>
-                            입금 내역
-                        </h3>
-                        <button
-                            onClick={() => { setAddType('income'); setShowAddModal(true); }}
-                            className="flex items-center gap-1 px-3 py-1.5 text-sm text-emerald-600 hover:bg-emerald-50 rounded-lg transition-colors no-print"
-                        >
-                            <Plus className="w-4 h-4" />
-                            추가
-                        </button>
-                    </div>
-                    {currentData.income.length === 0 ? (
-                        <p className="text-center text-gray-400 py-8">입금 내역이 없습니다</p>
-                    ) : (
-                        <div className="space-y-3">
-                            {currentData.income.map(item => (
-                                <div
-                                    key={item.id}
-                                    className="flex items-center justify-between p-3 bg-emerald-50/50 rounded-lg border border-emerald-100 cursor-pointer hover:bg-emerald-100/50 transition-colors"
-                                    onClick={() => handleEditTransaction('income', item)}
-                                >
-                                    <div className="flex-1">
-                                        <div className="flex items-center gap-2 mb-1">
-                                            <span className="text-xs text-gray-400">{item.time}</span>
-                                            <span className={`px-1.5 py-0.5 rounded text-xs ${getBankColor(accounts.find(a => a.id === item.accountId)?.color)}`}>
-                                                {accounts.find(a => a.id === item.accountId)?.bank}
-                                            </span>
-                                            <span className="text-xs text-gray-400">{item.category}</span>
-                                        </div>
-                                        <p className="text-sm text-gray-900">{item.description}</p>
-                                        {item.note && <p className="text-xs text-gray-400 mt-0.5">{item.note}</p>}
-                                    </div>
-                                    <div className="flex items-center gap-2">
-                                        <span className="text-sm font-semibold text-emerald-600">+{formatCurrency(item.amount)}원</span>
-                                        <button
-                                            onClick={(e) => { e.stopPropagation(); handleEditTransaction('income', item); }}
-                                            className="p-1.5 text-gray-400 hover:text-blue-500 hover:bg-blue-50 rounded transition-colors no-print"
-                                            title="수정"
-                                        >
-                                            <Edit className="w-4 h-4" />
-                                        </button>
-                                        <button
-                                            onClick={(e) => { e.stopPropagation(); handleDeleteTransaction('income', item.id); }}
-                                            className="p-1.5 text-gray-400 hover:text-rose-500 hover:bg-rose-50 rounded transition-colors no-print"
-                                            title="삭제"
-                                        >
-                                            <Trash2 className="w-4 h-4" />
-                                        </button>
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+                        <div className="bg-white rounded-xl border border-gray-200 p-6">
+                            <div className="flex items-center justify-between mb-4">
+                                <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2"><div className="w-3 h-3 bg-emerald-500 rounded-full"></div>입금 내역</h3>
+                                <button onClick={() => { setAddType('income'); setShowAddModal(true); }} className="flex items-center gap-1 px-3 py-1.5 text-sm text-emerald-600 hover:bg-emerald-50 rounded-lg no-print"><Plus className="w-4 h-4" />추가</button>
+                            </div>
+                            {renderTransactionList(incomeList, 'income', 'bg-emerald-50/50 border-emerald-100', '+')}
+                            {incomeList.length > 0 && (
+                                <div className="mt-4 pt-4 border-t border-gray-200">
+                                    <p className="text-xs text-gray-500 mb-2">카테고리별 집계</p>
+                                    <div className="flex flex-wrap gap-2">
+                                        {getCategoryTotals(incomeList).map(([cat, amount]) => (
+                                            <span key={cat} className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs">{cat}: {formatCurrencyShort(amount)}원</span>
+                                        ))}
                                     </div>
                                 </div>
-                            ))}
+                            )}
                         </div>
-                    )}
-                    {/* 카테고리별 집계 */}
-                    {currentData.income.length > 0 && (
-                        <div className="mt-4 pt-4 border-t border-gray-200">
-                            <p className="text-xs text-gray-500 mb-2">카테고리별 집계</p>
-                            <div className="flex flex-wrap gap-2">
-                                {getCategoryTotals(currentData.income).map(([cat, amount]) => (
-                                    <span key={cat} className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs">
-                                        {cat}: {formatCurrencyShort(amount)}원
-                                    </span>
-                                ))}
-                            </div>
-                        </div>
-                    )}
-                </div>
 
-                {/* 출금 내역 */}
-                <div className="bg-white rounded-xl border border-gray-200 p-6">
-                    <div className="flex items-center justify-between mb-4">
-                        <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
-                            <div className="w-3 h-3 bg-rose-500 rounded-full"></div>
-                            출금 내역
-                        </h3>
-                        <button
-                            onClick={() => { setAddType('expense'); setShowAddModal(true); }}
-                            className="flex items-center gap-1 px-3 py-1.5 text-sm text-rose-600 hover:bg-rose-50 rounded-lg transition-colors no-print"
-                        >
-                            <Plus className="w-4 h-4" />
-                            추가
-                        </button>
-                    </div>
-                    {currentData.expense.length === 0 ? (
-                        <p className="text-center text-gray-400 py-8">출금 내역이 없습니다</p>
-                    ) : (
-                        <div className="space-y-3">
-                            {currentData.expense.map(item => (
-                                <div
-                                    key={item.id}
-                                    className="flex items-center justify-between p-3 bg-rose-50/50 rounded-lg border border-rose-100 cursor-pointer hover:bg-rose-100/50 transition-colors"
-                                    onClick={() => handleEditTransaction('expense', item)}
-                                >
-                                    <div className="flex-1">
-                                        <div className="flex items-center gap-2 mb-1">
-                                            <span className="text-xs text-gray-400">{item.time}</span>
-                                            <span className={`px-1.5 py-0.5 rounded text-xs ${getBankColor(accounts.find(a => a.id === item.accountId)?.color)}`}>
-                                                {accounts.find(a => a.id === item.accountId)?.bank}
-                                            </span>
-                                            <span className="text-xs text-gray-400">{item.category}</span>
-                                        </div>
-                                        <p className="text-sm text-gray-900">{item.description}</p>
-                                        {item.note && <p className="text-xs text-gray-400 mt-0.5">{item.note}</p>}
-                                    </div>
-                                    <div className="flex items-center gap-2">
-                                        <span className="text-sm font-semibold text-rose-600">-{formatCurrency(item.amount)}원</span>
-                                        <button
-                                            onClick={(e) => { e.stopPropagation(); handleEditTransaction('expense', item); }}
-                                            className="p-1.5 text-gray-400 hover:text-blue-500 hover:bg-blue-50 rounded transition-colors no-print"
-                                            title="수정"
-                                        >
-                                            <Edit className="w-4 h-4" />
-                                        </button>
-                                        <button
-                                            onClick={(e) => { e.stopPropagation(); handleDeleteTransaction('expense', item.id); }}
-                                            className="p-1.5 text-gray-400 hover:text-rose-500 hover:bg-rose-50 rounded transition-colors no-print"
-                                            title="삭제"
-                                        >
-                                            <Trash2 className="w-4 h-4" />
-                                        </button>
+                        <div className="bg-white rounded-xl border border-gray-200 p-6">
+                            <div className="flex items-center justify-between mb-4">
+                                <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2"><div className="w-3 h-3 bg-rose-500 rounded-full"></div>출금 내역</h3>
+                                <button onClick={() => { setAddType('expense'); setShowAddModal(true); }} className="flex items-center gap-1 px-3 py-1.5 text-sm text-rose-600 hover:bg-rose-50 rounded-lg no-print"><Plus className="w-4 h-4" />추가</button>
+                            </div>
+                            {renderTransactionList(expenseList, 'expense', 'bg-rose-50/50 border-rose-100', '-')}
+                            {expenseList.length > 0 && (
+                                <div className="mt-4 pt-4 border-t border-gray-200">
+                                    <p className="text-xs text-gray-500 mb-2">카테고리별 집계</p>
+                                    <div className="flex flex-wrap gap-2">
+                                        {getCategoryTotals(expenseList).map(([cat, amount]) => (
+                                            <span key={cat} className="px-2 py-1 bg-rose-100 text-rose-700 rounded text-xs">{cat}: {formatCurrencyShort(amount)}원</span>
+                                        ))}
                                     </div>
                                 </div>
-                            ))}
+                            )}
                         </div>
-                    )}
-                    {/* 카테고리별 집계 */}
-                    {currentData.expense.length > 0 && (
-                        <div className="mt-4 pt-4 border-t border-gray-200">
-                            <p className="text-xs text-gray-500 mb-2">카테고리별 집계</p>
-                            <div className="flex flex-wrap gap-2">
-                                {getCategoryTotals(currentData.expense).map(([cat, amount]) => (
-                                    <span key={cat} className="px-2 py-1 bg-rose-100 text-rose-700 rounded text-xs">
-                                        {cat}: {formatCurrencyShort(amount)}원
-                                    </span>
-                                ))}
+                    </div>
+
+                    <div className="bg-white rounded-xl border border-gray-200 p-6">
+                        <h3 className="text-lg font-bold text-gray-900 mb-4">특이사항 / 메모</h3>
+                        <textarea value={memo} onChange={(e) => setMemo(e.target.value)} placeholder="특이사항이나 메모를 입력하세요..." className="w-full h-24 px-4 py-3 border border-gray-200 rounded-lg resize-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 no-print" />
+                        {memo && <div className="hidden print-only mt-2 p-3 bg-gray-50 rounded-lg"><p className="text-sm text-gray-700">{memo}</p></div>}
+                        <div className="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 text-sm text-gray-500">
+                            <div>
+                                {author && <p>작성자: {author}</p>}
+                                {updatedAt && <p>작성일시: {updatedAt}</p>}
                             </div>
+                            <button onClick={handleSaveMemo} className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg no-print"><Save className="w-4 h-4" />저장</button>
                         </div>
-                    )}
-                </div>
-            </div>
-
-            {/* 메모 및 작성 정보 */}
-            <div className="bg-white rounded-xl border border-gray-200 p-6">
-                <h3 className="text-lg font-bold text-gray-900 mb-4">특이사항 / 메모</h3>
-                <textarea
-                    value={currentData.memo}
-                    onChange={(e) => setDailyData(prev => ({
-                        ...prev,
-                        [selectedDate]: { ...currentData, memo: e.target.value }
-                    }))}
-                    placeholder="특이사항이나 메모를 입력하세요..."
-                    className="w-full h-24 px-4 py-3 border border-gray-200 rounded-lg resize-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 no-print"
-                />
-                {currentData.memo && (
-                    <div className="hidden print-only mt-2 p-3 bg-gray-50 rounded-lg">
-                        <p className="text-sm text-gray-700">{currentData.memo}</p>
                     </div>
-                )}
-                <div className="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 text-sm text-gray-500">
-                    <div>
-                        {currentData.author && <p>작성자: {currentData.author}</p>}
-                        {currentData.createdAt && <p>작성일시: {currentData.createdAt}</p>}
-                    </div>
-                    <button
-                        onClick={() => {
-                            const now = new Date();
-                            setDailyData(prev => ({
-                                ...prev,
-                                [selectedDate]: {
-                                    ...currentData,
-                                    author: '재무팀 김재무',
-                                    createdAt: `${now.toISOString().split('T')[0]} ${now.toTimeString().slice(0, 5)}`
-                                }
-                            }));
-                        }}
-                        className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors no-print"
-                    >
-                        <Save className="w-4 h-4" />
-                        저장
-                    </button>
-                </div>
-            </div>
+                </>
+            )}
 
-            {/* 거래 추가 모달 */}
             {showAddModal && (
                 <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 no-print">
                     <div className="bg-white rounded-xl p-6 w-full max-w-md mx-4">
                         <div className="flex items-center justify-between mb-6">
-                            <h3 className="text-lg font-bold text-gray-900">
-                                {addType === 'income' ? '입금 추가' : '출금 추가'}
-                            </h3>
-                            <button
-                                onClick={() => setShowAddModal(false)}
-                                className="p-1 hover:bg-gray-100 rounded-lg"
-                            >
-                                <X className="w-5 h-5 text-gray-500" />
-                            </button>
+                            <h3 className="text-lg font-bold text-gray-900">{addType === 'income' ? '입금 추가' : '출금 추가'}</h3>
+                            <button onClick={() => setShowAddModal(false)} className="p-1 hover:bg-gray-100 rounded-lg"><X className="w-5 h-5 text-gray-500" /></button>
                         </div>
                         <div className="space-y-4">
                             <div className="grid grid-cols-2 gap-4">
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700 mb-1">시간</label>
-                                    <input
-                                        type="time"
-                                        value={newTransaction.time}
-                                        onChange={(e) => setNewTransaction(prev => ({ ...prev, time: e.target.value }))}
-                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500"
-                                    />
-                                </div>
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700 mb-1">계좌</label>
-                                    <select
-                                        value={newTransaction.accountId}
-                                        onChange={(e) => setNewTransaction(prev => ({ ...prev, accountId: e.target.value }))}
-                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500"
-                                    >
-                                        {accounts.map(account => (
-                                            <option key={account.id} value={account.id}>{account.bank}</option>
-                                        ))}
-                                    </select>
-                                </div>
-                            </div>
-                            <div>
-                                <label className="block text-sm font-medium text-gray-700 mb-1">적요 *</label>
-                                <input
-                                    type="text"
-                                    value={newTransaction.description}
-                                    onChange={(e) => setNewTransaction(prev => ({ ...prev, description: e.target.value }))}
-                                    placeholder="거래 내용을 입력하세요"
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500"
-                                />
+                                <div><label className="block text-sm font-medium text-gray-700 mb-1">시간</label><input type="time" value={newTransaction.time} onChange={(e) => setNewTransaction(prev => ({ ...prev, time: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
+                                <div><label className="block text-sm font-medium text-gray-700 mb-1">계좌/은행</label><input type="text" value={newTransaction.accountName} onChange={(e) => setNewTransaction(prev => ({ ...prev, accountName: e.target.value }))} placeholder="국민은행" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
                             </div>
+                            <div><label className="block text-sm font-medium text-gray-700 mb-1">적요 *</label><input type="text" value={newTransaction.description} onChange={(e) => setNewTransaction(prev => ({ ...prev, description: e.target.value }))} placeholder="거래 내용을 입력하세요" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
                             <div className="grid grid-cols-2 gap-4">
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700 mb-1">금액 *</label>
-                                    <input
-                                        type="text"
-                                        value={formatInputCurrency(newTransaction.amount)}
-                                        onChange={(e) => setNewTransaction(prev => ({ ...prev, amount: parseInputCurrency(e.target.value) }))}
-                                        placeholder="0"
-                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 text-right"
-                                    />
-                                </div>
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700 mb-1">카테고리</label>
-                                    <select
-                                        value={newTransaction.category}
-                                        onChange={(e) => setNewTransaction(prev => ({ ...prev, category: e.target.value }))}
-                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500"
-                                    >
+                                <div><label className="block text-sm font-medium text-gray-700 mb-1">금액 *</label><input type="text" value={formatInputCurrency(newTransaction.amount)} onChange={(e) => setNewTransaction(prev => ({ ...prev, amount: parseInputCurrency(e.target.value) }))} placeholder="0" className="w-full px-3 py-2 border border-gray-300 rounded-lg text-right" /></div>
+                                <div><label className="block text-sm font-medium text-gray-700 mb-1">카테고리</label>
+                                    <select value={newTransaction.category} onChange={(e) => setNewTransaction(prev => ({ ...prev, category: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg">
                                         <option value="">선택</option>
-                                        {addType === 'income' ? (
-                                            <>
-                                                <option value="개발비">개발비</option>
-                                                <option value="구독료">구독료</option>
-                                                <option value="용역비">용역비</option>
-                                                <option value="기타수입">기타수입</option>
-                                            </>
-                                        ) : (
-                                            <>
-                                                <option value="인건비">인건비</option>
-                                                <option value="운영비">운영비</option>
-                                                <option value="외주비">외주비</option>
-                                                <option value="임대료">임대료</option>
-                                                <option value="소모품비">소모품비</option>
-                                                <option value="기타지출">기타지출</option>
-                                            </>
-                                        )}
+                                        {addType === 'income' ? (<><option value="개발비">개발비</option><option value="구독료">구독료</option><option value="용역비">용역비</option><option value="기타수입">기타수입</option></>) : (<><option value="인건비">인건비</option><option value="운영비">운영비</option><option value="외주비">외주비</option><option value="임대료">임대료</option><option value="소모품비">소모품비</option><option value="기타지출">기타지출</option></>)}
                                     </select>
                                 </div>
                             </div>
-                            <div>
-                                <label className="block text-sm font-medium text-gray-700 mb-1">비고</label>
-                                <input
-                                    type="text"
-                                    value={newTransaction.note}
-                                    onChange={(e) => setNewTransaction(prev => ({ ...prev, note: e.target.value }))}
-                                    placeholder="추가 메모"
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500"
-                                />
-                            </div>
+                            <div><label className="block text-sm font-medium text-gray-700 mb-1">비고</label><input type="text" value={newTransaction.note} onChange={(e) => setNewTransaction(prev => ({ ...prev, note: e.target.value }))} placeholder="추가 메모" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
                         </div>
                         <div className="flex gap-3 mt-6">
-                            <button
-                                onClick={() => setShowAddModal(false)}
-                                className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
-                            >
-                                취소
-                            </button>
-                            <button
-                                onClick={handleAddTransaction}
-                                className={`flex-1 px-4 py-2 text-white rounded-lg ${
-                                    addType === 'income'
-                                        ? 'bg-emerald-600 hover:bg-emerald-700'
-                                        : 'bg-rose-600 hover:bg-rose-700'
-                                }`}
-                            >
-                                추가
-                            </button>
+                            <button onClick={() => setShowAddModal(false)} className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">취소</button>
+                            <button onClick={handleAddTransaction} disabled={saving} className={`flex-1 px-4 py-2 text-white rounded-lg disabled:opacity-50 ${addType === 'income' ? 'bg-emerald-600 hover:bg-emerald-700' : 'bg-rose-600 hover:bg-rose-700'}`}>{saving ? '저장 중...' : '추가'}</button>
                         </div>
                     </div>
                 </div>
             )}
 
-            {/* 보고 모달 */}
             {showSendModal && (
                 <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 no-print">
                     <div className="bg-white rounded-xl p-6 w-full max-w-md mx-4">
                         <div className="flex items-center justify-between mb-6">
                             <h3 className="text-lg font-bold text-gray-900">일일자금일보 보고</h3>
-                            <button
-                                onClick={() => setShowSendModal(false)}
-                                className="p-1 hover:bg-gray-100 rounded-lg"
-                            >
-                                <X className="w-5 h-5 text-gray-500" />
-                            </button>
+                            <button onClick={() => setShowSendModal(false)} className="p-1 hover:bg-gray-100 rounded-lg"><X className="w-5 h-5 text-gray-500" /></button>
                         </div>
                         <div className="bg-gray-50 rounded-lg p-4 mb-6">
                             <p className="text-sm text-gray-600 mb-2">보고 대상: <span className="font-medium text-gray-900">대표이사</span></p>
@@ -895,146 +498,41 @@ className="p-1 hover:bg-gray-100 rounded-lg"
                             </div>
                         </div>
                         <div className="flex gap-3">
-                            <button
-                                onClick={() => setShowSendModal(false)}
-                                className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
-                            >
-                                취소
-                            </button>
-                            <button
-                                onClick={handleSendReport}
-                                className="flex-1 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg flex items-center justify-center gap-2"
-                            >
-                                <Send className="w-4 h-4" />
-                                보고 전송
-                            </button>
+                            <button onClick={() => setShowSendModal(false)} className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">취소</button>
+                            <button onClick={handleSendReport} className="flex-1 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg flex items-center justify-center gap-2"><Send className="w-4 h-4" />보고 전송</button>
                         </div>
                     </div>
                 </div>
             )}
 
-            {/* 수정 모달 */}
             {showEditModal && editingItem && (
                 <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 no-print">
                     <div className="bg-white rounded-xl p-6 w-full max-w-md mx-4">
                         <div className="flex items-center justify-between mb-6">
-                            <h3 className="text-lg font-bold text-gray-900">
-                                {editType === 'income' ? '입금 수정' : '출금 수정'}
-                            </h3>
-                            <button
-                                onClick={() => { setShowEditModal(false); setEditingItem(null); }}
-                                className="p-1 hover:bg-gray-100 rounded-lg"
-                            >
-                                <X className="w-5 h-5 text-gray-500" />
-                            </button>
+                            <h3 className="text-lg font-bold text-gray-900">{editType === 'income' ? '입금 수정' : '출금 수정'}</h3>
+                            <button onClick={() => { setShowEditModal(false); setEditingItem(null); }} className="p-1 hover:bg-gray-100 rounded-lg"><X className="w-5 h-5 text-gray-500" /></button>
                         </div>
                         <div className="space-y-4">
                             <div className="grid grid-cols-2 gap-4">
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700 mb-1">시간</label>
-                                    <input
-                                        type="time"
-                                        value={editingItem.time}
-                                        onChange={(e) => setEditingItem(prev => ({ ...prev, time: e.target.value }))}
-                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
-                                    />
-                                </div>
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700 mb-1">계좌</label>
-                                    <select
-                                        value={editingItem.accountId}
-                                        onChange={(e) => setEditingItem(prev => ({ ...prev, accountId: e.target.value }))}
-                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
-                                    >
-                                        {accounts.map(account => (
-                                            <option key={account.id} value={account.id}>{account.bank}</option>
-                                        ))}
-                                    </select>
-                                </div>
-                            </div>
-                            <div>
-                                <label className="block text-sm font-medium text-gray-700 mb-1">적요 *</label>
-                                <input
-                                    type="text"
-                                    value={editingItem.description}
-                                    onChange={(e) => setEditingItem(prev => ({ ...prev, description: e.target.value }))}
-                                    placeholder="거래 내용을 입력하세요"
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
-                                />
+                                <div><label className="block text-sm font-medium text-gray-700 mb-1">시간</label><input type="time" value={editingItem.time || ''} onChange={(e) => setEditingItem(prev => ({ ...prev, time: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
+                                <div><label className="block text-sm font-medium text-gray-700 mb-1">계좌/은행</label><input type="text" value={editingItem.accountName || ''} onChange={(e) => setEditingItem(prev => ({ ...prev, accountName: e.target.value }))} placeholder="국민은행" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
                             </div>
+                            <div><label className="block text-sm font-medium text-gray-700 mb-1">적요 *</label><input type="text" value={editingItem.description} onChange={(e) => setEditingItem(prev => ({ ...prev, description: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
                             <div className="grid grid-cols-2 gap-4">
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700 mb-1">금액 *</label>
-                                    <input
-                                        type="text"
-                                        value={formatInputCurrency(editingItem.amount)}
-                                        onChange={(e) => setEditingItem(prev => ({ ...prev, amount: parseInputCurrency(e.target.value) }))}
-                                        placeholder="0"
-                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-right"
-                                    />
-                                </div>
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700 mb-1">카테고리</label>
-                                    <select
-                                        value={editingItem.category}
-                                        onChange={(e) => setEditingItem(prev => ({ ...prev, category: e.target.value }))}
-                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
-                                    >
+                                <div><label className="block text-sm font-medium text-gray-700 mb-1">금액 *</label><input type="text" value={formatInputCurrency(editingItem.amount)} onChange={(e) => setEditingItem(prev => ({ ...prev, amount: parseInputCurrency(e.target.value) }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-right" /></div>
+                                <div><label className="block text-sm font-medium text-gray-700 mb-1">카테고리</label>
+                                    <select value={editingItem.category || ''} onChange={(e) => setEditingItem(prev => ({ ...prev, category: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg">
                                         <option value="">선택</option>
-                                        {editType === 'income' ? (
-                                            <>
-                                                <option value="개발비">개발비</option>
-                                                <option value="구독료">구독료</option>
-                                                <option value="용역비">용역비</option>
-                                                <option value="기타수입">기타수입</option>
-                                            </>
-                                        ) : (
-                                            <>
-                                                <option value="인건비">인건비</option>
-                                                <option value="운영비">운영비</option>
-                                                <option value="외주비">외주비</option>
-                                                <option value="임대료">임대료</option>
-                                                <option value="소모품비">소모품비</option>
-                                                <option value="기타지출">기타지출</option>
-                                            </>
-                                        )}
+                                        {editType === 'income' ? (<><option value="개발비">개발비</option><option value="구독료">구독료</option><option value="용역비">용역비</option><option value="기타수입">기타수입</option></>) : (<><option value="인건비">인건비</option><option value="운영비">운영비</option><option value="외주비">외주비</option><option value="임대료">임대료</option><option value="소모품비">소모품비</option><option value="기타지출">기타지출</option></>)}
                                     </select>
                                 </div>
                             </div>
-                            <div>
-                                <label className="block text-sm font-medium text-gray-700 mb-1">비고</label>
-                                <input
-                                    type="text"
-                                    value={editingItem.note || ''}
-                                    onChange={(e) => setEditingItem(prev => ({ ...prev, note: e.target.value }))}
-                                    placeholder="추가 메모"
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
-                                />
-                            </div>
+                            <div><label className="block text-sm font-medium text-gray-700 mb-1">비고</label><input type="text" value={editingItem.note || ''} onChange={(e) => setEditingItem(prev => ({ ...prev, note: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
                         </div>
                         <div className="flex gap-3 mt-6">
-                            <button
-                                onClick={() => {
-                                    setShowEditModal(false);
-                                    setEditingItem(null);
-                                    handleDeleteTransaction(editType, editingItem.id);
-                                }}
-                                className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center gap-2"
-                            >
-                                <span>🗑️</span> 삭제
-                            </button>
-                            <button
-                                onClick={() => { setShowEditModal(false); setEditingItem(null); }}
-                                className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 flex items-center justify-center gap-2"
-                            >
-                                <span>✕</span> 취소
-                            </button>
-                            <button
-                                onClick={handleSaveEdit}
-                                className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center justify-center gap-2"
-                            >
-                                <span>✓</span> 저장
-                            </button>
+                            <button onClick={() => { setShowEditModal(false); setEditingItem(null); handleDeleteTransaction(editType, editingItem.id); }} className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg">삭제</button>
+                            <button onClick={() => { setShowEditModal(false); setEditingItem(null); }} className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">취소</button>
+                            <button onClick={handleSaveEdit} disabled={saving} className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg disabled:opacity-50">{saving ? '저장 중...' : '저장'}</button>
                         </div>
                     </div>
                 </div>
@@ -1043,10 +541,7 @@ className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg
     );
 }
 
-// React 앱 마운트
 const rootElement = document.getElementById('daily-fund-root');
-if (rootElement) {
-    ReactDOM.createRoot(rootElement).render(<DailyFundReport />);
-}
+if (rootElement) { ReactDOM.createRoot(rootElement).render(<DailyFundReport />); }
 </script>
 @endpush
diff --git a/routes/web.php b/routes/web.php
index 0002e58b..1e02fe30 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -722,6 +722,15 @@
         return view('finance.daily-fund');
     })->name('daily-fund');
 
+    // 일일자금일보 API
+    Route::prefix('daily-fund')->name('daily-fund.')->group(function () {
+        Route::get('/list', [\App\Http\Controllers\Finance\DailyFundController::class, 'index'])->name('list');
+        Route::post('/store', [\App\Http\Controllers\Finance\DailyFundController::class, 'store'])->name('store');
+        Route::put('/{id}', [\App\Http\Controllers\Finance\DailyFundController::class, 'update'])->name('update');
+        Route::delete('/{id}', [\App\Http\Controllers\Finance\DailyFundController::class, 'destroy'])->name('destroy');
+        Route::post('/memo', [\App\Http\Controllers\Finance\DailyFundController::class, 'saveMemo'])->name('memo');
+    });
+
     // 카드관리
     Route::get('/corporate-cards', function () {
         if (request()->header('HX-Request')) {
@@ -748,6 +757,14 @@
         return view('finance.card-transactions');
     })->name('card-transactions');
 
+    // 법인카드 거래내역 API
+    Route::prefix('card-transactions')->name('card-transactions.')->group(function () {
+        Route::get('/list', [\App\Http\Controllers\Finance\CardTransactionController::class, 'index'])->name('list');
+        Route::post('/store', [\App\Http\Controllers\Finance\CardTransactionController::class, 'store'])->name('store');
+        Route::put('/{id}', [\App\Http\Controllers\Finance\CardTransactionController::class, 'update'])->name('update');
+        Route::delete('/{id}', [\App\Http\Controllers\Finance\CardTransactionController::class, 'destroy'])->name('destroy');
+    });
+
     // 수입/지출
     Route::get('/income', function () {
         if (request()->header('HX-Request')) {