[AUD-82] AppPortal 유틸 공용 컴포넌트 제작

[RookieAND]

📃 변경사항

• 페이지 상단에 뜨는 Toast, SnackBar, Modal 과 같은 컴포넌트를 렌더링하는 별도의 Poral 을 제공하는 AppPortal 컴포넌트를 제작했습니다.
• 라우트 별 페이지 상단에 별도의 Element 를 생성하고, 이후 createPortal 을 사용하여 Wrapper 내부 children 컴포넌트를 렌더링 하도록 합니다.
• Provider, Wrapper 로 구현부를 분리하고 Wrapper 를 사용하여 Portal 내부에 렌더링할 요소를 children 으로 넣도록 설계했습니다.

🫨 고민한 부분 (optional)

• 하나의 Portal 에 여러 컴포넌트를 사용하도록 유도했으나 여러 개의 Portal 이 굳이 필요할까 싶었습니다.
• 하지만 Portal 내부에서 Index 를 별도로 제어하면 괜찮다고 판단하여 이러한 결정을 내리게 되었습니다. (관리 포인트 축소도 되고요)

💫 기타사항 (optional)

• AppPortal 사용 방식은 아래와 같습니다.

const Modal = () => (
    <AppPortal.Wrapper>
        <Modal.Wrapper>
                <p> 테스트 모달 </p>
        </Modal.Wrapper>
    </AppPortal.Wrapper>
)

[KimGaeun0806]

좋습니다!
Portal 사용으로 토스트와 스낵바 사용 시 전체 리렌더를 막을 수 있겠네요