Fix: Fix add header position

This commit is contained in:
jhynsoo 2024-05-22 15:24:05 +09:00
parent 49f56e5f39
commit 5f34cc0cff
4 changed files with 13 additions and 18 deletions

View File

@ -1,14 +1,13 @@
<script setup> <script setup>
import { RouterLink } from 'vue-router'; import { RouterLink } from 'vue-router';
import { useMemberStore } from "@/stores/memberStore"; import { useMemberStore } from '@/stores/memberStore';
import { storeToRefs } from "pinia"; import { storeToRefs } from 'pinia';
const memberStore = useMemberStore(); const memberStore = useMemberStore();
const { userLogout } = memberStore; const { userLogout } = memberStore;
const { isLogin } = storeToRefs(memberStore); const { isLogin } = storeToRefs(memberStore);
console.log("AppHeader.isLogin",isLogin.value) console.log('AppHeader.isLogin', isLogin.value);
const logout = () => { const logout = () => {
userLogout(); userLogout();
@ -26,20 +25,12 @@ const logout = () => {
<div class="item"><RouterLink :to="{ name: 'board' }">게시판</RouterLink></div> <div class="item"><RouterLink :to="{ name: 'board' }">게시판</RouterLink></div>
<template v-if="isLogin"> <template v-if="isLogin">
<router-link :to="{name: 'user-mypage'}"> <router-link :to="{ name: 'user-mypage' }"> 정보 </router-link>
정보 <router-link to="/" @click.prevent="logout"> 로그아웃 </router-link>
</router-link>
<router-link to="/" @click.prevent="logout">
로그아웃
</router-link>
</template> </template>
<template v-else> <template v-else>
<router-link :to="{name: 'user-login'}"> <router-link :to="{ name: 'user-login' }"> 로그인 </router-link>
로그인 <router-link :to="{ name: 'user-mypage' }"> 회원가입 </router-link>
</router-link>
<router-link :to="{name: 'user-mypage'}">
회원가입
</router-link>
</template> </template>
</div> </div>
</nav> </nav>
@ -48,7 +39,7 @@ const logout = () => {
<style scoped> <style scoped>
header { header {
position: sticky; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;

View File

@ -14,6 +14,6 @@ import AppHeader from '@/components/AppHeader.vue';
main { main {
max-width: 960px; max-width: 960px;
padding: 20px; padding: 20px;
margin: 0 auto; margin: 80px auto 0;
} }
</style> </style>

View File

@ -53,6 +53,9 @@ import { RouterLink } from 'vue-router';
</template> </template>
<style scoped> <style scoped>
main {
margin: 80px auto 0;
}
section { section {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -22,6 +22,7 @@ import SideBar from '@/components/search/SideBar.vue';
position: relative; position: relative;
width: 100%; width: 100%;
height: calc(100% - 80px); height: calc(100% - 80px);
margin: 80px 0 auto;
} }
main { main {