fix(example): use import type for ActivityComponentType to avoid runtime errors (#603)

Author: umsungjun

docs/pages/docs/advanced/preloading.en.mdx

@@ -55,7 +55,7 @@ export type TypeActivities = typeof activities;
 Afterwards, within each activity, you can retrieve the `preloadRef` value using the `useActivityPreloadRef()` hook.
 
 ```tsx showLineNumbers filename="MyActivity.ts" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { useActivityPreloadRef } from "@stackflow/plugin-preload";
 
 const MyActivity: ActivityComponentType = () => {
@@ -82,7 +82,7 @@ export const { usePreloader } = createPreloader<TypeActivities>();
 ```
 
 ```tsx showLineNumbers filename="MyActivity.ts" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { usePreloader } from "./usePreloader";
 
 const MyActivity:  = () => {

docs/pages/docs/advanced/preloading.ko.mdx

@@ -55,7 +55,7 @@ export type TypeActivities = typeof activities;
 이후 각 액티비티 내에서 `useActivityPreloadRef()` 훅을 통해 해당 `preloadRef` 값을 가져올 수 있어요.
 
 ```tsx showLineNumbers filename="MyActivity.ts" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { useActivityPreloadRef } from "@stackflow/plugin-preload";
 
 const MyActivity: ActivityComponentType = () => {
@@ -82,7 +82,7 @@ export const { usePreloader } = createPreloader<TypeActivities>();
 ```
 
 ```tsx showLineNumbers filename="MyActivity.ts" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { usePreloader } from "./usePreloader";
 
 const MyActivity:  = () => {

docs/pages/docs/get-started/activity.en.mdx

@@ -21,7 +21,7 @@ import { APITable } from "../../../components/APITable";
 To actually use an activity, you need to register it with the `stackflow()` function before using it. An activity is a React component declared with the type `ActivityComponentType`.
 
 ```tsx showLineNumbers filename="MyActivity.tsx" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 
 const MyActivity: ActivityComponentType = () => {
@@ -101,7 +101,7 @@ If you have successfully registered the initial activity, you can see the render
 Some activities require specific parameters when used. In such cases, declare the parameter as the activity's Props.
 
 ```tsx showLineNumbers filename="Article.tsx" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 
 type ArticleParams = {

docs/pages/docs/get-started/activity.ko.mdx

@@ -21,7 +21,7 @@ import { APITable } from "../../../components/APITable";
 액티비티를 실제로 사용하기 위해서는 사용하기 전 `stackflow()` 함수에 등록이 필요해요. 액티비티는 `ActivityComponentType`이라는 타입으로 선언되는 리액트 컴포넌트에요.
 
 ```tsx showLineNumbers filename="MyActivity.tsx" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 
 const MyActivity: ActivityComponentType = () => {
@@ -105,7 +105,7 @@ export const { Stack, useFlow } = stackflow({
 해당 액티비티가 사용될 때, 특정 파라미터가 필요한 경우가 있어요. 이런 경우 다음과 같이 액티비티의 Props로 해당 파라미터를 선언해요.
 
 ```tsx showLineNumbers filename="Article.tsx" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 
 type ArticleParams = {

docs/pages/docs/get-started/getting-state.en.mdx

@@ -18,7 +18,7 @@ The activities accessible through the `activities` field contain information rel
 To access the stack state in a UI component, use the `useStack()` hook.
 
 ```tsx showLineNumbers filename="MyActivity.tsx" copy
-import { ActivityComponentType, useStack } from "@stackflow/react";
+import { useStack, type ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 
@@ -69,7 +69,7 @@ There are the following fields in the stack state.
 You can use the `useActivity()` hook to get information about the current activity.
 
 ```tsx showLineNumbers filename="MyActivity.tsx" copy
-import { ActivityComponentType, useActivity } from "@stackflow/react";
+import { useActivity, type ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 

docs/pages/docs/get-started/getting-state.ko.mdx

@@ -18,7 +18,7 @@ import { APITable } from "../../../components/APITable";
 스택 상태를 UI 컴포넌트에서 가져오려면, `useStack()` 훅을 활용해요.
 
 ```tsx showLineNumbers filename="MyActivity.tsx" copy
-import { ActivityComponentType, useStack } from "@stackflow/react";
+import { useStack, type ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 
@@ -69,7 +69,7 @@ export default MyActivity;
 현재 액티비티의 정보를 가져오기 위해 `useActivity()` 훅을 사용할 수 있어요.
 
 ```tsx showLineNumbers filename="MyActivity.tsx" copy
-import { ActivityComponentType, useActivity } from "@stackflow/react";
+import { useActivity, type ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 

docs/pages/docs/get-started/navigating-activities.en.mdx

@@ -14,7 +14,7 @@ If you have successfully registered an activity, it's time to navigate between a
 We use the `useFlow()` hook created in `stackflow.ts`. Through the `push()` function within this hook, we can stack a new activity as follows.
 
 ```tsx showLineNumbers filename="MyActivity.tsx" copy /push/
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 
@@ -76,7 +76,7 @@ The third parameter of the `push()` function, additional options, includes the f
 Next, let's look at how to replace the current activity without adding a new activity to the stack. Using the `replace()` function from the `useFlow()` hook created in `stackflow.ts`, you can replace the current activity as follows.
 
 ```tsx showLineNumbers filename="MyActivity.tsx" copy /replace/
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 
@@ -134,7 +134,7 @@ The third parameter of the `replace()` function, additional options, includes th
 Finally, let's look at how to delete the current activity and return to the previous activity. Using the `pop()` function from the `useFlow()` hook created in `stackflow.ts`, you can delete the current activity as follows.
 
 ```tsx showLineNumbers filename="Article.tsx" copy /pop/
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 

docs/pages/docs/get-started/navigating-activities.ko.mdx

@@ -14,7 +14,7 @@ import { APITable } from "../../../components/APITable";
 `stackflow.ts`에서 생성했던 `useFlow()` 훅을 사용해요. 해당 훅 내에 `push()` 함수를 통해 다음과 같이 새 액티비티를 쌓을 수 있어요.
 
 ```tsx filename="MyActivity.tsx" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 
@@ -78,7 +78,7 @@ push(
 다음으로 스택에 새로운 액티비티를 추가하지 않고 현재 액티비티를 교체하는 방법에 대해서 살펴봐요. `stackflow.ts`에서 생성했던 `useFlow()` 훅의 `replace()` 함수를 통해 다음과 같이 현재 액티비티를 교체할 수 있어요.
 
 ```tsx filename="MyActivity.tsx" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 
@@ -135,8 +135,9 @@ replace(
 
 마지막으로 현재 액티비티를 삭제하고 이전 액티비티로 돌아가는 방법에 대해서 살펴봐요. `stackflow.ts`에서 생성했던 `useFlow()` 훅의 `pop()` 함수를 통해 다음과 같이 현재 액티비티를 삭제할 수 있어요.
 
+
 ```tsx showLineNumbers filename="Article.tsx" copy /pop/
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 

docs/pages/docs/get-started/navigating-step.en.mdx

@@ -20,7 +20,7 @@ You can use steps when you want to have a virtual stack state within a single ac
 Use the `useStepFlow()` hook created in `stackflow.ts`. Through the `stepPush()` function within this hook, you can stack a new step as follows.
 
 ```tsx showLineNumbers filename="Article.tsx" copy /stepPush/
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useStepFlow } from "./stackflow";
 
@@ -57,7 +57,7 @@ export default Article;
 You can replace the current step using the `stepReplace()` function in `useStepFlow()`.
 
 ```tsx showLineNumbers filename="Article.tsx" copy /stepReplace/
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useStepFlow } from "./stackflow";
 
@@ -93,7 +93,7 @@ export default Article;
 You can delete the current step using the `stepPop()` function in `useStepFlow()`.
 
 ```tsx showLineNumbers filename="Article.tsx" copy /stepPop/
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useStepFlow } from "./stackflow";
 

docs/pages/docs/get-started/navigating-step.ko.mdx

@@ -22,7 +22,7 @@ import { Callout, Link } from "nextra-theme-docs";
 `stackflow.ts`에서 생성할 수 있는 `useStepFlow()` 훅을 사용해요. 해당 훅 내에 `stepPush()` 함수를 통해 다음과 같이 새 스텝을 쌓을 수 있어요.
 
 ```tsx showLineNumbers filename="Article.tsx" copy /stepPush/
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useStepFlow } from "./stackflow";
 
@@ -59,7 +59,7 @@ export default Article;
 `useStepFlow()`의 `stepReplace()` 함수를 활용하면 현재 스텝을 교체할 수 있어요.
 
 ```tsx showLineNumbers filename="Article.tsx" copy /stepReplace/
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useStepFlow } from "./stackflow";
 
@@ -95,7 +95,7 @@ export default Article;
 `useStepFlow()`의 `stepPop()` 함수를 활용하면 현재 스텝을 삭제할 수 있어요.
 
 ```tsx showLineNumbers filename="Article.tsx" copy /stepPop/
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useStepFlow } from "./stackflow";