게시판 댓글에 답글달기

backend/models/reply.js

+const mongoose = require("mongoose");
+const mongooseAutoInc = require("mongoose-auto-increment");
+
+const ReplySchema = new mongoose.Schema({
+  reply_content: { type: String, required: true },
+  created_at: { type: Date, default: Date.now },
+  writer: { type: String },
+  board_id: { type: Number },
+  comment_id: { type: Number },
+});
+
+// mongoose.connect("mongodb://localhost:27017/local", {
+//   useFindAndModify: false,
+//   useNewUrlParser: true,
+//   useUnifiedTopology: true,
+// });
+// mongooseAutoInc.initialize(mongoose.connection);
+
+ReplySchema.plugin(mongooseAutoInc.plugin, "reply");
+
+module.exports = mongoose.model("reply", ReplySchema);

backend/routes/users.js

@@ -6,6 +6,7 @@ var UserModel = require("../models/user");
 var BoardModel = require("../models/board");
 var CommentModel = require("../models/comment");
 var ProfileModel = require("../models/profile");
+var ReplyModel = require("../models/reply");
 var cors = require("cors");
 const { ConnectionStates } = require("mongoose");
 var path = require("path");
@@ -318,7 +319,11 @@ router.post("/getDetailBoard", async function (req, res) {
     console.log("boardComments: ");
     console.log(boardComments);
 
-    let d = { detailBoard, boardComments };
+    let boardReplies = await ReplyModel.find({ board_id: id });
+    console.log("boardReplies: ");
+    console.log(boardReplies);
+
+    let d = { detailBoard, boardComments, boardReplies };
 
     res.status(200).send(d);
   } catch (err) {
@@ -517,4 +522,30 @@ router.post("/searchHobby", async function (req, res) {
   }
 });
 
+router.post("/postReply", async function (req, res) {
+  console.log(
+    "postReply post 호출" +
+      req.body.reply +
+      req.body.comment_id +
+      req.body.boardId
+  );
+  try {
+    let reply = new ReplyModel({
+      reply_content: req.body.reply,
+      writer: req.session.user.id,
+      board_id: req.body.boardId,
+      comment_id: req.body.comment_id,
+    });
+
+    await reply.save();
+
+    let replies = await ReplyModel.find({ comment_id: req.body.comment_id });
+    console.log(replies);
+    console.log("답글 작성 완료");
+    res.redirect("http://localhost:3000/detailBoard/" + req.body.boardId);
+  } catch (err) {
+    console.log(err);
+  }
+});
+
 module.exports = router;

frontend/src/components/DetailBoard.js

@@ -22,8 +22,11 @@ const DetailBoard = ({ match }) => {
   const [Comments, setComments] = useState([]);
   const [Imgurl, setImgurl] = useState("");
   const [Comment, setComment] = useState("");
+  const [reply, setReply] = useState("");
+  const [Replies, setReplies] = useState([]);
 
   const onChangeComment = (e) => setComment(e.target.value);
+  const onChangeReply = (e) => setReply(e.target.value);
 
   console.dir(match.params);
   console.log("board_id : " + board_id);
@@ -39,6 +42,7 @@ const DetailBoard = ({ match }) => {
       setBoard(res.data.detailBoard);
       console.log(Board);
       setComments(res.data.boardComments);
+      setReplies(res.data.boardReplies);
       if (
         res.data.detailBoard.picture != "" &&
         res.data.detailBoard.picture != null
@@ -55,6 +59,17 @@ const DetailBoard = ({ match }) => {
     fetchData();
   }, []);
 
+  const handleReply = async (id) => {
+    const c_id = id;
+    async function fetchReplies(cid) {
+      console.log("fetch reply axios 호출");
+      const result = await axios.post("http://localhost:3001/postReply");
+      console.log(result);
+      setReplies(result);
+    }
+    fetchReplies(c_id);
+  };
+
   return (
     <>
       <Link to="/board">홈으로</Link>
@@ -87,7 +102,27 @@ const DetailBoard = ({ match }) => {
         <ol>
           {Comments.map((c) => (
             <li key={c._id}>
-              {c.input} <Link to={`/profile/${c.writer}`}>{c.writer}</Link>
+              {c.input} <Link to={`/profile/${c.writer}`}>{c.writer}</Link>{" "}
+              {Replies.map((re) => {
+                if (re.comment_id == c._id) {
+                  return (
+                    <div key={re._id}>
+                      - {re.reply_content}{" "}
+                      <Link to={`/profile/${re.writer}`}>{re.writer}</Link>
+                    </div>
+                  );
+                }
+              })}
+              <form method="post" action="http://localhost:3001/postReply">
+                <input type="text" name="reply"></input>
+                <input type="hidden" name="comment_id" value={c._id}></input>
+                <input type="hidden" name="boardId" value={Board._id}></input>
+                <input type="hidden" name="writer"></input>
+                <button type="submit">답글작성</button>
+              </form>
+              {/* <input type="text" value={reply} onChange={onChangeReply}></input>
+              <input type="hidden" value={c._id}></input>
+              <button onClick={() => handleReply(c._id)}>답글작성</button> */}
             </li>
           ))}
         </ol>