맛집.com
| 항목 | 내용 |
|---|---|
| 만든 사람 | Hackkison |
| 사용 도구 | Claude Code + Next.js 16 + Supabase |
| GitHub | Hackkison/matzip |
| Live Demo | matzip-two.vercel.app |
프로젝트 소개
전국 맛집을 지도 위에서 기록하고 공유하는 맛집 큐레이션 서비스입니다. d3-geo로 직접 구현한 SVG 한국 지도에서 시/도를 클릭하면 시/군/구까지 드릴다운되고, 해당 지역의 맛집 목록을 카테고리·가격대별로 필터링할 수 있습니다. 맛집 등록부터 리뷰·별점·즐겨찾기·주변 맛집 탐색까지, 맛집 앱에 필요한 기능을 모두 갖추고 있습니다.
주요 기능
- SVG 한국 지도 — d3-geo로 17개 시/도 + 시/군/구까지 직접 구현. 핀치줌·패닝 지원
- 맛집 등록 — 카카오 Local API 키워드 검색으로 자동완성, 카테고리 자동 매핑 (한식/중식/일식/양식/디저트/기타)
- 리뷰 시스템 — 0.5 단위 별점, 텍스트 + 사진(최대 5장, WebP 자동 리사이즈), 좋아요
- 카카오맵 연동 — GPS 기반 내 위치 표시, 주변 맛집 마커 (반경 1~10km)
- 즐겨찾기(찜) — 관심 맛집 저장, 마이페이지에서 모아보기
- 통합 검색 — 식당명·지역명·카테고리 실시간 자동완성
- 관리자 페이지 — 전체 식당/리뷰 관리, 리뷰 신고 처리, 대표 사진 관리
어떻게 만들었나요?
코딩 경험 없이 Claude Code와 대화하면서 처음부터 끝까지 만든 과정입니다.
- PRD 작성 — "우리 팀이 함께 쓸 맛집 지도를 만들자"는 아이디어에서 출발. 필요한 기능을 Phase별로 정리
- 지도 만들기 — 공개 GeoJSON 데이터(southkorea/korea-maps)를 가공해서 SVG 한국 지도 구현
- 맛집 CRUD — Supabase 데이터베이스를 연결해서 맛집 등록/수정/삭제 기능 완성
- 카카오 API 연동 — 맛집 등록 시 카카오 Local API로 음식점 검색 자동완성 구현
- 리뷰·즐겨찾기 — 별점, 사진 리뷰, 좋아요, 즐겨찾기 기능을 하나씩 추가
- 보안 강화 — CSRF 방어, Rate Limiting(Upstash), RLS 정책, 보안 헤더 적용
- 배포 — Vercel에 올려서 누구나 접속할 수 있게 공개
기술 스택
| 영역 | 기술 |
|---|---|
| 프레임워크 | Next.js 16 (App Router) |
| UI | React 19 + Tailwind CSS v4 + shadcn/ui |
| 지도 | d3-geo (SVG 한국 지도) + Kakao Maps API |
| 데이터베이스 | Supabase (PostgreSQL + Auth + Storage) |
| 보안 | Upstash Redis Rate Limiting, CSRF 방어, RLS |
| 배포 | Vercel |
배운 점
- 외부 지도 라이브러리 없이 d3-geo + GeoJSON으로 SVG 지도를 직접 만들 수 있다는 걸 알았다
- Phase별로 기능을 하나씩 쌓아가니 복잡한 앱도 만들 수 있었다 — 지도 → 맛집 등록 → 리뷰 → 검색 순서로 점진적 확장
- 보안(CSRF, Rate Limiting, RLS)을 처음부터 챙기면 나중에 고생하지 않는다
이 글이 도움이 되었나요?