feat: [users] 직급/직책 label에 info 툴팁 아이콘 추가
- 직급: "조직 내 서열" 설명 (사원, 대리, 과장 등) - 직책: "맡은 역할/책임" 설명 (팀장, 실장 등) - hover 시 tooltip 표시 (group/invisible 패턴)
This commit is contained in:
@@ -71,7 +71,17 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
|
||||
<h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">직급/직책</h2>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">직급</label>
|
||||
<label class="flex items-center gap-1 text-sm font-medium text-gray-700 mb-1">
|
||||
직급
|
||||
<span class="relative group">
|
||||
<svg class="w-4 h-4 text-gray-400 hover:text-blue-500 cursor-help transition-colors" 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>
|
||||
<span class="invisible group-hover:visible absolute z-10 left-1/2 -translate-x-1/2 top-6 w-56 px-3 py-2 text-xs font-normal text-white bg-gray-800 rounded-lg shadow-lg whitespace-normal leading-relaxed">
|
||||
<b>직급</b>은 조직 내 서열을 나타냅니다.<br>예: 사원, 대리, 과장, 차장, 부장
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<select name="position_key" id="position_key"
|
||||
class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||||
@@ -86,7 +96,17 @@ class="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg transiti
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">직책</label>
|
||||
<label class="flex items-center gap-1 text-sm font-medium text-gray-700 mb-1">
|
||||
직책
|
||||
<span class="relative group">
|
||||
<svg class="w-4 h-4 text-gray-400 hover:text-blue-500 cursor-help transition-colors" 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>
|
||||
<span class="invisible group-hover:visible absolute z-10 left-1/2 -translate-x-1/2 top-6 w-56 px-3 py-2 text-xs font-normal text-white bg-gray-800 rounded-lg shadow-lg whitespace-normal leading-relaxed">
|
||||
<b>직책</b>은 맡은 역할/책임을 나타냅니다.<br>예: 팀장, 실장, 본부장, 대표이사
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<select name="job_title_key" id="job_title_key"
|
||||
class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||||
|
||||
@@ -75,7 +75,17 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
|
||||
<h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">직급/직책</h2>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">직급</label>
|
||||
<label class="flex items-center gap-1 text-sm font-medium text-gray-700 mb-1">
|
||||
직급
|
||||
<span class="relative group">
|
||||
<svg class="w-4 h-4 text-gray-400 hover:text-blue-500 cursor-help transition-colors" 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>
|
||||
<span class="invisible group-hover:visible absolute z-10 left-1/2 -translate-x-1/2 top-6 w-56 px-3 py-2 text-xs font-normal text-white bg-gray-800 rounded-lg shadow-lg whitespace-normal leading-relaxed">
|
||||
<b>직급</b>은 조직 내 서열을 나타냅니다.<br>예: 사원, 대리, 과장, 차장, 부장
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<select name="position_key" id="position_key"
|
||||
class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||||
@@ -92,7 +102,17 @@ class="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg transiti
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">직책</label>
|
||||
<label class="flex items-center gap-1 text-sm font-medium text-gray-700 mb-1">
|
||||
직책
|
||||
<span class="relative group">
|
||||
<svg class="w-4 h-4 text-gray-400 hover:text-blue-500 cursor-help transition-colors" 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>
|
||||
<span class="invisible group-hover:visible absolute z-10 left-1/2 -translate-x-1/2 top-6 w-56 px-3 py-2 text-xs font-normal text-white bg-gray-800 rounded-lg shadow-lg whitespace-normal leading-relaxed">
|
||||
<b>직책</b>은 맡은 역할/책임을 나타냅니다.<br>예: 팀장, 실장, 본부장, 대표이사
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<select name="job_title_key" id="job_title_key"
|
||||
class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||||
|
||||
Reference in New Issue
Block a user