PostWrite.js

import React, { useRef, useState, useEffect, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { UserContext } from '../Context.js';
import '../css/PostWrite.css'

import SearchMap from '../components/SearchMapByKeyword.js'
import axios from 'axios';
axios.defaults.withCredentials = true;

function PostWrite() {

  const [location, setLocation] = useState({
    keyword: "",
    center: { lat: null, lng: null }
  });
  const navigate = useNavigate();
  function MoveTo(link) {
    navigate(link)
  }
  const userContext = useContext(UserContext);
  useEffect(() => {
    userContext.CheckSession()
      .then((response) => {
        if (!response.data) {
          alert("로그인 바랍니다.");
          MoveTo('/login');
        }
      })
      .catch((response) => {
        console.log("error!:LogOut")
        console.log(response)
      })
  });

  const [previewImg, setPreviewImg] = useState({
    imageUrls: [],
  });

  const [content, setContent] = useState("");
  const [inputs, setInputs] = useState({
    title: "",
    content: "",
  });



  const onTextChange = (e) => {
    const { value, name } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  }

  const onImgChange = e => {
    let temp = []
    for (let i = 0; i < e.target.files.length; i++) {
      temp.push(e.target.files[i])
    }

    setContent(e.target.files);

    Array.from(e.target.files).forEach((file) => {
      const reader = new FileReader();
      console.log(file)
      reader.readAsDataURL(file);
      reader.onloadend = () => {
        previewImg.imageUrls.push(reader.result);
        setPreviewImg({
          imageUrls: previewImg.imageUrls
        });
      };
    });
  };

  let imglist = [];
  imglist = previewImg.imageUrls.map((image) => {
    return (
      <img
        src={image ? image : null}
        alt="이미지"
        style={{ width: "100px", height: "100px" }}
      />
    )
  }
  );

  const onSubmit = e => {

    e.preventDefault();

    if (!location.keyword) {
      alert("위치를 입력해주세요.");
      return;
    }

    if (!inputs.title) {
      alert("제목을 입력해주세요.");
      return;
    }

    if (!inputs.content) {
      alert("내용을 입력해주세요.");
      return;
    }

    const formData = new FormData();
    Array.from(content).forEach((el) => {
      formData.append("img", el);
    });
    formData.append("title", inputs.title);
    formData.append("content", inputs.content);
    formData.append("keyword", location.keyword);
    formData.append("latitude", location.center.lat);
    formData.append("longitude", location.center.lng);
    axios
      .post("http://localhost:8080/article", formData,
        {
          headers: { "Content-Type": "multipart/form-data" }
        })
      .then(res => {
        MoveTo('/')
      })
      .catch(err => {
        console.error(err);
      });
  };

  return (
    <>
      <section style={{ display: "flex" }}>
        <div>
          <SearchMap loc={location} setLoc={setLocation}></SearchMap>
        </div>
        <div>
          <form onSubmit={onSubmit}>
            <div style={{ display: "flex" }}>
              <input readOnly={true} type="text" placeholder="장소 키워드" value={location.keyword} />
              <button type="button" onClick={() => {
                setLocation({
                  keyword: "",
                  center: { lat: null, lng: null }
                })
              }}>선택 해제</button>
            </div>
            <div style={{ display: "grid" }}>
              <label>제목</label>
              <input
                type="text"
                name='title'
                onChange={onTextChange}
              />
            </div>
            <div style={{ display: "grid" }}>
              <label>Content</label>
              <textarea id='writeContent'
                type="text"
                name='content'
                onChange={onTextChange}
              />
            </div>
            <div style={{ display: "grid" }}>
              <div style={{ display: "flex" }}>
                {imglist}
              </div>
              <label htmlFor="profileImg">이미지 업로드</label>
              <input style={{ display: "none" }} id="profileImg" type="file" onChange={onImgChange} multiple />
            </div>
            <button type="submit">포스팅!</button>
          </form>
        </div>
      </section>
    </>
  )
}

/*

*/

export default PostWrite;