김준일 ♥ 박건영 — 모바일 청첩장

2026년 11월 7일 토요일 오전 11시 · 부전교회 3층 세움홀

Next.js 16 · React 19 · Tailwind CSS v4 · Google Spreadsheet 로 동작하는 모바일 청첩장입니다.
참석 여부(RSVP)를 구글 시트로 실시간 수집하여 뷔페 인원을 집계합니다.

---

1. 화면 구성

순서	섹션	내용
—	커버	대표 사진 (9번 사진) · 이름 · 일시
01	초대합니다	인사말 · 혼주/신랑신부 · 연락하기 & 예식 안내사항 팝업 버튼
02	예식 안내	달력 · D-day 카운트다운 · 캘린더 저장(.ics / 구글)
03	갤러리	사진 13장 · 스와이프 라이트박스
04	오시는 길	지도 · 주소 복사 · 카카오맵/네이버지도/T맵 · 교통 안내
05	참석 여부	구글 시트로 참석·인원·식사 여부 실시간 저장
06	마음 전하실 곳	계좌 아코디언 · 복사 · 카카오페이
07	공유하기	카카오톡 · 시스템 공유 · 링크 복사

부가 기능:

• 안내사항 팝업: 페이지 진입 시 사랑의 쌀화환 기부 안내, 식사인원 체크 부탁, 예배식 예식 안내 팝업 노출 (오늘 하루 보지 않기 지원)
• 배경음악: 5초 뒤 합심 MR 자동 재생 안내 토스트, 우측 상단 음소거 버튼 토글
• 하단 고정 바(Dock): 오시는 길, 참석 여부, 공유 바로가기 (3단)
• /admin 대시보드: 구글 시트 실시간 통계 요약 및 엑셀(CSV) 다운로드

---

2. 시작하기 (로컬)

npm install
cp .env.example .env.local   # 값 채우기 (아래 4번)
npm run dev

http://localhost:3000 에서 확인합니다.

---

3. 내용 채우기 — src/config/wedding.ts

• 신랑·신부·혼주 연락처
• 예식장 전화번호
• 예식장 주소와 좌표 (address, lat, lng)
• 교통 안내 (transport)
• 계좌번호 (accounts)
• 인사말 문구 (greeting)
• RSVP 마감일 (rsvp.deadline) — 기본값 2026-10-25
• 커버 사진: 9번 사진 (coverIndex: 8) 기본 적용 완료
• 배경음악: public/bgm.m4a (합심 MR) 기본 탑재 완료

---

4. 구글 스프레드시트 연동 방법 (5분 완성)

별도의 복잡한 데이터베이스(Supabase 등) 없이, 본인의 구글 스프레드시트에 하객 응답이 실시간 행으로 자동 추가됩니다.

1. 구글 스프레드시트 생성
   • Google Sheets에서 새 스프레드시트를 만듭니다. (시트 제목 예: 결혼식 참석 명단)
2. Apps Script 열기
   • 상단 메뉴에서 [확장 프로그램] → [Apps Script] 를 클릭합니다.
3. 코드 붙여넣기
   • 기존의 function myFunction() {} 코드를 전부 지우고,
     프로젝트 루트에 있는 google-sheets-script.js 파일의 전체 내용을 그대로 복사해 붙여넣습니다.
4. 웹 앱 배포
   • 우측 상단 [배포] 파란색 버튼 → [새 배포] 클릭
   • 톱니바퀴 아이콘 클릭 → [웹 앱] 선택
   • 설명: 청첩장 RSVP
   • 다음 사용자 권한으로 실행: 나 (내 구글 이메일)
   • 액세스 권한이 있는 사용자: 모든 사용자 (⚠️ 꼭 '모든 사용자'를 선택해야 청첩장에서 접근 가능합니다)
   • [배포] 클릭 후 '액세스 승인' (Google 계정 로그인 및 고급 → 이동 클릭)
   • 최종 발급된 "웹 앱 URL" (https://script.google.com/macros/s/.../exec)을 복사합니다.
5. 환경변수 설정
   • .env.local 파일(및 Vercel 배포 시 환경변수)에 아래와 같이 붙여넣습니다:

     GOOGLE_SHEET_WEBHOOK_URL=https://script.google.com/macros/s/발급받은키/exec
     

   • 이제 하객이 청첩장에서 참석 여부를 제출하면 구글 시트에 1초 만에 새로운 행이 추가됩니다!

---

5. 관리자 페이지 (/admin)

• /admin에 접속하여 관리자 비밀번호(.env.local의 ADMIN_PASSWORD)로 로그인하면:
  • 구글 시트에 기록된 실시간 참석/식사 현황(신랑측/신부측, 식사 예정 인원 등)을 한눈에 볼 수 있습니다.
  • [구글 시트 바로가기] 버튼 및 [CSV 내려받기] 버튼을 제공합니다.

---

6. 카카오 연동 (선택)

지도와 카카오톡 공유하기에 쓰입니다. 없어도 청첩장은 정상 동작합니다.

1. https://developers.kakao.com → 내 애플리케이션 → 추가
2. 앱 키 → JavaScript 키 를 NEXT_PUBLIC_KAKAO_JS_KEY 에 넣습니다.
3. 플랫폼 → Web → 사이트 도메인 에 사이트 주소 등록 (http://localhost:3000 및 배포 도메인)

---

7. Vercel 배포

Vercel 프로젝트 생성 후 아래 환경변수를 등록합니다:

이름	설명
GOOGLE_SHEET_WEBHOOK_URL	구글 스프레드시트 웹 앱 URL
ADMIN_PASSWORD	/admin 로그인용 비밀번호
NEXT_PUBLIC_SITE_URL	배포 도메인 (예: https://wedding.guwonsoft.com)
NEXT_PUBLIC_KAKAO_JS_KEY	카카오 JavaScript 키 (선택)