feat: [users] 직급/직책 label에 info 툴팁 아이콘 추가

- 직급: "조직 내 서열" 설명 (사원, 대리, 과장 등)
- 직책: "맡은 역할/책임" 설명 (팀장, 실장 등)
- hover 시 tooltip 표시 (group/invisible 패턴)
This commit is contained in:
김보곤
2026-02-28 08:11:03 +09:00
parent 0ee6b9f77a
commit a5abd950f2
2 changed files with 44 additions and 4 deletions

View File

@@ -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">

View File

@@ -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">