Skip to content
Snippets Groups Projects
Article.js 1.25 KiB
Newer Older
import React, { useEffect, useState } from "react";
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
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,
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
    keyword, latitude, longitude,
    comments, likes, createdAt} = data;
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
  const navigate = useNavigate();
  function MoveTo(link) {
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
    navigate(link)
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
  let listItem = []
  listItem = imageUrls.map((el) => {
    // http://localhost:8080/uploads/21701487062905.png
    return (
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
      <img
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
        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 className="article" onClick={() => { console.log(_id); MoveTo(`/post/${_id}`) }}>
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
      <h1>{title}</h1>
      <h2>{keyword}</h2>
      <h3>{author.nickname} {date}</h3>
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
      <p>{content}</p>
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
      <p>{listItem}</p>
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
      <p>댓글: {comments.length} // 조와요: {likes.length}</p>
    </div>
  );
}

export default Article;