-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathadmin.html
More file actions
175 lines (165 loc) · 9.26 KB
/
Copy pathadmin.html
File metadata and controls
175 lines (165 loc) · 9.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' https://cdn.jsdelivr.net; object-src 'none'; base-uri 'none'">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글 관리 — Kyumswriting</title>
<meta name="robots" content="noindex">
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" integrity="sha384-GIdEBaqGN9mNkDkMkzMHW8EKUqtpPIe/sLj1X7DIrnc9uPtLROJgmuDlh+3rBw0j" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/latin.css" integrity="sha384-GDuWkQ2vJ3WLB+Pwjr2vmR7AG/si+whIv67zaJbePaDliRT2+WESPt1RYPPu5/4P" crossorigin="anonymous">
<link rel="stylesheet" href="/assets/vendor/editor.bundle.css">
<link rel="stylesheet" href="/css/theme.css">
<link rel="stylesheet" href="/css/base.css">
<link rel="stylesheet" href="/css/components.css">
<link rel="stylesheet" href="/css/admin.css">
<script src="/js/theme.js"></script>
</head>
<body>
<header class="site-header">
<div class="inner">
<div class="left">
<button class="menu-btn" id="menu-btn" aria-label="메뉴 열기" aria-expanded="false" aria-controls="drawer">
<span></span><span></span><span></span>
</button>
<a class="site-logo" href="/">kyumswriting<span class="suffix">.log</span></a>
</div>
<nav class="header-actions">
<a class="nav-link" href="/">index</a>
<a class="nav-link" href="/archive.html">archive</a>
<a class="nav-link" href="/tags.html">tags</a>
<a class="nav-link active" href="/admin.html">write</a>
<button class="theme-btn" id="theme-toggle" data-theme-toggle title="테마 전환" aria-label="테마 전환">
<span class="to-dark">DARK</span><span class="to-light">LIGHT</span>
</button>
</nav>
</div>
</header>
<main class="container admin-container">
<div class="banner" id="banner"></div>
<!-- 토큰 로그인 -->
<section class="admin-view" id="login-view">
<div class="login-card">
<h1 class="admin-title">글 관리 시작하기</h1>
<p class="admin-sub">GitHub 토큰으로 이 블로그 저장소에 연결합니다.<br>토큰은 이 브라우저에만 저장돼요.</p>
<div class="field">
<label for="token-input">GitHub Fine-grained Token</label>
<input type="password" id="token-input" placeholder="github_pat_..." autocomplete="off">
<div class="error" id="token-error"></div>
</div>
<div class="field">
<button class="btn btn-primary" id="btn-login" style="width:100%">연결하기</button>
</div>
<div class="token-guide">
<strong>토큰 발급 방법</strong> (한 번만 하면 됩니다)
<ol>
<li><a href="https://github.com/settings/personal-access-tokens/new" target="_blank" rel="noopener">GitHub → Fine-grained token 발급 페이지</a> 접속</li>
<li>Repository access: <strong>Only select repositories → IM5K58.github.io만</strong> 선택</li>
<li>Permissions → Repository permissions → <strong>Contents: Read and write</strong>만 부여</li>
<li>만료 기간 설정(90일 권장) 후 생성된 토큰을 위에 붙여넣기</li>
</ol>
이렇게 발급하면 토큰이 유출되더라도 피해 범위가 이 블로그 저장소로 한정됩니다.
공용 PC에서는 사용 후 꼭 로그아웃하세요.
</div>
</div>
</section>
<!-- 글 목록 관리 -->
<section class="admin-view" id="list-view">
<div class="admin-topbar">
<h1 class="admin-title">내 글 관리</h1>
<div class="actions">
<button class="btn btn-primary" id="btn-new">+ 새 글 쓰기</button>
<button class="btn btn-ghost" id="btn-cats">카테고리 관리</button>
<button class="btn btn-ghost" id="btn-rebuild" title="md 파일 기준으로 index.json을 다시 생성">인덱스 재빌드</button>
<button class="btn btn-ghost" id="btn-logout">로그아웃</button>
</div>
</div>
<div class="manage-list" id="manage-list"></div>
</section>
<!-- 카테고리 관리 -->
<section class="admin-view" id="cats-view">
<div class="admin-topbar">
<h1 class="admin-title">카테고리 관리</h1>
<div class="actions">
<button class="btn btn-ghost" id="btn-cats-back">← 목록으로</button>
</div>
</div>
<p class="admin-sub" style="margin-bottom:20px">여기서 만든 카테고리를 글 쓸 때 선택할 수 있어요. 상위 카테고리를 고르면 그 아래 하위 카테고리로 만들어집니다. 글이 있거나 하위가 있는 카테고리는 삭제할 수 없습니다.</p>
<div class="cats-add">
<select id="new-cat-parent" title="상위 카테고리"></select>
<input type="text" id="new-cat" placeholder="새 카테고리 이름" autocomplete="off">
<button class="btn btn-primary" id="btn-add-cat">추가</button>
</div>
<div class="manage-list" id="cats-list"></div>
</section>
<!-- 에디터 -->
<section class="admin-view" id="editor-view">
<div class="admin-topbar">
<h1 class="admin-title" id="editor-title">새 글 쓰기</h1>
<div class="actions">
<button class="btn btn-ghost" id="btn-back">← 목록으로</button>
<button class="btn btn-primary" id="btn-save">저장 (커밋)</button>
</div>
</div>
<div class="editor-meta">
<div class="field wide">
<label for="f-title">제목</label>
<input type="text" id="f-title" placeholder="글 제목">
</div>
<div class="field">
<label for="f-slug">Slug (URL 주소)</label>
<input type="text" id="f-slug" placeholder="2026-08-06-example" autocomplete="off">
<div class="hint">영문 소문자·숫자·하이픈. 저장 후엔 변경할 수 없어요.</div>
<div class="error" id="slug-error"></div>
</div>
<div class="field">
<label for="f-category">카테고리</label>
<select id="f-category"></select>
<div class="hint">카테고리는 목록 화면의 <b>카테고리 관리</b>에서 추가할 수 있어요.</div>
</div>
<div class="field">
<label for="f-tags">태그 (쉼표로 구분)</label>
<input type="text" id="f-tags" placeholder="예: closure, scope" autocomplete="off">
</div>
<div class="field">
<label for="f-thumbnail">썸네일 경로 (선택)</label>
<input type="text" id="f-thumbnail" placeholder="이미지 붙여넣으면 자동 입력" autocomplete="off">
</div>
<div class="field wide">
<label for="f-summary">요약 (목록에 표시)</label>
<input type="text" id="f-summary" placeholder="이 글을 한두 문장으로 요약하면?">
</div>
<div class="field wide">
<label class="checkbox-field"><input type="checkbox" id="f-draft"> 임시글 (목록에 노출하지 않음)</label>
</div>
</div>
<div id="editor"></div>
<details class="editor-help">
<summary>에디터 사용법 (노션처럼 쓰기)</summary>
<ul>
<li><b>/</b> — 빈 줄 맨 앞에서 입력하면 블록 메뉴. 이어서 타이핑하면 검색 (한글·영문 모두: <code>/제목</code>, <code>/h1</code>, <code>/code</code>, <code>/표</code>)</li>
<li><b>블록 이동/추가</b> — 블록에 마우스를 올리면 왼쪽에 <b>⠿ 드래그 핸들</b>과 <b>+ 버튼</b>이 떠요. +는 아래에 새 블록 추가</li>
<li><b>블록 삭제</b> — 블록 다음 줄 맨 앞에서 <b>Backspace</b> → 블록이 파랗게 선택됨 → 한 번 더 누르면 통째로 삭제 (표·코드 블록도 동일)</li>
<li><b>마크다운 단축</b> — <code># </code> 제목, <code>- </code> 목록, <code>> </code> 인용구, <code>```</code> 코드, <code>---</code> 구분선이 입력 즉시 변환</li>
<li><b>수식</b> — <code>$수식$</code> 인라인, <code>/수식</code>으로 블록. 입력 즉시 렌더</li>
<li><b>콜아웃</b> — <code>/콜아웃</code> 삽입 후 <code>NOTE</code>를 <code>TIP</code>/<code>IMPORTANT</code>/<code>WARNING</code>/<code>CAUTION</code>으로 바꾸면 색이 바뀜</li>
<li><b>표·이미지</b> — 웹/엑셀 표를 복사해 붙여넣으면 표로 변환, 스크린샷 붙여넣으면 자동 업로드</li>
</ul>
</details>
</section>
</main>
<!-- 좁은 화면에서는 헤더 토글이 숨으므로, 관리 화면에도 내려앉을 자리가 필요하다 -->
<footer class="site-footer">
<span>© 2026 IM5K58</span>
<a href="/">← 블로그로</a>
</footer>
<script src="/js/config.js"></script>
<script src="/js/posts.js"></script>
<script src="/js/render.js"></script>
<script src="/js/github-api.js"></script>
<script src="/js/admin.js"></script>
<script src="/js/menu.js"></script>
</body>
</html>