(#98) 모바일(PWA) 설정 및 오류해결

[ldg-96]

📝작업 내용

• ios 환경에서 버튼태그 내 글자색상이 파란색으로 표시

  • reset.css의 button속성값으로 color: inherit;을 추가

• pc환경에서는 달력의 날짜 클릭시 바로 리스트로 가지지만 모바일 환경에서는 클릭후 0.2~0.4초정도 기다린후 클릭을 때야 클릭이벤트를 인식함

  • preventScroll: true 속성값 때문에 스크롤과 드래그의 판별 여부를 체크하느라 약300ms정도 지연되어 날짜를 짧게 클리시 onClick이벤트가 발생하지 않았음. 해당 속성값 제거

• 브라우저의 기본 스크롤 동작과 use-gesture 라이브러리의 드래그 이벤트가 충돌, 사용자가 수평으로 움직여도 약간의 수직움직임이 감지되면 이를 페이지 스크롤로 인식하여 use-drag 핸들러가 동작하지 않게됨.

  • css속성에 touch-action: pan-y; 추가

• 추가로 안드로이드 스튜디오 에뮬레이터로 모바일 환경을 테스트 해볼수 있도록 별도의 환경을 구성하였습니다. server.js같은경우는 로컬에서 https로 실행하는것에 관련된 파일이므로 github에는 올리지 않았습니다.

#️⃣연관된 이슈

#98

[SimYunSup]

suggestion(blocking): node version이 20버전 이상이면 --env-file을 사용할 수 있습니다. 검토해보시죠.

[ldg-96]

윤섭님의 조언대로 dotenv를 쓰지않고 아래와 같은 코드로 변경하였습니다.
"phone": "node --env-file=.env.phone server.js"
dotenv 라이브러리는 제거하였습니다