File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div id="google_translate_element" style="display: none;"></div>
<div v-if="isAdminPage" v-cloak class="admin-wrap">
<AdminHeader />
<AdminMenu />
<div class="main-warp">
<PageNavigationBar :className="'admin-navigation pd10 pl30'" />
<div class="router-wrap">
<router-view />
</div>
</div>
</div>
<div v-else v-cloak class="user-wrap relative">
<div id="skip">
<a href="#mainContent" class="skip-navigation">본문내용 바로가기</a>
<a href="#mainNav" class="skip-navigation">메인메뉴 바로가기</a>
</div>
<UserHeader :className="fixedHeader" v-if="
(this.$route.path.startsWith('/aidt') || this.$route.path === '/cmmn/join.page')
// && this.$store.state.authorization != null
" />
<!-- <UserHeader v-if="this.$route.path.startsWith('/company') || this.$route.path.startsWith('/government')" /> -->
<main class="main-warp" id="mainContent">
<router-view />
</main>
<Footer v-if="
(this.$route.path.startsWith('/aidt') || this.$route.path === '/cmmn/join.page')
" />
<button class="top-scroll radius" aria-label="scroll move top button" id="scrollMoveTop" @click="scrollToTop"
v-if="this.$route.path.startsWith('/aidt')"><svg-icon type="mdi" :path="path" role="img"
aria-labelledby="scrollMoveTop"></svg-icon></button>
</div>
<LoadingSpinner></LoadingSpinner>
</template>
<script>
import UserHeader from "../layout/UserHeader.vue";
import AdminHeader from "../layout/AdminHeader.vue";
import AdminMenu from "../layout/AdminMenu.vue";
import Footer from "../layout/Footer.vue"
import LoadingSpinner from "../component/loading/LoadingSpinner.vue"
import PageNavigationBar from "../component/pagenavigationbar/PageNavigationBar.vue";
import { nextTick } from "vue";
import { mdiChevronUp } from '@mdi/js';
import COMMON_UTIL from "../../resources/js/commonUtil";
import { addLicense } from "@amcharts/amcharts5";
const App = {
data: () => {
return {
fixedHeader: '',
scrollPosition: 0,
path: mdiChevronUp,
};
},
created() {
this.$initCmmnMessage();
},
methods: {
handleScroll: function () {
this.scrollPosition = window.scrollY;
if (this.scrollPosition > 0) {
this.fixedHeader = 'fixed'
} else {
this.fixedHeader = ''
}
},
scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth' // 부드럽게 스크롤
});
},
//웹접근성 관련 화살표 이벤트
handleKeydown(event) {
const { key } = event;
const activeElement = document.activeElement;
if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
const cursorPos = activeElement.selectionStart;
const valueLength = activeElement.value.length;
if (key === 'ArrowLeft' && cursorPos > 0) return;
if (key === 'ArrowRight' && cursorPos < valueLength) return;
if (key === 'ArrowUp' || key === 'ArrowDown') return;
}
if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'ArrowRight' || key === 'ArrowLeft') {
event.preventDefault();
this.navigateWithArrowKeys(key);
}
},
navigateWithArrowKeys(key) {
const focusableElements = COMMON_UTIL.getFocusableElements();
let currentIndex = focusableElements.indexOf(document.activeElement);
if (key === 'ArrowDown' || key === 'ArrowRight') {
currentIndex = (currentIndex + 1) % focusableElements.length;
} else if (key === 'ArrowUp' || key === 'ArrowLeft') {
currentIndex = (currentIndex - 1 + focusableElements.length) % focusableElements.length;
}
focusableElements[currentIndex].focus();
},
},
watch: {},
computed: {
isAdminPage() {
// 현재 URL을 기반으로 사용자와 관리자 페이지 여부를 판단
return this.$route && this.$route.path.startsWith("/kdm");
},
},
components: {
UserHeader: UserHeader,
AdminHeader: AdminHeader,
AdminMenu: AdminMenu,
Footer: Footer,
LoadingSpinner: LoadingSpinner,
PageNavigationBar: PageNavigationBar
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
addLicense("AM5C11202011971121");
document.addEventListener('keydown', this.handleKeydown);
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll);
document.removeEventListener('keydown', this.handleKeydown);
},
};
export default App;
</script>
<style scoped>
[v-cloak] {
display: none;
}
</style>