fix(youtube-bot): 토글 knob 위치를 X봇과 동일하게 (상하좌우 여백 균일)

knob을 mt-0.5 margin 방식 대신 absolute top-0.5 left-0.5로 위치 지정,
트랙에 relative 추가. 위아래가 잘려 보이던 문제 해결, 4개 토글 모두
X봇 다이얼로그와 동일한 비율로 통일.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-06-07 18:35:30 +09:00
parent 468bf1f3a7
commit 3d5f1d8a66

View file

@ -696,13 +696,13 @@ function YouTubeBotDialog({ isOpen, onClose, botId = null, onSuccess }) {
<p className="text-sm text-gray-500">매주 특정 요일에 임시 일정을 미리 생성합니다</p>
</div>
<div
className={`w-11 h-6 rounded-full transition-colors ${
className={`relative w-11 h-6 rounded-full transition-colors ${
autoScheduleEnabled ? 'bg-red-500' : 'bg-gray-200'
}`}
>
<div
className={`w-5 h-5 bg-white rounded-full shadow-sm transform transition-transform mt-0.5 ${
autoScheduleEnabled ? 'translate-x-5' : 'translate-x-0.5'
className={`w-5 h-5 absolute top-0.5 left-0.5 bg-white rounded-full shadow transition-transform ${
autoScheduleEnabled ? 'translate-x-5' : ''
}`}
/>
</div>
@ -773,13 +773,13 @@ function YouTubeBotDialog({ isOpen, onClose, botId = null, onSuccess }) {
</p>
</div>
<div
className={`flex-shrink-0 w-11 h-6 rounded-full transition-colors ${
className={`flex-shrink-0 relative w-11 h-6 rounded-full transition-colors ${
includeDefaultMembers ? 'bg-red-500' : 'bg-gray-200'
}`}
>
<div
className={`w-5 h-5 bg-white rounded-full shadow-sm transform transition-transform mt-0.5 ${
includeDefaultMembers ? 'translate-x-5' : 'translate-x-0.5'
className={`w-5 h-5 absolute top-0.5 left-0.5 bg-white rounded-full shadow transition-transform ${
includeDefaultMembers ? 'translate-x-5' : ''
}`}
/>
</div>
@ -870,13 +870,13 @@ function YouTubeBotDialog({ isOpen, onClose, botId = null, onSuccess }) {
<p className="text-xs text-gray-500">영상 설명에서 멤버 이름을 찾아 자동 연결</p>
</div>
<div
className={`w-10 h-5 rounded-full transition-colors ${
className={`relative w-10 h-5 rounded-full transition-colors ${
extractMembers ? 'bg-red-500' : 'bg-gray-200'
}`}
>
<div
className={`w-4 h-4 bg-white rounded-full shadow-sm transform transition-transform mt-0.5 ${
extractMembers ? 'translate-x-5' : 'translate-x-0.5'
className={`w-4 h-4 absolute top-0.5 left-0.5 bg-white rounded-full shadow transition-transform ${
extractMembers ? 'translate-x-5' : ''
}`}
/>
</div>
@ -892,13 +892,13 @@ function YouTubeBotDialog({ isOpen, onClose, botId = null, onSuccess }) {
<p className="text-xs text-gray-500">영상 제목에서 멤버 이름을 찾아 자동 연결</p>
</div>
<div
className={`w-10 h-5 rounded-full transition-colors ${
className={`relative w-10 h-5 rounded-full transition-colors ${
extractMembersFromTitle ? 'bg-red-500' : 'bg-gray-200'
}`}
>
<div
className={`w-4 h-4 bg-white rounded-full shadow-sm transform transition-transform mt-0.5 ${
extractMembersFromTitle ? 'translate-x-5' : 'translate-x-0.5'
className={`w-4 h-4 absolute top-0.5 left-0.5 bg-white rounded-full shadow transition-transform ${
extractMembersFromTitle ? 'translate-x-5' : ''
}`}
/>
</div>