feat-fe: Modal, Toast, NonModal 계층 정리

[lurgi]

목적

기존 Modal, Toast, NonModal은 계층이 정리되지 않았습니다.
현재 NonModal로 사용되고 있는 컴포넌트로 이메일 모달이 있습니다.

계층을 정리하는 이유는 다음과 같습니다.

1. 처음 구현된 Modal 컴포넌트가 Dialog로 구현되었다.
   • Dialog는 다른 요소를 무시하고 제일 최상단에 렌더링 됩니다.
   • 하지만 위 언급한 세가지 요소중 제일 최상단 계층에 위치해야 하는 요소는 Toast입니다.
2. 예상보다 많은 Modal요소의 사용.
   • 처음 Modal 컴포넌트를 구현할 때, 다른 요소의 구현사항을 고려하지 않은 채 설계되었습니다.
   • 추후에도 Alert와 같은 새로운 모달구조를 구현할 가능성이 있기 때문에, 이를 위한 구조 변경이 불가피하다 생각했습니다.

작업 세부사항

• 기존 Modal컴포넌트의 Dialog를 Div 요소로 변경한다.
• 기존 Modal컴포넌트가 나타났을 경우, 외부 요소와의 상호작용은 불가능하게 만든다.
• Modal, Toast, NonModal의 계층 구조 확립

참고 사항

다양한 모달에 대한 아티클을 공유합니다.

• 이거도 모달, 저거도 모달, 이게 모람
• 모달인데, 모달이 아닙니다.

아래의 별표줄 밑에 요구사항 ID만 작성해주세요. Prefix 금지!

---

FIX_MODAL_HIERARCHY

[github-actions]

🚀 안녕하세요 @lurgi님! 작업을 시작하셨군요?

작업하실 브랜치를 컨벤션에 맞게 현재 이슈 ✨feat-fe: Modal, Toast, NonModal 계층 정리✨에 연결하여 생성헤드렸어요!
생성된 브랜치명:
942-fe-FIX_MODAL_HIERARCHY

해당 브랜치가 연결된 ⚡️Draft PR⚡️ 생성되었으니 확인해보세요

작업이 완료된 후, 리뷰어를 선택하고 Draft PR 내부의 Ready for review 버튼을 눌러주시면 됩니다! :)
제가 Slack으로 리뷰어에게 DM으로 알려드릴게요