From 5bda4d5472cb796f771dda3f6c19f37bb5865a83 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Thu, 7 May 2026 15:02:41 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B8=80=EC=93=B0=EA=B8=B0=20=EC=97=90?=
 =?UTF-8?q?=EB=94=94=ED=84=B0=20=EB=AC=B8=EB=8B=A8=20=EC=B2=98=EB=A6=AC?=
 =?UTF-8?q?=EC=99=80=20=EC=84=A4=EC=A0=95=20=ED=8C=A8=EB=84=90=20=EC=95=A1?=
 =?UTF-8?q?=EC=85=98=20=EB=B3=B4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/admin/AdminBlockEditor.vue | 101 +++++++++++++++++++++-----
 components/admin/AdminPostForm.vue    |  82 +++++++++++++++++----
 docs/history.md                       |  10 +++
 docs/map.md                           |   4 +-
 docs/spec.md                          |   8 +-
 docs/update.md                        |  11 +++
 package-lock.json                     |   4 +-
 package.json                          |   2 +-
 pages/admin/posts/[id].vue            |  34 ++++-----
 9 files changed, 199 insertions(+), 57 deletions(-)

diff --git a/components/admin/AdminBlockEditor.vue b/components/admin/AdminBlockEditor.vue
index fc08249..cdd2fe7 100644
--- a/components/admin/AdminBlockEditor.vue
+++ b/components/admin/AdminBlockEditor.vue
@@ -508,6 +508,37 @@ const updateSlashMenuDirection = (index) => {
   })
 }
 
