페이지 HTML 작성 기본값과 자산 업로드 개선 v1.5.3

components/admin/AdminPageForm.vue

@@ -32,30 +32,60 @@ const slugTouched = ref(Boolean(props.initialPage.slug))
 const blockEditor = ref(null)
 const htmlEditor = ref(null)
 const editorMode = ref('write')
-const mediaItems = ref([])
-const isMediaPickerOpen = ref(false)
-const isLoadingMedia = ref(false)
-const isUploadingFeaturedImage = ref(false)
+const isUploadingPageAsset = ref(false)
 const isSettingsOpen = ref(true)
 const savedPageSnapshot = ref('')
+const htmlCursorRange = reactive({
+  start: 0,
+  end: 0
+})
 
 const form = reactive({
   title: props.initialPage.title || '',
   slug: props.initialPage.slug || '',
-  renderMode: props.initialPage.renderMode || 'markdown',
-  content: props.initialPage.content || '',
-  featuredImage: props.initialPage.featuredImage || ''
+  renderMode: props.initialPage.renderMode || 'html_document',
+  content: props.initialPage.content || ''
 })
 
 /**
- * 문자열을 URL 슬러그로 변환
+ * 한글 음절 1자를 영문 표기로 변환
+ * @param {string} char - 변환할 문자
+ * @returns {string} 영문 표기
+ */
+const romanizeHangulSyllable = (char) => {
+  const syllableCode = char.charCodeAt(0)
+  const hangulBase = 0xac00
+  const hangulLast = 0xd7a3
+
+  if (syllableCode < hangulBase || syllableCode > hangulLast) {
+    return char
+  }
+
+  const choseong = ['g', 'kk', 'n', 'd', 'tt', 'r', 'm', 'b', 'pp', 's', 'ss', '', 'j', 'jj', 'ch', 'k', 't', 'p', 'h']
+  const jungseong = ['a', 'ae', 'ya', 'yae', 'eo', 'e', 'yeo', 'ye', 'o', 'wa', 'wae', 'oe', 'yo', 'u', 'wo', 'we', 'wi', 'yu', 'eu', 'ui', 'i']
+  const jongseong = ['', 'k', 'k', 'ks', 'n', 'nj', 'nh', 't', 'l', 'lk', 'lm', 'lb', 'ls', 'lt', 'lp', 'lh', 'm', 'p', 'ps', 't', 't', 'ng', 't', 't', 'k', 't', 'p', 'h']
+
+  const offset = syllableCode - hangulBase
+  const choseongIndex = Math.floor(offset / 588)
+  const jungseongIndex = Math.floor((offset % 588) / 28)
+  const jongseongIndex = offset % 28
+
+  return `${choseong[choseongIndex]}${jungseong[jungseongIndex]}${jongseong[jongseongIndex]}`
+}
+
+/**
+ * 문자열을 영문 URL 슬러그로 변환
  * @param {string} value - 원본 문자열
- * @returns {string} 슬러그
+ * @returns {string} 영문 슬러그
  */
 const toSlug = (value) => value
+  .normalize('NFC')
+  .split('')
+  .map((char) => romanizeHangulSyllable(char))
+  .join('')
   .trim()
   .toLowerCase()
-  .replace(/[^a-z0-9가-힣\s-]/g, '')
+  .replace(/[^a-z0-9\s-]/g, '')
   .replace(/\s+/g, '-')
   .replace(/-+/g, '-')
   .replace(/^-|-$/g, '')
@@ -72,8 +102,7 @@ const serializePageForm = () => JSON.stringify({
   title: form.title.trim(),
   slug: pageSlug.value,
   renderMode: form.renderMode,
-  content: form.content,
-  featuredImage: form.featuredImage.trim() || null
+  content: form.content
 })
 
 const hasUnsavedPageChanges = computed(() => serializePageForm() !== savedPageSnapshot.value)
@@ -114,83 +143,6 @@ const toggleSettingsPanel = () => {
   isSettingsOpen.value = !isSettingsOpen.value
 }
 
