zenn
f5cd73b223
로그인 상태를 헤더에서 즉시 인지하고 계정 관리를 이어갈 수 있도록 사용자 설정과 관리자 멤버 관측 기능을 연결했다. Co-authored-by: Cursor <cursoragent@cursor.com>
95 lines
3.2 KiB
Vue
95 lines
3.2 KiB
Vue
<script setup>
|
|
const route = useRoute()
|
|
|
|
const isPostEditorRoute = computed(() => route.path === '/admin/posts/new'
|
|
|| (route.path.startsWith('/admin/posts/') && route.path !== '/admin/posts/preview'))
|
|
|
|
const editorDocumentClass = 'admin-post-editor-document'
|
|
|
|
/**
|
|
* 글쓰기 전체 화면 문서 스크롤 잠금 적용
|
|
* @returns {void}
|
|
*/
|
|
const syncPostEditorDocumentClass = () => {
|
|
if (!import.meta.client) {
|
|
return
|
|
}
|
|
|
|
document.documentElement.classList.toggle(editorDocumentClass, isPostEditorRoute.value)
|
|
document.body.classList.toggle(editorDocumentClass, isPostEditorRoute.value)
|
|
}
|
|
|
|
watchEffect(syncPostEditorDocumentClass)
|
|
|
|
onBeforeUnmount(() => {
|
|
if (!import.meta.client) {
|
|
return
|
|
}
|
|
|
|
document.documentElement.classList.remove(editorDocumentClass)
|
|
document.body.classList.remove(editorDocumentClass)
|
|
})
|
|
|
|
/**
|
|
* 관리자 로그아웃
|
|
* @returns {Promise<void>} 로그아웃 처리 결과
|
|
*/
|
|
const logoutAdmin = async () => {
|
|
await $fetch('/admin/api/auth/logout', {
|
|
method: 'POST'
|
|
})
|
|
await navigateTo('/admin/login')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="admin-layout bg-[#f5f5f2] text-ink"
|
|
:class="isPostEditorRoute ? 'h-screen overflow-hidden bg-white' : 'min-h-screen'"
|
|
>
|
|
<aside
|
|
v-if="!isPostEditorRoute"
|
|
class="admin-layout__sidebar fixed inset-y-0 left-0 hidden w-64 border-r border-line bg-[#15171a] p-5 text-white lg:block"
|
|
>
|
|
<NuxtLink class="admin-layout__brand block text-lg font-semibold" to="/admin">
|
|
sori.studio
|
|
</NuxtLink>
|
|
<nav class="admin-layout__nav mt-8 grid gap-2 text-sm text-white/75">
|
|
<NuxtLink class="admin-layout__nav-link rounded px-3 py-2 transition-colors hover:bg-white/10 hover:text-white" to="/admin/posts">
|
|
글
|
|
</NuxtLink>
|
|
<NuxtLink class="admin-layout__nav-link rounded px-3 py-2 transition-colors hover:bg-white/10 hover:text-white" to="/admin/pages">
|
|
페이지
|
|
</NuxtLink>
|
|
<NuxtLink class="admin-layout__nav-link rounded px-3 py-2 transition-colors hover:bg-white/10 hover:text-white" to="/admin/tags">
|
|
태그
|
|
</NuxtLink>
|
|
<NuxtLink class="admin-layout__nav-link rounded px-3 py-2 transition-colors hover:bg-white/10 hover:text-white" to="/admin/media">
|
|
미디어
|
|
</NuxtLink>
|
|
<NuxtLink class="admin-layout__nav-link rounded px-3 py-2 transition-colors hover:bg-white/10 hover:text-white" to="/admin/navigation">
|
|
메뉴
|
|
</NuxtLink>
|
|
<NuxtLink class="admin-layout__nav-link rounded px-3 py-2 transition-colors hover:bg-white/10 hover:text-white" to="/admin/members">
|
|
멤버
|
|
</NuxtLink>
|
|
<NuxtLink class="admin-layout__nav-link rounded px-3 py-2 transition-colors hover:bg-white/10 hover:text-white" to="/admin/settings">
|
|
설정
|
|
</NuxtLink>
|
|
<button class="admin-layout__logout rounded px-3 py-2 text-left transition-colors hover:bg-white/10 hover:text-white" type="button" @click="logoutAdmin">
|
|
로그아웃
|
|
</button>
|
|
</nav>
|
|
</aside>
|
|
<main
|
|
class="admin-layout__main"
|
|
:class="[
|
|
isPostEditorRoute ? 'h-screen overflow-hidden' : 'min-h-screen',
|
|
{ 'lg:ml-64': !isPostEditorRoute }
|
|
]"
|
|
>
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</template>
|