099d08e49e
- config/services.php fallback 기본값 변경 - AiConfig DEFAULT_MODELS 상수 + getActiveGemini() fallback 변경 - NotionService fallback 변경 - AI 설정 관리 UI placeholder/기본값 변경 - Google Cloud AI 가이드 서비스 현황 모델명 변경 - 환경변수 관리 아카데미 예시 변경
1207 lines
57 KiB
PHP
1207 lines
57 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'AI 설정 관리')
|
|
|
|
@push('styles')
|
|
<style>
|
|
/* Alpine.js x-cloak: 초기화 전 숨김 */
|
|
[x-cloak] { display: none !important; }
|
|
|
|
.provider-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
.provider-gemini { background: #e8f0fe; color: #1a73e8; }
|
|
.provider-claude { background: #fef3e8; color: #d97706; }
|
|
.provider-openai { background: #e8f8e8; color: #16a34a; }
|
|
.provider-notion { background: #f3f0ff; color: #7c3aed; }
|
|
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
.status-active { background: #dcfce7; color: #16a34a; }
|
|
.status-inactive { background: #f3f4f6; color: #6b7280; }
|
|
|
|
.config-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 50;
|
|
}
|
|
.modal-content {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
.modal-overlay.hidden {
|
|
display: none !important;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="space-y-6">
|
|
<!-- 페이지 헤더 -->
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="text-2xl font-bold text-gray-800">AI 및 스토리지 설정</h1>
|
|
</div>
|
|
|
|
<!-- AI 설정 섹션 -->
|
|
<div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
<h2 class="text-lg font-semibold text-gray-800">AI 설정</h2>
|
|
</div>
|
|
<button type="button" onclick="openModal()" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg transition inline-flex items-center gap-1.5">
|
|
<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>
|
|
AI 설정 추가
|
|
</button>
|
|
</div>
|
|
<!-- AI 설정 목록 -->
|
|
<div id="config-list" class="space-y-4">
|
|
@forelse($configs as $config)
|
|
<div class="config-card" data-id="{{ $config->id }}">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<h3 class="font-semibold text-lg text-gray-800">{{ $config->name }}</h3>
|
|
<span class="provider-badge provider-{{ $config->provider }}">
|
|
{{ $config->provider_label }}
|
|
</span>
|
|
<span class="status-badge {{ $config->is_active ? 'status-active' : 'status-inactive' }}">
|
|
{{ $config->status_label }}
|
|
</span>
|
|
</div>
|
|
<div class="text-sm text-gray-600 space-y-1">
|
|
<p><span class="font-medium">모델:</span> {{ $config->model }}</p>
|
|
<p><span class="font-medium">인증:</span> {{ $config->auth_type_label }}</p>
|
|
@if($config->isVertexAi())
|
|
<p><span class="font-medium">프로젝트:</span> {{ $config->getProjectId() }} ({{ $config->getRegion() }})</p>
|
|
@else
|
|
<p><span class="font-medium">API 키:</span> {{ $config->masked_api_key }}</p>
|
|
@endif
|
|
@if($config->description)
|
|
<p><span class="font-medium">설명:</span> {{ $config->description }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button type="button" onclick="testConnection({{ $config->id }})" class="px-3 py-1.5 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition">
|
|
테스트
|
|
</button>
|
|
<button type="button" onclick="toggleConfig({{ $config->id }})" class="px-3 py-1.5 text-sm {{ $config->is_active ? 'bg-yellow-100 hover:bg-yellow-200 text-yellow-700' : 'bg-green-100 hover:bg-green-200 text-green-700' }} rounded-lg transition">
|
|
{{ $config->is_active ? '비활성화' : '활성화' }}
|
|
</button>
|
|
<button type="button" data-config='@json($config)' onclick="editConfig(this)" class="px-3 py-1.5 text-sm bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg transition">
|
|
수정
|
|
</button>
|
|
<button type="button" onclick="deleteConfig({{ $config->id }}, '{{ $config->name }}')" class="px-3 py-1.5 text-sm bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition">
|
|
삭제
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="text-center py-12 bg-white rounded-lg shadow-sm">
|
|
<svg class="w-12 h-12 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
<p class="text-gray-500">등록된 AI 설정이 없습니다.</p>
|
|
<p class="text-sm text-gray-400 mt-1">'새 설정 추가' 버튼을 클릭하여 AI API를 등록하세요.</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<!-- AI 사용 안내 -->
|
|
<div class="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
|
|
<h3 class="font-medium text-blue-800 mb-2">사용 안내</h3>
|
|
<ul class="text-sm text-blue-700 space-y-1">
|
|
<li>각 Provider(Gemini, Claude, OpenAI)별로 하나의 설정만 활성화할 수 있습니다.</li>
|
|
<li>명함 OCR 기능은 Gemini Vision API를 사용합니다.</li>
|
|
<li>API 키는 각 제공자의 콘솔에서 발급받을 수 있습니다.</li>
|
|
<li>테스트 버튼으로 API 연결 상태를 확인할 수 있습니다.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 스토리지 설정 (GCS) 섹션 -->
|
|
<div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
|
|
</svg>
|
|
<h2 class="text-lg font-semibold text-gray-800">스토리지 설정 (GCS)</h2>
|
|
</div>
|
|
<button type="button" onclick="openGcsModal()" class="px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition inline-flex items-center gap-1.5">
|
|
<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>
|
|
GCS 설정 추가
|
|
</button>
|
|
</div>
|
|
<!-- GCS 설정 목록 -->
|
|
<div id="storage-config-list" class="space-y-4">
|
|
@forelse($storageConfigs as $config)
|
|
<div class="config-card" data-id="{{ $config->id }}">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<h3 class="font-semibold text-lg text-gray-800">{{ $config->name }}</h3>
|
|
<span class="provider-badge" style="background: #e8f5e9; color: #2e7d32;">
|
|
Google Cloud Storage
|
|
</span>
|
|
<span class="status-badge {{ $config->is_active ? 'status-active' : 'status-inactive' }}">
|
|
{{ $config->status_label }}
|
|
</span>
|
|
</div>
|
|
<div class="text-sm text-gray-600 space-y-1">
|
|
<p><span class="font-medium">버킷:</span> {{ $config->getBucketName() ?? '-' }}</p>
|
|
<p><span class="font-medium">서비스 계정:</span>
|
|
@if($config->getServiceAccountPath())
|
|
파일 경로: {{ $config->getServiceAccountPath() }}
|
|
@elseif($config->getServiceAccountJson())
|
|
JSON 직접 입력됨
|
|
@else
|
|
미설정
|
|
@endif
|
|
</p>
|
|
@if($config->description)
|
|
<p><span class="font-medium">설명:</span> {{ $config->description }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button type="button" onclick="testGcsConnection({{ $config->id }})" class="px-3 py-1.5 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition">
|
|
테스트
|
|
</button>
|
|
<button type="button" onclick="toggleConfig({{ $config->id }})" class="px-3 py-1.5 text-sm {{ $config->is_active ? 'bg-yellow-100 hover:bg-yellow-200 text-yellow-700' : 'bg-green-100 hover:bg-green-200 text-green-700' }} rounded-lg transition">
|
|
{{ $config->is_active ? '비활성화' : '활성화' }}
|
|
</button>
|
|
<button type="button" data-config='@json($config)' onclick="editGcsConfig(this)" class="px-3 py-1.5 text-sm bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg transition">
|
|
수정
|
|
</button>
|
|
<button type="button" onclick="deleteConfig({{ $config->id }}, '{{ $config->name }}')" class="px-3 py-1.5 text-sm bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition">
|
|
삭제
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="text-center py-12 bg-white rounded-lg shadow-sm">
|
|
<svg class="w-12 h-12 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
|
|
</svg>
|
|
<p class="text-gray-500">등록된 GCS 설정이 없습니다.</p>
|
|
<p class="text-sm text-gray-400 mt-1">'새 설정 추가' 버튼을 클릭하여 Google Cloud Storage를 등록하세요.</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<!-- GCS 사용 안내 -->
|
|
<div class="mt-6 bg-green-50 border border-green-200 rounded-lg p-4">
|
|
<h3 class="font-medium text-green-800 mb-2">Google Cloud Storage 사용 안내</h3>
|
|
<ul class="text-sm text-green-700 space-y-1">
|
|
<li>음성 녹음 파일(10MB 이상)은 GCS에 자동 백업됩니다.</li>
|
|
<li>GCP 콘솔에서 서비스 계정을 생성하고 Storage 권한을 부여하세요.</li>
|
|
<li>서비스 계정 키(JSON)를 직접 입력하거나, 파일 경로를 지정할 수 있습니다.</li>
|
|
<li>버킷은 미리 GCP 콘솔에서 생성해 두어야 합니다.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API 서비스 설정 (Notion) 섹션 -->
|
|
<div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
<h2 class="text-lg font-semibold text-gray-800">API 서비스 설정 (Notion)</h2>
|
|
</div>
|
|
<button type="button" onclick="openNotionModal()" class="px-3 py-1.5 bg-purple-600 hover:bg-purple-700 text-white text-sm rounded-lg transition inline-flex items-center gap-1.5">
|
|
<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>
|
|
Notion 설정 추가
|
|
</button>
|
|
</div>
|
|
<!-- Notion 설정 목록 -->
|
|
<div id="notion-config-list" class="space-y-4">
|
|
@forelse($apiServiceConfigs as $config)
|
|
<div class="config-card" data-id="{{ $config->id }}">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<h3 class="font-semibold text-lg text-gray-800">{{ $config->name }}</h3>
|
|
<span class="provider-badge provider-notion">Notion</span>
|
|
<span class="status-badge {{ $config->is_active ? 'status-active' : 'status-inactive' }}">
|
|
{{ $config->status_label }}
|
|
</span>
|
|
</div>
|
|
<div class="text-sm text-gray-600 space-y-1">
|
|
<p><span class="font-medium">API 버전:</span> {{ $config->model }}</p>
|
|
<p><span class="font-medium">API 키:</span> {{ $config->masked_api_key }}</p>
|
|
@if($config->description)
|
|
<p><span class="font-medium">설명:</span> {{ $config->description }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button type="button" onclick="toggleConfig({{ $config->id }})" class="px-3 py-1.5 text-sm {{ $config->is_active ? 'bg-yellow-100 hover:bg-yellow-200 text-yellow-700' : 'bg-green-100 hover:bg-green-200 text-green-700' }} rounded-lg transition">
|
|
{{ $config->is_active ? '비활성화' : '활성화' }}
|
|
</button>
|
|
<button type="button" data-config='@json($config)' onclick="editNotionConfig(this)" class="px-3 py-1.5 text-sm bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg transition">
|
|
수정
|
|
</button>
|
|
<button type="button" onclick="deleteConfig({{ $config->id }}, '{{ $config->name }}')" class="px-3 py-1.5 text-sm bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition">
|
|
삭제
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="text-center py-12 bg-white rounded-lg shadow-sm">
|
|
<svg class="w-12 h-12 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
<p class="text-gray-500">등록된 Notion 설정이 없습니다.</p>
|
|
<p class="text-sm text-gray-400 mt-1">'Notion 설정 추가' 버튼을 클릭하여 Notion API를 등록하세요.</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<!-- Notion 사용 안내 -->
|
|
<div class="mt-6 bg-purple-50 border border-purple-200 rounded-lg p-4">
|
|
<h3 class="font-medium text-purple-800 mb-2">Notion API 사용 안내</h3>
|
|
<ul class="text-sm text-purple-700 space-y-1">
|
|
<li>Notion 검색 기능(추가기능 > Notion 검색)에서 사용됩니다.</li>
|
|
<li><a href="https://www.notion.so/my-integrations" target="_blank" class="underline font-medium">Notion Integrations</a>에서 Internal Integration을 생성하고 API 키를 발급받으세요.</li>
|
|
<li>검색할 페이지/데이터베이스에 Integration을 연결(Share)해야 합니다.</li>
|
|
<li>Gemini AI 설정이 활성화되어 있어야 검색어 정제 및 AI 답변이 동작합니다.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- GCS 추가/수정 모달 -->
|
|
<div id="gcs-modal" class="modal-overlay hidden">
|
|
<div class="modal-content">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 id="gcs-modal-title" class="text-xl font-bold text-gray-800">GCS 설정 추가</h2>
|
|
<button type="button" onclick="closeGcsModal()" 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>
|
|
|
|
<form id="gcs-form" class="space-y-4">
|
|
<input type="hidden" id="gcs-config-id" value="">
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">설정 이름 <span class="text-red-500">*</span></label>
|
|
<input type="text" id="gcs-name" required placeholder="예: Production GCS" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">버킷 이름 <span class="text-red-500">*</span></label>
|
|
<input type="text" id="gcs-bucket-name" required placeholder="예: my-bucket-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<p class="mt-1 text-xs text-gray-500">GCP 콘솔에서 생성한 버킷 이름</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">인증 방식</label>
|
|
<select id="gcs-auth-type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option value="path">파일 경로</option>
|
|
<option value="json">JSON 직접 입력</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="gcs-path-section">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">서비스 계정 파일 경로</label>
|
|
<input type="text" id="gcs-service-account-path" placeholder="/var/www/sales/apikey/google_service_account.json" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<p class="mt-1 text-xs text-gray-500">Docker 컨테이너 내부 경로 (기본: /var/www/sales/apikey/google_service_account.json)</p>
|
|
</div>
|
|
|
|
<div id="gcs-json-section" class="hidden">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">서비스 계정 JSON</label>
|
|
<textarea id="gcs-service-account-json" rows="6" placeholder='{"type": "service_account", "project_id": "...", ...}' class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"></textarea>
|
|
<p class="mt-1 text-xs text-gray-500">GCP에서 다운로드한 JSON 키 내용을 붙여넣기</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">설명 (선택)</label>
|
|
<textarea id="gcs-description" rows="2" placeholder="설정에 대한 설명" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<input type="checkbox" id="gcs-is-active" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
|
|
<label for="gcs-is-active" class="ml-2 text-sm text-gray-700">활성화 (기존 GCS 설정은 비활성화됩니다)</label>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3 pt-4 border-t">
|
|
<button type="button" onclick="closeGcsModal()" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
|
|
취소
|
|
</button>
|
|
<button type="button" onclick="testGcsConnectionFromModal()" class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition">
|
|
연결 테스트
|
|
</button>
|
|
<button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
|
|
저장
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notion 추가/수정 모달 -->
|
|
<div id="notion-modal" class="modal-overlay hidden">
|
|
<div class="modal-content">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 id="notion-modal-title" class="text-xl font-bold text-gray-800">Notion 설정 추가</h2>
|
|
<button type="button" onclick="closeNotionModal()" 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>
|
|
|
|
<form id="notion-form" class="space-y-4">
|
|
<input type="hidden" id="notion-config-id" value="">
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">설정 이름 <span class="text-red-500">*</span></label>
|
|
<input type="text" id="notion-name" required placeholder="예: Notion Production" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">API 키 <span class="text-red-500">*</span></label>
|
|
<input type="password" id="notion-api-key" required placeholder="ntn_... 또는 secret_..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
|
|
<p class="mt-1 text-xs text-gray-500">Notion Integrations에서 발급받은 Internal Integration Token</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">API 버전</label>
|
|
<input type="text" id="notion-api-version" placeholder="2025-09-03" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
|
|
<p class="mt-1 text-xs text-gray-500">기본값: 2025-09-03 (비워두면 기본값 사용)</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">설명 (선택)</label>
|
|
<textarea id="notion-description" rows="2" placeholder="설정에 대한 설명" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<input type="checkbox" id="notion-is-active" class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
|
|
<label for="notion-is-active" class="ml-2 text-sm text-gray-700">활성화 (기존 Notion 설정은 비활성화됩니다)</label>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3 pt-4 border-t">
|
|
<button type="button" onclick="closeNotionModal()" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
|
|
취소
|
|
</button>
|
|
<button type="submit" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition">
|
|
저장
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 추가/수정 모달 -->
|
|
<div id="config-modal" class="modal-overlay hidden">
|
|
<div class="modal-content">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 id="modal-title" class="text-xl font-bold text-gray-800">새 설정 추가</h2>
|
|
<button type="button" onclick="closeModal()" 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>
|
|
|
|
<form id="config-form" class="space-y-4">
|
|
<input type="hidden" id="config-id" value="">
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Provider <span class="text-red-500">*</span></label>
|
|
<select id="config-provider" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option value="gemini">Google Gemini</option>
|
|
<option value="claude">Anthropic Claude</option>
|
|
<option value="openai">OpenAI</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">설정 이름 <span class="text-red-500">*</span></label>
|
|
<input type="text" id="config-name" required placeholder="예: Gemini Production" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
|
|
<!-- 인증 방식 (Gemini만 해당) -->
|
|
<div id="auth-type-section" class="hidden">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">인증 방식 <span class="text-red-500">*</span></label>
|
|
<select id="config-auth-type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option value="api_key">API 키 (Google AI Studio)</option>
|
|
<option value="vertex_ai">Vertex AI (서비스 계정)</option>
|
|
</select>
|
|
<p class="mt-1 text-xs text-gray-500">유료 플랜은 Vertex AI를 선택하세요</p>
|
|
</div>
|
|
|
|
<!-- API 키 인증 섹션 -->
|
|
<div id="api-key-section">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">API 키 <span class="text-red-500">*</span></label>
|
|
<input type="password" id="config-api-key" placeholder="API 키 입력" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
|
|
<!-- Vertex AI 섹션 -->
|
|
<div id="vertex-ai-section" class="hidden space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">프로젝트 ID <span class="text-red-500">*</span></label>
|
|
<input type="text" id="config-project-id" placeholder="예: my-gcp-project" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">리전</label>
|
|
<select id="config-region" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option value="us-central1">us-central1 (아이오와)</option>
|
|
<option value="asia-northeast3">asia-northeast3 (서울)</option>
|
|
<option value="asia-northeast1">asia-northeast1 (도쿄)</option>
|
|
<option value="europe-west1">europe-west1 (벨기에)</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">서비스 계정 파일 경로 <span class="text-red-500">*</span></label>
|
|
<input type="text" id="config-service-account-path" placeholder="/var/www/sales/apikey/google_service_account.json" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<p class="mt-1 text-xs text-gray-500">Docker 컨테이너 내부 경로로 입력</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">모델 <span class="text-red-500">*</span></label>
|
|
<input type="text" id="config-model" required placeholder="예: gemini-2.5-flash" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<p class="mt-1 text-xs text-gray-500">기본값: <span id="default-model">gemini-2.5-flash</span></p>
|
|
</div>
|
|
|
|
<div id="base-url-section">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Base URL (선택)</label>
|
|
<input type="url" id="config-base-url" placeholder="비워두면 기본 URL 사용" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">설명 (선택)</label>
|
|
<textarea id="config-description" rows="2" placeholder="설정에 대한 설명" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<input type="checkbox" id="config-is-active" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
|
|
<label for="config-is-active" class="ml-2 text-sm text-gray-700">활성화 (동일 Provider의 기존 활성 설정은 비활성화됩니다)</label>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3 pt-4 border-t">
|
|
<button type="button" onclick="closeModal()" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
|
|
취소
|
|
</button>
|
|
<button type="button" onclick="testConnectionFromModal()" class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition">
|
|
연결 테스트
|
|
</button>
|
|
<button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
|
|
저장
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
(function() {
|
|
const csrfToken = '{{ csrf_token() }}';
|
|
|
|
// 토스트 메시지 함수
|
|
function showToast(message, type = 'info') {
|
|
// 기존 토스트 제거
|
|
const existingToast = document.getElementById('custom-toast');
|
|
if (existingToast) {
|
|
existingToast.remove();
|
|
}
|
|
|
|
const colors = {
|
|
success: 'bg-green-500',
|
|
error: 'bg-red-500',
|
|
warning: 'bg-yellow-500',
|
|
info: 'bg-blue-500'
|
|
};
|
|
|
|
const toast = document.createElement('div');
|
|
toast.id = 'custom-toast';
|
|
toast.className = `fixed top-4 right-4 ${colors[type] || colors.info} text-white px-6 py-3 rounded-lg shadow-lg z-[100] transition-opacity duration-300`;
|
|
toast.textContent = message;
|
|
document.body.appendChild(toast);
|
|
|
|
// 3초 후 자동 제거
|
|
setTimeout(() => {
|
|
toast.style.opacity = '0';
|
|
setTimeout(() => toast.remove(), 300);
|
|
}, 3000);
|
|
}
|
|
|
|
const defaultModels = {
|
|
gemini: 'gemini-2.5-flash',
|
|
claude: 'claude-sonnet-4-20250514',
|
|
openai: 'gpt-4o'
|
|
};
|
|
|
|
// 인증 방식에 따른 UI 전환
|
|
function toggleAuthTypeUI(provider, authType) {
|
|
const authTypeSection = document.getElementById('auth-type-section');
|
|
const apiKeySection = document.getElementById('api-key-section');
|
|
const vertexAiSection = document.getElementById('vertex-ai-section');
|
|
const baseUrlSection = document.getElementById('base-url-section');
|
|
|
|
// Gemini만 인증 방식 선택 가능
|
|
if (provider === 'gemini') {
|
|
authTypeSection.classList.remove('hidden');
|
|
|
|
if (authType === 'vertex_ai') {
|
|
apiKeySection.classList.add('hidden');
|
|
vertexAiSection.classList.remove('hidden');
|
|
baseUrlSection.classList.add('hidden');
|
|
document.getElementById('config-api-key').removeAttribute('required');
|
|
} else {
|
|
apiKeySection.classList.remove('hidden');
|
|
vertexAiSection.classList.add('hidden');
|
|
baseUrlSection.classList.remove('hidden');
|
|
document.getElementById('config-api-key').setAttribute('required', 'required');
|
|
}
|
|
} else {
|
|
authTypeSection.classList.add('hidden');
|
|
apiKeySection.classList.remove('hidden');
|
|
vertexAiSection.classList.add('hidden');
|
|
baseUrlSection.classList.remove('hidden');
|
|
document.getElementById('config-api-key').setAttribute('required', 'required');
|
|
}
|
|
}
|
|
|
|
// 모달 열기
|
|
window.openModal = function(config) {
|
|
const modal = document.getElementById('config-modal');
|
|
const title = document.getElementById('modal-title');
|
|
const form = document.getElementById('config-form');
|
|
|
|
if (config) {
|
|
title.textContent = '설정 수정';
|
|
document.getElementById('config-id').value = config.id;
|
|
document.getElementById('config-provider').value = config.provider;
|
|
document.getElementById('config-name').value = config.name;
|
|
document.getElementById('config-api-key').value = config.api_key || '';
|
|
document.getElementById('config-model').value = config.model;
|
|
document.getElementById('config-base-url').value = config.base_url || '';
|
|
document.getElementById('config-description').value = config.description || '';
|
|
document.getElementById('config-is-active').checked = config.is_active;
|
|
|
|
// Vertex AI 옵션 로드
|
|
const options = config.options || {};
|
|
const authType = options.auth_type || 'api_key';
|
|
document.getElementById('config-auth-type').value = authType;
|
|
document.getElementById('config-project-id').value = options.project_id || '';
|
|
document.getElementById('config-region').value = options.region || 'us-central1';
|
|
document.getElementById('config-service-account-path').value = options.service_account_path || '';
|
|
|
|
toggleAuthTypeUI(config.provider, authType);
|
|
} else {
|
|
title.textContent = '새 설정 추가';
|
|
form.reset();
|
|
document.getElementById('config-id').value = '';
|
|
document.getElementById('config-auth-type').value = 'api_key';
|
|
toggleAuthTypeUI('gemini', 'api_key');
|
|
}
|
|
|
|
modal.classList.remove('hidden');
|
|
};
|
|
|
|
// 모달 닫기
|
|
window.closeModal = function() {
|
|
document.getElementById('config-modal').classList.add('hidden');
|
|
};
|
|
|
|
// 수정
|
|
window.editConfig = function(btn) {
|
|
try {
|
|
const config = JSON.parse(btn.dataset.config);
|
|
window.openModal(config);
|
|
} catch (e) {
|
|
console.error('Config parse error:', e);
|
|
showToast('설정 데이터를 불러올 수 없습니다.', 'error');
|
|
}
|
|
};
|
|
|
|
// 토글
|
|
window.toggleConfig = async function(id) {
|
|
try {
|
|
const response = await fetch(`{{ url('system/ai-config') }}/${id}/toggle`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken
|
|
}
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.ok) {
|
|
showToast(result.message, 'success');
|
|
location.reload();
|
|
} else {
|
|
showToast(result.message || '변경 실패', 'error');
|
|
}
|
|
} catch (error) {
|
|
showToast('처리 중 오류가 발생했습니다.', 'error');
|
|
}
|
|
};
|
|
|
|
// 삭제
|
|
window.deleteConfig = async function(id, name) {
|
|
if (!confirm(`'${name}' 설정을 삭제하시겠습니까?`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`{{ url('system/ai-config') }}/${id}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken
|
|
}
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.ok) {
|
|
showToast(result.message, 'success');
|
|
location.reload();
|
|
} else {
|
|
showToast(result.message || '삭제 실패', 'error');
|
|
}
|
|
} catch (error) {
|
|
showToast('삭제 중 오류가 발생했습니다.', 'error');
|
|
}
|
|
};
|
|
|
|
// 연결 테스트 (목록에서)
|
|
window.testConnection = async function(id) {
|
|
showToast('설정 수정 화면에서 테스트해주세요.', 'warning');
|
|
};
|
|
|
|
// 연결 테스트 (모달에서)
|
|
window.testConnectionFromModal = async function() {
|
|
const provider = document.getElementById('config-provider').value;
|
|
const authType = document.getElementById('config-auth-type').value;
|
|
|
|
const data = {
|
|
provider: provider,
|
|
model: document.getElementById('config-model').value,
|
|
auth_type: authType
|
|
};
|
|
|
|
// Vertex AI 방식인 경우
|
|
if (provider === 'gemini' && authType === 'vertex_ai') {
|
|
data.project_id = document.getElementById('config-project-id').value;
|
|
data.region = document.getElementById('config-region').value;
|
|
data.service_account_path = document.getElementById('config-service-account-path').value;
|
|
|
|
if (!data.project_id) {
|
|
showToast('프로젝트 ID를 입력해주세요.', 'error');
|
|
return;
|
|
}
|
|
if (!data.service_account_path) {
|
|
showToast('서비스 계정 파일 경로를 입력해주세요.', 'error');
|
|
return;
|
|
}
|
|
} else {
|
|
// API 키 방식인 경우
|
|
data.api_key = document.getElementById('config-api-key').value;
|
|
data.base_url = document.getElementById('config-base-url').value || null;
|
|
|
|
if (!data.api_key) {
|
|
showToast('API 키를 입력해주세요.', 'error');
|
|
return;
|
|
}
|
|
}
|
|
|
|
showToast('연결 테스트 중...', 'info');
|
|
|
|
try {
|
|
const response = await fetch('{{ route("system.ai-config.test") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.ok) {
|
|
showToast(result.message || '연결 테스트 성공!', 'success');
|
|
} else {
|
|
showToast(result.error || '연결 테스트 실패', 'error');
|
|
}
|
|
} catch (error) {
|
|
showToast('테스트 중 오류가 발생했습니다.', 'error');
|
|
}
|
|
};
|
|
|
|
// 폼 제출
|
|
async function handleFormSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
const id = document.getElementById('config-id').value;
|
|
const provider = document.getElementById('config-provider').value;
|
|
const authType = document.getElementById('config-auth-type').value;
|
|
|
|
const data = {
|
|
provider: provider,
|
|
name: document.getElementById('config-name').value,
|
|
model: document.getElementById('config-model').value,
|
|
description: document.getElementById('config-description').value || null,
|
|
is_active: document.getElementById('config-is-active').checked,
|
|
options: {}
|
|
};
|
|
|
|
// Gemini + Vertex AI인 경우
|
|
if (provider === 'gemini' && authType === 'vertex_ai') {
|
|
data.api_key = 'vertex_ai_service_account'; // Vertex AI는 서비스 계정 사용 (DB NOT NULL 제약)
|
|
data.base_url = '';
|
|
data.options = {
|
|
auth_type: 'vertex_ai',
|
|
project_id: document.getElementById('config-project-id').value,
|
|
region: document.getElementById('config-region').value,
|
|
service_account_path: document.getElementById('config-service-account-path').value
|
|
};
|
|
|
|
// 필수 값 검증
|
|
if (!data.options.project_id || !data.options.service_account_path) {
|
|
showToast('프로젝트 ID와 서비스 계정 경로를 입력해주세요.', 'error');
|
|
return;
|
|
}
|
|
} else {
|
|
data.api_key = document.getElementById('config-api-key').value;
|
|
data.base_url = document.getElementById('config-base-url').value || null;
|
|
data.options = { auth_type: 'api_key' };
|
|
|
|
if (!data.api_key) {
|
|
showToast('API 키를 입력해주세요.', 'error');
|
|
return;
|
|
}
|
|
}
|
|
|
|
try {
|
|
const url = id
|
|
? `{{ url('system/ai-config') }}/${id}`
|
|
: '{{ route("system.ai-config.store") }}';
|
|
const method = id ? 'PUT' : 'POST';
|
|
|
|
const response = await fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.ok) {
|
|
showToast(result.message, 'success');
|
|
window.closeModal();
|
|
location.reload();
|
|
} else {
|
|
showToast(result.message || '저장 실패', 'error');
|
|
}
|
|
} catch (error) {
|
|
showToast('저장 중 오류가 발생했습니다.', 'error');
|
|
}
|
|
}
|
|
|
|
// === GCS 설정 관련 함수들 ===
|
|
|
|
// GCS 모달 열기
|
|
window.openGcsModal = function(config) {
|
|
const modal = document.getElementById('gcs-modal');
|
|
const title = document.getElementById('gcs-modal-title');
|
|
|
|
if (config) {
|
|
title.textContent = 'GCS 설정 수정';
|
|
document.getElementById('gcs-config-id').value = config.id;
|
|
document.getElementById('gcs-name').value = config.name;
|
|
document.getElementById('gcs-description').value = config.description || '';
|
|
document.getElementById('gcs-is-active').checked = config.is_active;
|
|
|
|
const options = config.options || {};
|
|
document.getElementById('gcs-bucket-name').value = options.bucket_name || '';
|
|
document.getElementById('gcs-service-account-path').value = options.service_account_path || '';
|
|
|
|
if (options.service_account_json) {
|
|
document.getElementById('gcs-auth-type').value = 'json';
|
|
document.getElementById('gcs-service-account-json').value = JSON.stringify(options.service_account_json, null, 2);
|
|
toggleGcsAuthType('json');
|
|
} else {
|
|
document.getElementById('gcs-auth-type').value = 'path';
|
|
toggleGcsAuthType('path');
|
|
}
|
|
} else {
|
|
title.textContent = 'GCS 설정 추가';
|
|
document.getElementById('gcs-form').reset();
|
|
document.getElementById('gcs-config-id').value = '';
|
|
document.getElementById('gcs-service-account-path').value = '/var/www/sales/apikey/google_service_account.json';
|
|
toggleGcsAuthType('path');
|
|
}
|
|
|
|
modal.classList.remove('hidden');
|
|
};
|
|
|
|
// GCS 모달 닫기
|
|
window.closeGcsModal = function() {
|
|
document.getElementById('gcs-modal').classList.add('hidden');
|
|
};
|
|
|
|
// GCS 인증 방식 전환
|
|
function toggleGcsAuthType(type) {
|
|
const pathSection = document.getElementById('gcs-path-section');
|
|
const jsonSection = document.getElementById('gcs-json-section');
|
|
|
|
if (type === 'json') {
|
|
pathSection.classList.add('hidden');
|
|
jsonSection.classList.remove('hidden');
|
|
} else {
|
|
pathSection.classList.remove('hidden');
|
|
jsonSection.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// GCS 수정
|
|
window.editGcsConfig = function(btn) {
|
|
try {
|
|
const config = JSON.parse(btn.dataset.config);
|
|
window.openGcsModal(config);
|
|
} catch (e) {
|
|
console.error('Config parse error:', e);
|
|
showToast('설정 데이터를 불러올 수 없습니다.', 'error');
|
|
}
|
|
};
|
|
|
|
// GCS 연결 테스트 (목록)
|
|
window.testGcsConnection = function(id) {
|
|
showToast('GCS 수정 화면에서 테스트해주세요.', 'warning');
|
|
};
|
|
|
|
// GCS 연결 테스트 (모달)
|
|
window.testGcsConnectionFromModal = async function() {
|
|
const authType = document.getElementById('gcs-auth-type').value;
|
|
const data = {
|
|
bucket_name: document.getElementById('gcs-bucket-name').value,
|
|
};
|
|
|
|
if (authType === 'json') {
|
|
try {
|
|
const jsonText = document.getElementById('gcs-service-account-json').value;
|
|
data.service_account_json = JSON.parse(jsonText);
|
|
} catch (e) {
|
|
showToast('JSON 형식이 올바르지 않습니다.', 'error');
|
|
return;
|
|
}
|
|
} else {
|
|
data.service_account_path = document.getElementById('gcs-service-account-path').value;
|
|
}
|
|
|
|
if (!data.bucket_name) {
|
|
showToast('버킷 이름을 입력해주세요.', 'error');
|
|
return;
|
|
}
|
|
|
|
showToast('GCS 연결 테스트 중...', 'info');
|
|
|
|
try {
|
|
const response = await fetch('{{ route("system.ai-config.test-gcs") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.ok) {
|
|
showToast(result.message, 'success');
|
|
} else {
|
|
showToast(result.error || '연결 테스트 실패', 'error');
|
|
}
|
|
} catch (error) {
|
|
showToast('테스트 중 오류가 발생했습니다.', 'error');
|
|
}
|
|
};
|
|
|
|
// GCS 폼 제출
|
|
async function handleGcsFormSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
const id = document.getElementById('gcs-config-id').value;
|
|
const authType = document.getElementById('gcs-auth-type').value;
|
|
|
|
const data = {
|
|
provider: 'gcs',
|
|
name: document.getElementById('gcs-name').value,
|
|
description: document.getElementById('gcs-description').value || null,
|
|
is_active: document.getElementById('gcs-is-active').checked,
|
|
options: {
|
|
bucket_name: document.getElementById('gcs-bucket-name').value,
|
|
}
|
|
};
|
|
|
|
if (authType === 'json') {
|
|
try {
|
|
const jsonText = document.getElementById('gcs-service-account-json').value;
|
|
data.options.service_account_json = JSON.parse(jsonText);
|
|
} catch (e) {
|
|
showToast('JSON 형식이 올바르지 않습니다.', 'error');
|
|
return;
|
|
}
|
|
} else {
|
|
data.options.service_account_path = document.getElementById('gcs-service-account-path').value;
|
|
}
|
|
|
|
if (!data.options.bucket_name) {
|
|
showToast('버킷 이름을 입력해주세요.', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const url = id
|
|
? `{{ url('system/ai-config') }}/${id}`
|
|
: '{{ route("system.ai-config.store") }}';
|
|
const method = id ? 'PUT' : 'POST';
|
|
|
|
const response = await fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.ok) {
|
|
showToast(result.message, 'success');
|
|
window.closeGcsModal();
|
|
location.reload();
|
|
} else {
|
|
showToast(result.message || '저장 실패', 'error');
|
|
}
|
|
} catch (error) {
|
|
showToast('저장 중 오류가 발생했습니다.', 'error');
|
|
}
|
|
}
|
|
|
|
// === Notion 설정 관련 함수들 ===
|
|
|
|
// Notion 모달 열기
|
|
window.openNotionModal = function(config) {
|
|
const modal = document.getElementById('notion-modal');
|
|
const title = document.getElementById('notion-modal-title');
|
|
|
|
if (config) {
|
|
title.textContent = 'Notion 설정 수정';
|
|
document.getElementById('notion-config-id').value = config.id;
|
|
document.getElementById('notion-name').value = config.name;
|
|
document.getElementById('notion-api-key').value = config.api_key || '';
|
|
document.getElementById('notion-api-version').value = config.model || '';
|
|
document.getElementById('notion-description').value = config.description || '';
|
|
document.getElementById('notion-is-active').checked = config.is_active;
|
|
} else {
|
|
title.textContent = 'Notion 설정 추가';
|
|
document.getElementById('notion-form').reset();
|
|
document.getElementById('notion-config-id').value = '';
|
|
}
|
|
|
|
modal.classList.remove('hidden');
|
|
};
|
|
|
|
// Notion 모달 닫기
|
|
window.closeNotionModal = function() {
|
|
document.getElementById('notion-modal').classList.add('hidden');
|
|
};
|
|
|
|
// Notion 수정
|
|
window.editNotionConfig = function(btn) {
|
|
try {
|
|
const config = JSON.parse(btn.dataset.config);
|
|
window.openNotionModal(config);
|
|
} catch (e) {
|
|
console.error('Config parse error:', e);
|
|
showToast('설정 데이터를 불러올 수 없습니다.', 'error');
|
|
}
|
|
};
|
|
|
|
// Notion 폼 제출
|
|
async function handleNotionFormSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
const id = document.getElementById('notion-config-id').value;
|
|
const apiKey = document.getElementById('notion-api-key').value;
|
|
|
|
if (!apiKey) {
|
|
showToast('API 키를 입력해주세요.', 'error');
|
|
return;
|
|
}
|
|
|
|
const data = {
|
|
provider: 'notion',
|
|
name: document.getElementById('notion-name').value,
|
|
api_key: apiKey,
|
|
model: document.getElementById('notion-api-version').value || '2025-09-03',
|
|
description: document.getElementById('notion-description').value || null,
|
|
is_active: document.getElementById('notion-is-active').checked,
|
|
options: {},
|
|
};
|
|
|
|
try {
|
|
const url = id
|
|
? `{{ url('system/ai-config') }}/${id}`
|
|
: '{{ route("system.ai-config.store") }}';
|
|
const method = id ? 'PUT' : 'POST';
|
|
|
|
const response = await fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.ok) {
|
|
showToast(result.message, 'success');
|
|
window.closeNotionModal();
|
|
location.reload();
|
|
} else {
|
|
showToast(result.message || '저장 실패', 'error');
|
|
}
|
|
} catch (error) {
|
|
showToast('저장 중 오류가 발생했습니다.', 'error');
|
|
}
|
|
}
|
|
|
|
// DOM 로드 후 이벤트 리스너 등록
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 페이지 로드 시 모달 강제 닫기
|
|
const modal = document.getElementById('config-modal');
|
|
if (modal) {
|
|
modal.classList.add('hidden');
|
|
}
|
|
const gcsModal = document.getElementById('gcs-modal');
|
|
if (gcsModal) {
|
|
gcsModal.classList.add('hidden');
|
|
}
|
|
const notionModal = document.getElementById('notion-modal');
|
|
if (notionModal) {
|
|
notionModal.classList.add('hidden');
|
|
}
|
|
|
|
// Provider 변경 시 기본 모델 업데이트 및 UI 전환
|
|
const providerEl = document.getElementById('config-provider');
|
|
if (providerEl) {
|
|
providerEl.addEventListener('change', function() {
|
|
const provider = this.value;
|
|
document.getElementById('default-model').textContent = defaultModels[provider];
|
|
document.getElementById('config-model').placeholder = '예: ' + defaultModels[provider];
|
|
|
|
// Gemini가 아니면 API 키 모드로 강제
|
|
if (provider !== 'gemini') {
|
|
document.getElementById('config-auth-type').value = 'api_key';
|
|
}
|
|
toggleAuthTypeUI(provider, document.getElementById('config-auth-type').value);
|
|
});
|
|
}
|
|
|
|
// 인증 방식 변경 시 UI 전환
|
|
const authTypeEl = document.getElementById('config-auth-type');
|
|
if (authTypeEl) {
|
|
authTypeEl.addEventListener('change', function() {
|
|
const provider = document.getElementById('config-provider').value;
|
|
toggleAuthTypeUI(provider, this.value);
|
|
});
|
|
}
|
|
|
|
// 폼 제출
|
|
const formEl = document.getElementById('config-form');
|
|
if (formEl) {
|
|
formEl.addEventListener('submit', handleFormSubmit);
|
|
}
|
|
|
|
// GCS 폼 제출
|
|
const gcsFormEl = document.getElementById('gcs-form');
|
|
if (gcsFormEl) {
|
|
gcsFormEl.addEventListener('submit', handleGcsFormSubmit);
|
|
}
|
|
|
|
// GCS 인증 방식 변경
|
|
const gcsAuthTypeEl = document.getElementById('gcs-auth-type');
|
|
if (gcsAuthTypeEl) {
|
|
gcsAuthTypeEl.addEventListener('change', function() {
|
|
toggleGcsAuthType(this.value);
|
|
});
|
|
}
|
|
|
|
// Notion 폼 제출
|
|
const notionFormEl = document.getElementById('notion-form');
|
|
if (notionFormEl) {
|
|
notionFormEl.addEventListener('submit', handleNotionFormSubmit);
|
|
}
|
|
|
|
// 모달 외부 클릭 시 닫지 않음 (의도치 않은 닫힘 방지)
|
|
// 닫기 버튼이나 취소 버튼으로만 닫을 수 있음
|
|
});
|
|
})();
|
|
</script>
|
|
@endpush
|