ByungCheol
b737720d29
CI / build (push) Failing after 13m55s
- 본문 폭: --page-max(760px) 변수 + .layout-body>* 전역 규칙으로 일관화 (각 뷰가 제각각 두던 root max-width 대체) - 화면 내 '뒤로가기/가계부로/목록' 버튼 제거(하단 내비 뒤로가기는 유지) 대상: 계좌/분류/예산/고정지출/태그/기본분류/게시글상세/계정정보 - BoardDetail actions 우측 정렬, AccountInfo 미사용 goBack 제거 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
136 lines
3.0 KiB
Vue
136 lines
3.0 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
|
|
const auth = useAuthStore()
|
|
const router = useRouter()
|
|
|
|
const u = computed(() => auth.user || {})
|
|
const isLocal = computed(() => (u.value.provider || 'LOCAL') === 'LOCAL')
|
|
|
|
const providerLabel = computed(() => {
|
|
switch (u.value.provider) {
|
|
case 'NAVER': return '네이버'
|
|
case 'LOCAL':
|
|
default: return '일반(아이디/비밀번호)'
|
|
}
|
|
})
|
|
const roleLabel = computed(() => (u.value.role === 'ADMIN' ? '관리자' : '일반회원'))
|
|
|
|
function goEdit() {
|
|
router.push('/settings/account/edit')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="account-info">
|
|
<h1 class="page-title">계정정보</h1>
|
|
|
|
<section class="card">
|
|
<div class="row">
|
|
<span class="k">아이디</span>
|
|
<span class="v">{{ u.loginId || '-' }}</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="k">이름</span>
|
|
<span class="v">{{ u.name || '-' }}</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="k">이메일</span>
|
|
<span class="v">{{ u.email || '-' }}</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="k">가입유형</span>
|
|
<span class="v">{{ providerLabel }}</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="k">권한</span>
|
|
<span class="v">{{ roleLabel }}</span>
|
|
</div>
|
|
</section>
|
|
|
|
<button v-if="isLocal" type="button" class="primary-btn" @click="goEdit">정보변경</button>
|
|
<p v-else class="hint">소셜 로그인 계정은 앱에서 가입정보를 변경할 수 없습니다.</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.account-info {
|
|
max-width: 560px;
|
|
margin: 0 auto;
|
|
}
|
|
.back {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
margin-bottom: 0.75rem;
|
|
padding: 0.3rem 0.1rem;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
opacity: 0.75;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
}
|
|
.back:hover {
|
|
opacity: 1;
|
|
}
|
|
.back svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.page-title {
|
|
font-size: 1.4rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.card {
|
|
background: var(--color-background-soft);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 0.95rem 1.1rem;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
.k {
|
|
font-size: 0.88rem;
|
|
opacity: 0.65;
|
|
}
|
|
.v {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
text-align: right;
|
|
word-break: break-all;
|
|
}
|
|
.primary-btn {
|
|
width: 100%;
|
|
margin-top: 1.25rem;
|
|
padding: 0.8rem 1rem;
|
|
border: 1px solid hsla(160, 100%, 37%, 1);
|
|
border-radius: 8px;
|
|
background: hsla(160, 100%, 37%, 1);
|
|
color: #fff;
|
|
font-size: 0.98rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
.primary-btn:hover {
|
|
background: hsla(160, 100%, 32%, 1);
|
|
}
|
|
.hint {
|
|
margin-top: 1.25rem;
|
|
font-size: 0.85rem;
|
|
opacity: 0.6;
|
|
text-align: center;
|
|
}
|
|
</style>
|