[NextJS] Mobile Web 에서 이메일 시스템 모달창 띄우기

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^5.1.6"

---

😢 내가 겪은 문제

내 짧디짧은 개발인생중에 그래도 웹개발을 제일 오래했는데, 모바일에서 문의 버튼이나 메일을 보내야하는 상황이 왔을 때

모바일에서 시스템 모달을 열어야 하는데 모르겠더라 ...

그 짧게 공부했던 코틀린에서도 작성해봤는데 .. 제일 오래 개발한 웹에서 할 줄 모른다니 ..

[Kotlin] Android 12 이상 메일 보내는 방법

그래서 이왕 기능을 만든 김에 기록해 두고 두고두고 사용하려고 한다.

sendEmail.tsx

export const sendEmail = () => {
  const email = "이메일주소";
  const subject = "제목";
  const body = "내용";

  // Create a mailto link
  const mailtoLink = `mailto:${email}?subject=${encodeURIComponent(
    subject
  )}&body=${encodeURIComponent(body)}`;

  // Open the mail app
  window.location.href = mailtoLink;
};

모바일인지 아닌지는 판별해주고 [ 하는 방법 보러가기 ]

[NextJS] 모바일인지 PC 인지 구별하는 방법

모바일이라면 sendEmail 함수를 실행시켜 줄 수 있도록 한다.

그러면 모바일 웹에서도 간편하게 이메일 시스템 모달 창을 띄울 수 있다.

그럼 PC 웹에서 문의 버튼 클릭 했을 때는 어떻게 대응해야 하냐 ? 나도 잘 모른다.

쉽게는 구글 폼을 연결시켜놓는다고는 하는데 아니면 모달창을 하나 만들던가 페이지를 만들어서

정보를 입력받고 메일을 보내주는데, EmailJS 나 nodemailer 를 사용한다고 하는데

 

Nodemailer :: Nodemailer

Send email directly from your code | EmailJS

EmailJS 는 과금이 될 수 있고, nodemailer 는 계정 정보를 입력해야하는데,

둘다 실제로 사용하기에는 좀 무리가 있지 않을 까 싶어서 사용하지 못했다. ( 내가 개발하는 건 로그인 기능이 없어서 ... )

아무튼 Mobile Web 에서 메일 보내는 시스템 모달 창을 띄우는 방법을 기록해 두는데는 성공적인 것 같다.