MyPage Side NavBar TroubleShooting

[eafiseemn]

Sidebar Navigation Open / Close Animation

대상 스택: Next.js(App Router) + TailwindCSS v4.1.13

Context: 언제/어디서/어떤 상황에서 문제 발생?

• 대상 페이지/컴포넌트 : MyPage Sidebar Navigation Component
• 기대 동작 : Toggle Button 에 의해 Sidebar Menu 펼치기 ↔︎ 접기 부드러운 transition
• 현재 상태 : Sidebar를 펼칠 때 레이아웃이 약간 튀는 현상이 나타남

Hypotheses: 근본 원인 가설

1. 너비 transition이 완료되기도 전에 넓은 공간에 들어가야 하는 큰 요소들이 먼저 빠르게 렌더링 되면서 발생

Experiments: 시도한 방법

1. Opacity transition을 준다

• 방식 : (collapsed ? 'opacity-0' : 'opacity-100', 'transition-opacity duration-300 ease-out')
• 결과 : 실패
• 원인 : nav 구조가 {collapsed ? ( <좁은 메뉴> ) : ( <넓은 메뉴> ) 이런 조건부 렌더링 형태라,
  조건이 바뀌는 순간 요소가 DOM에 추가되고, Tailwind 클래스가 요소 생성과 거의 동시에 적용되기 때문에
  collapsed 상태에 따라 최종 클래스(opacity-100)가 즉시 적용되어 transition이 보이지 않음

(WIP : 추가적인 시도 업데이트 예정...)

Decision: 최종 해결책(대안 비교 포함)