feat: 토너먼트 주최자 HostBadge 표시

apps/web/e2e/mocks/tournament.ts

@@ -87,6 +87,7 @@ export const MOCK_TOURNAMENT_PENDING: GetTournamentPendingResponseT = {
         nickname: '피키게스트',
         itemCount: 0,
         profileImage: MOCK_IMAGE_URLS.avatar,
+        isHost: true,
       },
     ],
   },

apps/web/src/app/tournament/[id]/_common/_types/tournamentResponse.ts

@@ -10,6 +10,7 @@ type TournamentParticipantT = {
   nickname: string;
   itemCount: number;
   profileImage: string;
+  isHost: boolean;
 };
 
 /** 서버가 브래킷에서 파생해 내려주는 대결 한 판 */

apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx

@@ -97,6 +97,7 @@ function TournamentCreateClient({ tournamentId }: TournamentCreateClientProps) {
       id: p.userId,
       name: p.nickname,
       imageUrl: p.profileImage,
+      isHost: p.isHost,
     },
     itemCount: p.itemCount,
   }));

apps/web/src/app/tournament/[id]/create/_components/participant-panel/ParticipantChip.tsx

@@ -1,6 +1,7 @@
 import UserProfile from '@/components/user-profile-group/UserProfile';
 import type { UserT } from '@/components/user-profile-group/userProfile.types';
 import { useGetMe } from '@/hooks/useGetMe';
+import { cn } from '@/utils/cn';
 
 type ParticipantChipProps = {
   user: UserT;
@@ -14,7 +15,7 @@ function ParticipantChip({ user, itemCount }: ParticipantChipProps) {
   return (
     <span className="inline-flex items-center gap-1.5 rounded-full border border-border-neutral-muted bg-bg-layer-default py-1 pr-3 pl-1 body-2-medium text-text-neutral-primary">
       <UserProfile user={user} className="border-0" />
-      <span>{isMe ? '나' : user.name}</span>
+      <span className={cn(user.isHost && 'ml-1.5')}>{isMe ? '나' : user.name}</span>
       <span className="body-2-semibold text-text-neutral-secondary">{itemCount}개</span>
     </span>
   );

apps/web/src/app/tournament/[id]/result/_types/groupResult.ts

@@ -2,6 +2,7 @@ type GroupResultParticipantT = {
   userId: string;
   nickname: string;
   profileImage: string;
+  isHost: boolean;
 };
 
 export type GroupResultItemT = {

apps/web/src/app/tournament/[id]/result/group/_components/GroupResultClient.tsx

@@ -13,6 +13,7 @@ import {
 import PikiLogo from '@/assets/images/piki-logo-cart.svg';
 import ReceiptZigzag from '@/assets/images/tournament/result/receipt-zigzag.svg';
 import TrophyBadge from '@/assets/images/tournament/result/trophy-badge.svg';
+import HostBadge from '@/components/common/host-badge';
 import Spinner from '@/components/spinner';
 import { ROUTES } from '@/consts/route';
 import { useBackWithFallback } from '@/hooks/useBackWithFallback';
@@ -283,15 +284,22 @@ function GroupProductCard({ item, highlight = false }: GroupProductCardProps) {
               key={chooser.userId}
               className="flex items-center gap-1.5 rounded-full bg-gray-50 py-1 pr-3 pl-1"
             >
-              <Image
-                src={chooser.profileImage}
-                alt={chooser.nickname}
-                width={20}
-                height={20}
-                className="size-5 rounded-full bg-gray-50 object-cover"
-                unoptimized
-              />
-              <span className="caption-1-semibold text-text-neutral-primary">
+              <span className="relative shrink-0">
+                <Image
+                  src={chooser.profileImage}
+                  alt={chooser.nickname}
+                  width={20}
+                  height={20}
+                  className="size-5 rounded-full bg-gray-50 object-cover"
+                  unoptimized
+                />
+                {chooser.isHost && (
+                  <span className="pointer-events-none absolute -bottom-px -right-1.5">
+                    <HostBadge />
+                  </span>
+                )}
+              </span>
+              <span className={cn('caption-1-semibold text-text-neutral-primary', chooser.isHost && 'ml-1.5')}>
                 {chooser.nickname}
               </span>
             </li>

apps/web/src/components/common/host-badge/index.tsx

@@ -0,0 +1,7 @@
+import HostBadgeSvg from '@/assets/images/host-badge.svg';
+
+function HostBadge() {
+  return <HostBadgeSvg aria-label="주최자" role="img" />;
+}
+
+export default HostBadge;

apps/web/src/components/user-profile-group/UserProfile.tsx

@@ -1,5 +1,6 @@
 import Image from 'next/image';
 
+import HostBadge from '@/components/common/host-badge';
 import { cn } from '@/utils/cn';
 
 import type { UserT } from './userProfile.types';
@@ -10,7 +11,7 @@ type UserProfileProps = {
 };
 
 function UserProfile({ user, className }: UserProfileProps) {
-  return (
+  const profileImage = (
     <span
       className={cn(
         'relative block size-6.75 shrink-0 overflow-hidden rounded-full border-[1.6px] border-white',
@@ -26,6 +27,17 @@ function UserProfile({ user, className }: UserProfileProps) {
       />
     </span>
   );
+
+  if (!user.isHost) return profileImage;
+
+  return (
+    <span className="relative inline-block shrink-0">
+      {profileImage}
+      <span className="pointer-events-none absolute -bottom-px -right-1.5">
+        <HostBadge />
+      </span>
+    </span>
+  );
 }
 
 export default UserProfile;

apps/web/src/components/user-profile-group/userProfile.types.ts

@@ -2,4 +2,5 @@ export type UserT = {
   id: string;
   name: string;
   imageUrl: string;
+  isHost?: boolean;
 };