카드 상세페이지에서 카드 뒤집기 기능을 추가한다. about phoca-review HOT 1 CLOSED

문제 해결 방법

position: absolute로 지정한 요소를 정 중앙에 위치시키는 법

• absolute 요소의 상위 요소를 relative로 잘 감쌌다면, left: 50%, top: 50%을 줘서 가운데에 위치시킨다.
• absolute 요소의 위치 기준은 맨 위 왼쪽 꼭짓점이므로, 자기 몸체의 절반만큼을 왼쪽과 위로 이동시키기 위해
  transform: translate(-50%, -50%)을 준다.

카드 영역에 마우스가 위치할 때 버튼이 보이게 하기

• 마우스가 카드 위에 위치하는지 여부를 저장하는 state를 만든다.
• onMouseOver 이벤트는 마우스가 요소 위에 위치할 때 계속 발생하므로, 들어올 때와 나갈때를 감지하는 onMouseEnter와 onMouseLeave 이벤트를 Card 요소에 준다.
• onMouseEnter일 때는 카드 위에 마우스 위치하는지 여부를 setState를 이용해 true로, onMouseLeave에는 false로 설정한다.
• 버튼 요소에 state가 true이면 display: block, false면 display: none을 준다.

from phoca-review.