핵심 기능
다음은 핵심 기능에 대해서 말씀드리겠습니다.
먼저 일정 추가 기능입니다. 앞서 말했듯이 일정 추가 페이지에서 유저가 팔로잉한 팀의 게임 일정을 직관 일정으로 추가할 수 있습니다. 기존에 제공된 API로는 구현이 쉽지 않아 게시물 좋아요 기능과 상품등록 기능 복합적으로 사용해 구현하였습니다. 요약하자면 게임 포스트의 좋아요와 상품 일정이 연동이 됩니다. 중복된 게임 일정들을 하나로 모아 일정 추가를 눌렀을 경우 두 일정 모두 좋아요가 활성화되며 하나의 직관일정이 추가됩니다. 반대로 일정 취소를 눌렀을 경우 두 일정 모두 좋아요가 취소되며 해당 직관일정이 삭제됩니다.
해당 기능을 구현하면서 팔로잉된 팀의 일정이 겹치는 경우 여러가지 고려할 사항이 있었습니다.
먼저 일정 추가 페이지에서 중복 게임은 하나만 보여주는 기능입니다. 스포츠 팀을 여러 개 팔로우한 경우 게임 일정이 겹치게 됩니다. 일정 추가 페이지에서 같은 게임 일정을 반복해서 보여주지 않기 위해 같은 일정의 경우 Map으로 묶어 key 값으로는 게임 정보를 저장하고 value 값으로는 해당 게시물들의 ID를 저장했습니다. 그 Map을 다시 순환하면서 중복되더라도 하나만 보일 수 있도록 처리하였습니다.
다음은 일정을 추가 및 취소할 시 중복 게임을 전부 좋아요 활성화 및 취소 처리하는 사항입니다. 위에서 Map으로 처리하면서 key 값으로는 저장한 게임 정보를 리스트에 보여주고 value 값을 다시 순환하여 추가할 경우 해당되는 모든 게시물은 좋아요를 활성화시키고 취소할 경우 좋아요를 취소하였습니다.
좋아요 기능과 동시에 직관일정을 추가 및 취소를 하는 기능도 고려해야했습니다. 좋아요를 활성화 및 취소하면서 동시에 상품등록 API를 사용해 해당 게임일정 정보와 해당 게시물 정보들의 ID를 전부 저장해주었습니다. 이후 좋아요 활성화 및 취소할 경우 상품을 추가 및 삭제를 해야할 때 저장한 ID를 전부 순환하여 해당 직관일정을 삭제하도록 합니다.
밑의 코드는 게임 일정을 추가하여 좋아요를 활성화시키고 상품등록, 즉 직관 일정 등록, 을 시키는 코드입니다. 해당 포스트의 유저가 팀 유저라면 ids로 넘긴 모든 포스트가 게임 일정이니 전부 직관 일정에 등록을 시킵니다. 여기서 앞서 말했듯이 id를 ,로 분리한 상태로 조인해 link에 저장합니다. 그리고 해당 포스트들을 전부 좋아요를 활성하시킵니다.
다음은 날씨 API 입니다. 사용자에게 팔로우한 팀의 경기 날짜에 해당하는 당일 날씨 정보를 제공하기 위해 사용자가 팔로우한 팀의 경기 날짜와 경기장의 장소를 기준으로 OpenWeatherMap API를 호출하였습니다. 그러나 해당 API는 현재 날씨 정보만을 제공하기 때문에, 과거의 경기에 대한 날씨 정보를 가져올 수는 없었습니다. 따라서, 과거 경기의 경우에는 미리 저장한 날씨 정보를 사용했습니다. 이를 위해 현재 날씨을 다른 변수에 저장하여, 과거 경기의 경우 저장된 날씨 정보를 활용했습니다.
마지막으로 Intersection observer api를 사용한 무한 스크롤입니다. 스크롤 이벤트가 발생할 때마다 처리하는 것은 불필요하게 과도한 이벤트가 발생하여 성능 저하로 이어질 수 있기 때문에 Intersection Observer API를 사용하여 성능 저하를 방지하고 타겟 요소와 상위 요소 또는 최상위 document의 뷰포트 사이의 교차 영역 변화를 비동기적으로 관찰했습니다. 구체적으로, 리스트 요소의 가장 마지막에 요소에 ref를 설정하여 해당 요소의 가시성 변화를 감지하고, inView라는 변수의 값을 변경하도록 설정했습니다. inView 값이 true로 변경될 때마다 페이지 값을 증가시켜 화면 끝에 도달할 때마다 추가적인 게시물을 가져오도록 구현했습니다.
마지막으로 데이터가 아직 없어서 넣지는 않았지만 야구뿐만 아니라 축구, 농구, 배구 등등 다른 스포츠 관련해서 더 추가해 다른 스포츠 팬들도 사용할 수 있도록 확장해나갈 예정입니다. 가능하다면 실시간 크롤링도 구현하여 게임 경기를 실시간으로 업데이트하도록 구현하고 싶습니다.
