React - Hover할때 Other children select

항해 99의 기술매니저님이신 예매니저님은 정말 대단한거같다..

실력도.. 끈기도.. 

 

import React, { useState } from "react";
import styled from "styled-components";

const App = () => {
  const [target, setTarget] = useState(0); // 마우스오버 된 대상
  const [mouseIn, setMouseIn] = useState(false); // 모든 컴포넌트에서 마우스 오버 여부 확인

  const onMouseOverHandler = (event, item) => {
    setTarget(item); // 마우스를 오버했을 때 해당 item의 값으로 target 변경
    setMouseIn(Boolean(event)); // 마우스 오버 확인
    //console.log(Boolean(event))
  };

  const onMouseLeaverHandler = (event) => {
    setTarget(0); // 마우스가 나왔을 떄 타켓 제거
    setMouseIn(!event);
    console.log(!event) // 마우스 나왔을 때 확인
  };

  // 상태값을 바탕으로 클래스를 생성합니다.
  const generateClassName = (target, itemValue, isMouseIn) => {
    if (itemValue === target && isMouseIn) {
      return "active";
    }

    if (itemValue === target || mouseIn) {
      return "normal";
    }

    return "default";
  };

  return (
    <>
      <StContainer>
        {[1, 2, 3, 4, 5].map((item) => {
          return (
            <StCard
              key={item}
              className={generateClassName(target, item, mouseIn)}
              onMouseOver={(event) => onMouseOverHandler(event, item)}
              onMouseLeave={onMouseLeaverHandler}
            >
              {item}
            </StCard>
          );
        })}
      </StContainer>
    </>
  );
};

export default App;

const StContainer = styled.div`
  padding: 10px;
  display: flex;
  gap: 10px;

  .active{
  background-color: blue;
  }

  .normal{
    background: red;
    transform: scale(0.8);
  }
  .default{
    background: yellow;
  }
`;

const StCard = styled.div`
  border: 1px solid red;
  width: 100px;
  height: 100px;
  transition: all 100ms ease-in-out;
`;