implement postread

backend/src/post.js

@@ -79,7 +79,19 @@ router.get("/loadarticle", async (req, res) => {
         }
       });
   });
-  res.send(JSON.stringify(articles) );
+  res.send(JSON.stringify(articles));
+});
+
+router.get("/loadarticle/:id", async (req, res) => {
+  
+  if(req.session.sessionid){	
+	console.log("세션 O")
+  }
+  else {
+	console.log("세션 X")
+  }
+  const articles = await articleService.findArticleById(req.params.id);
+  res.send(JSON.stringify(articles));
 });
 
 export default router;

frontend/src/App.js

@@ -7,6 +7,7 @@ import Main from "./pages/Main.js";
 import Login from "./pages/Login.js";
 import Search from "./pages/Search.js";
 import PostWrite from "./pages/PostWrite.js"
+import PostRead from "./pages/PostRead.js"
 
 import Header from "./components/Header.js";
 
@@ -65,6 +66,7 @@ function App() {
 				<Route path="/login" element={<Login/>}></Route>
 				<Route path="/search" element={<Search/>}></Route>
 				<Route path="/postwrite" element={<PostWrite/>}></Route> 
+				<Route path="/post/:id" element={<PostRead/>}></Route> 
 			</Routes>
 		</UserContext.Provider>
 		{/* <Footer/> */}

frontend/src/components/Article.js

 import React, {useEffect, useState} from "react";
+import "../css/Article.css"
 
-
-
+import {Routes, Route, Link, useNavigate, Navigate  } from 'react-router-dom';
 import { useParams } from 'react-router-dom';
 
 function Article({data}) {
@@ -10,6 +10,10 @@ function Article({data}) {
     keyword, latitude, longitude,
     comments, likes, createdAt] = data;
 
+  const navigate = useNavigate();
+  function MoveTo(link){
+    navigate(link)
+  }	
   let listItem = []
   listItem = images.map((el)=>{
     // http://localhost:8080/uploads/21701487062905.png
@@ -20,14 +24,11 @@ function Article({data}) {
         style={{ width: "100px", height: "100px"}}/>
     )});
     
-console.log(typeof createdAt)
   return (
-    <div>
+    <div class="article" onClick={()=>{console.log(_id); MoveTo(`/post/${_id}`)}}>
       <h1>{title}</h1>
-
       <h2>{keyword}</h2>
       <h3>{author.nickname} {createdAt}</h3>
-
       <p>{content}</p>
       <p>{listItem}</p>
       <p>댓글: {comments.length} // 조와요: {likes.length}</p>

frontend/src/components/SearchMapByKeyword.js

@@ -62,9 +62,9 @@ function SearchMapByKeyword({ loc, setLoc }) {
     <div className="UserInput">
       <input onChange={handleInput} />
       <button onClick={() => handleSearch()}>검색</button><br></br>
-      <input readOnly={true} type="text" placeholder="장소 키워드" value={loc.keyword} />
+      {/* <input readOnly={true} type="text" placeholder="장소 키워드" value={loc.keyword} />
       <input readOnly={true} type="text" placeholder="위도" value={loc.center.lat} />
-      <input readOnly={true} type="text" placeholder="경도" value={loc.center.lng} />
+      <input readOnly={true} type="text" placeholder="경도" value={loc.center.lng} /> */}
       <div style={{display: 'flex'}}>
         <Map // 지도를 표시할 Container
           center={info && info.position || defaultCenter}

frontend/src/css/Article.css

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

frontend/src/pages/PostRead.js

+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 axios from 'axios';
+axios.defaults.withCredentials = true;
+
+function PostRead() {
+    let params = useParams();
+    const userContext = useContext(UserContext);
+    const [article, setArticle] = useState(null)
+    useEffect(() => {
+      requestLoadArticleById(params.id)
+      .then((response) => {
+        console.log(response)
+        setArticle(response.data)
+      })
+    }, []);  
+    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>
+              <Article data={Object.values(article)}></Article>
+            </div>
+        </div>)
+    }
+    else {
+      return(
+        <div className="App">
+          <h1>포스트 페이지</h1>
+            <div className="introduction">
+              포스트 내용
+              <p>현재 페이지의 파라미터는 { params.id } 입니다.</p>
+              <p>로딩준</p>
+            </div>
+        </div>)
+    }
+
+    ;
+  }
+
+  async function requestLoadArticleById(id) {
+    const response = await axios({
+      url: `http://localhost:8080/post/loadarticle/${id}`, // 통신할 웹문서
+      method: 'get', // 통신할 방식
+    });
+    return response;
+    }
+
+  export default PostRead;
\ No newline at end of file