• 서울 내 야간 영업 카페 정보를 제공하는 웹/앱 서비스입니다.
• 야간 영업은 자정 이후 또는 24시간 영업하는 카페를 의미합니다.
• 사용자에 GPS 좌표를 기준으로 반경 2km 내에 있는 카페 목록을 제공합니다.

• Node.js 20.11.1
• yarn 1.22.21
• vite 5.2.0

$ cd coffe-zip
$ yarn
$ yan dev

https://coffeezip.vercel.app

https://velog.io/@hojinch99/series/야간-카페-지도-서비스

• Safari 환경에서 https://coffeezip.vercel.app 접속
• 공유 버튼 클릭 후 아래 홈 화면에 추가
• 바탕화면 또는 홈 화면에 추가된 앱으로 실행

• Chrome 환경에서 https://coffeezip.vercel.app 접속
• 검색창 우측의 위치한 북마크 추가 버튼 좌측 클릭 후 앱 설치
• 바탕화면 또는 홈 화면에 추가된 앱으로 실행

• 전체 기간 : 2024.04.24 ~ 현재 진행 중
• 기획 및 디자인 : 2024.04.23 ~ 2024.05.06
• UI 및 기능 구현 : 2024.04.24 ~ 2024.05.06
• DB 구현 및 데이터 수집 : 2024.05.07 ~ 현재 수집 중

• 김동주([email protected]) - PM, 디자인
• 최호진([email protected]) - 개발, 디자인

24hour-cafe
├─ .eslintrc.cjs
├─ .github
│  └─ workflows
│     └─ test.yml
├─ .gitignore
├─ index.html
├─ package.json
├─ public
│  ├─ icons
│  │  ├─ favicon.ico
│  │  ├─ logo-128X128.png
│  │  ├─ logo-144X144.png
│  │  ├─ logo-192X192.png
│  │  ├─ logo-256X256.png
│  │  ├─ logo-32X32.png
│  │  ├─ logo-48X48.png
│  │  ├─ logo-512X512.png
│  │  └─ logo-72X72.png
│  ├─ manifest.json
│  ├─ svg
│  │  ├─ allday.svg
│  │  ├─ arrow.svg
│  │  ├─ arrowdown.svg
│  │  ├─ arrowup.svg
│  │  ├─ cafe.svg
│  │  ├─ cancle.svg
│  │  ├─ close.svg
│  │  ├─ current.svg
│  │  ├─ location.svg
│  │  ├─ muin.svg
│  │  ├─ parttime.svg
│  │  ├─ search.svg
│  │  └─ unman.svg
│  └─ webp
│     ├─ kakaomap.webp
│     ├─ loading.webp
│     ├─ logo.webp
│     └─ wrapper.webp
├─ README.md
├─ robots.txt
├─ src
│  ├─ apis
│  │  └─ supabase-api.ts
│  ├─ App.tsx
│  ├─ components
│  │  ├─ custom-overlay.ts
│  │  ├─ kakao-map.tsx
│  │  ├─ list.tsx
│  │  ├─ loading.tsx
│  │  ├─ search-box.tsx
│  │  ├─ skeleton-ui.tsx
│  │  └─ tab-bar.tsx
│  ├─ interfacce
│  │  └─ list-interface.ts
│  ├─ main.tsx
│  ├─ pages
│  │  └─ Home.tsx
│  ├─ stores
│  │  └─ map-store.ts
│  ├─ supabase
│  │  └─ supabase.ts
│  └─ vite-env.d.ts
├─ sw.js
├─ tsconfig.json
├─ tsconfig.node.json
├─ vite.config.ts
└─ yarn.lock

• 현재 사용자의 GPS 값을 기반으로 2km 이내에 있는 24시간/무인 카페 리스트를 조회 후 지도에 마커 보여주기
• 한 페이지 내에서 최대 카페 데이터 5개 및 지도 최대 마커 5개 제한, 그 외 모두 페이지네이션 활용
• React-Query를 사용한 데이터 캐싱 지원

• 카카오 지도 API의 장소 검색 기능을 활용한 장소/주소 검색 시 자동완성 기능
• 검색 시 지도의 중심을 검색 한 위치의 좌표로 이동과 동시에 근방 2km 이내에 있는 카페 데이터 요청

• 마커/리스트 클릭 시 카페 이름과 주소를 확인할 수 있는 상세보기 창 기능
• 상세보기 창에서 주소 복사 기능으로 클립보드에 카페 주소 복사 기능 구현
• 상세보기 창에서 주소 길 찾기 기능으로 카카오 맵에서 현재 카페 주소를 도착지로 설정

문제: React Hook useEffect를 사용해 카카오 지도를 화면에 띄우는 과정에서 발생한 문제다. useEffect는 두 번째 인자로 의존성 배열을 받아 해당 배열에 있는 값이 바뀔 때마다 첫 번째 인자인 함수를 실행하게 된다.

이때 카페 목록을 의존성 배열에 넣어서 사용하니 지도가 중복으로 생성되면서 지도 조작 속도가 느려질 뿐만 아니라 이동 시 이전에 생성된 지도가 지속해서 나타나는 문제가 있었다.

해결: useEffect를 의존성 배열을 비워 최초 마운트 시 지도를 생성하고 이를 React Hook useState로 관리하여 저장한 한 개의 지도만 조작할 수 있게 하였다.

또한 React 프로젝트를 시작하면 기본적으로 React에서 제공하는 React StrictMode가 true로 설정되어 useEffect가 두 번 작동하는 것을 false로 설정하여 오직 최초 마운트시 한 번만 작동하게 하였다.

문제: 한 개의 단일 페이지를 사용하고 있는데 이때 코드의 재사용 및 유지보수를 위해 컴포넌트 단위로 분할 하여 메인 컴포넌트 Home에서 import 하는 방식으로 진행하였다.

import 하는 컴포넌트는 카카오 지도를 띄우는 KakaoMap 컴포넌트와 카페 리스트 목록인 List 컴포넌트가 있는데 List 컴포넌트에서 카페의 클릭 이벤트에 대한 작동을 KakaoMap 컴포넌트에서 처리하려다 보니 <List> -> <Home> -> <KakaoMap> 컴포넌트 순으로 Callback 함수와 Props 전달이 복잡해져 추후 의존성 문제 발생 및 유지보수가 어렵고 코드가 불필요하게 늘어나는 것을 느꼈다.

해결: 상태관리 라이브러리 Zustand를 사용해 List 컴포넌트에서 클릭 이벤트가 발생하면 해당 카페 데이터를 저장하고 이를 kakaoMap 컴포넌트에서 중앙 Store에 접근하여 이를 활용하게 하였다.

문제: kakao Map API를 사용하여 마커를 생성하고 클릭 이벤트로 커스텀 오버레이를 생성하여 보여주게 구현했다. 그러나 CustomOverlay에 경우 마커처럼 addEventListener로 클릭 이벤트 생성이 불가하다.

https://devtalk.kakao.com/t/topic/44205/6?u=karl.lee

해결: 위의 링크에 있는 글을 참고하여 CustomOverlay를 CreateElement로 생성하고 onClick 이벤트를 직접 등록하여 해결했다.