TIL 3일차 - 수정하기 버튼, modal창 구현

오늘은 미니프로젝트를 진행하는데에 있어 맡은 역할인 modal창과 수정하기 버튼을 구현하는데 집중하였다.

결론적으로 보자면 수정하기 버튼은 내일 마무리가 될 것같고, modal창은 구현이 되었다.

위의 버튼을 클릭하면 글쓰기 위한 가입하는 모달창을 오른쪽 사진처럼 띄우게 했다.

        $("#openbtn").click(async function () {

            var modalPop = $('.modal-wrap');

            var modalBg = $('.modal-bg');

            $(modalPop).show();

            $(modalBg).show();

        })

        $("#cancelbtn").click(async function () {

            var modalPop = $('.modal-wrap');

            var modalBg = $('.modal-bg');

            $(modalPop).hide();

            $(modalBg).hide();

        })

        $("#exitbtn").click(async function () {

            var modalPop = $('.modal-wrap');

            var modalBg = $('.modal-bg');

            $(modalPop).hide();

            $(modalBg).hide();

        })

다음과 같은 코드로 버튼을 클릭하거나 modal창에 들어갔을때 뒷배경을 클릭하면 modal창이 꺼지게끔 하였다.

                    <button class="btn btn-danger mt-3" onclick="location.href='menu.html'">합류</button>

간단하게 버튼을 클릭하면 onclick이벤트가 발생하여 다른 html파일로 이동하는 코드도 작성해보았다.

본격적으로 수정하기 창을 만들기 위해 firebase에서 받아둔 데이터를 이용하여 프로필을 넣고 띄운다음 해당하는 자료의 수정하기 버튼을 만들어 수정하기 작업을 시작하였다. 수정하기 작업을 하는데 가장 큰 문제가 수정하기 버튼을 누르면 해당하는 프로필의 정보를 어떻게 옮기는지에 대한 고민을 하였는데, 

    var teamlist = []

    let i = 0;

    //데이터베이스를 가져오는 함수

    let docs = await getDocs(collection(db, "information"));

    docs.forEach((doc) => {

      let id = i;

      let row = doc.data();

      let name = row['name'];

      let mbti = row['mbti'];

      let content = row['content'];

      let imageUrl = row['imageUrl'];

      let blog = row['blog'];

      let github = row['github'];

      let password = row['password'];

      teamlist.push(row);

      let temp_html =

        `

            <div class="col">

                <div class="card h-100">

                    <img src="${imageUrl}"

                        class="card-img-top" alt="...">

                    <div class="card-body">

                        <p class="card-title">${name}</p>

                        <p class="card-text">${mbti}</p>

                        <p class="card-text">${content}</p>

                        <p class="card-text">${blog}</p>

                        <p class="card-text">${github}</p>

                    </div>

                    <button id="editbtn" class="editbt" data-bs-toggle="modal" data-bs-target="#editModal" value = ${id}>수정하기</button>

                </div>

              </div>

            `;

      $('#card').append(temp_html);

      i++

    });

하나하나 데이터를 정보를 가져와서 넣는 형태로 정보를 저장하게하였습니다.

teamlist라는 배열을 만들고 row데이터를 넣는형태로 진행하여서 id값을 구해야해서 위와같은 방법으로 계산하였습니다.

다음과 같이 오늘 작업을 진행하였는데 addDoc으로 진행하여서 작업이 구현되서 updateDoc을써서 수정버튼 작업을 내일 완성 해야겠다는 생각을 가지게되었습니다.

내일할것

 -수정버튼 마무리

 -UI다듬기