[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('잘못된 정보입니다!');
}
});
}
};
(생략)
Author And Source
이 문제에 관하여([Project] 프로젝트 'FRA-WE-Tak' 회고(2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@niboo/Project-1차-프로젝트-FRA-WE-Tak-회고2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)