<aside> 💡 매칭 서비스

• 기능
  • 조건별 매칭 : 각 조건당 5명이하의 사용자 매칭 건수를 넘어가면 안 나옴
  • 하루에 5건의 카드만 보여주고 다음 날 다시 갱신
  • 관심 버튼, pick을 만들기 위해 그라데이션 색 사용
• 구현
  • 아래로 댕길 때 마다 현재 유저의 기준으로 오늘의 pick 유저 갱신
  • 기존 네비게이션 구조를 이해 후 (기존)캘린더 기능 → (new)매칭 기능으로 전환
  • 유저 카드 컴포넌트 구현
    • 다른 라이브러리 없이 직접 하나 하나 구현
  • 각 조건당 유저의 id와 타임스탬프를 조합하여 매칭 된 리스트 중에서 앞의 5개만 추려서 api로 전달
  • 오늘 접속한 친구 구현을 위해 사용자가 앱에 로그인 한 시점에 date를 서버에 저장 및 앱 내에 저장
• 서버와의 문제점
  • 유저와 서버 간의 통신이 느려 실시간으로 반영되지 않는 문제가 발생합니다. 이를 해결하기 위해서는 앱 메모리에 건너뛴 유저를 저장하고, 서버가 건너뛰기를 누른 유저를 거를 수 있도록 전송해야 합니다. </aside>

<aside> 💡 조건 매칭 화면

• 기능
  • 관심: 관심 있는 친구 목록으로 추가 및 다음 매칭에서는 제외
  • 건너 뛰기: 다음 매칭에서도 제외
  • 매칭 리스트를 캐러셀 형태로 구현
• 문제점
  • 이미지의 바탕이 흰색 경우 아래 흰 글씨가 안 보일 경우가 있어
  • 관심 버튼의 경우 state를 boolean으로 관리하지만 setState 함수 안에서 비즈니스 로직을 넣기엔 위험
    • 비즈니스 로직과 ui업데이트 로직 결합
    • 예측 불가능한 동작 발생 가능
    • 코드의 재사용과 테스트의 어려움
• 해결
  • 그라데이션으로 얇은 레이어를 생성해 흰 글씨가 더욱 잘 보이도록 개발
  • useReducer 를 사용한 커스텀 훅으로 useToggle를 만들어서 사용 </aside>

<aside> 💡 관심 버튼을 누른 유저 리스트

• 구현
  • flatList 를 통해 아바타 리스트 구현
• 관심 버튼의 상태를 전역으로 올려 다른 화면에서도 공유 가능 하도록 설정 ex) 다른 사람 프로필 보기

</aside>