캡스톤 디자인 프로젝트 -맛집 정보 사이트 만들기- (5) 프론트 회원 기능

우선 프론트 코드를 보기전에 설계부터 알아보겠습니다. 우선 상태관리를 해주기 위해 리코일을 이용하여 state폴더안에 

 

이런식으로 나눠서 관리를 해주기로 하였습니다.

https://codingbasics.tistory.com/314

리코일이란

 

지금 회원가입을 하기 위해서는 userAtoms.jsx 파일을 보면

import { atom } from "recoil";

export const authState = atom({
  key: "authState",
  default: {
    isAuthenticated: false,
    isLoading: false,
    showAuthModal: false,
    userId: null,
    username: "",
    email: "",
    full_name: "",
  },
});

 

이런식으로 상태값들을 한곳에 저장해서 사용할 수 있습니다.

 

 

인증 코드 전송

React에서는 사용자가 입력한 전화번호를 서버로 전송하여 인증 코드를 요청합니다.

const sendVerificationCode = async () => {
  const cleanedPhoneNumber = registerData.phone_number.replace(/-/g, ""); // 하이픈 제거
  try {
    const response = await fetch(
      "https://maketerbackend.fly.dev/api/v1/send-verification-code",
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ phone_number: cleanedPhoneNumber }),
      }
    );
    const parseRes = await response.json();
    if (parseRes.resultCode === "S-1") {
      setGeneratedCode(parseRes.verificationCode); // 인증 코드 저장
      setIsCodeSent(true); // 전송 상태 업데이트
      toast.success("인증코드가 발송되었습니다.");
    } else {
      toast.error("인증코드 발송 실패.");
    }
  } catch (error) {
    toast.error("서버 오류 발생: " + error.message);
  }
};

 

주요 포인트

• 사용자가 입력한 전화번호(registerData.phone_number)를 POST 요청으로 서버에 전송합니다.
• 서버 응답에 따라 인증 코드 전송 성공 여부를 사용자에게 알립니다.

서버 백엔드의 여기부분에서 api를 통해 요청을 했다고 볼 수 있습니다.

const sendVerificationCode = async (req, res) => {
  const { phone_number } = req.body;

  // 6자리 인증코드 생성
  const verificationCode = Math.floor(
    100000 + Math.random() * 900000
  ).toString();

  try {
    const response = await messageService.send({
      to: phone_number,
      from: "010-2848-5397",
      text: `인증코드: ${verificationCode}`,
    });

    if (response.error_list && response.error_list.length > 0) {
      return res.status(500).json({
        resultCode: "F-2",
        msg: "SMS 전송 중 에러가 발생했습니다.",
      });
    }

    return res.status(200).json({
      resultCode: "S-1",
      msg: "인증코드가 성공적으로 전송되었습니다.",
      verificationCode, // 개발용으로 인증코드 반환
    });
  } catch (error) {
    return res.status(500).json({
      resultCode: "F-1",
      msg: "서버 에러 발생",
    });
  }
};

app.post("/api/v1/send-verification-code", userCtrl.sendVerificationCode);

 

 

인증 코드 검증

React에서는 사용자가 입력한 인증 코드를 서버로 전송해 검증 요청을 보냅니다.

const verifyCode = async () => {
  try {
    const response = await fetch(
      "https://maketerbackend.fly.dev/api/v1/verify-code",
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          verificationCode: generatedCode, // 서버에서 받은 인증 코드
          inputCode: verificationCode,    // 사용자가 입력한 인증 코드
        }),
      }
    );
    const parseRes = await response.json();
    if (parseRes.resultCode === "S-1") {
      setIsVerified(true); // 인증 성공 상태 업데이트
      toast.success("인증 성공!");
    } else {
      toast.error("인증코드가 일치하지 않습니다.");
    }
  } catch (error) {
    toast.error("서버 오류 발생: " + error.message);
  }
};

 

주요 포인트

• 서버에서 제공한 generatedCode와 사용자가 입력한 verificationCode를 함께 서버로 전송.
• 성공 시 인증 상태를 업데이트하고 사용자에게 성공 메시지를 표시.

백엔드서버의 여기부분을 통해서 요청을 받아왔습니다.

const verifyCode = (req, res) => {
  const { verificationCode, inputCode } = req.body;

  if (verificationCode !== inputCode) {
    return res.status(400).json({
      resultCode: "F-1",
      msg: "인증코드가 일치하지 않습니다.",
    });
  }

  return res.status(200).json({
    resultCode: "S-1",
    msg: "인증이 완료되었습니다.",
  });
};

 

 

회원가입 프로세스

React는 사용자 정보를 서버에 전송하여 회원가입 요청을 보냅니다.

const handleSubmit = async (e) => {
  e.preventDefault();
  const cleanedPhoneNumber = registerData.phone_number.replace(/-/g, "");

  const data = {
    ...registerData,
    phone_number: cleanedPhoneNumber,
  };

  const response = await fetch(
    "https://maketerbackend.fly.dev/api/v1/register",
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    }
  );

  const parseRes = await response.json();
  if (parseRes.resultCode === "S-1") {
    toast.success("회원가입 성공!");
    setIsLogin(true); // 회원가입 후 로그인 모드로 전환
  } else {
    toast.error(parseRes.msg);
  }
};

 

주요 포인트

• 전화번호 인증 성공 후, 회원가입 데이터를 서버에 POST 요청.
• 서버 응답에 따라 회원가입 성공 또는 실패를 사용자에게 알림.

마찬가지의 백엔드의 여기부분을 통해서 요청을 받아왔습니다.

const register = async (req, res) => {
  try {
    const { username, password, email, full_name, phone_number } = req.body;

    const hashedPassword = await bcrypt.hash(password, 10); // 비밀번호 해싱

    const { rows } = await pool.query(
      `INSERT INTO users (username, password, email, full_name, phone_number)
       VALUES ($1, $2, $3, $4, $5)
       RETURNING id, username, email, full_name, phone_number, created_at`,
      [username, hashedPassword, email, full_name, phone_number]
    );

    res.status(201).json({
      resultCode: "S-1",
      msg: "사용자 등록 성공",
      data: rows[0],
    });
  } catch (error) {
    res.status(500).json({
      resultCode: "F-1",
      msg: "서버 에러 발생",
    });
  }
};

 

https://codingbasics.tistory.com/313

캡스톤 디자인 프로젝트 -맛집 정보 사이트 만들기- (4) 백엔드 로그인 기능

 

백엔드 부분은 여기를 참고하시면 됩니다.