[Feature]: `navigation.navigate` 대신 `navigation.push`를 사용

[fe-dudu]

Package Scope

@use-funnel/react-navigation-native

Description

현재 @useFunnel/react-navigation-native 내부 구현에서 다음 step으로 이동할 때 navigation.navigate(...)를 사용하고 있습니다.

하지만 이 방식은 같은 route name이 이미 스택에 존재할 경우 새로 화면을 쌓지 않고 기존 화면으로 이동만 하게 되어 iOS swipe back이나 Android back button을 사용할 때 이전 스텝으로 돌아가지 않는 문제가 발생합니다.

Possible Solution

navigation.navigate 대신 navigation.push를 사용하면 항상 새로운 화면을 스택에 쌓게 되어 뒤로가기 시 이전 스텝으로 올바르게 돌아갈 수 있습니다.

use-funnel/packages/react-navigation-native/src/index.ts

Line 146 in 42926b1

navigation.navigate({

위 링크 위치에서 아래와 같이 변경합니다.

- navigation.navigate({
-   ...route,
-   key: `${navigationParamName}::${id}::${currentIndex + 1}`,
-   params: {
-     ...route.params,
-     [navigationParamName]: createTransitionParam(funnelState)
-   }
+ navigation.push(route.name, {
+   ...route.params,
+   [navigationParamName]: createTransitionParam(funnelState)
  });

patch package로 테스트해본 결과 iOS swipe back, Android back button 모두 정상적으로 이전 스텝으로 되돌아가는 것을 확인했습니다. 이전에는 동작하지 않던 스택 기반의 히스토리가 의도한 대로 쌓이면서 훨씬 자연스러운 UX를 제공할 수 있습니다.

한 가지 고려할 점은 push를 사용하면 스크린이 전환될 때 슬라이드 전환 애니메이션이 나타나서 스텝 전환이 페이지 이동으로 느껴지므로 라이브러리를 사용할 때 아래와 같이 화면 전환 animation 설정 변경이 필요할 수도 있습니다.

import { Stack } from 'expo-router';

export default function Layout() {
  return (
    <Stack screenOptions={{ animation: 'none' }}>
      <Stack.Screen name="step" />
    </Stack>
  );
}

navigation.navigate 대신 navigation.push를 사용하는 것에 대해 의견 부탁드립니다 !

etc.

테스트 코드와 함께 해당 내용을 기여해보고 싶습니다.