게시물 SEO 설정 추가

components/admin/AdminPostForm.vue

@@ -74,6 +74,10 @@ const form = reactive({
   excerpt: props.initialPost.excerpt || '',
   content: props.initialPost.content || '',
   featuredImage: props.initialPost.featuredImage || '',
+  seoTitle: props.initialPost.seoTitle || '',
+  seoDescription: props.initialPost.seoDescription || '',
+  canonicalUrl: props.initialPost.canonicalUrl || '',
+  noindex: Boolean(props.initialPost.noindex),
   status: props.initialPost.status || 'draft',
   publishedAt: toDateTimeLocalValue(props.initialPost.publishedAt),
   tagsText: props.initialPost.tags?.join(', ') || ''
@@ -144,6 +148,10 @@ const createPostPayload = () => {
     excerpt: form.excerpt.trim(),
     content: form.content,
     featuredImage: form.featuredImage.trim() || null,
+    seoTitle: form.seoTitle.trim(),
+    seoDescription: form.seoDescription.trim(),
+    canonicalUrl: form.canonicalUrl.trim(),
+    noindex: form.noindex,
     status: form.status,
     publishedAt,
     tags: parseTags(form.tagsText)
@@ -160,6 +168,10 @@ const createAutosavePayload = () => ({
   excerpt: form.excerpt,
   content: form.content,
   featuredImage: form.featuredImage,
+  seoTitle: form.seoTitle,
+  seoDescription: form.seoDescription,
+  canonicalUrl: form.canonicalUrl,
+  noindex: form.noindex,
   status: form.status,
   publishedAt: form.publishedAt,
   tagsText: form.tagsText
@@ -476,6 +488,66 @@ defineExpose({
           >
         </label>
 
+        <div class="admin-post-form__seo grid gap-3 rounded border border-line bg-white p-4 text-sm">
+          <div>
+            <h2 class="admin-post-form__section-title text-sm font-semibold text-ink">
+              SEO
+            </h2>
+            <p class="admin-post-form__section-description mt-1 text-xs text-muted">
+              검색 결과와 공유 미리보기에 사용할 기본 메타 정보를 설정합니다.
+            </p>
+          </div>
+
+          <label class="admin-post-form__field grid gap-2">
+            <span class="admin-post-form__label font-medium">SEO 제목</span>
+            <input
+              v-model="form.seoTitle"
+              class="admin-post-form__input rounded border border-line bg-white px-3 py-2"
+              type="text"
+              maxlength="80"
+              placeholder="비워두면 글 제목을 사용"
+            >
+            <span class="admin-post-form__hint text-xs text-muted">
+              {{ form.seoTitle.length }}/80
+            </span>
+          </label>
+
+          <label class="admin-post-form__field grid gap-2">
+            <span class="admin-post-form__label font-medium">SEO 설명</span>
+            <textarea
+              v-model="form.seoDescription"
+              class="admin-post-form__textarea min-h-24 rounded border border-line bg-white px-3 py-2"
+              maxlength="180"
+              placeholder="비워두면 요약을 사용"
+            />
+            <span class="admin-post-form__hint text-xs text-muted">
+              {{ form.seoDescription.length }}/180
+            </span>
+          </label>
+
+          <label class="admin-post-form__field grid gap-2">
+            <span class="admin-post-form__label font-medium">Canonical URL</span>
+            <input
+              v-model="form.canonicalUrl"
+              class="admin-post-form__input rounded border border-line bg-white px-3 py-2"
+              type="url"
+              placeholder="비워두면 기본 글 주소를 사용"
+            >
+          </label>
+
+          <label class="admin-post-form__checkbox flex items-start gap-2 text-sm">
+            <input
+              v-model="form.noindex"
+              class="admin-post-form__checkbox-input mt-1"
+              type="checkbox"
+            >
+            <span>
+              <span class="admin-post-form__label block font-medium">검색엔진 노출 제외</span>
+              <span class="admin-post-form__hint mt-1 block text-xs text-muted">공개 글이어도 robots noindex 메타를 추가합니다.</span>
+            </span>
+          </label>
+        </div>
+
         <div class="admin-post-form__field grid gap-2 text-sm">
           <span class="admin-post-form__label font-medium">대표 이미지</span>
           <figure v-if="form.featuredImage" class="admin-post-form__featured overflow-hidden rounded border border-line bg-white">