From 8749ca359f1e7373fb08bee81b7aafe5533f9037 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: Tue, 3 Feb 2026 21:31:37 +0900
Subject: [PATCH] =?UTF-8?q?feat:=EC=9E=90=EA=B8=88=EA=B3=84=ED=9A=8D?=
 =?UTF-8?q?=EC=9D=BC=EC=A0=95=20=EB=8B=AC=EB=A0=A5=20=ED=95=AD=EB=AA=A9=20?=
 =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EB=AA=A8=EB=8B=AC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 일정 클릭 시 페이지 이동 대신 모달창에서 편집
- 일정 추가 버튼도 모달창으로 변경
- 모달에서 등록/수정/삭제 모두 가능
- ESC 키로 모달 닫기 지원

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../finance/fund-schedules/index.blade.php    | 329 +++++++++++++++++-
 .../partials/calendar.blade.php               |  16 +-
 2 files changed, 335 insertions(+), 10 deletions(-)

diff --git a/resources/views/finance/fund-schedules/index.blade.php b/resources/views/finance/fund-schedules/index.blade.php
index 5ad900f3..3029f30f 100644
--- a/resources/views/finance/fund-schedules/index.blade.php
+++ b/resources/views/finance/fund-schedules/index.blade.php
@@ -11,13 +11,13 @@
             <p class="text-sm text-gray-500 mt-1">{{ $year }}년 {{ $month }}월 현재</p>
         </div>
         <div class="flex flex-wrap items-center gap-2">
-            <a href="{{ route('finance.fund-schedules.create') }}"
+            <button type="button" onclick="openCreateModal()"
                class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors">
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                 </svg>
                 일정 등록
-            </a>
+            </button>
         </div>
     </div>
 
@@ -143,4 +143,329 @@ class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
         </div>
     </div>
 </div>
