Edit login

TeamCOMO · Sep 4, 2023 · 581d9f5 · 581d9f5
1 parent 5d6f089
commit 581d9f5
Show file tree

Hide file tree

Showing 10 changed files with 344 additions and 323 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,21 +1,21 @@
 import React from "react";
 //import { RecoilRoot } from "recoil";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-
 import Main from "./routes/Main";
 import SignUp from "./routes/signUp";
 import SignIn from "./routes/signIn";
-import SignUp2 from "./routes/signUp2";
+import Mypage from "./routes/mypage";
+import Post from "./routes/Post";
 
 function App() {
   return (
     <Router>
       <Routes>
-
         <Route path="/" element={<Main />} />
         <Route path="/signin" element={<SignIn />} />
         <Route path="/signup" element={<SignUp />} />
-        <Route path="/signup2" element={<SignUp2 />} />
+        <Route path="/mypage" element={<Mypage />} />
+        <Route path="/post" element={<Post />} />
       </Routes>
     </Router>
   );

diff --git a/src/components/css/Nav.module.css b/src/components/css/Nav.module.css
@@ -3,9 +3,18 @@
   height: 72px;
   display: flex;
   align-items: center;
-
 }
-
+.wrapMain {
+  width: 100vw;
+  height: 400px;
+  display: flex;
+  align-items: center;
+  background-image: none, url(../img/mainBackground.png);
+}
+.link {
+  text-decoration: none;
+  margin-right: 30px;
+}
 .menuBox {
   display: flex;
   height: 24px;
@@ -14,8 +23,10 @@
   width: 40px;
   height: 40px;
   cursor: pointer;
-  margin-left: 10vw;
-  margin-right: 10vw;
+  margin-left: 1vw;
+  font-size: 25px;
+  font-family: "Times New Roman", Times, serif;
+  color: #888888;
 }
 .menu {
   display: flex;
@@ -34,8 +45,6 @@
   justify-content: space-between;
   right: 50px;
   position: absolute;
-
-
 }
 button {
   width: 100px;
@@ -54,9 +63,9 @@ button {
   color: black;
 }
 
-.logout{
-margin-left: 10px;
+.logout {
+  margin-left: 10px;
 }
-.logout:hover{
+.logout:hover {
   cursor: pointer;
-}
+}
diff --git a/src/components/img/mainBackground.png b/src/components/img/mainBackground.png
diff --git a/src/components/js/Nav.js b/src/components/js/Nav.js
@@ -1,44 +1,62 @@
+import { useParams } from "react-router-dom/dist";
 import NavStyle from "../css/Nav.module.css";
 import comoLogo from "../img/background.png";
 import { Link } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 function Nav() {
-  const navigate= useNavigate();
+  const navigate = useNavigate();
+  const param = useParams();
+
   let accessToken = localStorage.accessToken;
-  const handleLogout = ()=>{
-    localStorage.setItem("accessToken","")
-    accessToken ="";
-    navigate('')
-  }
+  const handleLogout = () => {
+    localStorage.setItem("accessToken", "");
+    accessToken = "";
+    navigate("");
+  };
   return (
     <div className={NavStyle.wrap}>
       <Link to="/" className={NavStyle.link}>
-        <img src={comoLogo} className={NavStyle.logo}></img>
+        <div style={{ margin: "0 20px 0 20px" }}>
+          <flex style={{ color: "black" }} className={NavStyle.logo}>
+            C
+          </flex>
+          <flex className={NavStyle.logo}>O</flex>
+          <flex style={{ color: "black" }} className={NavStyle.logo}>
+            M
+          </flex>
+          <flex className={NavStyle.logo}>O</flex>
+        </div>
       </Link>
       <div className={NavStyle.menuBox}>
         <Link to="/" style={{ textDecoration: "none" }}>
           <flex className={NavStyle.menu}>Home</flex>
         </Link>
-        <flex className={NavStyle.menu}>get post</flex>
-        <flex className={NavStyle.menu}>event</flex>
-        <flex className={NavStyle.menu}>My page</flex>
-      </div>
-
-
-      {accessToken === ""?
-      <div className={NavStyle.loginBox}>
-        <Link to="/signin">
-          <button className={NavStyle.login}>Log in</button>
-        </Link>
-        <Link to="/signup">
-          <button className={NavStyle.signup}>Sign up</button>
+        <Link to="/post" style={{ textDecoration: "none" }}>
+          <flex className={NavStyle.menu}>Post</flex>
         </Link>
-      </div>:
-      <div>
-      <span> 마이페이지 </span>
-      <span className={NavStyle.logout} onClick={handleLogout}> 로그아웃 </span>
+        <flex className={NavStyle.menu}>Event</flex>
       </div>
-  }
+
+      {accessToken === "" ? (
+        <div className={NavStyle.loginBox}>
+          <Link to="/signin">
+            <button className={NavStyle.login}>Log in</button>
+          </Link>
+          <Link to="/signup">
+            <button className={NavStyle.signup}>Sign up</button>
+          </Link>
+        </div>
+      ) : (
+        <div className={NavStyle.loginBox}>
+          <Link to="/mypage">
+            <button className={NavStyle.login}>마이페이지</button>
+          </Link>
+          <button className={NavStyle.signup} onClick={handleLogout}>
+            {" "}
+            로그아웃{" "}
+          </button>
+        </div>
+      )}
     </div>
   );
 }

diff --git a/src/components/js/signInBox.js b/src/components/js/signInBox.js
@@ -15,12 +15,14 @@ function SignInBox() {
     axios
       .post("/user/sign-in", { username: id, password: pw })
       .then((res) => {
-        localStorage.setItem("accessToken",res.data)
+        console.log(res);
+        localStorage.setItem("accessToken", res.data);
         console.log("로그인 성공:", res.data);
-        navigate('/');
+        navigate("/");
       })
       .catch((error) => {
-        console.log("잘못된 이메일 또는 비밀번호입니다."); // 로그인 실패 시 처리 (예: 에러 메시지 표시)
+        console.log(error);
+        alert("잘못된 id 또는 비밀번호입니다."); // 로그인 실패 시 처리 (예: 에러 메시지 표시)
       });
   };