Public Source Viewer
비나래아카이브 개발자 포털
실제 서비스 구조를 살펴볼 수 있는 공개용 코드 뷰어입니다. 인증, 세션, 외부 연동, 토큰, 관리자 식별 등 보안상 민감한 구현은 파일 단위 또는 줄 단위로 검열됩니다.
view/hinana/editPost.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
<meta name="theme-color" content="<%= (typeof theme !== 'undefined' && theme === 'dark') ? '#000000' : '#ffffff' %>">
8
<meta name="apple-mobile-web-app-title" content="비나래 아카이브 도서관">
9
<meta property="og:image" content="/image/2.png" />
10
<meta property="og:description" content="비나래 아카이브 도서관"/>
11
<meta property="og:url" content="https://hinana.moe/hinana/blog"/>
12
<meta property="og:title" content="비나래 아카이브 도서관"/>
13
<link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap.min.css' />
14
<script src="/vendors/bootstrap/js/bootstrap.min.js"></script>
15
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
16
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css">
17
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
18
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
19
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
20
<title>비나래 아카이브 도서관</title>
21
22
<style>
23
:root {
24
--font-family: 'Noto Sans KR', sans-serif;
25
--bg-main: #ffffff; --bg-secondary: #f7f9f9; --bg-tertiary: #eff3f4;
26
--text-primary: #0f1419; --text-secondary: #536471;
27
--accent-color: #1d9bf0; --danger-color: #f4212e; --border-color: #eff3f4;
28
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
29
}
30
body.dark-mode {
31
--bg-main: #000000; --bg-secondary: #16181c; --bg-tertiary: #202327;
32
--text-primary: #e7e9ea; --text-secondary: #71767b;
33
--accent-color: #1d9bf0; --danger-color: #f4212e; --border-color: #2f3336;
34
--shadow-sm: 0 1px 3px rgba(255,255,255,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.6);
35
}
36
37
html, body { margin: 0; min-height: 100vh; font-family: var(--font-family); background-color: var(--bg-main); color: var(--text-primary); }
38
a { text-decoration: none; color: inherit; }
39
40
.global-header {
41
height: 60px;
42
background-color: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
43
border-bottom: 1px solid var(--border-color);
44
display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
45
position: sticky; top: 0; z-index: 1000;
46
}
47
body.dark-mode .global-header { background-color: rgba(0,0,0,0.85); }
48
.header-brand { display: flex; align-items: center; }
49
.header-logo { height: 28px; width: auto; }
50
body:not(.dark-mode) .logo-night { display: none; }
51
body.dark-mode .logo-day { display: none; }
52
53
.header-nav {
54
position: absolute; left: 50%; transform: translateX(-50%);
55
display: flex; gap: 20px; align-items: center;
56
}
57
.nav-link { font-weight: 600; font-size: 0.95rem; color: var(--text-secondary); cursor: pointer; transition: color 0.2s; }
58
.nav-link:hover { color: var(--accent-color); }
59
.nav-link.active { color: var(--text-primary); }
60
.nav-divider { opacity: 0.3; color: var(--text-secondary); }
61
62
.header-controls { display: flex; align-items: center; gap: 10px; z-index: 10; position: relative; }
63
64
/* Quill 에디터 테마 */
65
.ql-toolbar { border-color: var(--border-color) !important; background: var(--bg-tertiary); border-radius: 8px 8px 0 0; }
66
.ql-container { border-color: var(--border-color) !important; background: var(--bg-main); border-radius: 0 0 8px 8px; font-size: 1rem; font-family: var(--font-family); min-height: 400px; }
67
.ql-editor { min-height: 400px; color: var(--text-primary); }
68
.ql-editor.ql-blank::before { color: var(--text-secondary); }
69
body.dark-mode .ql-toolbar .ql-stroke { stroke: var(--text-secondary); }
70
body.dark-mode .ql-toolbar .ql-fill { fill: var(--text-secondary); }
71
body.dark-mode .ql-toolbar .ql-picker { color: var(--text-secondary); }
72
body.dark-mode .ql-toolbar button:hover .ql-stroke,
73
body.dark-mode .ql-toolbar .ql-active .ql-stroke { stroke: var(--accent-color); }
74
body.dark-mode .ql-toolbar button:hover .ql-fill,
75
body.dark-mode .ql-toolbar .ql-active .ql-fill { fill: var(--accent-color); }
76
body.dark-mode .ql-picker-options { background: var(--bg-secondary); border-color: var(--border-color); }
77
body.dark-mode .ql-picker-item { color: var(--text-primary); }
78
.icon-btn { border: none; background: transparent; color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; padding: 4px; transition: color 0.2s; }
79
.icon-btn:hover { color: var(--text-primary); }
80
81
.content-area {
82
max-width: 900px; margin: 40px auto; padding: 0 20px;
83
}
84
85
.write-card {
86
background-color: var(--bg-secondary); border: 1px solid var(--border-color);
87
border-radius: 12px; box-shadow: var(--shadow-sm); padding: 40px;
88
}
89
.write-card h2 { font-size: 1.5rem; font-weight: 700; color: var(--accent-color); margin-bottom: 30px; }
90
91
.form-control {
92
background-color: var(--bg-main); border: 1px solid var(--border-color);
93
color: var(--text-primary); border-radius: 8px;
94
}
95
.form-control:focus {
96
border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.15);
97
}
98
.form-label { color: var(--text-secondary); font-weight: 600; font-size: 0.9rem; }
99
100
.btn-write {
101
background-color: var(--accent-color); color: white; border: none;
102
padding: 10px 30px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: opacity 0.2s;
103
}
104
.btn-write:hover { opacity: 0.85; color: white; }
105
106
.btn-home {
107
border: 1px solid var(--border-color); background: transparent;
108
color: var(--text-secondary); padding: 10px 30px; border-radius: 8px; cursor: pointer; transition: all 0.2s;
109
}
110
.btn-home:hover { border-color: var(--accent-color); color: var(--accent-color); }
111
112
.footer-area {
113
text-align: center; padding: 40px 20px; color: var(--text-secondary); font-size: 0.75rem; line-height: 1.8;
114
}
115
.footer-area img { width: 160px; opacity: 0.7; mix-blend-mode: multiply; }
116
body.dark-mode .footer-area img { mix-blend-mode: screen; }
117
118
@media (max-width: 768px) {
119
.header-nav { position: static; transform: none; gap: 12px; }
120
.global-header { flex-wrap: wrap; height: auto; padding: 10px 15px; gap: 8px; }
121
.write-card { padding: 25px; }
122
}
123
</style>
124
</head>
125
126
<body class="<%= (typeof theme !== 'undefined' && theme === 'dark') ? 'dark-mode' : '' %>">
127
<header class="global-header">
128
<div class="header-brand">
129
<a href="/hinana/index">
130
<img src="/image/archive.png" alt="Hinana Archive" class="header-logo logo-day">
131
<img src="/image/archive1.png" alt="Hinana Archive" class="header-logo logo-night">
132
</a>
133
</div>
134
<nav class="header-nav">
135
<a href="/hinana/index" class="nav-link">Archive</a>
136
<a href="/hinana/info" class="nav-link">Info</a>
137
<a href="/hinana/blog" class="nav-link active">Blog</a>
138
<a href="/hinana/lounge" class="nav-link">Lounge</a>
139
<span class="nav-divider">|</span>
140
<% if (username) { %>
141
<a href="/logout?redirect=/hinana/blog" class="nav-link text-danger fw-bold">Logout</a>
142
<% } else { %>
143
<a href="/login?redirect=/hinana/blog" class="nav-link fw-bold" style="color: var(--accent-color);">Login</a>
144
<% } %>
145
</nav>
146
<div class="header-controls">
147
<a href="/hinana/gallery#brand-assets" class="nav-link" style="font-size:0.9rem;">사이트 맵</a>
148
<form action="/toggle-theme" method="POST" class="d-inline">
149
<button type="submit" class="icon-btn" title="테마 변경">
150
<i class="bi <%= (typeof theme !== 'undefined' && theme==='dark') ? 'bi-moon-stars-fill':'bi-sun-fill' %>"></i>
151
</button>
152
</form>
153
</div>
154
</header>
155
156
<div class="content-area">
157
<div class="write-card">
158
<h2>게시물 수정</h2>
159
<form action="/hinana/edit-post" method="POST">
160
<input type="hidden" name="postId" value="<%= post.id %>">
161
<div class="mb-3">
162
<label for="title" class="form-label">제목</label>
163
<input type="text" name="title" class="form-control" value="<%= post.title %>" required>
164
</div>
165
<div class="mb-3">
166
<label class="form-label">내용</label>
167
<div id="quill-editor"></div>
168
<input type="hidden" id="content" name="content">
169
</div>
170
<div class="d-flex gap-2">
171
<button type="submit" class="btn-write">수정하기</button>
172
<a href="/hinana/blog" class="btn-home">취소</a>
173
</div>
174
</form>
175
</div>
176
</div>
177
178
<div class="footer-area">
179
<img src="/image/sign.png" alt="sign"><br>
180
<strong>비나래 ARCHIVE</strong><br>
181
X - @NoctchillHinana<br>
182
© 2024~2026. 비나래 | hinana.moe
183
</div>
184
185
<script>
186
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
187
188
const quill = new Quill('#quill-editor', {
189
theme: 'snow',
190
modules: {
191
toolbar: {
192
container: [
193
[{ header: [1, 2, 3, false] }],
194
['bold', 'italic', 'underline'],
195
[{ list: 'ordered' }, { list: 'bullet' }],
196
['link', 'image'],
197
['clean']
198
],
199
handlers: { image: quillImageHandler }
200
}
201
}
202
});
203
204
quill.clipboard.dangerouslyPasteHTML(initialContent);
205
206
function quillImageHandler() {
207
const input = document.createElement('input');
208
input.setAttribute('type', 'file');
209
input.setAttribute('accept', 'image/*');
210
input.click();
211
input.onchange = function () {
212
const file = input.files[0];
213
if (!file) return;
214
const fd = new FormData();
215
fd.append('image', file);
216
fetch('/upload/image', { method: 'POST', body: fd })
217
.then(r => r.json())
218
.then(data => {
219
const range = quill.getSelection();
220
quill.insertEmbed(range ? range.index : 0, 'image', data.location);
221
})
222
.catch(() => alert('이미지 업로드에 실패했어요.'));
223
};
224
}
225
226
document.querySelector('form').addEventListener('submit', function () {
227
document.getElementById('content').value = quill.root.innerHTML;
228
});
229
</script>
230
</body>
231
</html>
232