[NewsFeed-Day 4] Modal 연결

2025.02.15 (토) Works

 

1. HomeContext 전역관리

2. Modal 관리

    2-1. 선택 카드 state 관리

    2-2. 닫기 버튼 

 

 

HomeContext 전역관리

 

이전에는 HomeContext에서 posts의 값만 전역으로 관리,

HomePostCard에서는 post의 값을 props로 받고 users와 comments를 state로 관리했다.

 

오늘은 게시글을 클릭하여 모달창을 띄우고자 했다.

그러기 위해서 이제는 Home, HomePostCard, PostingModal를 함께 연결하여 관리해야 한다.

 

따라서 Context에서 posts, users, comments를 함께 묶어두었다.

 

아래는 supabase에서 Promise.all을 통해 posts, users, comments 테이블의 값을 가져온 로직이다.

 // HomeContext.jsx
 
  const [posts, setPosts] = useState([]);
  const [users, setUsers] = useState([]);
  const [comments, setComments] = useState([]);
 
 useEffect(() => {
    const fetchData = async () => {
      try {
        const [
          { data: postsData, error: postsError },
          { data: usersData, error: usersError },
          { data: commentsData, error: commentsError },
        ] = await Promise.all([
          supabase.from("posts").select("*"),
          supabase.from("users").select("*"),
          supabase.from("comments").select("*"),
        ]);

        if (postsError) throw postsError;
        if (usersError) throw usersError;
        if (commentsError) throw commentsError;

        setPosts(postsData);
        setUsers(usersData);
        setComments(commentsData);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

  // console.log("users", users);
  supabase.from("posts").insert({ posts });
  supabase.from("users").insert({ users });
  supabase.from("comments").insert({ comments });

 

 

 

Modal 관리

 

Home 페이지에 띄운 게시글을 클릭하여 같은 정보가 담긴 Modal을 띄워야 한다.

 

따라서 클릭한 카드를 state로 관리하여 모달컴포넌트에 props로 전달했다.

또한 기존에는 HomePostCard 컴포넌트만 mapping 했지만

그 위 아래로 div태그를 감싸 onClick 이벤트를 부여했다.

// Home.jsx
const [selectedPost, setSelectedPost] = useState(null);

  const showModal = post => {
    setSelectedPost(post);
  };

{posts.map(post => {

        return (
          <MoveModal key={post.uid} onClick={() => showModal(post)}>
            <HomePostCard post={post} />
          </MoveModal>
        );
      })}
       {selectedPost && ( ⭐️
        <ShowModal
          post={selectedPost}
          closeModal={() => setSelectedPost(null)}
        />
      )}

⭐️

 && (AND 연산자 : 연산자의 왼쪽이 true일 때 오른쪽 값을 반환)

selectedPost의 값이 들어오면 ShowModal 컴포넌트를 실행한다.
즉, post라는 이름으로 selectedPost의 값을 넘겨주고

closeModal 이름으로 null 값을 인자로 갖는 setSelectedPost 함수를 내려준다.

 

아래는 그 props를 전달받은 Modal의 로직이다.

// PostingModal.jsx

const ShowModal = ({ post, closeModal }) => {  👉🏻 props로 전달받음
  const { users, comments } = useContext(HomeContext);  👉🏻 Context에서 전달받음

  console.log("post", post);
  if (!post) return null;
  return (
    <EntireModal key={post.uid}>
      <PostModal>
        <Post>
          <PostTitle>{post.title}</PostTitle>
          <p>{users.nickname}</p>
          <button>...</button>
          <img src="https://item.kakaocdn.net/do/218bdb82c9a7456ee2080fe14a4642927154249a3890514a43687a85e6b6cc82"></img>
          <Icons>
            <p>{comments.content}</p>
            <button>하트</button>
          </Icons>
          <p>{post.content}</p>
        </Post>
        <Comment>
          <CloseBtn onClick={closeModal}>&times;</CloseBtn>  👉🏻 props로 받은 함수, onClick으로 실행
          <UserComment>
            <ProfileCommentImg src="https://item.kakaocdn.net/do/218bdb82c9a7456ee2080fe14a4642927154249a3890514a43687a85e6b6cc82"></ProfileCommentImg>
            <p>{users.nickname}</p>
            ...

 

로직대로 클릭한 값의 모달창이 잘 뜨고, 닫기 버튼도 잘 활성화되었다.

오늘도 미흡하지만 현재 진행상황을 기록해본다.