문제 상황

• 와이어프레임 요구사항
  • 모든 페이지: 공통된 Nav, SideBar, Footer 배치
  • main 영역: 페이지별 변경
• 필요한 Route 구조
  • 3중 중첩: 레이아웃 - 기능 - 개별 페이지

해결 시도

• 레이아웃 컴포넌트 생성 및 Outlet 사용
  • 문제: 레이아웃뿐만 아니라 기능 페이지 내용까지 상속
• 3중 Route 중첩 시도
  • 결과: 레이아웃 컴포넌트와 일반 페이지 3중 중첩 불가 (오류 메시지 확인)

결과

• 참고 자료

velog

해결 방안

1. 최상단: 공통 메인 레이아웃 Route 배치

   

2. 기능별: 페이지 최상단에 ContentLayout Route 배치

   

   • 목적: 레이아웃 통일성 부여

3. Outlet 사용

   • 적용 대상: 레이아웃 컴포넌트만
   • 효과: 레이아웃 컴포넌트 기준 페이지 변환