본문으로 건너뛰기
Public Source Viewer

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

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

Redacted View
view/hinana/index.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 <meta property="og:image" content="/image/2.png" />
11 <meta property="og:description" content="morikubo"/>
12 <meta property="og:url" content="hinana.moe"/>
13 <meta property="og:title" content="비나래 아카이브"/>
14 <link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap.min.css' />
15 <script src="/vendors/bootstrap/js/bootstrap.min.js"></script>
16 <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
17 <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
18 <link rel="stylesheet" href="/css/hinana.css" type="text/css">
19 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
20 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
21 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
22 <script src="/js/popup.js"></script>
23 <title>비나래 아카이브</title>
24
25 <style>
26 :root {
27 --font-family: 'Noto Sans KR', sans-serif;
28 --bg-main: #ffffff;
29 --bg-secondary: #f7f9f9;
30 --bg-tertiary: #eff3f4;
31 --text-primary: #0f1419;
32 --text-secondary: #536471;
33 --accent-color: #1d9bf0;
34 --danger-color: #f4212e;
35 --border-color: #eff3f4;
36 --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
37 --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
38 }
39
40 body.dark-mode {
41 --bg-main: #000000;
42 --bg-secondary: #16181c;
43 --bg-tertiary: #202327;
44 --text-primary: #e7e9ea;
45 --text-secondary: #71767b;
46 --accent-color: #1d9bf0;
47 --danger-color: #f4212e;
48 --border-color: #2f3336;
49 --shadow-sm: 0 1px 3px rgba(255,255,255,0.04);
50 --shadow-md: 0 4px 12px rgba(0,0,0,0.6);
51 }
52
53 .verified-badge { color: #1d9bf0; font-size: 0.85em; margin-left: 2px; }
54 .verified-badge-admin { color: var(--accent-color); font-size: 0.85em; margin-left: 2px; }
55
56 /* 기본 초기화 */
57 html, body {
58 height: 100%;
59 margin: 0;
60 font-family: var(--font-family);
61 background-color: var(--bg-main);
62 color: var(--text-primary);
63 -webkit-overflow-scrolling: touch;
64 }
65
66 a { text-decoration: none; color: inherit; }
67 ul { list-style: none; padding: 0; margin: 0; }
68 .btn:focus { box-shadow: none; }
69
70 /* [헤더 스타일] */
71 .global-header {
72 height: 60px;
73 background-color: rgba(255,255,255,0.85);
74 backdrop-filter: blur(12px);
75 -webkit-backdrop-filter: blur(12px);
76 border-bottom: 1px solid var(--border-color);
77 display: flex;
78 align-items: center;
79 justify-content: space-between;
80 padding: 0 20px;
81 position: sticky; top: 0; z-index: 1000;
82 }
83 body.dark-mode .global-header {
84 background-color: rgba(0,0,0,0.85);
85 }
86
87 /* 로고 영역 (커서 깜빡임 방지) */
88 .header-brand, .header-brand a {
89 position: relative; z-index: 20; display: flex; align-items: center;
90 user-select: none; -webkit-user-select: none;
91 caret-color: transparent; outline: none; cursor: pointer;
92 }
93 .header-logo { height: 28px; width: auto; }
94 body:not(.dark-mode) .logo-night { display: none; }
95 body.dark-mode .logo-day { display: none; }
96
97 /* 중앙 네비게이션 (절대 위치 중앙 정렬 + 클릭 통과 처리) */
98 .header-nav {
99 position: absolute; left: 50%; transform: translateX(-50%); top: 0; height: 100%;
100 display: flex; align-items: center; gap: 20px; justify-content: center;
101 pointer-events: none; /* 투명 영역 클릭 통과 */
102 z-index: 10;
103 }
104 /* 내부 버튼은 클릭 가능하게 복구 */
105 .header-nav a, .header-nav .nav-link, .header-nav .icon-btn { pointer-events: auto; }
106
107 .nav-link { font-weight: 600; font-size: 0.95rem; color: var(--text-secondary); transition: color 0.2s; position: relative; }
108 .nav-link:hover { color: var(--accent-color); text-decoration: none; }
109 .nav-link.active { color: var(--text-primary); }
110
111 .header-controls { position: relative; z-index: 20; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
112 .icon-btn { border: none; background: transparent; color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; padding: 4px; transition: color 0.2s; }
113 .icon-btn:hover { color: var(--text-primary); }
114
115 /* [해시태그] */
116 .post-content a.hashtag, .reply-content a.hashtag { color: #2196F3 !important; text-decoration: none; cursor: pointer; }
117 .post-content a.hashtag:hover, .reply-content a.hashtag:hover { color: #1976D2 !important; text-decoration: underline; }
118 .post-content a.external-link, .reply-content a.external-link { color: #2196F3 !important; text-decoration: none; cursor: pointer; }
119 .post-content a.external-link:hover, .reply-content a.external-link:hover { color: #1976D2 !important; text-decoration: underline; }
120
121 /* 링크 미리보기 카드 (Discord 스타일) */
122 .link-preview-card {
123 display: flex; max-width: 400px; margin: 8px 0 4px; border-radius: 8px;
124 overflow: hidden; border: 1px solid var(--border-color);
125 background-color: var(--bg-secondary); cursor: pointer;
126 }
127 .link-preview-bar { width: 4px; flex-shrink: 0; background-color: var(--accent-color); }
128 .link-preview-body { padding: 10px 12px; flex: 1; min-width: 0; }
129 .link-preview-domain { font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 3px; }
130 .link-preview-title { font-size: 0.85rem; font-weight: 700; color: #2196F3; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
131 .link-preview-desc {
132 font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4;
133 display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
134 }
135 .link-preview-img { margin-top: 8px; border-radius: 4px; max-width: 100%; max-height: 200px; object-fit: cover; }
136
137 /* [검색창 다크모드 대응] */
138 #global-search-bar { background-color: var(--bg-tertiary); border-bottom-color: var(--border-color) !important; }
139 #global-search-bar input.form-control { background-color: var(--bg-main); color: var(--text-primary); border-color: var(--border-color); }
140 #global-search-bar input.form-control:focus { border-color: var(--accent-color); box-shadow: 0 0 0 0.2rem rgba(180, 83, 9, 0.25); }
141 #global-search-bar input::placeholder { color: var(--text-secondary); }
142
143 .layout-container { display: flex; height: calc(100vh - 60px); }
144
145 /* 좌측 피드 패널 */
146 .shelf-column { width: 320px; min-width: 320px; background-color: var(--bg-main); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; z-index: 10; }
147 .shelf-body { flex: 1; overflow-y: auto; }
148 .shelf-footer { padding: 12px 16px; border-top: 1px solid var(--border-color); text-align: center; background-color: var(--bg-main); }
149
150 /* 페이지네이션 */
151 .pagination-bar { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
152 .page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: all 0.15s; }
153 .page-btn:hover { background-color: var(--bg-tertiary); color: var(--text-primary); }
154 .page-btn.active { background-color: var(--accent-color); color: var(--ui-on-accent, #fff); pointer-events: none; }
155 .page-ellipsis { color: var(--text-secondary); font-size: 0.85rem; padding: 0 4px; }
156 .bottom-pagination { display: none; padding: 15px; text-align: center; border-top: 1px solid var(--border-color); }
157
158 /* 트윗 카드 */
159 .tweet-card {
160 display: flex; gap: 12px; padding: 14px 16px;
161 border-bottom: 1px solid var(--border-color);
162 cursor: pointer; transition: background 0.15s;
163 text-decoration: none; color: inherit;
164 }
165 .tweet-card:hover { background: var(--bg-secondary); }
166 .tweet-card.active { background: var(--bg-tertiary); border-left: 3px solid var(--accent-color); }
167 .tweet-avatar-wrap { flex-shrink: 0; }
168 .tweet-avatar {
169 width: 40px; height: 40px; border-radius: 50%;
170 background: var(--accent-color); color: var(--ui-on-accent, #fff);
171 display: flex; align-items: center; justify-content: center;
172 font-size: 1rem; font-weight: 700; overflow: hidden;
173 }
174 .tweet-avatar img { width: 100%; height: 100%; object-fit: cover; }
175 .tweet-body { flex: 1; min-width: 0; }
176 .tweet-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
177 .tweet-username { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
178 .tweet-date { font-size: 0.78rem; color: var(--text-secondary); flex-shrink: 0; }
179 .tweet-content-preview {
180 font-size: 0.88rem; color: var(--text-primary); line-height: 1.45;
181 display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
182 overflow: hidden; margin-bottom: 6px;
183 }
184 .tweet-stats { display: flex; gap: 14px; font-size: 0.78rem; color: var(--text-secondary); }
185 .tweet-stat { display: flex; align-items: center; gap: 4px; }
186 .tweet-stat.liked { color: var(--danger-color); }
187
188 /* 중앙 본문 */
189 .content-column { flex: 1; display: flex; flex-direction: column; background-color: var(--bg-main); position: relative; overflow: hidden; }
190 .content-scroll-area { flex: 1; overflow-y: auto; padding: 30px; display: flex; flex-direction: column; gap: 30px; }
191 .content-card { background-color: var(--bg-secondary); border-radius: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); overflow: visible; margin-bottom: 20px; }
192
193 .write-header, .post-header { padding: 15px 20px; background-color: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
194 .write-header h2 { font-size: 1.1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
195 .write-body { padding: 20px; }
196 .write-textarea { width: 100%; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; background-color: var(--bg-main); color: var(--text-primary); resize: none; transition: border-color 0.2s; }
197 .write-textarea:focus { outline: none; border-color: var(--accent-color); }
198 .form-control { background-color: var(--bg-main); color: var(--text-primary); border-color: var(--border-color); }
199 .form-control::placeholder { color: var(--text-secondary); }
200 .write-footer { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; color: var(--text-secondary); font-size: 0.875rem; }
201
202 .post-avatar { width: 48px; height: 48px; background-color: var(--bg-secondary); border: 2px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: bold; color: var(--text-secondary); }
203 .post-author { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
204 .badge-admin { background-color: var(--accent-color); color: var(--ui-on-accent, #fff); font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; vertical-align: middle; }
205 .post-date { font-size: 0.85rem; color: var(--text-secondary); }
206
207 .post-content { padding: 30px; font-size: 1.1rem; line-height: 1.7; color: var(--text-primary); text-align: left; white-space: normal; word-break: break-all; overflow-wrap: break-word; }
208 .post-content-wrapper { position: relative; overflow: hidden; }
209 .post-content-extra { display: none; }
210 .post-content-wrapper.expanded .post-content-extra { display: inline; }
211
212 .btn-show-more { background: none; border: none; color: #2563eb; font-size: 0.85rem; font-weight: 600; padding: 4px 30px 8px; cursor: pointer; display: none; }
213 .btn-show-more:hover { text-decoration: underline; }
214
215 .post-actions { padding: 15px 20px; border-top: 1px solid var(--border-color); background-color: var(--bg-main); display: flex; justify-content: flex-end; gap: 10px; }
216 .action-btn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 6px; font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); border: 1px solid var(--border-color); background: var(--bg-secondary); cursor: pointer; transition: all 0.2s; }
217 .action-btn:hover { background-color: var(--border-color); color: var(--text-primary); }
218 .action-btn.liked { color: var(--danger-color); border-color: var(--danger-color); background-color: rgb(239 68 68 / 0.1); }
219
220 .replies-container { padding: 20px; background-color: var(--bg-main); }
221 .replies-header { font-size: 1rem; font-weight: 700; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
222 .reply-item { margin-bottom: 12px; padding-left: 12px; border-left: 3px solid var(--border-color); }
223 .reply-meta { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 4px; }
224 .reply-author { font-weight: 600; }
225 .reply-content { font-size: 0.95rem; line-height: 1.5; }
226
227 /* 우측 패널 */
228 .info-column { width: 260px; min-width: 260px; background-color: var(--bg-secondary); border-left: 1px solid var(--border-color); padding: 20px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
229 .info-card { background-color: var(--bg-main); border-radius: 12px; padding: 20px; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); }
230 .info-card-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 12px; letter-spacing: 0.05em; }
231 .user-profile { display: flex; align-items: center; gap: 12px; }
232 .user-avatar-lg { width: 40px; height: 40px; font-size: 1.5rem; color: var(--text-secondary); }
233 .user-info-text { flex: 1; }
234 .user-name-lg { font-weight: 700; font-size: 1.1rem; }
235
236 /* 스위치 스타일 */
237 .switch { position: relative; display: inline-block; width: 44px; height: 24px; }
238 .switch input { opacity: 0; width: 0; height: 0; }
239 .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--text-secondary); transition: .4s; border-radius: 24px; }
240 .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
241 input:checked + .slider { background-color: var(--accent-color); }
242 input:checked + .slider:before { transform: translateX(20px); }
243
244 /* Footer 스타일 (배경 투명화) */
245 .info-column .footer, .info-column footer, footer.container-fluid {
246 background-color: transparent !important; background: none !important;
247 border: none !important; box-shadow: none !important;
248 color: var(--text-secondary) !important; margin-top: auto;
249 }
250 .info-column footer a { color: var(--text-secondary) !important; }
251 .info-column footer a:hover { color: var(--accent-color) !important; }
252
253 .archive-footer {
254 flex: 0 0 auto;
255 width: 100%;
256 margin-top: 0;
257 padding-top: 22px;
258 border-top: 1px solid var(--border-color) !important;
259 color: var(--text-secondary) !important;
260 display: flex;
261 flex-direction: column;
262 align-items: center;
263 justify-content: center;
264 gap: 12px;
265 font-size: 0.78rem;
266 text-align: center;
267 }
268 .archive-footer-brand { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; }
269 .archive-footer-logo { width: 44px; height: 44px; object-fit: contain; opacity: 0.76; mix-blend-mode: multiply; }
270 body.dark-mode .archive-footer-logo { mix-blend-mode: screen; opacity: 0.9; }
271 .archive-footer-title { color: var(--text-primary); font-weight: 800; font-size: 0.92rem; white-space: nowrap; }
272 .archive-footer-subtitle { margin-top: 2px; color: var(--text-secondary); white-space: nowrap; }
273 .archive-footer-links { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
274 .archive-footer-links a { color: var(--text-secondary) !important; font-weight: 700; }
275 .archive-footer-links a:hover { color: var(--accent-color) !important; }
276 .archive-footer-copy {
277 margin-top: 5px;
278 text-align: center;
279 font-size: 0.72rem;
280 line-height: 1.55;
281 display: flex;
282 flex-direction: column;
283 align-items: center;
284 gap: 5px;
285 }
286 .archive-footer-version {
287 display: inline-flex;
288 align-items: center;
289 min-height: 20px;
290 padding: 0 8px;
291 margin-right: 0;
292 border: 1px solid var(--border-color);
293 border-radius: 999px;
294 color: var(--accent-color);
295 font-weight: 800;
296 background: var(--bg-secondary);
297 }
298
299 .d-none { display: none !important; }
300 .text-accent { color: var(--accent-color); }
301
302 /* Pagination */
303 .page-link { color: var(--text-secondary); background-color: var(--bg-main); border: 1px solid var(--border-color); border-radius: 4px; min-width: 28px; height: 28px; padding: 0 6px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; line-height: 1; }
304 .page-link:hover { color: var(--accent-color); background-color: var(--bg-secondary); border-color: var(--accent-color); z-index: 2; }
305 .page-item.active .page-link { background-color: var(--accent-color); border-color: var(--accent-color); color: var(--ui-on-accent, #fff); }
306 .page-item.disabled .page-link { opacity: 0.4; pointer-events: none; background-color: transparent; border: none; }
307
308 /* [반응형] 960px 이하 */
309 @media (max-width: 960px) {
310 html, body { overflow: auto !important; height: auto !important; }
311 .layout-container { flex-direction: column; height: auto !important; }
312
313 .global-header { flex-wrap: wrap; height: auto !important; min-height: 60px; padding: 10px 15px; }
314
315 /* 모바일에서 네비게이션 절대 위치 해제 */
316 .header-nav { position: static !important; transform: none !important; height: auto !important; pointer-events: auto !important; width: 100%; order: 3; justify-content: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.05); }
317
318 .header-brand { order: 1; }
319 .header-controls { order: 2; margin-left: auto; }
320
321 .shelf-column { width: 100%; height: 280px; min-height: 280px; border-right: none; border-bottom: 1px solid var(--border-color); order: 1; flex: none; }
322 .shelf-body { overflow-y: auto; }
323 .tweet-card { padding: 12px 14px; }
324 .shelf-footer { display: block !important; order: 99; width: 100%; background-color: var(--bg-main); }
325
326 .content-column { width: 100%; height: auto !important; flex: none; order: 2; border: none; overflow: visible; }
327 .content-scroll-area { overflow: visible !important; padding: 15px; height: auto !important; }
328 .bottom-pagination { display: block !important; }
329
330 .info-column { width: 100%; height: auto; border-left: none; border-top: 1px solid var(--border-color); order: 3; padding: 20px; flex-direction: row; flex-wrap: wrap; flex: none; }
331 .info-card { flex: 1; min-width: 200px; margin-bottom: 0; }
332 .info-column .footer { display: none; }
333 .info-column .sign-area {
334 flex: 0 0 100%; /* 가로 폭을 100%로 채워서 줄바꿈 강제 */
335 width: 100%;
336 display: block; /* 블록 요소로 확실하게 처리 */
337 text-align: center;
338 margin-top: 20px !important; /* 상단 여백 확보 */
339 order: 3; /* 순서 명시 (카드들 다음) */
340 }
341
342 /* [수정] 저작권 푸터는 그대로 유지하되 선택자 분리 */
343 .info-column footer.footer {
344 flex: 0 0 100%;
345 width: 100%;
346 text-align: center !important;
347 order: 4; /* 사인 이미지 다음 순서 */
348 }
349
350 .info-column .footer img { display: none; } /* 혹시 모를 잔재 숨김 처리 */
351
352 /* 1. 사인 이미지 영역 (순서 3번째) */
353 .info-column .sign-area {
354 flex: 0 0 100%;
355 width: 100%;
356 display: block;
357 text-align: center;
358 margin-top: 20px;
359 order: 3; /* 카드들 다음 */
360 }
361
362 /* [추가] 2. 저작권 푸터 영역 (순서 4번째 - 맨 마지막) */
363 .info-column footer.footer {
364 flex: 0 0 100%; /* 가로 꽉 차게 */
365 width: 100%;
366 text-align: center !important;
367 order: 4; /* 사인 이미지보다 더 아래 */
368 display: block !important; /* 혹시 사라졌다면 강제로 보이게 */
369 margin-bottom: 20px; /* 바닥 여백 조금 확보 */
370 }
371 }
372 </style>
373 <link rel="stylesheet" href="/css/site-ui.css?v=3">
374 <link rel="stylesheet" href="/css/site-app.css?v=1">
375 </head>
376
377 <body data-ui-page="index" class="ui-shell <%= theme === 'dark' ? 'dark-mode' : '' %>">
378
379 <%- include('partials/site-header', { uiPage: 'index' }) %>
380
381 <div id="ui-content" tabindex="-1" role="main" class="layout-container">
382
383 <div class="shelf-column">
384 <div class="shelf-body custom-scrollbar" style="padding:0;">
385 <% if(posts && posts.length > 0) { %>
386 <% posts.forEach(function(post) { %>
387 <%
388 var isActive = (typeof currentPost !== 'undefined' && currentPost && String(currentPost.id) === String(post.id));
389 var authorName = post.username.replace('(익명)', '').trim();
390 var isAnon = post.username.endsWith('(익명)');
391 var plainPreview = (post.content || '').replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ').replace(/\s+/g, ' ').trim();
392 var likeCount = post.likes ? post.likes.length : 0;
393 var replyCount = post.replies ? post.replies.length : 0;
394 var isLiked = post.likes && post.likes.includes(username);
395 %>
396 <a href="?selectedId=<%= post.id %>&page=<%= currentPage %>&sort=<%= sort || 'new' %>&keyword=<%= encodeURIComponent(keyword || '') %>"
397 class="tweet-card <%= isActive ? 'active' : '' %>">
398 <div class="tweet-avatar-wrap">
399 <div class="tweet-avatar">
400 <% if (!isAnon && typeof userProfileImages !== 'undefined' && userProfileImages[authorName]) { %>
401 <img src="<%= userProfileImages[authorName] %>" alt="">
402 <% } else { %>
403 <%= authorName.substring(0,1).toUpperCase() %>
404 <% } %>
405 </div>
406 </div>
407 <div class="tweet-body">
408 <div class="tweet-header">
409 <span class="tweet-username">
410 <%= authorName %>
411 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
412 <% } else if(!isAnon && typeof verifiedUsers !== 'undefined' && verifiedUsers.includes(authorName)) { %><i class="bi bi-patch-check-fill" style="color:#1d9bf0; font-size:0.8em;"></i>
413 <% } else if(isAnon) { %><i class="bi bi-incognito" style="font-size:0.8em; color:var(--text-secondary);"></i>
414 <% } %>
415 <% if(post.isPrivate) { %><i class="bi bi-lock-fill" style="font-size:0.75em; color:var(--text-secondary);"></i><% } %>
416 </span>
417 <span class="tweet-date">· <%= fmtDate(post.timestamp, true) %></span>
418 </div>
419 <div class="tweet-content-preview"><%= plainPreview.substring(0, 100) %><%= plainPreview.length > 100 ? '...' : '' %></div>
420 <div class="tweet-stats">
421 <span class="tweet-stat <%= isLiked ? 'liked' : '' %>">
422 <i class="bi <%= isLiked ? 'bi-heart-fill' : 'bi-heart' %>"></i> <%= likeCount %>
423 </span>
424 <span class="tweet-stat">
425 <i class="bi bi-chat"></i> <%= replyCount %>
426 </span>
427 </div>
428 </div>
429 </a>
430 <% }); %>
431 <% } else { %>
432 <div class="text-center py-5 small" style="color:var(--text-secondary);">게시글이 없습니다.</div>
433 <% } %>
434 </div>
435
436 <div class="shelf-footer">
437 <%- include('partials/pagination', { currentPage, totalPages, sort, keyword: keyword || '', basePath: basePath || '/hinana/index' }) %>
438 </div>
439 </div>
440
441 <div class="content-column">
442 <div class="content-scroll-area custom-scrollbar">
443
444 <div class="d-flex align-items-center gap-2 mb-3 flex-wrap">
445 <select class="form-select form-select-sm" style="width:auto; cursor:pointer; background-color:var(--bg-secondary); color:var(--text-primary); border-color:var(--border-color);" onchange="changeSortOrder(this.value)">
446 <option value="new" <%= (typeof sort !== 'undefined' && sort === 'new') ? 'selected' : '' %>>최신순</option>
447 <option value="popular" <%= (typeof sort !== 'undefined' && sort === 'popular') ? 'selected' : '' %>>인기순</option>
448 <option value="old" <%= (typeof sort !== 'undefined' && sort === 'old') ? 'selected' : '' %>>오래된순</option>
449 </select>
450 <form action="/hinana/search" method="GET" class="d-inline-flex gap-2 ms-auto">
451 <input type="text" name="keyword" class="form-control form-control-sm" placeholder="검색어를 입력하세요..." style="width: 180px; background-color:var(--bg-secondary); color:var(--text-primary); border-color:var(--border-color);">
452 <button class="ui-accent-control btn btn-sm" style="background-color:var(--accent-color); color:var(--ui-on-accent, #fff); border:none;">검색</button>
453 </form>
454 </div>
455
456 <% if(typeof trendingTags !== 'undefined' && trendingTags.length > 0) { %>
457 <div class="d-flex align-items-center gap-2 mb-3 flex-wrap">
458 <i class="bi bi-hash" style="color:var(--accent-color); font-size:0.85rem;"></i>
459 <% trendingTags.forEach(function(t) { %>
460 <a href="/hinana/search?keyword=<%= encodeURIComponent(t.tag) %>" class="badge rounded-pill" style="background-color:var(--bg-secondary); color:var(--text-primary); border:1px solid var(--border-color); font-weight:500; font-size:0.75rem; text-decoration:none; padding:5px 10px;">
461 <%= t.tag %> <span style="color:var(--text-secondary); font-size:0.65rem;"><%= t.count %></span>
462 </a>
463 <% }); %>
464 </div>
465 <% } %>
466
467 <% if(username) { %>
468 <div id="notif-banner" class="d-none mb-3 px-4 py-3 rounded-3 d-flex align-items-center justify-content-between gap-3"
469 style="background-color:var(--bg-secondary); border:1px solid var(--border-color); font-size:0.9rem;">
470 <span><i class="bi bi-bell-fill me-2" style="color:var(--accent-color);"></i>알림을 허용하면 새 답글 소식을 바로 받을 수 있어요.</span>
471 <div class="d-flex gap-2 flex-shrink-0">
472 <button class="ui-accent-control btn btn-sm" style="background-color:var(--accent-color); color:var(--ui-on-accent, #fff); border:none;" onclick="requestNotifPermission()">허용하기</button>
473 <button class="btn btn-sm btn-outline-secondary" onclick="document.getElementById('notif-banner').remove()">닫기</button>
474 </div>
475 </div>
476 <% } %>
477
478 <% if (!keyword) { %>
479 <div class="content-card mb-4" id="write-section-card">
480 <div class="write-header">
481 <h2><i class="bi bi-pencil-square"></i> New Page</h2>
482 <div class="btn-group btn-group-sm">
483 <% if(username) { %>
484 <button type="button" class="btn btn-outline-secondary active" id="btn-mode-user" onclick="toggleWriteMode('user')">
485 <i class="bi bi-person-fill"></i> 회원
486 </button>
487 <% } %>
488 <% if(typeof isAnonymousPostingEnabled !== 'undefined' && isAnonymousPostingEnabled) { %>
489 <button type="button" class="btn btn-outline-secondary <%= !username ? 'active' : '' %>" id="btn-mode-anon" onclick="toggleWriteMode('anon')">
490 <i class="bi bi-incognito"></i> 익명
491 </button>
492 <% } %>
493 </div>
494 </div>
495
496 <div class="write-body">
497 <% if(username) { %>
498 <div id="form-mode-user">
499 <form action="/post" method="POST">
500 <textarea class="write-textarea" id="main-write-input" name="content" rows="3" maxlength="150"
501 placeholder="<%= username %>님, 오늘은 어떤 이야기가 있나요?" required
502 oninput="checkInputLength(this, 'main-user-count')"></textarea>
503 <div class="write-footer">
504 <div class="d-flex align-items-center">
505 <span id="main-user-count" class="text-muted small me-3">0/150</span>
506 <div class="form-check m-0">
507 <input type="checkbox" id="isPrivate" name="isPrivate" class="form-check-input">
508 <label for="isPrivate" class="form-check-label">나만 보기</label>
509 </div>
510 </div>
511 <button type="submit" class="ui-accent-control btn btn-sm px-4 rounded-pill fw-bold" style="background:var(--accent-color); color:var(--ui-on-accent, #fff); border:none;">
512 기록하기
513 </button>
514 </div>
515 </form>
516 </div>
517 <% } else if (typeof isAnonymousPostingEnabled !== 'undefined' && !isAnonymousPostingEnabled) { %>
518 <div class="text-center py-3">
519 <p class="text-secondary mb-2">글을 작성하려면 로그인이 필요합니다.</p>
520 <a href="/login" class="btn btn-primary btn-sm rounded-pill px-4">로그인</a>
521 </div>
522 <% } %>
523
524 <% if(typeof isAnonymousPostingEnabled !== 'undefined' && isAnonymousPostingEnabled) { %>
525 <div id="form-mode-anon" class="<%= username ? 'd-none' : '' %>">
526 <form action="/post" method="POST" onsubmit="return validateAnonForm()">
527 <input type="hidden" name="isAnonymous" value="true">
528 <div class="row g-2 mb-2">
529 <div class="col-6">
530 <input type="text" class="form-control form-control-sm" id="anon-username" name="anonymousUsername" placeholder="닉네임 (20자)" maxlength="20" required oninput="checkAnonFormReady()">
531 </div>
532 <div class="col-6">
533 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
534 </div>
535 </div>
536 <textarea class="write-textarea" id="anon-write-input" name="content" rows="3" maxlength="150"
537 placeholder="익명으로 기록됩니다." required
538 oninput="checkInputLength(this, 'main-anon-count'); checkAnonFormReady()"></textarea>
539 <div class="write-footer">
540 <span id="main-anon-count" class="text-muted small me-auto">0/150</span>
541 <button type="submit" id="anon-submit-btn" class="btn btn-sm px-4 rounded-pill" disabled
542 style="background-color: var(--border-color); color: var(--text-secondary); cursor: not-allowed; opacity: 0.6;">
543 <i class="bi bi-send me-1"></i> 익명 게시
544 </button>
545 </div>
546 </form>
547 </div>
548 <% } %>
549 </div>
550 </div>
551 <% } %>
552
553 <% if(posts && posts.length > 0) { %>
554 <% posts.forEach(function(post) { %>
555 <div class="content-card mb-4" id="post-card-<%= post.id %>">
556 <div class="post-header">
557 <div class="d-flex align-items-center gap-3">
558 <div class="post-avatar">
559 <% var authorName = post.username.replace('(익명)', '').trim(); %>
560 <% if (!post.username.endsWith('(익명)') && typeof userProfileImages !== 'undefined' && userProfileImages[authorName]) { %>
561 <img src="<%= userProfileImages[authorName] %>" style="width:100%; height:100%; border-radius:50%; object-fit:cover;">
562 <% } else { %>
563 <%= post.username.substring(0,1).toUpperCase() %>
564 <% } %>
565 </div>
566 <div>
567 <div class="post-author">
568 <%= post.username.replace('(익명)', '') %>
569 <% if(post.username.endsWith('(익명)')) { %><i class="bi bi-incognito ms-1 text-muted small"></i><% } %>
570 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
571 <% } else if(typeof verifiedUsers !== 'undefined' && verifiedUsers.includes(post.username.replace('(익명)',''))) { %><i class="bi bi-patch-check-fill verified-badge" title="인증됨"></i><% } %>
572 </div>
573 <div class="post-date">
574 <%= fmtDate(post.timestamp) %>
575 <% if(post.isPrivate) { %><i class="bi bi-lock-fill ms-1 text-warning"></i><% } %>
576 </div>
577 </div>
578 </div>
579 <div class="d-flex align-items-center">
580 <a href="/post/<%= post.id %>" class="btn btn-link text-secondary p-0 me-2" title="상세 페이지"><i class="bi bi-link-45deg" style="font-size: 1.3rem;"></i></a>
581 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
582 <form action="/delete" method="POST" data-confirm="삭제하시겠습니까?" class="d-inline">
583 <input type="hidden" name="id" value="<%= post.id %>">
584 <button class="btn btn-link text-secondary p-0"><i class="bi bi-trash"></i></button>
585 </form>
586 <% } else if (post.username.endsWith('(익명)') && typeof isAnonymousPostingEnabled !== 'undefined' && isAnonymousPostingEnabled) { %>
587 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
588 <% } %>
589 </div>
590 </div>
591
592 <div class="post-body-container">
593 <div class="post-content-wrapper" id="content-wrapper-<%= post.id %>">
594 <div class="post-content">
595 <% if(post.image) { %>
596 <div class="mb-3"><img src="<%= post.image %>" alt="첨부 이미지" class="img-fluid rounded" style="max-height: 500px; width: auto;"></div>
597 <% } %>
598 <%- post.content
599 .replace(/<script[^>]*>([\S\s]*?)<\/script>/gim, "")
600 .replace(/<a\s+href="([^"]*?)"\s+class="hashtag">([^<]*?)<\/a>/gim, '___HASHTAG___$1___$2___END___')
601 .replace(/<a\s+href="#"\s+class="external-link"\s+data-url="([^"]*?)">([^<]*?)<\/a>/gim, '___EXTLINK___$1___$2___END___')
602 .replace(/<\/p>\s*<p[^>]*>/gim, '\n')
603 .replace(/<br\s*\/?>/gim, '\n')
604 .replace(/<\/div>\s*<div[^>]*>/gim, '\n')
605 .replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, "")
606 .replace(/___HASHTAG___(.*?)___(.*?)___END___/gim, '<a href="$1" class="hashtag">$2</a>')
607 .replace(/___EXTLINK___(.*?)___(.*?)___END___/gim, '<a href="#" class="external-link" data-url="$1">$2</a>')
608 .replace(/&nbsp;/g, ' ')
609 .replace(/\n/g, '<br>')
610 %>
611 </div>
612 </div>
613 <button class="btn-show-more" onclick="togglePostContent('<%= post.id %>', this)">더보기</button>
614 </div>
615
616 <div class="post-actions">
617 <form action="/like" method="POST" class="like-form">
618 <input type="hidden" name="postId" value="<%= post.id %>">
619 <% const isLiked = post.likes && post.likes.includes(username); %>
620 <button type="submit" class="action-btn <%= isLiked ? 'liked' : '' %>">
621 <i class="bi <%= isLiked ? 'bi-heart-fill' : 'bi-heart' %>"></i>
622 <span class="like-count">Likes <%= post.likes ? post.likes.length : 0 %></span>
623 </button>
624 </form>
625 <button class="action-btn" onclick="toggleReplyForm('<%= post.id %>')">
626 <i class="bi bi-chat-quote-fill text-accent"></i> <span>Reply</span>
627 </button>
628 </div>
629
630 <% if(username) { %>
631 <div id="reply-form-<%= post.id %>" class="d-none p-3 bg-tertiary border-top">
632 <form action="/reply" method="POST">
633 <input type="hidden" name="postId" value="<%= post.id %>">
634 <input type="hidden" name="redirectUrl" value="<%= typeof basePath !== 'undefined' ? basePath : '/hinana/index' %>?selectedId=<%= post.id %>&page=<%= currentPage %>&sort=<%= sort || 'new' %>&keyword=<%= encodeURIComponent(keyword || '') %>">
635 <div class="d-flex flex-column gap-2">
636 <textarea class="write-textarea" name="content" rows="2" maxlength="150" placeholder="답글을 입력하세요..." required style="resize:none;" oninput="checkInputLength(this, 'reply-count-<%= post.id %>')"></textarea>
637 <div class="d-flex justify-content-between align-items-center">
638 <span id="reply-count-<%= post.id %>" class="text-muted small">0/150</span>
639 <button class="ui-accent-control btn btn-sm px-3 rounded-pill fw-bold" style="background:var(--accent-color); color:var(--ui-on-accent, #fff); border:none;"><i class="bi bi-send"></i></button>
640 </div>
641 </div>
642 </form>
643 </div>
644 <% } else if(typeof isAnonymousPostingEnabled !== 'undefined' && isAnonymousPostingEnabled) { %>
645 <div id="reply-form-<%= post.id %>" class="d-none p-3 bg-tertiary border-top">
646 <form action="/reply" method="POST">
647 <input type="hidden" name="postId" value="<%= post.id %>">
648 <input type="hidden" name="isAnonymous" value="true">
649 <input type="hidden" name="redirectUrl" value="<%= typeof basePath !== 'undefined' ? basePath : '/hinana/index' %>?selectedId=<%= post.id %>&page=<%= currentPage %>&sort=<%= sort || 'new' %>&keyword=<%= encodeURIComponent(keyword || '') %>">
650 <div class="row g-2 mb-2">
651 <div class="col-6"><input type="text" class="form-control form-control-sm" name="anonymousUsername" placeholder="닉네임" required></div>
652 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
653 </div>
654 <div class="d-flex flex-column gap-2">
655 <textarea class="write-textarea" name="content" rows="2" maxlength="150" placeholder="익명 답글..." required style="resize:none;" oninput="checkInputLength(this, 'anon-reply-count-<%= post.id %>')"></textarea>
656 <div class="d-flex justify-content-between align-items-center">
657 <span id="anon-reply-count-<%= post.id %>" class="text-muted small">0/150</span>
658 <button class="ui-accent-control btn btn-sm px-3 rounded-pill fw-bold" style="background:var(--accent-color); color:var(--ui-on-accent, #fff); border:none;"><i class="bi bi-send"></i></button>
659 </div>
660 </div>
661 </form>
662 </div>
663 <% } %>
664
665 <% if(post.replies && post.replies.length > 0) { %>
666 <div class="replies-container">
667 <div class="replies-header">
668 <i class="bi bi-chat-dots"></i> Comments (<%= post.replies.length %>)
669 </div>
670
671 <% function renderReplies(replyList, depth) { %>
672 <% replyList.forEach(function(reply, index) { %>
673 <div class="reply-item <%= (depth === 0 && index >= 3) ? 'd-none hidden-reply-' + post.id : '' %>"
674 style="margin-left: <%= Math.min(depth, 3) * 20 %>px; border-left: <%= depth > 0 ? '2px' : '3px' %> solid var(--border-color);">
675
676 <div class="reply-meta">
677 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
678 <% var replyAuthorClean = reply.username.replace('(익명)', '').trim(); %>
679 <% if (!reply.username.endsWith('(익명)') && typeof userProfileImages !== 'undefined' && userProfileImages[replyAuthorClean]) { %>
680 <img src="<%= userProfileImages[replyAuthorClean] %>" style="width:16px; height:16px; border-radius:50%; object-fit:cover; flex-shrink:0;">
681 <% } %>
682 <%= replyAuthorClean %>
683 <% if(reply.username.endsWith('(익명)')) { %><i class="bi bi-incognito ms-1 text-muted"></i><% } %>
684 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
685 <% } else if(typeof verifiedUsers !== 'undefined' && verifiedUsers.includes(replyAuthorClean)) { %><i class="bi bi-patch-check-fill verified-badge" title="인증됨"></i><% } %>
686 </span>
687
688 <span class="text-muted" style="font-size:0.75rem;">
689 <%= fmtDate(reply.timestamp) %>
690
691 <button class="btn p-0 text-secondary border-0 bg-transparent ms-2" onclick="toggleReplyForm('<%= reply.id %>')">
692 <i class="bi bi-chat-quote-fill"></i>
693 </button>
694
695 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
696 <form action="/delete-reply" method="POST" class="d-inline ms-1" data-confirm="삭제하시겠습니까?">
697 <input type="hidden" name="postId" value="<%= post.id %>">
698 <input type="hidden" name="replyId" value="<%= reply.id %>">
699 <button class="btn p-0 text-danger border-0 bg-transparent"><i class="bi bi-x-lg"></i></button>
700 </form>
701 <% } else if(reply.username.endsWith('(익명)') && typeof isAnonymousPostingEnabled !== 'undefined' && isAnonymousPostingEnabled) { %>
702 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
703 <% } %>
704 </span>
705 </div>
706
707 <div class="reply-content">
708 <%- (reply.content || '')
709 .replace(/<script[^>]*>([\S\s]*?)<\/script>/gim, "")
710 .replace(/<a\s+href="([^"]*?)"\s+class="hashtag">([^<]*?)<\/a>/gim, '___HASHTAG___$1___$2___END___')
711 .replace(/<a\s+href="#"\s+class="external-link"\s+data-url="([^"]*?)">([^<]*?)<\/a>/gim, '___EXTLINK___$1___$2___END___')
712 .replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, "")
713 .replace(/___HASHTAG___(.*?)___(.*?)___END___/gim, '<a href="$1" class="hashtag">$2</a>')
714 .replace(/___EXTLINK___(.*?)___(.*?)___END___/gim, '<a href="#" class="external-link" data-url="$1">$2</a>')
715 .replace(/&nbsp;/g, ' ')
716 .replace(/\n/g, '<br>')
717 %>
718 </div>
719
720 <div id="reply-form-<%= reply.id %>" class="d-none p-2 bg-tertiary rounded mb-2 mt-2">
721 <form action="/reply" method="POST">
722 <input type="hidden" name="postId" value="<%= post.id %>">
723 <input type="hidden" name="parentReplyId" value="<%= reply.id %>">
724 <input type="hidden" name="redirectUrl" value="<%= typeof basePath !== 'undefined' ? basePath : '/hinana/index' %>?selectedId=<%= post.id %>&page=<%= currentPage %>&sort=<%= sort || 'new' %>&keyword=<%= encodeURIComponent(keyword || '') %>">
725
726 <% if(!username && typeof isAnonymousPostingEnabled !== 'undefined' && isAnonymousPostingEnabled) { %>
727 <input type="hidden" name="isAnonymous" value="true">
728 <div class="row g-1 mb-1">
729 <div class="col-6">
730 <input type="text" class="form-control form-control-sm" name="anonymousUsername" placeholder="닉네임 (20자)" maxlength="20" required>
731 </div>
732 <div class="col-6">
733 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
734 </div>
735 </div>
736 <% } %>
737
738 <div class="d-flex flex-column gap-2">
739 <textarea class="write-textarea" name="content" rows="1" maxlength="150"
740 placeholder="답글..." required style="resize:none; font-size:0.9rem; padding:6px;"
741 oninput="checkInputLength(this, 'reply-counter-<%= reply.id %>')"></textarea>
742
743 <div class="d-flex justify-content-between align-items-center">
744 <span id="reply-counter-<%= reply.id %>" class="text-muted small ms-1" style="font-size:0.75rem;">0/150</span>
745 <button class="btn btn-sm btn-accent text-white" style="background:var(--accent-color); border:none;">등록</button>
746 </div>
747 </div>
748 </form>
749 </div>
750
751 <% if(reply.replies && reply.replies.length > 0) { %>
752 <%= renderReplies(reply.replies, depth + 1) %>
753 <% } %>
754 </div>
755 <% }); %>
756 <% } %>
757
758 <%= renderReplies(post.replies, 0) %>
759
760 <% if(post.replies.length > 3) { %>
761 <div class="text-center mt-2">
762 <button class="btn btn-sm btn-link text-decoration-none text-secondary"
763 onclick="showAllReplies('<%= post.id %>', this)">
764 <i class="bi bi-chevron-down"></i> 댓글 <%= post.replies.length - 3 %>개 더 보기
765 </button>
766 </div>
767 <% } %>
768 </div>
769 <% } %>
770 </div>
771 <% }); %>
772 <% } else { %>
773 <div class="h-100 d-flex align-items-center justify-content-center text-muted flex-column py-5">
774 <i class="bi bi-book fs-1 mb-3 opacity-50"></i>
775 <p>작성된 글이 없습니다.</p>
776 </div>
777 <% } %>
778
779 </div>
780 <div class="bottom-pagination">
781 <%- include('partials/pagination', { currentPage, totalPages, sort, keyword: keyword || '', basePath: basePath || '/hinana/index' }) %>
782 </div>
783 </div>
784
785 <div class="info-column">
786 <div class="info-card">
787 <div class="info-card-title">Current User</div>
788 <div class="user-profile mb-3">
789 <% if (typeof currentUserProfileImage !== 'undefined' && currentUserProfileImage) { %>
790 <img src="<%= currentUserProfileImage %>" style="width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--border-color);">
791 <% } else { %>
792 <i class="bi bi-person-circle user-avatar-lg"></i>
793 <% } %>
794 <div class="user-info-text">
795 <div class="user-name-lg">
796 <% if(username) { %>
797 <a href="/hinana/userInfo" class="text-decoration-none text-reset hover-underline"><%= username %></a>
798 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
799 <% } else if(typeof verifiedUsers !== 'undefined' && verifiedUsers.includes(username)) { %><i class="bi bi-patch-check-fill verified-badge" title="인증됨"></i><% } %>
800 <% } else { %>
801 Guest
802 <% } %>
803 </div>
804 <div class="mt-2">
805 <% if(username) { %>
806 <a href="/logout?redirect=/hinana/index" class="btn btn-outline-secondary btn-sm btn-logout w-100"><i class="bi bi-box-arrow-right"></i> Logout</a>
807 <% } else { %>
808 <a href="/login" class="btn btn-primary btn-sm btn-logout w-100">Login</a>
809 <% } %>
810 </div>
811 </div>
812 </div>
813 </div>
814
815 <div class="info-card">
816 <div class="info-card-title">Settings</div>
817 <div class="theme-toggle-wrapper">
818 <span class="d-flex align-items-center gap-2 small">
819 <i class="bi <%= theme==='dark'?'bi-moon-stars-fill':'bi-sun-fill' %>"></i>
820 <%= theme==='dark'?'Dark Mode':'Light Mode' %>
821 <form action="/toggle-theme" method="POST" id="theme-form">
822 <input type="hidden" name="redirect" value="/hinana/index">
823 <label class="switch" style="transform:scale(0.8);">
824 <input type="checkbox" <%= theme==='dark'?'checked':'' %> onchange="document.getElementById('theme-form').submit()">
825 <span class="slider"></span>
826 </label>
827 </form>
828 </span>
829 </div>
830 </div>
831
832 <footer class="archive-footer">
833 <div class="archive-footer-brand">
834 <img src="/image/sign.png" alt="비나래" class="archive-footer-logo">
835 <div>
836 <div class="archive-footer-title">비나래 아카이브</div>
837 <div class="archive-footer-subtitle">Archive My Memory</div>
838 </div>
839 </div>
840 <div>
841 <div class="archive-footer-links">
842 <a href="/hinana/index">Archive</a>
843 <a href="/hinana/info">Info</a>
844 <a href="/hinana/blog">Blog</a>
845 <a href="/hinana/lounge">Lounge</a>
846 <a href="https://x.com/NoctchillHinana" target="_blank" rel="noreferrer">X</a>
847 </div>
848 <div class="archive-footer-copy"><span class="archive-footer-version">Ver. 9.2.1.0 - Iochi Mari</span>&copy; 2024~2026. 비나래 | hinana.moe</div>
849 </div>
850 </footer>
851 </div>
852 </div>
853
854 <script>
855 document.addEventListener('DOMContentLoaded', () => {
856 // [핵심] 스크롤이 발생하는 진짜 영역 찾기
857 const scrollArea = document.querySelector('.content-scroll-area');
858
859 // 1. 페이지 로드 직후: 기억해둔 위치로 '순간이동' (눈 깜짝할 새 복구)
860 const savedScroll = sessionStorage.getItem('hinanaScrollPos');
861 if (savedScroll && scrollArea) {
862 scrollArea.scrollTop = savedScroll;
863 }
864
865 // 2. 그 다음, 선택된 글이 있다면 그쪽으로 '부드럽게' 이동
866 const urlParams = new URLSearchParams(window.location.search);
867 const selectedId = urlParams.get('selectedId');
868 const hasKeyword = !!(urlParams.get('keyword') || '').trim();
869
870 // 검색 중(keyword 있음)일 때는 scrollIntoView 안 함 - 모바일에서 전체 결과 표시
871 if (selectedId && !hasKeyword) {
872 const targetCard = document.getElementById('post-card-' + selectedId);
873
874 if (targetCard) {
875 // 약간의 딜레이를 주어 스크롤 복구가 확실히 끝난 뒤 움직이게 함
876 setTimeout(() => {
877 targetCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
878
879 // 강조 효과 (테두리 깜빡임)
880 targetCard.style.transition = "all 0.5s ease";
881 const originalBorder = targetCard.style.border;
882 const originalShadow = targetCard.style.boxShadow;
883
884 targetCard.style.border = "2px solid var(--accent-color)";
885 targetCard.style.boxShadow = "0 0 15px rgba(200, 100, 0, 0.3)";
886
887 setTimeout(() => {
888 targetCard.style.border = originalBorder;
889 targetCard.style.boxShadow = originalShadow;
890 }, 2000);
891 }, 50); // 0.05초 뒤 실행
892 }
893 }
894
895 // 3. 페이지를 떠날 때(클릭/새로고침): 현재 스크롤 위치 저장
896 window.addEventListener('beforeunload', () => {
897 if (scrollArea) {
898 sessionStorage.setItem('hinanaScrollPos', scrollArea.scrollTop);
899 }
900 });
901
902 // --- [기타 기존 기능들 유지] ---
903
904 // 익명 작성 토글
905 const toggleBtn = document.getElementById('toggle-anonymous-btn');
906 const cancelBtn = document.getElementById('cancel-anonymous-btn');
907 const mainPostContainer = document.getElementById('main-post-container');
908 const anonPostContainer = document.getElementById('anonymous-post-container');
909
910 // 서명 이미지 더블 클릭 이벤트
911 const signImage = document.getElementById('fumika_sign');
912 if (signImage) {
913 signImage.addEventListener('dblclick', () => { window.location.href = '/hinana/ai'; });
914 let lastTap = 0;
915 signImage.addEventListener('touchend', (e) => {
916 const currentTime = new Date().getTime();
917 if (currentTime - lastTap < 300 && currentTime - lastTap > 0) {
918 e.preventDefault();
919 window.location.href = '/hinana/ai';
920 }
921 lastTap = currentTime;
922 });
923 }
924 });
925
926 // 좋아요 및 기타 UI 기능
927 $(document).ready(function() {
928 $(document).on('submit', '.like-form', function(e) {
929 e.preventDefault();
930 var form = $(this);
931 var btn = form.find('button');
932 var icon = btn.find('i');
933 var countSpan = btn.find('.like-count');
934
935 $.ajax({
936 type: "POST", url: form.attr('action') || "/like", data: form.serialize(),
937 success: function(res) {
938 if(res.isLiked) { btn.addClass('liked'); icon.removeClass('bi-heart').addClass('bi-heart-fill'); }
939 else { btn.removeClass('liked'); icon.removeClass('bi-heart-fill').addClass('bi-heart'); }
940 countSpan.text('Likes ' + res.likeCount);
941 },
942 error: function(xhr) {
943 if(xhr.status === 401) { showConfirm('로그인이 필요합니다.').then(function(ok){ if(ok) location.href = '/login'; }); }
944 else { showAlert("오류 발생"); }
945 }
946 });
947 });
948
949 // 내용 더보기/접기 처리 (초기화 - <br> 기반 줄 수 분리)
950 const MAX_LINES = 6;
951 const cards = document.querySelectorAll('.content-card');
952 cards.forEach(function(card) {
953 const content = card.querySelector('.post-content');
954 const btn = card.querySelector('.btn-show-more');
955 if (!content || !btn) return;
956
957 const html = content.innerHTML;
958 const parts = html.split(/<br\s*\/?>/i);
959 if (parts.length <= MAX_LINES) {
960 btn.remove();
961 return;
962 }
963
964 const visible = parts.slice(0, MAX_LINES).join('<br>');
965 const hidden = parts.slice(MAX_LINES).join('<br>');
966 content.innerHTML = visible + '<span class="post-content-extra"><br>' + hidden + '</span>';
967 btn.style.display = 'inline-block';
968 });
969 });
970
971 // 유틸리티 함수들
972 function toggleReplyForm(postId) {
973 const formDiv = document.getElementById('reply-form-' + postId);
974 if (formDiv) {
975 if (formDiv.classList.contains('d-none')) {
976 formDiv.classList.remove('d-none');
977 formDiv.querySelector('textarea')?.focus();
978 } else {
979 formDiv.classList.add('d-none');
980 }
981 } else {
982 showConfirm('로그인이 필요합니다.').then(function(ok){ if(ok) location.href = '/login?redirect=/hinana/index'; });
983 }
984 }
985
986 function togglePostContent(postId, btn) {
987 const wrapper = document.getElementById('content-wrapper-' + postId);
988 if (wrapper.classList.contains('expanded')) {
989 wrapper.classList.remove('expanded');
990 btn.innerText = '더보기';
991 } else {
992 wrapper.classList.add('expanded');
993 btn.innerText = '접기';
994 }
995 }
996
997 function showAllReplies(postId, btn) {
998 $('.hidden-reply-' + postId).removeClass('d-none');
999 $(btn).parent().remove();
1000 }
1001
1002 function checkAnonFormReady() {
1003 const username = document.getElementById('anon-username');
1004 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1005 const content = document.getElementById('anon-write-input');
1006 const btn = document.getElementById('anon-submit-btn');
1007 if (!btn) return;
1008
1009 const ready = username && username.value.trim().length > 0
1010 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1011 && content && content.value.trim().length > 0;
1012
1013 if (ready) {
1014 btn.disabled = false;
1015 btn.style.backgroundColor = document.body.classList.contains('dark-mode') ? '#b45309' : 'var(--accent-color)';
1016 btn.style.color = 'white';
1017 btn.style.cursor = 'pointer';
1018 btn.style.opacity = '1';
1019 } else {
1020 btn.disabled = true;
1021 btn.style.backgroundColor = 'var(--border-color)';
1022 btn.style.color = 'var(--text-secondary)';
1023 btn.style.cursor = 'not-allowed';
1024 btn.style.opacity = '0.6';
1025 }
1026 }
1027
1028 function validateAnonForm() {
1029 const username = document.getElementById('anon-username');
1030 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1031 const content = document.getElementById('anon-write-input');
1032 return username && username.value.trim().length > 0
1033 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1034 && content && content.value.trim().length > 0;
1035 }
1036
1037 function checkInputLength(input, counterId) {
1038 const maxLength = 150;
1039 const counter = document.getElementById(counterId);
1040 if (counter) {
1041 counter.innerText = `${input.value.length}/${maxLength}`;
1042 counter.className = 'small ms-2 ' + (input.value.length >= maxLength ? 'text-danger fw-bold' : 'text-muted');
1043 }
1044 }
1045
1046 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1047 const pw = await showPrompt("비밀번호:"); if(!pw) return;
1048 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1049 method:'POST', headers:{'Content-Type':'application/json'},
1050 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1051 }).then(r=>r.json()).then(d=>{ showAlert(d.message).then(()=>{ if(d.success) location.reload(); }); });
1052 }
1053
1054 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1055 const pw = await showPrompt("비밀번호:"); if(!pw) return;
1056 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1057 method:'POST', headers:{'Content-Type':'application/json'},
1058 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1059 }).then(r=>r.json()).then(d=>{ showAlert(d.message).then(()=>{ if(d.success) location.reload(); }); });
1060 }
1061
1062 function toggleWriteMode(mode) {
1063 const userForm = document.getElementById('form-mode-user');
1064 const anonForm = document.getElementById('form-mode-anon');
1065 const btnUser = document.getElementById('btn-mode-user');
1066 const btnAnon = document.getElementById('btn-mode-anon');
1067 if (mode === 'user') {
1068 if(userForm) userForm.classList.remove('d-none');
1069 if(anonForm) anonForm.classList.add('d-none');
1070 if(btnUser) btnUser.classList.add('active');
1071 if(btnAnon) btnAnon.classList.remove('active');
1072 } else {
1073 if(userForm) userForm.classList.add('d-none');
1074 if(anonForm) anonForm.classList.remove('d-none');
1075 if(btnUser) btnUser.classList.remove('active');
1076 if(btnAnon) btnAnon.classList.add('active');
1077 }
1078 }
1079
1080 function changeSortOrder(sortValue) {
1081 const url = new URL(window.location.href);
1082 url.searchParams.set('sort', sortValue);
1083 url.searchParams.set('page', '1');
1084 window.location.href = url.toString();
1085 }
1086 // 외부 링크 경고 (미리보기 카드 클릭 포함)
1087 document.addEventListener('click', function(e) {
1088 const card = e.target.closest('.link-preview-card');
1089 const link = card ? null : e.target.closest('a.external-link');
1090 const target = card || link;
1091 if (!target) return;
1092 e.preventDefault();
1093 const url = target.getAttribute('data-url');
1094 showConfirm('안전하지 않을 수 있는 외부 링크입니다.\n이동하시겠습니까?\n\n' + url).then(function(ok) {
1095 if (ok) window.open(url, '_blank', 'noopener,noreferrer');
1096 });
1097 });
1098
1099 // 링크 미리보기 카드 생성
1100 (function() {
1101 const links = document.querySelectorAll('.post-content a.external-link, .reply-content a.external-link');
1102 const seen = new Set();
1103 links.forEach(function(link) {
1104 const url = link.getAttribute('data-url');
1105 if (!url || seen.has(url)) return;
1106 seen.add(url);
1107
1108 fetch('/api/link-preview?url=' + encodeURIComponent(url))
1109 .then(r => r.json())
1110 .then(data => {
1111 if (data.error || (!data.title && !data.description)) return;
1112
1113 const card = document.createElement('div');
1114 card.className = 'link-preview-card';
1115 card.setAttribute('data-url', url);
1116
1117 const bar = document.createElement('div');
1118 bar.className = 'link-preview-bar';
1119 if (data.color) bar.style.backgroundColor = data.color;
1120
1121 const body = document.createElement('div');
1122 body.className = 'link-preview-body';
1123
1124 if (data.domain) {
1125 const domain = document.createElement('div');
1126 domain.className = 'link-preview-domain';
1127 domain.textContent = data.domain;
1128 body.appendChild(domain);
1129 }
1130 if (data.title) {
1131 const title = document.createElement('div');
1132 title.className = 'link-preview-title';
1133 title.textContent = data.title;
1134 body.appendChild(title);
1135 }
1136 if (data.description) {
1137 const desc = document.createElement('div');
1138 desc.className = 'link-preview-desc';
1139 desc.textContent = data.description;
1140 body.appendChild(desc);
1141 }
1142 if (data.image) {
1143 const img = document.createElement('img');
1144 img.className = 'link-preview-img';
1145 img.src = data.image;
1146 img.alt = '';
1147 img.onerror = function() { this.remove(); };
1148 body.appendChild(img);
1149 }
1150
1151 card.appendChild(bar);
1152 card.appendChild(body);
1153
1154 // 링크 바로 뒤에 삽입
1155 if (link.nextSibling) {
1156 link.parentNode.insertBefore(card, link.nextSibling);
1157 } else {
1158 link.parentNode.appendChild(card);
1159 }
1160 })
1161 .catch(function() {});
1162 });
1163 })();
1164 </script>
1165
1166 <script>
1167 var _PUSH_KEY = '<%= typeof vapidPublicKey !== "undefined" ? vapidPublicKey : "" %>';
1168 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1169 </script>
1170 <script>
1171 let _swReg = null;
1172
1173 // Android WebView 브릿지: FCM 토큰 수신 후 서버에 저장
1174 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1175 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1176 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1177 method: 'POST',
1178 headers: { 'Content-Type': 'application/json' },
1179 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1180 }).catch(() => {});
1181 };
1182
1183 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1184 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1185 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1186 }
1187
1188 function urlBase64ToUint8Array(b64) {
1189 const pad = '='.repeat((4 - b64.length % 4) % 4);
1190 const base64 = (b64 + pad).replace(/-/g, '+').replace(/_/g, '/');
1191 const raw = atob(base64);
1192 return Uint8Array.from(raw, c => c.charCodeAt(0));
1193 }
1194
1195 async function subscribePush(reg) {
1196 const existing = await reg.pushManager.getSubscription();
1197 if (!existing) {
1198 try {
1199 const sub = await reg.pushManager.subscribe({
1200 userVisibleOnly: true,
1201 applicationServerKey: urlBase64ToUint8Array(_PUSH_KEY)
1202 });
1203 await fetch('/api/push/subscribe', {
1204 method: 'POST',
1205 headers: { 'Content-Type': 'application/json' },
1206 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1207 });
1208 } catch (e) { console.warn('Push 구독 실패:', e); }
1209 } else {
1210 fetch('/api/push/subscribe', {
1211 method: 'POST',
1212 headers: { 'Content-Type': 'application/json' },
1213 [SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
1214 }).catch(() => {});
1215 }
1216 }
1217
1218 // 버튼 클릭 시 권한 요청 (사용자 제스처 필요)
1219 async function requestNotifPermission() {
1220 const banner = document.getElementById('notif-banner');
1221 const perm = await Notification.requestPermission();
1222 if (perm === 'granted') {
1223 if (banner) banner.remove();
1224 if (_swReg) subscribePush(_swReg);
1225 } else {
1226 if (banner) banner.remove();
1227 }
1228 }
1229
1230 (async function() {
1231 if (!('serviceWorker' in navigator) || !('PushManager' in window)) return;
1232 const reg = await navigator.serviceWorker.register('/sw.js');
1233 await navigator.serviceWorker.ready;
1234 _swReg = reg;
1235 if (!_PUSH_USER || !_PUSH_KEY) return;
1236
1237 if (Notification.permission === 'granted') {
1238 // 이미 허용된 경우 바로 구독
1239 subscribePush(reg);
1240 } else if (Notification.permission === 'default') {
1241 // 아직 결정 안 된 경우 배너 표시
1242 const banner = document.getElementById('notif-banner');
1243 if (banner) banner.classList.remove('d-none');
1244 }
1245 // 'denied'인 경우 아무것도 하지 않음
1246 })();
1247 </script>
1248 </body>
1249 </html>
1250