diff --git a/backend/src/post.js b/backend/src/post.js
index 78cca5b34881a4d50356abc894a9a49cba7ba586..ef00d01f3bc5cd3f11c0ace69d4b1c7292a68dbe 100644
--- a/backend/src/post.js
+++ b/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;
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 3a124be430eb685ef297809dc08a439bff525438..5224d06201beb6c3dc7b120871462450edca6e5a 100644
--- a/frontend/src/App.js
+++ b/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/> */}
diff --git a/frontend/src/components/Article.js b/frontend/src/components/Article.js
index e758c247543d1eb0e0a15b8d161b2ce9496143e9..9295be9244b886c3e97b1f49db6580cc701fb8e9 100644
--- a/frontend/src/components/Article.js
+++ b/frontend/src/components/Article.js
@@ -1,7 +1,7 @@
 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>
diff --git a/frontend/src/components/SearchMapByKeyword.js b/frontend/src/components/SearchMapByKeyword.js
index adfbab5b15ef8679cac943581241be33017126a8..fe67953c51bb0da599b6dc51926d461385716337 100644
--- a/frontend/src/components/SearchMapByKeyword.js
+++ b/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}
diff --git a/frontend/src/css/Article.css b/frontend/src/css/Article.css
new file mode 100644
index 0000000000000000000000000000000000000000..7887ef2d078c25d85ddc4622ba5f55f102032738
--- /dev/null
+++ b/frontend/src/css/Article.css
@@ -0,0 +1,4 @@
+.article {
+    background-color: #ffffff;
+    border: 2px solid gray;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/PostRead.js b/frontend/src/pages/PostRead.js
new file mode 100644
index 0000000000000000000000000000000000000000..8008914075bc03c2fea83548154052b69fe40510
--- /dev/null
+++ b/frontend/src/pages/PostRead.js
@@ -0,0 +1,56 @@
+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