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]

@p-acid app dir 이슈가 있어서 close 하겠습니다