인프런 커뮤니티 질문&답변

안녕하세요 제로초님.

강의와는 무관하지만 잘 안되어 질문을 올립니다.

styled-components로 스타일링을 하고 있으며,

카드리스트안에 어떤아이콘을 hover했을때 툴팁을 보여주게 하고 onMouseLeave 했을때는 안보여지게 하는 스타일을 하고 싶은데 잘 안되어 질문을 올립니다.

전제조건은 카드리스트의 갯수가 1개가 아니라 여러개입니다.
(슬랙같은 채팅처럼)

제가 한 방법으로는 

const [display, setDisplay] = useState({ save: 'none', share: 'none', more: 'none' });

state로 관리 할려고(카드리스트에 아이콘이 3개 있습니다.) 하는데 하나의 카드리스트의 아이콘에 hover시에 다른 카드리스트에도 아이콘이 보여지는 현상이 있습니다(state를 하나로 관리하다 보니 다른 카드리스트에도 보여지네요,.....)

혹시 이럴경우에는 어떤방법이 좋을까요?

코드의 일부를 첨부합니다.

// 아이콘영역 마크업

<button>
  <img
    src="/dummy"
    onMouseEnter={onMouseHoverHandler('save')}
    onMouseLeave={onMouseLeaveHandler('save')}
  />
  <Tooltip display={save}>Save</Tooltip>
</button>

// hover시 실행되는 부분

const onMouseHoverHandler = (text: string) => (e: any) => {
  setDisplay({
    ...display,
    [text]: 'block',
  });
};

// state

const [display, setDisplay] = useState({ save: 'none', share: 'none', more: 'none' });

const { save, share, more } = display;