+
+{{-- 일정 편집/등록 모달 --}}
+<div id="scheduleModal" class="fixed inset-0 z-50 hidden">
+    <div class="fixed inset-0 bg-black/50" onclick="closeScheduleModal()"></div>
+    <div class="fixed inset-0 flex items-center justify-center p-4">
+        <div class="bg-white rounded-xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto relative">
+            {{-- 모달 헤더 --}}
+            <div class="sticky top-0 bg-white px-6 py-4 border-b flex items-center justify-between z-10">
+                <h3 id="modalTitle" class="text-lg font-bold text-gray-800">일정 등록</h3>
+                <button type="button" onclick="closeScheduleModal()" class="text-gray-400 hover:text-gray-600">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+
+            {{-- 모달 바디 --}}
+            <div class="p-6">
+                <form id="modalScheduleForm" class="space-y-5">
+                    <input type="hidden" name="id" id="modal_id">
+
+                    {{-- 메시지 영역 --}}
+                    <div id="modal-form-message"></div>
+
+                    {{-- 일정 유형 --}}
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">
+                            일정 유형 <span class="text-red-500">*</span>
+                        </label>
+                        <div class="grid grid-cols-2 gap-3">
+                            <label class="relative flex cursor-pointer rounded-lg border p-3 border-green-300 bg-green-50 has-[:checked]:border-green-500 has-[:checked]:ring-2 has-[:checked]:ring-green-500">
+                                <input type="radio" name="schedule_type" value="income" class="sr-only">
+                                <span class="flex flex-1 items-center justify-center">
+                                    <span class="text-sm font-medium text-green-900">입금</span>
+                                </span>
+                                <svg class="h-5 w-5 text-green-600 hidden [input:checked~&]:block absolute right-2" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+                                </svg>
+                            </label>
+                            <label class="relative flex cursor-pointer rounded-lg border p-3 border-red-300 bg-red-50 has-[:checked]:border-red-500 has-[:checked]:ring-2 has-[:checked]:ring-red-500">
+                                <input type="radio" name="schedule_type" value="expense" class="sr-only" checked>
+                                <span class="flex flex-1 items-center justify-center">
+                                    <span class="text-sm font-medium text-red-900">지급</span>
+                                </span>
+                                <svg class="h-5 w-5 text-red-600 hidden [input:checked~&]:block absolute right-2" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+                                </svg>
+                            </label>
+                        </div>
+                    </div>
+
+                    {{-- 일정명 --}}
+                    <div>
+                        <label for="modal_title" class="block text-sm font-medium text-gray-700 mb-1">
+                            일정명 <span class="text-red-500">*</span>
+                        </label>
+                        <input type="text" name="title" id="modal_title" required
+                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
+                    </div>
+
+                    {{-- 예정일 & 금액 --}}
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <label for="modal_scheduled_date" class="block text-sm font-medium text-gray-700 mb-1">
+                                예정일 <span class="text-red-500">*</span>
+                            </label>
+                            <input type="date" name="scheduled_date" id="modal_scheduled_date" required
+                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
+                        </div>
+                        <div>
+                            <label for="modal_amount_display" class="block text-sm font-medium text-gray-700 mb-1">
+                                금액 <span class="text-red-500">*</span>
+                            </label>
+                            <input type="text" id="modal_amount_display" required inputmode="numeric"
+                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-right"
+                                   oninput="formatModalAmount(this)" onblur="formatModalAmount(this)">
+                            <input type="hidden" name="amount" id="modal_amount">
+                        </div>
+                    </div>
+
+                    {{-- 거래상대방 --}}
+                    <div>
+                        <label for="modal_counterparty" class="block text-sm font-medium text-gray-700 mb-1">
+                            거래상대방
+                        </label>
+                        <input type="text" name="counterparty" id="modal_counterparty"
+                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
+                    </div>
+
+                    {{-- 출금 계좌 --}}
+                    <div>
+                        <label for="modal_bank_account" class="block text-sm font-medium text-gray-700 mb-1">
+                            출금 계좌
+                        </label>
+                        <select name="related_bank_account_id" id="modal_bank_account"
+                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
+                            <option value="">선택안함</option>
+                            @foreach($accounts ?? [] as $account)
+                            <option value="{{ $account->id }}">{{ $account->bank_name }} - {{ $account->account_number }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+
+                    {{-- 분류 & 상태 --}}
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <label for="modal_category" class="block text-sm font-medium text-gray-700 mb-1">분류</label>
+                            <select name="category" id="modal_category"
+                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
+                                <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>
+                            <label for="modal_status" class="block text-sm font-medium text-gray-700 mb-1">상태</label>
+                            <select name="status" id="modal_status"
+                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
+                                <option value="pending">대기</option>
+                                <option value="completed">완료</option>
+                                <option value="cancelled">취소</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    {{-- 설명 --}}
+                    <div>
+                        <label for="modal_description" class="block text-sm font-medium text-gray-700 mb-1">설명</label>
+                        <textarea name="description" id="modal_description" rows="2"
+                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"></textarea>
+                    </div>
+
+                    {{-- 메모 --}}
+                    <div>
+                        <label for="modal_memo" class="block text-sm font-medium text-gray-700 mb-1">메모</label>
+                        <textarea name="memo" id="modal_memo" rows="2"
+                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"></textarea>
+                    </div>
+                </form>
+            </div>
+
+            {{-- 모달 푸터 --}}
+            <div class="sticky bottom-0 bg-gray-50 px-6 py-4 border-t flex justify-between">
+                <button type="button" id="deleteBtn" onclick="deleteSchedule()" class="px-4 py-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition-colors hidden">
+                    삭제
+                </button>
+                <div class="flex gap-3 ml-auto">
+                    <button type="button" onclick="closeScheduleModal()" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
+                        취소
+                    </button>
+                    <button type="button" onclick="saveSchedule()" class="px-6 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors">
+                        저장
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 @endsection
+
+@push('scripts')
+<script>
+    let currentScheduleId = null;
+    const csrfToken = '{{ csrf_token() }}';
+
+    // 모달 열기 (신규 등록)
+    function openCreateModal(date) {
+        currentScheduleId = null;
+        document.getElementById('modalTitle').textContent = '일정 등록';
+        document.getElementById('deleteBtn').classList.add('hidden');
+
+        // 폼 초기화
+        document.getElementById('modalScheduleForm').reset();
+        document.getElementById('modal_id').value = '';
+        document.getElementById('modal_scheduled_date').value = date || new Date().toISOString().split('T')[0];
+        document.getElementById('modal_amount_display').value = '';
+        document.getElementById('modal_amount').value = '';
+
+        // 기본값: 지급
+        document.querySelector('input[name="schedule_type"][value="expense"]').checked = true;
+
+        document.getElementById('scheduleModal').classList.remove('hidden');
+        document.body.style.overflow = 'hidden';
+    }
+
+    // 모달 열기 (수정)
+    async function openEditModal(id) {
+        currentScheduleId = id;
+        document.getElementById('modalTitle').textContent = '일정 수정';
+        document.getElementById('deleteBtn').classList.remove('hidden');
+
+        try {
+            const response = await fetch(`/api/admin/fund-schedules/${id}`, {
+                headers: { 'Accept': 'application/json' }
+            });
+            const result = await response.json();
+
+            if (result.success) {
+                const data = result.data;
+                document.getElementById('modal_id').value = data.id;
+                document.getElementById('modal_title').value = data.title;
+                document.getElementById('modal_scheduled_date').value = data.scheduled_date;
+                document.getElementById('modal_amount').value = data.amount;
+                document.getElementById('modal_amount_display').value = Number(data.amount).toLocaleString('ko-KR');
+                document.getElementById('modal_counterparty').value = data.counterparty || '';
+                document.getElementById('modal_bank_account').value = data.related_bank_account_id || '';
+                document.getElementById('modal_category').value = data.category || '';
+                document.getElementById('modal_status').value = data.status || 'pending';
+                document.getElementById('modal_description').value = data.description || '';
+                document.getElementById('modal_memo').value = data.memo || '';
+
+                // 일정 유형
+                document.querySelector(`input[name="schedule_type"][value="${data.schedule_type}"]`).checked = true;
+
+                document.getElementById('scheduleModal').classList.remove('hidden');
+                document.body.style.overflow = 'hidden';
+            } else {
+                alert('일정 정보를 불러오는데 실패했습니다.');
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            alert('일정 정보를 불러오는데 실패했습니다.');
+        }
+    }
+
+    // 모달 닫기
+    function closeScheduleModal() {
+        document.getElementById('scheduleModal').classList.add('hidden');
+        document.body.style.overflow = '';
+        document.getElementById('modal-form-message').innerHTML = '';
+    }
+
+    // 금액 포맷
+    function formatModalAmount(input) {
+        let value = input.value.replace(/[^\d]/g, '');
+        if (!value) value = '0';
+        const numValue = parseInt(value, 10);
+        input.value = numValue.toLocaleString('ko-KR');
+        document.getElementById('modal_amount').value = numValue;
+    }
+
+    // 저장
+    async function saveSchedule() {
+        const form = document.getElementById('modalScheduleForm');
+        const formData = new FormData(form);
+        const data = Object.fromEntries(formData.entries());
+
+        // 금액 숫자로 변환
+        data.amount = parseInt(document.getElementById('modal_amount').value) || 0;
+
+        const isEdit = currentScheduleId !== null;
+        const url = isEdit
+            ? `/api/admin/fund-schedules/${currentScheduleId}`
+            : '/api/admin/fund-schedules';
+        const method = isEdit ? 'PUT' : 'POST';
+
+        try {
+            const response = await fetch(url, {
+                method: method,
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json',
+                    'X-CSRF-TOKEN': csrfToken
+                },
+                body: JSON.stringify(data)
+            });
+
+            const result = await response.json();
+
+            if (result.success) {
+                closeScheduleModal();
+                window.location.reload();
+            } else {
+                document.getElementById('modal-form-message').innerHTML =
+                    `<div class="p-3 bg-red-50 text-red-700 rounded-lg text-sm">${result.message || '저장에 실패했습니다.'}</div>`;
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            document.getElementById('modal-form-message').innerHTML =
+                '<div class="p-3 bg-red-50 text-red-700 rounded-lg text-sm">저장 중 오류가 발생했습니다.</div>';
+        }
+    }
+
+    // 삭제
+    async function deleteSchedule() {
+        if (!currentScheduleId) return;
+        if (!confirm('이 일정을 삭제하시겠습니까?')) return;
+
+        try {
+            const response = await fetch(`/api/admin/fund-schedules/${currentScheduleId}`, {
+                method: 'DELETE',
+                headers: {
+                    'Accept': 'application/json',
+                    'X-CSRF-TOKEN': csrfToken
+                }
+            });
+
+            const result = await response.json();
+
+            if (result.success) {
+                closeScheduleModal();
+                window.location.reload();
+            } else {
+                alert(result.message || '삭제에 실패했습니다.');
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            alert('삭제 중 오류가 발생했습니다.');
+        }
+    }
+
+    // ESC 키로 모달 닫기
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && !document.getElementById('scheduleModal').classList.contains('hidden')) {
+            closeScheduleModal();
+        }
+    });
+</script>
+@endpush
diff --git a/resources/views/finance/fund-schedules/partials/calendar.blade.php b/resources/views/finance/fund-schedules/partials/calendar.blade.php
index 18b74d2f..8d142b90 100644
--- a/resources/views/finance/fund-schedules/partials/calendar.blade.php
+++ b/resources/views/finance/fund-schedules/partials/calendar.blade.php
@@ -55,21 +55,21 @@
                                 </span>
 
                                 @if($isCurrentMonth && count($daySchedules) === 0)
