전체 구조

┌─────────────────────────────────────────────────────────┐
│  Frontend (React 19 + TanStack Router)                  │
│  ┌──────────┐ ┌──────────┐ ┌────────────┐ ┌──────────┐ │
│  │ MapView  │ │ Sidebar  │ │DetailPanel │ │ Filters  │ │
│  │(NaverMap)│ │(목록+검색)│ │(리뷰/블로그)│ │(난이도등)│ │
│  └────┬─────┘ └────┬─────┘ └─────┬──────┘ └────┬─────┘ │
│       └─────────────┴─────────────┴─────────────┘       │
│                         ↕ createServerFn (RPC)          │
├─────────────────────────────────────────────────────────┤
│  Server Layer (TanStack Start SSR)                      │
│  parking.ts │ reviews.ts │ votes.ts │ admin.ts          │
│  transforms.ts (순수 변환) │ auth (better-auth)         │
├─────────────────────────────────────────────────────────┤
│  Database (Cloudflare D1 + Drizzle ORM)                 │
│  17 tables │ parking_lot_stats (사전 계산 점수)          │
├─────────────────────────────────────────────────────────┤
│  Data Pipeline (scripts/)                               │
│  CSV 가져오기 → 크롤링 → 감성분석 → 베이지안 점수 산출   │
└─────────────────────────────────────────────────────────┘

기술 스택

컴포넌트 구조

index.tsx (메인 레이아웃)
├── Header ─── SearchBar + UserMenu/LoginModal
├── ParkingSidebar ─── ParkingCard[] (목록)
├── MapView ─── 마커 (개별/클러스터), 내 위치
├── FloatingFilters ─── 필터 토글 (무료/공영/난이도)
└── ParkingDetailPanel
    ├── VoteBookmarkBar (👍👎⭐)
    └── ParkingTabs (리뷰 / 블로그 / 미디어)

지도 마커 UX

• 줌 ≤14: 클러스터 마커 (그리드 기반, 개수에 따라 32~160px 동적 크기)
• 줌 >14: 개별 마커 (난이도 색상 😊→💀 + 큐레이션 배지 🔥/👍)
• 선택 마커: 핀 꼬리 + 바운스 애니메이션 + 파란 테두리
• 클러스터 클릭 → 해당 위치로 줌인

서버 레이어

createServerFn() (TanStack isomorphic RPC) 패턴으로 클라이언트↔서버 통신.

하이브리드 SQL 전략: 복잡한 쿼리(클러스터링, bounds, JOIN)는 sql.raw(), 단순 CRUD는 Drizzle ORM 타입 세이프.

DB 스키마 (17 테이블)