📌 카카오페이 결제 연동 정리 (React + Spring Boot 백엔드)

1. 전체 결제 흐름

1. 결제 준비 요청 (/api/payments/ready)
   • 프론트에서 courseId 전달
   • 백엔드가 카카오페이 API 호출 → next_redirect_pc_url 응답
   • 프론트에서 해당 URL로 이동 → 카카오 결제창 열림
2. 결제 진행 (카카오 화면)
   • 사용자가 결제 수단 선택 및 결제 진행
   • 성공 시, 카카오가 success_url로 pg_token을 붙여 리다이렉트
3. 결제 승인 요청 (/api/payments/approve)
   • 프론트에서 pg_token을 백엔드에 전달
   • 백엔드가 카카오페이 API로 승인 요청
   • 성공 시 DB에 결제 내역 저장 + 유저의 수강 등록 처리

2. 프론트엔드 구성

✅ 결제 버튼

• 컴포넌트: <KakaoPayButton courseId={1} />
• 역할:
  • /api/payments/ready 호출
  • 성공 시 next_redirect_pc_url로 리다이렉트

export function KakaoPayButton({ courseId }) {
  const requestPayment = async () => {
    const res = await axios.post(`/api/payments/ready?courseId=${courseId}`, {}, {
      headers: { Authorization: `Bearer ${localStorage.getItem("accessToken")}` },
    });
    window.location.href = res.data.next_redirect_pc_url;
  };
  return <button onClick={requestPayment}>💳 카카오페이로 결제하기</button>;
}

✅ 결제 승인 페이지

• 컴포넌트: <KakaoPayApprovePage />
• 역할:
  • URL 쿼리에서 pg_token 추출
  • /api/payments/approve 호출
  • 승인 완료 시 → 내 강의실 이동

export function KakaoPayApprovePage() {
  const [searchParams] = useSearchParams();
  const pgToken = searchParams.get("pg_token");

  useEffect(() => {
    if (!pgToken) return;
    axios.get(`/api/payments/approve?pg_token=${pgToken}`, {
      headers: { Authorization: `Bearer ${localStorage.getItem("accessToken")}` },
    })
      .then(() => window.location.href = "/my-courses")
      .catch(() => alert("결제 승인 실패"));
  }, [pgToken]);

  return <div>결제 승인 중입니다...</div>;
}

✅ 성공 페이지 (선택)

• /payment/success 라우트에서 처리
• pg_token 추출 후 /approve API 호출