PostRead.js

import { useNavigate } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import React, { useEffect, useState, useContext} from 'react';
import Article from '../components/Article.js';
import { UserContext } from '../Context.js';
import MapLocator from '../components/MapForLoaction.js';
import Comment from '../components/Comment.js';

import axios from 'axios';
axios.defaults.withCredentials = true;

function PostRead() {
    let params = useParams();
    const userContext = useContext(UserContext);
    const [article, setArticle] = useState(null)
    const navigate = useNavigate();
    function MoveTo(link){
      navigate(link)
    }	
    useEffect(() => {
      userContext.CheckSession()
      .then((response) => {
          if (!response.data) {
              alert("세션이 만료되었습니다. 다시 로그인 바랍니다.")
              MoveTo('/login')
           } 
           else{
            return requestLoadArticleById(params.id)
           }
        })
        .then((response) => {
          console.log(response)
          setArticle(response.data)
        })
        .catch((response)=>{
          console.log("error!:LogOut")
          console.log(response)
        })

    }, []);  

    console.log(article);
    console.log(article?Object.values(article):"no");

      if (article) {
        return(
          <>
            <div className="introduction" style={{display: 'flex'}}>
              <MapLocator loc={{lat: article.latitude, lng: article.longitude}} keyword={article.keyword}></MapLocator>
              <div>
                <Article data={article}></Article>
                <button>조와요</button>
              </div>
            </div>
            <form>
              <div style={{display: 'flex'}}>
                <button>댓글 작성</button>
                <input type="text"></input>
              </div>
            </form>   
            {
              article.comments.map((el)=>{
                return(
                  <Comment key={el._id} data={el}></Comment>
                )
              })
            }
          </>

        )    
      }
      else {
        return(
        <div className="introduction" style={{display: 'flex'}}>
          <p>로딩준</p>
        </div>
        )
      }

  }

  async function requestLoadArticleById(id) {
    const response = await axios({
      url: `http://localhost:8080/post/loadarticle/${id}`, // 통신할 웹문서
      method: 'get', // 통신할 방식
    });
    return response;
    }

  export default PostRead;