[TIL] modal 창의 내용 중복 이슈

각 내용을 보기 위해서 버튼을 클릭하면 모달창을 통해 상세 내용을 볼 수 있도록 작성하였다

 

하지만 위의 사진처럼 모든 내용이 동일하게 보이는 문제가 발생했다

 

해당 문제는 모달창의 코드를 복사하는 과정에서 아이디를 모두 같게 한 채로 작업을 진행하여 발생한 문제였다

 

 

<!-- 평가한 영화 -->
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-outline-success" data-bs-toggle="modal"
                        data-bs-target="#retedMovieModal">
                        rated movie <br> <span id="ratedmovie"></span>
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" id="retedMovieModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="exampleModalLabel">평가한 영화</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div id="my-rated-movie">

                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                            </div>
                        </div>
                    </div>



                    <!-- 내가 작성한 리뷰 -->
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-outline-success" data-bs-toggle="modal"
                        data-bs-target="#myReviewModal">
                        my review <br> <span id="myreview"></span>
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" id="myReviewModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="exampleModalLabel">내가 작성한 리뷰</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div id="my-movie-reviews">

                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                            </div>
                        </div>
                    </div>

 

모달의 id를 유일한 값으로 변경한 후

다음과 같이 button의 data-bs-target와 모달의 id를 일치시켜준 후에 아래처럼 정상작동하는 것을 확인하였다