텍스트 어드벤쳐 사이트 로그인페이지 제작 중 Form 내부에 Form 코드가 불가능함을 알았다.
(수정 전 코드)
function login() {
axios({
method: "POST",
url: `http://localhost:3001/auth/login`,
data: {
email: email,
password: pwd,
},
})
}
return(
<body className="login-img">
<main className="login-main">
<header className="login-header">
<a href="/">
<div>
<span className="font-hambak login__title">
TEXT ADVENTURE
<br />
PROJECT
</span>
</div>
</a>
<div></div>
</header>
<form className="login-form" onSubmit={login}>
<div className="grid-1 font-game-thick">로그인</div>
<div className="grid-2 ">
<input type="email" placeholder="계정 이메일" required onChange={onChangeEmail}/>
<input type="password" placeholder="비밀번호" required onChange={onChangePwd}/>
<form className='google-login-form' action="http://localhost:3001/auth/google" method="get">
<button className="google-login"> <img src={googleLogo} />구글 로그인</button>
</form>
<div className="autoLogin-container">
<input type="checkbox" id="autoLogin" name="autoLogin" />
<label className="font-game-thin" htmlFor="autoLogin">로그인 상태 유지</label>
</div>
</div>
<div className="grid-3">
<button className="login-enter-btn">
<img src={arrow} alt="" />
</button>
</div>
<div className="grid-4 font-game-thin">
<a href="">아이디/비밀번호 찾기</a>
<br />
<a href="/#/signup">회원가입</a>
</div>
</form>
구글 로그인 버튼을 누르면 바로 상위에 있는 form에서 submit이 발생하는 게 아닌, 최상위 form에서 submit이 동작하여
onSubmit 에 login함수가 실행됨을 확인하였다.
(수정후)
<form className="login-form" onSubmit={login}>
<div className="grid-1 font-game-thick">로그인</div>
<div className="grid-2 ">
<input type="email" placeholder="계정 이메일" required onChange={onChangeEmail}/>
<input type="password" placeholder="비밀번호" required onChange={onChangePwd}/>
<div className='google-login-form'>
<div className="google-login" onClick={googleLogin}> <img src={googleLogo} />구글 로그인</div>
</div>
<div className="autoLogin-container">
<input type="checkbox" id="autoLogin" name="autoLogin" />
<label className="font-game-thin" htmlFor="autoLogin">로그인 상태 유지</label>
</div>
</div>
(평가)
어렵지 않은 수정이었다. 다만 form 안에 form을 사용할 수 없다는 걸 프론트를 코딩해본지 꽤나 오래되었는데 이제야 알게되어서 기록을 남기고 싶었다.
(git 주소)
'웹 개발 > Front-end' 카테고리의 다른 글
| ... operation (js 점 세 개 기능) (0) | 2023.06.01 |
|---|---|
| 유저 로그인 정보 저장하고 활용하기 (0) | 2023.04.25 |
| 게임 장르 선택 창 만들기 (0) | 2023.04.04 |
| 다른 component로 이메일 주소 넘기기 (0) | 2023.03.31 |
| WebKit 이란? (0) | 2022.03.14 |
