React <a /> 새창에서 띄우기 + Hover Rotate 애니메이션

매번 까먹어서 적는다 ㅠㅠ 자주 쓰지 않기도 하고 한번 예전에 썼던 기억 있어서 남겨둔다!

결과코드

      <a
        href={`https://www.g2b.go.kr:8081/ep/invitation/publish/bidInfoDtl.do?bidno=${post?.공고번호.slice(0,11)}&bidseq=00&releaseYn=Y&taskClCd=3`}
        target="_blank"
      >
        <RightArrowSVG 
          className="-rotate-45 cursor-pointer hover:-rotate-[405deg] transition duration-700 ease-in-out" 
          w={30} h={30} />
      </a>

아주 깔꼼하다!

a 태그로 새창 띄우기

<a href={"url"} target="_blank"> </a>

target="_blank" 만 추가 하면 끝.

Rotate Animation

처음 내가 가진 svg는 우측 화살표였다. (난 우상단을 가르키는 화살표를 갖고 싶었다..)
그래서 -rotate-45 로 우상단을 가르키고, hover:-rotate-[405deg]를 통해서 hover시 405도 돌아가게 만들었다!
왜? -405도???! -360도로하면 어떻게 되겠는가! 그냥 똑같이 우측을 가르키겠지!
그래서 45도를 더 빼줘서 우상단 똑같이 가르키게 할려고 저렇게 했구, ease-in-out은 처음과 끝이 천천히 무언가가 일어나게 해주고, transition duration-700은 애니메이션으로 보이게 해주기 위해서 추가한 것이다. 끝!