docs: add gamium pytest tutorial

docs/get-started/tutorials/test-automation/gamium/pytest/mobile.mdx

@@ -18,6 +18,18 @@ import IntegrateWithGitRepository from '@site/src/components/tutorial/routine/In
 import CreateARoutine from '@site/src/components/tutorial/routine/CreateARoutine.mdx';
 import RunARoutine from '@site/src/components/tutorial/routine/RunARoutine.mdx';
 import routine_livestreaming_gamium_pytest from '@site/static/img/routine/routine_livestreaming_gamium_pytest.png';
+import project_create_image from '@site/static/img/get-started/test-automation/project-create-mobile-game.png';
+import project_create_confirm_image from '@site/static/img/get-started/test-automation/project-create-confirm-mobile-game.png';
+import routine_create_image from '@site/static/img/get-started/test-automation/routine-create-mobile-game.png';
+import routine_select_repository_image from '@site/static/img/get-started/test-automation/routine-select-repository-example.png';
+import routine_select_app_image from '@site/static/img/get-started/test-automation/routine-select-app-android.png';
+import routine_select_app_confirm_image from '@site/static/img/get-started/test-automation/routine-select-app-confirm-android-dogurpgsample.png';
+import routine_select_device_image from '@site/static/img/get-started/test-automation/routine-select-device-cloud.png';
+import routine_select_device_confirm_image from '@site/static/img/get-started/test-automation/routine-select-device-confirm-cloud-android.png';
+import routine_select_working_dir_image from '@site/static/img/get-started/test-automation/routine-select-working-dir-gamium-python-pytest.png';
+import routine_select_environment_image from '@site/static/img/get-started/test-automation/routine-select-environment-python.png';
+import routine_write_command_image from '@site/static/img/get-started/test-automation/routine-write-command-gamium-python-pytest.png';
+import routine_update_image from '@site/static/img/get-started/test-automation/routine-update-mobile-game.png';
 
 <IntegrateWithGitRepository />
 
@@ -27,19 +39,23 @@ import routine_livestreaming_gamium_pytest from '@site/static/img/routine/routin
 />
 <AppUploadiOSGamium />
 
-<CreateARoutine />
-
-<div>
-  {RoutineMobileExample({
-    name: 'gamium-pytest',
-    environment: 'python',
-    cwd: 'gamium/python/pytest',
-    androidAppPackageName: 'com.dogutech.DoguRpgSample',
-    androidCommand: 'pytest app/test_dogurpgsample.py --capture=no -x',
-    iosAppPackageName: 'com.dogutech.DoguRpgSample',
-    iosCommand: 'pytest app/test_dogurpgsample.py --capture=no -x',
-  })}
-</div>
+<CreateARoutine 
+  type="Mobile Game"
+  project_create_image={project_create_image}
+  project_create_confirm_image={project_create_confirm_image}
+  routine_create_image={routine_create_image}
+  routine_select_repository_image={routine_select_repository_image}
+  routine_select_app_image={routine_select_app_image}
+  routine_select_app_confirm_image={routine_select_app_confirm_image}
+  routine_select_device_image={routine_select_device_image}
+  routine_select_device_confirm_image={routine_select_device_confirm_image}
+  routine_select_working_dir_image={routine_select_working_dir_image}
+  routine_select_environment_image={routine_select_environment_image}
+  routine_write_command_image={routine_write_command_image}
+  routine_write_command_script={`pip install -r requirements.txt
+pytest app/test_dogurpgsample.py --capture=no -x`}
+  routine_update_image={routine_update_image}
+/>
 
 <RunARoutine />
 <img src={routine_livestreaming_gamium_pytest} style={{ width: 800 }} />

i18n/ko/docusaurus-plugin-content-docs/current/get-started/tutorials/test-automation/gamium/pytest/mobile.mdx

@@ -18,6 +18,18 @@ import IntegrateWithGitRepository from '@site/src/components/tutorial/routine/In
 import CreateARoutine from '@site/src/components/tutorial/routine/CreateARoutineKor.mdx';
 import RunARoutine from '@site/src/components/tutorial/routine/RunARoutineKor.mdx';
 import routine_livestreaming_gamium_pytest from '@site/static/img/routine/routine_livestreaming_gamium_pytest.png';
