<!-- 
@x_yechan 예찬 
스킨 사용 규정과 적용 방법은 배포글 공지를 참고해주세요.
 -->

<!-- 팝업 -->
  <div class="overlay blur-filter" id="popupOverlay">
    <div class="popup">

<div class="guest-game"> 

 <div class="guest-game-T">
    <div class="guest-game-t">ROOM</div>
    <div class="guest-game-I help-tip">
    <p>
    PC로 접속해주세요!<br>

    -아이템을 드래그해서 옮겨보세요.<br>
    -벽지와 바닥은 처음에 놔주는게 좋아요!<br>
    -완성되면 캡쳐해서 저장하세요!<br>
    -저장했다면, 새로고침해야 가구들이 원래대로 돌아가요.<br>

    제작: 예찬, @x_yechan 
    </p>
    </div>
 </div> 




 <div class="game-room"><img src="배경소스링크" id="gate" class="droppable"></div>


 <div class="game-item-box">
    <div class="game-item-box-b">
      <div class="item-box"><img class="item" src="아이템소스링크" ></div>
    </div>
 </div>
<!--<div class="item-box"><img class="item" src="아이템소스링크" ></div>-->


<script>
   let currentDroppable = null;

let item_list = document.getElementsByClassName('item');

for (let i = 0; i < item_list.length; i++) {
    let item = item_list[i];
    initializeDraggableItem(item);
}

function initializeDraggableItem(item) {
    item.onmousedown = function (event) {
        let shiftX = event.clientX - item.getBoundingClientRect().left;
        let shiftY = event.clientY - item.getBoundingClientRect().top;

        item.style.position = 'absolute';
        item.style.zIndex = 1000;
        document.body.append(item);

        moveAt(event.pageX, event.pageY);

        function moveAt(pageX, pageY) {
            item.style.left = pageX - shiftX + 'px';
            item.style.top = pageY - shiftY + 'px';
        }

        function onMouseMove(event) {
            moveAt(event.pageX, event.pageY);

            item.hidden = true;
            let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
            item.hidden = false;

            if (!elemBelow) return;

            let droppableBelow = elemBelow.closest('.droppable');


        }

        document.addEventListener('mousemove', onMouseMove);

        document.onmouseup = function () {
            document.removeEventListener('mousemove', onMouseMove);
            document.onmouseup = null;
        };
    };

    item.ondragstart = function () {
        return false;
    };
}
</script>
</div>
      <div class="close-btn" onclick="togglePopup()">x</div>
    </div>
  </div>
  <script>
    function togglePopup() {
      var overlay = document.getElementById('popupOverlay');
      var popup = overlay.querySelector('.popup');
      var body = document.body;

      if (overlay.style.display === 'flex') {
        overlay.style.opacity = 0;
        popup.style.opacity = 0;
        body.classList.remove('blur-filter');

        setTimeout(function () {
          overlay.style.display = 'none';
        }, 300);
      } else {
        overlay.style.display = 'flex';

        setTimeout(function () {
          overlay.style.opacity = 1;
          popup.style.opacity = 1;
          body.classList.add('blur-filter');
        }, 10);
      }
    }
  </script>
<!-- //팝업 -->

css에 아래의 코드를 넣어주세요.

/*--------------플러그인-미니홈피--------------*/
    .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
      z-index: 1000;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }

    .popup {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
      z-index: 1001;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      font-family: 'Pretendard-Regular';
      width: 90%; /* 팝업의 너비를 조정합니다. */
      height: 90%; /* 팝업의 높이를 조정합니다. */
      max-width: 660px; /* 최대 너비 설정 */
      max-height: 600px; /* 최대 높이 설정 */
      overflow: hidden;
    }

    .close-btn {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #990000;
      cursor: pointer;
      font-weight: bold;
      color: rgb(255, 255, 255);
      margin-top: 2px;
      float: right;
    }
