게시글 프론트에서 확인하기

<@CrossOrigin>: javascript가 거부되지 않도록 해줌

@RequiredArgsConstructor
@RestController
@CrossOrigin <-요고
public class BoardApiController {

<saveForm>: react-quilljs 적용은 다음 편에~

const SaveForm = () => {
  const navigate = useNavigate();

  const [board, setBoard] = useState({
    title: "",
    content: "",
  });

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

  const submitBoard = (e) => {
    e.preventDefault(); //submit이 액션을 안타고 할 일을 그만함
    fetch("http://localhost:8080/비밀~", {
      method: "post",
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
      body: JSON.stringify(board),
    })
      .then((res) => {
       검증하시면 됩니다.검증의 결과 null인지 아닌지로 밑 로직을 따라감
      })
      .then((res) => {
        if (res !== null) {
          navigate(-1); //글 등록 후 이전 페이지로
        } else {
          alert("글 등록 실패!");
        }
      });
  };

  return (
    <Form onSubmit={submitBoard}>
      <Form.Group className="mb-3" controlId="formGroupTitle">
        <Form.Label>Title</Form.Label>
        <Form.Control
          type="title"
          placeholder="Title..."
          onChange={changeValue}
          name="title"
        />
      </Form.Group>
      <Form.Group className="mb-3" controlId="formGroupContent">
        <Form.Label>Content</Form.Label>
        <BoardWrite
          type="content"
          placeholder="Content..."
          onChange={changeValue}
          name="content"
        />
      </Form.Group>

      <Button variant="outline-secondary" type="submit">
        저장하기
      </Button>
    </Form>
  );
};

export default SaveForm;

<contentForm>

onst Content = (props) => {
  const propsParam = useParams();
  const id = propsParam.id;
  const navigate = useNavigate();

  const [board, setBoard] = useState({
    //처음에 공백
    data: [],
    status: "",
  });

  useEffect(() => {
    fetch("http://localhost:8080/board/" + id) //id를 통해서 게시판 정보를 가져옴
      .then((res) => res.json())
      .then((res) => {
        setBoard(res); //공백에 가져온 정보로 채워줌
      });
  }, []);

  const deleteBoard = () => {
    //해당 게시글 삭제
    fetch("http://localhost:8080/api/board/" + id + "/delete", {
      method: "DELETE",
    })
      .then((res) => res.text())
      .then((res) => {
        console.log(res);
        if (검증하면 됨) {
          navigate("/");
        } else {
          alert("삭제 실패");
        }
      });
  };

  const updateBoard = () => {
    //함수 updateBoard 실행되면 /update/id로 이동
    navigate("/board/updateForm/" + id);
  };

  return (
    <div>
      <h1>{board.data.title}</h1>
      <Button variant="secondary" onClick={() => updateBoard()}>
        수정
      </Button>{" "}
      <Button variant="secondary" onClick={() => deleteBoard()}>
        삭제
      </Button>
      <Card>
        <Card.Body>{board.data.content}</Card.Body>
      </Card>
      <Button variant="secondary" onClick={() => navigate(-1)}>
        돌아가기
      </Button>
    </div>
  );
};

export default Content;

<update>