+import project_create_image from '@site/static/img/get-started/test-automation/project-create-mobile-game.png';
+import project_create_confirm_image from '@site/static/img/get-started/test-automation/project-create-confirm-mobile-game.png';
+import routine_create_image from '@site/static/img/get-started/test-automation/routine-create-mobile-game.png';
+import routine_select_repository_image from '@site/static/img/get-started/test-automation/routine-select-repository-example.png';
+import routine_select_app_image from '@site/static/img/get-started/test-automation/routine-select-app-android.png';
+import routine_select_app_confirm_image from '@site/static/img/get-started/test-automation/routine-select-app-confirm-android-dogurpgsample.png';
+import routine_select_device_image from '@site/static/img/get-started/test-automation/routine-select-device-cloud.png';
+import routine_select_device_confirm_image from '@site/static/img/get-started/test-automation/routine-select-device-confirm-cloud-android.png';
+import routine_select_working_dir_image from '@site/static/img/get-started/test-automation/routine-select-working-dir-gamium-python-pytest.png';
+import routine_select_environment_image from '@site/static/img/get-started/test-automation/routine-select-environment-python.png';
+import routine_write_command_image from '@site/static/img/get-started/test-automation/routine-write-command-gamium-python-pytest.png';
+import routine_update_image from '@site/static/img/get-started/test-automation/routine-update-mobile-game.png';
 
 <IntegrateWithGitRepository />
 
@@ -27,19 +39,23 @@ import routine_livestreaming_gamium_pytest from '@site/static/img/routine/routin
 />
 <AppUploadiOSGamium />
 
-<CreateARoutine />
-
-<div>
-  {RoutineMobileExample({
-    name: 'gamium-pytest',
-    environment: 'python',
-    cwd: 'gamium/python/pytest',
-    androidAppPackageName: 'com.dogutech.DoguRpgSample',
-    androidCommand: 'pytest app/test_dogurpgsample.py --capture=no -x',
-    iosAppPackageName: 'com.dogutech.DoguRpgSample',
-    iosCommand: 'pytest app/test_dogurpgsample.py --capture=no -x',
-  })}
-</div>
+<CreateARoutine 
+  type="모바일 게임"
+  project_create_image={project_create_image}
+  project_create_confirm_image={project_create_confirm_image}
+  routine_create_image={routine_create_image}
+  routine_select_repository_image={routine_select_repository_image}
+  routine_select_app_image={routine_select_app_image}
+  routine_select_app_confirm_image={routine_select_app_confirm_image}
+  routine_select_device_image={routine_select_device_image}
+  routine_select_device_confirm_image={routine_select_device_confirm_image}
+  routine_select_working_dir_image={routine_select_working_dir_image}
+  routine_select_environment_image={routine_select_environment_image}
+  routine_write_command_image={routine_write_command_image}
+  routine_write_command_script={`pip install -r requirements.txt
+pytest app/test_dogurpgsample.py --capture=no -x`}
+  routine_update_image={routine_update_image}
+/>
 
 <RunARoutine />
 <img src={routine_livestreaming_gamium_pytest} style={{ width: 800 }} />

src/components/tutorial/routine/CreateARoutine.mdx

@@ -1,4 +1,77 @@
-## Create a routine
+import CodeBlock from '@theme/CodeBlock';
 
