<aside> 💡

Next.js + Google Sheets API로 매출 대시보드를 만들고 Vercel에 배포하는 전체 가이드 | 튜토리얼 따라하기 문서 | 팟타이 Claude Code 튜토리얼 — 2026 Q1

</aside>

🎯 완성 목표

구글 시트의 매출 로우데이터를 불러와 Next.js 대시보드로 시각화하고, 비밀번호 보호 기능을 추가한 뒤 Vercel로 배포한다.

(튜토리얼 이후 작업 시 원하는대로 대시보드 완성 화면을 구성해가며 작업하시면 됩니다.)

튜토리얼 완성 화면 구성:

• KPI 카드 4개 — 총매출 / 총주문 / 평균단가 / 전월성장률
• 차트 6개 — 월별 / 채널별 / 주차 트렌드 / TOP10 메뉴 / 카테고리 도넛 / 채널 필터
• 딥 네이비 다크테마 + Pretendard 폰트
• 비밀번호 입력 페이지

튜토리얼 로우 데이터 : https://docs.google.com/spreadsheets/d/1wNzXdSbqqPLx9Hx17T67R-jppyKtUyXaCF41pCh5rpg/edit?usp=sharing

튜토리얼 진행 MD 파일 : 아래 파일 다운로드 후 클로드 코드 진행할 폴더에 넣어주시거나 채팅창에 붙여넣기 해주세요.

https://github.com/paadthai/pathai-dashboard/blob/main/TUTORIAL.md

📋 사전 준비

위의 MD 파일 붙여넣기 하면서 준비하셔도 됩니다. 그리고 이 글만 보면 뭔말인지 모르시는데 제영상 대충 보시고 클로드코드가 시키는대로만 해보세요!!

1. 구글 시트 준비 (개인 계정에 튜토리얼 파일 업로드 하세요.)

1. Google Sheets에서 새 스프레드시트 생성
2. 시트명: RAW_DATA
3. 매출 데이터 임포트 (파일 → 가져오기)
4. URL에서 시트 ID 복사: https://docs.google.com/spreadsheets/d/[여기가_시트_ID]/edit