1339 lines
48 KiB
Vue
1339 lines
48 KiB
Vue
<script setup>
|
|
import { normalizeMarkdownContent } from '../../lib/markdown-content-normalizer.js'
|
|
|
|
const props = defineProps({
|
|
initialPost: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
submitLabel: {
|
|
type: String,
|
|
default: '저장'
|
|
},
|
|
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', 'delete'])
|
|
|
|
const autosaveStoragePrefix = 'SORI_ADMIN_POST_AUTOSAVE'
|
|
const slugTouched = ref(Boolean(props.initialPost.slug))
|
|
const blockEditor = ref(null)
|
|
const mediaItems = ref([])
|
|
const isMediaPickerOpen = ref(false)
|
|
const mediaPickerTarget = ref('featuredImage')
|
|
const isLoadingMedia = ref(false)
|
|
const isUploadingFeaturedImage = ref(false)
|
|
const autosaveTimer = ref(null)
|
|
const autosaveNotice = ref(null)
|
|
const autosaveStatus = ref('')
|
|
const isRestoringAutosave = ref(false)
|
|
const isSettingsOpen = ref(true)
|
|
const tagInput = ref('')
|
|
const isTagInputComposing = ref(false)
|
|
const isTitleInputComposing = ref(false)
|
|
const activeMediaPickerTab = ref('upload')
|
|
const selectedMediaPickerUrl = ref('')
|
|
const savedPostSnapshot = ref('')
|
|
const isPublishModalOpen = ref(false)
|
|
const publishStatus = ref('draft')
|
|
const publishTiming = ref('now')
|
|
const scheduledPublishAt = ref('')
|
|
const publishModalExpandedSection = ref(null)
|
|
|
|
/**
|
|
* ISO 날짜를 datetime-local 입력값으로 변환
|
|
* @param {string} value - ISO 날짜 문자열
|
|
* @returns {string} datetime-local 입력값
|
|
*/
|
|
function toDateTimeLocalValue(value) {
|
|
if (!value) {
|
|
return ''
|
|
}
|
|
|
|
const date = new Date(value)
|
|
|
|
if (Number.isNaN(date.getTime())) {
|
|
return ''
|
|
}
|
|
|
|
const offsetDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000)
|
|
|
|
return offsetDate.toISOString().slice(0, 16)
|
|
}
|
|
|
|
/**
|
|
* datetime-local 입력값을 ISO 문자열로 변환
|
|
* @param {string} value - datetime-local 입력값
|
|
* @returns {string | null} ISO 날짜 문자열
|
|
*/
|
|
function toIsoDateTime(value) {
|
|
if (!value) {
|
|
return null
|
|
}
|
|
|
|
const date = new Date(value)
|
|
|
|
if (Number.isNaN(date.getTime())) {
|
|
return null
|
|
}
|
|
|
|
return date.toISOString()
|
|
}
|
|
|
|
const form = reactive({
|
|
title: props.initialPost.title || '',
|
|
slug: props.initialPost.slug || '',
|
|
excerpt: props.initialPost.excerpt || '',
|
|
content: normalizeMarkdownContent(props.initialPost.content),
|
|
featuredImage: props.initialPost.featuredImage || '',
|
|
noindex: Boolean(props.initialPost.noindex),
|
|
status: props.initialPost.status || 'draft',
|
|
publishedAt: toDateTimeLocalValue(props.initialPost.publishedAt),
|
|
tagsText: props.initialPost.tags?.join(', ') || ''
|
|
})
|
|
|
|
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/'))
|
|
|
|
/**
|
|
* 한글 음절 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} 슬러그
|
|
*/
|
|
const toSlug = (value) => value
|
|
.normalize('NFC')
|
|
.split('')
|
|
.map((char) => romanizeHangulSyllable(char))
|
|
.join('')
|
|
.trim()
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9\s-]/g, '')
|
|
.replace(/\s+/g, '-')
|
|
.replace(/-+/g, '-')
|
|
.replace(/^-|-$/g, '')
|
|
|
|
/**
|
|
* 게시물 태그 입력 토큰 정규화(한글 유지, 공백은 하이픈으로)
|
|
* @param {string} value - 원본 문자열
|
|
* @returns {string} 정규화된 태그 문자열
|
|
*/
|
|
const normalizeTagToken = (value) => {
|
|
const raw = String(value).normalize('NFC').trim().toLowerCase()
|
|
if (!raw) {
|
|
return ''
|
|
}
|
|
|
|
return raw
|
|
.replace(/\s+/g, '-')
|
|
.replace(/[^a-z0-9가-힣-]+/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) => {
|
|
const seen = new Set()
|
|
const out = []
|
|
|
|
for (const part of value.split(',')) {
|
|
const tag = normalizeTagToken(part)
|
|
if (!tag) {
|
|
continue
|
|
}
|
|
const dedupeKey = tag.toLowerCase()
|
|
if (seen.has(dedupeKey)) {
|
|
continue
|
|
}
|
|
seen.add(dedupeKey)
|
|
out.push(tag)
|
|
}
|
|
|
|
return out
|
|
}
|
|
|
|
const selectedTags = computed(() => parseTags(form.tagsText))
|
|
|
|
/**
|
|
* 예약 발행 여부 확인
|
|
* @returns {boolean} 예약 발행 여부
|
|
*/
|
|
const isScheduledPost = () => {
|
|
const publishedAt = toIsoDateTime(form.publishedAt)
|
|
|
|
return form.status === 'published' && Boolean(publishedAt) && new Date(publishedAt) > new Date()
|
|
}
|
|
|
|
const editorStatusLabel = computed(() => {
|
|
if (autosaveStatus.value) {
|
|
return autosaveStatus.value
|
|
}
|
|
|
|
if (form.status === 'published') {
|
|
return isScheduledPost() ? '예약 발행' : '발행됨'
|
|
}
|
|
|
|
if (form.status === 'private') {
|
|
return '비공개'
|
|
}
|
|
|
|
return '초안'
|
|
})
|
|
|
|
/**
|
|
* 발행 모달에 표시할 게시 상태 요약 문구
|
|
* @returns {string} 요약 문구
|
|
*/
|
|
const publishStatusSummaryLabel = computed(() => {
|
|
if (publishStatus.value === 'published') {
|
|
return '발행'
|
|
}
|
|
|
|
if (publishStatus.value === 'private') {
|
|
return '비공개'
|
|
}
|
|
|
|
return '초안'
|
|
})
|
|
|
|
/**
|
|
* 발행 모달에 표시할 발행 시점 요약 문구
|
|
* @returns {string} 요약 문구
|
|
*/
|
|
const publishTimingSummaryLabel = computed(() => {
|
|
if (publishTiming.value === 'now') {
|
|
return '지금 바로'
|
|
}
|
|
|
|
const raw = scheduledPublishAt.value
|
|
|
|
if (!raw) {
|
|
return '예약'
|
|
}
|
|
|
|
const date = new Date(raw)
|
|
|
|
if (Number.isNaN(date.getTime())) {
|
|
return '예약'
|
|
}
|
|
|
|
return new Intl.DateTimeFormat('ko-KR', {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'short'
|
|
}).format(date)
|
|
})
|
|
|
|
/**
|
|
* 게시물 입력값 생성
|
|
* @returns {Object} 게시물 입력값
|
|
*/
|
|
const createPostPayload = () => {
|
|
const publishedAt = form.status === 'published'
|
|
? toIsoDateTime(form.publishedAt) || props.initialPost.publishedAt || new Date().toISOString()
|
|
: null
|
|
|
|
return {
|
|
title: form.title.trim(),
|
|
slug: toSlug(form.slug || form.title),
|
|
excerpt: form.excerpt.trim(),
|
|
content: normalizeMarkdownContent(form.content),
|
|
featuredImage: form.featuredImage.trim() || null,
|
|
seoTitle: form.title.trim(),
|
|
seoDescription: form.excerpt.trim(),
|
|
canonicalUrl: '',
|
|
noindex: form.noindex,
|
|
ogImage: null,
|
|
status: form.status,
|
|
publishedAt,
|
|
tags: selectedTags.value
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 현재 게시물 입력값을 문자열로 직렬화한다.
|
|
* @returns {string} 직렬화된 게시물 입력값
|
|
*/
|
|
const serializePostPayload = () => JSON.stringify(createPostPayload())
|
|
|
|
const hasUnsavedPostChanges = computed(() => serializePostPayload() !== savedPostSnapshot.value)
|
|
|
|
/**
|
|
* 자동 저장 데이터 생성
|
|
* @returns {Object} 자동 저장 데이터
|
|
*/
|
|
const createAutosavePayload = () => ({
|
|
title: form.title,
|
|
slug: form.slug,
|
|
excerpt: form.excerpt,
|
|
content: normalizeMarkdownContent(form.content),
|
|
featuredImage: form.featuredImage,
|
|
noindex: form.noindex,
|
|
status: form.status,
|
|
publishedAt: form.publishedAt,
|
|
tagsText: form.tagsText
|
|
})
|
|
|
|
/**
|
|
* 자동 저장 데이터가 비어 있는지 확인
|
|
* @param {Object} payload - 자동 저장 데이터
|
|
* @returns {boolean} 비어 있는지 여부
|
|
*/
|
|
const isEmptyAutosavePayload = (payload) => ![
|
|
payload.title,
|
|
payload.slug,
|
|
payload.excerpt,
|
|
payload.content,
|
|
payload.featuredImage,
|
|
payload.tagsText
|
|
].some((value) => String(value || '').trim())
|
|
|
|
/**
|
|
* 자동 저장 시각 표시 문자열 반환
|
|
* @param {number} savedAt - 저장 시각
|
|
* @returns {string} 표시 문자열
|
|
*/
|
|
const formatAutosaveTime = (savedAt) => new Intl.DateTimeFormat('ko-KR', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit'
|
|
}).format(new Date(savedAt))
|
|
|
|
/**
|
|
* 자동 저장본을 로컬 저장소에 기록
|
|
* @returns {void}
|
|
*/
|
|
const saveAutosave = () => {
|
|
if (!import.meta.client || isRestoringAutosave.value) {
|
|
return
|
|
}
|
|
|
|
const payload = createAutosavePayload()
|
|
|
|
if (isEmptyAutosavePayload(payload)) {
|
|
localStorage.removeItem(autosaveKey.value)
|
|
autosaveStatus.value = ''
|
|
return
|
|
}
|
|
|
|
const savedAt = Date.now()
|
|
localStorage.setItem(autosaveKey.value, JSON.stringify({
|
|
savedAt,
|
|
payload
|
|
}))
|
|
autosaveStatus.value = `${formatAutosaveTime(savedAt)} 자동 저장됨`
|
|
}
|
|
|
|
/**
|
|
* 자동 저장 예약
|
|
* @returns {void}
|
|
*/
|
|
const scheduleAutosave = () => {
|
|
if (!import.meta.client || isRestoringAutosave.value) {
|
|
return
|
|
}
|
|
|
|
window.clearTimeout(autosaveTimer.value)
|
|
autosaveTimer.value = window.setTimeout(saveAutosave, 900)
|
|
}
|
|
|
|
/**
|
|
* 자동 저장본을 입력 폼에 복원
|
|
* @returns {void}
|
|
*/
|
|
const restoreAutosave = () => {
|
|
if (!autosaveNotice.value?.payload) {
|
|
return
|
|
}
|
|
|
|
isRestoringAutosave.value = true
|
|
Object.assign(form, {
|
|
...autosaveNotice.value.payload,
|
|
content: normalizeMarkdownContent(autosaveNotice.value.payload.content)
|
|
})
|
|
slugTouched.value = Boolean(form.slug)
|
|
autosaveStatus.value = `${formatAutosaveTime(autosaveNotice.value.savedAt)} 자동 저장본 복원됨`
|
|
autosaveNotice.value = null
|
|
|
|
nextTick(() => {
|
|
isRestoringAutosave.value = false
|
|
scheduleAutosave()
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 자동 저장본을 삭제
|
|
* @returns {void}
|
|
*/
|
|
const discardAutosave = () => {
|
|
if (!import.meta.client) {
|
|
return
|
|
}
|
|
|
|
localStorage.removeItem(autosaveKey.value)
|
|
autosaveNotice.value = null
|
|
autosaveStatus.value = ''
|
|
}
|
|
|
|
const {
|
|
isUnsavedModalOpen,
|
|
stayOnUnsavedPage,
|
|
leaveUnsavedPage,
|
|
allowNextRouteLeave
|
|
} = useAdminUnsavedChangesGuard(hasUnsavedPostChanges, {
|
|
onLeaveConfirmed: discardAutosave
|
|
})
|
|
|
|
/**
|
|
* 미디어 라이브러리 목록 조회
|
|
* @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 (target = 'featuredImage') => {
|
|
mediaPickerTarget.value = target
|
|
activeMediaPickerTab.value = 'upload'
|
|
selectedMediaPickerUrl.value = form[target] || ''
|
|
isMediaPickerOpen.value = true
|
|
await fetchMediaItems()
|
|
}
|
|
|
|
/**
|
|
* 대표 이미지 선택 창 닫기
|
|
* @returns {void}
|
|
*/
|
|
const closeMediaPicker = () => {
|
|
isMediaPickerOpen.value = false
|
|
}
|
|
|
|
/**
|
|
* 대표 이미지 선택 상태 변경
|
|
* @param {Object} item - 미디어 항목
|
|
* @returns {void}
|
|
*/
|
|
const selectPickedImage = (item) => {
|
|
selectedMediaPickerUrl.value = item.url
|
|
}
|
|
|
|
/**
|
|
* 선택한 대표 이미지 적용
|
|
* @returns {void}
|
|
*/
|
|
const applyPickedImage = () => {
|
|
if (!selectedMediaPickerUrl.value) {
|
|
return
|
|
}
|
|
|
|
form[mediaPickerTarget.value] = selectedMediaPickerUrl.value
|
|
closeMediaPicker()
|
|
}
|
|
|
|
/**
|
|
* 대표 이미지 삭제
|
|
* @returns {void}
|
|
*/
|
|
const removeFeaturedImage = () => {
|
|
form.featuredImage = ''
|
|
}
|
|
|
|
/**
|
|
* 태그 입력값을 배지 목록에 추가
|
|
* @returns {void}
|
|
*/
|
|
const addTagFromInput = () => {
|
|
const nextTag = normalizeTagToken(tagInput.value)
|
|
|
|
if (!nextTag) {
|
|
tagInput.value = ''
|
|
return
|
|
}
|
|
|
|
form.tagsText = [...new Set([...selectedTags.value, nextTag])].join(', ')
|
|
tagInput.value = ''
|
|
}
|
|
|
|
/**
|
|
* 태그 배지 삭제
|
|
* @param {string} tag - 삭제할 태그
|
|
* @returns {void}
|
|
*/
|
|
const removeTag = (tag) => {
|
|
form.tagsText = selectedTags.value.filter((item) => item !== tag).join(', ')
|
|
}
|
|
|
|
/**
|
|
* 태그 입력 키 처리
|
|
* @param {KeyboardEvent} event - 키보드 이벤트
|
|
* @returns {void}
|
|
*/
|
|
const handleTagKeydown = (event) => {
|
|
if (event.isComposing || isTagInputComposing.value || event.keyCode === 229) {
|
|
return
|
|
}
|
|
|
|
if (event.key === 'Enter' || event.key === ',') {
|
|
event.preventDefault()
|
|
addTagFromInput()
|
|
return
|
|
}
|
|
|
|
if (event.key === 'Backspace' && !tagInput.value && selectedTags.value.length) {
|
|
event.preventDefault()
|
|
removeTag(selectedTags.value.at(-1))
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 대표 이미지 파일 업로드
|
|
* @param {File} file - 업로드 파일
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const uploadFeaturedImageFile = async (file) => {
|
|
const formData = new FormData()
|
|
formData.append('files', file)
|
|
isUploadingFeaturedImage.value = true
|
|
|
|
try {
|
|
const result = await $fetch('/admin/api/uploads', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
selectedMediaPickerUrl.value = result.files?.[0]?.url || ''
|
|
await fetchMediaItems()
|
|
activeMediaPickerTab.value = 'library'
|
|
} finally {
|
|
isUploadingFeaturedImage.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 대표 이미지 파일 입력 처리
|
|
* @param {Event} event - 파일 입력 이벤트
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const uploadFeaturedImage = async (event) => {
|
|
const files = event.target.files
|
|
|
|
if (!files?.length) {
|
|
return
|
|
}
|
|
|
|
try {
|
|
await uploadFeaturedImageFile(files[0])
|
|
} finally {
|
|
event.target.value = ''
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 대표 이미지 드롭 업로드
|
|
* @param {DragEvent} event - 드롭 이벤트
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const dropFeaturedImage = async (event) => {
|
|
const files = event.dataTransfer?.files
|
|
|
|
if (!files?.length) {
|
|
return
|
|
}
|
|
|
|
await uploadFeaturedImageFile(files[0])
|
|
}
|
|
|
|
/**
|
|
* 제목 입력 후 본문 에디터로 이동
|
|
* @param {KeyboardEvent} event - 키보드 이벤트
|
|
* @returns {void}
|
|
*/
|
|
const focusContentEditor = (event) => {
|
|
if (event?.isComposing || isTitleInputComposing.value || event?.keyCode === 229) {
|
|
return
|
|
}
|
|
|
|
event?.preventDefault()
|
|
blockEditor.value?.focusFirstBlock()
|
|
}
|
|
|
|
/**
|
|
* 게시물 입력값 제출
|
|
* @returns {void}
|
|
*/
|
|
const submitPost = () => {
|
|
isPublishModalOpen.value = false
|
|
emit('submit', createPostPayload())
|
|
}
|
|
|
|
/**
|
|
* 게시물 미리보기 요청
|
|
* @returns {void}
|
|
*/
|
|
const previewPost = () => {
|
|
emit('preview', createPostPayload())
|
|
}
|
|
|
|
/**
|
|
* 게시물 삭제 요청
|
|
* @returns {void}
|
|
*/
|
|
const deletePost = () => {
|
|
emit('delete')
|
|
}
|
|
|
|
/**
|
|
* 설정 패널 표시 상태 전환
|
|
* @returns {void}
|
|
*/
|
|
const toggleSettingsPanel = () => {
|
|
isSettingsOpen.value = !isSettingsOpen.value
|
|
}
|
|
|
|
/**
|
|
* 발행 모달을 현재 폼 상태로 초기화한다.
|
|
* @returns {void}
|
|
*/
|
|
const syncPublishModalStateFromForm = () => {
|
|
publishStatus.value = form.status || 'draft'
|
|
scheduledPublishAt.value = form.publishedAt || toDateTimeLocalValue(new Date(Date.now() + 3600000).toISOString())
|
|
publishTiming.value = isScheduledPost() ? 'schedule' : 'now'
|
|
}
|
|
|
|
/**
|
|
* 발행 모달 열기
|
|
* @returns {void}
|
|
*/
|
|
const openPublishModal = () => {
|
|
syncPublishModalStateFromForm()
|
|
publishModalExpandedSection.value = null
|
|
isPublishModalOpen.value = true
|
|
}
|
|
|
|
/**
|
|
* 발행 모달 닫기
|
|
* @returns {void}
|
|
*/
|
|
const closePublishModal = () => {
|
|
isPublishModalOpen.value = false
|
|
}
|
|
|
|
/**
|
|
* 발행 모달에서 선택한 값을 폼에 반영
|
|
* @returns {void}
|
|
*/
|
|
const applyPublishSelectionToForm = () => {
|
|
form.status = publishStatus.value
|
|
|
|
if (publishStatus.value !== 'published') {
|
|
form.publishedAt = ''
|
|
return
|
|
}
|
|
|
|
if (publishTiming.value === 'schedule') {
|
|
form.publishedAt = scheduledPublishAt.value || toDateTimeLocalValue(new Date(Date.now() + 3600000).toISOString())
|
|
return
|
|
}
|
|
|
|
form.publishedAt = toDateTimeLocalValue(new Date().toISOString())
|
|
}
|
|
|
|
/**
|
|
* 발행 모달에서 최종 저장/발행 확정
|
|
* @returns {void}
|
|
*/
|
|
const submitFromPublishModal = () => {
|
|
applyPublishSelectionToForm()
|
|
submitPost()
|
|
}
|
|
|
|
/**
|
|
* 발행 모달에서 설정 행 펼침을 토글한다.
|
|
* @param {'status' | 'timing'} section - 펼칠 행
|
|
* @returns {void}
|
|
*/
|
|
const togglePublishModalSection = (section) => {
|
|
publishModalExpandedSection.value =
|
|
publishModalExpandedSection.value === section ? null : section
|
|
}
|
|
|
|
/**
|
|
* 발행 모달에서 게시 상태를 선택한다.
|
|
* @param {'published' | 'draft' | 'private'} status - 선택 상태
|
|
* @returns {void}
|
|
*/
|
|
const selectPublishStatus = (status) => {
|
|
publishStatus.value = status
|
|
publishModalExpandedSection.value = null
|
|
|
|
if (status !== 'published') {
|
|
publishTiming.value = 'now'
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 발행 모달에서 발행 시점을 선택한다.
|
|
* @param {'now' | 'schedule'} timing - 즉시 또는 예약
|
|
* @returns {void}
|
|
*/
|
|
const selectPublishTiming = (timing) => {
|
|
publishTiming.value = timing
|
|
|
|
if (timing === 'now') {
|
|
publishModalExpandedSection.value = null
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 현재 입력값을 저장 완료 기준점으로 표시한다.
|
|
* @returns {void}
|
|
*/
|
|
const markSaved = () => {
|
|
savedPostSnapshot.value = serializePostPayload()
|
|
}
|
|
|
|
watch(publishStatus, (next) => {
|
|
if (next !== 'published') {
|
|
publishTiming.value = 'now'
|
|
|
|
if (publishModalExpandedSection.value === 'timing') {
|
|
publishModalExpandedSection.value = null
|
|
}
|
|
}
|
|
})
|
|
|
|
watch(form, scheduleAutosave, { deep: true })
|
|
|
|
onMounted(() => {
|
|
markSaved()
|
|
|
|
const savedRaw = localStorage.getItem(autosaveKey.value)
|
|
|
|
if (!savedRaw) {
|
|
return
|
|
}
|
|
|
|
try {
|
|
const saved = JSON.parse(savedRaw)
|
|
|
|
if (saved?.payload && !isEmptyAutosavePayload(saved.payload)) {
|
|
autosaveNotice.value = saved
|
|
autosaveStatus.value = `${formatAutosaveTime(saved.savedAt)} 자동 저장본 있음`
|
|
}
|
|
} catch {
|
|
localStorage.removeItem(autosaveKey.value)
|
|
}
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
if (import.meta.client) {
|
|
window.clearTimeout(autosaveTimer.value)
|
|
}
|
|
})
|
|
|
|
defineExpose({
|
|
clearAutosave: discardAutosave,
|
|
markSaved,
|
|
allowNextRouteLeave
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<form class="admin-post-form flex h-screen min-h-screen overflow-hidden bg-white" @submit.prevent="openPublishModal">
|
|
<div class="admin-post-form__workspace flex min-w-0 flex-1 flex-col bg-white">
|
|
<header class="admin-post-form__toolbar flex h-[56px] shrink-0 items-center bg-white px-8">
|
|
<div class="admin-post-form__toolbar-inner flex h-[34px] min-w-0 flex-1 items-center justify-between">
|
|
<div class="admin-post-form__toolbar-left flex h-full min-w-0 flex-1 items-center gap-3">
|
|
<NuxtLink class="admin-post-form__toolbar-link inline-flex shrink-0 items-center gap-2 rounded px-2 py-1.5 text-sm font-medium text-[#394047] transition-colors hover:bg-[#eff1f2] hover:text-black" to="/admin/posts">
|
|
<span class="admin-post-form__toolbar-back text-lg leading-none" aria-hidden="true"><</span>
|
|
<span>Posts</span>
|
|
</NuxtLink>
|
|
<div class="admin-post-form__toolbar-status-row flex min-w-0 flex-1 items-center gap-2">
|
|
<span class="admin-post-form__toolbar-status truncate rounded px-2 py-1.5 text-sm text-[#8e9cac]">
|
|
{{ editorStatusLabel }}
|
|
</span>
|
|
<div
|
|
v-if="autosaveNotice"
|
|
class="admin-post-form__toolbar-autosave-actions flex shrink-0 items-center gap-1.5"
|
|
>
|
|
<button
|
|
class="admin-post-form__toolbar-autosave-restore rounded px-2 py-1 text-xs font-semibold text-[#15171a] ring-1 ring-inset ring-[#d7dde2] transition-colors hover:bg-[#eff1f2]"
|
|
type="button"
|
|
@click="restoreAutosave"
|
|
>
|
|
복원
|
|
</button>
|
|
<button
|
|
class="admin-post-form__toolbar-autosave-discard rounded px-2 py-1 text-xs font-semibold text-[#8e9cac] transition-colors hover:bg-[#eff1f2] hover:text-[#394047]"
|
|
type="button"
|
|
title="이 기기에만 있는 자동 저장 초안을 삭제합니다"
|
|
@click="discardAutosave"
|
|
>
|
|
무시
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="admin-post-form__toolbar-actions flex h-full shrink-0 items-center gap-2">
|
|
<button
|
|
class="admin-post-form__toolbar-preview rounded px-3 py-1.5 text-sm font-bold text-[#394047] transition-colors hover:bg-[#eff1f2] hover:text-black"
|
|
type="button"
|
|
@click="previewPost"
|
|
>
|
|
미리보기
|
|
</button>
|
|
<button
|
|
class="admin-post-form__toolbar-submit rounded px-3 py-1.5 text-sm font-bold text-[#2bba3c] transition-colors hover:bg-[#eaf8ec] hover:text-[#159624] disabled:pointer-events-none disabled:text-[#8e9cac] disabled:opacity-60"
|
|
type="button"
|
|
:disabled="saving || !hasUnsavedPostChanges"
|
|
@click="openPublishModal"
|
|
>
|
|
{{ saving ? '저장 중' : submitLabel }}
|
|
</button>
|
|
<button
|
|
class="admin-post-form__settings-toggle grid size-[34px] place-items-center rounded text-[#394047] transition-colors hover:bg-[#eff1f2] hover:text-black"
|
|
type="button"
|
|
:aria-pressed="isSettingsOpen"
|
|
aria-label="게시물 설정 패널 전환"
|
|
@click="toggleSettingsPanel"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M14 2.16699C14.3242 2.16699 14.4998 2.39365 14.5 2.57129V13.4287C14.5 13.606 14.3242 13.834 14 13.834H11.5V2.16699H14ZM2 2.16699H10.5V13.834H2C1.6756 13.834 1.5 13.6064 1.5 13.4287V2.57129C1.50024 2.39409 1.67607 2.16699 2 2.16699Z" stroke="currentColor" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="admin-post-form__editor-scroll min-h-0 flex-1 overflow-y-auto">
|
|
<section class="admin-post-form__content mx-auto w-full max-w-[804px] px-8 pb-16 pt-32">
|
|
<div class="admin-post-form__feature-block mb-9">
|
|
<figure v-if="form.featuredImage" class="admin-post-form__featured-editor group relative overflow-hidden bg-white">
|
|
<img class="admin-post-form__featured-editor-image aspect-[16/9] w-full bg-surface object-cover" :src="form.featuredImage" alt="">
|
|
<figcaption class="admin-post-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-post-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('featuredImage')">
|
|
변경
|
|
</button>
|
|
<button class="admin-post-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-post-form__feature-empty flex h-6 items-start">
|
|
<button class="admin-post-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('featuredImage')">
|
|
<span aria-hidden="true">+</span>
|
|
<span>대표 이미지 추가</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<input
|
|
v-model="form.title"
|
|
class="admin-post-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]"
|
|
type="text"
|
|
placeholder="제목"
|
|
required
|
|
@keydown.enter="focusContentEditor"
|
|
@compositionstart="isTitleInputComposing = true"
|
|
@compositionend="isTitleInputComposing = false"
|
|
>
|
|
|
|
<div class="admin-post-form__field admin-post-form__content-editor text-sm">
|
|
<AdminMarkdownEditor ref="blockEditor" v-model="form.content" />
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<aside
|
|
class="admin-post-form__settings flex h-screen shrink-0 flex-col overflow-hidden border-[#e3e6e8] bg-white transition-[width,border-color] duration-300 ease-out"
|
|
:class="isSettingsOpen ? 'w-[420px] border-l' : 'w-0 border-l-0'"
|
|
:aria-hidden="!isSettingsOpen"
|
|
>
|
|
<div class="admin-post-form__settings-inner flex h-full w-[420px] flex-col">
|
|
<div class="admin-post-form__settings-header flex h-[56px] shrink-0 items-center justify-between px-6">
|
|
<h2 class="admin-post-form__settings-title text-xl font-bold text-black">
|
|
게시물 설정
|
|
</h2>
|
|
<button class="admin-post-form__settings-close grid size-8 place-items-center rounded text-[#394047] transition-colors hover:bg-[#eff1f2] hover:text-black" type="button" aria-label="게시물 설정 닫기" @click="toggleSettingsPanel">
|
|
<span aria-hidden="true">x</span>
|
|
</button>
|
|
</div>
|
|
|
|
<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">
|
|
<option value="draft">초안</option>
|
|
<option value="published">발행</option>
|
|
<option value="private">비공개</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label v-if="form.status === 'published'" class="admin-post-form__field grid gap-2 text-sm">
|
|
<span class="admin-post-form__label font-medium">
|
|
발행 시각
|
|
</span>
|
|
<input
|
|
v-model="form.publishedAt"
|
|
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="datetime-local"
|
|
>
|
|
<span class="admin-post-form__hint text-xs text-muted">
|
|
{{ isScheduledPost() ? '미래 시각이면 예약 발행으로 저장됩니다.' : '비워두면 저장 시점으로 발행됩니다.' }}
|
|
</span>
|
|
</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-[108px] rounded border border-[#e3e6e8] bg-[#eff1f2] px-3 py-2 transition-colors hover:border-[#c8ced3] focus:border-[#8e9cac] focus:outline-none"
|
|
/>
|
|
</label>
|
|
|
|
<div class="admin-post-form__field grid gap-1 text-sm">
|
|
<span class="admin-post-form__label h-[22px] font-bold text-[#15171a]">Tags</span>
|
|
<label class="admin-post-form__tag-editor flex min-h-[38px] w-full items-center gap-2 rounded border border-[#e3e6e8] bg-[#eff1f2] px-3 py-1 transition-colors hover:border-[#c8ced3] focus-within:border-[#8e9cac]">
|
|
<span
|
|
v-for="tag in selectedTags"
|
|
:key="tag"
|
|
class="admin-post-form__tag-badge inline-flex h-6 shrink-0 items-center gap-1.5 rounded-[3px] bg-[#ecd2de] px-2 text-sm text-[#e04e87]"
|
|
>
|
|
<span>{{ tag }}</span>
|
|
<button
|
|
class="admin-post-form__tag-remove inline-flex size-4 shrink-0 items-center justify-center rounded text-[#e04e87] transition-colors hover:bg-[#e7c3d2]"
|
|
type="button"
|
|
:aria-label="`${tag} 태그 삭제`"
|
|
@click="removeTag(tag)"
|
|
>
|
|
<svg class="size-2.5" version="1" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path fill="currentColor" d="M12.707 12L23.854.854a.5.5 0 00-.707-.707L12 11.293.854.146a.5.5 0 00-.707.707L11.293 12 .146 23.146a.5.5 0 00.708.708L12 12.707l11.146 11.146a.5.5 0 10.708-.706L12.707 12z" />
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
<input
|
|
v-model="tagInput"
|
|
class="admin-post-form__tag-input min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-black outline-none placeholder:text-[#8e9cac]"
|
|
type="text"
|
|
placeholder="태그 입력"
|
|
@blur="addTagFromInput"
|
|
@keydown="handleTagKeydown"
|
|
@compositionstart="isTagInputComposing = true"
|
|
@compositionend="isTagInputComposing = false"
|
|
>
|
|
<span class="admin-post-form__tag-chevron text-xs text-[#394047]" aria-hidden="true">⌄</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="admin-post-form__search-visibility grid gap-3 border-t border-[#e3e6e8] pt-5 text-sm">
|
|
<div>
|
|
<h2 class="admin-post-form__section-title text-sm font-semibold text-ink">
|
|
검색 노출
|
|
</h2>
|
|
<p class="admin-post-form__section-description mt-1 text-xs text-muted">
|
|
메타 제목·설명은 저장 시 글 제목과 요약을 그대로 사용합니다.
|
|
</p>
|
|
</div>
|
|
|
|
<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>
|
|
<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-[#d7dde2] bg-white text-sm font-bold text-[#394047] transition-colors hover:border-[#d21a26] hover:bg-red-50 hover:text-[#d21a26] disabled:opacity-50"
|
|
type="button"
|
|
:disabled="deleting"
|
|
@click="deletePost"
|
|
>
|
|
<span aria-hidden="true">⌫</span>
|
|
<span>{{ deleting ? '삭제 중' : 'Delete post' }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<div
|
|
v-if="isMediaPickerOpen"
|
|
class="admin-post-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-post-form__media-picker-panel flex max-h-[86vh] min-h-[620px] w-full max-w-5xl flex-col overflow-hidden bg-white text-ink shadow-xl">
|
|
<div class="admin-post-form__media-picker-header flex items-center justify-between border-b border-line px-5 py-4">
|
|
<h2 class="admin-post-form__media-picker-title text-lg font-semibold">
|
|
대표 이미지
|
|
</h2>
|
|
<button class="admin-post-form__media-picker-close rounded border border-line px-3 py-1.5 text-sm font-semibold transition-colors hover:bg-[#eff1f2]" type="button" @click="closeMediaPicker">
|
|
닫기
|
|
</button>
|
|
</div>
|
|
<div class="admin-post-form__media-picker-tabs flex border-b border-line px-5">
|
|
<button
|
|
class="admin-post-form__media-picker-tab border-b-2 px-3 py-3 text-sm font-semibold transition-colors"
|
|
:class="activeMediaPickerTab === 'upload' ? 'border-[#15171a] text-[#15171a]' : 'border-transparent text-muted hover:text-[#15171a]'"
|
|
type="button"
|
|
@click="activeMediaPickerTab = 'upload'"
|
|
>
|
|
이미지 업로드
|
|
</button>
|
|
<button
|
|
class="admin-post-form__media-picker-tab border-b-2 px-3 py-3 text-sm font-semibold transition-colors"
|
|
:class="activeMediaPickerTab === 'library' ? 'border-[#15171a] text-[#15171a]' : 'border-transparent text-muted hover:text-[#15171a]'"
|
|
type="button"
|
|
@click="activeMediaPickerTab = 'library'"
|
|
>
|
|
미디어 라이브러리
|
|
</button>
|
|
</div>
|
|
<div class="admin-post-form__media-picker-body flex-1 overflow-y-auto p-5">
|
|
<div
|
|
v-if="activeMediaPickerTab === 'upload'"
|
|
class="admin-post-form__media-upload-zone grid min-h-[420px] place-items-center border border-dashed border-[#cfd5da] bg-white text-center"
|
|
@dragover.prevent
|
|
@drop.prevent="dropFeaturedImage"
|
|
>
|
|
<div class="admin-post-form__media-upload-inner grid gap-3">
|
|
<p class="admin-post-form__media-upload-title text-lg font-semibold text-[#15171a]">
|
|
파일을 끌어 업로드
|
|
</p>
|
|
<p class="admin-post-form__media-upload-or text-sm text-muted">
|
|
또는
|
|
</p>
|
|
<label class="admin-post-form__media-upload-button mx-auto inline-flex h-10 cursor-pointer items-center justify-center rounded border border-[#2b78d0] px-8 text-sm font-semibold text-[#1f6fbf] transition-colors hover:bg-blue-50">
|
|
{{ isUploadingFeaturedImage ? '업로드 중' : '파일 선택' }}
|
|
<input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<template v-else>
|
|
<p v-if="isLoadingMedia" class="admin-post-form__media-picker-loading text-sm text-muted">
|
|
미디어를 불러오는 중입니다.
|
|
</p>
|
|
<div v-else-if="mediaItems.length" class="admin-post-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-post-form__media-picker-item relative overflow-hidden border bg-white text-left transition hover:border-[#8e9cac] hover:shadow-sm"
|
|
:class="selectedMediaPickerUrl === item.url ? 'border-[#15171a] ring-2 ring-[#15171a]' : 'border-line'"
|
|
type="button"
|
|
:aria-pressed="selectedMediaPickerUrl === item.url"
|
|
@click="selectPickedImage(item)"
|
|
>
|
|
<img class="admin-post-form__media-picker-image aspect-square w-full bg-surface object-cover" :src="item.url" :alt="item.title">
|
|
<span class="admin-post-form__media-picker-name block truncate px-2 py-1.5 text-xs font-semibold text-ink">{{ item.name }}</span>
|
|
<span v-if="selectedMediaPickerUrl === item.url" class="admin-post-form__media-picker-selected absolute right-2 top-2 grid size-6 place-items-center rounded-full bg-[#15171a] text-white" aria-hidden="true">
|
|
<svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M1 5L4.5 8.5L12 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<p v-else class="admin-post-form__media-picker-empty border border-dashed border-line p-8 text-center text-sm text-muted">
|
|
선택할 미디어가 없습니다.
|
|
</p>
|
|
</template>
|
|
</div>
|
|
<div class="admin-post-form__media-picker-footer flex h-14 shrink-0 items-center justify-end border-t border-line px-5">
|
|
<button
|
|
class="admin-post-form__media-picker-confirm h-9 rounded bg-[#15171a] px-4 text-sm font-semibold text-white transition-colors hover:bg-black disabled:cursor-not-allowed disabled:bg-[#d7dce0] disabled:text-[#8e9cac]"
|
|
type="button"
|
|
:disabled="!selectedMediaPickerUrl"
|
|
@click="applyPickedImage"
|
|
>
|
|
대표 이미지로 적용
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<AdminUnsavedChangesModal
|
|
:open="isUnsavedModalOpen"
|
|
@stay="stayOnUnsavedPage"
|
|
@leave="leaveUnsavedPage"
|
|
/>
|
|
|
|
<div
|
|
v-if="isPublishModalOpen"
|
|
class="admin-post-form__publish-modal fixed inset-0 z-[70] flex flex-col bg-white"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="admin-post-form-publish-modal-title"
|
|
>
|
|
<div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
|
|
<header class="admin-post-form__publish-modal-header flex h-14 shrink-0 items-center justify-between px-6">
|
|
<h2 id="admin-post-form-publish-modal-title" class="text-[15px] font-semibold text-[#15171a]">
|
|
발행
|
|
</h2>
|
|
<div class="flex items-center gap-2">
|
|
<button class="rounded px-3 py-1.5 text-[13px] font-semibold text-[#394047] hover:bg-[#eff1f2]" type="button" @click="closePublishModal">
|
|
닫기
|
|
</button>
|
|
<button class="rounded border border-[#d7dde2] px-3 py-1.5 text-[13px] font-semibold text-[#394047] hover:bg-[#eff1f2]" type="button" @click="previewPost">
|
|
미리보기
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="admin-post-form__publish-modal-body flex flex-1 flex-col items-center px-6 pb-16 pt-10 sm:pt-14">
|
|
<div class="w-full max-w-[640px]">
|
|
<div class="admin-post-form__publish-modal-hero mb-10 sm:mb-12">
|
|
<p class="text-[clamp(28px,7vw,46px)] font-black text-[#2bba3c]">
|
|
준비됐어요, 발행하세요.
|
|
</p>
|
|
<p class="text-[clamp(28px,7vw,46px)] font-black leading-[0.95] text-[#15171a]">
|
|
세상과 공유해 보세요.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="admin-post-form__publish-settings w-full">
|
|
<div class="admin-post-form__publish-setting">
|
|
<button
|
|
class="admin-post-form__publish-setting-title flex w-full items-center gap-3 py-4 text-left text-[15px] font-semibold text-[#15171a] transition-colors"
|
|
type="button"
|
|
:aria-expanded="publishModalExpandedSection === 'status'"
|
|
aria-controls="admin-post-form-publish-status-panel"
|
|
data-test-setting="publish-type"
|
|
@click="togglePublishModalSection('status')"
|
|
>
|
|
<span class="flex size-6 shrink-0 items-center justify-center text-[#959eab]" aria-hidden="true">
|
|
<svg class="size-4" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M23 1L6.21 13.013v9.408L12 17.355" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
<path d="M1 9.105L23 1l-3.474 22L1 9.105z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
</svg>
|
|
</span>
|
|
<span class="min-w-0 flex-1">{{ publishStatusSummaryLabel }}</span>
|
|
<span class="flex size-2.5 shrink-0 items-center justify-center text-[#959eab]" aria-hidden="true">
|
|
<svg
|
|
class="size-[22px] transition-transform duration-200 ease-out"
|
|
:class="{ 'rotate-180': publishModalExpandedSection === 'status' }"
|
|
fill="currentColor"
|
|
viewBox="0 0 26 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path clip-rule="evenodd" d="M1.043 6.604a1 1 0 011.414 0L13 17.146 23.543 6.604a1 1 0 011.414 1.414l-10.72 10.719a1.75 1.75 0 01-2.474 0L1.042 8.018a1 1 0 010-1.414zm11.78 10.72v-.001zm.355 0v-.001z" fill-rule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<div
|
|
v-show="publishModalExpandedSection === 'status'"
|
|
id="admin-post-form-publish-status-panel"
|
|
class="admin-post-form__publish-setting-panel px-4 pb-4"
|
|
>
|
|
<div class="flex flex-wrap gap-2">
|
|
<button
|
|
class="rounded-full border px-3 py-1.5 text-[13px] font-semibold"
|
|
:class="publishStatus === 'published' ? 'border-[#15171a] bg-[#15171a] text-white' : 'border-[#d7dde2] bg-white text-[#394047]'"
|
|
type="button"
|
|
@click="selectPublishStatus('published')"
|
|
>
|
|
발행
|
|
</button>
|
|
<button
|
|
class="rounded-full border px-3 py-1.5 text-[13px] font-semibold"
|
|
:class="publishStatus === 'draft' ? 'border-[#15171a] bg-[#15171a] text-white' : 'border-[#d7dde2] bg-white text-[#394047]'"
|
|
type="button"
|
|
@click="selectPublishStatus('draft')"
|
|
>
|
|
초안
|
|
</button>
|
|
<button
|
|
class="rounded-full border px-3 py-1.5 text-[13px] font-semibold"
|
|
:class="publishStatus === 'private' ? 'border-[#15171a] bg-[#15171a] text-white' : 'border-[#d7dde2] bg-white text-[#394047]'"
|
|
type="button"
|
|
@click="selectPublishStatus('private')"
|
|
>
|
|
비공개
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="publishStatus === 'published'" class="admin-post-form__publish-setting admin-post-form__publish-setting--timing border-t border-[#e3e6e8]">
|
|
<button
|
|
class="admin-post-form__publish-setting-title flex w-full items-center gap-3 py-4 text-left text-[15px] font-semibold text-[#15171a] transition-colors"
|
|
type="button"
|
|
:aria-expanded="publishModalExpandedSection === 'timing'"
|
|
aria-controls="admin-post-form-publish-timing-panel"
|
|
data-test-setting="publish-at"
|
|
@click="togglePublishModalSection('timing')"
|
|
>
|
|
<span class="flex size-6 shrink-0 items-center justify-center text-[#959eab]" aria-hidden="true">
|
|
<svg class="size-4" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
<path d="M12 6v6h6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
</svg>
|
|
</span>
|
|
<span class="min-w-0 flex-1">{{ publishTimingSummaryLabel }}</span>
|
|
<span class="flex size-2.5 shrink-0 items-center justify-center text-[#959eab]" aria-hidden="true">
|
|
<svg
|
|
class="size-[22px] transition-transform duration-200 ease-out"
|
|
:class="{ 'rotate-180': publishModalExpandedSection === 'timing' }"
|
|
fill="currentColor"
|
|
viewBox="0 0 26 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path clip-rule="evenodd" d="M1.043 6.604a1 1 0 011.414 0L13 17.146 23.543 6.604a1 1 0 011.414 1.414l-10.72 10.719a1.75 1.75 0 01-2.474 0L1.042 8.018a1 1 0 010-1.414zm11.78 10.72v-.001zm.355 0v-.001z" fill-rule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<div
|
|
v-show="publishModalExpandedSection === 'timing'"
|
|
id="admin-post-form-publish-timing-panel"
|
|
class="admin-post-form__publish-setting-panel px-4 pb-4"
|
|
>
|
|
<div class="flex flex-wrap gap-2">
|
|
<button
|
|
class="rounded-full border px-3 py-1.5 text-[13px] font-semibold"
|
|
:class="publishTiming === 'now' ? 'border-[#15171a] bg-[#15171a] text-white' : 'border-[#d7dde2] bg-white text-[#394047]'"
|
|
type="button"
|
|
@click="selectPublishTiming('now')"
|
|
>
|
|
지금 바로
|
|
</button>
|
|
<button
|
|
class="rounded-full border px-3 py-1.5 text-[13px] font-semibold"
|
|
:class="publishTiming === 'schedule' ? 'border-[#15171a] bg-[#15171a] text-white' : 'border-[#d7dde2] bg-white text-[#394047]'"
|
|
type="button"
|
|
@click="selectPublishTiming('schedule')"
|
|
>
|
|
예약
|
|
</button>
|
|
</div>
|
|
<input
|
|
v-if="publishTiming === 'schedule'"
|
|
v-model="scheduledPublishAt"
|
|
class="admin-post-form__publish-schedule-input mt-3 h-[38px] w-full max-w-[320px] rounded border border-[#e3e6e8] bg-white px-3 py-2 text-[13px] text-[#15171a] outline-none focus:border-[#8e9cac]"
|
|
type="datetime-local"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-post-form__publish-modal-actions mt-10">
|
|
<button
|
|
class="rounded bg-[#15171a] px-5 py-2.5 text-[14px] font-semibold text-white transition-colors hover:bg-black disabled:cursor-not-allowed disabled:bg-[#d7dce0] disabled:text-[#8e9cac]"
|
|
type="button"
|
|
:disabled="saving"
|
|
@click="submitFromPublishModal"
|
|
>
|
|
{{ saving ? '저장 중…' : '최종 확인하고 저장 →' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|