TIL 20211106 [항해99 52일차]

마이페이지 뒷면 카드 마우스 오버시 아이콘 보이기

  // onMouse
  const [display, setDisplay] = React.useState({ display: 'none' });
  
  return (
  <Div
     // onMouse
     onMouseEnter={() => {
     setDisplay({ display: 'block' });
      }}
     onMouseLeave={() => {
     setDisplay({ display: 'none' });
      }}
      >
        <ProjectDiv>
          <Grid is_flex>
            <TitleText>{cardList[cardId].title}</TitleText>
            <IconDiv className="iconDiv">
              <EditBtn
                onClick={editCardBack}
                cursor="pointer"
                className="editBtn"
              />
              <DeleteBtn
                onClick={deleteCardBack}
                cursor="pointer"
                className="deleteBtn"
              />
            </IconDiv>
          </Grid> )
          ...생략...
  
  const IconDiv = styled.div`
  display: none;
  justify-content: space-around;
  margin-right: 32px;
`;

onMouseEnter() 와 onMouseLeave() 이벤트를 통해, 마우스가 해당 div 영역에 놓여있을 때와 없을 때 display의 상태를 useState를 사용해 변경해준다.