[#97] feat: 애뮬레이터 가이드 페이지 및 데모 페이지 구현

src/app/(no-layout)/layout.tsx

@@ -0,0 +1,7 @@
+export default function NoLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children;
+} 

src/app/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 (
+    <div className="container mx-auto px-4 py-8">
+      <div className="max-w-4xl mx-auto">
+        <div className="flex items-center gap-4 mb-8">
+          <button
+            onClick={() => router.back()}
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          >
+            <ArrowLeftIcon className="w-6 h-6" />
+          </button>
+          <h1 className={`text-3xl font-bold ${currentTheme.text}`}>
+            자동차 관제 에뮬레이터 가이드
+          </h1>
+        </div>
+
+        <div className={`space-y-8 ${currentTheme.text}`}>
+          {/* 개요 섹션 */}
+          <section className={`${currentTheme.cardBg} rounded-lg shadow-lg p-8`}>
+            <h2 className="text-2xl font-bold mb-4">개요</h2>
+            <p className={`${currentTheme.mutedText} leading-relaxed`}>
+              이 에뮬레이터는 실제 차량에 장착하는 관제 장치의 기능을 웹 애플리케이션으로 구현한 소프트웨어입니다. 
+              개발 및 테스트 환경에서 실제 장비 없이도 자동차의 위치와 상태를 효과적으로 시뮬레이션하고 검증할 수 있도록 설계되었습니다.
+            </p>
+          </section>
+
+          {/* 주요 특징 섹션 */}
+          <section className={`${currentTheme.cardBg} rounded-lg shadow-lg p-8`}>
+            <h2 className="text-2xl font-bold mb-6">주요 특징</h2>
+            <div className="grid md:grid-cols-3 gap-6">
+              <div className="space-y-2">
+                <h3 className="text-lg font-semibold text-blue-500">웹 기반 애플리케이션</h3>
+                <p className={`${currentTheme.mutedText}`}>별도의 설치 없이 웹 브라우저에서 바로 사용할 수 있습니다.</p>
+              </div>
+              <div className="space-y-2">
+                <h3 className="text-lg font-semibold text-blue-500">반응형 인터페이스</h3>
+                <p className={`${currentTheme.mutedText}`}>데스크탑, 태블릿, 모바일 등 다양한 기기에서 최적화된 화면을 제공합니다.</p>
+              </div>
+              <div className="space-y-2">
+                <h3 className="text-lg font-semibold text-blue-500">다크모드 지원</h3>
+                <p className={`${currentTheme.mutedText}`}>사용자의 환경 및 취향에 맞춰 라이트/다크 테마를 자유롭게 전환할 수 있습니다.</p>
+              </div>
+            </div>
+          </section>
+
+            {/* 제공 모드 섹션 */}
+            <section className={`${currentTheme.cardBg} rounded-lg shadow-lg p-8`}>
+            <h2 className="text-2xl font-bold mb-6">제공 모드</h2>
+
+            {/* 시뮬레이션 모드 */}
+            <div className="mb-8">
+              <h3 className="text-xl font-semibold text-blue-500 mb-4">시뮬레이션 모드</h3>
+              <div className="space-y-4">
+                <div>
+                  <h4 className="font-semibold mb-2">기능 개요</h4>
+                  <p className={`${currentTheme.mutedText}`}>
+                    미리 제공된 GPX 파일(실제 한국 도로 기반 경로 데이터)을 활용하여 차량의 움직임을 시뮬레이션합니다.
+                    1초마다 GPX 파일에서 위치 정보를 읽어와 실제 차량이 이동하는 것처럼 위치 정보를 갱신합니다.
+                  </p>
+                </div>
+                <div>
+                  <h4 className="font-semibold mb-2">주요 기능</h4>
+                  <ul className={`${currentTheme.mutedText} list-disc list-inside space-y-1`}>
+                    <li>GPX 파일을 불러와 경로를 시각적으로 표시</li>
+                    <li>출발지와 도착지 정보를 명확하게 제공</li>
+                    <li>실제 도로를 반영한 경로 데이터로 현실감 있는 테스트 가능</li>
+                    <li>위치 정보가 1초 단위로 자동 갱신되어 실시간과 유사한 테스트 환경 제공</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <h3 className="text-xl font-semibold text-blue-500 mb-4">실시간 모드</h3>
+              <div className="space-y-4">
+                <div>
+                  <h4 className="font-semibold mb-2">기능 개요</h4>
+                  <p className={`${currentTheme.mutedText}`}>
+                    GPS 모듈이 장착된 기기를 통해 사용자의 실제 위치 정보를 1초마다 수집하고 누적합니다.
+                    실제 차량, 자전거, 도보 등 다양한 운송수단을 이용한 실시간 테스트가 가능합니다.
+                  </p>
+                </div>
+                <div>
+                  <h4 className="font-semibold mb-2">주요 기능</h4>
+                  <ul className={`${currentTheme.mutedText} list-disc list-inside space-y-1`}>
+                    <li>GPS 모듈이 있는 기기에서 1초마다 정확한 위치 정보 수집</li>
+                    <li>실시간으로 위치 이동 경로를 지도에 표시</li>
+                    <li>다양한 이동 수단 테스트 지원</li>
+                    <li>위치 정보 누적 및 이동 경로 기록 기능 제공</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </section>
+
+            {/* 추가 기능 섹션 */}
+            <section className={`${currentTheme.cardBg} rounded-lg shadow-lg p-8`}>
+            <h2 className="text-2xl font-bold mb-6">추가 제공 기능</h2>
+            <div className="grid md:grid-cols-2 gap-6">
+              <div>
+                <h3 className="text-lg font-semibold text-blue-500 mb-3">GPX 파일 관리</h3>
+                <ul className={`${currentTheme.mutedText} list-disc list-inside space-y-1`}>
+                  <li>다양한 GPX 파일을 업로드 및 관리 가능</li>
+                  <li>경로별 테스트 시나리오 저장 및 불러오기 지원</li>
+                </ul>
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-blue-500 mb-3">로그 및 기록 기능</h3>
+                <ul className={`${currentTheme.mutedText} list-disc list-inside space-y-1`}>
+                  <li>위치 정보와 이동 경로를 기록</li>
+                  <li>테스트 결과를 파일로 저장하거나 분석에 활용 가능</li>
+                </ul>
+              </div>
+            </div>
+          </section>
+
+{/* 참고 사항 섹션 */}
+<section className={`${currentTheme.cardBg} rounded-lg shadow-lg p-8`}>
+            <h2 className="text-2xl font-bold mb-4">참고 사항</h2>
+            <ul className={`${currentTheme.mutedText} list-disc list-inside space-y-2`}>
+              <li>정확한 테스트를 위해 실시간 모드에서는 GPS 모듈이 장착된 장비 사용을 권장합니다.</li>
+              <li>GPX 파일은 GPS 기반 경로 데이터로, 실제 도로 상황을 반영한 경로 시뮬레이션에 활용됩니다.</li>
+              <li>IP 기반 위치 추적은 참고용으로만 사용하시고, 실제 서비스 품질 검증에는 GPS 기반 테스트를 권장합니다.</li>
+            </ul>
+          </section>
+
+          {/* 데모 체험하기 버튼 섹션 추가 */}
+          <div className="flex flex-col items-center py-8">
+            <p className={`${currentTheme.mutedText} text-center mb-6 text-lg`}>
+              지금 바로 WHERE CAR 에뮬레이터를 체험해보세요!
+            </p>
+            <Link
+              href="/trial"
+              className="inline-flex items-center px-8 py-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors shadow-lg hover:shadow-xl"
+            >
+              <span className="text-lg font-semibold">데모 체험하기</span>
+              <svg 
+                className="w-5 h-5 ml-2" 
+                fill="none" 
+                stroke="currentColor" 
+                viewBox="0 0 24 24" 
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path 
+                  strokeLinecap="round" 
+                  strokeLinejoin="round" 
+                  strokeWidth={2} 
+                  d="M13 7l5 5m0 0l-5 5m5-5H6"
+                />
+              </svg>
+            </Link>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+} 