.guest-game{
  width: 660px;
  height: 580px; 
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  border-top-right-radius: 10px 10px;
  border-bottom-right-radius: 10px 10px;
  border-top-left-radius: 10px 10px;
  border-bottom-left-radius: 10px 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.guest-game-T{
  width: 760px;
  height: 20px;
  font-family: 'Pretendard-Regular';
  margin-top: 5px;
}
.guest-game-t{
  width: 60px;
  height: 20px;
  background-color: #990000;
  color: #ffffff;
  float: left;
  margin-right: 10px;
  border-top-right-radius: 10px 10px;
  border-bottom-right-radius: 10px 10px;
  border-top-left-radius: 10px 10px;
  border-bottom-left-radius: 10px 10px;
  margin-left: 50px;
}
.guest-game-icon svg{
  height: 20px;
  width: 20px;
  color: #990000;
}
.guest-game-I{
  float: left;
  height: 20px;
  width: 20px;
}
input[type=radio] {
	display: none;
}
.game-room{
  width: 540px;
  height: 540px;
  float: left;
  margin-left: 30px;
}
.game-room img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.game-item-box{
  width: 60px;
  height: 522px;
  background-color: #ffd0dda2;
  transition: 1s;
  border-top-right-radius: 10px 10px;
  border-bottom-right-radius: 10px 10px;
  border-bottom-left-radius: 10px 10px;
  border-top-left-radius: 10px 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 7px;
  overflow-x: hidden;
  overflow-y: auto;
  float: left;
}

  .game-item-box::-webkit-scrollbar {/* 스크롤바 */
    width: 5px;  /* 스크롤바의 너비 */
    height: 1px;
}
  .game-item-box::-webkit-scrollbar-thumb {
    height: 1px; /* 스크롤바의 길이 */
    background: #990000;/*스크롤바의 색상 */
    border-radius: 10px;
}
  .game-item-box::-webkit-scrollbar-track {
    background: rgba(33, 121, 244, 0);  /*스크롤바 뒷 배경 색상*/
}

.item-box{
  width: 50px;
  height: 50px;
  background-color: #ff838369;
  border-top-right-radius: 10px 10px;
  border-bottom-right-radius: 10px 10px;
  border-top-left-radius: 10px 10px;
  border-bottom-left-radius: 10px 10px;
  margin-bottom: 5px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box; 
  object-fit: cover;
}
.item-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  position: absolute;
  box-sizing: border-box; 
  display: block;
  user-drag: none;  
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}
.game-icon{
  color: #990000;
}
.game-icon svg{
  width: 15px;
  height: 15px;
}
.help-tip{
  width: 20px;
  height: 20px;
  background-color: #990000;
  color: #ffffff;
  float: left;
  margin-right: 10px;
  border-top-right-radius: 10px 10px;
  border-bottom-right-radius: 10px 10px;
  border-top-left-radius: 10px 10px;
  border-bottom-left-radius: 10px 10px;
}
.help-tip:before{
	content:'?';
	font-weight: bold;
	color:#fff;
}
.help-tip:hover p{
	display:block;
	transform-origin: 100% 0%;
	-webkit-animation: fadeIn 0.3s ease-in-out;
	animation: fadeIn 0.3s ease-in-out;
}
.help-tip p{
	display: none;
	text-align: left;
  background-color: #ff838369;
	padding: 20px;
	width: 300px;
	position: absolute;
	border-radius: 3px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	color: rgb(34, 34, 34);
	font-size: 13px;
	line-height: 1.4;
}

.help-tip p:after{
	width:40px;
	height:40px;
	content:'';
	position: absolute;

}
.guestContent img{
  width:300px;
	height:300px;
}
.iconmenu{
  color: #ffffff;
  transition: 1s;
}
.iconmenu:hover{
  color: #ffffff7d;
}
.iconmenu svg{
  width: 15px;
  height: 15px;
}
/*--------------//플러그인-미니홈피//-------------- */