[FE] fix: ios에서 형광펜 안되는 오류 수정 및 형광펜 색상 변경

[BadaHertz52]

• resolves [FE] 아이폰에서 형광펜 적용되지 않는 오류를 해결한다 #910

---

🚀 어떤 기능을 구현했나요 ?

• ios에서 drag로 형광펜 추가/삭제 안되는 오류를 수정했습니다 (아이패드에서 사파리, 크롬, 안드로이드 삼성 브라우저, 웹 크롬 브라우저에서 모두 문제 없는 것 확인했습니다)
• 형광펜 색상을 변경했습니다
  

🔥 ios 형광펜 오류

추정되는 원인

• 윈도우, 안드로이드,맥에서는 형광펜 버튼이 클릭되어도 클릭 시 선택된 글자를 읽어오지만, ios에서는 클릭으로 인해 selection 객체가 빈값이 됩니다. 형광펜 메뉴가 열리는 단계에서는 selection 객체를 잘 가져오기 때문에 이를 해결하기 위해 메뉴를 열 때의 selection 객체와 이를 가공한 정보(형광펜 적용/삭제에 필요한 정보)를 스토리지 저장, 상태 관리 둘 다 실험해봤습니다.

트러블 슈팅을 위한 실험

• 스토리지 저장 시 문제는 selection 객체나 선택이 된 element를 저장해야하는데, 이때 순환 참조문제로 스토리지에 저장할 수 없었습니다.
• useState로 저장을 시도했으나, iOS Safari에서의 렌더링 타이밍과 선택 영역 관리 방식이 데스크톱 브라우저와 달라 ios에서는 변경된 최신 상태를 받는 데 지연이 있어서 해결되지 않았습니다.
• ref를 사용해 랜더링 되지 않지만, 형광페 추가,삭제 이벤트에서 최신의 selection 객체 정보를 사용할 수 있도록 했습니다

추가 위치 오류

• ios에서는 글자 선택 시, 글자만 선택되는 것이 아니라 줄 사이의 공간도 같이 선택되는 이슈가 있었습니다. 그래서 형광펜 메뉴가 줄 사이에 들어가는 경우가 있어서 버튼을 클릭 할 수 없었습니다.
• 이를 해결하기 위해 navigator.userAgent를 사용해, AppWebkit(아이폰, 아이패드의 엔진)이 있는 지 판단해 아이폰,아이패트에서는 다시 한번 형광펜 메뉴 위치를 다시 조정하게 했습니다

📝 어떤 부분에 집중해서 리뷰해야 할까요?

• 아이폰, 아이패드 있으시면 직접 확인해보시는 것 추천 드립니다

📚 참고 자료, 할 말

• 맥 사야지, 폰 살때 아이폰으로 바꿔야지 (사고싶어서 그런거는 아니고 다양한 사용자 경험을 위해서 바꾸는 겁니다)

[BadaHertz52]

추가 사항

웹 접근성 리포트 영상 찍으면서, 로고에 대한 스크린 리더기 사용자 편의성 문제를 발견해 이를 해결했습니다

[soosoo22]

아이폰 사파리에서 확인했습니다~ 잘 동작하네요!! 뭔가... 훨씬 부드러워진 것 같아요~~

[chysis]

직접 테스트는 못 해봤지만 올리의 아이패드에서 작동하는 것 확인했어요! 정말 고생 많았습니다✨

[ImxYJL]

급하게 버그픽스하느라 넘 고생 많았어요! 아이폰 사파리 오류라 꼭 고쳐야 했는데 진짜 고쳐버리는 바다 리스펙트 👍👍