Til (2023.02.20)

우클릭 메뉴

 

친구창 ui를 깔끔하게 하기위해서 일부 기능을 우클릭에 넣으려고 시도해봤다.

우선 나올 우클릭메뉴를 friendContextMenu라는 컴포넌트로 따로 만들었다.

생성한 후 친구map안에 넣어줬다.

 {friend?.map((i: FriendSearchProps) => {
        return (
          <FriendBoxDiv onContextMenu={handleContextMenu}>
            <FriendContextMenu
              xPos={menuPosition.xPos}
              yPos={menuPosition.yPos}
              onClose={handleCloseContextMenu}
              id={i.id}
            />

            <FriendBoxNameDiv>
              <FriendBoxNameImgDiv>
                <FriendBoxNameImg src={i.profileimg} />

                {/* 온라인표시 */}
                {i.login && isFriendOnline(i.lastLogin) ? (
                  <FriendBoxNameOnline />
                ) : (
                  <FriendBoxNameOffline />
                )}
              </FriendBoxNameImgDiv>

              <FriendBoxNameH2>{i.nickname}</FriendBoxNameH2>

              <FriendBoxNamePlayingP>
                `Dave the Diver`방 참여중
              </FriendBoxNamePlayingP>

              <FriendBoxNotice>7</FriendBoxNotice>
            </FriendBoxNameDiv>
          </FriendBoxDiv>
        );
      })}

props로는 우클릭을했을때 마우스의 위치를 확인해서 생성되게 하기위해 event.screenX와 event.screenY를 props로 보내줬다.

처음에는 clientX,Y를 이용해 구현했는데. 나오는 메뉴는 스크롤없이 화면에 고정돼있고 나머지 메인화면은 스크롤이 가능한형태라 메인페이지를 스크롤하면 메뉴에서 클릭한 우클릭의 좌표도 이상해지는 오류가 있었다. 그래서 전체말고 보이는 화면에서의 위치를 지정하기위해 screenX,Y로 교체하게 됐다.
이렇게 했더니 더블 모니터를 사용하게 되면 메인 모니터 기준으로 위치를 잡는 것 같아 문제가 생겼다. 그래서 다시 clientXY로 수정 하고 메뉴 자체를 z-index로 맨위로 올렸더니 스크롤 문제와 더블 모니터 문제도 해결 되었다.

  // //친구 우클릭
  const handleContextMenu = (event: any) => {
    event.preventDefault();
    setMenuPosition({
      xPos: `${event.screenX}px`, 교체 -> `${event.clientX}px`
      yPos: `${event.screenY - 140}px`, 교체 -> `${event.clientY}px`
    });
  };

  const handleCloseContextMenu = () => {
    setMenuPosition({ xPos: "-1000px", yPos: "-1000px" });
  };

  useEffect(() => {
    const handleWindowClick = () => {
      handleCloseContextMenu();
    };

    if (menuPosition.xPos !== "-1000px" && menuPosition.yPos !== "-1000px") {
      //클릭하면 추가
      window.addEventListener("click", handleWindowClick);
    } else {
      //클릭하면 이벤트 삭제
      window.removeEventListener("click", handleWindowClick);
    }

    return () => {
      window.removeEventListener("click", handleWindowClick);
    };
  }, [menuPosition]);