postread

frontend/src/components/MapForLoaction.js

+import { Map, MapMarker } from "react-kakao-maps-sdk";
+import React, { useRef, useState, useEffect, useContext } from 'react';
+
+const { kakao } = window;
+
+function MapLocator({ loc, keyword }) {
+  // 아주대학교를 기본 위치로 설정
+  const [info, setInfo] = useState()
+  const [markers, setMarkers] = useState([])
+  const [pagination, setPagination] = useState()
+  const [map, setMap] = useState()
+
+
+  const defaultCenter = { lat: loc.lat, lng: loc.lng }
+
+  return (
+    <div className="UserInput">
+      <div style={{display: 'flex'}}>
+        <Map // 지도를 표시할 Container
+          center={defaultCenter}
+          style={{
+            // 지도의 크기
+            width: "300px",
+            height: "450px"
+          }}
+          onCreate={setMap}
+          isPanto={true}
+          level={3}>
+            <MapMarker position={defaultCenter}>
+                <div style={{color:"#000"}}>{keyword}</div>
+            </MapMarker>
+        </Map>
+      </div>
+    </div>
+  )
+}
+
+export default MapLocator;
\ No newline at end of file

frontend/src/css/Article.css

 .article {
     background-color: #ffffff;
     border: 2px solid gray;
-}
\ No newline at end of file
+}
+
+.article:hover {
+    background-color: #bbbbbb;
+  }
\ No newline at end of file

frontend/src/pages/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 axios from 'axios';
 axios.defaults.withCredentials = true;
@@ -10,33 +13,53 @@ function PostRead() {
     let params = useParams();
     const userContext = useContext(UserContext);
     const [article, setArticle] = useState(null)
+    const navigate = useNavigate();
+    function MoveTo(link){
+      navigate(link)
+    }	
     useEffect(() => {
-      requestLoadArticleById(params.id)
+      userContext.CheckSession()
       .then((response) => {
-        console.log(response)
-        setArticle(response.data)
-      })
+          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="App">
-          <h1>포스트 페이지</h1>
-            <div className="introduction">
-              포스트 내용
-              <p>현재 페이지의 파라미터는 { params.id } 입니다.</p>
+        <div className="App" >
+            <div className="introduction" style={{display: 'flex'}}>
+              <MapLocator loc={{lat: article.latitude, lng: article.longitude}} keyword={article.keyword}></MapLocator>
               <Article data={Object.values(article)}></Article>
             </div>
+            댓글창, 댓글쓰기, 조와요 누르기
+            포스트 내용
+            <p>현재 페이지의 파라미터는 { params.id } 입니다.</p>
         </div>)
     }
     else {
       return(
         <div className="App">
           <h1>포스트 페이지</h1>
-            <div className="introduction">
-              포스트 내용
-              <p>현재 페이지의 파라미터는 { params.id } 입니다.</p>
+            <div className="introduction" style={{display: 'flex'}}>
               <p>로딩준</p>
             </div>
         </div>)