fix:단계 버튼 로직 완전 재작성
- @click → x-on:click (Blade 지시자 충돌 방지) - 동적 색상 → 고정 색상 bg-indigo-600 (Tailwind JIT 문제 방지) - 모든 조건 값을 @php에서 명시적 계산 - 조건 로직 단순화 ($isLastStep 불린 사용) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -151,16 +151,21 @@ class="border-t border-gray-100">
|
||||
|
||||
{{-- 단계 이동 버튼 --}}
|
||||
@php
|
||||
// 버튼 조건을 위해 총 단계 수를 명시적으로 계산
|
||||
$currentStepId = (int) $step['id'];
|
||||
$totalSteps = count($steps);
|
||||
$isLastStep = ($currentStepId >= $totalSteps);
|
||||
$nextStepId = $currentStepId + 1;
|
||||
$prevStepId = $currentStepId - 1;
|
||||
$stepColor = $step['color'] ?? 'blue';
|
||||
@endphp
|
||||
<div class="flex items-center justify-between pt-4 border-t border-gray-200">
|
||||
@if($step['id'] > 1)
|
||||
{{-- 이전 단계 버튼 --}}
|
||||
@if($currentStepId > 1)
|
||||
<button type="button"
|
||||
hx-get="{{ route('sales.scenarios.' . $scenarioType, $tenant->id) }}?step={{ $step['id'] - 1 }}"
|
||||
hx-get="{{ route('sales.scenarios.' . $scenarioType, $tenant->id) }}?step={{ $prevStepId }}"
|
||||
hx-target="#scenario-step-content"
|
||||
hx-swap="innerHTML"
|
||||
@click="window.dispatchEvent(new CustomEvent('step-changed', { detail: {{ $step['id'] - 1 }} }))"
|
||||
x-on:click="window.dispatchEvent(new CustomEvent('step-changed', { detail: {{ $prevStepId }} }))"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
|
||||
<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="M15 19l-7-7 7-7" />
|
||||
@@ -171,27 +176,28 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-70
|
||||
<div></div>
|
||||
@endif
|
||||
|
||||
@if($step['id'] < $totalSteps)
|
||||
{{-- 다음 단계 / 완료 버튼 --}}
|
||||
@if($isLastStep)
|
||||
<button type="button"
|
||||
hx-get="{{ route('sales.scenarios.' . $scenarioType, $tenant->id) }}?step={{ $step['id'] + 1 }}"
|
||||
hx-target="#scenario-step-content"
|
||||
hx-swap="innerHTML"
|
||||
@click="window.dispatchEvent(new CustomEvent('step-changed', { detail: {{ $step['id'] + 1 }} }))"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-{{ $step['color'] }}-600 rounded-lg hover:bg-{{ $step['color'] }}-700 transition-colors">
|
||||
다음 단계
|
||||
<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="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
@else
|
||||
<button type="button"
|
||||
@click="window.dispatchEvent(new CustomEvent('scenario-completed', { detail: { tenantId: {{ $tenant->id }}, scenarioType: '{{ $scenarioType }}' } }))"
|
||||
x-on:click="window.dispatchEvent(new CustomEvent('scenario-completed', { detail: { tenantId: {{ $tenant->id }}, scenarioType: '{{ $scenarioType }}' } }))"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors">
|
||||
<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="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
완료
|
||||
</button>
|
||||
@else
|
||||
<button type="button"
|
||||
hx-get="{{ route('sales.scenarios.' . $scenarioType, $tenant->id) }}?step={{ $nextStepId }}"
|
||||
hx-target="#scenario-step-content"
|
||||
hx-swap="innerHTML"
|
||||
x-on:click="window.dispatchEvent(new CustomEvent('step-changed', { detail: {{ $nextStepId }} }))"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors">
|
||||
다음 단계
|
||||
<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="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user