📍 요구 사항
- 비회원에 대해 input 을 비활성화
- 클릭했을 때는 로그인 페이지로 유도
🚨 문제
input 태그를 disabled할 경우, 대부분의 이벤트를 받지 않음
HTML disabled 속성
disabled 속성이 폼 컨트롤 요소에 지정되면 해당 요소와 하위 폼 컨트롤 요소들은 제약 조건 검증에 참여하지 않습니다. 브라우저는 종종 해당 컨트롤들을 회색으로 나타내고 마우스 클릭이나 포커스와 관련된 브라우징 이벤트를 수신하지 않습니다.
✅ 해결 방법
onPointerDown 활용하기!
onPointerDown은 input 태그가 아닌 브라우저가 포인터 이벤트를 감지하기 때문에, input 태그가 비활성화된 상태에서도 클릭 이벤트를 설정할 수 있다.
낮에는 코드 치고 밤에는 글 씁니다.