feat: 앱 하단 내비게이션·설정/계정정보·가입정보 변경 + 프론트 테스트·CI 게이트

- 하단 내비게이션(뒤로/앞으로/홈/새로고침/설정), 사이드바 홈 제거 - 설정 화면: 계정정보·앱 버전(package.json)·App Data 삭제 - 가입정보 변경: 비밀번호 재인증 → 이름/이메일 수정 - 로그인 후 대시보드(/) 이동, 로그인 전 햄버거·네이버 로그인 버튼 숨김 - Vitest 도입(32): authApi/accountApi 와이어링, auth/ui 스토어, 로그인 플로우 - CI(.gitea): npm test 게이트 추가 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-06 14:08:01 +09:00
parent c5e4c2dad7
commit c9ff605ac9
22 changed files with 2467 additions and 15 deletions
@@ -0,0 +1,145 @@
+<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')
+}
+function goBack() {
+  router.push('/settings')
+}
+</script>
+
+<template>
+  <div class="account-info">
+    <button type="button" class="back" @click="goBack">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M19 12H5" /><path d="M12 19l-7-7 7-7" />
+      </svg>
+      <span>설정</span>
+    </button>
+
+    <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>