이 단계에서 하는 것: 머니노트에 '프리미엄' 결제를 붙인다. 토스페이먼츠(테스트 모드)로 결제창을 띄우고, 결제 승인은 서버에서 확인한다. 다음 단계로 넘길 것: 결제가 동작하는 앱(테스트 모드).
무엇에 결제를 붙이나 — '머니노트 프리미엄'(더 많은 통계·AI 요약)을 여는 결제 흐름을 만든다. 실무의 핵심 원칙은 하나다. 결제 승인은 반드시 서버에서 확인한다(confirm). 화면(금액·성공 여부)은 사용자가 조작할 수 있으니 믿지 않는다. 손님의 카드번호는 우리 서버를 거치지 않고 손님과 토스 사이에서만 오간다.
이 장은 사람이 할 일이 거의 없다. 테스트 모드는 토스가 공개한 테스트 키를 그대로 쓰므로 계정 가입도, 키 발급도 필요 없다. 결제창·서버 승인 구현은 전부 Claude가 한다.
[사람] 안내 — 지금은 안 해도 된다. 나중에 실제로 돈을 받는 서비스로 전환할 때만 토스페이먼츠에 가입해 본인 키를 발급받으면 된다 →
https://www.tosspayments.com(개발자센터). 테스트 실습에는 공개 테스트 키를 쓰므로 지금 가입하지 않아도 된다.
아래를 그대로 붙여 넣는다. Claude가 공개 테스트 키를 .env.local에 넣고, 결제창을 띄우고, 승인을 서버에서 하도록 구현한다.
'결제 연동' 역할을 만들어줘. 토스페이먼츠(최신 v2 SDK)로 '머니노트 프리미엄' 결제를 붙여줘. 최신 공식 문서를 확인해서 구현해.
- 테스트 키는 토스 공개 테스트 키를 .env.local에 넣어줘: NEXT_PUBLIC_TOSS_CLIENT_KEY(클라이언트 키), TOSS_SECRET_KEY(서버 전용 시크릿 키).
- 화면: 클라이언트 키로 토스 결제창(위젯)을 띄워 결제를 요청한다.
- 서버: 결제 성공으로 돌아오면 반드시 서버 API route에서 토스 결제 승인(confirm) API를 호출해 결제를 최종 확정한다. 시크릿 키는 서버 전용 환경변수로만 쓰고 클라이언트에 노출하지 않는다.
- 실패·취소도 처리하고 결과를 사용자에게 안전하게 보여줘. 코딩컨벤션·프로젝트구조 문서를 따라줘.
NEXT_PUBLIC_이 붙은 클라이언트 키는 화면에서 결제창을 여는 공개 값이고, TOSS_SECRET_KEY는 결제 승인용 서버 전용이라 NEXT_PUBLIC_을 붙이지 않는다. 이 두 이름은 배포(10장) 환경변수에서 그대로 다시 쓴다.
이렇게 나오면 성공: 결제 버튼 → 토스 결제창 → 서버 승인(confirm) → 완료 흐름이 만들어지고, 승인 확인이 서버에서 일어난다. 시크릿 키는 클라이언트 번들에 노출되지 않는다.
돈이 걸린 기능은 반드시 사람이 직접 눌러 확인한다.
1. npm run dev로 앱을 켜고 프리미엄 결제 버튼을 누른다.
2. 토스 결제창에서 테스트 결제 수단으로 결제한다. 테스트 모드라 실제로 청구되지 않는다.
3. 결제 후 앱이 결제 완료 상태를 보여주는지 본다. (승인이 서버에서 일어난다 — 화면이 혼자 "완료"라고 그린 게 아니다.)
4. 한 가지는 꼭 눈으로: AI에게 "결제 승인 코드에서 응답 금액과 주문 금액을 대조해 다르면 실패로 처리하는 부분을 열어서 보여줘"라고 시켜, 그 한 줄을 직접 확인한다. 돈이 걸린 코드 한 줄은 사람이 본다.
이렇게 나오면 성공: 테스트 결제가 승인되고(서버 confirm 경유), 앱이 결제 완료 상태를 보여주며, 금액 대조 코드를 눈으로 확인했다.
TOSS_SECRET_KEY가 서버 전용 환경변수(클라이언트 노출 없음)로 들어갔는지 확인한다.