안녕하세요. 메디스트림의 프론트엔드 개발자 서보현입니다.

3개월의 인턴 기간을 거쳐 얼마 전 프론트 멤버로 합류하게 됐고, 인턴 기간중 실제 서비스에서 사용할 컴포넌트를 오픈소스 패키지화하는 프로젝트를 진행했습니다.

좋은 경험이지만 시간과 노력이 많이 들기 때문에 실제 서비스에서 패키지화를 거치는 방식은 잘 택하지 않을텐데요. 인턴이었기에 감사한 기회가 주어졌습니다. ( 이 자리를 빌어서 또 좋은 프로젝트를 선정해주신데에 감사.. 🙏 )

사내에서 소소한 기술 세미나를 시작하며 개발 과정 중 가치있는 경험을 정리해 공유해보자는 기획 아래 이번 글을 작성했습니다.

Modal 컴포넌트 구현

전체 글은 패키지화에 초점을 맞췄지만, 구현할 컴포넌트에 관해서도 간략히 설명을 하고 넘어가겠습니다.

패키지화할 컴포넌트는 Modal 컴포넌트인데 일반적인 Modal의 구현 방식과는 차이점을 가져가기로 했습니다.

App, Viewport, Modal을 옆에서 본다고 가정해보자

< 일반적인 Modal 방식 >

위처럼 App, Viewport, Modal이 존재하고 옆에서 본 모습이라고 했을 때 일반적으로 Modal은 아래와 같이 Viewport에 상대적인 위치에 존재하게 됩니다.

App을 스크롤한다고 가정하면 Modal은 Viewport의 상대적 위치에 그대로 고정돼있을겁니다.

그런데 만약 Modal 내부의 컨텐츠가 많으면 어떻게 할까요?

그럴 때는 Modal을 Viewport과 같거나 작도록 만들고 Modal 내부에 스크롤을 가능하게 해서 해결합니다.