- 헤더에 내 아바타(계정정보 링크) + 앱 시작 시 프로필 동기화(재로그인 없이 아바타/포인트) - 목록: 인기 글 상단 배지(🔥), 비추천 20+ 블라인드 표시 - 상세: 본인 글/댓글 추천·비추천 비활성, 비추천 20+ 글/댓글 블라인드(그래도 보기) - 댓글: 인기 댓글 배지, 본문 작성자에 작성자 뱃지, 목록 하단 새로고침 버튼(입력폼 위) - 추천자 목록 가로 줄바꿈(아바타+이름 단위, 이름 안 잘리게) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { RouterLink, useRouter, useRoute } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useUiStore } from '@/stores/ui'
|
||||
import { boardLabel } from '@/constants/boards'
|
||||
import IconBtn from '@/components/ui/IconBtn.vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const ui = useUiStore()
|
||||
@@ -55,7 +56,15 @@ async function handleLogout() {
|
||||
|
||||
<div class="header-right">
|
||||
<template v-if="auth.isAuthenticated">
|
||||
<span class="username">{{ auth.user?.name || auth.user?.loginId }}님</span>
|
||||
<RouterLink to="/settings/account" class="me" title="계정정보">
|
||||
<UserAvatar
|
||||
:name="auth.user?.name || auth.user?.loginId"
|
||||
:google-picture="auth.user?.googlePicture"
|
||||
:profile-image="auth.user?.profileImage"
|
||||
:size="26"
|
||||
/>
|
||||
<span class="username">{{ auth.user?.name || auth.user?.loginId }}님</span>
|
||||
</RouterLink>
|
||||
<IconBtn icon="logout" title="로그아웃" @click="handleLogout" />
|
||||
</template>
|
||||
<IconBtn v-else icon="login" title="로그인" variant="primary" @click="ui.openLogin()" />
|
||||
@@ -105,9 +114,24 @@ async function handleLogout() {
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.me {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.me:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
.username {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
/* 좁은 폰 화면: 이름 숨기고 아바타만 */
|
||||
.username {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hamburger {
|
||||
|
||||
Reference in New Issue
Block a user