[축구모임 홈페이지개발] 04/21 개발일지 Nodejs / 로그인 성공 시 기존 접근 주소로 이동하기

4/18 목요일 진행한 회의에서 선수 스탯창 관련해서 회의를 진행했었다.

 

우선 1차적으로 선수들의 스탯을 볼 수 있는 창은 팀소개 탭을 활용하기로 했다.

 

팀소개 탭에서 각 각의 선수들의 프로필을 누르면 팝업이 하나 뜨면서 그 곳에서 우리는 스탯을 확인할 수 있게 된다.

 

닫기버튼 하나 정도 만들어주면 팀소개 페이지 안에서 모든 선수들을 다 편하게 볼 수 있을 것이다.

 

그리고 만들어진 마이페이지 기능에서는 자신의 스탯을 확인할 수 있고, 버튼을 이용해서 다른 선수들의 스탯을 평가할 수 

 

있는 기능을 추가해줘야한다.

 

추후에 마이페이지 창에서는 기능들을 추가해 나갈 것이기 때문에 

 

신경써서 처음부터 코드를 잘 정리해서 작성하면 좋을 것 같다.

 

오늘은 우선 저번에 실패한

 

로그인 성공 시에 기존에 접근하려고 했던 주소로 이어서 이동하기.

 

 

---

 

팝업페이지 부터 해보겠다.

 

bootstrap 에서 찾아보니 modal 이라고 하더라.

 

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"

    integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"

    crossorigin="anonymous"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"

    integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"

    crossorigin="anonymous"></script>

 

bootstrap 을 사용할 수 있는 script 코드를 넣어주고

 

사용법에 나와있는 이 모달을 사용하기 위해 필요한 javascript 코드를 추가로 넣어준다.

 

  <script>

    const myModal = document.getElementById('myModal')

    const myInput = document.getElementById('myInput')

    myModal.addEventListener('shown.bs.modal', () => {

      myInput.focus()

    })

  </script>

 

        <!-- Button trigger modal -->

        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">

          Launch demo modal

        </button>

        <!-- Modal -->

        <div class="modal fade" id="exampleModal" 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">Modal title</h1>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

              </div>

              <div class="modal-body">

                ...

              </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>

 

그리고 modal 코드를 넣어줬는데 문제가 발생

 

 

안에 내용이 아무것도 안 뜬다.

 

이전에 내가 이미 css 를 입혀놓은 div 영역 안에 bootstrap 에서 가져온  속성을 넣으면

 

적용이 정상적으로 안됐던 현상이 있었다.

 

그래서 내 div 영역 밖에 놓았더니 정상적으로 작동했다.

 

근데 이 글을 쓰다보니 혹시 내 div 영역 안에서는 하얀색 글씨로 적용되어있던거 때문에 안 보이는게 아닐까? 싶었다.

 

 

아니나 다를까 숨어있었다.

 

 

대충 이런 식으로 구현되지 않을까 싶고 위에 글씨에는 스탯 항목과 스탯 숫자가 나올거라 예상한다.

 

 

여러 가지 모달 중에 타겟해서 스탯창을 열고 싶을 때는 위처럼 data-bs-target 뒤에 번호를 붙여서 각각 맞게 타겟하도록 설정하면 되었다.

 

각 선수마다 다른 모달을 열 수 있도록 타겟할 수 있겠다.

 

여기서 나는 문제가 생겼다고 생각했다.

 

위에 테스트를 할 때는 button 태그에서 클릭 시에 바로 modal 이 띄워졌는데,

 

여기는 선수 이미지를 클릭해야 modal 이 띄워져야 하기 때문에 문제라고 생각 했는데,

 

알아보니까 그냥

 

        <img class="player-profile"

          src="https://ik.imagekit.io/wlalafg7g/GoalPostAgain/introduce/%ED%95%9C%EB%8C%80%EA%B7%9C_1.png?updatedAt=1707829275463"

          alt="33한대규"  data-bs-toggle="modal" data-bs-target="#exampleModal">

 

 

위 코드처럼 data-bs-toggle , data-bs-target 두 속성을 넣어줘서 똑같이 버튼처럼 맞춰주면 되는 것이었다.

 

이대로면 팝업은 일단 디자인팀이 짜주는 대로 세부적을 코드를 짜야겠지만 큰 틀 기능은 구현이 되었다.

 

---