☕ Cafe Pin

---

내가 원하는 지역의 카페를 찾아보고, 갔던 카페를 리뷰해보세요!

👩‍💻 프로젝트 소개

---

• 내일배움캠프 팀 프로젝트 아웃소싱주차
• 개발기간 : 2024.06.17~2024.06.21 (5일간)
• 사이트 방문하기 : cafe pin 바로가기
• github 방문하기 : git hub 바로가기
• 프로젝트 설명 : api(지도, 유튜브, 설문조사 중 택 1)을 사용해서 만드는 프로젝트 입니다.

✔️ 필수 요구 사항

---

• ✅ API 사용하기!

• ✅ tanstack query 사용하기!

• ✅ supabase 사용하기!

🛠️ 사용한 stack

---

🖥️ front-end

• 개발 언어 : javascript
• 라이브러리
  • front-end : react
  • 전역 상태 관리 : Redux toolkit
  • 서버 상태 관리 : tanstack query
  • 지도 : react-kakao-maps-sdk
  • 스타일링 : styled-components
  • 라우터 : react-router-dom

🗃️ back-end

• database : supabase
• 배포 : vercel

⚙️ 프로젝트 관리

• 패키지 설치 : yarn
• 버전 관리 : git, github
• 협업 소통 : slack

🎨 디자인

• 도구 : figma

🫡 내가 맡은 업무

---

팀장

• 프로젝트에서 코드 컨벤션과 커밋 규칙을 정하고 사용할 기술 스택, 기능 수립 등 팀원들의 의견을 종합해 프로젝트 진행방향과 전체적인 프로세스를 관리 감독하고 git hub으로 버전 관리할 때 PR 템플릿을 사용해서 코드 리뷰를 수월하게 진행하게 하였습니다.

프로젝트

• 프로젝트 초기 세팅

  • 폴더 구조 세팅, 레이아웃 분리, Provider와 같은 라이브러리 초기 세팅, supabase table 생성, table policy 작성, prettierrc 파일 등 프로젝트의 초기 세팅을 담당하였습니다.

• 지도 기능

  • KakaoMap 컴포넌트 : marker로 center를 나타내며 동적으로 움직일 수 있고 원하는 정보를 저장할 수 있는 컴포넌트
  • StaticMap 컴포넌트 : PostPage와 WritePage에 카페의 위치를 보여주기 위한 정적 지도 컴포넌트
  • SelectCafePage 페이지 : 지도에서 리뷰를 작성할 카페를 고르는 페이지. 검색을 통해 검색결과와 가장 연관성이 높은 위치로 이동할 수 있고 마커를 선택하지 않았거나 선택한 장소가 카페가 아니면 alert창이 뜹니다.
  • MapSearchPage 페이지 : 작성한 리뷰를 보고싶은 지역을 설정하는 페이지. 검색을 통해 지역을 설정할 수 있고, 지도의 레벨에 따라 범위가 달라지며 해당 지역의 모든 카페 리스트를 redux state에 배열로 최대 45개까지 저장합니다.

• header 기능

  • 로고 : 메인페이지로 이동합니다.
  • tanstack query : 메인페이지 랜딩 시 supabase의 getUser로 현재 로그인한 유저가 있는지 없는지 판별하여 비회원일 경우 guest를, 회원일 경우 tanstack query를 사용하여 닉네임과 프로필을 가져오고 redux state에 user 정보를 저장합니다.(리뷰 생성 시 필요)
  • SelectBox컴포넌트 : 프로필 버튼을 누르면, 비회원은 로그인, 회원가입 리스트가 회원은 마이페이지, 로그아웃 리스트가 뜹니다.
  • 로그아웃 : 로그아웃 시 tanstack query로 user 의 상태를 로그아웃으로 바꿔주어 header의 있는 데이터를 최신으로 관리하였습니다. 또한 마찬가지로 redux에서 user 데이터를 없애줍니다.

디자인

• figma로 와이어 프레임을 토대로 디자인을 맡았습니다.

🗨️ 트러블 슈팅과 회고

---

하나의 지도 컴포넌트를 만들어서 필요한 페이지에 팀원이 편리하게 쓰게 하고 싶었는데, 하나의 컴포넌트 안에 비즈니스 로직을 분리안하고 만들어 버리는 바람에 문제가 생겼었다. 정적 지도로 쓰고 싶을 때 center 값이 공유가 되고, 원하던 기능대로 안만들어 져서 결국 동적, 정적 지도로 분리해서 사용하였다. 모듈화를 하는 것이 처음이라 미숙했던 것 같다. 또 로직을 분리하지 않아서 오류가 생길 때마다 주석으로 분리를 해놓아도 코드가 길어지고 복잡해서 유지보수하는데 조금 힘들었었다. 그래서 다음부터는 비즈니스 로직을 분리해서 만들어야 겠다는 생각을 했다. 리팩토링은 할 시간이 없어서 못했다. 다음에는 좀 더 힘내서 해봐야겠다. 문제가 생길 때마다 많이 배우게 되는것 같아서 좋다!