찍찍이 #애니메이션 (Framer-motion)

로그인/회원가입 페이지의 구현이 끝난 뒤
팀원의 button/input 공통 컴포넌트 작업이 끝나
이를 적용시키기 위해 이전에 만들었던 할일 모달을 리팩토링하기로 하였습니다.

기능 쪽에서나 디자인 쪽에서 더 개선점이 있는 것 같아보였습니다.

또한 추가적으로 애니메이션 기능까지 넣어 사용자 경험을 개선시키면 좋겠다는 피드백을 받았습니다.

할일 모달 리팩토링 PR

내용

부수적인 파일 구조 변경, 세부적 디자인 변경, 공통 컴포넌트 적용

파일 업로드 로직 초안 작성 (백엔드 연동시 수정)

• useRef를 이용 하여 input(File) onClick 연결
• 우선 파일의 이름만 가져오도록 수정

아이콘 조건 렌더링 컴포넌트로 분리

• 파일 이름이 있는 경우 문서 아이콘 렌더링 부분
• 클릭 시 드랍다운 아이콘 렌더링 부분

할 일 모달, 할 일 목표, Dropdown 컴포넌트, 파일 업로드, 링크 추가 div 애니메이션 적용

• react/motion(framer motion)을 이용하여 드롭다운, 업로드/링크, 모달 창 부분을 애니메이션을 적용
• 애니메이션의 필요한 variants값들을 유틸함수로 분리

---

 <motion.div
      className="flex h-184 w-full shrink-0 items-center justify-center rounded-12 bg-white"
      variants={todoModalVariants}
      initial="hidden"
      animate="visible"

  ...

---

export const dropdownVariants = {
  open: {
    opacity: 1,
    scaleY: 1,
    transition: { duration: 0.3, ease: 'easeOut' },
  },
  closed: {
    opacity: 0,
    scaleY: 0,
    transition: { duration: 0.3, ease: 'easeIn' },
  },
};
export const todoModalVariants = {
  hidden: { opacity: 0, scale: 0.8 },
  visible: { opacity: 1, scale: 1, transition: { duration: 0.3 } },
};