framer-motion exit animation 관련

[sdh20282]

• AnimatePresense exit animation이 app router에서 정상 동작하지 않음
• page router에서는 정상 동작하는 것 확인

[sdh20282]

export function FrozenRouter(props: { children: React.ReactNode }) {
  const context = useContext(LayoutRouterContext ?? {});
  const frozen = useRef(context).current;

  return (
    <LayoutRouterContext.Provider value={frozen}>
      {props.children}
    </LayoutRouterContext.Provider>
  );
}

• FrozenRouter를 통해 router가 component를 변경하는 것을 지연
• 종종 component가 로딩되지 않는 문제 발생

[sdh20282]

export function FrozenRouter(props: { children: React.ReactNode }) {
  const context = useContext(LayoutRouterContext);
  const prevContext = usePreviousValue(context) || null;
 
  const segment = useSelectedLayoutSegment();
  const prevSegment = usePreviousValue(segment);
 
  const changed = segment !== prevSegment && segment !== undefined && prevSegment !== undefined;
 
  return (
    <LayoutRouterContext.Provider value={changed ? prevContext : context}>
      {props.children}
    </LayoutRouterContext.Provider>
  );
}

• 기존 코드에서 위의 코드로 FrozenRouter 변경, 내부 컨텐츠가 로딩되지 않는 문제는 수정되었으나 컨텐츠가 빨리 로딩되는 현상 발생, 현재 수정 중
• 차선책으로 Link를 커스텀하여 사용하는 방법도 검토해보았으나, 뒤로가기와 같이 Link를 통하지 않고 router를 변경하는 경우에는 동작하지 않아서 적용하지 않음

[sdh20282]

현재 page router로 변경 완료, 자잘한 부분 수정 중