00의 서재 - 오류 정리 (react modal 여러개)

e-book page 구현 중...

https://github.com/I-on-I/OO-s-Library-Client

GitHub - I-on-I/OO-s-Library-Client: "00의 서재" 클라이언트 레포지토리 입니다.

e-book 관리 시스템을 프론트로 만들고 있는데 저 책모양을 클릭했을 때 index에 맞게 이동을 시켜야한다.

임의 데이터로 총 4개를 넣었는데 첫번째 index를 클릭했을 때마다 마지막 index값만 출력되는 상황...

 

1이 나와야 정상..!

 

			
              <BookCover>
                {" "}
                <img
                  onClick={openModal}
                  src={book.img}
                  style={{
                    boxShadow: "8px 5px 10px 3px rgba(0,0,0,0.25)",
                    cursor: "pointer",
                  }}
                />
              </BookCover>

            <Modal
                style={{
                  overlay: {
                    position: "fixed",
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    backgroundColor: "rgba(0, 0, 0, 0.3)", // Adjust the opacity of the shadow here
                    zIndex: 1000,
                  },
                }}
                isOpen={modalIsOpen}
                onRequestClose={closeModal}
              >
                <Book bookInfo={book.img} author={book.author}></Book>
                <button onClick={closeModal}>닫기</button>
              </Modal>

각 책에 대한 정보가 다르기 때문에 모달을 여는 경우에는 해당 책의 정보를 전달해야 한다. 현재 배열의 값은 4개인데 모달을 연결하는 값은 1개밖에 없는 상황이다... 그래서 여러 책에 대한 정보를 관리하는 방법은 해당 책의 정보를 상태로 관리하거나(useState) 컴포넌트의 prop을 전달해야 한다. 

 

1. 기존의 모달의 open 유무만 확인했던 함수에 book의 정보를 넣을 수 있는 상태관리를 추가해준다.

  const [bookInfo, setBookInfo] = useState<Book | null>(null);
  
  
  // 다른 코드들은 생략~!
  
   const openModal = (book: Book | null) => {
    setModalIsOpen(true);		//기존에 있던 modal의 오픈의 유무를 확인해주는 state
    setBookInfo(book);			//book의 정보를 넣기
  };

2. BookCover 내에 있던 img dp openModal 함수가 있었는데 그곳에 book data를 넣어준다.

              <BookCover>
                {" "}
                <img
                  onClick={() => openModal(book)}
                  src={book.img}
                  style={{
                    boxShadow: "8px 5px 10px 3px rgba(0,0,0,0.25)",
                    cursor: "pointer",
                  }}
                />
              </BookCover>

3. 기존의 book.data가 아닌 setBookInfo로 저장된 값인 bookInfo의 값을 출력한다.

 <Book bookInfo={bookInfo?.img} author={bookInfo?.author}></Book>

잘 가져온다...!!