설정 페이지 만들기

앱에 설정 페이지를 추가해 보겠습니다. 이 페이지를 통해 사용자가 서비스 요금을 결제할 수 있습니다. 흐름은 다음과 같습니다.

  1. 사용자가 신용카드 정보와 저장할 노트 수를 입력합니다.
  2. 프론트엔드에서 Stripe를 호출해 신용카드 토큰을 생성합니다.
  3. 토큰과 노트 수를 결제 API로 전송합니다.
  4. 결제 API가 금액을 계산하고 카드에 청구합니다!

시작하려면 설정 페이지를 추가해 보겠습니다.

Change indicator src/types/billing.ts 파일을 새로 만들고, 결제 API 타입을 정의합니다.

export interface BillingType {
  storage: string;
  source?: string;
}

Change indicator src/containers/Settings.tsx 파일을 새로 만들고, 다음 코드를 추가합니다.

import { useState } from "react";
import config from "../config";
import { API } from "aws-amplify";
import { onError } from "../lib/errorLib";
import { useNavigate } from "react-router-dom";
import { BillingType } from "../types/billing";

export default function Settings() {
  const nav = useNavigate();
  const [isLoading, setIsLoading] = useState(false);

  function billUser(details: BillingType) {
    return API.post("notes", "/billing", {
      body: details,
    });
  }

  return <div className="Settings"></div>;
}

Change indicator src/Routes.tsx 파일의 <Routes> 블록에서 /signup 라우트 아래에 다음 코드를 추가합니다.

<Route path="/settings" element={<Settings />} />

Change indicator 그리고 src/Routes.js 파일 헤더에서 이 컴포넌트를 임포트합니다.

import Settings from "./containers/Settings.tsx";

이제 네비게이션 바에 설정 페이지 링크를 추가합니다.

Change indicator src/App.tsx 파일의 return 문에서 다음 줄을 교체합니다.

<Nav.Link onClick={handleLogout}>Logout</Nav.Link>

Change indicator 다음 코드로 교체합니다.

<>
  <LinkContainer to="/settings">
    <Nav.Link>Settings</Nav.Link>
  </LinkContainer>
  <Nav.Link onClick={handleLogout}>Logout</Nav.Link>
</>

이제 앱으로 이동하면 상단에 새로운 Settings 링크가 보입니다. 물론 현재 페이지는 비어 있습니다.

빈 설정 페이지 스크린샷

다음으로 Stripe SDK 키를 설정 파일에 추가하겠습니다.