diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 00012ccdea21e8058a6cbbbc212ecb822edd6120..3eb0dafaae67c4b33f8419fdf06fc96a198d4c8e 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 1f9ba84780897783cb914bfe9e3afbd1fcc61eeb..a86c326434cd07675da084ef4fde165b50a62dd5 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 9295be9244b886c3e97b1f49db6580cc701fb8e9..1c778fd22bc888b6443e9c3ccf5f283e6d11dbc7 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 edd8e7fa463d90d9416daeced8b96da32664dfc5..7e06f4e0992f450cb8012e7043bc749ceca0ed38 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 fe67953c51bb0da599b6dc51926d461385716337..4ba431cd29203caea09ba43446ea82381597c636 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 0b45ea7ff77719134df94357a802b2710ba33f9e..e467d0f562490c050f994606df10ef6e7705a30b 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 a7fc63e6833c0b54312bb44cb3f2e40b45eb48ab..96390a3bb24fbee1252f86eb45e341d209bc29a6 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> + ) + }) + } </> )