SamProject/sam-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:자금계획일정 달력 항목 클릭 시 모달로 변경

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
김보곤
2026-02-03 21:31:37 +09:00
parent c031d94c82
commit 8749ca359f
2 changed files with 335 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

329
resources/views/finance/fund-schedules/index.blade.php
View File

@@ -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

16
resources/views/finance/fund-schedules/partials/calendar.blade.php
View File

@@ -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>