권한 UI와 글 목록 검색 보정 v1.5.10

2026-05-27 10:42:51 +09:00
parent fd9416c0e4
commit 8ca63c0d00
11 changed files with 255 additions and 44 deletions
--- a/components/admin/AdminPageForm.vue
+++ b/components/admin/AdminPageForm.vue
@@ -40,6 +40,23 @@ const htmlCursorRange = reactive({
  end: 0
 })

+const defaultHtmlDocument = `<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Landing</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+  </style>
+</head>
+<body>
+</body>
+</html>`
+
 const form = reactive({
  title: props.initialPage.title || '',
  slug: props.initialPage.slug || '',
@@ -203,6 +220,42 @@ const insertTextAtHtmlCursor = async (text) => {
  htmlCursorRange.end = nextCursor
 }

+/**
+ * HTML 기본 문서 골격을 현재 본문에 채운다.
+ * @returns {Promise<void>}
+ */
+const completeHtmlDocumentSkeleton = async () => {
+  form.content = defaultHtmlDocument
+
+  await nextTick()
+
+  const bodyIndex = form.content.indexOf('</body>')
+  const nextCursor = bodyIndex > -1 ? bodyIndex : form.content.length
+  htmlEditor.value?.focus()
+  htmlEditor.value?.setSelectionRange(nextCursor, nextCursor)
+  htmlCursorRange.start = nextCursor
+  htmlCursorRange.end = nextCursor
+}
+
+/**
+ * HTML textarea에서 VS Code식 기본 골격 단축 입력을 처리한다.
+ * @param {KeyboardEvent} event - 키보드 이벤트
+ * @returns {Promise<void>}
+ */
+const handleHtmlEditorKeydown = async (event) => {
+  if (event.key !== 'Tab' || form.renderMode !== 'html_document') {
+    return
+  }
+
+  const content = form.content.trim()
+  if (content !== '' && content !== '!') {
+    return
+  }
+
+  event.preventDefault()
+  await completeHtmlDocumentSkeleton()
+}
+
 /**
 * 페이지 HTML 자산을 업로드하고 본문 커서 위치에 URL을 삽입한다.
 * @param {Event} event - 파일 입력 이벤트
@@ -355,20 +408,10 @@ defineExpose({
              @click="rememberHtmlCursor"
              @focus="rememberHtmlCursor"
              @input="rememberHtmlCursor"
+              @keydown="handleHtmlEditorKeydown"
              @keyup="rememberHtmlCursor"
              @select="rememberHtmlCursor"
-              placeholder="<!doctype html>
-<html lang=&quot;ko&quot;>
-<head>
-  <meta charset=&quot;utf-8&quot;>
-  <title>Landing</title>
-  <style>
-    body { margin: 0; }
-  </style>
-</head>
-<body>
-</body>
-</html>"
+              :placeholder="defaultHtmlDocument"
            />
          </label>
        </section>