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