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

관리자 글쓰기 슬러그와 미디어 선택 UX 개선

Browse Source
This commit is contained in:
zenn
2026-07-08 12:37:42 +09:00
parent 976027c808
commit eb840b4224
10 changed files with 131 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/admin/AdminMarkdownEditor.vue
View File

@@ -3256,6 +3256,20 @@ const mediaPickerPageItems = computed(() => {
}, [])
})
/**
* 갤러리 미디어 선택 순서를 반환한다.
* @param {string} url - 미디어 URL
* @returns {number} 1부터 시작하는 선택 순서, 선택되지 않았으면 0
*/
const getGallerySelectionOrder = (url) => {
if (!isGalleryMediaPicker.value) {
return 0
}
const index = selectedMediaUrls.value.indexOf(url)
return index >= 0 ? index + 1 : 0
}
/**
* 미디어 선택 모달 페이지를 변경한다.
* @param {number} page - 이동할 페이지
@@ -3896,9 +3910,6 @@ const handleKeydown = (event) => {
<h2 class="admin-markdown-editor__media-title text-lg font-bold text-black">
{{ mediaPickerTitle }}
</h2>
<p v-if="activeMediaPickerTab === 'library'" class="admin-markdown-editor__media-count mt-1 text-sm text-[#6b7280]">
{{ selectedMediaUrls.length }}개 선택됨
</p>
</div>
<button
class="admin-markdown-editor__media-close rounded px-3 py-1.5 text-sm font-semibold text-[#394047] hover:bg-[#eff1f2] disabled:cursor-not-allowed disabled:opacity-40"
@@ -3953,11 +3964,17 @@ const handleKeydown = (event) => {
<button
v-for="item in filteredMediaItems"
:key="item.url"
class="admin-markdown-editor__media-item group overflow-hidden rounded border bg-white text-left transition"
class="admin-markdown-editor__media-item group relative overflow-hidden rounded border bg-white text-left transition"
:class="selectedMediaUrls.includes(item.url) ? 'border-[3px] border-[#ff7a00] ring-2 ring-[#ff7a00]/40' : 'border border-[#e3e6e8] hover:border-[#8e9cac]'"
type="button"
@click="toggleMediaSelection(item)"
>
<span
v-if="getGallerySelectionOrder(item.url)"
class="admin-markdown-editor__media-selection-order absolute right-2 top-2 z-10 grid size-7 place-items-center rounded-full bg-[#ff7a00] text-xs font-bold text-white shadow-sm ring-2 ring-white"
>
{{ getGallerySelectionOrder(item.url) }}
</span>
<img
v-if="getMediaItemKind(item) === 'image'"
class="admin-markdown-editor__media-thumb aspect-[4/3] w-full bg-[#f6f7f8] object-cover"
@@ -3989,7 +4006,7 @@ const handleKeydown = (event) => {
</template>
<div
v-else
class="admin-markdown-editor__media-upload-zone relative grid min-h-[420px] place-items-center overflow-hidden rounded border border-dashed border-[#cfd5da] bg-[#fafafa] text-center"
class="admin-markdown-editor__media-upload-zone relative grid h-full min-h-[420px] place-items-center overflow-hidden rounded border border-dashed border-[#cfd5da] bg-[#fafafa] text-center"
:class="isUploading ? 'admin-markdown-editor__media-upload-zone--uploading select-none border-[#8e9cac] bg-[#f3f5f7]' : ''"
@dragover.prevent
@drop.prevent="handleMediaModalDrop"