sam-manage/resources/views/partials/sync-settings-modal.blade.php

<!-- 환경 설정 모달 (공통) -->
<div id="settingsModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-lg mx-4">
        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
            <h3 class="text-lg font-semibold text-gray-800">환경 설정</h3>
            <button type="button" onclick="closeSettingsModal()" class="text-gray-400 hover:text-gray-600">
                <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="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <div class="px-6 py-4 space-y-6">
            <!-- 개발 환경 -->
            <div class="space-y-3">
                <h4 class="font-medium text-gray-700 flex items-center gap-2">
                    <span class="w-2 h-2 bg-yellow-500 rounded-full"></span>
                    개발 환경
                </h4>
                <div class="grid grid-cols-2 gap-3">
                    <div class="col-span-2">
                        <label class="block text-xs text-gray-500 mb-1">URL</label>
                        <input type="url" id="devUrl" value="{{ $environments['dev']['url'] ?? '' }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
                               placeholder="https://dev-mng.example.com">
                    </div>
                    <div class="col-span-2">
                        <label class="block text-xs text-gray-500 mb-1">API Key</label>
                        <input type="password" id="devApiKey" value="{{ $environments['dev']['api_key'] ?? '' }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
                               placeholder="API Key">
                    </div>
                </div>
                <button type="button" onclick="testConnection('dev')"
                        class="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                    연결 테스트
                </button>
            </div>

            <!-- 운영 환경 -->
            <div class="space-y-3">
                <h4 class="font-medium text-gray-700 flex items-center gap-2">
                    <span class="w-2 h-2 bg-red-500 rounded-full"></span>
                    운영 환경
                </h4>
                <div class="grid grid-cols-2 gap-3">
                    <div class="col-span-2">
                        <label class="block text-xs text-gray-500 mb-1">URL</label>
                        <input type="url" id="prodUrl" value="{{ $environments['prod']['url'] ?? '' }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
                               placeholder="https://mng.example.com">
                    </div>
                    <div class="col-span-2">
                        <label class="block text-xs text-gray-500 mb-1">API Key</label>
                        <input type="password" id="prodApiKey" value="{{ $environments['prod']['api_key'] ?? '' }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
                               placeholder="API Key">
                    </div>
                </div>
                <button type="button" onclick="testConnection('prod')"
                        class="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                    연결 테스트
                </button>
            </div>

            <div class="bg-gray-50 rounded-lg p-3 text-xs text-gray-600">
                <p class="font-medium mb-1">API Key 설정 방법</p>
                <p>각 환경의 <code class="bg-gray-200 px-1 rounded">.env</code> 파일에 다음을 추가하세요:</p>
                <code class="block bg-gray-200 px-2 py-1 rounded mt-1">MENU_SYNC_API_KEY=your-secret-key</code>
            </div>
        </div>

        <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
            <button type="button" onclick="closeSettingsModal()"
                    class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium transition-colors">
                취소
            </button>
            <button type="button" onclick="saveSettings()"
                    class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors">
                저장
            </button>
        </div>
    </div>
</div>

<script>
    // 설정 모달
    function openSettingsModal() {
        document.getElementById('settingsModal').classList.remove('hidden');
        document.getElementById('settingsModal').classList.add('flex');
    }

    function closeSettingsModal() {
        document.getElementById('settingsModal').classList.add('hidden');
        document.getElementById('settingsModal').classList.remove('flex');
    }

    // 설정 저장
    async function saveSettings() {
        const data = {
            environments: {
                dev: {
                    name: '개발',
                    url: document.getElementById('devUrl').value,
                    api_key: document.getElementById('devApiKey').value
                },
                prod: {
                    name: '운영',
                    url: document.getElementById('prodUrl').value,
                    api_key: document.getElementById('prodApiKey').value
                }
            }
        };

        try {
            const response = await fetch('{{ route("menus.sync.settings") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();
            if (result.success) {
                alert('설정이 저장되었습니다.');
                location.reload();
            } else {
                alert(result.error || '저장 실패');
            }
        } catch (e) {
            alert('오류 발생: ' + e.message);
        }
    }

    // 연결 테스트
    async function testConnection(env) {
        const url = document.getElementById(env + 'Url').value;
        const apiKey = document.getElementById(env + 'ApiKey').value;

        if (!url || !apiKey) {
            alert('URL과 API Key를 입력해주세요.');
            return;
        }

        try {
            const response = await fetch('{{ route("menus.sync.test") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ url, api_key: apiKey })
            });

            const result = await response.json();
            if (result.success) {
                alert(`연결 성공!\n환경: ${result.environment}\n메뉴 수: ${result.menu_count}개`);
            } else {
                alert('연결 실패: ' + result.message);
            }
        } catch (e) {
            alert('오류 발생: ' + e.message);
        }
    }

    // 모달 외부 클릭 시 닫기
    document.getElementById('settingsModal').addEventListener('click', function(e) {
        if (e.target === this) closeSettingsModal();
    });

    // ESC 키로 모달 닫기
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeSettingsModal();
    });
</script>