fix: [sales] 가격시뮬레이터 가입유형 선택 시 반전색 적용

- peer-checked CSS 대신 Alpine.js x-bind:class로 전환
- 선택된 카드: 에메랄드 배경 + 흰색 텍스트 + 그림자
- 미선택 카드: 흰색 배경 + 회색 테두리
This commit is contained in:
김보곤
2026-03-13 19:57:13 +09:00
parent 226f48ee96
commit bcb7a5cd67

View File

@@ -36,22 +36,24 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-70
<div class="bg-white rounded-xl shadow-sm p-5 mb-4">
<h3 class="text-sm font-semibold text-gray-700 mb-3">가입 유형</h3>
<div class="flex gap-3">
<label class="flex-1 cursor-pointer">
<input type="radio" x-model="signupType" value="individual" class="sr-only peer">
<div class="p-4 border-2 rounded-xl text-center transition-all peer-checked:border-emerald-500 peer-checked:bg-emerald-50 border-gray-200 hover:border-gray-300">
<div class="text-2xl mb-1">&#x1F464;</div>
<div class="font-semibold text-gray-900">개인 가입</div>
<div class="text-xs text-gray-500 mt-1">파트너 20% + 매니저 5%</div>
</div>
</label>
<label class="flex-1 cursor-pointer">
<input type="radio" x-model="signupType" value="group" class="sr-only peer">
<div class="p-4 border-2 rounded-xl text-center transition-all peer-checked:border-emerald-500 peer-checked:bg-emerald-50 border-gray-200 hover:border-gray-300">
<div class="text-2xl mb-1">&#x1F465;</div>
<div class="font-semibold text-gray-900">단체 가입</div>
<div class="text-xs text-gray-500 mt-1">단체 30% + 매니저 0%</div>
</div>
</label>
<div class="flex-1 cursor-pointer p-4 border-2 rounded-xl text-center transition-all"
:class="signupType === 'individual'
? 'border-emerald-600 bg-emerald-600 shadow-lg shadow-emerald-200'
: 'border-gray-200 bg-white hover:border-gray-300'"
x-on:click="signupType = 'individual'">
<div class="text-2xl mb-1">&#x1F464;</div>
<div class="font-semibold" :class="signupType === 'individual' ? 'text-white' : 'text-gray-900'">개인 가입</div>
<div class="text-xs mt-1" :class="signupType === 'individual' ? 'text-emerald-100' : 'text-gray-500'">파트너 20% + 매니저 5%</div>
</div>
<div class="flex-1 cursor-pointer p-4 border-2 rounded-xl text-center transition-all"
:class="signupType === 'group'
? 'border-emerald-600 bg-emerald-600 shadow-lg shadow-emerald-200'
: 'border-gray-200 bg-white hover:border-gray-300'"
x-on:click="signupType = 'group'">
<div class="text-2xl mb-1">&#x1F465;</div>
<div class="font-semibold" :class="signupType === 'group' ? 'text-white' : 'text-gray-900'">단체 가입</div>
<div class="text-xs mt-1" :class="signupType === 'group' ? 'text-emerald-100' : 'text-gray-500'">단체 30% + 매니저 0%</div>
</div>
</div>
{{-- 유치파트너(협업지원금) 토글 --}}
<label class="flex items-center gap-2 mt-3 cursor-pointer">