SPOTS

항해99 9기 마지막 실전 프로젝트로 팀원 총 6명이서 만든 스포츠 구장 예약 플랫폼이다. 팀 리더로 활동했고 하루 12시간 넘게 몰입했던 기억이 난다.

작업 기간 2022.11 ~ 2022.12(6w)
GitHub https://github.com/eunrain/spots-fe
Language JavaScript
Platform Web(PWA)
Skill Stack React, Redux Toolkit, AXIOS, styled-component, amazon S3, soket.io
Tools VSCode, GiHub, Slack, Notion, Figma, Vercel, Swagger

내가 기여한 프로젝트 부분 및 트러블 슈팅은 아래 👻

• 프로젝트 리딩

  • FE 3명, BE 3명, 디자이너 1명인 총 7명의 1개 개발팀 리드
  • 전략적 MVP 설정, 하루 2회 회의를 통해 진행 상황과 이슈 실시간 검토
  • 3차 MVP 달성 후 7일간 유저 테스트 진행, 70개의 유저 피드백을 통한 유지 보수
  

• 구장 통합 검색 기능
  • 구장의 실제 좌푯값(튜플 데이터)을 활용하여 맵 위에 마커로 표시(카카오맵API 활용)
  • 서울시 공공체육시설 API 연동, 실시간 예약 가능 여부를 제공
  • 검색 키워드가 한 개 이상일 경우 공백(” ”)을 기준으로 문자열 분리, 배열로 서버에 전달하여 사용자의 검색 편리도를 높임(ex. “목동 배드민턴” → “목동” and “배드민턴” 검색 결과 리턴)
  

• 사설 구장 관리 기능
  • 이용자가 직접 구장을 등록, 표시, 수정, 삭제할 수 있는 CRUD 기능을 구현
  • 이용자가 등록한 주소는 좌푯값으로 변환, DB에 저장하여 지도 상에 맵 마커로 표현
  

• 플랫폼 성능 최적화
  • Light House 검사 실행 결과 FCP 2.1초 → Lazy-loading을 이용한 컴포넌트 Code-spliting → FCP 0.9초로 절감
  • 사용자가 직접 등록하는 이미지 용량으로 인한 이슈 발생 → 사용법이 직관적이고 Bundle 사이즈가 작은 browser-image-compression을 선택 → 컴포넌트 자체에서 이미지를 압축, 서버에 전달(80%의 압축률)
  

• 유저 피드백 반영
  • 팀 매칭 과정에 대한 도움이 필요하다는 지적 → 플랫폼 메인 페이지에 진입했을 때 로컬스토리지에 hasVistedBefore의 값이 있는지 확인 → 값이 없을 시 튜토리얼 컴포넌트를 렌더링함과 동시에 hasVistedBefore에 12개월의 유효 기간이 있는 값을 로컬스토리지에 저장