Fix: some Article page errors

frontend/package-lock.json

@@ -17,6 +17,7 @@
         "express": "^4.18.2",
         "http-proxy-middleware": "^2.0.6",
         "jwt-decode": "^4.0.0",
+        "luxon": "^3.4.4",
         "moment": "^2.29.4",
         "react": "^18.2.0",
         "react-cookie": "^6.1.1",
@@ -13168,6 +13169,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/luxon": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
+      "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",

frontend/package.json

@@ -12,6 +12,7 @@
     "express": "^4.18.2",
     "http-proxy-middleware": "^2.0.6",
     "jwt-decode": "^4.0.0",
+    "luxon": "^3.4.4",
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-cookie": "^6.1.1",

frontend/src/components/Article.js

@@ -3,32 +3,36 @@ import "../css/Article.css"
 
 import { Routes, Route, Link, useNavigate, Navigate } from 'react-router-dom';
 import { useParams } from 'react-router-dom';
+import { DateTime } from 'luxon';
 
 function Article({ data }) {
-  const [
-    _id, title, content, images, author,
+  const {
+    _id, title, content, imageUrls, author,
     keyword, latitude, longitude,
-    comments, likes, createdAt] = data;
+    comments, likes, createdAt} = data;
 
   const navigate = useNavigate();
   function MoveTo(link) {
     navigate(link)
   }
   let listItem = []
-  listItem = images.map((el)=>{
+  listItem = imageUrls.map((el) => {
     // http://localhost:8080/uploads/21701487062905.png
     return (
       <img
         src={`http://localhost:8080/${el.replaceAll("\\", "/").substring(7)}`}
         alt={`http://localhost:8080/${el.replaceAll("\\", "/").substring(7)}`}
         style={{ width: "100px", height: "100px" }} />
-    )});
+    )
+  });
+
+  const date = DateTime.fromISO(createdAt).toFormat('yyyy년 MM월 dd일 HH:mm');
 
   return (
-    <div class="article" onClick={()=>{console.log(_id); MoveTo(`/post/${_id}`)}}>
+    <div className="article" onClick={() => { console.log(_id); MoveTo(`/post/${_id}`) }}>
       <h1>{title}</h1>
       <h2>{keyword}</h2>
-      <h3>{author.nickname} {createdAt}</h3>
+      <h3>{author.nickname} {date}</h3>
       <p>{content}</p>
       <p>{listItem}</p>
       <p>댓글: {comments.length} // 조와요: {likes.length}</p>

frontend/src/components/Comments.js → frontend/src/components/Comment.js

@@ -3,29 +3,24 @@ import "../css/Article.css"
 
 import {Routes, Route, Link, useNavigate, Navigate  } from 'react-router-dom';
 import { useParams } from 'react-router-dom';
+import { DateTime } from 'luxon';
 
 function Comments({data}) {
-  const [
-    _id, title, content, images, author,
-    keyword, latitude, longitude,
-    comments, likes, createdAt] = data;
+  const {
+    _id, content, author, 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>
-    )});
+
+  const date = DateTime.fromISO(createdAt).toFormat('yyyy년 MM월 dd일 HH:mm');
     
   return (
     <div class="comment">
-      <p>{'코맨트 테스트{'}</p>
-      <p>{listItem}</p>
-      <p>{'}코맨트 테스트'}</p>
+      <p>{author.nickname}</p>
+      <p>{content}</p>
+      <p>{date}</p>
     </div>
   );
 }

frontend/src/components/SearchMapByKeyword.js

@@ -52,7 +52,9 @@ function SearchMapByKeyword({ loc, setLoc }) {
   const displayPagination = (pagination) => {
     const links = [];
     for (let i = 1; i <= pagination.last; i++) {
-      links.push(<a href="#" onClick={() => pagination.gotoPage(i)}>{i}</a>);
+      links.push(<a href="#" key={i}
+                    style={{ textDecoration: "none", color: "black" }}
+                    onClick={() => pagination.gotoPage(i)}>{i}</a>);
     }
 
     return links;
@@ -107,11 +109,14 @@ function SearchMapByKeyword({ loc, setLoc }) {
         </Map>
         <div>
           <ul>
-            {markers.map((marker) => (
+            {markers.map((marker, index) => (
               <li key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`}
                 onMouseOver={() => { setInfo(marker) }}
                 onMouseOut={() => { setInfo({ position: marker.position }) }}>
-                <a href="#" style={{textDecoration:"none", color:"black"}} onClick={() => {
+                <a href="#"
+                  key={index}
+                  style={{ textDecoration: "none", color: "black" }}
+                  onClick={() => {
                     setLoc({
                       keyword: marker.content,
                       center: { lat: marker.position.lat, lng: marker.position.lng }

frontend/src/pages/Main.js

@@ -24,7 +24,8 @@ function Main() {
   listItem = articleList.map((article)=>{
     return(
       <Article 
-      data={Object.values(article)}
+      key={article._id}
+      data={article}
     ></Article>
     )
   }

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 Comment from '../components/Comment.js';
 
 import axios from 'axios';
 axios.defaults.withCredentials = true;
@@ -48,7 +48,7 @@ function PostRead() {
             <div className="introduction" style={{display: 'flex'}}>
               <MapLocator loc={{lat: article.latitude, lng: article.longitude}} keyword={article.keyword}></MapLocator>
               <div>
-                <Article data={Object.values(article)}></Article>
+                <Article data={article}></Article>
                 <button>조와요</button>
               </div>
             </div>
@@ -58,7 +58,13 @@ function PostRead() {
                 <input type="text"></input>
               </div>
             </form>   
-            <Comments data={Object.values(article)}></Comments>      
+            {
+              article.comments.map((el)=>{
+                return(
+                  <Comment key={el._id} data={el}></Comment>
+                )
+              })
+            }
           </>
 
         )