-                                <a href="{{ route('finance.fund-schedules.create', ['date' => $dateKey]) }}"
+                                <button type="button" onclick="openCreateModal('{{ $dateKey }}')"
                                    class="opacity-0 hover:opacity-100 text-gray-400 hover:text-emerald-600 transition-opacity"
                                    title="일정 추가">
                                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                                     </svg>
-                                </a>
+                                </button>
                                 @endif
                             </div>
 
                             {{-- 일정 목록 --}}
                             <div class="space-y-1 overflow-y-auto max-h-20">
                                 @foreach($daySchedules as $schedule)
-                                    <a href="{{ route('finance.fund-schedules.edit', $schedule['id']) }}"
-                                       class="block px-1.5 py-0.5 rounded text-xs truncate border
+                                    <button type="button" onclick="openEditModal({{ $schedule['id'] }})"
+                                       class="block w-full text-left px-1.5 py-0.5 rounded text-xs truncate border cursor-pointer
                                            {{ $schedule['schedule_type'] === 'income' ? 'bg-green-50 text-green-700 border-green-200 hover:bg-green-100' : 'bg-red-50 text-red-700 border-red-200 hover:bg-red-100' }}
                                            {{ $schedule['status'] === 'completed' ? 'opacity-60 line-through' : '' }}
                                            {{ $schedule['status'] === 'cancelled' ? 'opacity-40 line-through' : '' }}
@@ -85,17 +85,17 @@ class="block px-1.5 py-0.5 rounded text-xs truncate border
                                                 {{ number_format($schedule['amount']) }}원
                                             @endif
                                         </div>
-                                    </a>
+                                    </button>
                                 @endforeach
 
                                 @if($isCurrentMonth && count($daySchedules) > 0)
-                                <a href="{{ route('finance.fund-schedules.create', ['date' => $dateKey]) }}"
-                                   class="block text-center text-gray-400 hover:text-emerald-600 py-0.5"
+                                <button type="button" onclick="openCreateModal('{{ $dateKey }}')"
+                                   class="block w-full text-center text-gray-400 hover:text-emerald-600 py-0.5"
                                    title="일정 추가">
                                     <svg class="w-3 h-3 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                                     </svg>
-                                </a>
+                                </button>
                                 @endif
                             </div>
                         </div>