feat: modify_loginpage

src/pages/login.js

 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

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; /* 배경 이미지 설정 */