B-LOCK · 자전거·개인 킥보드 디지털 신분증
자전거와 개인 킥보드에 QR 디지털 신분증을 만들고, 잃어버렸을 때 QR을 스캔한 사람에게서 발견 위치 제보를 받는 생활 안전 서비스입니다. (실시간 위치 추적 서비스가 아닙니다.)
동작 흐름 (MVP 1차)
회원가입 → 로그인 → 이동수단 등록(사진·특징) → 고유 QR 생성 → QR 저장·부착
→ 분실/도난 신고(수색 중) → 다른 사람이 로그인 없이 QR 스캔 → 수색 중 안내 확인
→ 발견 제보(위치 + 사진) → 소유자가 제보 확인 → 회수 완료
화면
| 경로 | 내용 | 로그인 |
|---|
/ | 서비스 소개, 등록·스캔 버튼 | - |
/signup, /login | 회원가입(이메일·비밀번호·닉네임), 로그인 | - |
/dashboard | 안녕하세요 ○○님, 내 이동수단 카드 (수색 중·제보 접수는 색·띠로 구분) | 필요 |
/vehicles/new | 이동수단 등록 (종류·이름·브랜드·모델·색상·특징·사진) → QR 자동 생성 | 필요 |
/vehicles/[id] | 상세, 분실/도난 신고 · 회수 완료 · 정상 복귀 · 삭제 | 필요 |
/vehicles/[id]/qr | 큰 QR, 스티커용 PNG 저장, 공유 | 필요 |
/vehicles/[id]/reports | 받은 발견 제보·연락 요청 (사진은 소유자만) | 필요 |
/scan | 카메라 QR 스캔, 링크 직접 입력 | - |
/scan/[qrId] | 공개 QR 화면: 정상 / 🚨 수색 중 안내 (소유자 개인정보 없음) | - |
/report/[qrId] | 발견 제보·연락 요청 (위치 권한 또는 직접 입력, 사진, 연락처 선택) | - |
/community | 분실 커뮤니티: 찾는 중/찾았어요, 종류 필터, 지역·색상 검색 | - |
/community/new | 분실 글 쓰기 (내 이동수단 연결 시 정보·사진 자동 채움 + 수색 중 전환) | 필요 |
/community/[id] | 글 상세, 댓글(본 위치·사진), 🔒 비밀 댓글, 찾았어요, 공유 | 댓글은 필요 |
/stickers/[code] | 새 B-LOCK 스티커를 내 이동수단에 등록 (주인만 아는 부착 위치 기록) | 필요 |
/admin/stickers | 관리자: 빈 스티커 묶음 만들기, A4 40칸 인쇄·PDF, CSV | 관리자 |
/ride | 라이딩 기록: 네이버 지도 위 실시간 경로, 시작·일시정지·종료, 거리·시간·속도 | 필요 |
/rides, /rides/[id] | 라이딩 기록 목록(이번 달 합계), 결과(전체 경로·출발/도착·정비 알림), 삭제 | 필요 |
/vehicles/[id]/maintenance | 소모품·정비: 마모율 3단계, 주기 수정, 정비 완료(0km 리셋) + 정비 다이어리 | 필요 |
/vehicles/[id]/edit | 이동수단 정보·사진 수정 (QR은 그대로) | 필요 |
/vehicles/[id]/transfer | 소유권 넘기기: 비밀번호 재확인 → 10분 양도 QR | 필요 |
/t/[token] | 소유권 받기: 숨은 스티커(또는 차대번호 끝 4자리)로 실물 확인 후 이전 | 필요 |
/v/[token] | 안심거래 인증: 도난 이력·등록일·보유 기간·양도 횟수·확인 코드 (판매자 마스킹) | - |
/vehicles/[id]/evidence, /vehicles/[id]/certificate | 소유 증명: 증거 사진 보관함, 경찰·보험 제출용 증명서 | 필요 |
/c/[token] | 소유 증명서 진위 확인 | - |
/vehicles/[id]/alert | 도난 경보 보내기: 잃어버린 곳·시각·특징·경찰 신고 번호·약속형 사례금 | 필요 |
/alerts, /alerts/[id] | 근처 도난 경보 목록·상세, 거리/중고 매물 목격 제보, 회수 완료(숨은 스티커 확인) | 제보는 필요 |
/alerts/[id]/police | 112 도난 신고서: 인쇄·PDF, 112 문자 복사 (신고자 정보 저장 안 함) | 주인 |
/r | 발견자 익명 대화 (로그인 없이, 제보 후 14일) | - |
/check | 구매 전 도난 조회: QR·조회 번호(코드 앞 8자리)·차대번호 → 도난 신고 중/등록됨/기록 없음 | - |
/stats | 공개 통계, 도난 다발 지도 (약 500m 칸) | - |
/admin/members, /admin/alerts | 관리자: 회원 본인인증 표시, 신고된 도난 경보 처리 | 관리자 |
보안 설계
- QR에는 예측할 수 없는 24자리 무작위 코드만 들어갑니다. (
/scan/MjdL-...) 사용자 ID·개인정보 없음.
- Supabase RLS: 이동수단·제보·프로필은 소유자만 볼 수 있습니다.
- 공개 QR 화면은
get_public_vehicle 함수가 종류·색상·브랜드·모델·특징·사진·상태만 돌려줍니다. 이름·이메일·닉네임은 꺼낼 수 없습니다.
- 제보는
submit_report 함수로만 남길 수 있고(QR 코드 필수, 10분 20건 제한), 읽기는 소유자만 됩니다.
- 사진:
vehicle-images는 공개(본인 폴더에만 올리기), report-images는 비공개(소유자만 1시간짜리 주소로 열람). 5MB·이미지만 허용, 올리기 전에 1600px로 줄입니다.
- 커뮤니티: 글·공개 댓글은 누구나 읽기, 쓰기는 회원만. 비밀 댓글은 댓글 쓴 사람과 글쓴이만 내용·위치·사진을 볼 수 있고(
get_post_comments가 나머지 사람에게는 비워서 돌려줌), 비밀 댓글 사진은 비공개 버킷 community-secret에 저장됩니다. 글쓴이 이름은 닉네임만 보입니다.
- 공개 키(publishable key)만 사용합니다. 비밀 키는 이 사이트에 필요 없습니다.
기술 스택
Next.js 15 (App Router) · React 19 · TypeScript · Tailwind CSS 3.4 · Supabase (Auth · Postgres · Storage) · qrcode · jsQR · lucide-react
- 이 PC가 Node 18이라 Next.js 16 / Tailwind 4 / 최신 supabase-js 대신 Node 18에서 동작하는 버전을 고정했습니다. Vercel(Node 22)에서도 동작합니다.
처음 설정
- Supabase 프로젝트를 만들고 SQL Editor에서
supabase/schema.sql → 002_community.sql → 003_stickers.sql → 004_rides_maintenance.sql → 005_review_fixes.sql → 006_moderation.sql → 007_admin_stats.sql → 008_push.sql → 009_account.sql → 010_post_location.sql → 011_merge_fixes.sql → 012_review_fixes.sql → 013_trade_transfer.sql → 014_theft_alerts.sql → 015_evidence_certificate.sql → 016_report_chat.sql → 017_cleanup_admin.sql → 018_check_stats.sql → 019_polish.sql → 020_g1_alerts.sql → 020_g2_stickers.sql → 020_g4_ui.sql → 020_g5_owner.sql → 020_g6_community_admin.sql → 021_transfer_link.sql → 022_lookup_code.sql → 023_transfer_link_7days.sql → 024_riding_plus.sql → 025_listing_check_history.sql → 026_listing_match_wider.sql → 027_sticker_spots_print.sql → 028_privacy_zones_admin_areas.sql → 029_personal_settings.sql → 030_audit_fixes.sql 순서로 실행합니다. (뒤 파일이 앞의 함수·트리거를 최종본으로 바꿔요. 모두 여러 번 실행해도 안전)
관리자 지정: update public.profiles set is_admin = true where email = '관리자 이메일';
- Supabase → Authentication → Sign In / Providers → Confirm email 끄기 (MVP: 가입 즉시 로그인)
.env.example을 복사해 .env.local을 만들고 값을 채웁니다.
환경 변수
| 이름 | 용도 | 공개 여부 |
|---|
NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY | Supabase 연결 | 공개 값 |
NEXT_PUBLIC_SITE_URL | QR·공유 미리보기·사이트맵의 기준 주소 | 공개 값 |
NEXT_PUBLIC_NAVER_MAP_CLIENT_ID | 네이버 지도 (NCP Maps Dynamic Map) | 공개 값 |
NEXT_PUBLIC_VAPID_PUBLIC_KEY | 웹 푸시 공개 키 | 공개 값 |
VAPID_PRIVATE_KEY | 웹 푸시 서명 키 | 비밀 |
PUSH_WEBHOOK_SECRET | DB → /api/push 호출 확인용 (app_private.push_config.secret과 같아야 함) | 비밀 |
NEXT_PUBLIC_OPERATOR_NAME, NEXT_PUBLIC_CONTACT_EMAIL | 약관·방침·문의하기의 운영자·연락처 (선택, 비우면 site.ts 기본값) | 공개 값 |
배포 (Vercel)
- Vercel → Add New → Project → 이 저장소 Import
- Environment Variables에
NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY 추가 후 Deploy
- 배포 주소가 나오면
NEXT_PUBLIC_SITE_URL에 그 주소를 넣고 다시 배포 (QR에 들어가는 주소가 고정됩니다)
- Supabase → Authentication → URL Configuration → Site URL에 배포 주소 입력
QR 스티커 흐름
- 관리자가
/admin/stickers에서 빈 스티커 묶음을 만들고 인쇄 → 학교·편의점에 배치
- 사용자가 스티커를 찍으면 '새 스티커' 화면 → 내 이동수단에 등록(또는 새로 등록하며 연결), 주인만 아는 부착 위치 기록
- 앱이 만든 QR도 그대로 쓰이고, QR 화면에서 등록한 스티커 QR도 확인·저장 가능 (주인 확인용). 주인이 로그인한 채 찍으면 '내 이동수단이에요' 표시
- 분실 → 커뮤니티 글(🏷️ 스티커 표시) → '이건가요?' 비밀 댓글 → 주인이 비밀 답글로 스티커 위치(📍 버튼) → 발견자가 스티커를 찍어 위치·사진 제보
라이딩 기록 · 소모품 · 정비 다이어리
- 지도: 네이버 클라우드 플랫폼 Maps → Application(Dynamic Map)의 Client ID를
NEXT_PUBLIC_NAVER_MAP_CLIENT_ID에 넣고, Web 서비스 URL에 사이트 주소(localhost 포함)를 등록합니다. 키가 없거나 인증에 실패하면 지도 대신 경로 모양만 그려서 기능은 계속 동작합니다.
- GPS 걸러내기 (
src/lib/ride/geo.ts): 정확도 35m보다 나쁜 위치 버림 · 시속 65km 넘는 순간 이동(튐) 버림 · 정확도 반경 안 맴돌기(정차 떨림)는 거리·이동 시간에 넣지 않음 · 최고 속도는 8초 평균.
- 기록 중 화면 꺼짐 방지(Wake Lock), 진행 상황을 브라우저에 저장해 새로고침·앱 종료 후에도 이어서 기록. 웹 특성상 화면이 꺼지거나 다른 앱으로 가면 위치 기록이 멈출 수 있어요.
- 저장(
complete_ride)하면 기록 + 이동수단 누적 거리 + 소모품 거리를 한 번에 반영. 기록 삭제(delete_ride)는 그 라이딩 뒤로 정비하지 않은 소모품에서만 거리를 뺍니다.
- 기본 주기: 타이어 공기압 14일 · 체인 윤활 250km · 브레이크 패드 2,000km · 체인 3,500km · 타이어 3,500km (킥보드는 체인 항목 없음). 마모율 80% 점검 필요, 100% 교체 권장.
- 정비 완료(
service_part): 날짜·비용·정비소·메모를 다이어리에 남기고 거리 0km부터 다시 셉니다.
커뮤니티 안전 · 회원 관리
- 신고·차단: 글·댓글 ⋯ 메뉴에서 신고(서로 다른 3명이면 자동 숨김)·차단(그 사람 글·댓글이 나에게 안 보임). 관리자는
/admin/reports에서 숨기기·다시 보이기·삭제.
- 설정
/settings: 닉네임 변경(지난 글·댓글 이름도 바뀜), 알림, 비밀번호 변경, 차단 목록, 회원 탈퇴(사진 정리 후 계정·연결 데이터 삭제).
- 비밀번호 찾기
/forgot-password → 메일 링크 → /auth/callback → /reset-password. Supabase 기본 메일 서버는 프로젝트 팀원 이메일로만, 시간당 2통까지만 보내서 일반 사용자는 메일을 못 받아요. 출시 전에 SMTP를 꼭 연결하세요(Gmail로 5분, 한국어 메일 문구 포함): docs/email-templates.md
- 약관:
/terms, /privacy, /location-terms, /contact 초안. 출시 전 법률 검토와 위치정보사업 신고·등록 필요 여부 확인을 권장해요.
푸시 알림
- 발견 제보·연락 요청, 내 분실 글 댓글, 내 댓글 답글, 정비 시기(매일 09시)에 알림. 설정 화면에서 켜고 끄고, 종류별로 고를 수 있어요.
- 흐름: DB 트리거 →
send_push(pg_net) → /api/push(비밀값 확인 후 web-push로 발송). 끝난 기기 구독은 자동으로 지워요. 아이폰은 '홈 화면에 추가'한 앱에서만 받을 수 있어요.
운영 · 분석
/admin 운영 통계(가입자, 이동수단, 스티커 등록률, 회수율, 발견 제보, 라이딩, 주별 그래프, 스티커 묶음별 등록률). 관리자만.- 카카오톡 공유 미리보기: 사이트 기본 카드와 분실 글 카드(
opengraph-image), robots.txt, sitemap.xml, 기본 보안 헤더.
로딩 화면
- 데이터를 불러오는 모든 화면은
loading.tsx 스켈레톤(shimmer)으로, 버튼 제출 대기만 버튼 안 인라인 스피너로 통일했습니다. 커뮤니티 탭·검색 전환도 목록 자리에 스켈레톤이 나옵니다.
앱 설치 (PWA)
src/app/manifest.ts(앱 정보), src/app/icons/[file](앱 아이콘을 코드로 그림), public/sw.js(설치 조건 + 오프라인 안내 화면만 저장, 개인 화면은 저장 안 함)- 화면 맨 아래 앱 설치 버튼: 크롬·삼성 인터넷은 바로 설치 창, 아이폰은 '홈 화면에 추가' 방법 안내, 카카오톡 안 브라우저는 다른 브라우저로 열기 안내. 설치한 앱으로 열면 버튼이 보이지 않습니다.
- 휴대폰에서는 아래쪽 메뉴(홈·커뮤니티·QR 스캔·내 이동수단)로 이동합니다.
폴더 구성
src/
app/ 화면 (위 표의 경로)
components/ui/ 공통 부품 (Button, Card, Input, Modal, Toast, PhotoPicker, StatusBadge …)
components/vehicle/ 이동수단 카드·사진
config/site.ts 서비스 이름 (B-LOCK) — 여기만 바꾸면 전체 반영
lib/supabase/ Supabase 연결 (브라우저 / 서버)
lib/ 상태·종류 정의, 사진 처리, QR 주소, 날짜 형식
middleware.ts 로그인 유지, 로그인 필요한 화면 보호
supabase/schema.sql 데이터베이스·권한·저장소 설정
다음 단계 아이디어
제보·댓글·정비 알림 푸시(웹 푸시), 라이딩 백그라운드 기록(네이티브 앱), 소유권 확인용 구매 영수증 첨부, 글 신고·차단
