208 lines
11 KiB
PHP
208 lines
11 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'AI 견적서 생성')
|
|
|
|
@section('content')
|
|
<!-- 페이지 헤더 -->
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
|
<i class="ri-robot-line text-purple-600"></i>
|
|
AI 견적서 생성
|
|
</h1>
|
|
<a href="{{ route('rd.ai-quotation.index') }}" class="bg-white hover:bg-gray-100 text-gray-700 px-4 py-2 rounded-lg border transition">
|
|
<i class="ri-arrow-left-line"></i> 목록으로
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 생성 폼 -->
|
|
<div class="bg-white rounded-lg shadow-sm">
|
|
<div class="px-6 py-4 border-b border-gray-100">
|
|
<h2 class="text-lg font-semibold text-gray-800">인터뷰 내용 입력</h2>
|
|
<p class="text-sm text-gray-500 mt-1">고객사 인터뷰 내용을 입력하면 AI가 업무를 분석하고 맞춤형 견적서를 자동 생성합니다.</p>
|
|
</div>
|
|
|
|
<form id="quotationForm" class="p-6 space-y-6">
|
|
<!-- 제목 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">견적 제목 <span class="text-red-500">*</span></label>
|
|
<input type="text" name="title" id="inputTitle" required maxlength="200"
|
|
placeholder="예: (주)대한기계 ERP 도입 견적"
|
|
class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
|
|
</div>
|
|
|
|
<!-- 입력 유형 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">입력 유형</label>
|
|
<div class="flex gap-3">
|
|
<label class="flex items-center gap-2 px-4 py-2.5 border border-purple-500 bg-purple-50 text-purple-700 rounded-lg cursor-pointer">
|
|
<input type="radio" name="input_type" value="text" checked class="text-purple-600">
|
|
<i class="ri-file-text-line"></i> 텍스트 입력
|
|
</label>
|
|
<label class="flex items-center gap-2 px-4 py-2.5 border border-gray-300 bg-gray-50 text-gray-400 rounded-lg cursor-not-allowed" title="Phase 2 예정">
|
|
<input type="radio" name="input_type" value="voice" disabled>
|
|
<i class="ri-mic-line"></i> 음성 파일 (Phase 2)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Provider -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">AI Provider</label>
|
|
<div class="flex gap-3">
|
|
<label class="flex items-center gap-2 px-4 py-2.5 border rounded-lg cursor-pointer transition hover:bg-blue-50"
|
|
id="providerGemini">
|
|
<input type="radio" name="ai_provider" value="gemini" checked class="text-blue-600"
|
|
onchange="updateProviderUI()">
|
|
<span class="font-medium">Gemini</span>
|
|
<span class="text-xs text-gray-400">(기본)</span>
|
|
</label>
|
|
<label class="flex items-center gap-2 px-4 py-2.5 border rounded-lg cursor-pointer transition hover:bg-orange-50"
|
|
id="providerClaude">
|
|
<input type="radio" name="ai_provider" value="claude" class="text-orange-600"
|
|
onchange="updateProviderUI()">
|
|
<span class="font-medium">Claude</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 인터뷰 내용 -->
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<label class="text-sm font-medium text-gray-700">인터뷰 내용 <span class="text-red-500">*</span></label>
|
|
<button type="button" onclick="fillSampleInterview()" title="샘플 인터뷰 자동 입력"
|
|
class="w-7 h-7 flex items-center justify-center rounded-full bg-amber-100 text-amber-600 hover:bg-amber-200 hover:text-amber-700 transition">
|
|
<i class="ri-flashlight-line text-sm"></i>
|
|
</button>
|
|
</div>
|
|
<textarea name="input_text" id="inputText" rows="12" required
|
|
placeholder="고객사 직원과의 인터뷰 내용을 입력하세요."
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-y"></textarea>
|
|
<p class="text-xs text-gray-400 mt-1">인터뷰 내용이 구체적일수록 정확한 견적이 생성됩니다.</p>
|
|
</div>
|
|
|
|
<!-- 제출 -->
|
|
<div class="flex justify-end gap-3 pt-4 border-t border-gray-100">
|
|
<a href="{{ route('rd.ai-quotation.index') }}" class="px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
|
|
취소
|
|
</a>
|
|
<button type="submit" id="submitBtn"
|
|
class="px-6 py-2.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center gap-2">
|
|
<i class="ri-robot-line"></i> AI 분석 실행
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 결과 영역 (숨김) -->
|
|
<div id="resultArea" class="mt-6 hidden">
|
|
<div id="resultContent"></div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function updateProviderUI() {
|
|
const gemini = document.getElementById('providerGemini');
|
|
const claude = document.getElementById('providerClaude');
|
|
const selected = document.querySelector('input[name="ai_provider"]:checked').value;
|
|
|
|
gemini.classList.toggle('border-blue-500', selected === 'gemini');
|
|
gemini.classList.toggle('bg-blue-50', selected === 'gemini');
|
|
gemini.classList.toggle('border-gray-300', selected !== 'gemini');
|
|
claude.classList.toggle('border-orange-500', selected === 'claude');
|
|
claude.classList.toggle('bg-orange-50', selected === 'claude');
|
|
claude.classList.toggle('border-gray-300', selected !== 'claude');
|
|
}
|
|
|
|
document.getElementById('quotationForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const btn = document.getElementById('submitBtn');
|
|
const originalHtml = btn.innerHTML;
|
|
|
|
// 유효성 검사
|
|
const title = document.getElementById('inputTitle').value.trim();
|
|
const text = document.getElementById('inputText').value.trim();
|
|
if (!title || !text) {
|
|
alert('제목과 인터뷰 내용을 모두 입력하세요.');
|
|
return;
|
|
}
|
|
|
|
// 로딩 상태
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="ri-loader-4-line animate-spin"></i> AI 분석중... (30초~1분 소요)';
|
|
btn.classList.add('opacity-75');
|
|
|
|
try {
|
|
const formData = new FormData(this);
|
|
const data = Object.fromEntries(formData.entries());
|
|
|
|
const token = document.querySelector('meta[name="api-token"]')?.content
|
|
|| sessionStorage.getItem('api_token') || '';
|
|
|
|
const response = await fetch('{{ url("/api/admin/rd/ai-quotation") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
|
|
'Authorization': token ? `Bearer ${token}` : '',
|
|
},
|
|
credentials: 'same-origin',
|
|
body: JSON.stringify(data),
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success && result.data?.id) {
|
|
// 성공 — 상세 페이지로 이동
|
|
window.location.href = `{{ url('/rd/ai-quotation') }}/${result.data.id}`;
|
|
} else {
|
|
// 실패
|
|
alert(result.message || 'AI 분석에 실패했습니다.');
|
|
if (result.data?.id) {
|
|
window.location.href = `{{ url('/rd/ai-quotation') }}/${result.data.id}`;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error('AI 분석 요청 실패:', err);
|
|
alert('서버 통신 중 오류가 발생했습니다.');
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.innerHTML = originalHtml;
|
|
btn.classList.remove('opacity-75');
|
|
}
|
|
});
|
|
|
|
function fillSampleInterview() {
|
|
document.getElementById('inputTitle').value = '(주)대한기계 ERP 도입 견적';
|
|
document.getElementById('inputText').value = `Q: 현재 회사 규모와 업종을 알려주세요.
|
|
A: 저희는 기계부품 제조업체입니다. 직원이 45명 정도 되고, 공장 1곳에서 CNC 가공이랑 프레스 작업을 주로 하고 있어요. 사무직이 12명, 생산직이 33명입니다.
|
|
|
|
Q: 현재 업무 관리는 어떻게 하고 계세요?
|
|
A: 솔직히 거의 다 엑셀이에요. 직원 인사정보도 엑셀 파일로 관리하고, 출퇴근은 지문인식기가 있긴 한데 데이터를 엑셀로 뽑아서 월말에 수작업으로 정리해요. 급여도 엑셀로 계산하는데 4대보험 계산할 때마다 실수가 나서 스트레스예요.
|
|
|
|
Q: 영업 쪽은 어떤가요?
|
|
A: 영업팀이 4명인데, 견적서를 한글 프로그램으로 만들어서 이메일로 보내고 있어요. 고객한테 보낸 견적 이력이 각자 컴퓨터에 흩어져 있어서, 누가 퇴사하면 그 고객 정보가 다 날아가요. 수주 현황도 화이트보드에 적어놓고 회의 때 공유하는 수준이에요. CRM 같은 건 꿈도 못 꿔요.
|
|
|
|
Q: 생산 현장은요?
|
|
A: 작업일보를 종이에 써서 제출해요. 작업지시서도 종이로 출력해서 현장에 붙여놓고요. 불량이 나면 어디서 발생했는지 추적이 잘 안 돼요. LOT 관리를 하고 싶은데 현재는 수기로 하다 보니 한계가 있어요. 납기 관리도 엑셀인데, 긴급 주문 들어오면 일정 조정하느라 난리예요.
|
|
|
|
Q: 자재/재고 관리는요?
|
|
A: 재고는 한 달에 한 번 실사를 해봐야 알 수 있어요. 원자재가 얼마나 남았는지 실시간으로 파악이 안 되니까, 급하면 긴급 발주를 넣고 비싼 값에 사오는 경우도 많아요. 발주서도 엑셀로 만들어서 팩스로 보내요.
|
|
|
|
Q: 품질 관리 쪽은 어떤 상황인가요?
|
|
A: 수입검사는 하고 있긴 한데 검사 기록을 종이 대장에 적어요. 고객사에서 검사성적서 요청하면 수작업으로 만들어야 해서 시간이 오래 걸려요. ISO 인증 심사 때마다 서류 준비하느라 야근해요.
|
|
|
|
Q: 회계/재무 쪽은요?
|
|
A: 세금계산서는 홈택스에서 발행하고 있어요. 미수금 관리가 안 돼서 어떤 거래처가 얼마 미지급인지 파악하려면 한참 뒤져야 해요. 매출 현황도 월말에 정리하는 식이라 실시간 파악이 불가능해요.
|
|
|
|
Q: 가장 시급하게 개선하고 싶은 부분은?
|
|
A: 일단 생산 현황을 실시간으로 볼 수 있었으면 좋겠고, 재고 관리가 급해요. 그리고 직원 관리랑 급여 계산을 자동화하고 싶어요. 영업 쪽도 견적서 관리가 너무 안 되니까 개선이 필요해요.`;
|
|
}
|
|
|
|
// 초기 Provider UI
|
|
updateProviderUI();
|
|
</script>
|
|
@endpush
|