-/**
- * 미디어 라이브러리 목록 조회
- * @returns {Promise<void>}
- */
-const fetchMediaItems = async () => {
-  isLoadingMedia.value = true
-
-  try {
-    mediaItems.value = await $fetch('/admin/api/media')
-  } finally {
-    isLoadingMedia.value = false
-  }
-}
-
-/**
- * 대표 이미지 선택 창 열기
- * @returns {Promise<void>}
- */
-const openMediaPicker = async () => {
-  isMediaPickerOpen.value = true
-  await fetchMediaItems()
-}
-
-/**
- * 대표 이미지 선택 창 닫기
- * @returns {void}
- */
-const closeMediaPicker = () => {
-  isMediaPickerOpen.value = false
-}
-
-/**
- * 대표 이미지 선택
- * @param {Object} item - 미디어 항목
- * @returns {void}
- */
-const selectFeaturedImage = (item) => {
-  form.featuredImage = item.url
-  closeMediaPicker()
-}
-
-/**
- * 대표 이미지 삭제
- * @returns {void}
- */
-const removeFeaturedImage = () => {
-  form.featuredImage = ''
-}
-
-/**
- * 대표 이미지 파일 업로드
- * @param {Event} event - 파일 입력 이벤트
- * @returns {Promise<void>}
- */
-const uploadFeaturedImage = async (event) => {
-  const files = event.target.files
-
-  if (!files?.length) {
-    return
-  }
-
-  const formData = new FormData()
-  formData.append('files', files[0])
-  isUploadingFeaturedImage.value = true
-
-  try {
-    const result = await $fetch('/admin/api/uploads', {
-      method: 'POST',
-      body: formData
-    })
-    form.featuredImage = result.files?.[0]?.url || ''
-  } finally {
-    event.target.value = ''
-    isUploadingFeaturedImage.value = false
-  }
-}
-
 /**
  * 제목 입력 후 본문 에디터로 이동
  * @param {KeyboardEvent} event - 키보드 이벤트
@@ -216,6 +168,73 @@ const setRenderMode = (mode) => {
   form.renderMode = mode
 }
 
+/**
+ * HTML textarea 커서 위치를 기억한다.
+ * @returns {void}
+ */
+const rememberHtmlCursor = () => {
+  if (!htmlEditor.value) {
+    return
+  }
+
+  htmlCursorRange.start = htmlEditor.value.selectionStart ?? form.content.length
+  htmlCursorRange.end = htmlEditor.value.selectionEnd ?? htmlCursorRange.start
+}
+
+/**
+ * HTML 본문 커서 위치에 텍스트를 삽입한다.
+ * @param {string} text - 삽입할 텍스트
+ * @returns {Promise<void>}
+ */
+const insertTextAtHtmlCursor = async (text) => {
+  const start = Math.max(0, htmlCursorRange.start)
+  const end = Math.max(start, htmlCursorRange.end)
+
+  form.content = `${form.content.slice(0, start)}${text}${form.content.slice(end)}`
+
+  await nextTick()
+
+  const nextCursor = start + text.length
+  htmlEditor.value?.focus()
+  htmlEditor.value?.setSelectionRange(nextCursor, nextCursor)
+  htmlCursorRange.start = nextCursor
+  htmlCursorRange.end = nextCursor
+}
+
+/**
+ * 페이지 HTML 자산을 업로드하고 본문 커서 위치에 URL을 삽입한다.
+ * @param {Event} event - 파일 입력 이벤트
+ * @returns {Promise<void>}
+ */
+const uploadPageAsset = async (event) => {
+  const files = event.target.files
+
+  if (!files?.length) {
+    return
+  }
+
+  rememberHtmlCursor()
+
+  const formData = new FormData()
+  formData.append('files', files[0])
+  isUploadingPageAsset.value = true
+
+  try {
+    const result = await $fetch('/admin/api/uploads', {
+      method: 'POST',
+      body: formData
+    })
+    const uploadedUrl = result.files?.[0]?.url || ''
+
+    if (uploadedUrl && form.renderMode === 'html_document') {
+      await insertTextAtHtmlCursor(uploadedUrl)
+    }
+  } finally {
+    event.target.value = ''
+    isUploadingPageAsset.value = false
+  }
+}
+
 /**
  * 페이지 입력값을 생성한다.
  * @returns {Object} 페이지 입력값
@@ -225,7 +244,7 @@ const createPayload = () => ({
   slug: pageSlug.value,
   renderMode: form.renderMode,
   content: form.content,
-  featuredImage: form.featuredImage.trim() || null
+  featuredImage: null
 })
 
 /**
@@ -305,27 +324,7 @@ defineExpose({
       </header>
 
       <main class="admin-page-form__editor-scroll min-h-0 flex-1 overflow-y-auto">
-        <section class="admin-page-form__content mx-auto w-full max-w-[804px] px-8 pb-16 pt-16">
-          <div class="admin-page-form__feature-block mb-9">
-            <figure v-if="form.featuredImage" class="admin-page-form__featured-editor group relative overflow-hidden bg-white">
-              <img class="admin-page-form__featured-editor-image aspect-[16/9] w-full bg-surface object-cover" :src="form.featuredImage" alt="">
-              <figcaption class="admin-page-form__featured-editor-actions pointer-events-none absolute inset-0 flex items-end justify-end gap-2 bg-gradient-to-t from-black/40 via-black/5 to-transparent p-4 opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100">
-                <button class="admin-page-form__featured-change rounded bg-white/95 px-3 py-1.5 text-xs font-semibold text-[#15171a] shadow-sm transition-colors hover:bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" type="button" @click="openMediaPicker">
-                  변경
-                </button>
-                <button class="admin-page-form__featured-remove rounded bg-[#fff1f2]/95 px-3 py-1.5 text-xs font-semibold text-red-700 shadow-sm transition-colors hover:bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" type="button" @click="removeFeaturedImage">
-                  삭제
-                </button>
-              </figcaption>
-            </figure>
-            <div v-else class="admin-page-form__feature-empty flex h-6 items-start">
-              <button class="admin-page-form__feature-add inline-flex items-center gap-1.5 rounded px-2 py-1 text-sm text-[#8e9cac] transition-colors hover:bg-[#eff1f2] hover:text-[#394047]" type="button" @click="openMediaPicker">
-                <span aria-hidden="true">+</span>
-                <span>대표 이미지 추가</span>
-              </button>
-            </div>
-          </div>
-
+        <section class="admin-page-form__content mx-auto w-full max-w-[804px] px-8 pb-16 pt-24">
           <input
             v-model="form.title"
             class="admin-page-form__title-input mb-2 w-full border-0 bg-transparent px-0 py-0 text-3xl font-bold leading-tight text-ink outline-none placeholder:text-[#8e9cac]"
@@ -349,6 +348,12 @@ defineExpose({
               v-model="form.content"
               class="admin-page-form__html-editor min-h-[68vh] w-full resize-y rounded border border-[#e3e6e8] bg-white px-4 py-4 font-mono text-sm leading-6 text-[#15171a] outline-none placeholder:text-[#8e9cac] focus:border-[#8e9cac]"
               spellcheck="false"
+              @blur="rememberHtmlCursor"
+              @click="rememberHtmlCursor"
+              @focus="rememberHtmlCursor"
+              @input="rememberHtmlCursor"
+              @keyup="rememberHtmlCursor"
+              @select="rememberHtmlCursor"
               placeholder="<!doctype html>
 <html lang=&quot;ko&quot;>
 <head>
@@ -404,7 +409,7 @@ defineExpose({
                 v-model="form.slug"
                 class="admin-page-form__input min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-black outline-none"
                 type="text"
-                pattern="[a-z0-9가-힣]+(-[a-z0-9가-힣]+)*"
+                pattern="[a-z0-9]+(-[a-z0-9]+)*"
                 required
                 @input="touchSlug"
               >
@@ -414,7 +419,7 @@ defineExpose({
             </p>
           </div>
 
-          <div class="admin-page-form__field grid gap-2 text-sm">
+          <div v-if="form.renderMode === 'html_document'" class="admin-page-form__field grid gap-2 text-sm">
             <span class="admin-page-form__label font-medium">페이지 형식</span>
             <div class="admin-page-form__mode-control grid grid-cols-2 rounded border border-[#e3e6e8] bg-[#eff1f2] p-1">
               <button
@@ -423,7 +428,7 @@ defineExpose({
                 type="button"
                 @click="setRenderMode('markdown')"
               >
-                기본
+                일반 텍스트
               </button>
               <button
                 class="admin-page-form__mode-button rounded px-3 py-2 text-sm font-semibold transition"
@@ -437,36 +442,22 @@ defineExpose({
           </div>
 
           <div class="admin-page-form__field grid gap-2 text-sm">
-            <span class="admin-page-form__label font-medium">대표 이미지</span>
-            <figure v-if="form.featuredImage" class="admin-page-form__featured overflow-hidden rounded border border-[#e3e6e8] bg-white">
-              <img class="admin-page-form__featured-image aspect-[4/3] w-full bg-surface object-cover" :src="form.featuredImage" alt="">
-              <figcaption class="admin-page-form__featured-actions grid gap-2 p-3">
-                <p class="admin-page-form__featured-url break-all text-xs text-muted">
-                  {{ form.featuredImage }}
-                </p>
-                <div class="admin-page-form__featured-buttons flex flex-wrap gap-2">
-                  <button class="admin-page-form__featured-change rounded border border-[#e3e6e8] px-3 py-1.5 text-xs font-semibold" type="button" @click="openMediaPicker">
-                    변경
-                  </button>
-                  <label class="admin-page-form__featured-reupload cursor-pointer rounded border border-[#e3e6e8] px-3 py-1.5 text-xs font-semibold">
-                    새 업로드
-                    <input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
-                  </label>
-                  <button class="admin-page-form__featured-remove rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700" type="button" @click="removeFeaturedImage">
-                    삭제
-                  </button>
-                </div>
-              </figcaption>
-            </figure>
-            <div v-else class="admin-page-form__featured-empty grid gap-2 rounded border border-dashed border-[#e3e6e8] bg-white p-4">
-              <button class="admin-page-form__featured-select rounded border border-[#e3e6e8] px-3 py-2 text-sm font-semibold" type="button" @click="openMediaPicker">
-                미디어에서 선택
-              </button>
-              <label class="admin-page-form__featured-upload cursor-pointer rounded bg-[#15171a] px-3 py-2 text-center text-sm font-semibold text-white">
-                {{ isUploadingFeaturedImage ? '업로드 중' : '새 이미지 업로드' }}
-                <input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
-              </label>
-            </div>
+            <span class="admin-page-form__label font-medium">HTML 자산</span>
+            <label
+              class="admin-page-form__asset-upload inline-flex h-10 cursor-pointer items-center justify-center rounded bg-[#15171a] px-3 text-sm font-semibold text-white transition-colors hover:bg-black"
+              :class="{ 'pointer-events-none opacity-50': isUploadingPageAsset }"
+            >
+              {{ isUploadingPageAsset ? '업로드 중' : '파일 업로드' }}
+              <input
+                class="sr-only"
+                type="file"
+                accept="image/*,video/*,audio/*,.pdf,.zip,.txt,.csv,.docx,.xlsx,.pptx"
+                @change="uploadPageAsset"
+              >
+            </label>
+            <p class="admin-page-form__asset-upload-hint text-xs leading-5 text-[#7c8b9a]">
+              HTML 모드에서는 업로드된 파일 URL을 현재 커서 위치에 삽입합니다. 예: &lt;img src=&quot;여기&quot;&gt;
+            </p>
           </div>
         </div>
 
@@ -486,43 +477,5 @@ defineExpose({
       </div>
     </aside>
 
-    <div
-      v-if="isMediaPickerOpen"
-      class="admin-page-form__media-picker fixed inset-0 z-50 grid place-items-center bg-black/40 px-5 py-8"
-      role="dialog"
-      aria-modal="true"
-      @click.self="closeMediaPicker"
-    >
-      <section class="admin-page-form__media-picker-panel max-h-[80vh] w-full max-w-4xl overflow-hidden bg-white text-ink shadow-xl">
-        <div class="admin-page-form__media-picker-header flex items-center justify-between border-b border-line px-5 py-4">
-          <h2 class="admin-page-form__media-picker-title text-lg font-semibold">
-            대표 이미지 선택
-          </h2>
-          <button class="admin-page-form__media-picker-close rounded border border-line px-3 py-1.5 text-sm font-semibold" type="button" @click="closeMediaPicker">
-            닫기
-          </button>
-        </div>
-        <div class="admin-page-form__media-picker-body max-h-[62vh] overflow-y-auto p-5">
-          <p v-if="isLoadingMedia" class="admin-page-form__media-picker-loading text-sm text-muted">
-            미디어를 불러오는 중입니다.
-          </p>
-          <div v-else-if="mediaItems.length" class="admin-page-form__media-picker-grid grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-6">
-            <button
-              v-for="item in mediaItems"
-              :key="item.url"
-              class="admin-page-form__media-picker-item overflow-hidden border border-line bg-white text-left"
-              type="button"
-              @click="selectFeaturedImage(item)"
-            >
-              <img class="admin-page-form__media-picker-image aspect-square w-full bg-surface object-cover" :src="item.url" :alt="item.title">
-              <span class="admin-page-form__media-picker-name block truncate px-2 py-1.5 text-xs font-semibold text-ink">{{ item.name }}</span>
-            </button>
-          </div>
-          <p v-else class="admin-page-form__media-picker-empty border border-dashed border-line p-8 text-center text-sm text-muted">
-            선택할 미디어가 없습니다.
-          </p>
-        </div>
-      </section>
-    </div>
   </form>
 </template>