210323_ TIL / 프로젝트 홈

오늘 할 일

1. 프로젝트 홈 상단 바둑판 , 리스트 버튼
2. 필터, 설정 버튼
3. 프로젝트 즐겨찾기 버튼

버튼의 경우 3가지 타입이 있다 - default , hover, active

styled 컴포넌트 active 일경우 처리 방식

background-image: url('/images/icons/icon_star.png');

${(props) =>
    props.active
      ? css`
          background-image: url('/images/icons/icon_star_active.png');
        `
      : css`
          &:hover {
            background-image: url('/images/icons/icon_star_hover.png');
          }
        `}

<ProJectStarButton type="button" active></ProJectStarButton>
/*
props 에 active 가 있을 경우, 삼항 연산자로 해서 덮는 방식이다 
이렇게 하면 active 일때 hover 기능이 안된다.
*/