diff --git a/src/app/(auth)/emulator-guide/page.tsx b/src/app/(auth)/emulator-guide/page.tsx
new file mode 100644
index 0000000..1071c8a
--- /dev/null
+++ b/src/app/(auth)/emulator-guide/page.tsx
@@ -0,0 +1,168 @@
+'use client';
+
+import { useTheme } from "@/contexts/ThemeContext";
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+export default function EmulatorGuidePage() {
+ const { currentTheme } = useTheme();
+ const router = useRouter();
+
+ return (
+
+
+
+
+
+ 자동차 관제 에뮬레이터 가이드
+
+
+
+
+ {/* 개요 섹션 */}
+
+ 개요
+
+ 이 에뮬레이터는 실제 차량에 장착하는 관제 장치의 기능을 웹 애플리케이션으로 구현한 소프트웨어입니다.
+ 개발 및 테스트 환경에서 실제 장비 없이도 자동차의 위치와 상태를 효과적으로 시뮬레이션하고 검증할 수 있도록 설계되었습니다.
+
+
+
+ {/* 주요 특징 섹션 */}
+
+ 주요 특징
+
+
+
웹 기반 애플리케이션
+
별도의 설치 없이 웹 브라우저에서 바로 사용할 수 있습니다.
+
+
+
반응형 인터페이스
+
데스크탑, 태블릿, 모바일 등 다양한 기기에서 최적화된 화면을 제공합니다.
+
+
+
다크모드 지원
+
사용자의 환경 및 취향에 맞춰 라이트/다크 테마를 자유롭게 전환할 수 있습니다.
+
+
+
+ {/* 제공 모드 섹션 */}
+
+ 제공 모드
+
+ {/* 시뮬레이션 모드 */}
+
+
시뮬레이션 모드
+
+
+
기능 개요
+
+ 미리 제공된 GPX 파일(실제 한국 도로 기반 경로 데이터)을 활용하여 차량의 움직임을 시뮬레이션합니다.
+ 1초마다 GPX 파일에서 위치 정보를 읽어와 실제 차량이 이동하는 것처럼 위치 정보를 갱신합니다.
+
+
+
+
주요 기능
+
+ - GPX 파일을 불러와 경로를 시각적으로 표시
+ - 출발지와 도착지 정보를 명확하게 제공
+ - 실제 도로를 반영한 경로 데이터로 현실감 있는 테스트 가능
+ - 위치 정보가 1초 단위로 자동 갱신되어 실시간과 유사한 테스트 환경 제공
+
+
+
+
+
실시간 모드
+
+
+
기능 개요
+
+ GPS 모듈이 장착된 기기를 통해 사용자의 실제 위치 정보를 1초마다 수집하고 누적합니다.
+ 실제 차량, 자전거, 도보 등 다양한 운송수단을 이용한 실시간 테스트가 가능합니다.
+
+
+
+
주요 기능
+
+ - GPS 모듈이 있는 기기에서 1초마다 정확한 위치 정보 수집
+ - 실시간으로 위치 이동 경로를 지도에 표시
+ - 다양한 이동 수단 테스트 지원
+ - 위치 정보 누적 및 이동 경로 기록 기능 제공
+
+
+
+
+
+ {/* 추가 기능 섹션 */}
+
+ 추가 제공 기능
+
+
+
GPX 파일 관리
+
+ - 다양한 GPX 파일을 업로드 및 관리 가능
+ - 경로별 테스트 시나리오 저장 및 불러오기 지원
+
+
+
+
로그 및 기록 기능
+
+ - 위치 정보와 이동 경로를 기록
+ - 테스트 결과를 파일로 저장하거나 분석에 활용 가능
+
+
+
+
+ {/* 참고 사항 섹션 */}
+
+ 참고 사항
+
+ - 정확한 테스트를 위해 실시간 모드에서는 GPS 모듈이 장착된 장비 사용을 권장합니다.
+ - GPX 파일은 GPS 기반 경로 데이터로, 실제 도로 상황을 반영한 경로 시뮬레이션에 활용됩니다.
+ - IP 기반 위치 추적은 참고용으로만 사용하시고, 실제 서비스 품질 검증에는 GPS 기반 테스트를 권장합니다.
+
+
+
+ {/* 데모 체험하기 버튼 섹션 추가 */}
+
+
+ 지금 바로 WHERE CAR 에뮬레이터를 체험해보세요!
+
+
+
데모 체험하기
+
+
+
+
+
+
+
+
+
+
+ WHERE CAR 체험하기
+
+
+
+
+ {/* 데모 계정 로그인 섹션 */}
+
+ 데모 계정으로 시작하기
+
+ WHERE CAR의 모든 기능을 체험해보세요. 아래 데모 계정으로 로그인하실 수 있습니다.
+
+
+
+ 이메일 주소:
+
+ user@example.com
+
+
+
+ 비밀번호:
+
+ 123
+
+
+
+
+ 💡 에뮬레이터를 통해 실제 차량의 움직임을 시뮬레이션해볼 수 있습니다.
+ 해당 애뮬레이터를 실행하면 where-car.com 관제 페이지에 실시간 추적 데이터가 표시됩니다.
+
+
+
+ {/* 에뮬레이터 체험 섹션 */}
+
+ 에뮬레이터 체험하기
+
+ 실제 차량의 이동을 시뮬레이션하는 에뮬레이터를 체험해보세요.
+ 해당 애뮬레이터를 작동하면 where-car.com 관제 페이지에 실시간 추적 데이터가 표시됩니다.
+
+
+ {emulators.map((emulator, index) => (
+
+
+
+
+ 차량 ID:
+ {emulator.vehicleId}
+
+
+ 차량 번호:
+ {emulator.plateNo}
+
+
+
+ ))}
+
+
+
+
+
+
+
+ {children}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d5d94e6..e2bbe60 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,30 +2,23 @@ import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/contexts/ThemeContext";
-import PageLayout from "@/components/layout/PageLayout";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "WHERE CAR",
- description: "차량 관리 시스템",
+ description: "차량 관제 시스템",
};
export default function RootLayout({
children,
-}: Readonly<{
+}: {
children: React.ReactNode;
-}>) {
+}) {
return (
-
-
-
+ {children}
);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index df61a26..4eac45c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -163,10 +163,16 @@ export default function HomePage() {
- 무료 체험하기
+ 데모 체험하기
+
+
+ 애뮬레이터 가이드
@@ -407,7 +413,7 @@ export default function HomePage() {
지금 바로 시작하세요
- 14일 무료 체험 기간 동안 WHERE CAR의 모든 기능을 경험해보세요.
+ WHERE CAR의 모든 기능을 경험해보세요.
설치부터 운영까지 전문 컨설턴트가 함께합니다.
+
+
+
+
WHERE CAR
+
+
+
+
+ 로그인
+
+
+ 회원가입
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/layout/SimpleLayout.tsx b/src/components/layout/SimpleLayout.tsx
new file mode 100644
index 0000000..e2b6f2b
--- /dev/null
+++ b/src/components/layout/SimpleLayout.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { useTheme } from "@/contexts/ThemeContext";
+import Header from "@/components/layout/Header";
+
+export default function SimpleLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ const { currentTheme } = useTheme();
+
+ return (
+
+
+
+ {children}
+
+
+ );
+}
\ No newline at end of file