회원가입2

import React, { useState } from 'react';
import { Form, Button } from 'react-bootstrap';

const LoginForm = (props) => {

	const [user, setUser] = useState({
		username: '',
		password: ''
	});

	const submitLogin = (e) => {
		
	}

	const changeValue = (e) => {
		setUser({
			...user,
			[e.target.name]: e.target.value
		});
	}

	return (
		<Form>
			<Form.Group>
				<Form.Label>Username</Form.Label>
				<Form.Control type="text" placeholder="Enter username" name="username" onChange={changeValue} />
			</Form.Group>

			<Form.Group>
				<Form.Label>Password</Form.Label>
				<Form.Control type="password" placeholder="Enter password" name="password" onChange={changeValue} />
			</Form.Group>
			<Button variant="primary" type="submit" onClick={submitLogin}>
				로그인
  			</Button>
		</Form>
	);
};

export default LoginForm;

import axios from "axios";
import React, { useState } from "react";
import { Button, Form } from "react-bootstrap";

const LoginForm = (props) => {
  const [user, setUser] = useState({
    username: "",
    password: "",
  });

  async function submitLogin(e) {
    e.preventDefault();
    try {
      let response = await axios({
        url: "http://localhost:8080/login",
        method: "post",
        data: user,
        headers: {
          "Content-Type": "application/json; charset=utf-8",
        },
      });
      //console.log(response.headers.authorization);

      let jwt = response.headers.authorization;
      //console.log(typeof jwt);

      localStorage.setItem("jwt", jwt); // I/O 발생
    } catch (error) {
      alert(error.response.data.msg);
    }
  }

  const changeValue = (e) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <Form>
      <Form.Group>
        <Form.Label>Username</Form.Label>
        <Form.Control
          type="text"
          placeholder="Enter username"
          name="username"
          onChange={changeValue}
        />
      </Form.Group>

      <Form.Group>
        <Form.Label>Password</Form.Label>
        <Form.Control
          type="password"
          placeholder="Enter password"
          name="password"
          onChange={changeValue}
        />
      </Form.Group>
      <Button variant="primary" type="submit" onClick={submitLogin}>
        로그인
      </Button>
    </Form>
  );
};

export default LoginForm;

import axios from "axios";
import React, { useState } from "react";
import { Button, Form } from "react-bootstrap";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { login } from "../../store";

const LoginForm = (props) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const [user, setUser] = useState({
    username: "",
    password: "",
  });

  async function submitLogin(e) {
    e.preventDefault();
    try {
      let response = await axios({
        url: "http://localhost:8080/login",
        method: "post",
        data: user,
        headers: {
          "Content-Type": "application/json; charset=utf-8",
        },
      });
      //console.log(response.headers.authorization);

      let jwt = response.headers.authorization;
      //console.log(typeof jwt);

      localStorage.setItem("jwt", jwt); // I/O 발생 (동기적으로 실행됨)

      dispatch(login());
      navigate("/");
    } catch (error) {
      alert(error.response.data.msg);
    }
  }

  const changeValue = (e) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <Form>
      <Form.Group>
        <Form.Label>Username</Form.Label>
        <Form.Control
          type="text"
          placeholder="Enter username"
          name="username"
          onChange={changeValue}
        />
      </Form.Group>

      <Form.Group>
        <Form.Label>Password</Form.Label>
        <Form.Control
          type="password"
          placeholder="Enter password"
          name="password"
          onChange={changeValue}
        />
      </Form.Group>
      <Button variant="primary" type="submit" onClick={submitLogin}>
        로그인
      </Button>
    </Form>
  );
};

export default LoginForm;

export const login = (jwt) => ({ type: "LOGIN", jwt: jwt });
export const logout = () => ({ type: "LOGOUT" });

const initState = {
  isLogin: false,
  jwt: "",
};

const reducer = (state = initState, action) => {
  switch (action.type) {
    case "LOGIN":
      return { isLogin: true, jwt: action.jwt }; // 리턴되는 값이 state로 저장됨
    case "LOGOUT":
      return { isLogin: false, jwt: "" };
    default:
      return state;
  }
};

export default reducer;

import axios from "axios";
import React, { useEffect, useState } from "react";
import { Pagination } from "react-bootstrap";
import { useSelector } from "react-redux";
import PostItem from "./../../components/PostItem";

const Home = () => {
  const [posts, setPosts] = useState([]);

  const jwt = useSelector((state) => state.jwt);

  useEffect(() => {
    apiHome();
  }, []);

  async function apiHome() {
    let response = await axios({
      url: "http://localhost:8080",
      method: "get",
    });

    console.log("posts", response.data);
    setPosts(response.data.body);
  }

  function prev() {}
  function next() {}

  return (
    <div>
      <h1>{jwt}</h1>
      {posts.map((post) => (
        <PostItem key={post.id} id={post.id} title={post.title} />
      ))}

      {/* {<PostItem id={1} title={"제목1"} />} */}
      <br />
      <div className="d-flex justify-content-center">
        <Pagination>
          <Pagination.Item onClick={prev} disabled>
            Prev
          </Pagination.Item>
          <Pagination.Item onClick={next}>Next</Pagination.Item>
        </Pagination>
      </div>
    </div>
  );
};

export default Home;