Change BaseModal animation to scale-based animation

[Dogdriip]

Self Checklist

• I wrote a PR title in English.
• I added an appropriate label to the PR.
• I wrote a commit message in English.
• I wrote a commit message according to the Conventional Commits specification.
• I added the appropriate changeset for the changes.
• [ ] [Component] I wrote a unit test about the implementation.
• [ ] [Component] I wrote a storybook document about the implementation.
• [ ] [Component] I tested the implementation in various browsers.
  • Windows: Chrome, Edge, (Optional) Firefox
  • macOS: Chrome, Edge, Safari, (Optional) Firefox
• [ ] [New Component] I added my username to the correct directory in the CODEOWNERS file.

Related Issue

None.

Summary

• 기존 모달(BaseModal)에 사용되는 appear 애니메이션을 애플리케이션의 사용성을 저해하지 않는 수준으로 개선합니다.

Details

As-is

• 기존 모달의 애니메이션 keyframe은 다음과 같습니다.

  const translateAnimation = keyframes`
    from {
      transform: translate(0, -122px);
    }
  
    to {
      transform: translate(0, 0);
    }
  `

• 위에서 내려오는 애니메이션이 다음과 같은 이유로 모달에 적합하지 않다고 생각하였습니다:
  • 컴포넌트 자체가 크게 이동하기 때문에 반복되는 모달 appear - disappear는 유저로 하여금 annoying하게 느껴질 수 있다고 생각했습니다.
  • 전체 화면 dimming과 함께 화면 중앙에 나타나는 컴포넌트이므로, 위에서 내려오는 식으로 컴포넌트를 크게 이동시킬 필요가 없습니다. 주변 dimming이 있으므로 충분히 해당 컴포넌트는 강조된다고 생각하고, 여기서 애니메이션은 컴포넌트가 중앙에 나타날 때 부드러운 인상을 주는 정도만 되어도 충분하다고 생각했습니다.
  • 이 코드에 한정된 이야기지만, -122px라는 수치 또한 모호한 면이 있습니다. 세로로 긴 화면에서는 화면 상단에 갑자기 모달이 나타나서 내려오는 모습이 되고, -100%와 같이 percentage 값으로 개선하여도 화면 크기에 따라 애니메이션이 너무 빠르거나 너무 느리게 느껴질 수 있습니다.

To-be

• 컴포넌트의 y축 이동을 없애고, opacity 변화와 미세한 scale 조정 (95% → 100%)을 적용해 보았습니다.

  const translateAnimation = keyframes`
    from {
      opacity: 0;
      transform: scale(0.95);
    }
  
    to {
      opacity: 1;
      transform: scale(1);
    }
  `

• duration은 기존과 똑같이 300ms(TransitionDuration.M)이며, timing function 또한 Bezier에서 기존에 사용하던 cubic-bezier(.3,0,0,1)을 그대로 사용하였습니다.

Kapture.2022-11-15.at.10.45.48.mp4

Breaking change or not (Yes/No)

No.

References

• Radix UI - Dialog
• Headless UI - Dialog

[changeset-bot]

🦋 Changeset detected

Latest commit: c86eb7d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@channel.io/bezier-react	Patch
bezier-figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[codecov]

Codecov Report

Base: 71.15% // Head: 71.15% // No change to project coverage 👍

Coverage data is based on head (c86eb7d) compared to base (2c60c8c).
Patch has no changes to coverable lines.

Additional details and impacted files

@@           Coverage Diff            @@
##           next-v1    #1026   +/-   ##
========================================
  Coverage    71.15%   71.15%           
========================================
  Files          208      208           
  Lines         2961     2961           
  Branches       821      821           
========================================
  Hits          2107     2107           
  Misses         736      736           
  Partials       118      118           

Impacted Files	Coverage Δ
...rc/components/Modals/BaseModal/BaseModal.styled.ts	100.00% <ø> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.