📢 Description

다크모드일 때 새로고침을 하면 화면이 한 번 흰색으로 깜빡이는 문제가 있습니다.
페이지가 기본적으로 흰 색으로 렌더링되다가 theme 정보를 받아온 이후 다크모드로 렌더링되기 때문인 것 같은데,
문제를 정확히 파악하고 고쳐보도록 합시다.

💎 Requirements

다크모드일 때 새로고침을 해도 하얗게 깜빡이지 않도록 구현할 것.

✨ Todo

• 문제의 원인 파악하기
• 문제 해결하여 코드 수정하기
• 문제가 해결된 이후 기존과 동일하게 동작하는지 확인하기

🐣 ETC

웹개발 어려워잉

📢 Description

캘린더가 PC에서 테스트해봤을 때 잘 선택되었는데 모바일 터치에서는 느린감이 있습니다.
이를 해결한 라이브러리를 찾아 변경하고자 합니다.

💎 Requirements

기존 기능을 그대로 이어받기 + (터치 이슈 해결, 스크롤 터치 가능?)

✨ Todo

• 모바일 친화적 캘린더 라이브러리 찾기
• 기존 기능이 다 되는지 확인
• 기존 라이브러리 제거
• 잘 되는지 테스트

🐣 ETC

📢 Description

현재 모바일 환경에서는 click event 대신 touch event로 날짜 버튼을 컨트롤하고 있습니다.
iOS 환경의 모바일 브라우저에는 magnifying glass 라는 기능이 있는데요. 이 기능 때문에 달력의 날짜 버튼에 오작동이 발생하여 이를 방지하기 위한 까닭입니다.
그런데, 사용자가 페이지를 스크롤하기 위해 달력 부분을 터치해서 움직이면 터치가 발생한 곳의 날짜가 의도치 않게 선택 / 선택해제가 되어버립니다.

원래는 touchStart event와 touchEnd event 사이에 touchMove event가 발생하면 click event로 이어지지 않고, touchMove event가 없어야만 click event가 발생하여 버튼이 제대로 동작합니다.
하지만 우리 달력의 날짜 버튼은 (모바일 환경에서만) touch event로 제어되기 때문에, 사용자의 touch가 스크롤을 위한 것인지, 날짜 버튼 선택을 위한 것인지 개발자가 구분해내야 합니다.

이전 커밋에서 이를 방지하기 위한 로직을 넣었으나 이번엔 갤럭시 디바이스에서 터치가 먹통이 되는 문제가 발생하더군요.
따라서 운영체제나 기종에 상관없이 문제가 발생하지 않으면서도 select와 scroll을 구분할 수 있는 방법을 찾아보려 합니다.

💎 Requirements

사용자의 터치가 날짜 선택인지, 스크롤링인지에 따라 올바르게 작동하도록 코드 수정하기
모바일 환경에서 실제로 페이지가 스크롤 되었는지를 알 수 있는 방법이 있다면 좋을텐데.. 찾아봅시다.

✨ Todo

• 날짜 선택을 위한 터치에만 날짜 버튼이 작동하도록 하고, 스크롤링 할 때에는 버튼이 동작하지 않도록 할 것
• 운영체제나 기기와 상관없이 의도대로 동작하는지 충분히 테스트할 것

🐣 ETC

쉽게만 생각했는데..
생각보다 까다롭군요.

나아가서, 손가락으로 쓸면서 날짜를 한 번에 선택할 수 있도록 구현하는 방법도 같이 고려해보면 좋을 것 같군요.

📢 Description

협업을 위해 prettier 설정을 합니다.
작업자마다 설정이 다르면 고치지 않아도 될 부분이 변경되기 때문에 프로젝트에 프리티어 관련 파일을 만듭니다.

💎 Requirements

prettier 파일 만들기
코드라인 마지막에 ; 붙지 않도록 하기
저장 시 프리티어 포맷으로 저장되도록 하기 (각자 VS Code에 있는 settings.json 파일에다 적용하기)

✨ Todo

• prettier가 프로젝트에 설치되어 있지 않다면 설치
• prettier 설정 살펴보기
• prettier 파일 생성
• 저장 시 prettier format으로 저장되게끔 변경
• 예상대로 동작하는지 테스트

🐣 ETC

추가적으로 하고싶은 옵션이 있으면 알려주세요~ 적용해봅시다!

📢 Description

다크모드 아이콘을 두번 눌러야 바뀝니다.
그 뒤로는 정상적으로 동작합니다.
제 생각에는 초기 값이 세팅되어 있지 않아서 그런 것 같습니다!

💎 Requirements

처음에 theme이 빈값이라면 시스템 설정을 따라가기 (되는지 확인)
가능하다면 로컬스토리지나 쿠키로 테마 설정 저장해두기 (브라우저가 알아서 하고 있는지 모르겠음ㅜ)

✨ Todo

• 오류 파악하기
• 테스트하기

🐣 ETC

갓hhwang

📢 Description

현재는 출석 가능한 날짜는 모두 선택이 되어있는 상태가 default 입니다.
하지만 사람마다 출석하는 날짜가 많을 수도, 적을 수도 있습니다.
따라서 달력에 있는 날짜를 전체 선택하거나 전체 선택 해제할 수 있는 버튼이 있다면 편리할 것 같습니다.

💎 Requirements

오늘 기준으로 출석이 가능한 날짜 전체 선택 / 전체 선택해제 버튼 만들기
적절한 버튼 형식 (토글, 개별 버튼 등) 고려하여 만들 것

✨ Todo

• 버튼 UI/UX 고려하여 구현하기
• 기능에 이상은 없는지 잘 체크하고 테스트해보기

🐣 ETC

기능을 조금 더 고도화 할 수는 없을까?
평일만 선택하기, 주말 선택 해제하기, 선택했다가 해제하면 기존에 선택했던 날짜들로 돌아오기 뭐 이런..?
너무 기능이 많아지면 복잡해지니까 잘 생각해보자.