Public Source Viewer
비나래아카이브 개발자 포털
실제 서비스 구조를 살펴볼 수 있는 공개용 코드 뷰어입니다. 인증, 세션, 외부 연동, 토큰, 관리자 식별 등 보안상 민감한 구현은 파일 단위 또는 줄 단위로 검열됩니다.
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(/ /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(/ /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(/ /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>© 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