여행 대시보드
여행별 모바일 웹앱.
오키나와는 okinawa 브랜치에도 당시 상태 그대로 스냅샷이 있습니다.
📦 저장소 — https://github.com/parkdohhan/samcheok-trip
저장소·Vercel 프로젝트 이름은 처음 만든 삼척 여행에서 온 것이라 samcheok-trip 그대로이고,
samcheok-trip-iota.vercel.app 로도 같은 사이트가 뜹니다.
루트(/)가 현재 진행 중인 여행, 지난 여행은 하위 폴더로 내려갑니다.
구조
index.html ← 현재 여행(후쿠오카) 화면 뼈대
data.js ← 후쿠오카 여행 정보 전부 (여기만 고치면 됨)
app/app.js 후쿠오카 전용 로직 — 이름 로그인 · Supabase 개인 준비물/메모
app/style.css 후쿠오카 전용 디자인 (공용 + 추가분)
reference/ 더데이투어 견적서 · 참석자 명단 원본 이미지
assets/app.js 지난 여행 3개가 함께 쓰는 공용 로직
assets/style.css 지난 여행 공용 디자인
cebu/ 세부 (지난 여행 · ../assets/ 참조)
okinawa/ 오키나와 (지난 여행 · ../assets/ 참조)
samcheok/ 삼척 (지난 여행 · ../assets/ 참조)
serve.js 로컬 미리보기 서버
vercel.json 배포 설정
assets/ 는 끝난 여행 3개가 같이 쓰는 공용 파일이라 건드릴 일이 거의 없습니다.
현재 여행은 app/ 에 자기 로직을 따로 들고 있습니다 — 이름 로그인과 Supabase 때문입니다.
새 여행 추가하기
- 지금 루트에 있는 여행을
이전여행이름/ 폴더로 옮기고, 그 index.html 의 경로를
../assets/style.css · ./data.js · ../assets/app.js 로 바꿉니다
(현재 여행이 app/ 을 쓰고 있었다면 공용 assets/ 를 가리키게 바꿔주면 됩니다)
- 새 여행의
index.html 과 data.js 를 루트에 둡니다
vercel.json 에 새 하위 폴더의 캐시 헤더·리다이렉트 규칙을 추가합니다data.js 의 meta.storeKey 를 여행마다 다르게 지정합니다
(안 그러면 체크리스트 체크 상태가 다른 여행과 섞입니다)
후쿠오카만 다른 점 — 이름 로그인 + Supabase
다른 여행은 비밀번호 하나를 같이 쓰지만, 후쿠오카는 본인 이름으로 들어갑니다.
준비물과 메모가 사람마다 따로 저장돼야 해서입니다.
fukuoka_people 참석자 명단 27명 (이름 · 가족번호 · 별칭)
fukuoka_checklist 사람별 준비물 (추가 · 삭제 · 체크)
fukuoka_memo 사람별 메모 (입력 멈추면 자동 저장)
- Supabase 프로젝트
Dohhani_Thinker (서울 리전) 안에 fukuoka_ 접두사로 들어 있습니다
- 처음 들어온 사람에게는
data.js 의 prepDefaults 가 한 번만 복사됩니다
- 그 뒤 추가·삭제·체크는 그 사람 행에만 반영됩니다
data.js 의 meta.authMode: "name" 이 이름 로그인 스위치입니다
⚠️ 이름 입력은 인증이 아니라 선택입니다. 링크를 아는 사람은 누구 이름으로든 들어가
그 사람 준비물과 메모를 보고 고칠 수 있습니다. 가족끼리 쓰는 용도라 이렇게 뒀습니다 —
민감한 내용은 적지 마세요. 브라우저에 들어가는 키도 공개(publishable)용 키입니다.
도메인 tripeasys.com 이 이 프로젝트에 연결돼 있고, 루트가 곧 후쿠오카 화면입니다.
예전에 공유한 /fukuoka/ 링크는 vercel.json 리다이렉트로 루트로 넘어갑니다.
화면 구성
한 페이지에 전부 나열하지 않고, 하단 탭 바로 카테고리를 나눠 놓았습니다.
| 탭 | 내용 |
|---|
| 🏠 한눈에 | 히어로 · D-DAY · 확정 예약 · 카테고리 바로가기 + 준비 현황 |
| 🗓️ 일정 | Day별 타임라인 |
| 🗺️ 지도 | Leaflet 지도 · 날짜/카테고리 필터 · 장소 목록 |
| 🏨 숙박 | 숙소 상세 · 전화 · 지도 · 주소 복사 |
| 🍜 맛집 | 대표 음식 표 · 후보 목록 |
| 🎒 준비물 | 체크리스트 (localStorage 저장) |
- 탭은 주소창 해시로 기억됩니다 (
#plan, #map …) — 링크로 특정 탭 바로 공유 가능
- 상단바 왼쪽
‹ 버튼으로 이전 화면 복귀 — 앱 안에 이력이 없으면 홈으로 (페이지 밖으로 나가지 않음)
- 탭 목록을 바꾸려면
assets/app.js 의 VIEWS 배열 + index.html 의 data-view 섹션을 같이 수정
- 지도는 '지도' 탭을 처음 열 때 초기화됩니다 (숨겨진 채로 만들면 크기가 깨져서)
로컬에서 보기
node serve.js
index.html 을 브라우저로 바로 열어도(file://) 동작합니다.
배포 (설정 완료됨)
GitHub 저장소가 Vercel 프로젝트 samcheok-trip 에 연결돼 있습니다.
main 에 push 하면 자동으로 프로덕션 재배포됩니다.
# data.js 수정 후
git add -A
git commit -m "일정 추가"
git push
빌드 설정은 없습니다 (정적 사이트, Framework Preset = Other). vercel.json 이 캐시 헤더만 잡아줍니다.
참고
- 폰에서 열고 홈 화면에 추가 하면 앱처럼 전체화면으로 뜹니다
.vercel/, .env.local 은 .gitignore 로 제외됩니다 (Vercel 토큰 포함되므로 커밋 금지)
비밀번호
각 여행의 data.js → meta.password (세부 1001, 오키나와 0831, 삼척 0811)
후쿠오카는 비밀번호가 없습니다 — 명단에 있는 본인 이름을 입력합니다.
클라이언트 사이드 잠금이라 진짜 보안은 아닙니다. 링크를 아는 사람만 막는 용도.
소스를 보면 비밀번호가 그대로 보이니, 민감한 정보(카드번호·여권번호 등)는 넣지 마세요.
한 번 입력하면 브라우저에 기억됩니다(localStorage).
