refactor: ScheduleAvatar 를 UserAvatar 어댑터로 정리 (Phase 3-4)

ScheduleAvatar 가 복제하던 이미지/실루엣 렌더링을 제거하고, 공용 UserAvatar 를
size(px)로 감싸는 얇은 래퍼로 전환. 아바타 표시 로직을 UserAvatar 단일 소스로 통일
(.sa 클래스는 상세 패널 스택 CSS 훅으로 유지, 사용처 변경 없음).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-22 23:57:22 +09:00
parent d3e2861440
commit 21cabbe20b
@@ -1,9 +1,10 @@
<script setup lang="ts">
// 일정 참석자 아바타 — 사이트 공용 UserAvatar 와 동일한 방식.
// 프로필 이미지가 있으면 사진, 없으면 사람 실루엣 placeholder(색상+이니셜 방식은 폐기).
import { computed } from 'vue'
// 일정 참석자 아바타 — 사이트 공용 UserAvatar 를 size(px)로 감싸는 얇은 어댑터.
// 렌더링(이미지/실루엣)은 UserAvatar 가 단일 책임지고, 여기선 크기/원형 래퍼만 담당.
// (.sa 클래스는 상세 패널 아바타 스택 CSS 의 훅으로 유지)
import UserAvatar from '@/components/UserAvatar.vue'
const props = withDefaults(
withDefaults(
defineProps<{
name?: string
avatarUrl?: string | null
@@ -11,52 +12,24 @@ const props = withDefaults(
}>(),
{ name: '', avatarUrl: null, size: 21 },
)
const dim = computed(() => `${props.size}px`)
</script>
<template>
<span
class="sa"
:style="{ width: dim, height: dim }"
:style="{ width: `${size}px`, height: `${size}px` }"
>
<img
v-if="avatarUrl"
class="sa-img"
:src="avatarUrl"
:alt="name || '프로필 이미지'"
>
<svg
v-else
class="sa-ph"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path d="M12 12.5a4.25 4.25 0 1 0 0-8.5 4.25 4.25 0 0 0 0 8.5Z" />
<path d="M4.5 19.25c0-3.04 3.36-5 7.5-5s7.5 1.96 7.5 5v.75H4.5v-.75Z" />
</svg>
<UserAvatar
:url="avatarUrl"
:name="name"
/>
</span>
</template>
<style scoped>
.sa {
display: grid;
place-items: center;
border-radius: 50%;
overflow: hidden;
background: #e5e7eb;
flex-shrink: 0;
}
.sa-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sa-ph {
width: 64%;
height: 64%;
color: #9aa1ac;
flex-shrink: 0;
border-radius: 50%;
}
</style>