zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

대표 이미지 전용 카드 썸네일로 정리

Browse Source
This commit is contained in:
zenn
2026-06-08 15:54:39 +09:00
parent eb4018f92c
commit 806b181d1f
18 changed files with 236 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/admin/AdminPostForm.vue
View File

@@ -160,6 +160,7 @@ const form = reactive({
excerpt: props.initialPost.excerpt || '',
content: normalizeMarkdownContent(props.initialPost.content),
featuredImage: props.initialPost.featuredImage || '',
showFeaturedImage: Boolean(props.initialPost.showFeaturedImage),
isFeatured: Boolean(props.initialPost.isFeatured),
noindex: props.initialPost.noindex === true,
status: props.initialPost.status || 'draft',
@@ -602,6 +603,7 @@ const createPostPayload = (options = {}) => {
excerpt: form.excerpt.trim(),
content: normalizeMarkdownContent(form.content),
featuredImage: form.featuredImage.trim() || null,
showFeaturedImage: Boolean(form.featuredImage.trim() && form.showFeaturedImage),
isFeatured: form.isFeatured,
seoTitle: toAdminPostStoredTitle(form.title),
seoDescription: form.excerpt.trim(),
@@ -778,6 +780,7 @@ const applyPickedImage = () => {
*/
const removeFeaturedImage = () => {
form.featuredImage = ''
form.showFeaturedImage = false
}
/**
@@ -1898,6 +1901,35 @@ defineExpose({
</div>
</div>
<label
v-if="form.featuredImage"
class="admin-post-form__featured-image-display-toggle flex items-center justify-between gap-4 border-t border-[#e3e6e8] pt-5 text-sm"
>
<span class="admin-post-form__featured-image-display-copy flex min-w-0 items-center gap-3">
<span class="admin-post-form__featured-image-display-icon flex size-7 shrink-0 items-center justify-center text-[#15171a]" aria-hidden="true">
<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="5" width="18" height="14" rx="2" />
<path d="m7 15 3-3 2 2 3-4 2 5" />
<circle cx="8" cy="9" r="1" />
</svg>
</span>
<span class="admin-post-form__featured-image-display-label grid min-w-0 gap-0.5">
<span class="font-bold text-[#15171a]">본문 상단 대표 이미지</span>
<span class="text-xs leading-snug text-[#8e9cac]">게시물 상세 제목 아래에 대표 이미지를 표시합니다.</span>
</span>
</span>
<span class="admin-post-form__featured-image-display-control relative inline-flex h-7 w-12 shrink-0 items-center">
<input
v-model="form.showFeaturedImage"
class="peer sr-only"
type="checkbox"
aria-label="본문 상단 대표 이미지 표시"
>
<span class="absolute inset-0 rounded-full bg-[#c8ced3] transition-colors peer-checked:bg-[#15171a]" aria-hidden="true" />
<span class="relative ml-1 size-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-5" aria-hidden="true" />
</span>
</label>
<label class="admin-post-form__featured-toggle flex items-center justify-between gap-4 border-t border-[#e3e6e8] pt-5 text-sm">
<span class="admin-post-form__featured-toggle-copy flex min-w-0 items-center gap-3">
<span class="admin-post-form__featured-toggle-icon flex size-7 shrink-0 items-center justify-center text-[#15171a]" aria-hidden="true">