버튼 아이콘 클릭 가능 영역 넓히기 | 리액트 React, 스타일 컴포넌트 Styled Component, CSS

사용 기술 및 라이브러리

• 리액트 React
• 스타일드 컴포넌트 Styled Component
• 버튼 컴포넌트를 모두 모아두는 buttons.js 파일

현재 상황

• 각 버튼마다 미리 buttons.js 에서 사이즈를 정의한다.
• background 설정에서 center/contain 으로 썼고, 아이콘의 너비와 높이를 이미 정한 상태이다.

아래는 buttons.js 파일의 코드 중 일부이다.

const shareKakaoButton = css`
  background: url("${shareKakaoImage}") no-repeat center/contain;
  width: 34px;
  height: 34px;
`
const shareCopyUrlButton= css`
  background: url("${shareCopyUrlImage}") no-repeat center/contain;
  width: 34px;
  height: 34px;
`

 

원하는 결과물

• 버튼 클릭 가능한 영역을 아이콘보다 더 확장하고 싶다. 
• 버튼이 30px * 30px 사이즈이면, 클릭가능한 영역은 64px * 64px 로 만들고 싶다.
• 버튼 아이콘 사이즈를 변형시키지 않고, 버튼 클릭 가능한 영역(clickable area)을 키우고 싶다.

원하는 최종 결과물

클릭 가능한 영역만 키우고 싶은데, 아이콘 크기까지 커져버린 안 좋은 예시.

문제점

아래는 예시 코드이다.

• Button 컴포넌트는 buttons.js 에서 import 한 element 이다. 
• 버튼을 감싸는 ButtonWrap 이라는 div element 가 있다.
• onClickHandler 클릭 핸들러는 Button 컴포넌트에만 연결되어 있다. ButtonWrap 은 일반적인 div element 이다.
• Button 컴포넌트 자체의 css style 을 바꾸면, 버튼 아이콘 사이즈가 미리 지정한 30px*30px 에서 바뀐다. 

const ButtonWrap = styled.div`
 // 생략
`

<div>
  <ButtonWrap>
      <Button type={ButtonType.SHARE_KAKAO} onClick={kakaoUrlShare}/>
  </ButtonWrap>
  <Caption>카카오톡</Caption>
</div>

해결 방법

• ButtonWrap 의 CSS Style 에 있는 padding 을 제거한다.
• Button 컴포넌트의 CSS 를 Styled Component 로 아래와 같이 수정한다.
• 위 코드의 Button 컴포넌트를 ButtonItem 이라는 이름으로 바꿨다. Button 컴포넌트의 스타일을 밖에서 수정하기 위해서 Styled Component 로 새로운 이름으로 만들었다. const Button = styled(Button) 이라고 하면, 에러가 난다.
• 가장 중요한 것은 Button 컴포넌트에 추가하는 background-size 라는 CSS property 이다.
• ButtonWrap 이라는 div 를 통해 클릭하고 싶은 전체 영역의 너비와 높이를 설정한다.
• ButtonItem 에서 background-size 값으로 아이콘 크기;를 고정한다. "width: 64px; height: 64px;" 이라고 쓰면, 아이콘 크기가 커져버린다.

const ButtonWrap = styled.div`

  width: 64px;
  height: 64px;
  // padding: 15px;  // 패딩 제거.
  border-radius: 24px;
  border: 1px solid #ECECF5;
`
const ButtonItem = styled(Button)` 
  display: inline-block;
  background-size: 30px 30px;
  width: 100%;
  height: 100%;
`

<div>
  <ButtonWrap>
      <ButtonItem type={ButtonType.SHARE_KAKAO} onClick={kakaoUrlShare}/>
  </ButtonWrap>
  <Caption>카카오톡</Caption>
</div>

아이콘은 작게, 클릭 가능한 영역은 크게 만들었다.

이렇게 버튼의 실제 크기와 버튼을 눌렀을 때 반응하는 영역을 크기를 다르게 설정할 수 있다. 

참고로, 버튼보다 클릭 가능 영역의 크기를 더 확장하는 이유 중 하나는 터치나 클릭해서 반응하는 영역이 너무 작으면, 어떤 사용자에게는 터치하는 게 쉽지 않을 수 있어서 버튼 근처만 눌러도 이벤트가 발생하도록 하기 위함이다.