💄 Fix the event page & user avatar UI (#117)

### 📝 작업 내용

- 모바일 환경에서 참여자 페이지와 일정 상세 페이지의 참여자 미리보기 ui가 깨지는 문제를 수정했습니다.
- 아바타 미리보기 디자인을 `UserAvatar` 컴포넌트로 만들고 헤더, 참여자 미리보기, 참여자 페이지에 적용했습니다.

### 📸 스크린샷 (선택)

<img width="560" height="997" alt="스크린샷 2026-03-06 234933"
src="https://github.com/user-attachments/assets/be5e420e-c82a-4b05-844f-6186aae442f3"
/>
<img width="1901" height="1295" alt="스크린샷 2026-03-06 234940"
src="https://github.com/user-attachments/assets/611a3aa8-9204-4a55-884a-803e56300334"
/>
<img width="561" height="1000" alt="스크린샷 2026-03-06 234953"
src="https://github.com/user-attachments/assets/0b085c55-65b6-4176-9046-93a1b03074d9"
/>
<img width="1889" height="1296" alt="스크린샷 2026-03-06 234959"
src="https://github.com/user-attachments/assets/e69d3eb2-3df4-41bd-af26-a99a83df438b"
/>

### 🚀 리뷰 요구사항 (선택)

- 프로필 이미지가 없을 때 디자인은 임의로 만들어보았습니다. 혹시 어떠신가요..?
- 헤더 부분의 프로필 이미지 아바타도 환경에 따라 크기가 변하게 만들었습니다. 
- 헤더 높이가 변하면 다른 페이지에서 본문을 가리는 등 오류가 날까 싶어 기존 크기였던 64px로 고정했습니다.
그래서 사실 헤더 아바타 크기는 변하지 않아도 괜찮습니다. 웹에서 사용하는 크기를 보면 헤더가 너무 꽉 차있다는 생각이 들기도
해서 그냥 모바일 버전의 크기로 아바타를 고정할까요?
- 여러 작업을 수행할 때 서로 종속적인 내용이 없으면, 작업물2 브랜치를 작업물1 브랜치에서 만드는게 아니라 그냥
main(dev)를 기반으로 따로 만들라는 제미나이의 조언을 받아 이번 작업은
`feat/api-registragion-delete`이 아닌 `dev`를 기반으로 만들었습니다. 리뷰하기 더 편하시면 앞으로
이런 식으로 작업할게요.

---------

Co-authored-by: Park Junyoung <bloomwayz@snu.ac.kr>

Author: jun-0411

src/components/GuestsPreview.tsx

@@ -1,4 +1,4 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import UserAvatar from '@/components/UserAvatar';
 import type { UserPreview } from '@/types/events';
 import type { EventId } from '@/types/schemas';
 import { ChevronRightIcon } from 'lucide-react';
@@ -36,27 +36,19 @@ export default function GuestsPreview({
         </button>
 
         {/* 아바타 및 플러스 아이콘 배치 영역 */}
-        <div className="flex items-center justify-start gap-2.5">
+        <div className="flex items-center justify-start gap-1.5 sm:gap-3 min-w-0 flex-1">
           {/* 최대 5개의 아바타 노출 */}
           {guests.map((p) => (
-            <Avatar
+            <UserAvatar
               key={p.id}
-              title={p.name}
-              className="w-16 h-16 border-none shadow-sm"
-            >
-              <AvatarImage
-                src={p.profileImage ?? undefined}
-                className="object-cover"
-              />
-              <AvatarFallback className="bg-blue-100 text-primary text-sm font-bold">
-                {p.name?.slice(0, 2)}
-              </AvatarFallback>
-            </Avatar>
+              name={p.name}
+              imageUrl={p.profileImage ?? undefined}
+            />
           ))}
 
           {/* 조건부 플러스(+) 아이콘 (최대 6번째 자리에 배치) */}
           {showPlusIcon && (
-            <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center border border-gray-50 shadow-sm">
+            <div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-gray-100 flex items-center justify-center border border-gray-50 shadow-sm shrink-0">
               <span className="text-sm font-bold text-gray-500">
                 +{extraCount}
               </span>

src/components/Header.tsx

@@ -24,8 +24,8 @@ export default function Header() {
   }, [isLoggedIn, refreshUser]);
 
   return (
-    <header className="sticky top-0 z-40 flex w-full justify-center border bg-white">
-      <div className="flex w-full items-center justify-between px-6 py-4 sm:w-screen-sm md:w-screen-md lg:w-screen-lg xl:max-w-screen-xl">
+    <header className="sticky top-0 z-40 flex w-full h-16 justify-center border-b box-content bg-white">
+      <div className="flex w-full h-full items-center justify-between px-6 sm:w-screen-sm md:w-screen-md lg:w-screen-lg xl:max-w-screen-xl">
         <Link to="/" className="flex items-center space-x-2">
           <img src="/moiming-symbol.svg" alt="logo" />
           <p className="moiming">모이밍</p>

src/components/ProfileButton.tsx

@@ -1,4 +1,4 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import UserAvatar from '@/components/UserAvatar';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -30,10 +30,12 @@ export default function ProfileButton({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <button>
-          <Avatar className="border-2">
-            <AvatarImage src={user.profileImage} />
-            <AvatarFallback>CN</AvatarFallback>
-          </Avatar>
+          <UserAvatar
+            name={user.name}
+            imageUrl={user.profileImage}
+            className="w-8 h-8 sm:w-10 sm:h-10 border-2"
+            fallbackClassName="text-[10px] sm:text-[12px]"
+          />
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-40" align="end">

src/components/UserAvatar.tsx

@@ -0,0 +1,33 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+
+interface UserAvatarProps {
+  name?: string | null;
+  imageUrl?: string | null;
+  className?: string; // 컨테이너(Avatar)용 클래스
+  fallbackClassName?: string; // 이니셜(AvatarFallback)용 클래스
+}
+
+export default function UserAvatar({
+  name,
+  imageUrl,
+  className = '',
+  fallbackClassName = '',
+}: UserAvatarProps) {
+  return (
+    <Avatar
+      className={`w-12 h-12 sm:w-16 sm:h-16 border-none shadow-sm shrink-0 ${className}`.trim()}
+      title={name ?? undefined}
+    >
+      <AvatarImage
+        src={imageUrl ?? undefined}
+        alt={name ?? '사용자 아바타'}
+        className="object-cover"
+      />
+      <AvatarFallback
+        className={`bg-blue-100 text-primary text-xs sm:text-sm font-semibold ${fallbackClassName}`.trim()}
+      >
+        {name?.slice(0, 3)}
+      </AvatarFallback>
+    </Avatar>
+  );
+}

src/mocks/handlers/event.ts

@@ -60,7 +60,7 @@ export const eventHandlers = [
         name: `참여자 ${i + 1}`,
         email: i < 8 ? `user${i}@example.com` : null,
         status: i < 8 ? 'CONFIRMED' : 'WAITLISTED',
-        profileImage: 'https://github.com/shadcn.png',
+        profileImage: i != 1 ? 'https://github.com/shadcn.png' : undefined,
         createdAt: new Date().toISOString(),
         waitingNum: i >= 8 ? i - 7 : null,
       })),

src/routes/Guests.tsx

@@ -6,6 +6,7 @@ import { useNavigate, useParams } from 'react-router';
 import { toast } from 'sonner';
 import useInfiniteGuests from '../hooks/useInfiniteGuests';
 
+import UserAvatar from '@/components/UserAvatar';
 // shadcn UI 컴포넌트
 import {
   AlertDialog,
@@ -18,7 +19,6 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import type { GuestStatus } from '@/types/schemas';
 import { ChevronLeftIcon, Loader2 } from 'lucide-react';
@@ -118,24 +118,22 @@ export default function Guests() {
           page.participants.map((guest) => (
             <div
               key={guest.registrationId}
-              className="flex items-center justify-between w-full"
+              className="flex items-center justify-between w-full gap-2 sm:gap-4"
             >
-              <div className="flex items-center gap-4">
-                <Avatar className="w-16 h-16 border-none shadow-sm">
-                  <AvatarImage src={guest.profileImage || undefined} />
-                  <AvatarFallback className="bg-black text-white text-xs">
-                    {guest.name?.slice(0, 2)}
-                  </AvatarFallback>
-                </Avatar>
-                <div className="flex flex-col">
-                  <span className="text-xl font-bold text-black">
+              <div className="flex items-center gap-3 sm:gap-4 min-w-0 flex-1">
+                <UserAvatar name={guest.name} imageUrl={guest.profileImage} />
+
+                <div className="flex flex-col min-w-0 flex-1">
+                  <span className="text-lg sm:text-xl font-bold text-black truncate">
                     {guest.name}
                   </span>
                   {guest.email ? (
-                    <span className="text-gray-400 text-lg">{guest.email}</span>
+                    <span className="text-sm sm:text-lg text-gray-400 truncate">
+                      {guest.email}
+                    </span>
                   ) : null}
                   {guest.status === 'WAITLISTED' && (
-                    <span className="text-blue-400 text-lg font-semibold">
+                    <span className="text-sm sm:text-lg text-blue-400 font-semibold truncate">
                       대기 {guest.waitingNum}번
                     </span>
                   )}
@@ -148,7 +146,7 @@ export default function Guests() {
                   <AlertDialogTrigger asChild>
                     <Button
                       variant="secondary"
-                      className="bg-[#333333] hover:bg-black text-white rounded-lg px-4 py-6 text-base font-bold"
+                      className="bg-[#333333] hover:bg-black text-white rounded-lg px-3 py-2 sm:px-4 sm:py-3 h-auto text-sm sm:text-base font-bold shrink-0"
                     >
                       강제취소
                     </Button>