팀 프로젝트 - 변경사항

기존

기존에는 포메이션판에 선수의 정보를 원 안에 저장하였는데 그 모양이 조금 변경되었다

변경 사항

이런식으로 변경해야한다

디자인쪽에서 받은 이미지가 없어서 대충 저런 느낌과 비슷하게 그림판에서 만들었다

원래는 저 원을 나타내는 코드가 아래와 같았다

			<div className="move">
              <Button className="button"
                disabled={Status}
                id="button1"
                aria-controls={open ? 'basic-menu' : undefined}
                aria-haspopup="true"
                aria-expanded={open ? 'true' : undefined}
                onContextMenu={(e) => handleClick(e)}
              >
                <div id="button1">{Content1}<br/>{playerList && playerList[0].id}<br/>{Name1}</div>
              </Button>
            </div>
            
CSS
.move {
  background-color:skyblue;
  width:30px;
  height:30px;
  border-radius:75px;
  text-align:center;
  margin:0 auto;
  font-size:15px bold; 
  vertical-align:middle;
  line-height:50px;
  cursor: grab;
  position: absolute;
}

원래는 이게 원을 찍어내고 있었는데 이제 원이아닌 저 육각형을 넣어줘야한다

그래서 hexagon이라는 div태그를 새로 만들었다

.hexagon {
  background-image: url("./123.png");
  width:70px;
  height:90px;
}
.hexagon :hover{
  background-image: url("./124.png");
}

          <div className="hexagon">
              <Button className="button"
                disabled={Status}
                id="button1"
                aria-controls={open ? 'basic-menu' : undefined}
                aria-haspopup="true"
                aria-expanded={open ? 'true' : undefined}
                onContextMenu={(e) => handleClick(e)}
              >
                <div id="button1">{Content1}<br/>{playerList && playerList[0].id}<br/>{Name1}</div>
              </Button>
          </div>

이렇게 만들어 주니 아래처럼 바꼈다

문제는 hover에서 조금 이상하게 된다

hover 됐을 때 이미지를 변경하기위해 만들고 마우스를 올려봤는데

이렇게 조금 이상하게 hover가 된다

테스트를 해보기 위해 CSS를 조금 변경해보았다

.hexagon {
  /* background-image: url("./123.png"); */
  background-color:skyblue;
  width:70px;
  height:90px;
  text-align:center;
  margin:0 auto;
  font-size:15px bold;
  vertical-align:middle;
  line-height:50px;
  cursor: grab;
  position: absolute;
}
.hexagon :hover{
  /* background-image: url("./124.png"); */
  background-color:pink;
}

원래라면 파란 박스 위에 올라가는순간 핑크로 변해야되는데 이거는 버튼태그 안으로 들어가야 핑크로 변하고있다

조금 더 찾아보고 해결되면 다시 올리도록 하겠다