프로젝트 개요🎬
흑백요리사 맛집 리스트와 식당 위치 기반 지도, 리뷰를 지원하는 사이트
기술 스택🧷
- 프론트엔드 : react + redux + router + tanstack query + tailwind + zustand + sweetalert2 + kakao map api
개발과정🎈
아이디어 구상
- 흑백요리사 + 지도 api를 생각하다가 흑백요리사에 나온 쉐프들 레스토랑의 위치와, 사용자들끼리 리뷰로 공유하는 사이트를 구상하게 되었다.
구현
- ✔️ 로그인 / 회원가입화면 (담당)
- 로그인, 회원가입화면은 router로 로그인사용자가 접근할 수 없게 경로 보호를 함
- 로그인은 소셜 구글 로그인도 구현
- 회원가입시 실시간 유효성 검사도 구현
- 로그인시 zustand로 로컬스토리지에 저장하여 유저정보를 전역상태관리
- 메인화면
- 쉐프들 정보를 supabase에서 tanstack query로 가져와서 slick slide로 뿌려줌
- 쉐프들 클릭시 router를 사용하여 검색화면(전체 리스트 화면)으로 이동
- 검색 화면(전체 리스트 화면)
- 전체/흑/백 필터를 클릭하면 해당 쉐프들의 레스토랑 리스트가 노출
- 실시간 검색 기능 구현
- 해당 레스토랑을 클릭하면 해당 위치로 지도에 찍힘
- 자세히 보기 클릭시 해당 레스토랑의 상세화면으로 이동
- 상세 화면
- 리뷰 , 좋아요에 낙관적 업데이트 구현
- 로그인 안했을시 기능 제한
- 리뷰 추가/삭제/수정 기능 구현
- 프로필 화면
- 로그인 안했을시 경로 제한
- 닉네임 변경시 낙관적 업데이트 구현
- 닉네임 , 프로필 사진 변경시 실시간 UI 적용
- 해당 유저의 좋아요, 작성한 게시글 노출, 삭제 가능
테스트 및 배포
- vercel에 배포
링크
이븐한 맛집
outsourcing-project-dun.vercel.app
배운점🤖
- 기술적 성장: supabase와 데이터 상호작용 , zustand로 클라이언트 전역 상태 관리, react-router-dom을 활용하여 경로 보호
후기✏️
기술적으로는👀
이전까지 context api, redux로만 클라이언트 전역 상태 관리를 하였는데, 이번에는 zustand로 정해서 처음으로 사용해보았는데, 확실히 그냥 공부했을때보다 실제로 써보니 도움이 많이 되었다.
그리고 실시간 유효성 검사도 mbti 프로젝트때 써봐서 그런지 좀더 수월하게 코드를 짰던 것 같다.
아무래도 로그인 / 회원가입 구현이라서 그런지 시간이 남아서 header에 로그인한 유저 정보도 가져와보고, 소셜 구글 로그인도 구현도 해보았다!(좀더 욕심내서 카카오 로그인이랑 회원탈퇴도 해볼껄... 아쉬움이 남는다.)
개인적으로는👀
이번에도 팀원분들을 너무 잘만났다... 연속으로 행운🍀🍀🍀
확실히 잘하는 분들이랑 해서 그런지 자극도 많이 받고 도움이 왕창 되었다!!!
깃도 이전에 회사에서 사용했을때보다 더 적극적으로 사용하게 되었고, pr날리고 서로 코드 리뷰 하는 시간도 가져서 미리 실무에서 일하는 것 같은 느낌도 많이 받았다! 👇정말 좋았던거👇 (사룽해용💛)
그리고 많이 느낀게, 전에 팀원분들은 오류가 날때마다 금방 도움!이랬는데, 이번 팀원분들은 혼자서 다들 잘 처리하시고, 공식문서도 많이 읽어보시고 반성을 하게되었다..!
코드도 확실히 잘짜시니까 옆에서 저렇게 짤수도 있겠다. 배워도 가고, 서로 공유도 하고 저번 팀플이랑은 느낌이 달랐던 것 같다 또 만나요 열어분ㅠㅠㅠ
트러블슈팅
상황🤔
로컬에선 소셜로그인이 가능했는데, 배포시에 3000/토근~~으로 넘어가면서 users테이블에 유저정보가 저장도 안되며, 로그인이 안됨
해결과정👀
=> signInWithOAuth에 redirectTo에 '/'를 배포 주소로 수정해도 안됨
=> redirectTo를 지워도 안됨
해결🌟
열심히 구글링해도, supabase 공식문서봐도 못찾나했는데...
단순하게 site URL에서 배포주소로 바꾸면 되는거였다
