Merge pull request #81 from LikeLionHGU/yeji1-style/#78

feat : 로그인, 회원가입 기능 구현

src/account/LogIn.js

@@ -9,6 +9,7 @@ import logo from "./img/logo.png";
 import LoginRect from "./img/loginrect.png";
 import emailicon from "./img/emailicon.png";
 import pwicon from "./img/pwicon.png";
+import warningicon from "./img/warningicon.png";
 import kakaologo from "./img/kakaologo.png";
 
 import styles from "./LogIn.module.css";
@@ -21,6 +22,7 @@ const LogIn = () => {
   const [email, setEmailinput] = useState("");
   const [password, setPasswordinput] = useState("");
   const [isSuccessful, setisSuccessfulinput] = useState("");
+  const [memberId, setmemberId] = useState("");
 
   const [message, setMessage] = useState("");
 
@@ -37,18 +39,26 @@ const LogIn = () => {
         email: email,
         password: password,
         isSuccessful: isSuccessful,
+        memberId: memberId,
       }),
     })
-      .then((response) => response.json)
-      .then((result) => console.log("결과: ", result))
+      .then((response) => response.json())
+      .then((result) => {
+        if (result.isSuccessful) {
+          localStorage.setItem("member_id", JSON.stringify(result.memberId));
+          navigate("/");
+        } else {
+          console.log("AAaAAA", result.isSuccessful);
+          setMessage(
+            // { warningicon },
+            "아이디 또는 비밀번호를 잘못 입력했습니다. 입력하신 내용을 다시 확인해주세요."
+          );
+        }
+      })
       .catch((error) => {
         setMessage(error.response.data.message);
-        console.log(error);
+        console.log(">>>>>>", error.response);
       });
-
-    if (isSuccessful === false) {
-      return alert("DKFJS");
-    }
   };
 
   const LoginFunc = (e) => {
@@ -105,17 +115,20 @@ const LogIn = () => {
                   className={!message ? "inputLogin" : "err_password"}
                   placeholder="비밀번호"
                 />
-                <p className={styles.err}>{message}</p>
               </span>
             </div>
+            <div className={styles.warning}>
+              {/* <img src="warningicon" /> */}
+              <p>{message}</p>
+            </div>
           </div>
         </div>
         <div className={styles.btn}>
-          <Link to="/">
-            <button className={styles.buttonlogin} onClick={loginaxios}>
-              로그인
-            </button>
-          </Link>
+          {/* <Link to="/"> */}
+          <button className={styles.buttonlogin} onClick={loginaxios}>
+            로그인
+          </button>
+          {/* </Link> */}
         </div>
         {/* <div className={styles.btn}>
           <button className={styles.buttonkakaologin} onClick={loginaxios}>

src/account/LogIn.module.css

@@ -119,3 +119,7 @@
 .buttonkakaologin {
   background-color: #ffe812;
 }
+.warning {
+  color: red;
+  font-size: small;
+}

src/header/Header.js

@@ -2,17 +2,21 @@ import Login from "./login/Login";
 import BoardList from "./search/BoardList";
 import Search from "./search/Search";
 import { Link } from "react-router-dom";
+
 import logoimg from "./image/logo.png";
 import chatimg from "./image/chat.png";
 import bellimg from "./image/bell.png";
 import profile from "./image/profile.png";
+import logout from "./image/logout.png";
+
 import styles from "./Header.module.css";
 
 export default function Header() {
   return (
     <div className={styles.header}>
       <span className={styles.logo}>
         <Link to="/">
+          {/* <h1>MakeUs</h1> */}
           <img src={logoimg} />
         </Link>
       </span>
@@ -25,20 +29,25 @@ export default function Header() {
         </Link>
       </span>
       <span className={styles.icon}>
-        <span id={styles.chat}>
+        {/* <span id={styles.chat}>
           <button>
             <img src={chatimg} />
           </button>
-        </span>
-        <span id={styles.notice}>
-          <button>
-            <img src={bellimg} />
-          </button>
-        </span>
-        <span id={styles.profile}>
-          <Link to="/login">
-            <img src={profile} />
-          </Link>
+        </span> */}
+        <span id={styles.menuicon}>
+          <span id={styles.notice}>
+            <button>
+              <img src={bellimg} />
+            </button>
+          </span>
+          <span id={styles.profile}>
+            <Link to="/login">
+              <img src={profile} />
+            </Link>
+          </span>
+          <span id={styles.logout}>
+            <img src={logout} />
+          </span>
         </span>
       </span>
     </div>

src/header/Header.module.css

@@ -10,9 +10,15 @@
   justify-content: center;
 }
 
+.header .logo h1 {
+  width: 157px;
+  height: 46px;
+  margin-right: 56px;
+}
+
 .header .logo img {
   width: 157px;
-  height: 36px;
+  height: 33px;
   margin-right: 50px;
 }
 
@@ -34,29 +40,55 @@
   margin-right: 110px;
 }
 
+#menuicon {
+  height: 30px;
+  border: 1px solid black;
+}
+
 .icon {
   display: flex;
 }
+
 .icon button {
   border: none;
   background-color: white;
 }
+
 .icon > #chat > button {
   margin-right: 10px;
 }
+
 .icon > #notice > button {
-  margin-right: 26px;
+  margin-right: 16px;
 }
+
 .icon > #chat > img {
   width: 28px;
   height: 28px;
   margin-right: 20px;
 }
+
 .icon > #notice > img {
+  width: 16px;
+  height: 20px;
+  margin-right: 16px;
+}
+
+.icon > #logout > img {
   width: 16px;
   height: 20px;
   margin-right: 36px;
 }
+
+#logout {
+  margin-left: 75px;
+}
+
+#profile {
+  width: 32px;
+  height: 32px;
+}
+
 #profile img {
   width: 30px;
   height: 30px;

src/write/BoardWrite.js

@@ -63,7 +63,7 @@ const BoardWrite = () => {
   };
 
   const saveBoard = () => {
-    navigate("/calendar");
+    navigate("/calendarmento");
   };
 
   const imageInput = useRef();