별건 아니지만 motion 라이브러리를 사용하면서 삽질했던거 써두기
포트폴리오의 보유 스킬 섹션을 다시 만들면서 기존의 아코디언 디자인을 카드 디자인으로 바꾸고 싶었다.
작은 카드였다가 클릭하면 모달창이 열리면서 상세 설명이 나오는.
자연스럽게 전환되었으면 해서 motion 문서를 뒤적거리다 layoutId라는게 있어서 사용해보기로!
아래는 결과물
참고한 문서는 아래 링크
https://motion.dev/docs/react-motion-component#layoutid
Aceternity UI의 이런 느낌으로 만들고 싶었다
https://ui.aceternity.com/components/expandable-card
처음엔 카드가 Y축으로 180도 회전하면서 뒤집히는 느낌으로 만들고 싶어서
initial, animate, exit에 rotateY 값을 넣으면서 실험해봤는데 아무리 해도 안되는것...
그런데 rotate나 rotateX로 해보면 또 기가 막히게 잘 된다.
이거에 대해서 구글링을 아무리 해봐도 관련 글은 나오지 않거나 답변 없는 스택오버플로우 글...
기존에 만들었던 ui의 마크업 순서에 문제가 있나 싶어서 테스트용으로 간단한 ui를 만들어서 처음부터 해봤다.
그랬더니 기가 막히게 잘 됨?!?!?!
커밋 좀 해놓을걸 도대체 뭐때문에 안 됐던 건지 잘 모르겠다.
아마 layoutId를 쓰면서 layout 속성을 안 줘서 그랬나 싶기도 하고...당연하지만 주의할 점이 layoutId는 중복되면 안된다.
코드를 넣어두고 싶은데...벨로그 코드블록이 motion 컴포넌트는 지원이 안 되는지 태그 색이 다 똑같이 나와서 링크로 대체
아이콘은 react-icons를 사용했는데 스킬들의 각 title을 key로 하는 객체를 만들어서 value에 icon 컴포넌트를 넣었다. 그리고나서 <IconContext.Provider>로 감싸주니 의도대로 아주 잘 작동함!
