day-coding : rotate3d-card

서론

아주 귀여운게 생각나서 문득 만들어봤다.
보고있으면 정말 귀엽다.
귀여운게 최고야.

구현내용

깃허브

음! 다시봐도 귀엽군.

참고한 영상

맛있는코딩 - 마우스 따라 움직이는 3d 카드

영상 초반부에 작동 원리에 대해서 아주 친절하게 설명해주신다.
요약하자면, window 내장 메소드인 getBoundingClientRect 메소드를 이용해서
요소의 크기와 마우스의 상대 위치를 구하고,
상대 위치에 따른 적절한 스타일 상태값을 줘서 마치 카드가 회전하는 것 처럼 보여주는 것.

사실 고민했던 부분은 구현적인 내용이 아니고 타입스크립트에 관한 부분.
처음에 스타일에 대한 상태값을 스타일드 컴포넌트 자체적으로 처리하고 싶었는데,
예를들어 간단하게,

Card : styled.div`
  box-shadow: ${(props) => props.cardStyle.boxShadow};
  transform: ${(props) => props.cardStyle.transform};

이런식.
그런데 생각처럼 되지 않았다.
이 호출과 일치하는 오버로드가 없습니다- 라거나
excutionContext & Omit<ClassAttributes ~ 하는 오류가 나왔다.
한시간 넘게 끙끙댔지만 답을 찾을 수 없었다.
아니지, 답은 찾았지만 개념을 이해할 수 없다는게 맞다.
아직 타입스크립트에 대한 개념이 너무 얕다.
조금 더 정진할 것.