본문으로 건너뛰기
Public Source Viewer

비나래아카이브 개발자 포털

실제 서비스 구조를 살펴볼 수 있는 공개용 코드 뷰어입니다. 인증, 세션, 외부 연동, 토큰, 관리자 식별 등 보안상 민감한 구현은 파일 단위 또는 줄 단위로 검열됩니다.

Redacted View
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(/&nbsp;/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(/&nbsp;/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