+/**
+ * 텍스트 블록 DOM의 현재 텍스트 반환
+ * @param {number} index - 블록 인덱스
+ * @returns {string} 현재 텍스트
+ */
+const getTextBlockDomText = (index) => {
+  const element = blockRefs.value[index]
+
+  return element?.innerText.replace(/\n$/, '') || ''
+}
+
+/**
+ * 텍스트 블록 DOM 값을 상태에 즉시 반영
+ * @param {number} index - 블록 인덱스
+ * @returns {Object|undefined} 갱신한 블록
+ */
+const syncTextBlockFromDom = (index) => {
+  const block = editorBlocks.value[index]
+
+  if (!block || !isTextBlock(block)) {
+    return block
+  }
+
+  block.text = getTextBlockDomText(index)
+  activeBlockId.value = block.id
+  updateSlashQuery(block)
+  updateSlashMenuDirection(index)
+
+  return block
+}
+
 /**
  * 블록 타입에 맞는 태그명 반환
  * @param {Object} block - 에디터 블록
@@ -537,15 +568,15 @@ const getBlockTag = (block) => {
 const getBlockClass = (block) => [
   'admin-block-editor__block outline-none transition-colors',
   {
-    'admin-block-editor__paragraph min-h-8 text-[17px] leading-8': block.type === 'paragraph',
-    'admin-block-editor__heading mt-8 min-h-10 font-semibold leading-tight': block.type === 'heading',
+    'admin-block-editor__paragraph min-h-8 whitespace-pre-wrap text-[17px] leading-8': block.type === 'paragraph',
+    'admin-block-editor__heading min-h-10 font-semibold leading-tight': block.type === 'heading',
     'admin-block-editor__heading--h1 text-5xl': block.type === 'heading' && block.level === 1,
     'admin-block-editor__heading--h2 text-4xl': block.type === 'heading' && block.level === 2,
     'admin-block-editor__heading--h3 text-3xl': block.type === 'heading' && block.level === 3,
-    'admin-block-editor__quote my-5 border-l-4 border-ink bg-surface px-5 py-3 text-xl font-medium leading-8': block.type === 'quote',
-    'admin-block-editor__callout my-5 min-h-14 rounded border border-line bg-surface px-5 py-4 text-[16px] leading-7': block.type === 'callout',
+    'admin-block-editor__quote border-l-4 border-ink bg-surface px-5 py-3 text-xl font-medium leading-8': block.type === 'quote',
+    'admin-block-editor__callout min-h-14 rounded border border-line bg-surface px-5 py-4 text-[16px] leading-7': block.type === 'callout',
     'admin-block-editor__list relative min-h-8 pl-7 text-[17px] leading-8 before:absolute before:left-2 before:top-3 before:h-2 before:w-2 before:rounded-full before:bg-current': block.type === 'list',
-    'admin-block-editor__code my-5 min-h-14 whitespace-pre-wrap rounded bg-[#15171a] px-4 py-3 font-mono text-sm leading-6 text-white': block.type === 'code'
+    'admin-block-editor__code min-h-14 whitespace-pre-wrap rounded bg-[#15171a] px-4 py-3 font-mono text-sm leading-6 text-white': block.type === 'code'
   }
 ]
 
@@ -574,7 +605,7 @@ const getImageWidthClass = (width) => {
  */
 const updateBlockText = (event, index) => {
   const block = editorBlocks.value[index]
-  const text = event.target.innerText.replace(/\n$/, '')
+  const text = getTextBlockDomText(index)
 
   block.text = text
   activeBlockId.value = block.id
@@ -608,7 +639,14 @@ const finishTextComposition = (event, index) => {
 
   nextTick(() => {
     window.setTimeout(() => {
-      updateBlockText(event, index)
+      const block = syncTextBlockFromDom(index)
+
+      if (!block) {
+        return
+      }
+
+      applyMarkdownShortcut(block, index)
+      emitContent()
     }, 0)
   })
 }
@@ -938,6 +976,8 @@ const removeGalleryImage = (block, imageIndex) => {
  * @returns {void}
  */
 const highlightNextCommand = (event) => {
+  syncTextBlockFromDom(activeBlockIndex.value)
+
   if (!visibleCommands.value.length) {
     return
   }
@@ -952,6 +992,8 @@ const highlightNextCommand = (event) => {
  * @returns {void}
  */
 const highlightPreviousCommand = (event) => {
+  syncTextBlockFromDom(activeBlockIndex.value)
+
   if (!visibleCommands.value.length) {
     return
   }
@@ -969,16 +1011,25 @@ const highlightPreviousCommand = (event) => {
  * @returns {void}
  */
 const handleEnter = (event, index) => {
-  const currentBlock = editorBlocks.value[index]
+  const currentBlock = syncTextBlockFromDom(index)
 
   if (isComposingText.value || event.isComposing || event.keyCode === 229) {
     event.preventDefault()
     return
   }
 
-  if (visibleCommands.value.length && currentBlock.text.startsWith('/')) {
+  if (event.shiftKey && isTextBlock(currentBlock)) {
+    return
+  }
+
+  if (currentBlock.text.startsWith('/')) {
     event.preventDefault()
-    applyCommand(highlightedCommand.value || visibleCommands.value[0])
+    const command = highlightedCommand.value || visibleCommands.value[0]
+
+    if (command) {
+      applyCommand(command)
+    }
+
     return
   }
 
@@ -1198,15 +1249,17 @@ defineExpose({
 </script>
 
 <template>
-  <div class="admin-block-editor min-h-[32rem] bg-transparent py-4 text-ink">
-    <div class="admin-block-editor__surface post-prose grid gap-1">
+  <div class="admin-block-editor bg-transparent py-4 text-ink">
+    <div class="admin-block-editor__surface post-prose">
       <div
         v-for="(block, index) in editorBlocks"
         :key="block.id"
         class="admin-block-editor__row group/block relative rounded transition-colors"
         :class="{
           'admin-block-editor__row--selected bg-[#eff1f2] ring-1 ring-[#d8dde1]': selectedBlockId === block.id,
-          'admin-block-editor__row--dragging opacity-50': draggingBlockId === block.id
+          'admin-block-editor__row--dragging opacity-50': draggingBlockId === block.id,
+          'admin-block-editor__row--text': isTextBlock(block),
+          'admin-block-editor__row--structure': !isTextBlock(block)
         }"
         :data-editor-block-id="block.id"
         @dragover.prevent
@@ -1226,11 +1279,11 @@ defineExpose({
           <span aria-hidden="true">⋮⋮</span>
         </button>
 
-        <hr v-if="block.type === 'divider'" class="admin-block-editor__divider my-6 border-line">
+        <hr v-if="block.type === 'divider'" class="admin-block-editor__divider border-line">
 
         <figure
           v-else-if="block.type === 'image'"
-          class="admin-block-editor__media group my-6"
+          class="admin-block-editor__media group"
           :class="getImageWidthClass(block.width)"
           tabindex="0"
           @focus="activateBlock(block)"
@@ -1281,7 +1334,7 @@ defineExpose({
 
         <figure
           v-else-if="block.type === 'gallery'"
-          class="admin-block-editor__gallery group my-6"
+          class="admin-block-editor__gallery group"
           tabindex="0"
           @focus="activateBlock(block)"
           @click="activateBlock(block)"
@@ -1317,7 +1370,7 @@ defineExpose({
 
         <section
           v-else-if="block.type === 'toggle'"
-          class="admin-block-editor__toggle my-6 rounded border border-line bg-paper p-5"
+          class="admin-block-editor__toggle rounded border border-line bg-paper p-5"
           @focusin="activateBlock(block)"
           @click="activateBlock(block)"
           @keydown.enter="handleEnter($event, index)"
@@ -1341,7 +1394,7 @@ defineExpose({
 
         <section
           v-else-if="block.type === 'embed'"
-          class="admin-block-editor__embed my-6 rounded border border-dashed border-line bg-surface p-5"
+          class="admin-block-editor__embed rounded border border-dashed border-line bg-surface p-5"
           @focusin="activateBlock(block)"
           @click="activateBlock(block)"
           @keydown.enter="handleEnter($event, index)"
@@ -1460,6 +1513,18 @@ defineExpose({
   color: #1f2328;
 }
 
+.admin-block-editor__row + .admin-block-editor__row--text {
+  margin-top: 32px;
+}
+
+.admin-block-editor__row + .admin-block-editor__row--structure {
+  margin-top: 32px;
+}
+
+.admin-block-editor__row--structure + .admin-block-editor__row--structure {
+  margin-top: 32px;
+}
+
 .admin-block-editor__code {
   background: #15171a;
   color: #f8fafc;
diff --git a/components/admin/AdminPostForm.vue b/components/admin/AdminPostForm.vue
index e250b3d..0fd46f4 100644
--- a/components/admin/AdminPostForm.vue
+++ b/components/admin/AdminPostForm.vue
@@ -11,10 +11,26 @@ const props = defineProps({
   saving: {
     type: Boolean,
     default: false
+  },
+  canViewPost: {
+    type: Boolean,
+    default: false
+  },
+  publicUrl: {
+    type: String,
+    default: ''
+  },
+  deleting: {
+    type: Boolean,
+    default: false
+  },
+  showDelete: {
+    type: Boolean,
+    default: false
   }
 })
 
-const emit = defineEmits(['submit', 'preview'])
+const emit = defineEmits(['submit', 'preview', 'delete'])
 
 const autosaveStoragePrefix = 'SORI_ADMIN_POST_AUTOSAVE'
 const slugTouched = ref(Boolean(props.initialPost.slug))
@@ -88,6 +104,8 @@ const form = reactive({
 })
 
 const autosaveKey = computed(() => `${autosaveStoragePrefix}:${props.initialPost.id || 'new'}`)
+const postUrlLabel = computed(() => form.slug || toSlug(form.title) || '')
+const postUrlHint = computed(() => props.publicUrl || (postUrlLabel.value ? `/post/${postUrlLabel.value}/` : '/post/'))
 
 /**
  * 문자열을 URL 슬러그로 변환
@@ -439,6 +457,14 @@ const previewPost = () => {
   emit('preview', createPostPayload())
 }
 
+/**
+ * 게시물 삭제 요청
+ * @returns {void}
+ */
+const deletePost = () => {
+  emit('delete')
+}
+
 /**
  * 설정 패널 표시 상태 전환
  * @returns {void}
@@ -597,7 +623,36 @@ defineExpose({
           </button>
         </div>
 
-        <div class="admin-post-form__settings-body grid content-start gap-4 overflow-y-auto px-6 pb-8 pt-8">
+        <div class="admin-post-form__settings-body grid flex-1 content-start gap-4 overflow-y-auto px-6 pb-8 pt-8">
+        <div class="admin-post-form__field grid gap-1 text-sm">
+          <div class="admin-post-form__post-url-header flex h-[22px] items-center justify-between">
+            <span class="admin-post-form__label font-bold text-[#15171a]">Post URL</span>
+            <NuxtLink
+              v-if="canViewPost"
+              class="admin-post-form__view-post inline-flex items-center gap-1 rounded px-3 py-1.5 text-xs text-[#8e9cac] transition-colors hover:bg-[#eff1f2] hover:text-[#394047]"
+              :to="publicUrl"
+              target="_blank"
+            >
+              <span>View Post</span>
+              <span aria-hidden="true">↗</span>
+            </NuxtLink>
+          </div>
+          <label class="admin-post-form__post-url-input flex h-[38px] items-center gap-2 rounded border border-[#e3e6e8] bg-[#eff1f2] px-3 py-1 transition-colors hover:border-[#c8ced3] focus-within:border-[#8e9cac]">
+            <span class="admin-post-form__post-url-icon text-sm text-[#394047]" aria-hidden="true">⌘</span>
+            <input
+              v-model="form.slug"
+              class="admin-post-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가-힣]+)*"
+              required
+              @input="touchSlug"
+            >
+          </label>
+          <p class="admin-post-form__post-url-hint text-xs text-[#7c8b9a]">
+            {{ postUrlHint }}
+          </p>
+        </div>
+
         <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 h-[38px] rounded border border-[#e3e6e8] bg-[#eff1f2] px-3 py-2 transition-colors hover:border-[#c8ced3] focus:border-[#8e9cac] focus:outline-none">
@@ -621,18 +676,6 @@ defineExpose({
           </span>
         </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 h-[38px] rounded border border-[#e3e6e8] bg-[#eff1f2] px-3 py-2 transition-colors hover:border-[#c8ced3] focus:border-[#8e9cac] focus:outline-none"
-            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
@@ -743,6 +786,17 @@ defineExpose({
           </div>
         </div>
         </div>
+        <div v-if="showDelete" class="admin-post-form__settings-bottom shrink-0 border-t border-[#e3e6e8] px-8 py-6">
+          <button
+            class="admin-post-form__delete-post flex h-10 w-full items-center justify-center gap-2 rounded border border-[#d21a26] text-sm font-bold text-[#d21a26] transition-colors hover:bg-red-50 disabled:opacity-50"
+            type="button"
+            :disabled="deleting"
+            @click="deletePost"
+          >
+            <span aria-hidden="true">⌫</span>
+            <span>{{ deleting ? '삭제 중' : 'Delete post' }}</span>
+          </button>
+        </div>
       </div>
       </aside>
 
diff --git a/docs/history.md b/docs/history.md
index 6313e07..9041cd0 100644
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,15 @@
 # 의사결정 이력
 
+## 2026-05-07 v0.0.38
+
+### 에디터 문단 모델과 설정 패널 액션 배치 결정
+
+관리자 블록 에디터에서 Shift+Enter는 같은 블록 안의 줄바꿈으로, Enter는 새 문단 블록 생성으로 구분한다. Ghost와 AFFiNE 계열 에디터처럼 한 문단 안의 강제 줄바꿈과 문단 종료가 달라야 블록 선택, 삭제, 이동 범위가 사용자가 인식하는 문단 단위와 맞기 때문이다.
+
+블록 간격은 각 구조형 블록의 위아래 margin을 섞지 않고 다음 블록의 `margin-top` 기준으로 정리한다. 이렇게 하면 갤러리, 코드, 토글 같은 구조형 블록을 선택했을 때 선택 범위 바깥으로 불필요한 여백이 잡히는 일을 줄이고, 인접 블록 사이 간격도 한 방향에서 관리할 수 있다.
+
+글 수정 화면의 보기와 삭제 액션은 편집 본문 위에 띄우지 않고 우측 게시물 설정 패널 안에 배치한다. 보기 액션은 Post URL과 직접 관련되므로 Post URL 라벨 오른쪽에 두고, 삭제는 파괴적 액션이므로 설정 패널 하단의 독립 버튼으로 분리한다.
+
 ## 2026-05-07 v0.0.37
 
 ### 블록 에디터 입력 안정성과 블록 핸들 범위 결정
diff --git a/docs/map.md b/docs/map.md
index cd60b2f..96d0e05 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -26,9 +26,9 @@
 
 | 파일 | 화면 위치 |
 |------|-----------|
-| components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, Ghost 스타일 전체 화면 에디터, 좌우 분할 설정 패널, 설정 패널 전환 애니메이션, 대표 이미지/OG 이미지 선택, 로컬 자동 저장, 예약 발행 시각 입력, SEO 설정, 미리보기 요청 |
+| components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, Ghost 스타일 전체 화면 에디터, 좌우 분할 설정 패널, 설정 패널 전환 애니메이션, Post URL 보기 액션, 하단 삭제 액션, 대표 이미지/OG 이미지 선택, 로컬 자동 저장, 예약 발행 시각 입력, SEO 설정, 미리보기 요청 |
 | components/admin/AdminPageForm.vue | 관리자 페이지 작성/수정 폼, 대표 이미지 선택 |
-| components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/임베드 블록, 한글 조합 입력 처리, 코드 블록 단축 변환, 블록 핸들 선택/삭제/드래그 이동, 하단 빈 입력 블록 유지, 본문 placeholder 표시 |
+| components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/임베드 블록, 한글 조합 입력 처리, Shift+Enter 줄바꿈, 코드 블록 단축 변환, 블록 핸들 선택/삭제/드래그 이동, 하단 빈 입력 블록 유지, 본문 placeholder 표시 |
 | components/admin/AdminTagForm.vue | 관리자 태그 생성/수정 폼 |
 
 ## 콘텐츠 컴포넌트
diff --git a/docs/spec.md b/docs/spec.md
index 1445f3d..f70fbbd 100644
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -279,11 +279,15 @@ components/content/
 - `/` 명령 메뉴는 화면 하단 공간이 부족하면 현재 블록 위쪽으로 표시한다.
 - `/` 명령 메뉴가 열린 상태에서 Enter를 누르면 현재 강조된 메뉴 항목을 적용한다.
 - `/` 명령 메뉴가 열린 상태에서 위/아래 방향키로 강조 항목을 이동한다.
+- `/` 명령 메뉴 필터는 한글 조합 입력 완료와 방향키/Enter 입력 직전에 현재 DOM 텍스트를 기준으로 동기화한다.
+- `/갤`처럼 필터 결과가 하나로 좁혀진 상태에서 Enter를 누르면 해당 블록 명령을 적용한다.
 - 블록 메뉴는 문단, 제목 2, 제목 3, 이미지, 갤러리, 콜아웃, 토글, 임베드, 인용, 목록, 코드, 구분선을 제공한다.
 - `#`, `##`, `###`, `>`, `-` 입력 후 공백을 누르거나 ` ``` `을 입력하면 현재 블록 타입을 즉시 변환한다.
 - 한글 등 조합형 입력 중에는 단축 문법과 슬래시 메뉴 상태를 확정하지 않고 조합 종료 뒤 반영한다.
 - 한글 등 조합형 입력 직후 확정된 텍스트로 슬래시 메뉴 필터와 Enter 블록 이동을 반영한다.
+- Shift+Enter는 같은 텍스트 블록 안의 줄바꿈으로 처리하고, Enter는 다음 문단 블록을 생성한다.
 - 빈 문단에서 Enter를 누르면 다음 빈 문단 블록을 생성한다.
+- 문단 간 기본 간격은 다음 블록의 `margin-top: 32px` 기준으로 조정한다.
 - 블록 왼쪽 핸들은 hover/focus 상태에서 표시되며, 클릭하면 블록을 선택하고 Delete 또는 Backspace로 해당 블록을 삭제할 수 있다.
 - 블록 왼쪽 핸들을 드래그하면 블록 순서를 이동할 수 있다.
 - 빈 블록 placeholder는 현재 활성 블록 또는 첫 빈 블록에만 표시한다.
@@ -294,6 +298,8 @@ components/content/
 - 글 작성/수정 폼은 에디터 작업 영역과 우측 설정 패널을 먼저 좌우로 나누고, 에디터 작업 영역 안에 상단 도구막대와 본문 스크롤 영역을 배치한다.
 - 본문 에디터는 데스크톱에서 좌우 32px 패딩을 포함한 804px 중앙 컬럼으로 배치해 실제 입력 영역 최대 폭을 740px로 유지한다.
 - 게시물 설정은 데스크톱에서 420px 우측 패널로 표시하며, 도구막대 버튼으로 열고 닫을 수 있고 너비 전환 애니메이션을 적용한다.
+- 공개 가능한 글의 보기 액션은 게시물 설정 패널의 Post URL 라벨 오른쪽에 표시한다.
+- 글 삭제 액션은 게시물 설정 패널 하단의 빨간 outline 버튼으로 제공한다.
 - 대표 이미지는 본문 제목 위의 에디터 흐름 안에서 추가, 변경, 삭제한다.
 - 제목 입력에서 Enter를 누르면 본문 첫 블록으로 포커스를 이동한다.
 - 새 글 작성처럼 본문이 비어 있는 경우에도 빈 문단 블록을 먼저 생성한다.
@@ -441,6 +447,6 @@ APP_PORT=43118
 
 ## 버전 관리
 
-- 현재 버전: v0.0.37
+- 현재 버전: v0.0.38
 - 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
 - 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정
diff --git a/docs/update.md b/docs/update.md
index 5f7db74..9dad8bc 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,16 @@
 # 업데이트 이력
 
+## v0.0.38
+
+- 관리자 블록 에디터 슬래시 메뉴 필터가 입력 즉시 동기화되도록 보정.
+- 관리자 블록 에디터에서 `/갤` Enter 입력 시 필터링된 갤러리 명령이 적용되도록 수정.
+- 관리자 블록 에디터에서 Shift+Enter 줄바꿈과 Enter 문단 생성을 구분하도록 수정.
+- 관리자 블록 에디터 구조형 블록의 자체 위아래 여백을 제거하고 블록 행 사이 margin-top 기준으로 정리.
+- 관리자 블록 에디터 하단의 불필요한 최소 높이로 생기던 빈 영역 제거.
+- 관리자 글 수정 화면의 보기/삭제 액션을 Figma 기준에 맞춰 게시물 설정 패널 내부로 이동.
+- 기술 명세 현재 버전을 v0.0.38로 갱신.
+- 패키지 버전을 0.0.38로 갱신.
+
 ## v0.0.37
 
 - 관리자 블록 에디터의 한글 조합 입력 종료 후 Enter 처리 보정.
diff --git a/package-lock.json b/package-lock.json
index 0e8268d..14935bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "0.0.37",
+      "version": "0.0.38",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",
diff --git a/package.json b/package.json
index de99107..7efde4d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/pages/admin/posts/[id].vue b/pages/admin/posts/[id].vue
index 90b5127..0492f09 100644
--- a/pages/admin/posts/[id].vue
+++ b/pages/admin/posts/[id].vue
@@ -29,6 +29,8 @@ if (!post.value) {
 const isPublicPost = (value) => value?.status === 'published'
   && (!value.publishedAt || new Date(value.publishedAt) <= new Date())
 
+const publicPostUrl = computed(() => post.value?.slug ? `/post/${post.value.slug}` : '')
+
 /**
  * 저장 상태 토스트 표시
  * @param {'success'|'error'|'info'} type - 토스트 타입
@@ -138,28 +140,22 @@ onBeforeUnmount(() => {
 
 <template>
   <section class="admin-post-edit relative bg-white">
-    <div class="admin-post-edit__quick-actions absolute right-8 top-24 z-10 flex gap-2">
-        <NuxtLink
-          v-if="isPublicPost(post)"
-          class="admin-post-edit__view rounded border border-line bg-white px-4 py-2 text-sm font-semibold"
-          :to="`/post/${post.slug}`"
-          target="_blank"
-        >
-          보기
-        </NuxtLink>
-        <button
-          class="admin-post-edit__delete rounded border border-red-200 bg-white px-4 py-2 text-sm font-semibold text-red-700 disabled:opacity-50"
-          type="button"
-          :disabled="deleting"
-          @click="deletePost"
-        >
-          {{ deleting ? '삭제 중' : '삭제' }}
-        </button>
-    </div>
     <p v-if="errorMessage" class="admin-post-edit__error mx-6 mt-6 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
       {{ errorMessage }}
     </p>
-    <AdminPostForm ref="postForm" :initial-post="post" submit-label="변경 저장" :saving="saving" @submit="savePost" @preview="previewPost" />
+    <AdminPostForm
+      ref="postForm"
+      :initial-post="post"
+      submit-label="변경 저장"
+      :saving="saving"
+      :can-view-post="isPublicPost(post)"
+      :public-url="publicPostUrl"
+      :deleting="deleting"
+      show-delete
+      @submit="savePost"
+      @preview="previewPost"
+      @delete="deletePost"
+    />
     <div
       v-if="toast"
       class="admin-post-edit__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg"