클릭한 화살표 회전시키기 (SCSS, classnames, transition + transform: rotate)

홈 화면 리스트에서 더보기 화살표를 클릭할 때 더 좋은 유저 경험(UX)을 위해 화살표가 회전하는 애니메이션이 있으면 어떨까 하는 생각이 들었다. Next.js + SCSS 환경 + classnames로 클래스를 여러 개 주고 transition + transform: rotate 조합으로 구현했다.

구현 코드

조건은 2가지이다.
1. showMore(더보기) 상태가 열려 있을 때(isOpen)
2. 클릭한 화살표의 id와 showMore의 index가 일치할 때

만약 isOpen 조건만 주면 어떤 화살표를 눌러도 모든 화살표가 회전해버리므로 꼭 두 번째 조건 여부도 확인해준다.

 const [showMore, setShowMore] = useState({
    isOpen: false,
    index: '',
  });
  
  ...
  
  <div
	className={classNames(
    	styles.loadMoreIcon,
        // 조건 2가지가 모두 성립할 때만 화살표를 회전시키는 클래스 부여
        showMore.isOpen &&
        showMore.index === id.toString() &&
        styles.rotateToBottom
    )}
	>
    	<img
        	src={'./load-more-arrow.png'}
            alt="load-more-button"
        />
	</div>

classnames로 병렬적으로 연결한 클래스는 꼭 앞에 &를 붙여줘야 인식된다.

.loadMoreIcon {
	position: absolute;
	top: -10px;
	width: 24px;
 	height: 28px;
	transition: all ease 0.2s;

	&.rotateToBottom {
		transform: rotate(90deg);
	}
}