Public Source Viewer
비나래아카이브 개발자 포털
실제 서비스 구조를 살펴볼 수 있는 공개용 코드 뷰어입니다. 인증, 세션, 외부 연동, 토큰, 관리자 식별 등 보안상 민감한 구현은 파일 단위 또는 줄 단위로 검열됩니다.
view/hinana/subway.ejs
공개 가능
1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8" />
5
<meta name="color-scheme" content="light dark">
6
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1.0">
7
<meta name="theme-color" content="<%= (typeof theme !== 'undefined' && theme === 'dark') ? '#0f141e' : '#f8f7f5' %>">
8
<meta property="og:image" content="/image/lounge1.png" />
9
<meta property="og:title" content="열차 위치 조회 — 비나래 라운지" />
10
<meta property="og:description" content="서울시 지하철 실시간 위치정보 API로 열차 열번의 현재 위치를 확인합니다." />
11
<title>열차 위치 조회 — 비나래 라운지</title>
12
<link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap.min.css' />
13
<script src="/vendors/bootstrap/js/bootstrap.min.js"></script>
14
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&family=Montserrat:wght@300;400;700&display=swap" rel="stylesheet">
15
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
16
<script src="/js/popup.js"></script>
17
<style>
18
*, *::before, *::after { box-sizing: border-box; }
19
:root {
20
--bg-main: #f8f7f5; --bg-secondary: #ffffff;
21
--bg-tertiary: #1a2238; --bg-card: #ffffff; --bg-input: #f1f0ed;
22
--text-primary: #1a2238; --text-secondary: #5e6676;
23
--accent: #c5a059; --accent-dim: rgba(197,160,89,0.12);
24
--border: #e5e1da; --success: #16a34a; --danger: #dc2626;
25
--font: 'Noto Sans KR', sans-serif;
26
}
27
body.dark-mode {
28
--bg-main: #0f141e; --bg-secondary: #1a2238; --bg-tertiary: #111827;
29
--bg-card: #1e2a42; --bg-input: #243050;
30
--text-primary: #e7e5e4; --text-secondary: #94a3b8;
31
--border: #2e3a59;
32
}
33
html, body { margin:0; padding:0; background:var(--bg-main); color:var(--text-primary); font-family:var(--font); min-height:100vh; display:flex; flex-direction:column; }
34
a { text-decoration:none; color:inherit; }
35
.site-header { background:var(--bg-tertiary); height:60px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
36
.brand { display:flex; align-items:center; gap:12px; min-width:0; flex:1; font-size:.9rem; font-weight:700; color:#fff; }
37
.brand > span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
38
.header-logo { height:26px; max-width:170px; object-fit:contain; }
39
.site-header nav { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
40
.site-header nav a { font-size:.82rem; color:var(--text-secondary); margin-left:20px; transition:color .2s; }
41
.site-header nav a:hover { color:var(--accent); }
42
.page-body { flex:1; max-width:920px; width:100%; margin:0 auto; padding:40px 24px 0; }
43
.page-title { margin-bottom:28px; }
44
.page-title h1 { font-size:1.5rem; font-weight:700; margin:0 0 6px; }
45
.page-title p { font-size:.82rem; color:var(--text-secondary); margin:0; line-height:1.7; }
46
.search-card, .result-card, .info-box, .helper-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:20px; }
47
.search-grid { display:grid; grid-template-columns: 1.05fr .85fr 1.1fr auto; gap:10px; align-items:end; }
48
.field-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-secondary); margin-bottom:8px; }
49
.field { width:100%; border:1px solid var(--border); border-radius:8px; background:var(--bg-input); color:var(--text-primary); font-family:var(--font); font-size:.95rem; padding:11px 13px; outline:none; }
50
.field:focus { border-color:var(--accent); }
51
.submit-btn { border:1px solid rgba(197,160,89,.55); background:var(--accent); color:#fff; border-radius:8px; padding:11px 18px; font-weight:700; font-family:var(--font); white-space:nowrap; }
52
.submit-btn:disabled { opacity:.65; cursor:not-allowed; }
53
.tracker-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; }
54
.tracker-status { font-size:.78rem; color:var(--text-secondary); line-height:1.6; }
55
.tracker-actions { display:flex; gap:8px; flex-wrap:wrap; }
56
.push-guide { width:100%; margin-top:2px; font-size:.72rem; color:var(--text-secondary); line-height:1.6; }
57
.ghost-btn { border:1px solid var(--border); background:transparent; color:var(--text-secondary); border-radius:8px; padding:9px 12px; font-size:.82rem; font-weight:700; font-family:var(--font); }
58
.ghost-btn:hover { border-color:var(--accent); color:var(--accent); }
59
.ghost-btn:disabled { opacity:.5; cursor:not-allowed; }
60
.helper-title { font-weight:800; margin-bottom:6px; }
61
.helper-desc { font-size:.82rem; color:var(--text-secondary); line-height:1.7; margin-bottom:14px; }
62
.helper-grid { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; }
63
.arrival-list { display:grid; gap:10px; margin-top:14px; }
64
.arrival-item { width:100%; text-align:left; border:1px solid var(--border); background:var(--bg-main); color:var(--text-primary); border-radius:10px; padding:12px 14px; font-family:var(--font); cursor:pointer; transition:border-color .15s, transform .15s; }
65
.arrival-item:hover { border-color:var(--accent); transform:translateY(-1px); }
66
.arrival-item.selected { border-color:var(--accent); background:var(--accent-dim); }
67
.arrival-main { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:6px; }
68
.arrival-train { font-weight:800; color:var(--accent); font-size:1.05rem; }
69
.arrival-status { font-size:.75rem; border:1px solid rgba(197,160,89,.35); border-radius:999px; padding:3px 8px; color:var(--accent); white-space:nowrap; }
70
.arrival-meta { font-size:.78rem; color:var(--text-secondary); line-height:1.6; }
71
.result-card { display:none; }
72
.result-card.show { display:block; }
73
.result-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border); }
74
.result-title { font-weight:800; font-size:1.05rem; }
75
.source-label { font-size:.7rem; color:var(--text-secondary); }
76
.train-list { display:grid; gap:12px; }
77
.train-item { border:1px solid var(--border); background:var(--bg-main); border-radius:10px; padding:16px; }
78
.train-main { display:flex; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
79
.train-no { font-size:1.4rem; font-weight:800; color:var(--accent); font-feature-settings:'tnum'; }
80
.status-badge { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 10px; background:var(--accent-dim); color:var(--accent); font-size:.78rem; font-weight:800; }
81
.train-meta { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
82
.meta-label { font-size:.68rem; color:var(--text-secondary); margin-bottom:3px; }
83
.meta-value { font-size:.95rem; font-weight:700; overflow-wrap:anywhere; }
84
.pill-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
85
.pill { border:1px solid var(--border); border-radius:999px; padding:3px 8px; font-size:.72rem; color:var(--text-secondary); }
86
.route-card { display:none; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:20px; }
87
.route-card.show { display:block; }
88
.route-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:14px; }
89
.route-title { font-weight:800; }
90
.route-sub { font-size:.78rem; color:var(--text-secondary); line-height:1.6; }
91
.station-strip { --line-color: var(--accent); display:flex; flex-direction:column; gap:0; max-height:620px; overflow-y:auto; overflow-x:hidden; padding:8px 0; scroll-behavior:smooth; }
92
.station-node { position:relative; display:grid; grid-template-columns:260px minmax(0, 1fr); gap:22px; min-height:78px; color:var(--text-secondary); border-bottom:1px solid rgba(148,163,184,.16); }
93
.station-node::before, .station-node::after { content:''; position:absolute; top:0; bottom:0; width:4px; background:var(--line-color); opacity:.95; transform:translateX(-50%); }
94
.station-node::before { left:108px; }
95
.station-node::after { left:156px; }
96
.station-node:first-child::before { top:22px; }
97
.station-node:last-child::before { bottom:22px; }
98
.station-node:first-child::after { top:22px; }
99
.station-node:last-child::after { bottom:22px; }
100
.station-node.past::before, .station-node.past::after { background:#aeb4bd; opacity:.65; }
101
.station-rail { position:relative; min-height:56px; }
102
.station-dot { position:absolute; z-index:1; left:132px; top:28px; transform:translateX(-50%); width:18px; height:18px; border-radius:50%; background:var(--line-color); border:3px solid var(--bg-card); box-shadow:0 0 0 1px rgba(0,0,0,.12); }
103
.station-node.past .station-dot { background:#aeb4bd; box-shadow:0 0 0 1px rgba(148,163,184,.5); }
104
.station-node.current .station-dot { width:28px; height:28px; top:23px; background:var(--success); box-shadow:0 0 0 4px rgba(22,163,74,.16); }
105
.station-node.target .station-dot { background:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.16); }
106
.station-node.current.target .station-dot { background:var(--success); }
107
.train-badges { position:absolute; inset:0; z-index:3; pointer-events:none; }
108
.train-badge { position:absolute; top:11px; width:102px; min-height:38px; border:1px solid var(--border); border-radius:8px; background:var(--bg-card); color:var(--text-primary); box-shadow:0 3px 10px rgba(0,0,0,.08); display:flex; align-items:center; gap:6px; padding:5px 7px; font-size:.7rem; line-height:1.15; overflow:hidden; }
109
.train-badge.up { left:0; justify-content:flex-end; text-align:right; }
110
.train-badge.down { left:166px; }
111
.train-badge.status-enter.moving-down { transform:translateY(-12px); }
112
.train-badge.status-enter.moving-up { transform:translateY(12px); }
113
.train-badge.status-depart.moving-down { transform:translateY(12px); }
114
.train-badge.status-depart.moving-up { transform:translateY(-12px); }
115
.train-icon { position:relative; flex:0 0 auto; width:18px; height:30px; border:2px solid rgba(0,0,0,.45); background:#22c55e; overflow:hidden; box-shadow:inset 0 -4px 0 rgba(255,255,255,.28); }
116
.train-icon::before { content:''; position:absolute; left:4px; right:4px; height:6px; border-radius:4px; background:rgba(255,255,255,.82); box-shadow:0 0 0 1px rgba(255,255,255,.2); }
117
.train-icon::after { content:''; position:absolute; left:5px; right:5px; height:3px; border-radius:999px; background:rgba(0,0,0,.28); }
118
.train-badge.up .train-icon { order:2; background:#ea580c; }
119
.train-badge.moving-down .train-icon { border-radius:6px 6px 9px 9px; }
120
.train-badge.moving-down .train-icon::before { bottom:3px; }
121
.train-badge.moving-down .train-icon::after { top:3px; }
122
.train-badge.moving-up .train-icon { border-radius:9px 9px 6px 6px; box-shadow:inset 0 4px 0 rgba(255,255,255,.28); }
123
.train-badge.moving-up .train-icon::before { top:3px; }
124
.train-badge.moving-up .train-icon::after { bottom:3px; }
125
.train-badge.selected { border-color:var(--success); box-shadow:0 0 0 3px rgba(22,163,74,.16); }
126
.train-label { display:block; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
127
.train-sub { display:none; }
128
.station-info { align-self:center; min-width:0; padding:12px 0; }
129
.station-name { font-size:.9rem; font-weight:800; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
130
.station-node.current .station-name { color:var(--success); }
131
.station-node.future .station-name, .station-node.target .station-name { color:var(--text-primary); }
132
.station-node.past .station-name { color:#8a94a3; }
133
.station-code { font-size:.7rem; color:var(--text-secondary); margin-left:6px; font-weight:500; }
134
.station-train-list { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
135
.station-train-chip { max-width:180px; border:1px solid var(--border); border-radius:999px; background:var(--bg-main); color:var(--text-secondary); padding:3px 8px; font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
136
.station-train-chip.selected { border-color:var(--success); color:var(--success); background:rgba(22,163,74,.08); }
137
.route-legend { display:flex; gap:10px; flex-wrap:wrap; font-size:.72rem; color:var(--text-secondary); }
138
.legend-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; vertical-align:-1px; }
139
.legend-past { background:#aeb4bd; }
140
.legend-current { background:var(--success); }
141
.legend-future { background:var(--accent); }
142
.legend-target { background:#f59e0b; }
143
.empty-message { color:var(--text-secondary); font-size:.9rem; line-height:1.8; margin:0; }
144
.info-box { font-size:.78rem; color:var(--text-secondary); line-height:1.8; margin-bottom:40px; }
145
.info-box strong { color:var(--text-primary); }
146
footer { text-align:center; padding:40px 20px; border-top:1px solid var(--border); background:var(--bg-secondary); margin-top:auto; }
147
.footer-sign { mix-blend-mode:multiply; }
148
body.dark-mode .footer-sign { mix-blend-mode:screen; }
149
@media (max-width: 720px) {
150
.page-body { padding:24px 16px 0; }
151
.site-header { padding:0 12px; gap:8px; }
152
.brand { gap:8px; font-size:.82rem; }
153
.header-logo { max-width:132px; height:24px; }
154
.site-header nav a { margin-left:0; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; font-size:0; }
155
.site-header nav a i { font-size:1rem; margin:0 !important; }
156
.search-grid { grid-template-columns:1fr; }
157
.helper-grid { grid-template-columns:1fr; }
158
.train-meta { grid-template-columns:1fr; }
159
.result-head { align-items:flex-start; flex-direction:column; }
160
.station-strip { max-height:540px; }
161
.station-node { grid-template-columns:206px minmax(0, 1fr); gap:12px; min-height:72px; }
162
.station-node::before { left:82px; }
163
.station-node::after { left:124px; }
164
.station-dot { left:103px; top:27px; }
165
.station-node.current .station-dot { top:22px; }
166
.train-badge { width:82px; padding:4px 5px; font-size:.66rem; }
167
.train-badge.up { left:0; }
168
.train-badge.down { left:134px; }
169
}
170
</style>
171
</head>
172
<body class="<%= (typeof theme !== 'undefined' && theme === 'dark') ? 'dark-mode' : '' %>">
173
<header class="site-header">
174
<div class="brand">
175
<a href="/hinana/lounge"><img src="/image/lounge1.png" alt="비나래 라운지" class="header-logo"></a>
176
<span style="opacity:.4; font-weight:300; color:#fff;">|</span>
177
<span style="color:#fff;">열차 위치 조회</span>
178
</div>
179
<nav>
180
<a href="/hinana/lounge"><i class="bi bi-arrow-left me-1"></i>라운지로</a>
181
<form action="/toggle-theme" method="POST" style="margin:0; display:inline;">
182
<input type="hidden" name="redirect" value="/hinana/subway">
183
<button type="submit" style="background:none; border:none; color:var(--text-secondary); font-size:1rem; cursor:pointer; padding:4px 8px; margin-left:12px;" title="테마 변경">
184
<i class="bi <%= (typeof theme !== 'undefined' && theme === 'dark') ? 'bi-moon-stars-fill' : 'bi-sun-fill' %>"></i>
185
</button>
186
</form>
187
</nav>
188
</header>
189
190
<main class="page-body">
191
<section class="page-title">
192
<h1><i class="bi bi-train-front me-2" style="color:var(--accent);"></i>열차 열번 위치 조회</h1>
193
<p>서울시 지하철 실시간 열차 위치정보 API로 열차가 현재 어느 역에 있고, 진입·도착·출발 중인지 확인합니다.</p>
194
</section>
195
196
<section class="search-card">
197
<form id="searchForm" class="search-grid">
198
<div>
199
<div class="field-label">Train No.</div>
200
<input id="trainNo" class="field" name="trainNo" placeholder="예: 1006" autocomplete="off" required>
201
</div>
202
<div>
203
<div class="field-label">Line</div>
204
<select id="line" class="field" name="line">
205
<option value="">전체 주요 호선 검색</option>
206
<% subwayLines.forEach(function(line) { %>
207
<option value="<%= line %>"><%= line %></option>
208
<% }); %>
209
</select>
210
</div>
211
<div>
212
<div class="field-label">Target Station</div>
213
<select id="targetStation" class="field" name="targetStation" disabled>
214
<option value="">호선을 먼저 선택해 주세요</option>
215
</select>
216
</div>
217
<button id="submitBtn" class="submit-btn" type="submit"><i class="bi bi-search me-1"></i>조회</button>
218
</form>
219
<div class="tracker-bar">
220
<div class="tracker-status" id="trackerStatus">목표역 도착 알림을 쓰려면 호선과 역을 선택한 뒤 추적을 시작하세요.</div>
221
<div class="tracker-actions">
222
<button id="startTrackBtn" class="ghost-btn" type="button"><i class="bi bi-bell me-1"></i>도착 알림 시작</button>
223
<button id="stopTrackBtn" class="ghost-btn" type="button" disabled><i class="bi bi-bell-slash me-1"></i>중지</button>
224
</div>
225
<div class="push-guide">
226
Android Chrome/Edge는 알림 권한을 허용하면 백그라운드에서도 받을 수 있습니다. iPhone은 iOS 16.4 이상에서 홈 화면에 추가한 뒤 실행해야 백그라운드 알림이 동작합니다.
227
</div>
228
</div>
229
</section>
230
231
<section class="helper-card">
232
<div class="helper-title">어떤 열번의 열차를 탔는지/탈 예정인지 모르시나요?</div>
233
<div class="helper-desc">
234
호선을 선택한 뒤 탑승한 역 또는 탑승할 역을 고르면, 그 역에 도착했거나 곧 도착할 열차 후보를 불러옵니다.
235
후보를 선택하면 열번 입력칸에 자동으로 들어가고, 같은 방식으로 조회와 도착 알림을 사용할 수 있어요.
236
</div>
237
<div class="helper-grid">
238
<div>
239
<div class="field-label">Boarding Station</div>
240
<select id="boardingStation" class="field" disabled>
241
<option value="">호선을 먼저 선택해 주세요</option>
242
</select>
243
</div>
244
<button id="loadArrivalsBtn" class="ghost-btn" type="button"><i class="bi bi-search me-1"></i>탑승 열차 찾기</button>
245
</div>
246
<div id="arrivalList" class="arrival-list"></div>
247
</section>
248
249
<section id="resultCard" class="result-card">
250
<div class="result-head">
251
<div>
252
<div class="result-title" id="resultTitle">조회 결과</div>
253
<div class="source-label" id="resultSource">서울시 지하철 실시간 열차 위치정보</div>
254
</div>
255
<div class="source-label" id="searchedLines"></div>
256
</div>
257
<div id="resultBody"></div>
258
</section>
259
260
<section id="routeCard" class="route-card">
261
<div class="route-head">
262
<div>
263
<div class="route-title" id="routeTitle">노선 진행도</div>
264
<div class="route-sub" id="routeSub">현재 열차 위치를 기준으로 대략적인 지나간 역과 앞으로 갈 역을 표시합니다.</div>
265
</div>
266
</div>
267
<div class="route-legend">
268
<span><span class="legend-dot legend-past"></span>지나간 역</span>
269
<span><span class="legend-dot legend-current"></span>현재 위치</span>
270
<span><span class="legend-dot legend-future"></span>앞으로 갈 역</span>
271
<span><span class="legend-dot legend-target"></span>목표역</span>
272
</div>
273
<div id="stationStrip" class="station-strip"></div>
274
</section>
275
276
<section class="info-box">
277
<strong>참고:</strong> 호선을 고르면 API 호출 수를 줄일 수 있습니다. 전체 검색은 여러 호선을 순차 조회하므로 시간이 조금 더 걸릴 수 있어요.
278
서울시 API의 실시간 위치 데이터와 노선 진행도는 현장/관제 갱신 상황, 지선 운행, 회차 방식에 따라 실제 위치와 약간 차이가 날 수 있습니다.
279
이 페이지는 API 호출 제한 보호를 위해 로그인한 사용자만 사용할 수 있습니다. 도착 알림은 서버가 10초마다 추적하므로 브라우저를 백그라운드에 두거나 다른 앱을 사용해도 푸시 알림을 받을 수 있습니다.
280
</section>
281
</main>
282
283
<footer>
284
<img src="/image/sign.png" class="footer-sign" style="width:160px; opacity:.7;">
285
<div style="font-size:.7rem; color:var(--text-secondary); line-height:1.8; margin-top:16px;">
286
<strong>비나래 라운지</strong><br>
287
X - @NoctchillHinana<br>
288
© 2024~2026. 비나래 | hinana.moe
289
</div>
290
</footer>
291
292
<script>
293
const PUSH_KEY = '<%= typeof vapidPublicKey !== "undefined" ? vapidPublicKey : "" %>';
294
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
295
const form = document.getElementById('searchForm');
296
const submitBtn = document.getElementById('submitBtn');
297
const lineSelect = document.getElementById('line');
298
const trainNoInput = document.getElementById('trainNo');
299
const targetStationSelect = document.getElementById('targetStation');
300
const boardingStationSelect = document.getElementById('boardingStation');
301
const loadArrivalsBtn = document.getElementById('loadArrivalsBtn');
302
const arrivalList = document.getElementById('arrivalList');
303
const startTrackBtn = document.getElementById('startTrackBtn');
304
const stopTrackBtn = document.getElementById('stopTrackBtn');
305
const trackerStatus = document.getElementById('trackerStatus');
306
const resultCard = document.getElementById('resultCard');
307
const resultTitle = document.getElementById('resultTitle');
308
const resultSource = document.getElementById('resultSource');
309
const searchedLines = document.getElementById('searchedLines');
310
const resultBody = document.getElementById('resultBody');
311
const routeCard = document.getElementById('routeCard');
312
const routeTitle = document.getElementById('routeTitle');
313
const routeSub = document.getElementById('routeSub');
314
const stationStrip = document.getElementById('stationStrip');
315
let trackingTimer = null;
316
let trackingActive = false;
317
let lastNotifiedKey = '';
318
let currentAlertId = '';
319
let serviceWorkerRegistration = null;
320
let currentStations = [];
321
let selectedBoardingStation = '';
322
let selectedDirectionCode = '';
323
const LINE_COLORS = {
324
'1호선': '#0052A4',
325
'2호선': '#00A84D',
326
'3호선': '#EF7C1C',
327
'4호선': '#00A5DE',
328
'5호선': '#996CAC',
329
'6호선': '#CD7C2F',
330
'7호선': '#747F00',
331
'8호선': '#E6186C',
332
'9호선': '#BDB092',
333
'경의중앙선': '#77C4A3',
334
'경춘선': '#0C8E72',
335
'수인분당선': '#F5A200',
336
'신분당선': '#D4003B',
337
'공항철도': '#0090D2',
338
'경강선': '#003DA5',
339
'서해선': '#8FC31F',
340
'우이신설선': '#B0CE18',
341
'신림선': '#6789CA',
342
'GTX-A': '#9A6292',
343
'인천선': '#7CA8D5',
344
'인천2호선': '#ED8B00',
345
'김포도시철도': '#A17800'
346
};
347
348
function escapeHtml(value) {
349
return String(value ?? '').replace(/[&<>"']/g, function(ch) {
350
return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' })[ch];
351
});
352
}
353
354
function normalizeStationName(name) {
355
return String(name || '').trim().replace(/\s+/g, '').replace(/역$/, '');
356
}
357
358
function stationNamesMatch(a, b) {
359
return normalizeStationName(a) === normalizeStationName(b);
360
}
361
362
function renderEmpty(message) {
363
resultBody.innerHTML = `<p class="empty-message">${escapeHtml(message)}</p>`;
364
}
365
366
async function fetchJson(url, options) {
367
const response = await fetch(url, {
368
credentials: 'same-origin',
369
...(options || {})
370
});
371
const text = await response.text();
372
let data = null;
373
374
try {
375
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
376
} catch (_) {
377
throw new Error(text.trim().startsWith('<')
378
? '지하철 API 라우트가 아직 서버에 반영되지 않았습니다. 최신 배포 후 다시 시도해 주세요.'
379
: '서버 응답을 읽지 못했습니다.');
380
}
381
382
if (!response.ok) {
383
throw new Error(data.message || data.error || '요청에 실패했습니다.');
384
}
385
return data;
386
}
387
388
function renderMatches(matches) {
389
if (!matches.length) {
390
renderEmpty('해당 열번의 열차를 찾지 못했습니다. 호선 선택이 맞는지, 운행 중인 열차인지 확인해 주세요.');
391
return;
392
}
393
394
resultBody.innerHTML = `<div class="train-list">${matches.map(function(item) {
395
const flags = [
396
item.express ? '급행' : '',
397
item.lastTrain ? '막차' : '',
398
item.receivedAt ? '수신: ' + item.receivedAt : ''
399
].filter(Boolean);
400
return `
401
<article class="train-item">
402
<div class="train-main">
403
<div>
404
<div class="train-no">${escapeHtml(item.trainNo)}</div>
405
<div class="source-label">${escapeHtml(item.line)} ${item.subwayId ? '· ' + escapeHtml(item.subwayId) : ''}</div>
406
</div>
407
<div class="status-badge"><i class="bi bi-broadcast-pin"></i>${escapeHtml(item.status)}</div>
408
</div>
409
<div class="train-meta">
410
<div><div class="meta-label">현재 위치</div><div class="meta-value">${escapeHtml(item.stationName || '확인 불가')}</div></div>
411
<div><div class="meta-label">행선지</div><div class="meta-value">${escapeHtml(item.destination || '확인 불가')}</div></div>
412
<div><div class="meta-label">방향</div><div class="meta-value">${escapeHtml(item.direction || '확인 불가')}</div></div>
413
<div><div class="meta-label">상태 코드</div><div class="meta-value">${escapeHtml(item.statusCode)}</div></div>
414
</div>
415
${flags.length ? `<div class="pill-row">${flags.map(flag => `<span class="pill">${escapeHtml(flag)}</span>`).join('')}</div>` : ''}
416
</article>
417
`;
418
}).join('')}</div>`;
419
}
420
421
function renderArrivals(arrivals) {
422
if (!arrivals.length) {
423
arrivalList.innerHTML = '<p class="empty-message">지금 선택한 역에서 확인되는 열차 후보가 없습니다.</p>';
424
return;
425
}
426
427
arrivalList.innerHTML = arrivals.map(function(item) {
428
return `
429
<button class="arrival-item" type="button"
430
data-train-no="${escapeHtml(item.trainNo)}"
431
data-direction="${escapeHtml(item.direction || '')}"
432
data-direction-code="${escapeHtml(item.directionCode || '')}"
433
data-terminal="${escapeHtml(item.terminalStation || '')}"
434
data-station="${escapeHtml(item.stationName || '')}">
435
<div class="arrival-main">
436
<span class="arrival-train">${escapeHtml(item.trainNo)} 열차</span>
437
<span class="arrival-status">${escapeHtml(item.status)}</span>
438
</div>
439
<div class="arrival-meta">
440
${escapeHtml(item.message || '도착 정보 없음')}
441
${item.trainLineName ? ` · ${escapeHtml(item.trainLineName)}` : ''}
442
${item.terminalStation ? ` · ${escapeHtml(item.terminalStation)}행` : ''}
443
</div>
444
</button>
445
`;
446
}).join('');
447
}
448
449
function renderTargetStationOptions(stations) {
450
targetStationSelect.innerHTML = '<option value="">목표역 선택</option>' + stations.map(function(station) {
451
const label = station.frCode ? `${station.name} (${station.frCode})` : station.name;
452
return `<option value="${escapeHtml(station.name)}">${escapeHtml(label)}</option>`;
453
}).join('');
454
targetStationSelect.disabled = stations.length === 0;
455
}
456
457
function filterStationsByDirection(boardingStation, directionCode, terminalStation) {
458
if (!boardingStation || !currentStations.length) return currentStations;
459
const boardingIndex = currentStations.findIndex(function(station) {
460
return station.name === boardingStation;
461
});
462
if (boardingIndex === -1) return currentStations;
463
464
if (terminalStation) {
465
const terminalIndex = currentStations.findIndex(function(station) {
466
return stationNamesMatch(station.name, terminalStation);
467
});
468
if (terminalIndex !== -1 && terminalIndex !== boardingIndex) {
469
const start = Math.min(boardingIndex, terminalIndex);
470
const end = Math.max(boardingIndex, terminalIndex);
471
const segment = currentStations.slice(start, end + 1);
472
return terminalIndex > boardingIndex ? segment.slice(1) : segment.slice(0, -1).reverse();
473
}
474
}
475
476
if (directionCode === '0') return currentStations.slice(0, boardingIndex).reverse();
477
if (directionCode === '1') return currentStations.slice(boardingIndex + 1);
478
return currentStations;
479
}
480
481
function applySelectedTrainTargetFilter() {
482
const selectedTerminal = arrivalList.querySelector('.arrival-item.selected')?.dataset.terminal || '';
483
const filtered = filterStationsByDirection(selectedBoardingStation, selectedDirectionCode, selectedTerminal);
484
renderTargetStationOptions(filtered);
485
if (filtered.length === 0) {
486
trackerStatus.textContent = '선택한 열차의 진행 방향에서 고를 수 있는 목표역이 없습니다.';
487
} else if (selectedBoardingStation && selectedDirectionCode) {
488
trackerStatus.textContent = `${trainNoInput.value} 열차의 진행 방향에 있는 역만 목표역으로 표시했습니다.`;
489
}
490
}
491
492
async function loadStationArrivals() {
493
const line = lineSelect.value;
494
const station = boardingStationSelect.value;
495
if (!line || !station) {
496
if (typeof showAlert === 'function') await showAlert('호선과 탑승역을 선택해 주세요.');
497
return;
498
}
499
500
loadArrivalsBtn.disabled = true;
501
arrivalList.innerHTML = '<p class="empty-message">탑승 가능한 열차 후보를 불러오는 중입니다.</p>';
502
try {
503
const params = new URLSearchParams({ line, station });
504
const data = await fetchJson(`/api/subway/station-arrivals?${params.toString()}`);
505
if (!data.success) throw new Error(data.message || '도착 정보를 불러오지 못했습니다.');
506
renderArrivals(data.arrivals || []);
507
} catch (error) {
508
arrivalList.innerHTML = `<p class="empty-message">${escapeHtml(error.message || '도착 정보를 불러오지 못했습니다.')}</p>`;
509
} finally {
510
loadArrivalsBtn.disabled = false;
511
}
512
}
513
514
function renderTrainBadgesForStation(station, lineTrains, selectedTrainNo, displayDirectionCode) {
515
const trains = (lineTrains || []).filter(function(train) {
516
return stationNamesMatch(train.stationName, station.name);
517
}).slice(0, 4);
518
519
if (!trains.length) return '';
520
521
return trains.map(function(train) {
522
const directionCode = String(train.directionCode ?? '');
523
const sideClass = directionCode === '0' ? 'up' : 'down';
524
const movementClass = directionCode && directionCode === displayDirectionCode ? ' moving-down' : ' moving-up';
525
const statusClass = train.status === '진입' ? ' status-enter' : (train.status === '출발' ? ' status-depart' : ' status-arrive');
526
const selectedClass = String(train.trainNo) === String(selectedTrainNo) ? ' selected' : '';
527
const terminal = train.destination || '';
528
const title = `${terminal ? terminal + '행 ' : ''}${train.trainNo} · ${train.status || '상태 미확인'}`;
529
return `
530
<div class="train-badge ${sideClass}${movementClass}${statusClass}${selectedClass}" title="${escapeHtml(title)}">
531
<span class="train-icon"></span>
532
<span>
533
<span class="train-label">${escapeHtml(train.trainNo)}</span>
534
</span>
535
</div>
536
`;
537
}).join('');
538
}
539
540
function renderTrainChipsForStation(station, lineTrains, selectedTrainNo) {
541
const trains = (lineTrains || []).filter(function(train) {
542
return stationNamesMatch(train.stationName, station.name);
543
}).slice(0, 4);
544
545
if (!trains.length) return '';
546
547
return `<div class="station-train-list">${trains.map(function(train) {
548
const terminal = train.destination || '';
549
const selectedClass = String(train.trainNo) === String(selectedTrainNo) ? ' selected' : '';
550
const label = `${train.trainNo}${terminal ? ' · ' + terminal + '행' : ''}${train.express ? ' · 급행' : ''}${train.lastTrain ? ' · 막차' : ''}`;
551
return `<span class="station-train-chip${selectedClass}" title="${escapeHtml(label)}">${escapeHtml(label)}</span>`;
552
}).join('')}</div>`;
553
}
554
555
function renderRouteMap(match, lineTrains) {
556
const line = lineSelect.value;
557
const targetStation = targetStationSelect.value;
558
if (!line || !currentStations.length || !match) {
559
routeCard.classList.remove('show');
560
stationStrip.innerHTML = '';
561
return;
562
}
563
564
const currentIndex = currentStations.findIndex(function(station) {
565
return stationNamesMatch(station.name, match.stationName);
566
});
567
if (currentIndex === -1) {
568
routeCard.classList.add('show');
569
routeTitle.textContent = `${line} 노선 진행도`;
570
routeSub.textContent = `${match.stationName || '현재역'} 위치가 역 목록과 정확히 매칭되지 않았습니다.`;
571
stationStrip.innerHTML = '';
572
return;
573
}
574
575
const directionCode = String(match.directionCode ?? '');
576
const displayStations = directionCode === '0' ? currentStations.slice().reverse() : currentStations.slice();
577
const displayCurrentIndex = displayStations.findIndex(function(station) {
578
return stationNamesMatch(station.name, match.stationName);
579
});
580
581
routeCard.classList.add('show');
582
routeTitle.textContent = `${line} ${match.trainNo} 진행도`;
583
routeSub.textContent = `${match.stationName}역 ${match.status} · ${match.direction || '방향 미확인'} · 목표역 ${targetStation || '미선택'}`;
584
stationStrip.style.setProperty('--line-color', LINE_COLORS[line] || 'var(--accent)');
585
stationStrip.innerHTML = displayStations.map(function(station, index) {
586
const isCurrent = stationNamesMatch(station.name, match.stationName);
587
const isTarget = targetStation && stationNamesMatch(station.name, targetStation);
588
const state = index < displayCurrentIndex ? 'past' : (isCurrent ? 'current' : 'future');
589
const title = `${station.name}${station.frCode ? ' (' + station.frCode + ')' : ''}`;
590
return `
591
<div class="station-node ${state}${isTarget ? ' target' : ''}" data-current="${isCurrent ? 'true' : 'false'}" title="${escapeHtml(title)}">
592
<div class="station-rail">
593
<div class="station-dot"></div>
594
<div class="train-badges">${renderTrainBadgesForStation(station, lineTrains || [], match.trainNo, directionCode)}</div>
595
</div>
596
<div class="station-info">
597
<div class="station-name">${escapeHtml(station.name)}${station.frCode ? `<span class="station-code">${escapeHtml(station.frCode)}</span>` : ''}</div>
598
${renderTrainChipsForStation(station, lineTrains || [], match.trainNo)}
599
</div>
600
</div>
601
`;
602
}).join('');
603
604
const currentEl = stationStrip.querySelector('[data-current="true"]');
605
if (currentEl) {
606
requestAnimationFrame(function() {
607
currentEl.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
608
});
609
}
610
}
611
612
function getArrivalMessage(status) {
613
if (status === '진입') return '열차가 도착역에 진입했어요. 하차하세요.';
614
return '열차가 도착역에 도착했어요. 하차하세요.';
615
}
616
617
async function showBrowserNotification(title, body) {
618
if (!('Notification' in window) || Notification.permission !== 'granted') return;
619
if (!('serviceWorker' in navigator)) return;
620
621
const reg = serviceWorkerRegistration || await navigator.serviceWorker.register('/sw.js');
622
serviceWorkerRegistration = reg;
623
const readyRegistration = await navigator.serviceWorker.ready;
624
await readyRegistration.showNotification(title, {
625
body,
626
icon: '/image/title.png',
627
badge: '/image/title.png',
628
data: { url: '/hinana/subway' }
629
});
630
}
631
632
function notifyArrival(trainNo, status) {
633
const title = `${trainNo} 열차 ${status}`;
634
const body = getArrivalMessage(status);
635
showBrowserNotification(title, body).catch(function(error) {
636
console.warn('브라우저 알림 표시 실패:', error);
637
});
638
if (typeof showAlert === 'function') {
639
showAlert(body);
640
} else {
641
alert(body);
642
}
643
}
644
645
function urlBase64ToUint8Array(b64) {
646
const pad = '='.repeat((4 - b64.length % 4) % 4);
647
const base64 = (b64 + pad).replace(/-/g, '+').replace(/_/g, '/');
648
const raw = atob(base64);
649
return Uint8Array.from(raw, c => c.charCodeAt(0));
650
}
651
652
function arrayBufferToBase64Url(buffer) {
653
const bytes = new Uint8Array(buffer);
654
let binary = '';
655
bytes.forEach(function(byte) { binary += String.fromCharCode(byte); });
656
return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
657
}
658
659
function subscriptionUsesCurrentKey(subscription) {
660
if (!subscription || !subscription.options || !subscription.options.applicationServerKey) return true;
661
return arrayBufferToBase64Url(subscription.options.applicationServerKey) === PUSH_KEY;
662
}
663
664
async function ensurePushSubscription() {
665
if (!PUSH_USER) throw new Error('서버 도착 알림은 로그인이 필요합니다.');
666
if (!PUSH_KEY) throw new Error('푸시 알림 키가 설정되어 있지 않습니다.');
667
if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
668
throw new Error('이 브라우저는 푸시 알림을 지원하지 않습니다.');
669
}
670
671
const reg = serviceWorkerRegistration || await navigator.serviceWorker.register('/sw.js');
672
serviceWorkerRegistration = reg;
673
await navigator.serviceWorker.ready;
674
675
if ('Notification' in window && Notification.permission === 'default') {
676
const permission = await Notification.requestPermission();
677
if (permission !== 'granted') throw new Error('알림 권한이 허용되지 않았습니다.');
678
}
679
if ('Notification' in window && Notification.permission === 'denied') {
680
throw new Error('브라우저 알림 권한이 차단되어 있습니다.');
681
}
682
683
let subscription = await reg.pushManager.getSubscription();
684
if (subscription && !subscriptionUsesCurrentKey(subscription)) {
685
await subscription.unsubscribe();
686
subscription = null;
687
}
688
if (!subscription) {
689
subscription = await reg.pushManager.subscribe({
690
userVisibleOnly: true,
691
applicationServerKey: urlBase64ToUint8Array(PUSH_KEY)
692
});
693
}
694
695
await fetchJson('/api/push/subscribe', {
696
method: 'POST',
697
headers: { 'Content-Type': 'application/json' },
698
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
699
});
700
}
701
702
async function createServerAlert(trainNo, line, targetStation) {
703
const data = await fetchJson('/api/subway/alerts', {
704
method: 'POST',
705
headers: { 'Content-Type': 'application/json' },
706
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
707
});
708
if (!data.success) throw new Error(data.message || '도착 알림을 등록하지 못했습니다.');
709
return data.alert;
710
}
711
712
async function cancelServerAlert() {
713
if (!currentAlertId) return;
714
await fetchJson(`/api/subway/alerts/${encodeURIComponent(currentAlertId)}`, { method: 'DELETE' }).catch(function() {});
715
currentAlertId = '';
716
}
717
718
async function loadStationsForLine(line) {
719
targetStationSelect.disabled = true;
720
boardingStationSelect.disabled = true;
721
selectedBoardingStation = '';
722
selectedDirectionCode = '';
723
targetStationSelect.innerHTML = '<option value="">역 목록을 불러오는 중...</option>';
724
boardingStationSelect.innerHTML = '<option value="">역 목록을 불러오는 중...</option>';
725
arrivalList.innerHTML = '';
726
if (!line) {
727
currentStations = [];
728
routeCard.classList.remove('show');
729
targetStationSelect.innerHTML = '<option value="">호선을 먼저 선택해 주세요</option>';
730
boardingStationSelect.innerHTML = '<option value="">호선을 먼저 선택해 주세요</option>';
731
return;
732
}
733
try {
734
const data = await fetchJson(`/api/subway/stations?line=${encodeURIComponent(line)}`);
735
if (!data.success) throw new Error(data.message || '역 목록을 불러오지 못했습니다.');
736
currentStations = data.stations || [];
737
const stationOptions = (data.stations || []).map(function(station) {
738
const label = station.frCode ? `${station.name} (${station.frCode})` : station.name;
739
return `<option value="${escapeHtml(station.name)}">${escapeHtml(label)}</option>`;
740
}).join('');
741
renderTargetStationOptions(data.stations || []);
742
boardingStationSelect.innerHTML = '<option value="">탑승역 선택</option>' + stationOptions;
743
boardingStationSelect.disabled = false;
744
trackerStatus.textContent = `${line} 역 목록을 불러왔습니다. 목표역을 선택하면 도착 알림을 시작할 수 있어요.`;
745
} catch (error) {
746
currentStations = [];
747
routeCard.classList.remove('show');
748
targetStationSelect.innerHTML = '<option value="">역 목록 로드 실패</option>';
749
boardingStationSelect.innerHTML = '<option value="">역 목록 로드 실패</option>';
750
trackerStatus.textContent = error.message || '역 목록을 불러오지 못했습니다.';
751
}
752
}
753
754
async function queryTrainPosition(options = {}) {
755
const trainNo = trainNoInput.value.trim();
756
const line = lineSelect.value;
757
if (!trainNo) return;
758
759
if (!options.silent) {
760
resultCard.classList.add('show');
761
resultTitle.textContent = `${trainNo} 조회 중...`;
762
resultSource.textContent = '서울시 지하철 실시간 열차 위치정보';
763
searchedLines.textContent = '';
764
renderEmpty('실시간 위치를 확인하고 있습니다.');
765
submitBtn.disabled = true;
766
}
767
768
try {
769
const params = new URLSearchParams({ trainNo });
770
if (line) params.set('line', line);
771
const data = await fetchJson(`/api/subway/train-position?${params.toString()}`);
772
if (!data.success) throw new Error(data.message || '조회에 실패했습니다.');
773
774
resultTitle.textContent = `${data.trainNo} 조회 결과`;
775
resultSource.textContent = data.source || '서울시 지하철 실시간 열차 위치정보';
776
searchedLines.textContent = `${data.searchedLines.length}개 호선 조회`;
777
renderMatches(data.matches || []);
778
renderRouteMap((data.matches || [])[0], data.lineTrains || []);
779
return data;
780
} catch (error) {
781
if (!options.silent) {
782
resultTitle.textContent = '조회 실패';
783
searchedLines.textContent = '';
784
renderEmpty(error.message || '잠시 후 다시 시도해 주세요.');
785
routeCard.classList.remove('show');
786
}
787
throw error;
788
} finally {
789
if (!options.silent) submitBtn.disabled = false;
790
}
791
}
792
793
async function pollTracking() {
794
if (!trackingActive) return;
795
const targetStation = targetStationSelect.value;
796
const line = lineSelect.value;
797
const trainNo = trainNoInput.value.trim();
798
799
try {
800
const data = await queryTrainPosition({ silent: true });
801
const match = (data.matches || []).find(function(item) {
802
return stationNamesMatch(item.stationName, targetStation) && (item.status === '진입' || item.status === '도착');
803
});
804
const current = (data.matches || [])[0];
805
renderRouteMap(current, data.lineTrains || []);
806
if (current) {
807
trackerStatus.textContent = `${trainNo} 추적 중 · 현재 ${current.line} ${current.stationName || '위치 미확인'} · ${current.status}`;
808
} else {
809
trackerStatus.textContent = `${trainNo} 추적 중 · 현재 운행 위치를 찾지 못했습니다.`;
810
}
811
if (match) {
812
const notifyKey = `${trainNo}:${line}:${targetStation}:${match.receivedAt || Date.now()}`;
813
if (notifyKey !== lastNotifiedKey) {
814
lastNotifiedKey = notifyKey;
815
trackerStatus.textContent = `${getArrivalMessage(match.status)} 서버 푸시 알림이 곧 전송됩니다.`;
816
}
817
}
818
} catch (error) {
819
trackerStatus.textContent = '화면 갱신에 실패했지만 서버 도착 알림은 계속 추적 중입니다.';
820
}
821
}
822
823
async function startTracking() {
824
const trainNo = trainNoInput.value.trim();
825
const line = lineSelect.value;
826
const targetStation = targetStationSelect.value;
827
if (!PUSH_USER) {
828
if (typeof showAlert === 'function') await showAlert('도착 알림 기능은 로그인 후 사용할 수 있습니다.');
829
return;
830
}
831
if (!trainNo || !line || !targetStation) {
832
if (typeof showAlert === 'function') await showAlert('열번, 호선, 목표역을 모두 선택해 주세요.');
833
return;
834
}
835
836
try {
837
await ensurePushSubscription();
838
const serverAlert = await createServerAlert(trainNo, line, targetStation);
839
currentAlertId = serverAlert.id;
840
} catch (error) {
841
if (typeof showAlert === 'function') await showAlert(error.message || '도착 알림을 등록하지 못했습니다.');
842
return;
843
}
844
845
trackingActive = true;
846
lastNotifiedKey = '';
847
startTrackBtn.disabled = true;
848
stopTrackBtn.disabled = false;
849
trackerStatus.textContent = `${trainNo} 열차가 ${targetStation}역에 도착하는지 서버에서 10초마다 확인 중입니다. 브라우저를 백그라운드에 둬도 푸시 알림이 전송됩니다.`;
850
await pollTracking();
851
if (trackingActive) trackingTimer = setInterval(pollTracking, 10 * 1000);
852
}
853
854
async function resumeTracking(alert) {
855
if (!alert || !alert.active) return;
856
currentAlertId = alert.id;
857
trainNoInput.value = alert.trainNo;
858
lineSelect.value = alert.line;
859
await loadStationsForLine(alert.line);
860
targetStationSelect.value = alert.targetStation;
861
862
trackingActive = true;
863
startTrackBtn.disabled = true;
864
stopTrackBtn.disabled = false;
865
trackerStatus.textContent = `${alert.trainNo} 열차가 ${alert.targetStation}역에 도착하는지 서버에서 추적 중입니다. 브라우저를 백그라운드에 둬도 푸시 알림이 전송됩니다.`;
866
await pollTracking();
867
if (trackingActive) trackingTimer = setInterval(pollTracking, 10 * 1000);
868
}
869
870
async function loadExistingAlert() {
871
if (!PUSH_USER) return;
872
try {
873
const data = await fetchJson('/api/subway/alerts');
874
if (!data.success) return;
875
const activeAlert = (data.alerts || []).find(function(alert) { return alert.active; });
876
if (activeAlert) await resumeTracking(activeAlert);
877
} catch (_) {}
878
}
879
880
async function stopTracking(showMessage = true) {
881
trackingActive = false;
882
if (trackingTimer) clearInterval(trackingTimer);
883
trackingTimer = null;
884
await cancelServerAlert();
885
startTrackBtn.disabled = false;
886
stopTrackBtn.disabled = true;
887
if (showMessage) trackerStatus.textContent = '도착 알림 추적을 중지했습니다.';
888
}
889
890
form.addEventListener('submit', async function(event) {
891
event.preventDefault();
892
queryTrainPosition().catch(function() {});
893
});
894
895
lineSelect.addEventListener('change', function() {
896
stopTracking(false);
897
loadStationsForLine(this.value);
898
});
899
loadArrivalsBtn.addEventListener('click', loadStationArrivals);
900
arrivalList.addEventListener('click', function(event) {
901
const item = event.target.closest('.arrival-item');
902
if (!item) return;
903
arrivalList.querySelectorAll('.arrival-item').forEach(function(el) { el.classList.remove('selected'); });
904
item.classList.add('selected');
905
trainNoInput.value = item.dataset.trainNo || '';
906
selectedBoardingStation = item.dataset.station || boardingStationSelect.value;
907
selectedDirectionCode = item.dataset.directionCode || '';
908
applySelectedTrainTargetFilter();
909
});
910
if (startTrackBtn) startTrackBtn.addEventListener('click', startTracking);
911
if (stopTrackBtn) stopTrackBtn.addEventListener('click', function() { stopTracking(true); });
912
913
(async function initServiceWorker() {
914
if (!('serviceWorker' in navigator)) return;
915
serviceWorkerRegistration = await navigator.serviceWorker.register('/sw.js').catch(function() { return null; });
916
})();
917
loadExistingAlert();
918
</script>
919
</body>
920
</html>
921