feat:영업관리 대시보드에 도움말 버튼 추가

- 페이지 헤더에 도움말(i) 버튼 추가
- 영업파트너가이드북.md를 모달로 표시
- HTMX로 마크다운 콘텐츠 로드 및 HTML 변환
- max-w-6xl 모달로 가독성 확보

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
김보곤
2026-01-31 21:08:40 +09:00
parent d09960cf58
commit ebf1055564
4 changed files with 120 additions and 1 deletions

View File

@@ -12,6 +12,7 @@
use App\Services\SalesCommissionService;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;
use Illuminate\Support\Str;
use Illuminate\View\View;
/**
@@ -490,4 +491,22 @@ private function getCommissionData(): array
return compact('commissionSummary', 'recentCommissions', 'partner');
}
/**
* 영업파트너 가이드북 도움말 모달
*/
public function helpGuide(): View
{
// 가이드북 마크다운 파일 읽기
$guidePath = base_path('../docs/guides/영업파트너가이드북.md');
if (file_exists($guidePath)) {
$markdown = file_get_contents($guidePath);
$htmlContent = Str::markdown($markdown);
} else {
$htmlContent = '<p class="text-gray-500">가이드북을 찾을 수 없습니다.</p>';
}
return view('sales.dashboard.partials.help-modal', compact('htmlContent'));
}
}

View File

@@ -20,7 +20,19 @@
<div class="space-y-6" x-data="{ activeTab: 'my-activity' }">
<!-- 페이지 헤더 -->
<div class="flex justify-between items-center">
<h1 class="text-2xl font-bold text-gray-800">영업관리 대시보드</h1>
<div class="flex items-center gap-3">
<h1 class="text-2xl font-bold text-gray-800">영업관리 대시보드</h1>
<button type="button"
hx-get="{{ route('sales.salesmanagement.dashboard.help') }}"
hx-target="#help-modal-container"
hx-swap="innerHTML"
class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 transition-colors"
title="도움말">
<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
</div>
</div>
<!-- 수당 지급 일정 안내 -->
@@ -94,6 +106,9 @@ class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm transition-col
{{-- 시나리오 모달용 포털 --}}
<div id="modal-portal"></div>
{{-- 도움말 모달용 컨테이너 --}}
<div id="help-modal-container"></div>
@endsection
@push('scripts')

View File

@@ -0,0 +1,84 @@
{{-- 영업파트너 가이드북 도움말 모달 --}}
<div x-data="{ open: true }"
x-show="open"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 z-50 overflow-y-auto"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true">
{{-- 배경 오버레이 --}}
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="open = false; setTimeout(() => { document.getElementById('help-modal-container').innerHTML = '' }, 200)"></div>
{{-- 모달 컨테이너 --}}
<div class="flex min-h-full items-center justify-center p-4">
<div x-show="open"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
class="relative transform overflow-hidden rounded-xl bg-white shadow-2xl transition-all w-full max-w-6xl max-h-[90vh] flex flex-col">
{{-- 헤더 --}}
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-blue-700 flex-shrink-0">
<div class="flex items-center gap-3">
<div class="p-2 bg-white/20 rounded-lg">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
</div>
<h3 class="text-xl font-bold text-white" id="modal-title">영업파트너 가이드북</h3>
</div>
<button type="button"
@click="open = false; setTimeout(() => { document.getElementById('help-modal-container').innerHTML = '' }, 200)"
class="p-2 text-white/80 hover:text-white hover:bg-white/20 rounded-lg transition-colors">
<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="flex-1 overflow-y-auto p-6">
<div class="prose prose-lg max-w-none
prose-headings:text-gray-900
prose-h1:text-3xl prose-h1:font-bold prose-h1:border-b prose-h1:border-gray-200 prose-h1:pb-4 prose-h1:mb-6
prose-h2:text-2xl prose-h2:font-bold prose-h2:text-blue-700 prose-h2:mt-10 prose-h2:mb-4 prose-h2:border-l-4 prose-h2:border-blue-500 prose-h2:pl-4
prose-h3:text-xl prose-h3:font-semibold prose-h3:text-gray-800 prose-h3:mt-6 prose-h3:mb-3
prose-h4:text-lg prose-h4:font-medium prose-h4:text-gray-700
prose-p:text-gray-600 prose-p:leading-relaxed
prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
prose-strong:text-gray-900
prose-code:text-pink-600 prose-code:bg-gray-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm
prose-pre:bg-gray-900 prose-pre:text-gray-100 prose-pre:rounded-lg prose-pre:shadow-lg
prose-blockquote:border-l-4 prose-blockquote:border-blue-400 prose-blockquote:bg-blue-50 prose-blockquote:py-2 prose-blockquote:px-4 prose-blockquote:rounded-r-lg prose-blockquote:not-italic prose-blockquote:text-gray-700
prose-table:border-collapse prose-table:w-full
prose-th:bg-gray-100 prose-th:border prose-th:border-gray-300 prose-th:px-4 prose-th:py-2 prose-th:text-left prose-th:font-semibold
prose-td:border prose-td:border-gray-300 prose-td:px-4 prose-td:py-2
prose-tr:even:bg-gray-50
prose-ul:list-disc prose-ul:pl-6
prose-ol:list-decimal prose-ol:pl-6
prose-li:text-gray-600 prose-li:mb-1
prose-hr:border-gray-200 prose-hr:my-8">
{!! $htmlContent !!}
</div>
</div>
{{-- 푸터 --}}
<div class="flex items-center justify-end px-6 py-4 border-t border-gray-200 bg-gray-50 flex-shrink-0">
<button type="button"
@click="open = false; setTimeout(() => { document.getElementById('help-modal-container').innerHTML = '' }, 200)"
class="px-6 py-2.5 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition-colors">
닫기
</button>
</div>
</div>
</div>
</div>

View File

@@ -881,6 +881,7 @@
Route::get('salesmanagement/dashboard/refresh', [\App\Http\Controllers\Sales\SalesDashboardController::class, 'refresh'])->name('salesmanagement.dashboard.refresh');
Route::get('salesmanagement/dashboard/tenants', [\App\Http\Controllers\Sales\SalesDashboardController::class, 'refreshTenantList'])->name('salesmanagement.dashboard.tenants');
Route::get('salesmanagement/dashboard/partner-activity', [\App\Http\Controllers\Sales\SalesDashboardController::class, 'partnerActivity'])->name('salesmanagement.dashboard.partner-activity');
Route::get('salesmanagement/dashboard/help', [\App\Http\Controllers\Sales\SalesDashboardController::class, 'helpGuide'])->name('salesmanagement.dashboard.help');
// 영업파트너 승인 (본사 관리자 전용) - resource 전에 정의해야 함
Route::get('managers/approvals', [\App\Http\Controllers\Sales\SalesManagerController::class, 'approvals'])->name('managers.approvals');