Granite 자동 router gen이 안되는 거 같습니다

개발
1

이 글의 성격은 무엇인가요?

질문 / 문제 해결

내용을 설명해주세요

npm run dev 로 실행하여서 샌드박스앱을 실행시키는 것은 되는데 nextjs 파일 기반 라우팅처럼 [dong].tsx 같이 생성했을때 router.gen.ts가 오토 제네레이션 되지 않고 있습니다. 아래와 같은 게 원인이라고 하는데요. 그래서 수동으로 gen해서 페이지가 잘 보이는 건 확인했는데 이 상황 문제가 맞나요?

Granite 동적 라우트 버그 정리

문제 원인

@granite-jsgranite-js/plugin-router와 @granite-js/react-native 간의 불일치
구분: plugin-router (빌드타임)
처리 방식: [param] 그대로 유지
결과: /result/[dongCode]
────────────────────────────────────────
구분: react-native (런타임)
처리 방식: [param] → :param 변환
결과: /result/:dongCode
빌드타임에 생성되는 router.gen.ts의 타입 정의와 런타임 라우트 이름이 달라서 네비게이션 실패.

해결책 (동적 라우트 추가 시)

  1. 파일 생성

pages/
└── result/
└── [dongCode].tsx ← 파일명은 [param] 형식

  1. createRoute는 :param 형식 사용

// pages/result/[dongCode].tsx (또는 src/pages/result/[dongCode].tsx)
export const Route = createRoute(‘/result/:dongCode’ as any, {
component: ResultScreen,
});

  1. router.gen.ts 수동 수정 (plugin-router 버그)

// :cross_mark: 자동 생성된 것 (버그)
‘/result/[dongCode]’: (typeof _ResultDongCodeRoute)[‘_inputType’];

// :white_check_mark: 수동 수정 필요
‘/result/:dongCode’: (typeof _ResultDongCodeRoute)[‘_inputType’];

  1. navigate도 :param 형식

navigation.navigate(‘/result/:dongCode’, {
dongCode: ‘1168051000’,
destName: ‘강남’,
});

요약 공식
┌────────────────────┬──────────────────────────────┐
│ 항목 │ 형식 │
├────────────────────┼──────────────────────────────┤
│ 파일명 │ [param].tsx (Next.js 스타일) │
├────────────────────┼──────────────────────────────┤
│ createRoute 경로 │ :param (React Navigation 스타일) │
├────────────────────┼──────────────────────────────┤
│ router.gen.ts 타입 │ :param (수동 수정) │
├────────────────────┼──────────────────────────────┤
│ navigate 호출 │ :param │
└────────────────────┴──────────────────────────────┘