Public Source Viewer
비나래아카이브 개발자 포털
실제 서비스 구조를 살펴볼 수 있는 공개용 코드 뷰어입니다. 인증, 세션, 외부 연동, 토큰, 관리자 식별 등 보안상 민감한 구현은 파일 단위 또는 줄 단위로 검열됩니다.
view/hinana/post.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">
7
<link rel="manifest" href="/manifest.json">
8
<title>게시글 상세 - Hinana.moe</title>
9
<meta name="theme-color" content="<%= (typeof theme !== 'undefined' && theme === 'dark') ? '#000000' : '#ffffff' %>">
10
<meta name="apple-mobile-web-app-title" content="비나래 아카이브">
11
<meta property="og:image" content="/image/2.png" />
12
<meta property="og:description" content="morikubo"/>
13
<meta property="og:url" content="hinana.moe"/>
14
<meta property="og:title" content="비나래 아카이브"/>
15
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
16
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
17
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
18
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
19
<script src="/js/popup.js"></script>
20
21
<style>
22
:root {
23
--font-family: 'Noto Sans KR', sans-serif;
24
--bg-main: #ffffff; --bg-secondary: #f7f9f9; --bg-tertiary: #eff3f4;
25
--text-primary: #0f1419; --text-secondary: #536471;
26
--accent-color: #1d9bf0; --danger-color: #f4212e; --border-color: #eff3f4;
27
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
28
}
29
body.dark-mode {
30
--bg-main: #000000; --bg-secondary: #16181c; --bg-tertiary: #202327;
31
--text-primary: #e7e9ea; --text-secondary: #71767b;
32
--border-color: #2f3336; --accent-color: #1d9bf0; --danger-color: #f4212e;
33
--shadow-sm: 0 1px 3px rgba(255,255,255,0.04);
34
}
35
36
html, body { height: 100%; margin: 0; font-family: var(--font-family); background-color: var(--bg-main); color: var(--text-primary); overflow: hidden; }
37
a { text-decoration: none; color: inherit; }
38
39
/* 헤더 */
40
.global-header {
41
height: 60px;
42
background-color: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
43
border-bottom: 1px solid var(--border-color);
44
display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
45
position: sticky; top: 0; z-index: 1000;
46
}
47
body.dark-mode .global-header { background-color: rgba(0,0,0,0.85); }
48
.header-brand { display: flex; align-items: center; }
49
.header-logo { height: 28px; width: auto; }
50
51
.header-nav {
52
position: absolute; left: 50%; transform: translateX(-50%);
53
display: flex; gap: 20px; align-items: center; z-index: 5;
54
}
55
.nav-link { font-weight: 600; font-size: 0.95rem; color: var(--text-secondary); }
56
.nav-link:hover { color: var(--accent-color); }
57
.nav-link.active { color: var(--text-primary); }
58
.nav-divider { opacity: 0.3; color: var(--text-secondary); }
59
.login-link { color: var(--accent-color); font-weight: bold; }
60
61
.header-controls { display: flex; align-items: center; gap: 10px; z-index: 10; position: relative; background-color: var(--bg-tertiary); }
62
63
.layout-container { display: flex; height: calc(100vh - 60px); }
64
65
/* [좌측] 뒤로가기 안내 */
66
.shelf-column {
67
width: 300px; min-width: 300px; background-color: var(--bg-secondary);
68
border-right: 1px solid var(--border-color); display: flex; flex-direction: column;
69
justify-content: center; align-items: center; color: var(--text-secondary); font-size: 0.9rem;
70
}
71
72
/* [중앙] 본문 */
73
.content-column {
74
flex: 1; display: flex; flex-direction: column;
75
background-color: var(--bg-main); position: relative; overflow: hidden;
76
min-height: 0;
77
}
78
.content-scroll-area {
79
flex: 1; overflow-y: auto; padding: 30px;
80
min-height: 0;
81
}
82
.content-card {
83
background-color: var(--bg-secondary); border-radius: 12px; box-shadow: var(--shadow-sm);
84
border: 1px solid var(--border-color);
85
width: 100%; max-width: 800px; margin: 0 auto 30px auto;
86
}
87
88
.post-header {
89
padding: 20px; background-color: var(--bg-tertiary); border-bottom: 1px solid var(--border-color);
90
display: flex; justify-content: space-between; align-items: center;
91
}
92
.post-avatar {
93
width: 48px; height: 48px; background-color: var(--bg-secondary);
94
border: 2px solid var(--border-color); border-radius: 50%;
95
display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: bold; color: var(--text-secondary);
96
}
97
.post-meta { flex: 1; margin-left: 15px; }
98
.post-author { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
99
.badge-admin { background-color: var(--accent-color); color: var(--ui-on-accent, #fff); padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; }
100
.post-date { font-size: 0.85rem; color: var(--text-secondary); }
101
102
.post-content {
103
padding: 30px; font-size: 1.1rem; line-height: 1.8; color: var(--text-primary);
104
white-space: normal; word-break: break-all; text-align: left;
105
}
106
107
.post-actions {
108
padding: 15px 20px; background-color: var(--bg-main); border-top: 1px solid var(--border-color);
109
display: flex; justify-content: flex-end; gap: 10px;
110
}
111
.action-btn {
112
display: flex; align-items: center; gap: 6px; padding: 8px 12px;
113
border-radius: 6px; border: 1px solid var(--border-color);
114
background: var(--bg-secondary); color: var(--text-secondary);
115
font-size: 0.9rem; cursor: pointer; transition: all 0.2s;
116
}
117
.action-btn:hover { background-color: var(--border-color); color: var(--text-primary); }
118
.action-btn.liked { color: var(--danger-color); border-color: var(--danger-color); background-color: rgba(220, 38, 38, 0.1); }
119
120
.replies-container { padding: 20px; background-color: var(--bg-main); }
121
.reply-item { margin-bottom: 15px; padding-left: 15px; border-left: 3px solid var(--border-color); }
122
.reply-meta { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 5px; }
123
.reply-author { font-weight: 600; display: flex; align-items: center; gap: 4px; }
124
.reply-content { font-size: 0.95rem; line-height: 1.5; }
125
126
/* [우측] 정보창 */
127
.info-column {
128
width: 260px; min-width: 260px; background-color: var(--bg-secondary);
129
border-left: 1px solid var(--border-color); padding: 20px;
130
display: flex; flex-direction: column; gap: 20px;
131
}
132
.info-card {
133
background-color: var(--bg-main); border-radius: 12px; padding: 20px;
134
border: 1px solid var(--border-color); box-shadow: var(--shadow-sm);
135
}
136
.info-card-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }
137
138
/* 테마 토글 */
139
.theme-toggle-wrapper { display: flex; align-items: center; justify-content: space-between; }
140
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
141
.switch input { opacity: 0; width: 0; height: 0; }
142
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--text-secondary); transition: .4s; border-radius: 24px; }
143
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
144
input:checked + .slider { background-color: var(--accent-color); }
145
input:checked + .slider:before { transform: translateX(20px); }
146
147
/* [반응형 수정 - index.ejs와 동일하게 우측 패널 하단 이동] */
148
@media (max-width: 960px) {
149
html, body { overflow: auto !important; height: auto !important; }
150
.layout-container { flex-direction: column; height: auto !important; }
151
152
.global-header { flex-wrap: wrap; height: auto; padding: 10px 20px; }
153
.header-nav { position: static; transform: none; width: 100%; justify-content: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.05); order: 3; }
154
.header-brand { flex: 1; order: 1; }
155
.header-controls { flex: auto; justify-content: flex-end; background-color: transparent; order: 2; }
156
157
/* 좌측은 숨김 (목록으로 가기 버튼이 있으므로) */
158
.shelf-column { display: none; }
159
160
/* 중앙 본문 */
161
.content-column { width: 100%; height: auto !important; border: none; overflow: visible; order: 1; }
162
.content-scroll-area { padding: 15px; height: auto !important; overflow: visible; }
163
164
/* 우측 정보창 -> 하단으로 이동 */
165
.info-column {
166
display: flex; /* 보이게 설정 */
167
width: 100%; height: auto;
168
border-left: none; border-top: 1px solid var(--border-color);
169
order: 2; /* 본문 아래 */
170
padding: 20px; flex-direction: row; flex-wrap: wrap;
171
}
172
.info-card { flex: 1; min-width: 200px; margin-bottom: 0; }
173
.footer-info { display: none; }
174
}
175
176
.d-none { display: none !important; }
177
178
/* 인증마크 */
179
.verified-badge { color: #1d9bf0; font-size: 0.85em; margin-left: 2px; }
180
.verified-badge-admin { color: var(--accent-color); font-size: 0.85em; margin-left: 2px; }
181
182
/* 해시태그 */
183
.post-content a.hashtag, .reply-content a.hashtag { color: #2196F3 !important; text-decoration: none; cursor: pointer; }
184
.post-content a.hashtag:hover, .reply-content a.hashtag:hover { color: #1976D2 !important; text-decoration: underline; }
185
.post-content a.external-link, .reply-content a.external-link { color: #2196F3 !important; text-decoration: none; cursor: pointer; }
186
.post-content a.external-link:hover, .reply-content a.external-link:hover { color: #1976D2 !important; text-decoration: underline; }
187
188
/* 링크 미리보기 카드 */
189
.link-preview-card {
190
display: flex; max-width: 400px; margin: 8px 0 4px; border-radius: 8px;
191
overflow: hidden; border: 1px solid var(--border-color);
192
background-color: var(--bg-secondary); cursor: pointer;
193
}
194
.link-preview-bar { width: 4px; flex-shrink: 0; background-color: var(--accent-color); }
195
.link-preview-body { padding: 10px 12px; flex: 1; min-width: 0; }
196
.link-preview-domain { font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 3px; }
197
.link-preview-title { font-size: 0.85rem; font-weight: 700; color: #2196F3; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
198
.link-preview-desc {
199
font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4;
200
display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
201
}
202
.link-preview-img { margin-top: 8px; border-radius: 4px; max-width: 100%; max-height: 200px; object-fit: cover; }
203
</style>
204
<link rel="stylesheet" href="/css/site-ui.css?v=3">
205
<link rel="stylesheet" href="/css/site-app.css?v=1">
206
</head>
207
208
<body data-ui-page="post" class="ui-shell <%= (typeof theme !== 'undefined' && theme === 'dark') ? 'dark-mode' : '' %>">
209
210
<%- include('partials/site-header', { uiPage: 'post' }) %>
211
212
<div id="ui-content" tabindex="-1" role="main" class="layout-container">
213
214
<div class="shelf-column">
215
<div class="text-center">
216
<a href="/hinana/index" class="btn btn-outline-secondary btn-sm">
217
<i class="bi bi-arrow-left"></i> 목록으로
218
</a>
219
</div>
220
</div>
221
222
<div class="content-column">
223
<div class="content-scroll-area custom-scrollbar">
224
225
<div class="content-card">
226
<div class="post-header">
227
<div class="d-flex align-items-center gap-3">
228
<div class="post-avatar">
229
<% var authorName = post.username.replace('(익명)', '').trim(); %>
230
<% if (!post.username.endsWith('(익명)') && typeof userProfileImages !== 'undefined' && userProfileImages[authorName]) { %>
231
<img src="<%= userProfileImages[authorName] %>" style="width:100%; height:100%; border-radius:50%; object-fit:cover;">
232
<% } else { %>
233
<%= post.username.substring(0,1).toUpperCase() %>
234
<% } %>
235
</div>
236
<div class="post-meta">
237
<div class="post-author">
238
<%= post.username.replace('(익명)', '').trim() %>
239
<% if(post.username.endsWith('(익명)')) { %>
240
<i class="bi bi-incognito ms-1 text-muted" title="익명"></i>
241
<% } %>
242
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
243
<% } else if(typeof verifiedUsers !== 'undefined' && verifiedUsers.includes(post.username.replace('(익명)',''))) { %><i class="bi bi-patch-check-fill verified-badge" title="인증됨"></i><% } %>
244
</div>
245
<div class="post-date">
246
<%= fmtDate(post.timestamp) %>
247
<% if(post.isPrivate) { %><i class="bi bi-lock-fill ms-1 text-warning"></i><% } %>
248
</div>
249
</div>
250
</div>
251
252
<div>
253
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
254
<form action="/delete" method="POST" data-confirm="삭제하시겠습니까?">
255
<input type="hidden" name="id" value="<%= post.id %>">
256
<button class="btn btn-link text-secondary p-0"><i class="bi bi-trash"></i></button>
257
</form>
258
<% } else if (post.username.endsWith('(익명)') && typeof isAnonymousPostingEnabled !== 'undefined' && isAnonymousPostingEnabled) { %>
259
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
260
<% } %>
261
</div>
262
</div>
263
264
<div class="post-content">
265
<% if(post.image) { %>
266
<div class="mb-3">
267
<img src="<%= post.image %>" alt="Attached" class="img-fluid rounded" style="max-width: 100%;">
268
</div>
269
<% } %>
270
<%- post.content
271
.replace(/<script[^>]*>([\S\s]*?)<\/script>/gim, "")
272
.replace(/<a\s+href="([^"]*?)"\s+class="hashtag">([^<]*?)<\/a>/gim, '___HASHTAG___$1___$2___END___')
273
.replace(/<a\s+href="#"\s+class="external-link"\s+data-url="([^"]*?)">([^<]*?)<\/a>/gim, '___EXTLINK___$1___$2___END___')
274
.replace(/<\/p>\s*<p[^>]*>/gim, '\n')
275
.replace(/<br\s*\/?>/gim, '\n')
276
.replace(/<\/div>\s*<div[^>]*>/gim, '\n')
277
.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, "")
278
.replace(/___HASHTAG___(.*?)___(.*?)___END___/gim, '<a href="$1" class="hashtag">$2</a>')
279
.replace(/___EXTLINK___(.*?)___(.*?)___END___/gim, '<a href="#" class="external-link" data-url="$1">$2</a>')
280
.replace(/ /g, ' ')
281
.replace(/\n/g, '<br>')
282
%>
283
</div>
284
285
<div class="post-actions">
286
<form action="/like" method="POST" class="like-form">
287
<input type="hidden" name="postId" value="<%= post.id %>">
288
<% const isLiked = post.likes && post.likes.includes(username); %>
289
<button type="submit" class="action-btn <%= isLiked ? 'liked' : '' %>">
290
<i class="bi <%= isLiked ? 'bi-heart-fill' : 'bi-heart' %>"></i>
291
<span class="like-count">Likes <%= post.likes ? post.likes.length : 0 %></span>
292
</button>
293
</form>
294
<button class="action-btn" onclick="toggleReplyForm()">
295
<i class="bi bi-chat-quote-fill"></i> Reply
296
</button>
297
</div>
298
299
<div id="reply-form" class="d-none p-3 bg-tertiary border-top">
300
<% if(username) { %>
301
<form action="/reply" method="POST">
302
<input type="hidden" name="postId" value="<%= post.id %>">
303
<input type="hidden" name="redirectUrl" value="/post/<%= post.id %>">
304
<div class="d-flex gap-2">
305
<textarea class="write-textarea" name="content" rows="2" placeholder="답글 작성..." required style="resize:none; width:100%; border-radius:6px; border:1px solid var(--border-color); padding:8px;"></textarea>
306
<button class="ui-accent-control btn btn-sm btn-secondary" style="background:var(--accent-color); border:none; color:var(--ui-on-accent, #fff);">전송</button>
307
</div>
308
</form>
309
<% } else if(typeof isAnonymousPostingEnabled !== 'undefined' && isAnonymousPostingEnabled) { %>
310
<form action="/reply" method="POST">
311
<input type="hidden" name="postId" value="<%= post.id %>">
312
<input type="hidden" name="redirectUrl" value="/post/<%= post.id %>">
313
<input type="hidden" name="isAnonymous" value="true">
314
<div class="row g-2 mb-2">
315
<div class="col-6"><input type="text" class="form-control form-control-sm" name="anonymousUsername" placeholder="닉네임" required></div>
316
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
317
</div>
318
<div class="d-flex gap-2">
319
<textarea class="write-textarea" name="content" rows="2" placeholder="익명 답글..." required style="resize:none; width:100%; border-radius:6px; border:1px solid var(--border-color); padding:8px;"></textarea>
320
<button class="ui-accent-control btn btn-sm btn-secondary" style="background:var(--accent-color); border:none; color:var(--ui-on-accent, #fff);">전송</button>
321
</div>
322
</form>
323
<% } else { %>
324
<div class="text-center py-2">
325
<a href="/login?redirect=/post/<%= post.id %>" class="btn btn-sm btn-primary">로그인하여 답글 달기</a>
326
</div>
327
<% } %>
328
</div>
329
330
<% if(replies && replies.length > 0) { %>
331
<div class="replies-container">
332
<div class="replies-header mb-3 fw-bold text-secondary">
333
<i class="bi bi-chat-dots"></i> Comments (<%= replies.length %>)
334
</div>
335
336
<% function renderReplies(replyList, depth) { %>
337
<% replyList.forEach(function(reply) { %>
338
<div class="reply-item" style="margin-left: <%= depth * 20 %>px;">
339
<div class="reply-meta">
340
<div class="reply-author">
341
<% var replyUser = reply.username.replace('(익명)', '').trim(); %>
342
<% if(!reply.username.endsWith('(익명)') && typeof userProfileImages !== 'undefined' && userProfileImages[replyUser]) { %>
343
<img src="<%= userProfileImages[replyUser] %>" style="width:20px; height:20px; border-radius:50%; object-fit:cover; border:1px solid var(--border-color); flex-shrink:0;">
344
<% } %>
345
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
346
<%= reply.username.replace('(익명)', '').trim() %>
347
</span>
348
<% if(reply.username.endsWith('(익명)')) { %>
349
<i class="bi bi-incognito ms-1 text-muted" style="font-size:0.9em;"></i>
350
<% } %>
351
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
352
<% } else if(typeof verifiedUsers !== 'undefined' && verifiedUsers.includes(reply.username.replace('(익명)','').trim())) { %><i class="bi bi-patch-check-fill verified-badge" title="인증됨"></i><% } %>
353
</div>
354
355
<div class="text-end">
356
<span class="text-muted small">
357
<%= fmtDate(reply.timestamp) %>
358
</span>
359
360
<div class="mt-1">
361
<button class="btn p-0 text-secondary border-0 bg-transparent me-2" style="font-size:0.75rem;" onclick="toggleReplyForm('<%= reply.id %>')">
362
<i class="bi bi-chat-quote-fill"></i> 답글
363
</button>
364
365
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
366
<form action="/delete-reply" method="POST" class="d-inline" data-confirm="삭제하시겠습니까?">
367
<input type="hidden" name="postId" value="<%= post.id %>">
368
<input type="hidden" name="replyId" value="<%= reply.id %>">
369
<button class="btn p-0 text-danger border-0 bg-transparent" style="font-size:0.75rem;"><i class="bi bi-trash"></i></button>
370
</form>
371
<% } else if(reply.username.endsWith('(익명)') && typeof isAnonymousPostingEnabled !== 'undefined' && isAnonymousPostingEnabled) { %>
372
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
373
<% } %>
374
</div>
375
</div>
376
</div>
377
378
<div class="reply-content">
379
<%- (reply.content || '')
380
.replace(/<script[^>]*>([\S\s]*?)<\/script>/gim, "")
381
.replace(/<a\s+href="([^"]*?)"\s+class="hashtag">([^<]*?)<\/a>/gim, '___HASHTAG___$1___$2___END___')
382
.replace(/<a\s+href="#"\s+class="external-link"\s+data-url="([^"]*?)">([^<]*?)<\/a>/gim, '___EXTLINK___$1___$2___END___')
383
.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, "")
384
.replace(/___HASHTAG___(.*?)___(.*?)___END___/gim, '<a href="$1" class="hashtag">$2</a>')
385
.replace(/___EXTLINK___(.*?)___(.*?)___END___/gim, '<a href="#" class="external-link" data-url="$1">$2</a>')
386
.replace(/ /g, ' ')
387
.replace(/\n/g, '<br>')
388
%>
389
</div>
390
391
<div id="reply-form-<%= reply.id %>" class="d-none p-2 bg-tertiary rounded mb-3 mt-2">
392
<% if(username) { %>
393
<form action="/reply" method="POST">
394
<input type="hidden" name="postId" value="<%= post.id %>">
395
<input type="hidden" name="parentReplyId" value="<%= reply.id %>">
396
<input type="hidden" name="redirectUrl" value="/post/<%= post.id %>">
397
<div class="d-flex gap-2">
398
<textarea class="write-textarea" name="content" rows="1" placeholder="답글..." required style="resize:none; font-size:0.9rem; padding:6px;"></textarea>
399
<button class="btn btn-sm btn-accent text-white" style="background:var(--accent-color); border:none;">등록</button>
400
</div>
401
</form>
402
<% } else if(typeof isAnonymousPostingEnabled !== 'undefined' && isAnonymousPostingEnabled) { %>
403
<form action="/reply" method="POST">
404
<input type="hidden" name="postId" value="<%= post.id %>">
405
<input type="hidden" name="parentReplyId" value="<%= reply.id %>">
406
<input type="hidden" name="redirectUrl" value="/post/<%= post.id %>">
407
<input type="hidden" name="isAnonymous" value="true">
408
<div class="row g-1 mb-1">
409
<div class="col-6"><input type="text" class="form-control form-control-sm" name="anonymousUsername" placeholder="닉네임" required></div>
410
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
411
</div>
412
<div class="d-flex gap-2">
413
<textarea class="write-textarea" name="content" rows="1" placeholder="익명 답글..." required style="resize:none; font-size:0.9rem; padding:6px;"></textarea>
414
<button class="btn btn-sm btn-accent text-white" style="background:var(--accent-color); border:none;">등록</button>
415
</div>
416
</form>
417
<% } %>
418
</div>
419
420
<% if(reply.replies && reply.replies.length > 0) { %>
421
<%= renderReplies(reply.replies, depth + 1) %>
422
<% } %>
423
</div>
424
<% }); %>
425
<% } %>
426
427
<%= renderReplies(replies, 0) %>
428
</div>
429
<% } %>
430
</div>
431
</div>
432
</div>
433
434
<div class="info-column">
435
<div class="info-card">
436
<div class="info-card-title">Current User</div>
437
<div class="d-flex align-items-center gap-2">
438
<i class="bi bi-person-circle fs-4 text-secondary"></i>
439
<div class="fw-bold"><% if(username) { %><a href="/hinana/userInfo" style="color: inherit;"><%= username %></a><% } else { %>Guest<% } %>
440
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
441
<% } else if(typeof verifiedUsers !== 'undefined' && verifiedUsers.includes(username)) { %><i class="bi bi-patch-check-fill verified-badge" title="인증됨"></i><% } %></div>
442
</div>
443
<div class="mt-3">
444
<% if(username) { %>
445
<a href="/logout?redirect=/post/<%= post.id %>" class="btn btn-outline-secondary btn-sm w-100">Logout</a>
446
<% } else { %>
447
<a href="/login?redirect=/post/<%= post.id %>" class="btn btn-primary btn-sm w-100">Login</a>
448
<% } %>
449
</div>
450
451
</div>
452
453
<div class="info-card">
454
<div class="info-card-title">Settings</div>
455
<div class="theme-toggle-wrapper">
456
<span class="d-flex align-items-center gap-2 small">
457
<i class="bi <%= theme==='dark'?'bi-moon-stars-fill':'bi-sun-fill' %>"></i>
458
<%= theme==='dark'?'Dark Mode':'Light Mode' %>
459
</span>
460
<form action="/toggle-theme" method="POST" id="theme-form">
461
<label class="switch" style="transform:scale(0.8);">
462
<input type="checkbox" <%= theme==='dark'?'checked':'' %> onchange="document.getElementById('theme-form').submit()">
463
<span class="slider"></span>
464
</label>
465
</form>
466
</div>
467
</div>
468
<% if(post) { %>
469
<div class="info-card">
470
<div class="info-card-title">System Info</div>
471
<ul class="small text-secondary list-unstyled mb-0">
472
<li class="mb-1 d-flex justify-content-between"><span>Version</span></li>
473
<li class="mb-1 d-flex justify-content-between">
474
<span>Ver. 9.2.1.0 - Iochi Mari</span>
475
</li>
476
</ul>
477
</div>
478
<% } %>
479
480
<div style="text-align:left;" class="footer">
481
<img src="/image/sign.png" id="fumika_sign" style="max-width:250px; max-height:initial; width:100%; height:100%;" />
482
</div>
483
<footer class="container-fluid text-center footer">
484
<a href="#myPage" title="To Top">
485
<span class="glyphicon glyphicon-chevron-up"></span>
486
</a>
487
<p style="margin-bottom: 0rem;" class="copyright">X - @NoctchillHinana</p>
488
<p style="margin-bottom: 0rem;" class="copyright">ⓒ 2024~2026. 비나래 | hinana.moe All rights reserved.</p>
489
</footer>
490
</div>
491
</div>
492
493
494
<script>
495
// 좋아요 AJAX
496
$(document).ready(function() {
497
$('.like-form').on('submit', function(e) {
498
e.preventDefault();
499
var form = $(this);
500
var btn = form.find('button');
501
var span = btn.find('.like-count');
502
var icon = btn.find('i');
503
504
$.ajax({
505
type: 'POST', url: '/like', data: form.serialize(),
506
success: function(res) {
507
if(res.isLiked) {
508
btn.addClass('liked'); icon.removeClass('bi-heart').addClass('bi-heart-fill');
509
} else {
510
btn.removeClass('liked'); icon.removeClass('bi-heart-fill').addClass('bi-heart');
511
}
512
span.text('Likes ' + res.likeCount);
513
},
514
error: function(xhr) {
515
if(xhr.status === 401) {
516
showConfirm('로그인이 필요합니다. 이동할까요?').then(function(ok){ if(ok) location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname); });
517
} else {
518
showAlert('오류 발생');
519
}
520
}
521
});
522
});
523
});
524
525
// 답글 폼 토글
526
function toggleReplyForm(id) {
527
var targetId = id ? 'reply-form-' + id : 'reply-form';
528
var form = document.getElementById(targetId);
529
if (form) {
530
if(form.classList.contains('d-none')) {
531
form.classList.remove('d-none');
532
form.querySelector('textarea')?.focus();
533
} else {
534
form.classList.add('d-none');
535
}
536
} else {
537
showConfirm('로그인이 필요합니다. 이동할까요?').then(function(ok){ if(ok) location.href='/login?redirect=' + encodeURIComponent(window.location.pathname); });
538
}
539
}
540
541
// 삭제 함수들
542
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
543
const pw = await showPrompt("비밀번호:"); if(!pw) return;
544
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
545
method:'POST', headers:{'Content-Type':'application/json'},
546
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
547
}).then(r=>r.json()).then(d=>{ showAlert(d.message).then(()=>{ if(d.success) location.href='/hinana/index'; }); });
548
}
549
550
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
551
const pw = await showPrompt("비밀번호:"); if(!pw) return;
552
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
553
method:'POST', headers:{'Content-Type':'application/json'},
554
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
555
}).then(r=>r.json()).then(d=>{ showAlert(d.message).then(()=>{ if(d.success) location.reload(); }); });
556
}
557
558
// 외부 링크 경고
559
document.addEventListener('click', function(e) {
560
const card = e.target.closest('.link-preview-card');
561
const link = card ? null : e.target.closest('a.external-link');
562
const target = card || link;
563
if (!target) return;
564
e.preventDefault();
565
const url = target.getAttribute('data-url');
566
showConfirm('안전하지 않을 수 있는 외부 링크입니다.\n이동하시겠습니까?\n\n' + url).then(function(ok) {
567
if (ok) window.open(url, '_blank', 'noopener,noreferrer');
568
});
569
});
570
571
// 링크 미리보기 카드 생성
572
(function() {
573
const links = document.querySelectorAll('.post-content a.external-link, .reply-content a.external-link');
574
const seen = new Set();
575
links.forEach(function(link) {
576
const url = link.getAttribute('data-url');
577
if (!url || seen.has(url)) return;
578
seen.add(url);
579
fetch('/api/link-preview?url=' + encodeURIComponent(url))
580
.then(r => r.json())
581
.then(data => {
582
if (data.error || (!data.title && !data.description)) return;
583
const card = document.createElement('div');
584
card.className = 'link-preview-card';
585
card.setAttribute('data-url', url);
586
const bar = document.createElement('div');
587
bar.className = 'link-preview-bar';
588
if (data.color) bar.style.backgroundColor = data.color;
589
const body = document.createElement('div');
590
body.className = 'link-preview-body';
591
if (data.domain) { const d = document.createElement('div'); d.className = 'link-preview-domain'; d.textContent = data.domain; body.appendChild(d); }
592
if (data.title) { const t = document.createElement('div'); t.className = 'link-preview-title'; t.textContent = data.title; body.appendChild(t); }
593
if (data.description) { const dc = document.createElement('div'); dc.className = 'link-preview-desc'; dc.textContent = data.description; body.appendChild(dc); }
594
if (data.image) { const img = document.createElement('img'); img.className = 'link-preview-img'; img.src = data.image; img.alt = ''; img.onerror = function() { this.remove(); }; body.appendChild(img); }
595
card.appendChild(bar);
596
card.appendChild(body);
597
if (link.nextSibling) { link.parentNode.insertBefore(card, link.nextSibling); } else { link.parentNode.appendChild(card); }
598
})
599
.catch(function() {});
600
});
601
})();
602
</script>
603
<script>if ("serviceWorker" in navigator) { navigator.serviceWorker.register("/sw.js"); }</script>
604
</body>
605
</html>
606