문제 상황

화면 기록 2024-07-15 오전 3.53.03.mov

다음과 같이 SideBar를 열고 닫을 때 animation을 적용하였는데 영역 바깥쪽에서 등장하고 닫히는 문제가 발생하였습니다.

문제 원인

overflow-hidden 속성 미적용

해결 방안

{isSidebarOpen && (
					<div className="absolute inset-0 z-10 bg-dim">
						<div className="absolute inset-y-0 right-0 flex justify-end overflow-hidden">
							<TimerSideBar toggleSidebar={toggleSidebar} />
						</div>
					</div>
				)}

overflow-hidden 속성을 적용해주지 않아서 발생하는 문제였음.

적용해주니 원하는대로 부모영역 제일 오른쪽부터 SideBar가 열리고 닫히도록 해결 완료.