리액트 심화 과정 - 3강 /write 페이지에서 post 글 데이터를 파이어베이스에 올리고 리덕스로 보여주기

image-community/package.json

@@ -10,6 +10,7 @@
     "firebase": "^8.7.0",
     "history": "4.10.1",
     "immer": "^9.0.3",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",

image-community/src/elements/Grid.js

@@ -1,14 +1,15 @@
 import React from "react";
 import styled from "styled-components";
 
-const Grid = ({ is_flex, width, margin, padding, bg, children }) => {
+const Grid = ({ is_flex, width, margin, padding, bg, children, center }) => {
   const styled = {
     // style에 쓰이는 props만 따로 모아준다,
     is_flex: is_flex,
     width: width,
     margin: margin,
     padding: padding,
     bg: bg,
+    center: center,
   };
 
   return (
@@ -28,6 +29,7 @@ Grid.defaultProps = {
   padding: false,
   margin: false,
   bg: false,
+  center: false,
 };
 
 const GridBox = styled.div`
@@ -41,6 +43,7 @@ const GridBox = styled.div`
     props.is_flex
       ? `display: flex; align-items: center; justify-content: space-between`
       : ""};
+  ${(props) => (props.center ? `text-align: center;` : "")};
 `;
 
 export default Grid;

image-community/src/pages/PostList.js

@@ -7,13 +7,16 @@ const PostList = (props) => {
   const dispatch = useDispatch();
   const post_list = useSelector((state) => state.post.list);
   React.useEffect(() => {
-    dispatch(postActions.getPostFB());
+    if (post_list.length === 0) {
+      dispatch(postActions.getPostFB());
+    }
   }, []);
   return (
     <React.Fragment>
       {/* <Post></Post> */}
       {post_list.map((p, idx) => {
         return <Post key={p.id} {...p}></Post>;
+        // p에 있는 각 key, value를 한 번에 props로 넘겨줄때 {...p} 이렇게 쓰면 되네...?
       })}
     </React.Fragment>
   );

image-community/src/pages/PostWrite.js

@@ -1,8 +1,34 @@
 import React from "react";
 import { Grid, Text, Button, Image, Input } from "../elements";
 import Upload from "../shared/Upload";
+import { useSelector, useDispatch } from "react-redux";
+import { actionCreators as postActions } from "../redux/modules/post";
 
 const PostWrite = (props) => {
+  const dispatch = useDispatch();
+  const { history } = props;
+  const is_login = useSelector((state) => state.user.is_login);
+  const [contents, setContents] = React.useState("");
+  const changeContents = (e) => {
+    setContents(e.target.value);
+  };
+
+  if (!is_login) {
+    return (
+      <Grid margin="100px 0" padding="16px" center>
+        <Text size="16px" bold>
+          로그인을 해야 글을 쓸 수 있습니다.
+        </Text>
+        <Button
+          _onClick={() => {
+            history.replace("/login");
+          }}
+        >
+          로그인 하러가기.
+        </Button>
+      </Grid>
+    );
+  }
   return (
     <React.Fragment>
       <Grid padding="16px">
@@ -23,11 +49,18 @@ const PostWrite = (props) => {
       </Grid>
 
       <Grid padding="16px">
-        <Input label="게시글 내용" placeholder="게시글 작성" multiLine />
+        <Input
+          _onChange={changeContents}
+          label="게시글 내용"
+          placeholder="게시글 작성"
+          multiLine
+        />
       </Grid>
 
       <Grid padding="16px">
-        <Button>게시글 작성</Button>
+        <Button _onClick={() => dispatch(postActions.addPostFB(contents))}>
+          게시글 작성
+        </Button>
       </Grid>
     </React.Fragment>
   );

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

@@ -2,18 +2,20 @@ import { createAction, handleActions } from "redux-actions";
 import { produce } from "immer";
 import defaultImage from "../../default_image.jpeg";
 import { firestore } from "../../shared/firebase";
+import "moment";
+import moment from "moment";
 
 // initial state
 const initialPost = {
-  id: 0,
-  user_info: {
-    user_name: "bbakyong",
-    user_profile: `${defaultImage}`,
-  },
+  // id: 0,
+  // user_info: {
+  //   user_name: "bbakyong",
+  //   user_profile: `${defaultImage}`,
+  // },
   image_url: `${defaultImage}`,
-  contents: "사란짠",
-  comment_cnt: 10,
-  insert_dt: "2021-07-02 16:12:00",
+  contents: "",
+  comment_cnt: 0,
+  insert_dt: moment().format("YYYY-MM-DD hh:mm:ss"),
 };
 
 const initialState = {
@@ -79,6 +81,35 @@ const getPostFB = () => {
   };
 };
 
+const addPostFB = (contents = "") => {
+  return function (dispatch, getState, { history }) {
+    const PostDB = firestore.collection("image_community");
+    const _user = getState().user.user;
+    const user_info = {
+      user_name: _user.user_name,
+      user_id: _user.uid,
+      user_profile: _user.user_profile,
+    };
+    const _post = {
+      ...initialPost,
+      contents: contents,
+      insert_dt: moment().format("YYYY-MM-DD hh:mm:ss"),
+    };
+
+    PostDB.add({ ...user_info, ..._post })
+      .then((doc) => {
+        let post = { user_info, ..._post, id: doc.id };
+        // {user_info} 이렇게 넣으면 알아서
+        // {user_info: {user_name: _user.user_name, user_id: _user.uid, user_profile: _user.user_profile}} 이렇게 됨.
+        dispatch(addPost(post));
+        history.replace("/");
+      })
+      .catch((err) => {
+        console.log("post 작성에 실패했습니다", err);
+      });
+  };
+};
+
 // reducer using handle actions, immer
 export default handleActions(
   {
@@ -87,7 +118,10 @@ export default handleActions(
         draft.list = action.payload.post_list;
       }),
 
-    [ADD_POST]: (state, action) => produce(state, (draft) => {}),
+    [ADD_POST]: (state, action) =>
+      produce(state, (draft) => {
+        draft.list.unshift(action.payload.post);
+      }),
   },
   initialState
 );
@@ -96,5 +130,6 @@ const actionCreators = {
   setPost,
   addPost,
   getPostFB,
+  addPostFB,
 };
 export { actionCreators };

image-community/src/shared/App.js

@@ -38,7 +38,13 @@ function App() {
         </ConnectedRouter>
       </Grid>
       <Permit>
-        <Button is_float text="+"></Button>
+        <Button
+          is_float
+          text="+"
+          _onClick={() => {
+            history.push("/write");
+          }}
+        ></Button>
       </Permit>
     </React.Fragment>
   );