diff --git a/src/pages/login.js b/src/pages/login.js index 9fad05de7deb3d06762111fded9c7497bea7c8ce..c8a94b48666c432853ff3ddbebdf49e8018b3cc1 100644 --- a/src/pages/login.js +++ b/src/pages/login.js @@ -1,12 +1,14 @@ import React, {useState} from 'react'; import styles from "./login.module.css" - +import { useNavigate } from 'react-router-dom'; const Login=()=>{ + const navigate = useNavigate (); const [id, setId]=useState(''); const[password, setPassword]=useState(''); + const [err, setError] = useState(null); const[seePassword, setSeePassword]=useState(true); const handleLogin =async()=>{ @@ -22,19 +24,19 @@ const Login=()=>{ if (response.status===200){ alert(data); // 응답에서 access-token 추출 - const accessToken = data['access-token']; + // const accessToken = data['access-token']; // 쿠키에 저장 - document.cookie = `access-token=${accessToken}; path=/`; - + // document.cookie = `access-token=${accessToken}; path=/`; + navigate('/api/schedules'); }else if(response.status===400){ - alert('해당 정보의 유저가 존재하지 않습니다.'); + setError('해당 정보의 유저가 존재하지 않습니다.'); } else{ console.log("Login failed", data); } }catch(error){ - console.log('error during login', error); + alert('해당 정보의 유저가 존재하지 않습니다.'); } }; const seePasswordHandler=()=>{ @@ -42,8 +44,9 @@ const Login=()=>{ } return( + <div className={styles.whole}> <section className={styles.login_container}> - <div className={styles.logo_img}><img src='/planpuzzle_logo.png' height='80px'></img></div> + <div className={styles.logo_img}><img src='/logo.png' height='80px'></img></div> <div className={styles.title}>로그인</div> <div className={styles.input_container}> <div className={styles.input_with_image}> @@ -64,7 +67,7 @@ const Login=()=>{ value={password} placeholder='비밀번호' onChange={(e) => setPassword(e.target.value)} /> - <span className={styles.eye_img}><img src={seePassword ? './eye-off.png' : './eye-on.png'} + <span className={styles.eye_img}><img src={seePassword ? './eyeOff.png' : './eyeOn.png'} alt='비밀번호 가시성 전환' height='18px' width='17px' @@ -81,6 +84,7 @@ const Login=()=>{ <div className={styles.stick}>―――――――――<span className={styles.or}> 또는 </span>―――――――――</div> <div className={styles.gotoJoin}>아직 계정이 없으신가요? <a href="/api/users" className={styles.loginText}>회원가입</a></div> </section> + </div> ); } export default Login; \ No newline at end of file diff --git a/src/pages/login.module.css b/src/pages/login.module.css index bfbfb333e6eac260ad4bcef51fa74ff76a2603a5..9dbe3e2b8f0f1267b076337b04634608d07f5641 100644 --- a/src/pages/login.module.css +++ b/src/pages/login.module.css @@ -53,9 +53,10 @@ border: none; outline: none; /* 선택 시 나타나는 외곽선 제거 */ background-color: #F7F8F8; - margin-left: 15px; - margin-top:-10px; - margin-bottom: 2px + margin-left: 10%; + margin-top:-4%; + margin-bottom: 2px; + width: 80%; } .login{ height: 60px; @@ -106,13 +107,9 @@ margin-top: -10spx; } -.input_with_image input:last-child{ - margin-left: 10px; - margin-top:-4px; - margin-bottom: 2px -} -body { + +.whole { margin: 0; padding: 0; background: url('../../public/login_background1.png') no-repeat fixed; /* 배경 이미지 설정 */