[Project] 프로젝트 'FRA-WE-Tak' 회고(2)

1. 프로젝트 기간 및 구성 인원

2021.11.29 ~ 2021.12.10

Front-end 3명, Back-end 3명

2. Front-end 업무 분담(볼드처리 한 부분은 직접 구현한 파트이다)

• 로그인 / 회원가입 페이지
• 아이디 찾기
• 마이 페이지
• 메인 페이지
• 리스트 페이지
• 상세 페이지

3. 프로젝트 담당 업무

1. 회원가입 페이지

• 레이아웃 : JSX, 컴포넌트
• 유효성 검사: 백엔드로부터 받은 정규식을 사용하였다.
  • 이메일(아이디): @ / . 필수포함
  • 비밀번호: 대소문자 1자 / 특수문자 1자 / 숫자 1자 포함 / 8자 이상
• 통신
  • 유효성 검사를 통과할 시 fetch함수를 실행시켜 값이 정상적으로 전달 되었을 때 결과 메시지를 받으면 로그인 페이지로 이동하도록 하였고 반대의 경우 오류 메시지가 뜨도록 로직을 작성하였다. 아이피 주소는 config 파일을 만들어 API끼리 관리되도록 하였다.

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import ButtonContainer from '../ButtonContainer/ButtonContainer';
import InputContainer from '../InputContainer/InputContainer';
import API from '../Config/Config';
import { SignUpData } from './SignUpData';
import './SignUp.scss';

function SignUp() {
  const navigate = useNavigate();

  const [inputValue, setInputValue] = useState({
    userName: '',
    userEmail: '',
    userPassword: '',
    userPhoneNumber: '',
    userAddress: '',
  });

  const { userName, userEmail, userPassword, userPhoneNumber, userAddress } =
    inputValue;

  const [checkBoxActive, setCheckBoxActive] = useState(false);

  const handleInput = event => {
    const { name, value } = event.target;
    setInputValue({
      ...inputValue,
      [name]: value,
    });
  };

  const isValidInput =
    userName.length >= 1 &&
    userPhoneNumber.length >= 1 &&
    userAddress.length >= 1;

  const isCheckBoxClicked = () => {
    setCheckBoxActive(!checkBoxActive);
  };

  const emailReg = new RegExp('[a-zA-Z0-9.-]\\.[a-zA-Z]{2,6}$');
  const passwordReg = new RegExp(
    '^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[$@$!%*?&])(?=.*[0-9])[A-Za-z\\d$@$!%*?&]{8,45}'
  );

  const getIsActive =
    emailReg.test(userEmail) &&
    passwordReg.test(userPassword) &&
    isValidInput &&
    checkBoxActive;

  const handleButtonValid = () => {
    if (!getIsActive) {
      alert('please fill in the blanks');
    } else {
      fetch(API.SIGN_UP, {
        method: 'POST',
        body: JSON.stringify({
          name: inputValue.userName,
          email: inputValue.userEmail,
          password: inputValue.userPassword,
          contact: inputValue.userPhoneNumber,
          address: inputValue.userAddress,
        }),
      })
        .then(response => response.json())
        .then(result => {
          if (result.message) {
            navigate('/login');
          } else {
            alert('잘못된 정보입니다!');
          }
        });
    }
  };
  
  (생략)

2. 로그인 페이지

• 레이아웃 : JSX, 컴포넌트
• 유효성 검사: 회원가입을 한 유저만 DB에서 확인을 거친 후 로그인을 가능하게 했다.
• 통신
  • DB에서 유저의 신원이 확인이 되면(아이디와 패스워드) 토큰을 받아와서 인증 & 인가를 거친 후 권한이 있는 기능을 사용할 수 있게 했다. 이메일 화면 출력은 페이지를 따로 만들어 이동시키는 형식으로 관리하였다. 아이피 주소는 마찬가지로 config 파일을 만들어 API끼리 관리되도록 하였다.

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import ButtonContainer from '../ButtonContainer/ButtonContainer';
import InputContainer from '../InputContainer/InputContainer';
import API from '../Config/Config';
import { LoginData } from './LoginData';
import './Login.scss';

function Login({ setIsToken }) {
  const navigate = useNavigate();

  const [inputValue, setInputValue] = useState({
    userEmail: '',
    userPassword: '',
  });

  const { userEmail, userPassword } = inputValue;

  const handleInput = event => {
    const { name, value } = event.target;
    setInputValue({
      ...inputValue,
      [name]: value,
    });
  };

  const getIsActive = userEmail.length >= 1 && userPassword.length >= 1;

  const handleButtonValid = () => {
    if (!getIsActive) {
      alert('please write a password or email address');
    } else {
      fetch(API.LOG_IN, {
        method: 'POST',
        body: JSON.stringify({
          email: inputValue.userEmail,
          password: inputValue.userPassword,
        }),
      })
        .then(response => response.json())
        .then(result => {
          if (result.message === 'success') {
            localStorage.setItem('access_token', result.token);
            setIsToken(true);
            navigate('/');
          } else {
            alert('잘못된 정보입니다!');
          }
        });
    }
  };
(생략)

3. 아이디 찾기

• 레이아웃 : JSX, 컴포넌트
• 통신
  • 유저의 이름와 핸드폰번호가 DB에서 확인이 되면 이메일 주소를 화면에 출력하는 방식으로 아이디 찾기 페이지를 구현하였다. 아이피 주소는 마찬가지로 config 파일을 만들어 API끼리 관리되도록 하였다.

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import InputContainer from '../InputContainer/InputContainer';
import ButtonContainer from '../ButtonContainer/ButtonContainer';
import API from '../Config/Config';
import { FindIdData } from './FindIdData';
import './FindId.scss';

function FindId() {
  const navigate = useNavigate();

  const [inputValue, setInputValue] = useState({
    userName: '',
    userPhoneNumber: '',
  });

  const { userName, userPhoneNumber } = inputValue;

  const handleInput = event => {
    const { name, value } = event.target;
    setInputValue({
      ...inputValue,
      [name]: value,
    });
  };

  const getIsActive = userName.length >= 1 && userPhoneNumber.length >= 1;

  const handleButtonValid = () => {
    if (!getIsActive) {
      alert('please fill in the blanks');
    } else {
      fetch(API.FIND_ID, {
        method: 'POST',
        body: JSON.stringify({
          name: inputValue.userName,
          contact: inputValue.userPhoneNumber,
        }),
      })
        .then(res => res.json())
        .then(res => {
          if (res.result?.[0]) {
            navigate('/print-email', { state: res.result[0] });
            console.log(res.result[0]);
          } else {
            alert('잘못된 정보입니다!');
          }
        });
    }
  };
  (생략)