5. 프론트에 회원가입버튼 알아보기

인증번호가 확인된다면 나머지를 입력하고 회원가입버튼을 누른다.

프론트 signup.js

// 회원 가입 API 요청
const submitSignup = async () => {
  let personalInfo = {
    name: String(document.getElementById(`SignupName`).value),
    personal: "",
    phone: "",
    favoriteSite: String(document.getElementById(`SignupPrefer`).value),
    email: String(document.getElementById(`SignupEmail`).value),
    password: String(document.getElementById(`SignupPwd`).value),
  };

  for (let i = 1; i <= 2; i++) {
    personalInfo.personal += String(
      document.getElementById(`SignupPersonal${i}`).value
    );
  }
  phone = "";
  for (let i = 1; i <= 3; i++) {
    personalInfo.phone += String(
      document.getElementById(`PhoneNumber0${i}`).value
    );
  }
  // 플래그 만들어서 입력이 다 됐는지 확인
  let isGood2Go = false;
  for (let key in personalInfo) {
    if (!personalInfo[key]) {
      isGood2Go = false;

      // =============경고창 나오게 하기 ====================
      let missingAlert = document.createElement("div");
      missingAlert.innerHTML = "빠뜨린 거 있다! : " + key;
      alert(missingAlert.outerHTML);
      return -1;
    } else {
      isGood2Go = true;
    }
    // console.log(key + " : " + personalInfo[key]);
  }

  // 만약 모든 조건이 다 됐다면
  if (isGood2Go) { 
    axios
      .post(`http://localhost:3000/users`, {
        name: personalInfo.name,
        personal: personalInfo.personal,
        phone: personalInfo.phone,
        favoriteSite: personalInfo.favoriteSite,
        email: personalInfo.email,
        password: personalInfo.password,
      })
      .then((req, res) => {   // 이 부분은 백엔드의 /users post가 완료된 후에 실행된다
        CloseModal();
        let okAlert = document.createElement("div");
        okAlert.innerHTML = "회원가입 성공!";
        alert(okAlert.outerHTML);
        return;
      });
  }
};

입력값이 빠졌는지 확인하고 됐다면 /users 의 post로 받은 값들을 보내준다.

 

백엔드

index.js

import express from "express";
import swaggerUi from "swagger-ui-express";
import swaggerJsdoc from "swagger-jsdoc";
import dotenv from "dotenv";
import mongoose from "mongoose";
import cors from "cors";
import { options } from "./swagger/config.js";

import { TokenController } from "./controllers/token_controller.js";
import { UsersController } from "./controllers/users_controller.js";
import { StarbucksController } from "./controllers/starbucks_controller.js";

const app = express();
app.use(express.json());
app.use(cors());
app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerJsdoc(options)));
dotenv.config();

const tokenController = new TokenController();
app.get("/tokens/phone", tokenController.getToken);
app.post("/tokens/phone", tokenController.postToken);
app.patch("/tokens/phone", tokenController.patchToken); 

const usersController = new UsersController();
app.get("/users", usersController.getUsers);
app.post("/users", usersController.postUsers); // 여기로 받는다.

const starbucksController = new StarbucksController();
app.get("/starbucks", starbucksController.getStarbucks);

mongoose.connect("mongodb://my_database:27017/codecamp");

app.listen(3000);

 

token_controllerd.js  class TokenController 일부분

  postUsers = async function (req, res) {
    let { name, email, personal, phone, favoriteSite, password, isAuth } = req.body; 
    let tokenPhone;
    let isAuthFromDB;
    try {
      // 휴대폰 인증전송 버튼을 누르지 않았을 경우, 에러를 보낸다
      tokenPhone = await Token.findOne({ phone: phone });
      isAuthFromDB = tokenPhone.isAuthFromDB;
      console.log(`tokenPhone: ${tokenPhone}, isAuthFromDB: ${isAuthFromDB}`);
    } catch (err) {
      res.status(422).send("에러!!! 핸드폰 번호가 인증되지 않았습니다. 인증전송 버튼을 누르세요.");
      return;
    }
    // 1. email이 정상인지 확인(eamil 존재 여부, @포함여부)
    if (email === undefined || !email.split("").includes("@")) {
      res.send("이메일 형식이 올바르지 않습니다.");
      return;
    }
    if (!isAuthFromDB ) { 
      console.log("토큰 인증이 올바르지 않습니다.");
      return;   
    } else {
      const ogs = await getOpenGraph(favoriteSite);

      const user = new Users({
        name: name,
        email: email,
        personal: personal.substring(0, 6) + "-*******",
        phone: phone,
        favoriteSite: favoriteSite,
        password: password,
        og: {
          title: ogs.title,
          description: ogs.description,
          image: ogs.image,
        },
      });
      sendTempToEmail(
        name,
        email,
        getWelcomeTemplate(name, personal, favoriteSite)
      );

      await user.save(); // 몽고디비로 저장된다. 좀 기다려줘

      console.log("=====================user._id=============");
      console.log(user._id);
      res.send(user._id);
      return;
    }
  };

여기서도 token/phone에서 체크한 것처럼 폰번호, 토큰을 확인한다. 만약 있다면 이메일도 보내고 디비에 저장도 한다.