[Feat/#219] 회의 생성 후 바텀 시트 모달

[simeunseo]

✨ #219 ✨

todo

• 바텀시트 모달 디자인
• 첫 렌더링시 아래에서 올라오는 애니메이션
• 링크 복사 기능
• 링크 복사 또는 나중에 공유하기 버튼 누른 후 내려가는 애니메이션

📌 내가 알게 된 부분

• 모달에 애니메이션을 부여하기 위해서 transition을 사용해야하는데, 이 transition이 안먹어서 진짜 애를 썼어요...
  우선 제가 처음에 모달 부분을 다음과 같이 구조를 짰는데요. 참고로 ModalOverlay는 모달 뒤에 깔리는 불투명한 검정색 배경입니다.

  <ModalOverlay>
    <BottomSheetModal>
    </BottomSheetModal>
  </ModalOverlay>

  이렇게 ModalOverlay로 모달을 감싸놓고, useState로 isModalOpen state를 만들어서 state가 바뀔 때마다 ModalOverlay는 position:display와 none을 왔다갔다하고(모달이 없어지면 오버레이도 없어져야하니), BottomSheetModal은 position:fixed; 상태에서 bottom 값을 바꿈으로써 아래에서 위로 올라오도록 위치를 변경했어요. 그 상태에서 transition을 적용하면 아래에서 위로 올라오는 애니메이션이 적용되어야하는데 아무리해도 적용이 안되는겁니다!! ㅠㅠ
• 그래서 처음에는, useState가 변경되는 것과 style이 변경되는 것에 무언가 시간차를 주어야 한다고 생각했어요. 왜냐면 바닐라 자스로 할 때는 실제로 돔 잡아서 style 조작할 때 setTimeout을 주어야 transition 되는 것이 눈에 보이거든요... 그래서 setTimeout도 써보고, 모달 위치 저장하는 state하나를 더 만들어서 useEffect로 조작해보고, useTransition도 써보고 별별 난리를 쳤는데 아무리해도 안되는 것이었죠.
• 내내 이상했던 점은, 개발자도구 상에서 BottomSheetModal의 위치를 변경해보면 transition이 제대로 적용되어 스윽스윽하고 움직인다는 점이었습니다. transition이 적용이 안된 상황은 아니었던거죠.
• 그래서 문제원인을 밖에서 찾아보니 아뿔싸! isModalOpen state값에 따라서 ModalOverlay 컴포넌트의 position을 display<->none 으로 토글하고 있었던 것 때문이었습니다! ModalOverlay는 BottomSheetModal의 부모요소인데, ModalOverlay가 display<->none으로 깜빡거리면, 즉 요소가 돔에서 아예 없어졌다 나타났다 하면 그에 따라 자식요소인 BottomSheetModal도 isModalOpen 값에 따라 없어졌다 나타났다 할 것이고, 그래서 transition이 보일 새도 없이 그저 돔에서 제거될뿐이었던 겁니다...
• 따라서 다음과 같이 구조를 바꿨습니다. 그러면 더이상 ModalOverlay가 있었다 없었다해도 BottomSheetModal이 이에 영향받지 않고 애니메이션을 보여줄 수 있습니다.

  <BottomSheetModal>
  </BottomSheetModal>
  <ModalOverlay>
  </ModalOverlay>

📌 공유하고 싶은 부분

• 모달.. 여러번 만들어도 왜 자꾸 헷갈리는걸까요? 이번 기회로 모달을 제작하는 저만의 방법론(?)을 정립할 수 있었습니다.

  1. 모달 컨텐츠와 모달 오버레이를 형제 요소로 둔다.
  2. 모달 컨텐츠와 모달 오버레이 모두 position:fixed;로 한다.
  3. 모달 오버레이는 width 100% height 100%로 하고 배경색 채우면 끝이다.
  4. 모달 컨텐츠는 top right left bottom 값을 활용하여 위치값을 조정한다.
  5. 이렇게하면 모달 오버레이가 모달 컨텐츠보다 위에있게 된다. 따라서 모달 컨텐츠에 z-index값을 추가하여 위로 올라오도록 한다.

• css transition 속성에 대해 고민해본 적 있나요? transition은 어떠한 css 속성이 변화할 때, 이것이 일정 시간(duration)에 걸쳐 일어나도록 하는 것인데요. 예를들어 hover시에 글자 색상이 바뀌게 했는데 여기에 transition:color 1s; 을 적용하면 글자 색상의 변화가 1s라는 시간에 걸쳐서 서서히 발생하게 하는 것이죠. 그렇다면 animatable css property에 대해 생각해본 적이 있나요? 즉, transition이 어떤 속성에나 먹히진 않는다는 거예요. '서서히 바뀔 수 있는' 속성에만 적용할 수 있죠. 예를들어, display 속성에는 transition을 적용할 수 없습니다. display:none 과 flex를 서서히 변화시킬 수는 없는거예요.

📌 질문할 부분

• 현재 코드에서, isModalOpen 상태값이 false로 초기화되어있다가 useEffect를 통해서 첫 렌더링시에 이를 true로 바꿈으로서, 이 페이지에 처음 접속했을 때 모달이 아래에서 위로 올라오는 애니메이션이 적용되도록 구현했어요. 그런데 모달 뒤에 오버레이의 유무 또한 isModalOpen값에 의존하다 보니, 이 페이지에 딱 처음 접속했을 때 아주 잠깐동안 overlay가 없다가 모달이 올라오면서 overlay가 생기거든요. 즉 첫 렌더링이 되면서 overlay가 생기는데, 약간의 딜레이가 있어서 살짝 깜빡거리는 느낌이 나는거예요. 아 이거 참 말로 설명하기 어렵네요. 영상으로 보면 이해가 되실까요?

2023-11-07.10.19.49.mov

보이나요!! 딱 처음 페이지 들어갔을때 오버레이가 살짝 깜빡이는거 보이나요!! ㅠㅠ 이거 너무 거슬리는데 어떻게 해결하면 좋을지 고민이네요...

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
asap	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 23, 2024 8:31am