리액트 심화 과정 - 4강 댓글 작성하기, 엔터키로 댓글 작성하기, 댓글 갯수 카운트 늘리기

image-community/src/components/CommentList.js

@@ -9,7 +9,6 @@ const CommentList = (props) => {
   const { post_id } = props;
 
   React.useEffect(() => {
-    console.log(comment_list);
     if (!comment_list[post_id]) {
       dispatch(commentActions.getCommentFB(post_id));
     }

image-community/src/components/CommentWrite.js

@@ -1,18 +1,52 @@
+//components/CommentWrite.js
 import React from "react";
 
 import { Grid, Input, Button } from "../elements";
 
-const CommentWrite = () => {
+import { useDispatch } from "react-redux";
+import { actionCreators as commentActions } from "../redux/modules/comment";
+
+const CommentWrite = (props) => {
+  const dispatch = useDispatch();
+  const { post_id } = props;
+  const [comment_text, setCommentText] = React.useState("");
+
+  const onChange = (e) => {
+    setCommentText(e.target.value);
+  };
+
+  const write = () => {
+    if (comment_text === "") {
+      window.alert("댓글을 입력해주세요!");
+      return;
+    }
+    // 입력된 텍스트는 지우기!
+    setCommentText("");
+
+    // 파이어스토어에 추가합니다.
+    dispatch(commentActions.addCommentFB(post_id, comment_text));
+  };
+
   return (
     <React.Fragment>
       <Grid padding="16px" is_flex>
-        <Input placeholder="댓글 내용을 입력해주세요 :)" />
-        <Button width="50px" margin="0px 2px 1px 2px">
+        <Input
+          placeholder="댓글 내용을 입력해주세요 :)"
+          _onChange={onChange}
+          value={comment_text}
+          onSubmit={write}
+          is_Submit
+        />
+        <Button width="50px" margin="0px 2px 0px 2px" _onClick={write}>
           작성
         </Button>
       </Grid>
     </React.Fragment>
   );
 };
 
+CommentWrite.defaultProps = {
+  post_id: "",
+};
+
 export default CommentWrite;

image-community/src/elements/Input.js

@@ -2,7 +2,16 @@ import React from "react";
 import styled from "styled-components";
 import { Text, Grid } from "./index";
 
-const Input = ({ label, placeholder, _onChange, type, multiLine, value }) => {
+const Input = ({
+  label,
+  placeholder,
+  _onChange,
+  type,
+  multiLine,
+  value,
+  is_Submit,
+  onSubmit,
+}) => {
   if (multiLine) {
     return (
       <Grid>
@@ -16,10 +25,25 @@ const Input = ({ label, placeholder, _onChange, type, multiLine, value }) => {
       </Grid>
     );
   }
+
   return (
     <Grid>
       {label && <Text margin="0">{label}</Text>}
-      <ElInput placeholder={placeholder} onChange={_onChange} type={type} />
+      {is_Submit ? (
+        <ElInput
+          placeholder={placeholder}
+          onChange={_onChange}
+          type={type}
+          value={value}
+          onKeyPress={(e) => {
+            if (e.key === "Enter") {
+              onSubmit();
+            }
+          }}
+        />
+      ) : (
+        <ElInput placeholder={placeholder} onChange={_onChange} type={type} />
+      )}
     </Grid>
   );
 };
@@ -31,6 +55,8 @@ Input.defaultProps = {
   type: "text",
   multiLine: false,
   value: "",
+  is_Submit: false,
+  onSubmit: () => {},
 };
 
 const ElInput = styled.input`

image-community/src/pages/PostDetail.js

@@ -4,6 +4,7 @@ import CommentList from "../components/CommentList";
 import CommentWrite from "../components/CommentWrite";
 import { useSelector, useDispatch } from "react-redux";
 import { actionCreators as postActions } from "../redux/modules/post";
+import Permit from "../shared/Permit";
 
 const PostDetail = (props) => {
   const id = props.match.params.id;
@@ -29,7 +30,9 @@ const PostDetail = (props) => {
           is_me={post.user_info.user_id === user_info?.uid ? true : false}
         />
       )}
-      <CommentWrite post_id={id} />
+      <Permit>
+        <CommentWrite post_id={id} />
+      </Permit>
       <CommentList post_id={id} />
     </React.Fragment>
   );

image-community/src/redux/modules/comment.js

@@ -3,6 +3,8 @@ import { produce } from "immer";
 import { firestore } from "../../shared/firebase";
 import "moment";
 import moment from "moment";
+import firebase from "firebase/app";
+import { actionCreators as postActions } from "./post";
 
 const initialState = {
   list: {},
@@ -24,6 +26,45 @@ const addComment = createAction(ADD_COMMENT, (post_id, comment) => ({
 
 const loading = createAction(LOADING, (is_loading) => ({ is_loading }));
 
+const addCommentFB = (post_id, contents) => {
+  return function (dispatch, getState, { history }) {
+    const commentDB = firestore.collection("comment");
+    const user_info = getState().user.user;
+
+    let comment = {
+      post_id: post_id,
+      user_id: user_info.uid,
+      user_name: user_info.user_name,
+      user_profile: user_info.user_profile,
+      contents: contents,
+      insert_dt: moment().format("YYYY-MM-DD hh:mm:ss"),
+    };
+
+    commentDB.add(comment).then((doc) => {
+      const postDB = firestore.collection("image_community");
+      const post = getState().post.list.find((l) => l.id === post_id);
+      const increment = firebase.firestore.FieldValue.increment(1);
+      // 특정 필드의 value에 값을 더하고 싶을때 이렇게 FieldValue.increment() 쓰면 됨.
+      comment = { ...comment, id: doc.id };
+
+      postDB
+        .doc(post_id)
+        .update({ comment_cnt: increment })
+        .then((_post) => {
+          dispatch(addComment(post_id, comment));
+
+          if (post) {
+            dispatch(
+              postActions.editPost(post_id, {
+                comment_cnt: parseInt(post.comment_cnt) + 1,
+              })
+            );
+          }
+        });
+    });
+  };
+};
+
 const getCommentFB = (post_id) => {
   return function (dispatch, getState, { history }) {
     if (!post_id) {
@@ -42,7 +83,7 @@ const getCommentFB = (post_id) => {
         docs.forEach((doc) => {
           list.push({ ...doc.data(), id: doc.id });
         });
-        // console.log(list);
+
         dispatch(setComment(post_id, list));
       })
       .catch((err) => {
@@ -59,7 +100,10 @@ export default handleActions(
         // comment들을 담는 list를 딕셔너리 형으로 만들고
         // post_id를 key, 해당 post의 comment들(딕셔너리)을 배열 형태로 담은 comment_list를 value로 할당.
       }),
-    [ADD_COMMENT]: (state, action) => produce(state, (draft) => {}),
+    [ADD_COMMENT]: (state, action) =>
+      produce(state, (draft) => {
+        draft.list[action.payload.post_id].unshift(action.payload.comment);
+      }),
     [LOADING]: (state, action) =>
       produce(state, (draft) => {
         draft.is_loading = action.payload.is_loading;
@@ -72,6 +116,7 @@ const actionCreators = {
   getCommentFB,
   setComment,
   addComment,
+  addCommentFB,
 };
 
 export { actionCreators };