merge: 쿠키 credential 추가

sheepdog13 · Jan 29, 2024 · e972f09 · e972f09
2 parents 316dcb5 + 77344ac
commit e972f09
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 34 deletions.
diff --git a/client/src/_reducers/user.js b/client/src/_reducers/user.js
@@ -4,8 +4,10 @@ import axios from "axios";
 const asynsLoginFetch = createAsyncThunk(
   "userSlice/asynLoginFetch",
   async (formdata) => {
-    console.log("formdata", formdata);
-    const resp = await axios.post("/api/users/login", formdata);
+    const resp = await axios.post(
+      "https://nodestudy-34u2.onrender.com/api/users/login",
+      formdata
+    );
     return resp.data;
   }
 );

diff --git a/client/src/components/views/NavBar/NavBar.js → client/src/components/views/Header/Header.js b/client/src/components/views/NavBar/NavBar.js → client/src/components/views/Header/Header.js
@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import SvgIcon from "@mui/material/SvgIcon";
 import NightlightIcon from "@mui/icons-material/Nightlight";
+import { useNavigate } from "react-router-dom";
 
 const Wapper = styled.div`
   width: 100%;
@@ -171,24 +172,29 @@ const Span = styled.span`
   mix-blend-mode: difference;
 `;
 
-function NavBar() {
+function Header() {
+  const navigate = useNavigate();
   return (
     <Wapper>
-      <Burger for="burger">
-        <BurInput type="checkbox" id="burger" />
+      <Burger>
+        <BurInput type="checkbox" />
         <BurSpan></BurSpan>
         <BurSpan></BurSpan>
         <BurSpan></BurSpan>
       </Burger>
       <Logo src={`${process.env.PUBLIC_URL}/img/logo.png`} alt="home" />
       <RightBox>
         <SvgIcon component={NightlightIcon} fontSize={"large"} />
-        <LoginBtn>
+        <LoginBtn
+          onClick={() => {
+            navigate("/login");
+          }}
+        >
           <Span>Login</Span>
         </LoginBtn>
       </RightBox>
     </Wapper>
   );
 }
 
-export default NavBar;
+export default Header;
diff --git a/client/src/components/views/LandingPage/LandingPage.js b/client/src/components/views/LandingPage/LandingPage.js
@@ -1,7 +1,6 @@
-import React, { useEffect } from "react";
-import axios from "axios";
+import React from "react";
 import Auth from "../../../hoc/auth";
-import NavBar from "../NavBar/NavBar";
+import Header from "../Header/Header";
 import styled from "styled-components";
 
 const Wapper = styled.div`
@@ -11,14 +10,6 @@ const Wapper = styled.div`
 `;
 
 function LandingPage() {
-  useEffect(() => {
-    axios
-      .get("https://nodestudy-34u2.onrender.com/api/hello")
-      .then((response) => {
-        console.log(response);
-      })
-      .catch((err) => console.log(err));
-  }, []);
   // const logout = async () => {
   //   try {
   //     const res = await axios.get("/api/users/logout");
@@ -30,7 +21,7 @@ function LandingPage() {
   // };
   return (
     <Wapper>
-      <NavBar />
+      <Header />
     </Wapper>
   );
 }

diff --git a/client/src/components/views/LoginPage/LoginPage.js b/client/src/components/views/LoginPage/LoginPage.js
@@ -4,6 +4,83 @@ import { useDispatch, useSelector } from "react-redux";
 import { asynsLoginFetch } from "../../../_reducers/user";
 import { useEffect } from "react";
 import Auth from "../../../hoc/auth";
+import styled from "styled-components";
+
+const Wapper = styled.div`
+  margin-top: 100px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Form = styled.form`
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  padding-left: 2em;
+  padding-right: 2em;
+  padding-bottom: 0.4em;
+  background-color: #171717;
+  border-radius: 25px;
+  transition: 0.4s ease-in-out;
+`;
+
+const Title = styled.p`
+  text-align: center;
+  margin: 2em;
+  color: rgb(255, 255, 255);
+  font-size: 1.2em;
+`;
+
+const InputBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.8em;
+  border-radius: 25px;
+  padding: 0.6em;
+  border: none;
+  outline: none;
+  color: white;
+  background-color: #171717;
+  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
+`;
+
+const IconSvg = styled.svg`
+  height: 1.3em;
+  width: 1.3em;
+  fill: white;
+`;
+const Input = styled.input`
+  background: none;
+  border: none;
+  outline: none;
+  width: 100%;
+  color: #d3d3d3;
+`;
+
+const BtnBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 2em 0;
+  gap: 20px;
+`;
+
+const Btn = styled.button`
+  padding: 0.8em;
+  border-radius: 5px;
+  border: none;
+  outline: none;
+  transition: 0.4s ease-in-out;
+  background-color: #252525;
+  color: white;
+  *:hover {
+    background-color: black;
+  }
+`;
 
 function LoginPage() {
   // redux user 가져오기
@@ -27,20 +104,53 @@ function LoginPage() {
   };
 
   return (
-    <>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <input
-          placeholder="id"
-          {...register("email", { required: true })}
-        ></input>
-        <input
-          placeholder="password"
-          type="password"
-          {...register("password", { required: true })}
-        ></input>
-        <button type="submit">로그인</button>
-      </form>
-    </>
+    <Wapper>
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <Title>Login</Title>
+        <InputBox>
+          <IconSvg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            viewBox="0 0 16 16"
+          >
+            <path d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z"></path>
+          </IconSvg>
+          <Input
+            placeholder="email"
+            {...register("email", { required: true })}
+            type="text"
+          />
+        </InputBox>
+        <InputBox>
+          <IconSvg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            viewBox="0 0 16 16"
+          >
+            <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"></path>
+          </IconSvg>
+          <Input
+            placeholder="password"
+            type="password"
+            {...register("password", { required: true })}
+          />
+        </InputBox>
+        <BtnBox>
+          <Btn type="submit">Login</Btn>
+          <Btn
+            onClick={() => {
+              navigate("/register");
+            }}
+          >
+            Sign Up
+          </Btn>
+        </BtnBox>
+      </Form>
+    </Wapper>
   );
 }
 

diff --git a/server/index.js b/server/index.js
@@ -8,7 +8,12 @@ const cookieparser = require("cookie-parser");
 const { User } = require("./models/User");
 const nodemailer = require("nodemailer");
 
-app.use(cors({ origin: ["http://localhost:3000", "http://sheepdog13.blog"] }));
+app.use(
+  cors({
+    origin: ["http://localhost:3000", "http://sheepdog13.blog"],
+    credential: "true",
+  })
+);
 // application/x-www-form-urlencoded 이렇게된 데이터를 분석해서 가져올 수 있게 해준다.
 app.use(bodyParser.urlencoded({ extended: true }));
 // application/json 데이터를 분석해서 가져올 수 있게 해준다