리액트 포털(React Portal)을 활용한 버튼 구현하기

💣 개요최근 프로젝트에서 화면 하단에 고정된 버튼을 구현하면서, 버튼의 위치가 동적으로 변경되지 않는 문제를 겪었습니다. 특히, 입력창(input)이 포커스될 때 버튼의 위치가 자동으로 조정되어야 했지만, 예상대로 동작하지 않아 사용자 경험에 문제가 발생했습니다. 1. 고정된 버튼의 위치 문제화면 하단에 고정된 버튼이 position: fixed 속성으로 설정되어 있어, 사용자가 input을 포커스할 때, 버튼이 키보드에 의해 가려지거나 위치가 적절히 변경되지 않아 사용성이 떨어졌습니다.2. 기존 해결 방법의 한계CSS만으로 문제를 해결하려 했으나, 다양한 화면 크기와 상황을 고려했을 때 고정된 bottom 값으로는 모든 상황에 적절히 대응할 수 없었습니다.이 문제를 해결하기 위해 React 포털을 도..
회고 2024. 9. 10. 01:32
1