댓글 컴포넌트 생성, 작업 중

frontend/src/components/Comments.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 Comments({data}) {
+  const [
+    _id, title, content, images, author,
+    keyword, latitude, longitude,
+    comments, likes, createdAt] = data;
+
+  const navigate = useNavigate();
+  function MoveTo(link){
+    navigate(link)
+  }	
+  let listItem = []
+  listItem = comments.map((el)=>{
+    // http://localhost:8080/uploads/21701487062905.png
+    return(
+        <p>코맨트 테스트</p>
+    )});
+    
+  return (
+    <div class="comment">
+      <p>{'코맨트 테스트{'}</p>
+      <p>{listItem}</p>
+      <p>{'}코맨트 테스트'}</p>
+    </div>
+  );
+}
+
+export default Comments;

frontend/src/css/Article.css

@@ -4,5 +4,5 @@
 }
 
 .article:hover {
-    background-color: #bbbbbb;
+    background-color: #dddddd;
   }
\ No newline at end of file

frontend/src/pages/PostRead.js

@@ -4,7 +4,7 @@ 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 Comments from '../components/Comments.js';
 
 import axios from 'axios';
 axios.defaults.withCredentials = true;
@@ -39,33 +39,38 @@ function PostRead() {
 
     }, []);  
 
-
-
     console.log(article);
     console.log(article?Object.values(article):"no");
-    if (article) {
-      return(
-        <div className="App" >
+
+      if (article) {
+        return(
+          <>
             <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>
+                <Article data={Object.values(article)}></Article>
+                <button>조와요</button>
+              </div>
             </div>
-            댓글창, 댓글쓰기, 조와요 누르기
-            포스트 내용
-            <p>현재 페이지의 파라미터는 { params.id } 입니다.</p>
-        </div>)
-    }
-    else {
-      return(
-        <div className="App">
-          <h1>포스트 페이지</h1>
-            <div className="introduction" style={{display: 'flex'}}>
-              <p>로딩준</p>
-            </div>
-        </div>)
-    }
+            <form>
+              <div style={{display: 'flex'}}>
+                <button>댓글 작성</button>
+                <input type="text"></input>
+              </div>
+            </form>   
+            <Comments data={Object.values(article)}></Comments>      
+          </>
+
+        )    
+      }
+      else {
+        return(
+        <div className="introduction" style={{display: 'flex'}}>
+          <p>로딩준</p>
+        </div>
+        )
+      }
 
-    ;
   }
 
   async function requestLoadArticleById(id) {