[feat, fix, refactor] 선착순 안내 경품 섹션 추가, 각종 버그 수정

[lybell-art]

#️⃣ 연관 이슈

• [feat] 메인-선착순 이벤트 #13
• [fix] 간헐적으로 인터랙션 모달 내의 인터랙션이 동작하지 않음 #77
• [fix] 모달이 2개 띄워진 상황에서 모달이 닫힐 때 스크롤이 처음으로 되돌아감 #81

📝 작업 내용

선착순 이벤트의 경품 섹션을 추가했습니다.

• 경품 섹션의 하이라이팅은 선착순 이벤트에서 받아온 서버시간 상태를 기반으로 합니다.
• 네트워크가 느리다면, 처음에 일반 상태로 보여지다가 응답을 받자마자 하이라이팅이 될 텐데, 정상입니다.

PC 환경에서 드래그 인터랙션이 작동하지 않던 버그를 수정했습니다.

원인은 드래그 시 인터랙션 설명이 선택되고, 다시 드래그를 하면 텍스트를 끌려는 브라우저 동작을 수행하려 하기 때문이었습니다. 드래그 도중에는 텍스트가 선택되지 않도록 수정했습니다.

서버 에러 시 카드 게임이 오프라인 폴백 모드로 전환되지 않는 버그를 수정했습니다.

participated가 401 에러를 반환해도, 정상적으로 카드 게임을 할 수는 있습니다. 단, 이 경우는 로그인 요청이 뜨겠지요.
또한, 이벤트가 404 에러를 반환해도 오프라인 폴백 모드로 카드 게임이 전환됩니다.

인터랙션의 성능을 향상시켰습니다.

정확히는, 인터랙션을 포함한 모든 렌더링의 성능을 심각하게 저해하고 있던 backdrop을 제거했고, 미리 블러처리된 10kb 가량의 대체 이미지를 띄우도록 했습니다. 이렇게 하면 심각하게 GPU를 잡아먹던 backdrop이 제거되면서 모든 인터랙션의 성능이 향상됩니다.

모달이 2개 띄워져 있을 때 모달을 닫으면 본문이 맨 처음으로 스크롤하고, 그 상태에서 본문을 스크롤할 수 있던 버그를 수정했습니다.

모달을 열거나 닫는 동작을 수행할 시, 모달이 하나라도 열려 있을 때 본문의 스크롤을 방지시키고, 1개에서 0개로 전환할 때 본문의 스크롤을 푸는 동작을 추가하도록 하여 버그를 수정했습니다.

그 외 변경사항

• 인터랙션 모달에서 사용하는 버튼을 디자인 시스템에 맞추어, 공통 버튼 컴포넌트를 사용하도록 했습니다. 이에 맞추어, 버튼 컴포넌트를 확장했습니다. 공통 버튼 컴포넌트의 사용법은 향후 위키에 게시할 예정입니다.
  • 저희 디자인 명세에 따라 비활성화, 호버링, 클릭 등이 정의되어 있으므로, 이제 인터랙션 모달 내에 있는 버튼들은 호버링하면 다른 디자인으로 보여질 겁니다.
• useMountDragEvent 훅은 이제 자체적으로 드래그 시작 및 종료 상태를 관리합니다. 즉, useMountDragEvent 훅을 사용하는 입장에서 이제 드래그가 되고 있는지를 관리해야 할 필요가 없어집니다. 이에 따라, 인터페이스가 많이 바뀌었습니다.
• 약간의 리팩토링을 수행했습니다.
  • 고속충전 인터랙션에 사용되던 매직 넘버를 상수화시켰고, 리셋 코드를 간결하게 만들었습니다.
  • InteractionSlide 컴포넌트에 쓰이던, eventDate 함수를 밖으로 분리하였고, 해당 로직이 index에 의존하므로 index를 매개변수로 받는 순수함수로 변경했습니다.
  • TapBar 컴포넌트가 swiperRef가 아니라 slideTo 함수를 props로 받도록 변경했습니다.
• 이벤트 상세 정보는 이제 인터랙션 섹션과 선착순 섹션이 공유합니다. 추가로, 이벤트 상세 정보 중 참여방법 섹션은 이제 모바일 환경에선 3행 1열로 나옵니다.
• 이벤트 상세 정보에 대한 반응형 디자인을 수정했습니다.

💬 리뷰 요구사항

현재 선착순 이벤트, 메인 섹션, 인터랙션 섹션에서 "서버 시간"이라는 상태를 공통적으로 요구하고 있습니다. 이에 선착순 이벤트에 정의되어 있던 서버시간 및 이벤트 상태 로직을 fcfs 종속이 아닌 별도의 기능으로 판정하여, 별도의 기능으로 분리하는 것을 고려하고 있습니다.
다만, "서버시간"이라는 상태가 서버에 종속되어 있고, 별개의 상태로 분리한다면 use를 2번 써야 하는데, 이러면 서버시간 받아온 뒤 또 폴백이 작동해서 네트워크 워터폴이 일어난다는 문제가 있습니다. (use로 서버 데이터 가져오는 건 무조건 순차적으로 수행됨)

[darkdulgi]

고생하셨습니다!