163 lines
10 KiB
Vue
163 lines
10 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'
|
|
|
|
/**
|
|
* 관리자 내비게이션 활성 경로 확인
|
|
* @param {string} path - 확인할 경로
|
|
* @returns {boolean} 활성 여부
|
|
*/
|
|
const isAdminNavActive = (path) => route.path === path || route.path.startsWith(`${path}/`)
|
|
|
|
/**
|
|
* 글쓰기 전체 화면 문서 스크롤 잠금 적용
|
|
* @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-[#f7f8fa] 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-80 border-r border-[#e6e8eb] bg-[#f7f8fa] px-5 py-6 text-[#15171a] lg:block"
|
|
>
|
|
<NuxtLink class="admin-layout__brand flex items-center gap-3 px-2 text-[0.95rem] font-semibold tracking-[-0.01em]" to="/admin">
|
|
<span class="admin-layout__brand-mark flex h-8 w-8 items-center justify-center rounded-full border border-[#d8dce1] bg-white shadow-[0_1px_2px_rgba(15,23,42,0.05)]">
|
|
<span class="h-5 w-5 rounded-full border-2 border-[#15171a]" />
|
|
</span>
|
|
<span>sori.studio</span>
|
|
</NuxtLink>
|
|
<nav class="admin-layout__nav mt-10 grid gap-1.5 text-sm font-medium text-[#5d6673]">
|
|
<div
|
|
class="admin-layout__nav-item group flex items-center rounded-md transition-colors"
|
|
:class="isAdminNavActive('/admin/posts') ? 'bg-[#e9ecef] text-[#15171a]' : 'hover:bg-[#eceff2] hover:text-[#15171a]'"
|
|
>
|
|
<NuxtLink class="admin-layout__nav-link flex min-w-0 flex-1 items-center gap-3 px-3 py-2" to="/admin/posts">
|
|
<svg class="admin-layout__nav-icon h-4 w-4 shrink-0" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M5.5.75l10.72 10.72a.72.72 0 01.22.53.72.72 0 01-.22.53L5.5 23.25" stroke="#000" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
<span class="truncate">게시글</span>
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
class="admin-layout__nav-create mr-2 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-[#5d6673] transition-colors hover:bg-white hover:text-[#15171a] hover:shadow-[0_1px_2px_rgba(15,23,42,0.08)]"
|
|
to="/admin/posts/new"
|
|
aria-label="새 게시글 작성"
|
|
>
|
|
<svg class="h-3.5 w-3.5" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
|
</svg>
|
|
</NuxtLink>
|
|
</div>
|
|
<NuxtLink
|
|
class="admin-layout__nav-link flex items-center gap-3 rounded-md px-3 py-2 transition-colors hover:bg-[#eceff2] hover:text-[#15171a]"
|
|
:class="isAdminNavActive('/admin/pages') ? 'bg-[#e9ecef] text-[#15171a]' : ''"
|
|
to="/admin/pages"
|
|
>
|
|
<svg class="admin-layout__nav-icon h-4 w-4 shrink-0" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M16.5 21.513a1.5 1.5 0 01-1.9 1.446L4.1 20.042A1.5 1.5 0 013 18.6V2.487a1.5 1.5 0 011.9-1.446l10.5 3.391a1.5 1.5 0 011.1 1.445z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
<path d="M4.5.987h15a1.5 1.5 0 011.5 1.5v15.75a1.5 1.5 0 01-1.5 1.5h-3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
</svg>
|
|
<span>페이지</span>
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
class="admin-layout__nav-link flex items-center gap-3 rounded-md px-3 py-2 transition-colors hover:bg-[#eceff2] hover:text-[#15171a]"
|
|
:class="isAdminNavActive('/admin/tags') ? 'bg-[#e9ecef] text-[#15171a]' : ''"
|
|
to="/admin/tags"
|
|
>
|
|
<svg class="admin-layout__nav-icon h-4 w-4 shrink-0" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M1.061 2.56v6.257a3 3 0 00.878 2.121L13.5 22.5a1.5 1.5 0 002.121 0l6.879-6.88a1.5 1.5 0 000-2.121L10.939 1.938a3 3 0 00-2.121-.878H2.561a1.5 1.5 0 00-1.5 1.5z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
</svg>
|
|
<span>태그</span>
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
class="admin-layout__nav-link flex items-center gap-3 rounded-md px-3 py-2 transition-colors hover:bg-[#eceff2] hover:text-[#15171a]"
|
|
:class="isAdminNavActive('/admin/media') ? 'bg-[#e9ecef] text-[#15171a]' : ''"
|
|
to="/admin/media"
|
|
>
|
|
<svg class="admin-layout__nav-icon h-4 w-4 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true">
|
|
<path d="M305-193.85v-191.54l153.46 95.77L305-193.85Zm215-373.84q-47.44 0-80.64-33.18-33.21-33.18-33.21-80.58t33.21-80.67q33.2-33.26 80.64-33.26h43.85v47.69H520q-27.56 0-46.86 19.32-19.29 19.32-19.29 46.92t19.29 46.83q19.3 19.24 46.86 19.24h43.85v47.69H520Zm116.15 0v-47.69H680q27.56 0 46.86-19.33 19.29-19.32 19.29-46.92t-19.29-46.83q-19.3-19.23-46.86-19.23h-43.85v-47.69H680q47.44 0 80.64 33.17 33.21 33.18 33.21 80.58t-33.21 80.67q-33.2 33.27-80.64 33.27h-43.85Zm-110-90v-47.69h147.7v47.69h-147.7Zm106.7 239.61v-60h194.84q5.39 0 8.85-3.46t3.46-8.85v-335.38q0-5.38-3.46-8.84-3.46-3.47-8.85-3.47H372.31q-5.39 0-8.85 3.47-3.46 3.46-3.46 8.84v336.15h-60v-336.15q0-29.82 21.24-51.07 21.24-21.24 51.07-21.24h455.38q29.83 0 51.07 21.24Q900-855.59 900-825.77v335.38q0 29.83-21.24 51.07-21.24 21.24-51.07 21.24H632.85ZM132.31-61.92q-29.83 0-51.07-21.24Q60-104.41 60-134.23V-445q0-29.83 21.24-51.07 21.24-21.24 51.07-21.24h455.38q29.83 0 51.07 21.24Q660-474.83 660-445v310.77q0 29.82-21.24 51.07-21.24 21.24-51.07 21.24H132.31Zm0-60h455.38q5.39 0 8.85-3.47 3.46-3.46 3.46-8.84V-445q0-5.39-3.46-8.85t-8.85-3.46H132.31q-5.39 0-8.85 3.46T120-445v310.77q0 5.38 3.46 8.84 3.46 3.47 8.85 3.47ZM600-658.08ZM360-289.62Z" />
|
|
</svg>
|
|
<span>미디어</span>
|
|
</NuxtLink>
|
|
<NuxtLink class="admin-layout__nav-link flex items-center gap-3 rounded-md px-3 py-2 transition-colors hover:bg-[#eceff2] hover:text-[#15171a]" to="/admin/navigation">
|
|
<span class="admin-layout__nav-icon h-4 w-4 shrink-0 rounded-full border border-current" aria-hidden="true" />
|
|
<span>메뉴</span>
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
class="admin-layout__nav-link flex items-center gap-3 rounded-md px-3 py-2 transition-colors hover:bg-[#eceff2] hover:text-[#15171a]"
|
|
:class="isAdminNavActive('/admin/members') ? 'bg-[#e9ecef] text-[#15171a]' : ''"
|
|
to="/admin/members"
|
|
>
|
|
<svg class="admin-layout__nav-icon h-4 w-4 shrink-0" viewBox="0 0 24 24" aria-hidden="true">
|
|
<circle cx="7.5" cy="7.875" r="4.125" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
<path d="M.75 20.25a6.75 6.75 0 0113.5 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
<circle cx="17.727" cy="10.125" r="3.375" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
<path d="M15.813 15.068a5.526 5.526 0 017.437 5.182" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
</svg>
|
|
<span>멤버</span>
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
class="admin-layout__nav-link flex items-center gap-3 rounded-md px-3 py-2 transition-colors hover:bg-[#eceff2] hover:text-[#15171a]"
|
|
:class="isAdminNavActive('/admin/settings') ? 'bg-[#e9ecef] text-[#15171a]' : ''"
|
|
to="/admin/settings"
|
|
>
|
|
<svg class="admin-layout__nav-icon h-4 w-4 shrink-0" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M10.546 2.438a1.957 1.957 0 002.908 0L14.4 1.4a1.959 1.959 0 013.41 1.413l-.071 1.4a1.958 1.958 0 002.051 2.054l1.4-.071a1.959 1.959 0 011.41 3.41l-1.042.94a1.96 1.96 0 000 2.909l1.042.94a1.959 1.959 0 01-1.413 3.41l-1.4-.071a1.958 1.958 0 00-2.056 2.056l.071 1.4A1.959 1.959 0 0114.4 22.6l-.941-1.041a1.959 1.959 0 00-2.908 0L9.606 22.6A1.959 1.959 0 016.2 21.192l.072-1.4a1.958 1.958 0 00-2.056-2.056l-1.4.071A1.958 1.958 0 011.4 14.4l1.041-.94a1.96 1.96 0 000-2.909L1.4 9.606A1.958 1.958 0 012.809 6.2l1.4.071a1.958 1.958 0 002.058-2.06L6.2 2.81A1.959 1.959 0 019.606 1.4z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
<circle cx="12" cy="12.001" r="4.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
</svg>
|
|
<span>설정</span>
|
|
</NuxtLink>
|
|
<button class="admin-layout__logout mt-4 rounded-md px-3 py-2 text-left text-[#8a929d] transition-colors hover:bg-[#eceff2] hover:text-[#15171a]" type="button" @click="logoutAdmin">
|
|
로그아웃
|
|
</button>
|
|
</nav>
|
|
</aside>
|
|
<main
|
|
class="admin-layout__main bg-paper"
|
|
:class="[
|
|
isPostEditorRoute ? 'h-screen overflow-hidden' : 'min-h-screen px-8 py-8 xl:px-12 xl:py-10',
|
|
{ 'lg:ml-80': !isPostEditorRoute }
|
|
]"
|
|
>
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</template>
|