댓글 작성, 삭제, 좋아요 추가

backend/src/post.js

@@ -55,7 +55,7 @@ router.post("/upload", upload.array("img"), async function(req, res, next) {
   });
 
 
-router.get("/loadarticle", async (req, res) => {
+router.get("/article", async (req, res) => {
   console.log(path.join(process.cwd(), '/public'))
   if(req.session.sessionid){	
 	console.log("세션 O")
@@ -67,7 +67,7 @@ router.get("/loadarticle", async (req, res) => {
   res.send(JSON.stringify(articles));
 });
 
-router.get("/loadarticle/:id", async (req, res) => {
+router.get("/article/:id", async (req, res) => {
   if(req.session.sessionid){	
 	console.log("세션 O")
   }
@@ -105,4 +105,32 @@ router.delete("/comment/:articleid/:commentid", async (req, res) => {
   res.send(JSON.stringify(articles));
 });
 
+router.post("/comment/:id", async (req, res) => {
+  if(req.session.sessionid){	
+	console.log("세션 O")
+  }
+  else {
+	console.log("세션 X")
+  }
+  const user = await userService.findUserByEmail(req.session.sessionid.email);
+  const data = {
+    content: req.body.content,
+    author: user._id
+  }
+  const articles = await articleService.createComment(req.params.id, data);
+  res.send(JSON.stringify(articles));
+})
+
+router.put("/comment/like/:id", async (req, res) => {
+  if(req.session.sessionid){	
+	console.log("세션 O")
+  }
+  else {
+	console.log("세션 X")
+  }
+  const user = await userService.findUserByEmail(req.session.sessionid.email);
+  const articles = await articleService.setLike(req.params.id, user._id)
+  res.send(JSON.stringify(articles));
+});
+
 export default router;

frontend/src/App.js

 import "./css/App.css";
 import {Routes, Route, Link, useNavigate, Navigate  } from 'react-router-dom';
 import React, { useEffect, useState, useContext} from 'react';
+import cookie from 'react-cookies';
+
 import { UserContext } from './Context.js';
 
 import Main from "./pages/Main.js";
@@ -22,6 +24,8 @@ function App() {
 	function MoveTo(link){
 		navigate(link)
 	}	
+
+	const userinfo = cookie.load('name')
 	// 헤더 업데이트
 	const LogIn = (name)=>{
 		// API 로그아웃 요청
@@ -60,7 +64,7 @@ function App() {
   return(
     <div className="App">
 		<UserContext.Provider value={{isloggedIn, userName, LogIn, LogOut, CheckSession}}>
-		<Header islogged={isloggedIn} username={userName}></Header>
+		<Header cookie={userinfo} username={userName}></Header>
 			<Routes>
 				<Route path="/" element={<Main/>}></Route>
 				<Route path="/login" element={<Login/>}></Route>

frontend/src/components/Comment.js

@@ -21,7 +21,6 @@ function Comments({data}) {
   const articleContext = useContext(ArticleContext);
   const userinfo = cookie.load('name')
   const date = DateTime.fromISO(createdAt).toFormat('yyyy년 MM월 dd일 HH:mm');
-  console.log(articleContext)
   function DeleteComment(e) {
     const data = {id: _id}
     axios

frontend/src/components/Header.js

@@ -5,8 +5,7 @@ import { UserContext } from '../Context.js';
 
 import React, { useEffect, useState, useContext} from 'react';
 import { Link, useNavigate, Navigate } from "react-router-dom";
-import cookie from 'react-cookies';
-import {useCookies} from 'react-cookie'
+
 
 function ButtonLink({link, status, children}){
 
@@ -33,20 +32,20 @@ function ButtonLink({link, status, children}){
 
 }
 
-function Header({islogged, username}){
-	const userinfo = cookie.load('name')
+function Header({cookie}){
+
     return(
         <div className="header">
 			<ButtonLink link='/'>
 				<img className="logo_image" alt="logo" src={logo}/>
 			</ButtonLink>
 			<ul>
-				<p>{islogged?`${userinfo.name}님, 환영합니다`:'로그인하세요.'}</p>
+				<p>{cookie?`${cookie.name}님, 환영합니다`:'로그인하세요.'}</p>
 				<ul className="menu_list">
 					<li><ButtonLink link='/'>Home</ButtonLink></li>
 					<li><ButtonLink link='/search'>검색</ButtonLink></li>
 					<li><ButtonLink link='/postwrite'>포스트 작성</ButtonLink></li>
-					<li><ButtonLink link={islogged?'/':'/login'} status={islogged}>{islogged?'로그아웃':'로그인'}</ButtonLink></li> {/*로그인 여부 로직 구현 필요*/}
+					<li><ButtonLink link={cookie?'/':'/login'} status={cookie?true:false}>{cookie?'로그아웃':'로그인'}</ButtonLink></li> {/*로그인 여부 로직 구현 필요*/}
 					{/* { Object.keys(user).length != 0 ? 
 						<li><Link to={`/profile/${getUserId()}`}>profile</Link>/<span onClick={logout}>logout</span></li> :
 						<li><Link to="/login">login</Link></li>

frontend/src/pages/Main.js

@@ -52,7 +52,7 @@ function Main() {
 
 async function requestLoadArticle() {
 	const response = await axios({
-	  url: 'http://localhost:8080/post/loadarticle', // 통신할 웹문서
+	  url: 'http://localhost:8080/post/article', // 통신할 웹문서
 	  method: 'get', // 통신할 방식
 	});
 	return response;

frontend/src/pages/PostRead.js

@@ -34,6 +34,7 @@ function PostRead() {
     .then((response) => {
       console.log(response)
       setArticle(response.data)
+      
     })
     .catch((response)=>{
       console.log("error!:LogOut")
@@ -42,6 +43,20 @@ function PostRead() {
 
   }, []);  
 
+  function SetLike(){
+    axios.put(`http://localhost:8080/post/comment/like/${params.id}`)
+    .then(res => {
+      alert("The comment is successfully uploaded");
+      return requestLoadArticleById(params.id)
+    })
+    .then(res => {
+      setArticle(res.data)
+    })
+    .catch(err => {
+      console.error(err);
+    });
+  }
+
   const onTextChange = (e) => {
     const {value} = e.target;
     setInputComment(value);
@@ -60,6 +75,10 @@ function PostRead() {
     })
     .then(res => {
       alert("The comment is successfully uploaded");
+      return requestLoadArticleById(params.id)
+    })
+    .then(res => {
+      setArticle(res.data)
     })
     .catch(err => {
       console.error(err);
@@ -73,7 +92,7 @@ function PostRead() {
           <MapLocator loc={{lat: article.latitude, lng: article.longitude}} keyword={article.keyword}></MapLocator>
           <div>
             <Article data={article}></Article>
-            <button>조와요</button>
+            <button onClick={SetLike}>조와요</button>
           </div>
         </div>
         <form onSubmit={onSubmit}>
@@ -105,7 +124,7 @@ function PostRead() {
 
 async function requestLoadArticleById(id) {
   const response = await axios({
-    url: `http://localhost:8080/post/loadarticle/${id}`, // 통신할 웹문서
+    url: `http://localhost:8080/post/article/${id}`, // 통신할 웹문서
     method: 'get', // 통신할 방식
   });
   return response;