728x90 MUI2 [React] Material-UI Popover 위치 보정과 애니메이션 적용 시행착오 기록 이번 글에서는 Material-UI의 Popover 컴포넌트 사용 중 겪었던 시행착오와, 위치 보정 및 자연스러운 애니메이션을 적용하기까지의 해결 과정을 기록합니다.1. 문제 상황처음에는 Material-UI의 Popover를 사용하여 특정 버튼을 클릭하면 팝업이 열리도록 구현하였습니다. 하지만 팝업 내부의 내용이 확장될 때 다음과 같은 문제가 발생했습니다.내용이 확장되면 Popover가 화면 밖으로 벗어나는 현상Popover 위치가 자동으로 보정되지 않아 부자연스러운 UI위치 보정이 되어도 움직임이 너무 딱딱해서 UX가 나쁨2. 처음 시도한 방법 (실패)처음에는 Popover를 Popper로 변경하여 popperRef를 사용해 위치를 직접 업데이트하려고 했습니다. {/* 내용 */} 문제점:기존.. 2025. 3. 14. [React] Drawer와 Tab, Accordian - Console 콘솔에러 제거하기 [React] https://hhahee.tistory.com/174 Drawer와 Tab, Accordian으로 FAQ 구현하기2025년 02월 03일Mui의 Accordion 컴포넌트 사용Help Container에서 해당하는 버튼을 선택하면 Drawer가 나오도록 설정Drawer안에는 Tabs를 4가지로 구성각 Tab안에는 Questions의 리스트가 나오도록 하였음questionhhahee.tistory.com위 포스팅에서 초래된 콘솔 에러 해결해보기 모두 정상동작하지만 콘솔의 에러 (경고) 코드를 제거하고 싶었다. 1. FaqsTabs.tsx:84 Warning: Each child in a list should have a unique "key" prop.위의 에러에 나온 84번째 줄은 컴포.. 2025. 2. 4. 이전 1 다음 728x90
