1주차 과제 - 게시물 작성(3)

3. 게시물 작성 기능 구현

제목과 내용을 입력하고 제출을 하게 되면 (글 번호, 제목, 내용, 날짜)를 담은 게시물이 생성된다.
✅ 최근에 작성한 게시물이 상단에 생성되어야 한다.

 

1. App.js에 게시물 data를 state에 저장

  let [posting, setPosting] = useState([
    {
      id: 0,
      title: "첫 게시물 제목",
      content: "내용"
    },
  ]);

2. posting state를 App에서 Header로 전달

    <Header
        posting={posting}
        setPosting={setPosting}
      />

3. props.posting state를 Header에서 Modal로 전달

 <Modal
              newPost={newPost}
              posting={props.posting}
              setPosting={props.setPosting}
              post={post}
              setPost={setPost}
            />

4. 내용을 입력한 데이터를 posting 전달

 

 const addContent = () => {
    let copyData = [...props.posting];

    copyData.unshift({
      id:0,
      title: input,
      content: textarea,
    });

    props.setPosting(copyData);

    let copyModal = props.post;
    props.setPost(!copyModal);
  };

✅ 최근에 작성한 게시물이 상단에 생성되어야 한다.

상단에 생성되기 위해서는 id 값 필요

App -> id를 담을 state
modal 창이 닫히면 다시 id값이 초기화 되기 때문에 posting.length 값으로 설정

 const [postId, setPostId] = useState(posting.length);

Header-> app에서 postId state 가지고 오기

 <Header
        posting={posting}
        setPosting={setPosting}
        postId={postId}
        setPostId={setPostId}
      />

Modal -> 글쓰기를 클릭했을 때 id값이 1증가한다. 이 데이터는 app으로 전달 된다.

header에서 props.postId state 가지고 오기

<Modal
              newPost={newPost}
              posting={props.posting}
              setPosting={props.setPosting}
              post={post}
              setPost={setPost}
              postId={props.postId}
              setPostId={props.setPostId}
            />

 

const chageId = () => {
    let copyId = props.postId;
    copyId++;
    props.setPostId(copyId);
  };

 const addContent = () => {
    let copyData = [...props.posting];

    copyData.unshift({
     id: props.postId, // app에서 가지고 온 state
      title: input,
      content: textarea,
    });

    props.setPosting(copyData);

    let copyModal = props.post;
    props.setPost(!copyModal);
  };

+ 게시물 제목의 길이가 100px을 넘어가면 "..."으로 나타나도록 한다.

 .title{
         display: block;
         width: 100px; 
         overflow: hidden;
          white-space: nowrap;
           text-overflow: ellipsis;
      }