Feed UI를 만들고자 한다.
instagram에서 메인이 되는 페이지이다.(home)

Preview

Feed route

여러개 post를 map 하여 보여준다.

seeFeed.map((post) => <Post key={post.id} id={post.id} ... />

Post component

• header
• images
• buttons
• comments(+ comment input)

Presenter Container component

presenter component와 container component를 나눠서 작성하는 패턴으로 한 component에 모두 넣기에는 너무 커질 때 presenter영역과 container(logic)영역을 별도로 나눠서 프로그래밍하는 패턴이다.

• presenter.js
• container.js
• index.js

state 관리 useEffect를 통한 반응형 component관리

header

• user id
• location

images

• files url
• 간단한 slide 구현(이미지가 여러개일 시 순서대로 fade in/out)
  (추후 carousel 구현해볼 것)

buttons

• like button
• comment button

comments(+ comment input)

• react-autosize-textarea
  instagram에는 comment 작성 시에 scroll이 생기지않고 동적으로 textarea가 증가하면서 입력가능하게 된다. 그걸 해주는 module이 바로 이것이다.
• enter 시(onKeyDown or onKeyPress) submit 되도록 이벤트 처리

const onKeyPress = async (e) => {
  const { keyCode } = e;
  if (keyCode === 13) {
    e.preventDefault();
    try {
      const {
        data: { addComment },
      } = await addCommentMutation();
      setSelfComment([...selfComment, addComment]);
      comment.setValue("");
    } catch {
      toast.error("Can't send comment");
    }
  }
  return;
};

• submit 시에 backend 서버로 addComment graphql api를 호출하여 comment 저장
  (gql로 call)

export const ADD_COMMENT = gql`
  mutation addComment($postId: String!, $text: String!) {
    addComment(postId: $postId, text: $text) {
      id
      text
      user {
        username
      }
    }
  }
`;