[Outsourcing_Final] HotPlace In Seoul 🔥

 

🔥핫플 인 서울 메인 화면 및 작동 영상

 

• Github 링크 : https://github.com/mangomaneya/HotPlaceInSeoul.git
• 배포 링크 : https://hot-place-in-seoul.vercel.app/

---

🖥️ 프로젝트 소개

• 지도에서 핫플을 찾고 관련 영상을 볼 수 있는 페이지입니다.
• supabase를 활용하여 회원가입과 로그인을 구현했습니다.
• 카카오 지도 API로 DB에 저장된 핫플레이스를 확인할 수 있습니다.
• 마커를 클릭하면 해당 위치 핫플레이스의 자세한 정보를 모달로 제공합니다.
• 유튜브 API를 활용하여 핫플레이스 키워드로 검색된 유튜브 영상을 제공합니다.

 

🕰️ 개발 기간

2025 / 02 / 26 ~ 2025 / 03 / 05

 

 

⚙️ 개발 환경

react, javascript, pnpm, react router, tailwind css, zustand, tanstack query

 

 

📌 주요 기능

Login 

✔️ 사용자가 자신의 계정으로 로그인할 수 있도록 합니다.

Signup

✔️ 새로운 사용자가 계정을 생성할 수 있도록 합니다.

 

Home

✔️ '성수동', '인사동', '망원동' 세 곳의 지역 카테고리를 나눠 지도가 나타납니다.

✔️ DB에 저장된 장소를 마커로 확인합니다.

✔️ 마커를 클릭하면 장소명과 위치, 자세히보기 버튼이 나타납니다.

✔️ 우측 하단의 '핫플 보기' 버튼을 클릭하여 해당 지역의 핫플 리스트를 확인합니다.

✔️ 마커 인포의 '자세히보기'와 리스트의 항목을 클릭하면 상세 모달이 나타납니다.

 

Modal

✔️ 해당 장소의 정보가 상세하게 나타납니다. (장소명, 분류, 주소, 전화번호, 영업 시간)

✔️ 유튜브 버튼을 통해 관련 영상 3개를 시청할 수 있습니다.

✔️ 회원가입 및 로그인 시 장소를 북마크 저장 및 북마크 삭제할 수 있습니다.

 

Bookmark

✔️ 사용자의 닉네임과 북마크 장소 개수를 확인합니다.

✔️ 북마크 된 장소 카드를 확인합니다.

✔️ 장소 카드를 클릭하여 모달을 확인합니다.

 

 

📊 발표 자료

 

 

 

 

✅ KPT 회고

 

✨마무리

두 번째 협업! 아웃소싱 프로젝트라고 해서 외주받아서 하는 건가!? 싶었는데 외부 API를 활용하는 프로젝트였다.

사실 연관성은 모르겠음.

이번 5조는 휴일 제외한 5일 중 2일을 사용할만큼 기획 단계에 시간을 들였다.

[Day 1]의 기록에도 있듯, 아이디어 스케치와 S.A, 팀 규칙을 정하는 데에 많은 대화를 나누었다.

첫 협업과는 다른 진행 상황에 처음에는 불안하고 답답했다. 하지만 이전에 아쉬웠던 부분을 생각하면서 괜찮을 거야..! 하며 불안을 잠재웠다. 결국 짜임새있게 잘 구성된 프로젝트로 마무리 할 수 있었으며 오류가 발생했을 때 빠르게 처리할 수 있었다.

 

이번 협업에서 코딩하는 시간의 비율은 상당히 적었다.

어렵고 복잡한 부분 (DB구성, API 연결 등)을 다른 팀원분들이 맡으신 것도 있지만..

그만큼 대화를 많이 나누었고, 서로의 코드 리뷰에 많은 시간을 들였다.

 

312개의 커밋과 35개의 이슈, 49개의 PR, 한 PR에 대해 기본 5개에서 최대 41개의 코드리뷰

나름 많은 소통을 했다고 느꼈다! 게다가 이번에는 궁금했던 '이슈' 기능을 사용해서 깃헙을 적극적으로 활용해보았다.

코딩을 진행하기 위해서는 

이슈 작성 👉🏻 기능+이슈 번호로 된 브랜치 생성 👉🏻 코딩 👉🏻 기능+이슈 번호로 된 커밋 메세지 작성 👉🏻 이슈 번호 연결하여 PR 작성 👉🏻 코드 리뷰를 통한 수정 👉🏻 2명 이상의 approve 👉🏻 dev로 merge

의 과정을 거쳐야 했다..!

 

이 과정 속에서 확실히 협업에 필요한 기술과 팀과의 소통 방식을 배울 수 있었다.

또한 팀원 분들은 현업에 종사하셨던 분, 전공자, 워낙 잘하시는 분, 정말정말 열심히 하시는 분들이셨기에

디테일 한 코드 리뷰를 받을 수 있다는 점에서 많은 도움을 얻었다.

 

내가 반성해야 하는 부분은 사이드이펙트를 고려하지 않은 점이다.

특히 협업 시에는 내가 작성한 로직을 다양한 곳에서 활용하기 때문에 언제 어디서 오류가 생길 지 모른다.

따라서 다양한 가능성을 생각해야하며 (당연한 거지만) 팀원들에게 로직에 대해 자세히 설명할 수 있을 정도로 완벽히 이해하여 작성해야 한다는 점이다. 당장 눈에 보이는 기능에만 집중할 것이 아니라 코드의 흐름을 파악하고 있어야 한다는 점이다.

정말 정말 급한 상황이 아니면 필히 로직을 파악하여 작성해야 한다!!!!