Commit 6efcfcbf authored by Kim, MinGyu's avatar Kim, MinGyu
Browse files

signup 수정

parent d3214563
import React, { useState } from "react"; import React, { useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
function PasswordUpdate() { function PasswordUpdate() {
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [confirm, setConfirm] = useState(""); const [confirm, setConfirm] = useState("");
const [result, setResult] = useState("");
const [email, setEmail] = useState("");
const [alert, setAlert] = useState("");
function isEmail() {
var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
if(regExp.test(email)){
setAlert("이메일 형식이 맞습니다.")
}else{
setAlert("이메일 형식이 틀립니다.")
}
return
}
const handleSubmit = () => { const reform = () => {
if (password && confirm){ if (password && confirm){
if (password==confirm) { if (password==confirm) {
alert("비밀번호가 일치합니다."); setResult("비밀번호가 일치합니다.");
} else { } else {
alert("비밀번호가 다릅니다."); setResult("비밀번호가 다릅니다.");
} }
}else { }else {
alert("비밀번호가 입력되지 않았습니다.") setResult("비밀번호가 입력되지 않았습니다.")
} }
}; };
return ( return (
<form onSubmit={handleSubmit}> <div>
<input <div className="place-self-center py-3 border-b border-white ">
className="border border-black" <input
type="password" className="placeholder:text-slate-300
name="password" bg-white border border-slate-500 rounded-2xl
value={password} py-2 pl-9 pr-3
onChange={(e) => setPassword(e.target.value )} focus:border-black"placeholder="비밀번호" type="text"
/> name="password"
<input value={password}
className="border border-black" onChange={(e) => setPassword(e.target.value )}
type="confirm" />
name="confirm" </div>
value={confirm} <div className="place-self-center py-3 border-b border-white ">
onChange={(e) => setConfirm(e.target.value )}
<input
className="placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3
focus:border-black"placeholder="비밀번호 확인" type="text"
name="confirm"
value={confirm}
onKeyUp={reform} onChange={(e) => setConfirm(e.target.value )}
>
</input>
</div>
<p>{result}</p>
<input className="placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3
focus:border-black
" placeholder="email" type="text" name="Id"
onChange={(e) => setEmail(e.target.value )}
onKeyUp={isEmail}
/> />
<button type="submit">비밀번호 확인</button> <p>{alert}</p>
</form> </div>
); );
} }
...@@ -46,12 +82,12 @@ function PasswordUpdate() { ...@@ -46,12 +82,12 @@ function PasswordUpdate() {
export default function Signup () { export default function Signup () {
return( return(
<div className="gap-5"> <div className="gap-5 flex flex-col ">
<div className="p-12 w-1/2 h-1/2 md:w-40 md:h-1/6 bg-red-400 place-self-center rounded-2xl">
<div className="flex flex-col gap-2">
<div className="p-12 w-1/2 h-1/2 md:w-40 md:h-1/6 bg-red-400 place-self-center rounded-2xl">
<Link to="/">Travel Report</Link> <Link to="/">Travel Report</Link>
</div> </div>
<div className="flex flex-col w-auto h-80 md:w-1/2 bg-white border-2 border-black grid place-items-center rounded-xl place-self-center">
<div className="place-self-center py-3 border-b border-white "> <div className="place-self-center py-3 border-b border-white ">
<input className="placeholder:text-slate-300 <input className="placeholder:text-slate-300
...@@ -60,30 +96,10 @@ export default function Signup () { ...@@ -60,30 +96,10 @@ export default function Signup () {
focus:border-black" placeholder="ID " type="text"/> focus:border-black" placeholder="ID " type="text"/>
</div> </div>
<div className="place-self-center py-3 border-b border-white ">
<input className="placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3
focus:border-black
" name="firstPassword"placeholder="비밀번호" type="text"/>
</div>
<div className="place-self-center py-3 border-b border-white ">
<input className="placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3
focus:border-black"placeholder="비밀번호 확인" type="text"/>
</div>
<div className="showText place-self-center"> <div className="showText place-self-center">
<PasswordUpdate /> <PasswordUpdate />
</div>
<div className="place-self-center py-3 border-b border-white
">
<input className="placeholder:text-slate-300
bg-white border border-slate-500 rounded-2xl
py-2 pl-9 pr-3
focus:border-black
" placeholder="Id" type="text" name="Id"/>
</div> </div>
<button className="place-self-center py-3 border-b border-white <button className="place-self-center py-3 border-b border-white
"> ">
회원가입 버튼 회원가입 버튼
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment