[트위터 클론 챌린지] 러닝 크루 프로젝트 🏃‍♂️,

러닝 크루는 함께 달리기를 좋아하는 사람들을 위한 공간이에요! 그룹을 만들어 달리기 계획을 세우고, 숨겨진 달리기 명소를 발견하고, 그전에 러닝할때 예쁜 풍경 사진 찍어 공유할 수 있어요. 운동 기록을 남겨 건강 관리를 할 수 있죠. 운동하며 재미있게 소통하고 싶은 분들에게 딱 맞는 서비스예요! 🚀🏃‍♂️

배포 URL, 깃허브 링크

✔️ 배포 URL: https://running-crew.netlify.app/

✔️ Github: https://github.com/SonMinSeock/running-crew

구현한 기능 소개

1) 간편로그인
Firebase auth 이용해서 구글 간편 로그인 구현하며, 한국에서는 카카오 많이 사용하기 때문에 카카오 간편로그인 구현하게 되었습니다.

2) 러닝 크루 게시글 작성, 수정
인증 절차 거쳐서 검증 완료후 Firestore 이용하여 러닝 크루 게시글 작성, 수정, 삭제 해주도록 합니다.

3) 드래그 앤 드롭 파일 업로드
게시글 작성, 수정 할때 파일 드래그 앤 드롭 해서 파일 업로드 할 수 있도록 구현했습니다.

4) 러닝 할 날짜 선택

react-calender 패키지 이용하여 러닝 할 날짜를 선택합니다. react-calender 스타일 정의 코드를 보고 커스텀 스타일링 했습니다.

5) Top 10 러닝 장소
네이버 실시간 검색 처럼 밑에서 위로 넘어가도록 애니메이션 구현합니다. ChatGPT 이용해 2024년 기준으로 "Top 10 러닝 장소"를 보여줍니다.

6) 프로필 수정

구글 로그인 한 유저는 auth를 이용하여 프로필 이름을 수정 할 수있으며 카카오 유저는 firestore에 저장한 유저에 이름을 수정하도록 설계했습니다.

이름을 수정하면 그전에 작성한 게시글 유저 이름을 firestore의 batch 이용하여 작성자 유저를 보고 작성된 게시글의 유저 이름을 한번에 수정하도록 구현했습니다.

7) 러닝 참여
러닝 게시글 상세페이지 가서 참여하면 자신의 프로필 이미지 보여주도록 했습니다. 지금은 총 5명으로 참여 가능하도록 설계했습니다.