리액트 심화 과정 - 3강 /write 페이지에서 수정 기능 만들고 알림 컴포넌트 만들기

image-community/src/components/Card.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { Grid, Image, Text } from "../elements";
+
+const Card = (props) => {
+  return (
+    <React.Fragment>
+      <Grid padding="16px" is_flex bg="#fff">
+        <Grid width="auto" margin="8px 8px 0 0">
+          <Image size="85" image_url={props.image_url}></Image>
+        </Grid>
+        <Grid>
+          <Text>
+            <b>{props.user_name}</b> 님이 게시글에 댓글을 남겼습니다.
+          </Text>
+        </Grid>
+      </Grid>
+    </React.Fragment>
+  );
+};
+
+Card.defaultProps = {
+  image_url: "",
+  user_name: "",
+  post_id: null,
+};
+
+export default Card;

image-community/src/components/Header.js

@@ -22,7 +22,7 @@ const Header = (props) => {
         </Grid>
         <Grid is_flex>
           <Button text="내 정보"></Button>
-          <Button text="알림"></Button>
+          <Button _onClick={() => history.push("/noti")} text="알림"></Button>
           <Button
             text="로그아웃"
             _onClick={() => {

image-community/src/components/Post.js

@@ -1,17 +1,33 @@
 import React from "react";
 import defaultImage from "../default_image.jpeg";
-import { Grid, Image, Text } from "../elements";
+import { Grid, Image, Text, Button } from "../elements";
+import { history } from "../redux/configureStore";
 
 const Post = (props) => {
   return (
     <React.Fragment>
       {/* Grid는 다양한 모양으로 변신할 수 있도록 props 종류들을 만들어두고 Post.js에서 Grid에 필요한 props만 넘겨주면서 이용한다. */}
       <Grid>
         <Grid padding="0 16px" is_flex>
-          {/* 헤더 */}
-          <Image shape="circle" src={props.image_url}></Image>
-          <Text bold>{props.user_info.user_name}</Text>
-          <Text>{props.insert_dt}</Text>
+          <Grid is_flex width="auto">
+            {/* 헤더 */}
+            <Image shape="circle" src={props.image_url}></Image>
+            <Text bold>{props.user_info.user_name}</Text>
+          </Grid>
+          <Grid is_flex width="auto">
+            <Text>{props.insert_dt}</Text>
+            {props.is_me && (
+              <Button
+                text="수정"
+                padding="4px"
+                width="auto"
+                margin="4px"
+                _onClick={() => {
+                  history.push(`/write/${props.id}`);
+                }}
+              ></Button>
+            )}
+          </Grid>
         </Grid>
         <Grid padding="16px">
           {/* 내용 */}
@@ -39,6 +55,7 @@ Post.defaultProps = {
   contents: "사란짠",
   comment_cnt: 10,
   insert_dt: "2021-07-02 16:12:00",
+  is_me: false,
 };
 
 export default Post;

image-community/src/elements/Button.js

@@ -1,7 +1,15 @@
 import React from "react";
 import styled from "styled-components";
 
-const Button = ({ text, _onClick, is_float, children, margin, width }) => {
+const Button = ({
+  text,
+  _onClick,
+  is_float,
+  children,
+  margin,
+  width,
+  padding,
+}) => {
   if (is_float) {
     return (
       <React.Fragment>
@@ -13,6 +21,7 @@ const Button = ({ text, _onClick, is_float, children, margin, width }) => {
   const styles = {
     margin: margin,
     width: width,
+    padding: padding,
   };
 
   return (
@@ -31,13 +40,14 @@ Button.defaultProps = {
   is_float: false,
   margin: false,
   width: "100%",
+  padding: "12px 0",
 };
 
 const ElButton = styled.button`
   width: ${(props) => props.width};
   background-color: #212121;
   color: #ffffff;
-  padding: 12px 0;
+  padding: ${(props) => props.padding};
   box-sizing: border-box;
   border: none;
   ${(props) => (props.margin ? `margin: ${props.margin}` : "")}

image-community/src/elements/Image.js

@@ -19,10 +19,15 @@ const Image = ({ shape, src, size }) => {
       </AspectOutter>
     );
   }
+  return (
+    <>
+      <ImageDefault {...styles}></ImageDefault>
+    </>
+  );
 };
 
 Image.defaultProps = {
-  shape: "circle",
+  shape: "",
   src: `${defaultImage}`,
   size: 36,
 };
@@ -39,6 +44,15 @@ const ImageCircle = styled.div`
   margin: 4px;
 `;
 
+const ImageDefault = styled.div`
+  --size: ${(props) => props.size}px;
+  // css 값을 변수화해서
+  width: var(--size); // 이렇게 불러서 사용함
+  height: var(--size);
+  background-image: url("${(props) => props.src}");
+  background-size: cover;
+`;
+
 const AspectOutter = styled.div`
   width: 100%;
   min-width: 250px;

image-community/src/elements/Input.js

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { Text, Grid } from "./index";
 
-const Input = ({ label, placeholder, _onChange, type, multiLine }) => {
+const Input = ({ label, placeholder, _onChange, type, multiLine, value }) => {
   if (multiLine) {
     return (
       <Grid>
@@ -11,6 +11,7 @@ const Input = ({ label, placeholder, _onChange, type, multiLine }) => {
           placeholder={placeholder}
           onChange={_onChange}
           rows={10}
+          value={value}
         ></ElTextarea>
       </Grid>
     );
@@ -29,6 +30,7 @@ Input.defaultProps = {
   _onChange: () => {},
   type: "text",
   multiLine: false,
+  value: "",
 };
 
 const ElInput = styled.input`

image-community/src/pages/Notification.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { Grid, Text, Image } from "../elements";
+import Card from "../components/Card";
+
+const Notification = (props) => {
+  let noti = [
+    {
+      user_name: "aaaa",
+      post_id: "post1",
+      image_url: "",
+    },
+    {
+      user_name: "aaaa",
+      post_id: "post2",
+      image_url: "",
+    },
+    {
+      user_name: "aaaa",
+      post_id: "post3",
+      image_url: "",
+    },
+    {
+      user_name: "aaaa",
+      post_id: "post4",
+      image_url: "",
+    },
+    {
+      user_name: "aaaa",
+      post_id: "post5",
+      image_url: "",
+    },
+    {
+      user_name: "aaaa",
+      post_id: "post6",
+      image_url: "",
+    },
+  ];
+  return (
+    <>
+      <Grid padding="16px" bg="#EFF6FF">
+        {noti.map((n) => {
+          return <Card key={n.post_id} {...n}></Card>;
+        })}
+      </Grid>
+    </>
+  );
+};
+
+export default Notification;

image-community/src/pages/PostList.js

@@ -6,7 +6,8 @@ import { actionCreators as postActions } from "../redux/modules/post";
 const PostList = (props) => {
   const dispatch = useDispatch();
   const post_list = useSelector((state) => state.post.list);
-  React.useEffect(() => {
+  const user_info = useSelector((state) => state.user.user);
+  let is_me = React.useEffect(() => {
     if (post_list.length === 0) {
       dispatch(postActions.getPostFB());
     }
@@ -15,7 +16,11 @@ const PostList = (props) => {
     <React.Fragment>
       {/* <Post></Post> */}
       {post_list.map((p, idx) => {
-        return <Post key={p.id} {...p}></Post>;
+        if (p.user_info.user_id === user_info?.uid) {
+          return <Post key={p.id} {...p} is_me></Post>;
+        } else {
+          return <Post key={p.id} {...p}></Post>;
+        }
         // p에 있는 각 key, value를 한 번에 props로 넘겨줄때 {...p} 이렇게 쓰면 되네...?
       })}
     </React.Fragment>

image-community/src/pages/PostWrite.js

@@ -3,16 +3,32 @@ 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";
+import { actionCreators as imageActions } from "../redux/modules/image";
 
 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);
   };
   const preview = useSelector((state) => state.image.preview);
+  const post_list = useSelector((state) => state.post.list);
+  const post_id = props.match.params.id;
+  const is_edit = post_id ? true : false;
+  let _post = is_edit ? post_list.find((p) => p.id === post_id) : null;
+  const [contents, setContents] = React.useState(_post ? _post.contents : "");
+
+  React.useEffect(() => {
+    if (is_edit && !_post) {
+      history.goBack();
+      return;
+    }
+
+    if (is_edit) {
+      dispatch(imageActions.setPreview(_post.image_url));
+    }
+  }, []);
 
   if (!is_login) {
     return (
@@ -34,7 +50,7 @@ const PostWrite = (props) => {
     <React.Fragment>
       <Grid padding="16px">
         <Text margin="0px" size="36px" bold>
-          게시글 작성
+          {is_edit ? "게시글 수정" : "게시글 작성"}
         </Text>
         <Upload />
       </Grid>
@@ -54,6 +70,7 @@ const PostWrite = (props) => {
 
       <Grid padding="16px">
         <Input
+          value={contents}
           _onChange={changeContents}
           label="게시글 내용"
           placeholder="게시글 작성"
@@ -62,9 +79,19 @@ const PostWrite = (props) => {
       </Grid>
 
       <Grid padding="16px">
-        <Button _onClick={() => dispatch(postActions.addPostFB(contents))}>
-          게시글 작성
-        </Button>
+        {is_edit ? (
+          <Button
+            _onClick={() =>
+              dispatch(postActions.editPostFB(post_id, { contents: contents }))
+            }
+          >
+            게시글 수정
+          </Button>
+        ) : (
+          <Button _onClick={() => dispatch(postActions.addPostFB(contents))}>
+            게시글 작성
+          </Button>
+        )}
       </Grid>
     </React.Fragment>
   );