Skip to content
Snippets Groups Projects
Article.js 1.25 KiB
Newer Older
  • Learn to ignore specific revisions
  • 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
    
            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}`) }}>
    
    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;