src/app/login/page.tsx

@@ -71,7 +71,7 @@ function LoginContent() {
 
   // 뒤로가기 처리
   const handleGoBack = () => {
-    router.back();
+    router.push('/');
   };
 
   // 폼 제출 처리

src/app/page.tsx

@@ -163,10 +163,16 @@ export default function HomePage() {
               </p>
               <div className="flex items-center gap-4 mt-8">
                 <Link
-                  href="/register"
+                  href="/trial"
                   className="px-8 py-3 text-lg rounded-md bg-blue-600 text-white hover:bg-blue-500 transition-all duration-300 shadow-md inline-block font-medium"
                 >
-                  무료 체험하기
+                  데모 체험하기
+                </Link>
+                <Link
+                  href="/emulator-guide"
+                  className="px-8 py-3 text-lg rounded-md bg-blue-500/20 border border-blue-200/30 text-blue-100 hover:bg-blue-400/30 transition-all duration-300 shadow-md inline-block font-medium backdrop-blur-sm"
+                >
+                  에뮬레이터 가이드
                 </Link>
               </div>
             </div>
@@ -198,7 +204,7 @@ export default function HomePage() {
                 </div>
                 <div className="absolute top-1/2 transform -translate-y-1/2 -right-12 px-4 py-2.5 bg-purple-900/80 backdrop-blur-sm rounded-full text-white text-sm animate-pulse-slow-delay2 shadow-lg border border-purple-700/50 flex items-center">
                   <div className="w-2 h-2 rounded-full bg-purple-400 mr-2"></div>
-                  데이터 분석
+                  애뮬레이터 분석
                 </div>
               </div>
             </div>

src/app/trial/page.tsx

@@ -0,0 +1,140 @@
+"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 TrialPage() {
+  const { currentTheme } = useTheme();
+  const router = useRouter();
+
+  const emulators = [
+    {
+      url: 'https://emulator.where-car.com:8080/dashboard',
+      vehicleId: '01284967350',
+      plateNo: '23마8492',
+      description: '광주 → 무주 경로'
+    },
+    {
+      url: 'https://emulator.where-car.com:8081/dashboard',
+      vehicleId: '09573482619',
+      plateNo: '67다1359',
+      description: '경주 → 서울 경로'
+    },
+    {
+      url: 'https://emulator.where-car.com:8082/dashboard',
+      vehicleId: '03759261845',
+      plateNo: '12고9756',
+      description: '서울 → 경주 경로'
+    },
+    {
+      url: 'https://emulator.where-car.com:8083/dashboard',
+      vehicleId: '07362519840',
+      plateNo: '89버2431',
+      description: '수원 → 대전 → 구미 경로'
+    },
+    {
+      url: 'https://emulator.where-car.com:8084/dashboard',
+      vehicleId: '05829463715',
+      plateNo: '35자7650',
+      description: '양양 → 대구 경로'
+    }
+  ];
+
+  return (
+    <div className={`min-h-screen ${currentTheme.background} p-8`}>
+      <div className="max-w-6xl mx-auto">
+        <div className="flex items-center gap-4 mb-8">
+          <button 
+            onClick={() => router.back()}
+            className={`p-2 rounded-full hover:${currentTheme.hoverBg} transition-colors`}
+            aria-label="뒤로 가기"
+          >
+            <ArrowLeftIcon className={`h-6 w-6 ${currentTheme.text}`} />
+          </button>
+          <h1 className={`text-3xl font-bold ${currentTheme.text}`}>
+            WHERE CAR 체험하기
+          </h1>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-8">
+          {/* 데모 계정 로그인 섹션 */}
+          <section className={`${currentTheme.cardBg} rounded-lg shadow-lg p-7`}>
+            <h2 className="text-2xl font-bold mb-5 text-blue-500">데모 계정으로 시작하기</h2>
+            <p className={`${currentTheme.mutedText} mb-5`}>
+              WHERE CAR의 모든 기능을 체험해보세요. 아래 데모 계정으로 로그인하실 수 있습니다.
+            </p>
+            <div className={`${currentTheme.hoverBg} rounded-lg p-5 mb-5 space-y-3`}>
+              <div className="flex items-center justify-between">
+                <span className={`${currentTheme.text}`}>이메일 주소:</span>
+                <code className={`${currentTheme.cardBg} px-3 py-1.5 rounded text-blue-600 dark:text-blue-400`}>
+                  user@example.com
+                </code>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className={`${currentTheme.text}`}>비밀번호:</span>
+                <code className={`${currentTheme.cardBg} px-3 py-1.5 rounded text-blue-600 dark:text-blue-400`}>
+                  123
+                </code>
+              </div>
+            </div>
+            <Link
+              href="/login"
+              className="w-full block text-center px-5 py-2.5 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors mb-5"
+            >
+              로그인하러 가기
+            </Link>
+
+            {/* 알림 박스를 로그인 버튼 아래로 이동 */}
+            <div className="bg-blue-50 dark:bg-blue-900/30 rounded-lg p-4 mt-4">
+              <p className={`${currentTheme.mutedText}`}>
+                💡 에뮬레이터를 통해 실제 차량의 움직임을 시뮬레이션해볼 수 있습니다. <br />
+                해당 애뮬레이터를 실행하면 where-car.com 관제 페이지에 실시간 추적 데이터가 표시됩니다.
+              </p>
+            </div>
+          </section>
+
+          {/* 에뮬레이터 체험 섹션 */}
+          <section className={`${currentTheme.cardBg} rounded-lg shadow-lg p-7 relative`}>
+            <h2 className="text-2xl font-bold mb-5 text-blue-500">에뮬레이터 체험하기</h2>
+            <p className={`${currentTheme.mutedText} mb-5`}>
+              실제 차량의 이동을 시뮬레이션하는 에뮬레이터를 체험해보세요.
+              해당 애뮬레이터를 작동하면 where-car.com 관제 페이지에 실시간 추적 데이터가 표시됩니다.
+            </p>
+            <div className="space-y-4 mb-8">
+              {emulators.map((emulator, index) => (
+                <div 
+                  key={index}
+                  className={`${currentTheme.hoverBg} rounded-lg p-4 border ${currentTheme.border} hover:shadow-md transition-all duration-300`}
+                >
+                  <div className="flex items-center justify-between mb-3">
+                    <h3 className="font-semibold text-blue-500">{emulator.description}</h3>
+                    <a 
+                      href={emulator.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+                    >
+                      체험하기
+                    </a>
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="flex items-center justify-between">
+                      <span className={`${currentTheme.mutedText}`}>차량 ID:</span>
+                      <code className={`${currentTheme.cardBg} px-3 py-1.5 rounded`}>{emulator.vehicleId}</code>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className={`${currentTheme.mutedText}`}>차량 번호:</span>
+                      <code className={`${currentTheme.cardBg} px-3 py-1.5 rounded`}>{emulator.plateNo}</code>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}