[refactor] 인터랙션 상태 전역으로 변경 및 리팩토링

[lybell-art]

#️⃣ 연관 이슈

• [feat] 메인-인터랙션 페이지 #10
• [feat] 메인-모달-기타 #24
• [feat] 인터랙션 페이지 오프라인 폴백 모드 추가 #102

📝 작업 내용

추첨 이벤트의 참여 상태는 이제 전역적으로 관리됩니다.

• 내부적으로 서버 시간을 가져와서 참조하고 있습니다. 선착순 이벤트 쪽에도 서버시간을 가져오는 로직이 있긴 하지만, getQuery 함수를 이용하여 동일한 key값으로 참조해서 캐싱하고 있기 때문에 중복해서 호출되지 않습니다.
  • 그에 따라 추첨 이벤트 로직에서 선착순 이벤트의 서버시간을 가져오는 해괴한 로직이 제거됩니다.
• 추첨 이벤트 관련 참여 로직이라거나, 오늘 참여한 상태라거나 등 비즈니스 로직은 전부 전역 상태에서 관리하도록 변경했습니다.
• 오프라인 폴백 로직도 여기에 들어갑니다.

인터랙션 섹션의 리팩토링을 수행했습니다.

• 여러 개의 관심사가 혼재되어 있는 컴포넌트를 분리했습니다. 그 예시로, InteractionAnswer 컴포넌트에서 관심사가 다른 것들이 묶여 있던 것들을 별도의 컴포넌트로 분리했습니다. InteractionAnswer 컴포넌트는 거의 순수하게 컴포지션만 수행합니다.
• index라는 값에 의존하고 있던 인터랙션 모달 컴포넌트의 index 상태를 Context API로 관리하도록 수정했습니다. 외부의 Context의 값만 바꾸면 모든 것들이 정상적으로 동작합니다.

약간의 명세에 맞는 기능을 추가했습니다.

• 응모 완료 안내 문구는 이제 명세에 맞는 적절한 문구를 띄워줍니다.
  • 이벤트 당일에 해당하는 인터랙션에 응모를 했으면 "오늘의 응모가 완료되었습니다!"가, 그 상태에서 새로고침해서 재진입하면 "이미 응모했습니다!"가 띄워집니다.
  • 사용자가 강제로 다음 날의 이벤트를 진입할 때에는 문구가 안 띄워집니다.
• 사용자가 응모를 완료할 때, 이제 탭 바가 적절하게 렌더링됩니다.
  • 이벤트 당일에 해당하는 날짜가 체크표시됩니다.
• 선착순 이벤트 탈락 모달에서, 이제 그 날의 추첨 이벤트 참여 여부에 따라 "추첨 이벤트 참여하기" 버튼을 렌더링해줍니다.

카드 게임 관련 버그를 수정했습니다.

• 카드 게임에서 비로그인 상태에서 정보를 등록하면 선택한 카드가 즉시 안 뒤집히던 버그를 수정했습니다.

return new Promise((resolve) => {
  openModal(<AuthModal onComplete={() => resolve(getCardAnswerOnline(index))} />);
});

• openModal 함수를 Promise로 래핑한 뒤, onComplete 함수에 resolve를 걸어주어, 모달이 성공적으로 발생되면 resolve를 하도록 했습니다.
• 단, 이 경우 정보등록을 안 하고 리젝할 경우 무한히 Promise가 pending 상태에 걸린다는 문제가 있는데, 그건 내일 해결하겠습니다.
• dev 서버에서, 카드 게임에서 정보등록을 완료했는데 토큰이 즉시 사라져서 정보등록이 안 되는 버그를 수정했습니다.
  • 해당 문제는 제가 jwt 토큰을 해석하겠다고 mock 서버에서 로그인할 때 주는 토큰을 바꿔놓았는데, 선착순 이벤트 mock api에서 이전에 쓰던 토큰 문자열을 이용해서 유효한 사람임을 핸들링하는 로직이 있어서 생긴 문제였습니다.

[darkdulgi]

고생하셨습니다!