[축구모임 홈페이지개발] 06/06 개발일지 Nodejs / 선수스탯창 디자인3, 개인화2

 

킥 파워를 보면 선수스탯창에서 스탯을 부여하기 눌렀을 때 input 태그로 수치들이 바뀌게끔 구현하는 과정을 구현하고 있는데,

 

visibility : hidden; 속성을 이용하니까 

 

 

수치가 없어도 영역이 공간이 할당되어있었다.

 

이를 해결하기 위해서 알아보니까 이는 visibility 속성의 특징이고

 

display : none; 

display : block; 

 

속성을 이용해야 내가 원하는대로 공간을 차지하지 않는 방법으로 갈 수 있었다.

 

 

 

    <script>

      document.addEventListener('DOMContentLoaded', function() {

        document.querySelectorAll('.introduce-stat-inputstatbt').forEach(function(span) {

          span.addEventListener('click', function() {

            var statNumElements = document.querySelectorAll('.introduce-stat-num');

            var inputAreaElements = document.querySelectorAll('.introduce-stat-inputarea');

           

            statNumElements.forEach(function(element) {

              element.style.display = 'none';

            });

   

            inputAreaElements.forEach(function(element) {

              element.style.display = 'block';

            });

          });

        });

      });

    </script>

 

스탯부여하기 span 태그를 누르면 전체가 다 input 태그로 바뀌게 했다.

 

        <img onclick="sendPlayerInfo(this.dataset.playerInfo)" 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="#Modal" data-player-info="33-bigstarhan33">

 

 

 

function sendPlayerInfo(playerInfo) {

  var xhr = new XMLHttpRequest();

  xhr.open("POST", "/statinfo", true);

  xhr.setRequestHeader("Content-Type", "application/json");

  xhr.onreadystatechange = function () {

    if (xhr.readyState === 4) {

      if (xhr.status === 200) {

        var responseData = JSON.parse(xhr.responseText);

       

        // 이미지 요소 가져오기

        var playerImage = document.querySelector('.player-stat-profile');

       

        // 받은 이미지 URL을 이미지 요소의 src 속성에 설정

        playerImage.src = responseData.profileImage;

      } else {

        console.error("서버 요청 중 오류 발생:", xhr.status);

      }

    }

  };

  xhr.send(JSON.stringify({ playerInfo: playerInfo }));

}

 

app.post('/statinfo', async (req, res) => {

  const playerInfo = req.body.playerInfo;

  try {

    let result = await db.collection('user').aggregate([

      {

        $match: {

          userID: playerInfo

        }

      }

    ]).toArray();

    if (result.length > 0) {

      console.log('찾은 데이터:', result[0].profileImage);

      res.json({ profileImage: result[0].profileImage }); 

    } else {

      console.log('해당하는 데이터가 없습니다.');

      res.status(404).json({ error: '데이터를 찾을 수 없습니다.' }); 

    }

  } catch (error) {

    console.error('데이터 조회 중 오류 발생:', error.message);

    res.status(500).json({ error: '데이터 조회 중 오류가 발생했습니다.' }); 

  }

});

 

이미지를 클릭하면 엔드포인트로 데이터를 전송시켜 출력시켰다.

 

그리고 user 컬렉션에서 찾아 매치한 다음 그 안의 이미지 주소값을 다시 클라이언트로 전송시켜서 출력했다.

 

그리고 해당 class 위치에 src 를 업데이트해주는 방향으로 기능 구현했다.

 

이로써 이미지마다 모달에서도 이미지가 해당 이미지로 바뀌어 출력된다 ㅎㅎ