-- To automatically run test scripts when you want, you must create a [routine](/routine/routines).
-- Refer to [Managing Routines](/management/project/routine), enter the routine creation window, and enter the following in the YAML Editor to create it.
+<div>
+    <h2>Create a routine</h2>
+    <ul>
+        <li>Click <b>{props.type}</b> in the left menu to go to the project list.</li>
+        <li>
+            Click <b>Create project</b> to create a project.
+            <img src={props.project_create_image} style={{ width: 500, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            Enter the project name and click <b>Add</b>.
+            <img src={props.project_create_confirm_image} style={{ width: 500, display: 'block' }}/>
+            <br/>
+        </li>
+    </ul>
+    <ul>
+        <li>
+            Click <b>+</b> to create a routine.
+            <img src={props.routine_create_image} style={{ width: 400, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            Select the repository including the test script and click.
+            <img src={props.routine_select_repository_image} style={{ width: 400, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            Click <b>Select app</b> to select the platform for running the test script.
+            <img src={props.routine_select_app_image} style={{ width: 500, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            Select the app to run the test script.
+            <img src={props.routine_select_app_confirm_image} style={{ width: 500, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            Click <b>Cloud devices</b> and click <b>+</b>.
+            <img src={props.routine_select_device_image} style={{ width: 300, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            Select the device to run the test script.
+            <img src={props.routine_select_device_confirm_image} style={{ width: 300, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            Select <b>Working directory</b>.
+            <img src={props.routine_select_working_dir_image} style={{ width: 400, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            Select <b>Environment</b>.
+            <img src={props.routine_select_environment_image} style={{ width: 400, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            Copy this command and paste it into the <b>command</b> block like the image below.
+            <CodeBlock language="shell">{`${props.routine_write_command_script}`}</CodeBlock>
+            <img src={props.routine_write_command_image} style={{ width: 400, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            Click <b>Update</b> to save the routine.
+            <img src={props.routine_update_image} style={{ width: 600, display: 'block' }}/>
+            <br/>
+        </li>
+    </ul>
+</div>
+
+:::tip
+
+Refer to [Managing Routines](/management/project/routine) for more information on managing routines.
+
+:::

src/components/tutorial/routine/CreateARoutineKor.mdx

@@ -1,4 +1,77 @@
-## 루틴 만들기
+import CodeBlock from '@theme/CodeBlock';
 
-- 원하는 시점에 자동으로 테스트 스크립트를 실행하려면 [루틴](/routine/routines)을 생성해야 합니다.
-- [루틴 관리하기](/management/project/routine)를 참고하여 루틴 생성 창에 진입한 후 YAML Editor에 다음과 같이 입력합니다.
+<div>
+    <h2>루틴 생성</h2>
+    <ul>
+        <li>왼쪽 메뉴에서 <b>{props.type}</b>를 클릭하여 프로젝트 목록으로 이동합니다.</li>
+        <li>
+            <b>프로젝트 생성</b>을 클릭하여 프로젝트를 생성합니다.
+            <img src={props.project_create_image} style={{ width: 500, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            프로젝트 이름을 입력하고 <b>생성</b>를 클릭합니다.
+            <img src={props.project_create_confirm_image} style={{ width: 500, display: 'block' }}/>
+            <br/>
+        </li>
+    </ul>
+    <ul>
+        <li>
+            <b>+</b>를 클릭하여 루틴을 생성합니다.
+            <img src={props.routine_create_image} style={{ width: 400, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            테스트 스크립트가 포함된 저장소를 선택하고 클릭합니다.
+            <img src={props.routine_select_repository_image} style={{ width: 400, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            <b>Select app</b>을 클릭하여 테스트 스크립트를 실행할 플랫폼을 선택합니다.
+            <img src={props.routine_select_app_image} style={{ width: 500, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            테스트 스크립트를 실행할 앱을 선택합니다.
+            <img src={props.routine_select_app_confirm_image} style={{ width: 500, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            <b>Cloud devices</b>를 클릭하고 <b>+</b>를 클릭합니다.
+            <img src={props.routine_select_device_image} style={{ width: 300, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            테스트 스크립트를 실행할 디바이스를 선택합니다.
+            <img src={props.routine_select_device_confirm_image} style={{ width: 300, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            <b>작업 디렉토리</b>를 선택합니다.
+            <img src={props.routine_select_working_dir_image} style={{ width: 400, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            <b>환경</b>을 선택합니다.
+            <img src={props.routine_select_environment_image} style={{ width: 400, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            이 명령을 복사하여 아래 이미지와 같이 <b>command</b> 블록에 붙여넣습니다.
+            <CodeBlock language="shell">{`${props.routine_write_command_script}`}</CodeBlock>
+            <img src={props.routine_write_command_image} style={{ width: 400, display: 'block' }}/>
+            <br/>
+        </li>
+        <li>
+            <b>저장</b>을 클릭하여 루틴을 저장합니다.
+            <img src={props.routine_update_image} style={{ width: 600, display: 'block' }}/>
+            <br/>
+        </li>
+    </ul>
+</div>
+
+:::tip
+
+루틴 관리에 대한 자세한 내용은 [루틴 관리](/management/project/routine)를 참조해주세요.
+
+:::