[배민문방구] Day3. 메뉴바, 상품컴포넌트 이벤트 구현

헤더 레이아웃 CSS 입히기

• 메뉴 항목은 <li> 태그의 반복으로 객체로 분리하여 map()을 돌려주었다.

const MENUARR = [
  '전체',
  '문구',
  '리빙',
  ：
  ：
];

---

• 항목<li> 내 onClick()시 handleMenuClick(index)함수 호출 후 index 값은 state 에 저장한다.
• 메뉴텍스트가 보여지는 <div> 내에서 handleAddClassName(index) 함수를 호출 해 ClassName "on" 추가 시 border-color 를 변경해주었다.

handleMenuClick = idx => {
  this.setState({
    clickedId: idx,
  });
};
handleAddClassName = idx => {
  if (idx === this.state.clickedId) {
    return 'on';
  }
};
<nav className="headerMenu">
  <ul>
    {MENUARR.map((menu, idx) => {
    return (
    <li key={idx} onClick={() => this.handleMenuClick(idx)}>
      <div className={'menuTitle ' + this.handleAddClassName(idx)}>
        {menu}
      </div>
    </li>
    );})}
  </ul>
</nav>

Hover 시 아이콘 나타나기/사라지기

<div className="itemImgBox" onClick={this.goToDetail}>
  <div className="likeOrCart">
    <div className="buttons">
      <button>
        <i className="far fa-heart"></i>
      </button>
      <button>
        <i className="fas fa-cart-plus"></i>
      </button>
    </div>
  </div>
</div>

우선 버튼의 position을 absolute로 지정하고, opacity:0으로 지정해 버튼의 위치를 이미지 밖에서 안보이게 초기값을 설정한다. .

        .buttons {
          opacity: 0;
          position: absolute;
          bottom: 0px;
          button {
            padding: 7px;
            margin: 0px 5px;
            border: none;
            background-color: white;
          }
        }

부모 인 이미지 박스에 :hover, :not(:hover) 이벤트 속성을 추가하여 opacity와 position을 조절하여 사라지고 나타나는 효과를 주었다.

 .itemImgBox {
      position: relative;
      width: 100%;
      img {
        object-fit: cover;
        width: 100%;
        height: 340px;
      }
      &:hover .likeOrCart .buttons {
        transition: all 0.5s ease-in-out;
        opacity: 1;
        bottom: 30px;
      }
      &:not(:hover) .likeOrCart .buttons {
        transition: all 0.5s ease-in-out;
        opacity: 0;
        position: absolute;
        bottom: 0px;
      }

오늘의 이슈

git branch가 꼬여서 애(?)를 먹었지만! 지금은 무사히 해결!

기능별로 branch를 생성하려고 feater/header와 feature/product 두개의 브랜치를 관리하려 하였는데..feature/product에서 자꾸 header에 commit한 내역이 물려들어왔었다...😥

원인은 master branch에서 기능별 branch를 생성했어야하는데..
feater/header 내에서 feature/product branch를 생성해서 문제였다! branch를 생성할때도 지금 위치가 어디인지 잘 확인하자!