feat: 계정정보 프로필 사진 — 구글 아바타 우선 + 변경/되돌리기

- 아바타 표시 우선순위: 사용자 지정(profileImage) > 구글(googlePicture) > 이니셜 - 사진 변경: 이미지 선택 → 정사각형 크롭·192px 축소(JPEG) → PUT /auth/profile-image - 되돌리기: 사용자 지정 사진 해제 → 구글 사진(없으면 이니셜)으로 폴백 - authApi.updateProfileImage 추가, utils/avatar.js(표시 소스/이니셜/다운스케일) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-28 11:39:48 +09:00
parent 24ab91b257
commit 7855298eac
3 changed files with 226 additions and 1 deletions
@@ -35,4 +35,8 @@ export const authApi = {
  updateProfile(payload) {
    return http.put('/auth/profile', payload)
  },
+  // 프로필 사진 변경/해제 — image 가 null/빈값이면 해제(구글 사진으로 폴백)
+  updateProfileImage(image) {
+    return http.put('/auth/profile-image', { image })
+  },
 }
@@ -0,0 +1,55 @@
+// 프로필 아바타 유틸 — 표시 우선순위(커스텀 > 구글 > 이니셜)와 업로드용 다운스케일.
+
+/**
+ * 표시할 아바타 이미지 소스를 고른다.
+ * 우선순위: 사용자 지정(profileImage) > 구글 아바타(googlePicture) > null(이니셜 폴백)
+ */
+export function avatarSrc(user) {
+  if (!user) return null
+  return user.profileImage || user.googlePicture || null
+}
+
+/** 이름/아이디에서 이니셜(첫 글자) 한 글자 — 이미지 없을 때 폴백 */
+export function avatarInitial(user) {
+  const s = (user?.name || user?.loginId || '').trim()
+  return s ? s[0].toUpperCase() : '?'
+}
+
+/**
+ * 업로드용으로 이미지 파일을 정사각형으로 크롭·축소해 JPEG data URL 로 변환한다.
+ * (서버/로컬 저장 용량을 작게 — 기본 192px)
+ */
+export function fileToAvatarDataUrl(file, size = 192, quality = 0.85) {
+  return new Promise((resolve, reject) => {
+    if (!file || !file.type?.startsWith('image/')) {
+      reject(new Error('이미지 파일이 아닙니다.'))
+      return
+    }
+    const url = URL.createObjectURL(file)
+    const img = new Image()
+    img.onload = () => {
+      try {
+        const canvas = document.createElement('canvas')
+        canvas.width = size
+        canvas.height = size
+        const ctx = canvas.getContext('2d')
+        // 중앙 정사각형 크롭(cover)
+        const min = Math.min(img.width, img.height)
+        const sx = (img.width - min) / 2
+        const sy = (img.height - min) / 2
+        ctx.drawImage(img, sx, sy, min, min, 0, 0, size, size)
+        const dataUrl = canvas.toDataURL('image/jpeg', quality)
+        URL.revokeObjectURL(url)
+        resolve(dataUrl)
+      } catch (e) {
+        URL.revokeObjectURL(url)
+        reject(e)
+      }
+    }
+    img.onerror = () => {
+      URL.revokeObjectURL(url)
+      reject(new Error('이미지를 읽지 못했습니다.'))
+    }
+    img.src = url
+  })
+}
@@ -1,16 +1,69 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { RouterLink, useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
+import { authApi } from '@/api/authApi'
+import { useDialog } from '@/composables/dialog'
+import { avatarSrc, avatarInitial, fileToAvatarDataUrl } from '@/utils/avatar'

 const auth = useAuthStore()
 const router = useRouter()
+const dialog = useDialog()

 const u = computed(() => auth.user || {})
 const roleLabel = computed(() => (u.value.role === 'ADMIN' ? '관리자' : '일반회원'))
 const isPremium = computed(() => auth.isPremium)
 const planLabel = computed(() => (isPremium.value ? '유료 멤버십' : '무료'))

+// 아바타: 사용자 지정 > 구글 > 이니셜
+const avatar = computed(() => avatarSrc(u.value))
+const initial = computed(() => avatarInitial(u.value))
+const hasCustom = computed(() => !!u.value.profileImage)
+const hasGoogle = computed(() => !!u.value.googlePicture)
+
+const fileInput = ref(null)
+const savingImage = ref(false)
+const imgError = ref('')
+
+function pickImage() {
+  imgError.value = ''
+  fileInput.value?.click()
+}
+
+async function onImageFile(e) {
+  const file = e.target.files?.[0]
+  e.target.value = '' // 같은 파일 다시 선택 가능하도록 초기화
+  if (!file) return
+  savingImage.value = true
+  imgError.value = ''
+  try {
+    const dataUrl = await fileToAvatarDataUrl(file)
+    const updated = await authApi.updateProfileImage(dataUrl)
+    await auth.applyUser(updated)
+  } catch (err) {
+    imgError.value = err.response?.data?.message || '사진 변경에 실패했습니다.'
+  } finally {
+    savingImage.value = false
+  }
+}
+
+async function resetImage() {
+  const msg = hasGoogle.value
+    ? '사용자 지정 사진을 지우고 구글 사진으로 되돌릴까요?'
+    : '사용자 지정 사진을 지울까요?'
+  if (!(await dialog.confirm(msg, { title: '사진 되돌리기' }))) return
+  savingImage.value = true
+  imgError.value = ''
+  try {
+    const updated = await authApi.updateProfileImage(null)
+    await auth.applyUser(updated)
+  } catch (err) {
+    imgError.value = err.response?.data?.message || '사진 되돌리기에 실패했습니다.'
+  } finally {
+    savingImage.value = false
+  }
+}
+
 function goEdit() {
  router.push('/settings/account/edit')
 }
@@ -19,6 +72,30 @@ function goEdit() {
 <template>
  <div class="account-info">

+    <!-- 프로필 사진 -->
+    <div class="avatar-block">
+      <button type="button" class="avatar-btn" :disabled="savingImage" @click="pickImage" aria-label="프로필 사진 변경">
+        <img v-if="avatar" :src="avatar" class="avatar-img" alt="프로필 사진" referrerpolicy="no-referrer" />
+        <span v-else class="avatar-fallback">{{ initial }}</span>
+        <span class="avatar-cam" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
+            <circle cx="12" cy="13" r="4" />
+          </svg>
+        </span>
+      </button>
+      <div class="avatar-actions">
+        <button type="button" class="link-btn" :disabled="savingImage" @click="pickImage">
+          {{ savingImage ? '처리 중…' : '사진 변경' }}
+        </button>
+        <button v-if="hasCustom" type="button" class="link-btn muted" :disabled="savingImage" @click="resetImage">
+          {{ hasGoogle ? '구글 사진으로' : '기본으로' }}
+        </button>
+      </div>
+      <p v-if="imgError" class="avatar-err">{{ imgError }}</p>
+      <input ref="fileInput" type="file" accept="image/*" class="hidden-file" @change="onImageFile" />
+    </div>
+
    <section class="card">
      <div class="row">
        <span class="k">이름</span>
@@ -110,6 +187,95 @@ function goEdit() {
  font-weight: 600;
  color: hsla(160, 100%, 37%, 1);
 }
+.avatar-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.6rem;
+  margin-bottom: 1.25rem;
+}
+.avatar-btn {
+  position: relative;
+  width: 96px;
+  height: 96px;
+  border-radius: 50%;
+  border: 1px solid var(--color-border);
+  background: var(--color-background-soft);
+  padding: 0;
+  cursor: pointer;
+  overflow: visible;
+}
+.avatar-btn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.avatar-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+}
+.avatar-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: #fff;
+  background: hsla(160, 100%, 37%, 1);
+}
+.avatar-cam {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: hsla(160, 100%, 37%, 1);
+  border: 2px solid var(--color-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+.avatar-cam svg {
+  width: 16px;
+  height: 16px;
+}
+.avatar-actions {
+  display: flex;
+  gap: 0.85rem;
+  align-items: center;
+}
+.link-btn {
+  border: 0;
+  background: transparent;
+  color: hsla(160, 100%, 37%, 1);
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0.2rem 0.1rem;
+}
+.link-btn.muted {
+  color: var(--color-text);
+  opacity: 0.6;
+}
+.link-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.avatar-err {
+  font-size: 0.82rem;
+  color: #c0392b;
+  margin: 0;
+}
+.hidden-file {
+  display: none;
+}
 .primary-btn {
  width: 100%;
  margin-top: 1.25rem;