[프로젝트] expo-mail-composer 사용해 문의하기 기능 달기

취업하고 나서 시간이 지나가는 동안 사이드 프로젝트로 진행하던 RN프로젝트도 막바지에 이르렀다.
사실 취업하고 나서 많이 늘어지는 바람에 늦어졌다... 🥹

1차적으로 빌드를 성공했는데, 아직 주변 사람들한테 테스트를 넘기지는 못했고, 아직 시간이 남은 김에 이전에 만들고자 했던 이메일로 문의하는 기능을 넣기로 했다.

앱 전반적으로 expo를 사용했기 때문에 expo에서 이메일 전송을 하게 해주는 기능이 있는지 찾아봤는데, expo-mail-composer 를 사용하면 가능하다. (공식문서)

공식문서를 참고하면 알 수 있듯이 프로미스를 반환하기 때문에 그에 맞춰서 작성해주었다.
공식문서에는 간단하게만 쓰여져 있어서 검색하다가 발견한 예제도 두고 간다...

sendEmail이라는 아래 함수는 문의하기 버튼을 누르면 실행된다.
수신인으로 개발자 계정이 연결되어 있고, 기본적으로 제목과 내용을 입력해달라는 문구가 지정되어 있으나 지우고 보내는 것도 가능하다.

프로미스 성공시 result에는 status가 담겨있는데, cancelled, saved, sent, undeterminded 등이 있다.
각각의 상태일 때 문구를 지정해주는 switch case문을 작성했고, 이를 통해 토스트 메시지를 띄워준다.

  const sendEmail = async () => {
    let options = {
      subject: '문의사항 제목을 입력해주세요',
      recipients: ['conopli.dev@gmail.com'],
      body: '문의사항 내용을 입력해주세요',
    };

    let promise = new Promise((resolve, reject) => {
      MailComposer.composeAsync(options)
        .then((result) => {
          resolve(result);
        })
        .catch((err) => {
          reject(err);
        });
    });

    let statusText = (type) => {
      switch (type) {
        case 'cancelled':
          return '문의 메일이 임시저장되지 않았습니다';
        case 'saved':
          return '문의 메일이 임시저장되었습니다';
        case 'sent':
          return '문의 메일이 전송되었습니다';
        case 'undeterminded':
          return '오류가 발생했습니다';
      }
    };

    promise.then(
      (result) => {
        const message = statusText(result.status);
        makeToast(message);
      },
      (err) => {
        makeToast(`에러: ${err}의 이유로 문제가 발생했습니다`, true);
      },
    );
  };