sori.studio/components/admin/AdminPostForm.vue

<script setup>
const props = defineProps({
  initialPost: {
    type: Object,
    default: () => ({})
  },
  submitLabel: {
    type: String,
    default: '저장'
  },
  saving: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['submit'])

const slugTouched = ref(Boolean(props.initialPost.slug))
const blockEditor = ref(null)

const form = reactive({
  title: props.initialPost.title || '',
  slug: props.initialPost.slug || '',
  excerpt: props.initialPost.excerpt || '',
  content: props.initialPost.content || '',
  featuredImage: props.initialPost.featuredImage || '',
  status: props.initialPost.status || 'draft',
  tagsText: props.initialPost.tags?.join(', ') || ''
})

/**
 * 문자열을 URL 슬러그로 변환
 * @param {string} value - 원본 문자열
 * @returns {string} 슬러그
 */
const toSlug = (value) => value
  .trim()
  .toLowerCase()
  .replace(/[^a-z0-9가-힣\s-]/g, '')
  .replace(/\s+/g, '-')
  .replace(/-+/g, '-')
  .replace(/^-|-$/g, '')

watch(() => form.title, (title) => {
  if (!slugTouched.value) {
    form.slug = toSlug(title)
  }
})

/**
 * 슬러그 직접 입력 상태 표시
 * @returns {void}
 */
const touchSlug = () => {
  slugTouched.value = true
  form.slug = toSlug(form.slug)
}

/**
 * 쉼표 구분 태그 문자열을 슬러그 배열로 변환
 * @param {string} value - 태그 입력 문자열
 * @returns {Array<string>} 태그 슬러그 목록
 */
const parseTags = (value) => [...new Set(value
  .split(',')
  .map((tag) => toSlug(tag))
  .filter(Boolean))]

/**
 * 제목 입력 후 본문 에디터로 이동
 * @returns {void}
 */
const focusContentEditor = () => {
  blockEditor.value?.focusFirstBlock()
}

/**
 * 게시물 입력값 제출
 * @returns {void}
 */
const submitPost = () => {
  const publishedAt = form.status === 'published'
    ? props.initialPost.publishedAt || new Date().toISOString()
    : null

  emit('submit', {
    title: form.title.trim(),
    slug: toSlug(form.slug || form.title),
    excerpt: form.excerpt.trim(),
    content: form.content,
    featuredImage: form.featuredImage.trim() || null,
    status: form.status,
    publishedAt,
    tags: parseTags(form.tagsText)
  })
}
</script>

<template>
  <form class="admin-post-form grid gap-6" @submit.prevent="submitPost">
    <div class="admin-post-form__main grid gap-5 lg:grid-cols-[minmax(0,1fr)_18rem]">
      <section class="admin-post-form__content grid gap-4">
        <input
          v-model="form.title"
          class="admin-post-form__title-input border-0 bg-transparent px-0 py-2 text-5xl font-semibold leading-tight text-ink outline-none placeholder:text-soft"
          type="text"
          placeholder="제목"
          required
          @keydown.enter.prevent="focusContentEditor"
        >

        <div class="admin-post-form__field grid gap-2 text-sm">
          <AdminBlockEditor ref="blockEditor" v-model="form.content" />
        </div>
      </section>

      <aside class="admin-post-form__settings grid content-start gap-4">
        <label class="admin-post-form__field grid gap-2 text-sm">
          <span class="admin-post-form__label font-medium">상태</span>
          <select v-model="form.status" class="admin-post-form__select rounded border border-line bg-white px-3 py-2">
            <option value="draft">초안</option>
            <option value="published">발행</option>
            <option value="private">비공개</option>
          </select>
        </label>

        <label class="admin-post-form__field grid gap-2 text-sm">
          <span class="admin-post-form__label font-medium">슬러그</span>
          <input
            v-model="form.slug"
            class="admin-post-form__input rounded border border-line bg-white px-3 py-2"
            type="text"
            pattern="[a-z0-9가-힣]+(-[a-z0-9가-힣]+)*"
            required
            @input="touchSlug"
          >
        </label>

        <label class="admin-post-form__field grid gap-2 text-sm">
          <span class="admin-post-form__label font-medium">요약</span>
          <textarea
            v-model="form.excerpt"
            class="admin-post-form__textarea min-h-24 rounded border border-line bg-white px-3 py-2"
          />
        </label>

        <label class="admin-post-form__field grid gap-2 text-sm">
          <span class="admin-post-form__label font-medium">태그</span>
          <input
            v-model="form.tagsText"
            class="admin-post-form__input rounded border border-line bg-white px-3 py-2"
            type="text"
          >
        </label>

        <label class="admin-post-form__field grid gap-2 text-sm">
          <span class="admin-post-form__label font-medium">대표 이미지 URL</span>
          <input
            v-model="form.featuredImage"
            class="admin-post-form__input rounded border border-line bg-white px-3 py-2"
            type="url"
          >
        </label>
      </aside>
    </div>

    <div class="admin-post-form__actions flex justify-end gap-3 border-t border-line pt-5">
      <NuxtLink class="admin-post-form__cancel rounded border border-line bg-white px-4 py-2 text-sm font-semibold" to="/admin/posts">
        취소
      </NuxtLink>
      <button
        class="admin-post-form__submit rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
        type="submit"
        :disabled="saving"
      >
        {{ saving ? '저장 중' : submitLabel }}
      </button>
    </div>
  </form>
</template>