From 21c5f22387108421891571e6ad51cc0209b25d44 Mon Sep 17 00:00:00 2001
From: Kwangbin Hyun <bio8641@naver.com>
Date: Mon, 4 Dec 2023 11:41:44 +0900
Subject: [PATCH] Fix: some Article page errors
---
frontend/package-lock.json | 9 +++++
frontend/package.json | 1 +
frontend/src/components/Article.js | 34 +++++++++--------
.../components/{Comments.js => Comment.js} | 21 ++++-------
frontend/src/components/SearchMapByKeyword.js | 37 +++++++++++--------
frontend/src/pages/Main.js | 3 +-
frontend/src/pages/PostRead.js | 12 ++++--
7 files changed, 69 insertions(+), 48 deletions(-)
rename frontend/src/components/{Comments.js => Comment.js} (50%)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 00012ccd..3eb0dafa 100644
--- a/frontend/package-lock.json
+++ b/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",
diff --git a/frontend/package.json b/frontend/package.json
index 1f9ba847..a86c3264 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/components/Article.js b/frontend/src/components/Article.js
index 9295be92..1c778fd2 100644
--- a/frontend/src/components/Article.js
+++ b/frontend/src/components/Article.js
@@ -1,34 +1,38 @@
-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>
diff --git a/frontend/src/components/Comments.js b/frontend/src/components/Comment.js
similarity index 50%
rename from frontend/src/components/Comments.js
rename to frontend/src/components/Comment.js
index edd8e7fa..7e06f4e0 100644
--- a/frontend/src/components/Comments.js
+++ b/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>
);
}
diff --git a/frontend/src/components/SearchMapByKeyword.js b/frontend/src/components/SearchMapByKeyword.js
index fe67953c..4ba431cd 100644
--- a/frontend/src/components/SearchMapByKeyword.js
+++ b/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>
diff --git a/frontend/src/pages/Main.js b/frontend/src/pages/Main.js
index 0b45ea7f..e467d0f5 100644
--- a/frontend/src/pages/Main.js
+++ b/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>
)
}
diff --git a/frontend/src/pages/PostRead.js b/frontend/src/pages/PostRead.js
index a7fc63e6..96390a3b 100644
--- a/frontend/src/pages/PostRead.js
+++ b/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>
+ )
+ })
+ }
</>
)
--
GitLab