style(page): page transition 추가

[FRONT-JB]

🛠️ 작업 내용 (Content)

작업 범위에 대해 간략하게 작성합니다.

• style(page): page transition 추가

📝 상세 설명

리뷰어가 중점적으로 봐야 하는 부분을 바로 알 수 있도록 변경된 내용을 나열합니다.

• Framer를 이용해 페이지 전환시 애니메이션 효과를 추가했습니다.
• 페이지가 되는 엔트리 파일에는 <PageContainer></PageContainer>를 사용하면 됩니다.
  • 예외 케이스로 layout이 분리되어 다른 엘리먼트가 있는 경우 ^auth/layout 에는 해당 layout 영역에 감아주어야 합니다.

⚙️ 기타 사항

PR에 대한 추가 설명이나 작업하면서 고민이 되었던 부분 등

• 페이지가 전환될때 out이 실행되고 다시 in 효과가 진행되는 코드를 적용 했었는데 이미 페이지가 전환되고나서 out > in 순으로 애니메이션이 진행되어 in 효과만 사용했습니다.
  • AppDir 라우팅 방식에 영향이 있는지 pages/_app.tsx 에서는 잘 작동하는 기능입니다.

🚨 Merge 전 필요 작업 (Checklist before merge)

• [x] 컨벤션에 맞는 코드를 작성했나요?
• [x] 로컬 빌드시 에러가 발생하지 않았나요?

[FRONT-JB]

확인했습니다! 몇 가지 질문 사항이 있어 전달드립니다.

• PageContainer 를 RootLayout 이 아닌 각 페이지에 할당해줘야 저렇게 정상적으로 동작하는 것이라고 이해하면 될까요?

페이지 엔트리 파일에서 PageContainer를 시작으로 코드를 작성하면 됩니다! 서버 컴포넌트 상태의 레이아웃에서는 framer-motion이 동작하지 않는걸로 확인되어서 각 페이지 단위에서 감싸줘야 동작하는걸로 확인했습니다

[p-acid]

그럼 해당 페이지가 클라이언트 사이드 렌더링이 아니라면 framer-motion 이 동작하지 않는 것으로 이해해도 괜찮을까요?

[FRONT-JB]

그럼 해당 페이지가 클라이언트 사이드 렌더링이 아니라면 framer-motion 이 동작하지 않는 것으로 이해해도 괜찮을까요?

보류로 Close 하겠습니다