From 19f733c1fb367e6ba67c6d39b9b42cd875792cd6 Mon Sep 17 00:00:00 2001 From: limjeein Date: Thu, 20 Jul 2023 20:49:18 +0900 Subject: [PATCH] =?UTF-8?q?:zap:Modify=C2=A0:=20login=20=EC=84=B1=EB=8A=A5?= =?UTF-8?q?=20=EC=B5=9C=EC=A0=81=ED=99=94=20#151?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/user/emailLoginAPI.js | 4 -- src/pages/login/Login.jsx | 124 ++++++++++++++++------------------ 2 files changed, 59 insertions(+), 69 deletions(-) diff --git a/src/api/user/emailLoginAPI.js b/src/api/user/emailLoginAPI.js index ef2fd97..d2528a4 100644 --- a/src/api/user/emailLoginAPI.js +++ b/src/api/user/emailLoginAPI.js @@ -20,15 +20,11 @@ export const emailLoginAPI = async (email, password) => { // undefined 일 때 대비하는 로직 if (response.data) { - console.log(response); - console.log(response.data); return response.data; } else { - console.log('응답 데이터가 없습니다.'); return null; } } catch (error) { - console.error('API 요청 오류:', error.message); throw new Error(error.message); } }; diff --git a/src/pages/login/Login.jsx b/src/pages/login/Login.jsx index c62d471..4e80aa9 100644 --- a/src/pages/login/Login.jsx +++ b/src/pages/login/Login.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; import * as S from './Login.style'; @@ -16,93 +16,90 @@ function Login() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [emailError, setEmailError] = useState(''); - const [emailValid, setEmailValid] = useState(false); const [passwordError, setPasswordError] = useState(''); - const [passwordValid, setPasswordValid] = useState(false); - const [isEmailRed, setIsEmailRed] = useState(false); - const [isPasswordRed, setIsPasswordRed] = useState(false); const [isButtonDisabled, setIsButtonDisabled] = useState(true); - const setUserToken = useSetRecoilState(userTokenState); // 로그인 성공시 토큰 저장 - const setIsLoginState = useSetRecoilState(isLoginState); // 로그인 상태 관리 - const setAccountNameData = useSetRecoilState(accountNameState); // 로그인 성공시 계정ID 저장 + const setUserToken = useSetRecoilState(userTokenState); // 사용자 토큰 상태 설정 + const setIsLoginState = useSetRecoilState(isLoginState); // 로그인 상태 설정 + const setAccountNameData = useSetRecoilState(accountNameState); // 계정 이름 상태 설정 - // 이메일 입력 시 유효성 검사 - const handleEmailChange = (e) => { + // 입력 변경시 이메일 유효성 검사 + const handleEmailChange = useCallback((e) => { const emailValue = e.target.value; setEmail(emailValue); const emailReg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; - if (emailValue === '') { - setEmailValid(false); - } else if (!emailReg.test(emailValue)) { - setIsEmailRed(true); - setEmailValid(false); - setEmailError('* 올바른 이메일 형식이 아닙니다'); - } else { - setIsEmailRed(false); - setEmailValid(true); - setEmailError(''); - } - }; + setEmailError( + emailValue === '' || emailReg.test(emailValue) + ? '' + : '* 올바른 이메일 형식이 아닙니다', + ); + }, []); - // 비밀번호 입력 시 유효성 검사 - const handlePasswordChange = (e) => { + // 입력 변경시 비밀번호 유효성 검사 + const handlePasswordChange = useCallback((e) => { const passwordValue = e.target.value; setPassword(passwordValue); - if (passwordValue.length < 6) { - setPasswordValid(false); - setPasswordError('비밀번호는 6자 이상이어야 합니다.'); - setIsPasswordRed(true); - } else { - setPasswordValid(true); - setPasswordError(''); - setIsPasswordRed(false); - } - }; + setPasswordError( + passwordValue.length < 6 ? '비밀번호는 6자 이상이어야 합니다.' : '', + ); + }, []); - // 이메일,비밀번호 유효성이 확인됐을 때 로그인 버튼 활성화 + // 에러와 입력값을 통해 버튼 활성화 여부 결정 useEffect(() => { - if (emailValid && passwordValid) { + if ( + emailError === '' && + passwordError === '' && + email !== '' && + password !== '' + ) { setIsButtonDisabled(false); } else { setIsButtonDisabled(true); } - }, [emailValid, passwordValid]); + }, [emailError, passwordError, email, password]); - // 로그인 버튼 클릭 시 서버에 로그인 요청 - const handleLogin = async (e) => { - e.preventDefault(); + // 로그인 처리 + const handleLogin = useCallback( + async (e) => { + e.preventDefault(); - if (!isButtonDisabled) { - const data = await emailLoginAPI(email, password); + if (!isButtonDisabled) { + const data = await emailLoginAPI(email, password); - // 로그인 성공 시 토큰 및 사용자 정보 저장 - if (!data || !data.user || !data.user.token) { - setIsPasswordRed(true); - setPasswordError('*이메일 또는 비밀번호가 일치하지 않습니다.'); - } else { - setIsLoginState(true); - setUserToken(data.user.token); - setAccountNameData(data.user.accountname); - navigate('/home'); + if (!data || !data.user || !data.user.token) { + setPasswordError('*이메일 또는 비밀번호가 일치하지 않습니다.'); + } else { + setIsLoginState(true); + setUserToken(data.user.token); + setAccountNameData(data.user.accountname); + navigate('/home'); + } } - } - }; + }, + [ + isButtonDisabled, + email, + password, + navigate, + setIsLoginState, + setUserToken, + setAccountNameData, + ], + ); return ( <> 로그인 - {/* InputBox 컴포넌트 사용 */} - { - - 로그인 - - } - + + 로그인 + navigate('/join/signup')}> 이메일로 회원가입 @@ -130,4 +124,4 @@ function Login() { ); } -export default Login; +export default React.memo(Login);