request추가

greatdsyeomye · Jun 28, 2024 · 8680831 · 8680831
1 parent 5f073e8
commit 8680831
Show file tree

Hide file tree

Showing 4 changed files with 221 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",

diff --git a/src/pages/Join.js b/src/pages/Join.js
@@ -1,12 +1,140 @@
 import styled from "styled-components";
-import { useState,useEffect} from "react";
+import ThreePotato from '../images/character.png';
+import React, {useState} from 'react';
+import axios from 'axios';
+import { useNavigate } from "react-router-dom";
 
 function Join(){
-    return(
-        <div>
-            안녕하세요
-            안녕하세요
-        </div>
-    )
+  const navigate=useNavigate();
+  const [usernameinput,setUsernameinput]=useState("");
+  const [emailinput,setEmailinput]=useState("");
+  const [passwordinput,setPasswordinput]=useState("");
+  const [message,setMessage]=useState("");
+
+  const registeraxios =() =>{
+    axios
+    .post('pages/Join',{
+      //request
+      name:usernameinput,
+      email:emailinput,
+      pw:passwordinput,
+    })
+    .then((response)=>{
+      console.log(response);
+      alert('회원가입성공!');
+      if ((response.status=200)){
+        return navigate('/pages/Login');
+      }
+    }).catch((err)=>{
+      setMessage(err.response.data.message)
+      console.log(err);
+    });
+  };
+
+   return (
+    <Container>
+    <DefaultPotatoImage src={ThreePotato} alt="감자 캐릭터" />
+      <Title>Sign up</Title>
+      <Form>
+        <Input type="text" placeholder="이메일 주소" 
+        onChange={(e)=>{
+          setEmailinput(e.target.value);
+        }}/>
+        <Input type="text" placeholder="사용자 닉네임" 
+        onChange={(e)=>{
+          setUsernameinput(e.target.value);
+        }} />
+        <Input type="password" placeholder="비밀번호"
+        onChange={(e) => {
+          setPasswordinput(e.target.value);
+        }} />
+        <Input type="text" placeholder="비밀번호 확인하기" />
+        <hr style={hrStyle} />
+        <SubmitButton onClick={registeraxios} type="submit" value="회원가입" />
+      </Form>
+
+    </Container>
+  );
 }
+
+
+// 스타일 정의
+const Container = styled.div`
+  width: 100%;
+  max-width: 390px;
+  height:770px;
+  margin: 0px auto;
+  padding-bottom: 100px;
+  background-color: #FFF4E1;
+  box-sizing: border-box;
+  text-align: center;
+  font-family: 'BMJua', Arial, sans-serif;
+`;
+
+
+const Title = styled.h1`
+  color: #BDA170;
+  font-size: 80px;
+  margin-top: 0;
+`;
+
+const Form = styled.form`
+  margin-top: 25px;
+`;
+
+const Input = styled.input`
+  font-family: 'BMJua', Arial, sans-serif;
+  color: #FFFFFF;
+  margin: 10px 25px auto;
+  width: 330px;
+  height: 60px;
+  outline: none;
+  background-color: rgba(217, 217, 217, 0.7);
+  font-size: 25px;
+  border-radius: 15px;
+  border: 0;
+`;
+
+const SubmitButton = styled.input`
+  font-family: 'BMJua', Arial, sans-serif;
+  color: #FFFFFF;
+  margin: 5px 25px auto;
+  width: 330px;
+  height: 60px;
+  outline: none;
+  background-color: #BDA170;
+  font-size: 25px;
+  border-radius: 30px;
+  border: 0;
+`;
+
+const checkboxStyle = {
+    width: "25px",
+    height: "25px",
+    margin: "14px 5px 14px",
+    position:"relative",
+    top:"7px"
+  };
+
+const SignUpLink = styled.a`
+  display: block;
+  text-align: center;
+  margin-top: 20px;
+  font-size: 20px; 
+  text-decoration: none; 
+  color: #5A3A1C;
+`;
+
+const DefaultPotatoImage = styled.img`
+  display: block;
+  margin: 0px auto; // 이미지의 가운데 정렬을 위해 margin 수정
+  padding-top:100px;
+  width: 100px; // 원하는 너비로 설정
+  height: auto; // 높이는 자동으로 조정됨
+`;
+
+const hrStyle = {
+    width: "330px",
+    margin: "30px auto", // 가운데 정렬을 위해 수정
+  };
 export default Join
diff --git a/src/pages/Login.js b/src/pages/Login.js
@@ -1,15 +1,71 @@
 import React from "react";
 import styled from "styled-components";
+import ThreePotato from '../images/character.png';
+import {useState} from 'react';
+import {useNavigate} from "react-router-dom";
+import axios from 'axios';
+
+
+const Login = () => {
+  const navigate= useNavigate();
+  const [message, setMessage] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const loginaxios = (e) => {
+    e.preventDefault();
+	// 창이 새로고침되는 것을 막는다. 
+    axios
+      .post("/login", {
+        email: email,
+        password: password,
+
+
+      })
+      .then((response) => {
+        localStorage.setItem("Token", response.headers.authorization);
+        console.log(response);
+        if ((response.status = 200)) {
+          return navigate("/posts");
+        }
+      })
+      .catch((err) => {
+        setMessage(err.response.data.message)
+        console.log(err);
+      });
+  };
+
+  return (
+    <Container>
+      <DefaultPotatoImage src={ThreePotato} alt="감자 캐릭터" />
+      <Title>Login</Title>
+      <Form >
+        <Input type="text" placeholder="이메일 주소" name='id' vlaue={FormData.id} onChange={(e) => {
+            setEmail(e.target.value);
+           }}/>
+        <Input type="password" placeholder="비밀번호" name='pw' value={FormData.pw} onChange={(e) => {
+            setPassword(e.target.value);
+           }} />
+        <Input type="checkbox" style={checkboxStyle}/><label htmlFor="check1">비밀번호 저장하기</label>
+        <SubmitButton type="submit" onClick={loginaxios} value="로그인" />
+      </Form>
+      <hr style={hrStyle} />
+      <SignUpLink href="http://localhost:3000/join">회원가입하기</SignUpLink>
+    </Container>
+  );
+};
+export default Login;
 
 // 스타일 정의
 const Container = styled.div`
   width: 100%;
   max-width: 390px;
+  height:770px;
   margin: 0px auto;
   padding-bottom: 100px;
   background-color: #FFF4E1;
   box-sizing: border-box;
   text-align: center;
+  font-family: 'BMJua', Arial, sans-serif;
 `;
 
 
@@ -79,22 +135,3 @@ const hrStyle = {
     margin: "30px auto", // 가운데 정렬을 위해 수정
   };
 
-const Login = () => {
-  return (
-    <Container>
-      <DefaultPotatoImage src="images/character.png" alt="감자 캐릭터" />
-      <Title>Login</Title>
-      <Form>
-        <Input type="text" placeholder="이메일 주소" />
-        <Input type="password" placeholder="비밀번호" />
-        <Input type="checkbox" style={checkboxStyle}/><label htmlFor="check1">비밀번호 저장하기</label>
-        <SubmitButton type="submit" value="로그인" />
-      </Form>
-      <hr style={hrStyle} />
-      <SignUpLink href="#">회원가입하기</SignUpLink>
-      <SignUpLink href="#">비밀번호 찾기</SignUpLink>
-    </Container>
-  );
-};
-
-export default Login;