기업과제 8번

원티드 X 코드스테이츠 프리온보딩 프론트엔드 과정 기업과제 8번

담당했던 부분 : Feedback Modal

✨ 주요 기능

• 충청북도 휴양림 중 마음에 드는 곳에 메모를 남겨 저장하는 서비스
• 휴양림 데이터는 10개씩 무한 스크롤로 조회됩니다.
• 유저는 휴양림의 이름, 주소, 메모를 활용해 검색할 수 있습니다.
• 유저는 휴양림을 저장할 때 메모를 반드시 작성해야 합니다.
• 유저는 저장된 정보 중 하나를 선택해 삭제 또는 수정할 수 있습니다.

이번 프로젝트를 하면서는 오전에 유어클래스를 보면서 학습했던 CSS animation과 @keyframe을 바로 기업과제에 활용해 볼 수 있는 기회가 되었다.

맨 처음에는 이런 식으로 나타나게 코드를 짰었다.

나타났다 사라지게 만들기 위해 키프레임을 opacity로 조절했다.

transform은 tranlate3d 및 translateZ를 사용하면 GPU 가속을 사용해서 더욱 부드럽게 보인다고 하길래 사용해 보았다.

참고링크
[CSS][Animation] transform: translate3d - GPU를 이용한 부드러운 움직임 구현

const SavedToast = styled.div`
  animation-name: fade;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;

  @keyframes fade {
    0% {
      opacity: 0;
      transform: translate3d(0%, 0, 0);
    }
    50% {
      opacity: 1;
      transform: translateZ(0);
    }
    100% {
      opacity: 0;
    }
  }
`

저렇게 작성했던 이유는 원래는 옆에서 밀려왔다가 사라지는 식으로 만들고 싶었는데 미처 찾지 못해서였다.

그러던 중 팀원 분이 같이 해보자고 하셔서 원래 의도했던 바 대로 아래와 같이 구현해 낼 수 있었다.

const Toast = styled.div`
  animation-name: fade;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  transform: translateX(100%);
  @keyframes fade {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
      transform: translateX(0);
    }
    100% {
      opacity: 0;
      transform: translateX(0);
    }
  }
  &.warning {
    background-color: ${({ theme }) => theme.colors.warning};
  }
`

가장 중요했던 부분은 이 컴포넌트가 얹혀지는 부모 컴포넌트의 옵션이 overflow: hidden; 으로 되어있어야 서서히 밀려나오는 효과가 적용된다는 것이었다.

맨 처음에 내가 혼자 만들 때는 재사용성까지는 생각하지 않고 똑같은 모달을 여러개 만드는 식으로 작성했었는데,
어차피 똑같은 형식에 사용자의 행위에 따라 각기 다른 메세지와 다른 배경색만 보여주면 돼서 text와 className을 추가하는 형식으로 작성하였다.

const FeedbackModal = ({ text, className, timeOutFunc }) => {
  setTimeout(timeOutFunc, 2000)

  return (
    <>
      <Toast className={className}>{text}</Toast>
    </>
  )
}

export default FeedbackModal

그리고 혼자서 할 때는 내가 만든 모달의 위치를 display: relative 로 만들었었는데 Feedback Modal.js가 들어가는 그 위의 상위 컴포넌트에 display: relative 를 주고 Feedback Modal.js에 display: absolute 를 주니까 상위 컴포넌트를 벗어나지 않고 위치를 absolute로 지정할 수 있다는 것도 배웠다.