Skip to content

Commit 4efa62b

Browse files
hyeonjinan096hyeonjinan096
authored
[#97] feat: 애뮬레이터 가이드 페이지 및 데모 페이지 구현 (#104)
* [#97] feat: 애뮬레이터 가이드 페이지 구현 * [#97] feat: 데모 체험 페이지 구현 * [#97] feat: 데모체험 페이지, 가이드 페이지 사이드바 제거 * [#97] feat: 매인 페이지 레이아웃 수정 * [#97] chore: 메인 페이지 텍스트 수정 * [#97] fix: 기존 로그인에서 되돌아가기 버튼 미들웨어 에러 수정
1 parent 653f99d commit 4efa62b

7 files changed

Lines changed: 367 additions & 18 deletions

File tree

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function NoLayout({
2+
children,
3+
}: {
4+
children: React.ReactNode
5+
}) {
6+
return children;
7+
}

‎src/app/emulator-guide/page.tsx‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
"use client";
2+
3+
import { useTheme } from "@/contexts/ThemeContext";
4+
import { ArrowLeftIcon } from "@heroicons/react/24/outline";
5+
import { useRouter } from "next/navigation";
6+
import Link from "next/link";
7+
8+
export default function EmulatorGuidePage() {
9+
const { currentTheme } = useTheme();
10+
const router = useRouter();
11+
12+
return (
13+
<div className="container mx-auto px-4 py-8">
14+
<div className="max-w-4xl mx-auto">
15+
<div className="flex items-center gap-4 mb-8">
16+
<button
17+
onClick={() => router.back()}
18+
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
19+
>
20+
<ArrowLeftIcon className="w-6 h-6" />
21+
</button>
22+
<h1 className={`text-3xl font-bold ${currentTheme.text}`}>
23+
자동차 관제 에뮬레이터 가이드
24+
</h1>
25+
</div>
26+
27+
<div className={`space-y-8 ${currentTheme.text}`}>
28+
{/* 개요 섹션 */}
29+
<section className={`${currentTheme.cardBg} rounded-lg shadow-lg p-8`}>
30+
<h2 className="text-2xl font-bold mb-4">개요</h2>
31+
<p className={`${currentTheme.mutedText} leading-relaxed`}>
32+
이 에뮬레이터는 실제 차량에 장착하는 관제 장치의 기능을 웹 애플리케이션으로 구현한 소프트웨어입니다.
33+
개발 및 테스트 환경에서 실제 장비 없이도 자동차의 위치와 상태를 효과적으로 시뮬레이션하고 검증할 수 있도록 설계되었습니다.
34+
</p>
35+
</section>
36+
37+
{/* 주요 특징 섹션 */}
38+
<section className={`${currentTheme.cardBg} rounded-lg shadow-lg p-8`}>
39+
<h2 className="text-2xl font-bold mb-6">주요 특징</h2>
40+
<div className="grid md:grid-cols-3 gap-6">
41+
<div className="space-y-2">
42+
<h3 className="text-lg font-semibold text-blue-500">웹 기반 애플리케이션</h3>
43+
<p className={`${currentTheme.mutedText}`}>별도의 설치 없이 웹 브라우저에서 바로 사용할 수 있습니다.</p>
44+
</div>
45+
<div className="space-y-2">
46+
<h3 className="text-lg font-semibold text-blue-500">반응형 인터페이스</h3>
47+
<p className={`${currentTheme.mutedText}`}>데스크탑, 태블릿, 모바일 등 다양한 기기에서 최적화된 화면을 제공합니다.</p>
48+
</div>
49+
<div className="space-y-2">
50+
<h3 className="text-lg font-semibold text-blue-500">다크모드 지원</h3>
51+
<p className={`${currentTheme.mutedText}`}>사용자의 환경 및 취향에 맞춰 라이트/다크 테마를 자유롭게 전환할 수 있습니다.</p>
52+
</div>
53+
</div>
54+
</section>
55+
56+
{/* 제공 모드 섹션 */}
57+
<section className={`${currentTheme.cardBg} rounded-lg shadow-lg p-8`}>
58+
<h2 className="text-2xl font-bold mb-6">제공 모드</h2>
59+
60+
{/* 시뮬레이션 모드 */}
61+
<div className="mb-8">
62+
<h3 className="text-xl font-semibold text-blue-500 mb-4">시뮬레이션 모드</h3>
63+
<div className="space-y-4">
64+
<div>
65+
<h4 className="font-semibold mb-2">기능 개요</h4>
66+
<p className={`${currentTheme.mutedText}`}>
67+
미리 제공된 GPX 파일(실제 한국 도로 기반 경로 데이터)을 활용하여 차량의 움직임을 시뮬레이션합니다.
68+
1초마다 GPX 파일에서 위치 정보를 읽어와 실제 차량이 이동하는 것처럼 위치 정보를 갱신합니다.
69+
</p>
70+
</div>
71+
<div>
72+
<h4 className="font-semibold mb-2">주요 기능</h4>
73+
<ul className={`${currentTheme.mutedText} list-disc list-inside space-y-1`}>
74+
<li>GPX 파일을 불러와 경로를 시각적으로 표시</li>
75+
<li>출발지와 도착지 정보를 명확하게 제공</li>
76+
<li>실제 도로를 반영한 경로 데이터로 현실감 있는 테스트 가능</li>
77+
<li>위치 정보가 1초 단위로 자동 갱신되어 실시간과 유사한 테스트 환경 제공</li>
78+
</ul>
79+
</div>
80+
</div>
81+
</div>
82+
83+
<div>
84+
<h3 className="text-xl font-semibold text-blue-500 mb-4">실시간 모드</h3>
85+
<div className="space-y-4">
86+
<div>
87+
<h4 className="font-semibold mb-2">기능 개요</h4>
88+
<p className={`${currentTheme.mutedText}`}>
89+
GPS 모듈이 장착된 기기를 통해 사용자의 실제 위치 정보를 1초마다 수집하고 누적합니다.
90+
실제 차량, 자전거, 도보 등 다양한 운송수단을 이용한 실시간 테스트가 가능합니다.
91+
</p>
92+
</div>
93+
<div>
94+
<h4 className="font-semibold mb-2">주요 기능</h4>
95+
<ul className={`${currentTheme.mutedText} list-disc list-inside space-y-1`}>
96+
<li>GPS 모듈이 있는 기기에서 1초마다 정확한 위치 정보 수집</li>
97+
<li>실시간으로 위치 이동 경로를 지도에 표시</li>
98+
<li>다양한 이동 수단 테스트 지원</li>
99+
<li>위치 정보 누적 및 이동 경로 기록 기능 제공</li>
100+
</ul>
101+
</div>
102+
</div>
103+
</div>
104+
</section>
105+
106+
{/* 추가 기능 섹션 */}
107+
<section className={`${currentTheme.cardBg} rounded-lg shadow-lg p-8`}>
108+
<h2 className="text-2xl font-bold mb-6">추가 제공 기능</h2>
109+
<div className="grid md:grid-cols-2 gap-6">
110+
<div>
111+
<h3 className="text-lg font-semibold text-blue-500 mb-3">GPX 파일 관리</h3>
112+
<ul className={`${currentTheme.mutedText} list-disc list-inside space-y-1`}>
113+
<li>다양한 GPX 파일을 업로드 및 관리 가능</li>
114+
<li>경로별 테스트 시나리오 저장 및 불러오기 지원</li>
115+
</ul>
116+
</div>
117+
<div>
118+
<h3 className="text-lg font-semibold text-blue-500 mb-3">로그 및 기록 기능</h3>
119+
<ul className={`${currentTheme.mutedText} list-disc list-inside space-y-1`}>
120+
<li>위치 정보와 이동 경로를 기록</li>
121+
<li>테스트 결과를 파일로 저장하거나 분석에 활용 가능</li>
122+
</ul>
123+
</div>
124+
</div>
125+
</section>
126+
127+
{/* 참고 사항 섹션 */}
128+
<section className={`${currentTheme.cardBg} rounded-lg shadow-lg p-8`}>
129+
<h2 className="text-2xl font-bold mb-4">참고 사항</h2>
130+
<ul className={`${currentTheme.mutedText} list-disc list-inside space-y-2`}>
131+
<li>정확한 테스트를 위해 실시간 모드에서는 GPS 모듈이 장착된 장비 사용을 권장합니다.</li>
132+
<li>GPX 파일은 GPS 기반 경로 데이터로, 실제 도로 상황을 반영한 경로 시뮬레이션에 활용됩니다.</li>
133+
<li>IP 기반 위치 추적은 참고용으로만 사용하시고, 실제 서비스 품질 검증에는 GPS 기반 테스트를 권장합니다.</li>
134+
</ul>
135+
</section>
136+
137+
{/* 데모 체험하기 버튼 섹션 추가 */}
138+
<div className="flex flex-col items-center py-8">
139+
<p className={`${currentTheme.mutedText} text-center mb-6 text-lg`}>
140+
지금 바로 WHERE CAR 에뮬레이터를 체험해보세요!
141+
</p>
142+
<Link
143+
href="/trial"
144+
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"
145+
>
146+
<span className="text-lg font-semibold">데모 체험하기</span>
147+
<svg
148+
className="w-5 h-5 ml-2"
149+
fill="none"
150+
stroke="currentColor"
151+
viewBox="0 0 24 24"
152+
xmlns="http://www.w3.org/2000/svg"
153+
>
154+
<path
155+
strokeLinecap="round"
156+
strokeLinejoin="round"
157+
strokeWidth={2}
158+
d="M13 7l5 5m0 0l-5 5m5-5H6"
159+
/>
160+
</svg>
161+
</Link>
162+
</div>
163+
164+
</div>
165+
</div>
166+
</div>
167+
);
168+
}

‎src/app/login/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ function LoginContent() {
7171

7272
// 뒤로가기 처리
7373
const handleGoBack = () => {
74-
router.back();
74+
router.push('/');
7575
};
7676

7777
// 폼 제출 처리

‎src/app/page.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -163,10 +163,16 @@ export default function HomePage() {
163163
</p>
164164
<div className="flex items-center gap-4 mt-8">
165165
<Link
166-
href="/register"
166+
href="/trial"
167167
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"
168168
>
169-
무료 체험하기
169+
데모 체험하기
170+
</Link>
171+
<Link
172+
href="/emulator-guide"
173+
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"
174+
>
175+
에뮬레이터 가이드
170176
</Link>
171177
</div>
172178
</div>
@@ -198,7 +204,7 @@ export default function HomePage() {
198204
</div>
199205
<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">
200206
<div className="w-2 h-2 rounded-full bg-purple-400 mr-2"></div>
201-
데이터 분석
207+
애뮬레이터 분석
202208
</div>
203209
</div>
204210
</div>

‎src/app/trial/page.tsx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
"use client";
2+
3+
import { useTheme } from "@/contexts/ThemeContext";
4+
import { ArrowLeftIcon } from "@heroicons/react/24/outline";
5+
import { useRouter } from "next/navigation";
6+
import Link from "next/link";
7+
8+
export default function TrialPage() {
9+
const { currentTheme } = useTheme();
10+
const router = useRouter();
11+
12+
const emulators = [
13+
{
14+
url: 'https://emulator.where-car.com:8080/dashboard',
15+
vehicleId: '01284967350',
16+
plateNo: '23마8492',
17+
description: '광주 → 무주 경로'
18+
},
19+
{
20+
url: 'https://emulator.where-car.com:8081/dashboard',
21+
vehicleId: '09573482619',
22+
plateNo: '67다1359',
23+
description: '경주 → 서울 경로'
24+
},
25+
{
26+
url: 'https://emulator.where-car.com:8082/dashboard',
27+
vehicleId: '03759261845',
28+
plateNo: '12고9756',
29+
description: '서울 → 경주 경로'
30+
},
31+
{
32+
url: 'https://emulator.where-car.com:8083/dashboard',
33+
vehicleId: '07362519840',
34+
plateNo: '89버2431',
35+
description: '수원 → 대전 → 구미 경로'
36+
},
37+
{
38+
url: 'https://emulator.where-car.com:8084/dashboard',
39+
vehicleId: '05829463715',
40+
plateNo: '35자7650',
41+
description: '양양 → 대구 경로'
42+
}
43+
];
44+
45+
return (
46+
<div className={`min-h-screen ${currentTheme.background} p-8`}>
47+
<div className="max-w-6xl mx-auto">
48+
<div className="flex items-center gap-4 mb-8">
49+
<button
50+
onClick={() => router.back()}
51+
className={`p-2 rounded-full hover:${currentTheme.hoverBg} transition-colors`}
52+
aria-label="뒤로 가기"
53+
>
54+
<ArrowLeftIcon className={`h-6 w-6 ${currentTheme.text}`} />
55+
</button>
56+
<h1 className={`text-3xl font-bold ${currentTheme.text}`}>
57+
WHERE CAR 체험하기
58+
</h1>
59+
</div>
60+
61+
<div className="grid md:grid-cols-2 gap-8">
62+
{/* 데모 계정 로그인 섹션 */}
63+
<section className={`${currentTheme.cardBg} rounded-lg shadow-lg p-7`}>
64+
<h2 className="text-2xl font-bold mb-5 text-blue-500">데모 계정으로 시작하기</h2>
65+
<p className={`${currentTheme.mutedText} mb-5`}>
66+
WHERE CAR의 모든 기능을 체험해보세요. 아래 데모 계정으로 로그인하실 수 있습니다.
67+
</p>
68+
<div className={`${currentTheme.hoverBg} rounded-lg p-5 mb-5 space-y-3`}>
69+
<div className="flex items-center justify-between">
70+
<span className={`${currentTheme.text}`}>이메일 주소:</span>
71+
<code className={`${currentTheme.cardBg} px-3 py-1.5 rounded text-blue-600 dark:text-blue-400`}>
72+
user@example.com
73+
</code>
74+
</div>
75+
<div className="flex items-center justify-between">
76+
<span className={`${currentTheme.text}`}>비밀번호:</span>
77+
<code className={`${currentTheme.cardBg} px-3 py-1.5 rounded text-blue-600 dark:text-blue-400`}>
78+
123
79+
</code>
80+
</div>
81+
</div>
82+
<Link
83+
href="/login"
84+
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"
85+
>
86+
로그인하러 가기
87+
</Link>
88+
89+
{/* 알림 박스를 로그인 버튼 아래로 이동 */}
90+
<div className="bg-blue-50 dark:bg-blue-900/30 rounded-lg p-4 mt-4">
91+
<p className={`${currentTheme.mutedText}`}>
92+
💡 에뮬레이터를 통해 실제 차량의 움직임을 시뮬레이션해볼 수 있습니다. <br />
93+
해당 애뮬레이터를 실행하면 where-car.com 관제 페이지에 실시간 추적 데이터가 표시됩니다.
94+
</p>
95+
</div>
96+
</section>
97+
98+
{/* 에뮬레이터 체험 섹션 */}
99+
<section className={`${currentTheme.cardBg} rounded-lg shadow-lg p-7 relative`}>
100+
<h2 className="text-2xl font-bold mb-5 text-blue-500">에뮬레이터 체험하기</h2>
101+
<p className={`${currentTheme.mutedText} mb-5`}>
102+
실제 차량의 이동을 시뮬레이션하는 에뮬레이터를 체험해보세요.
103+
해당 애뮬레이터를 작동하면 where-car.com 관제 페이지에 실시간 추적 데이터가 표시됩니다.
104+
</p>
105+
<div className="space-y-4 mb-8">
106+
{emulators.map((emulator, index) => (
107+
<div
108+
key={index}
109+
className={`${currentTheme.hoverBg} rounded-lg p-4 border ${currentTheme.border} hover:shadow-md transition-all duration-300`}
110+
>
111+
<div className="flex items-center justify-between mb-3">
112+
<h3 className="font-semibold text-blue-500">{emulator.description}</h3>
113+
<a
114+
href={emulator.url}
115+
target="_blank"
116+
rel="noopener noreferrer"
117+
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
118+
>
119+
체험하기
120+
</a>
121+
</div>
122+
<div className="grid grid-cols-2 gap-3">
123+
<div className="flex items-center justify-between">
124+
<span className={`${currentTheme.mutedText}`}>차량 ID:</span>
125+
<code className={`${currentTheme.cardBg} px-3 py-1.5 rounded`}>{emulator.vehicleId}</code>
126+
</div>
127+
<div className="flex items-center justify-between">
128+
<span className={`${currentTheme.mutedText}`}>차량 번호:</span>
129+
<code className={`${currentTheme.cardBg} px-3 py-1.5 rounded`}>{emulator.plateNo}</code>
130+
</div>
131+
</div>
132+
</div>
133+
))}
134+
</div>
135+
</section>
136+
</div>
137+
</div>
138+
</div>
139+
);
140+
}

0 commit comments

Comments
 (0)