[#25] 브라우저 창 크기를 변경할 때 dropdown 및 modal layout 갱신

[cskime]

📝 작업 내용

• 브라우저 창 크기를 변경할 때 dropdown과 modal의 위치 및 크기를 변경된 크기에 맞게 갱신하도록 수정합니다.
• Dropdown은 화면 전체를 덮는 container 안에서 absolute position으로 top, left 값을 설정해서 위치를 결정하기 때문에, 브라우저 창 크기가 변경될 때마다 resize event handler에서 dropdown을 trigger한 요소의 위치를 기준으로 dropdown 위치를 다시 계산합니다.
• Modal은 화면 전체를 덮는 container를 absolute가 아닌 fixed position으로 변경하여, 브라우저 창 크기가 줄어들어 스크롤이 되더라도 항상 브라우저 창 전체를 덮도록 고정합니다.

📷 스크린샷 (선택)

다음 순서로 결과물을 직접 확인해 볼 수 있습니다.

1. 제 repository를 remote로 추가합니다. (https://github.com/cskime/rolling.git)
2. 제 repository의 feature/#25 branch를 checkout 합니다. (local에 같은 이름의 branch 생성)
3. npm run dev 명령어로 프로젝트를 실행합니다.
4. /test-components path로 이동합니다.
5. 가장 오른쪽에 있는 dropdown TextField를 클릭해서 dropdown을 열고 브라우저 창 크기를 바꿔가며 dropdown 위치가 잘 이동하는지 확인합니다.
6. 'Show Modal' 버튼을 클릭해서 modal을 열고 브라우저 창 크기를 바꿔가며 화면 크기가 바뀌거나 scroll 해도 modal이 항상 가운데에 위치하는지 확인합니다.