UI 화면 간 이동/전환
서로 다른 UI 화면 간에 이동하려면 라우팅 시스템을 사용해야 합니다. 라우팅 시스템을 사용하면 서로 다른 화면에 대한 route(또는 경로)를 정의하고, 화면 간 이동을 관리할 수 있습니다.
TanStack Router
TanStack Router의 가장 큰 장점은 createFileRoute를 사용하여 route 처리를 자동으로 생성할 수 있다는 점입니다. createFileRoute를 사용하면 특정 폴더 구조 안에 파일을 생성하는 것만으로 간단하게 route를 정의할 수 있습니다. 예를 들어 src/routes 폴더에 about.tsx 파일을 생성하면, TanStack Router는 about.tsx에 정의된 컴포넌트를 렌더링하는 /about route를 자동으로 생성합니다.
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/about")({
component: About,
});
function About() {
return (
<main className="page-wrap px-4 py-12">
<section className="island-shell rounded-2xl p-6 sm:p-8">
<p className="island-kicker mb-2">About</p>
<h1 className="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
A small starter with room to grow.
</h1>
<p className="m-0 max-w-3xl text-base leading-8 text-[var(--sea-ink-soft)]">
TanStack Start gives you type-safe routing, server functions, and modern SSR defaults. Use this as a
clean foundation, then layer in your own routes, styling, and add-ons.
</p>
</section>
</main>
);
}화면/route 간 이동 방법
화면/route 간에 이동하려면 라우팅 시스템에서 제공하는 탐색 함수를 사용하세요.
템플릿
모든 템플릿에서 StepLabelProps 인터페이스는 이미 navigate 함수를 포함하도록 확장되어 있습니다. pixi-vn.d.ts 파일에서 확인할 수 있습니다.
테스트
AI 에이전트가 게임을 플레이 테스트하게 하기 위해 Vite.js 플러그인의 Game.testing(위의 "Vite.js 플러그인" 섹션과 pixi-vn-testing
Agent Skill 참고)을 사용하는 경우, 여기에서도
Game.testing.setProps
를 호출하여 navigate(및 이 훅이 반환하는 다른 항목들)가 테스트 세션에서 계속 사용 가능하도록 하세요:
import { Game, StepLabelProps } from "@drincs/pixi-vn";
import useMyNavigate from "./useMyNavigate";
export default function useGameProps(): StepLabelProps {
const navigate = useMyNavigate();
const props = {
navigate,
};
Game.testing.setProps(props);
return props;
}ink
모든 ink 템플릿에는 route 간 이동을 위한 사용자 지정 해시태그 명령어가 도입되었습니다. To do this, you need to use the following syntax:
# navigate [route]route: 목적지 route/경로입니다. 예를 들어# navigate /new-route와 같습니다.
새로운 내러티브 노드를 생성할 때, navigate 함수를 사용하여 route 간에 전환할 수 있습니다:
export const startLabel = newLabel("start", [
({ navigate }) => {
navigate("/new-route");
},
]);