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

-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import "../css/Article.css"
 
-import {Routes, Route, Link, useNavigate, Navigate  } from 'react-router-dom';
+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,
+function Article({ data }) {
+  const {
+    _id, title, content, imageUrls, author,
     keyword, latitude, longitude,
-    comments, likes, createdAt] = data;
+    comments, likes, createdAt} = data;
 
   const navigate = useNavigate();
-  function MoveTo(link){
+  function MoveTo(link) {
     navigate(link)
-  }	
+  }
   let listItem = []
-  listItem = images.map((el)=>{
+  listItem = imageUrls.map((el) => {
     // http://localhost:8080/uploads/21701487062905.png
-    return(
+    return (
       <img
         src={`http://localhost:8080/${el.replaceAll("\\", "/").substring(7)}`}
         alt={`http://localhost:8080/${el.replaceAll("\\", "/").substring(7)}`}
-        style={{ width: "100px", height: "100px"}}/>
-    )});
-    
+        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

@@ -51,8 +51,10 @@ 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>);
+    for (let i = 1; i <= pagination.last; i++) {
+      links.push(<a href="#" key={i}
+                    style={{ textDecoration: "none", color: "black" }}
+                    onClick={() => pagination.gotoPage(i)}>{i}</a>);
     }
 
     return links;
@@ -65,7 +67,7 @@ function SearchMapByKeyword({ loc, setLoc }) {
       {/* <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} /> */}
-      <div style={{display: 'flex'}}>
+      <div style={{ display: 'flex' }}>
         <Map // 지도를 표시할 Container
           center={info && info.position || defaultCenter}
           style={{
@@ -89,7 +91,7 @@ function SearchMapByKeyword({ loc, setLoc }) {
               // 마커에 마우스아웃 이벤트를 등록합니다
               onMouseOut={
                 // 마커에 마우스아웃 이벤트가 발생하면 인포윈도우를 제거합니다
-                () => setInfo({position: marker.position})
+                () => setInfo({ position: marker.position })
               }
               onClick={() => {
                 setLoc({
@@ -98,7 +100,7 @@ function SearchMapByKeyword({ loc, setLoc }) {
                 });
               }}>
               {info && info.content === marker.content && (
-                <div style={{ width:"100%", color: "#000" }}>
+                <div style={{ width: "100%", color: "#000" }}>
                   {marker.content}
                 </div>
               )}
@@ -107,21 +109,24 @@ 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={() => {
-                  setLoc({
-                    keyword: marker.content,
-                    center: { lat: marker.position.lat, lng: marker.position.lng }
-                  })
-                }}>{marker.content}</a>
+                onMouseOver={() => { setInfo(marker) }}
+                onMouseOut={() => { setInfo({ position: marker.position }) }}>
+                <a href="#"
+                  key={index}
+                  style={{ textDecoration: "none", color: "black" }}
+                  onClick={() => {
+                    setLoc({
+                      keyword: marker.content,
+                      center: { lat: marker.position.lat, lng: marker.position.lng }
+                    })
+                  }}>{marker.content}</a>
               </li>
             ))}
           </ul>
-          <div style={{display:"flex", justifyContent:"center"}}>
-            { pagination &&
+          <div style={{ display: "flex", justifyContent: "center" }}>
+            {pagination &&
               displayPagination(pagination)
             }
           </div>

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>
+                )
+              })
+            }
           </>
 
         )