우리 팀 목표는 최고의 프로젝트상을 받는 것이다! 내게 맡겨진 기능을 일단 잘 해내보자. 이 작은 일을 일단 잘 끝내고 나서 webRTC,SSE등 전혀 모르는 기능들을 익혀서 프로젝트를 잘 완성하고 싶다.
API명세 문의할 것
✅회원가입 request에 email,nickname,password,isAgreed만 넘기면 안돼나?-emailAuth,role빼기?isAgreed 추가->email,nickname,password,emailAuth,role모두 보내기. 두개는 비워도 됨.
🟩회원가입 response에 이메일만 중복검사 안했을 때, 닉네임만 중복검사 안 했을 때, 둘다 했을 때 필요함. 이메일 인증은 빼기
🟩로그인 response 없는 이메일입니다.
'회원가입'기능 수정할 것
✅회원가입에서 한번 에러메세지뜨면 썼던 거 지우거나 조건 충족해도 계속 있는 것-패스워드 부분 useEffect로 해결. 다른 방법도 있었던 것 같은데.
✅이메일 중복체크 누르기도 전에 @와 .만 있으면 계속 서버로 이메일 주소를 보내는 것. 한 번만 가야 함.-버튼 누를 때만 가게(어떻게 했더라?
✅서버에서 '중복 확인 성공'이라고 왔는데, '이미 가입된 이메일입니다'라고 오류 메세지가 나옴.코드 수정하고 나서는 이메일 중복 체크에 실패했습니다. 라고 나옴.-띄어쓰기가 문제였음
✅아직 이메일 주소 치고 있는 중인데 이미 가입되었다고 함.->버튼 눌렀을 때 서버로 가게 함.
✅약관 동의를 위한checkbox input과 BottomButton이 줄이 바뀌어서 옆으로 붙게 하고 싶음->감싸는 div에다 스타일을 추가함:
const Wrapper = styled.div`
display: flex;
align-items: center;
`;🟩이메일 유효성검사(조건+중복체크), 비밀번호(조건,일치),닉네임 중복체크, 약관동의-이 6가지가 충족된 다음에야 회원가입 활성화되면 좋겠다.
🟩암호일치는 재입력 수정 때뿐 아니라 암호 변경할 때도 이루어져야 함->
암호 일치 여부 검사는 암호 재입력 필드를 수정할 때뿐만 아니라 암호 필드를 수정할 때도 이루어져야 합니다. 따라서 useEffect를 사용하여 암호 필드가 수정될 때마다 일치 여부를 확인하도록 할 수 있습니다. 아래는 수정된 passwordChangeHandler와 useEffect입니다
🟩중복체크한 다음에 바꾸고 회원가입 누르면 안되도록 해야 함.
🟩바라기는 이메일 조건 맞은 다음에 중복체크 버튼이 활성화되면 좋겠다.
🟩약관 누를 때 돌아오면 input비워있는 부분 대안 찾기-팝업창?
🟩회원가입 성공 시 로그인 페이지로 가기
🟩회원가입 실패 시 어떻게 표시
✅버튼 누르면 sendData가 초기화된 상태로 비어서 서버로 넘어감-> e.preventDefault() //요청전 리로드 방지로 해결
✅중복확인성공 메세지 받았는데 '사용할 수 있는 이메일입니다'가 안 뜸->" 중복 확인 성공" 여기 띄어쓰기 들어가서 지나갔던 것
코드를 입력하 //이메일 중복검사
const checkEmailExistence=(email)=>{
fetch(`http://43.200.75.146:8080/members/signup/checkEmail?email=${email}`)
.then(response=>response.json())
.then(data=>{
if(data.message ===" 중복 확인 성공"){
alert('사용 가능한 이메일입니다.')
setEmailErrorMessage('사용할 수 있는 이메일입니다.');
}else if(data.message === "중복된 이메일 입니다."){
setEmailErrorMessage('이미 사용 중인 이메일 입니다.')
}else{
setEmailErrorMessage('이메일 중복 체크에 실패했습니다.);
}
})
.catch(error => {
// 오류 처리
setEmailErrorMessage('이메일 중복 체크에 실패했습니다.');
console.error('이메일 중복 체크 요청에 실패했습니다:', error);
});
};
세요'로그인'기능 수정할 것
🟩로그인 버튼 눌렀을 때 이메일 오류 나옴.->이메일 쓰고 비밀번호로 넘어갔을 때 바로 나오면 좋을듯
🟩비밀번호 에러메세지가 수정만 하면 여전히 에러상태인데 에러멘트가 없어지고 로그인 버튼 눌러야 뜸->에러상태일 때까지는 표시되면 좋을듯
배우려고 하는 데 아직인 것
🟩커스텀훅
🟩리덕스툴킷
🟩리액트쿼리,뮤테이션
🟩jwt토큰
🟩쿠키
styled-components
🟩왼쪽에 붙어있는 label,input 가운데로 보내려면 감싸는 Form에다가 스타일.저 두 개의 조합이 어쩌라는 뜻이지?
dlsplay: flex;
flex-direction: column;
🟩로그인에서 쓴 styled components를 회원가입에서 쓰려면 붙여넣기말고는 방법이 없나?
