[트러블슈팅] 투표카드 스와이프 모바일 개선 - 100-hours-a-week/4-bull4zo-fe GitHub Wiki

투표 카드 스와이프 모바일 동작 개선(5/22)

🐞 에러 내용

• 모바일의 경우 투표 카드의 스와이프 과정에서 막히는 현상이 존재함

🔍 원인 분석

• 투표 카드에 내용이 최대 255자로 선정되어 초과된 내용이 overflow-y가 적용되면서 모바일 기준 스와이프인지 스크롤인지 인식이 제대로 되지 않아 발생한 문제
• 카드와 높이 디자인이 모바일의 브라우저의 검색 url과 하단 naviagtion을 고려하지 않은 뷰포트 설정

✅ 해결 방법

• 카드의 내용을 스와이프라는 내용에 맞게 최대 100자로 제한. 내용은 y축 스크롤이 절대 발생하지 않는다.
• 전체적인 높이 기준을 vh에서 최소치에 맞추는 svh로 변경

🤔 향후 대응 방안

• 카드 영역의 경우, 글자양에 비례해 텍스트가 변하도록 개선이 가능

💬 회고

• svh를 처음부터 썻다면 사용성이 더 높았을것으로 판단됨