Public Source Viewer

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

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

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