diff --git a/apps/web/e2e/mocks/tournament.ts b/apps/web/e2e/mocks/tournament.ts
index efb952d1a..fc632bbd5 100644
--- a/apps/web/e2e/mocks/tournament.ts
+++ b/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,
},
],
},
diff --git a/apps/web/src/app/tournament/[id]/_common/_types/tournamentResponse.ts b/apps/web/src/app/tournament/[id]/_common/_types/tournamentResponse.ts
index f35b56c78..6107042a9 100644
--- a/apps/web/src/app/tournament/[id]/_common/_types/tournamentResponse.ts
+++ b/apps/web/src/app/tournament/[id]/_common/_types/tournamentResponse.ts
@@ -10,6 +10,7 @@ type TournamentParticipantT = {
nickname: string;
itemCount: number;
profileImage: string;
+ isHost: boolean;
};
/** 서버가 브래킷에서 파생해 내려주는 대결 한 판 */
diff --git a/apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx b/apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx
index ebfde351b..2bdf9f894 100644
--- a/apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx
+++ b/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,
}));
diff --git a/apps/web/src/app/tournament/[id]/create/_components/participant-panel/ParticipantChip.tsx b/apps/web/src/app/tournament/[id]/create/_components/participant-panel/ParticipantChip.tsx
index 577bb8075..9c6d7d5e4 100644
--- a/apps/web/src/app/tournament/[id]/create/_components/participant-panel/ParticipantChip.tsx
+++ b/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 (
- {isMe ? '나' : user.name}
+ {isMe ? '나' : user.name}
{itemCount}개
);
diff --git a/apps/web/src/app/tournament/[id]/result/_types/groupResult.ts b/apps/web/src/app/tournament/[id]/result/_types/groupResult.ts
index 124f59787..5bd3ddfa2 100644
--- a/apps/web/src/app/tournament/[id]/result/_types/groupResult.ts
+++ b/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 = {
diff --git a/apps/web/src/app/tournament/[id]/result/group/_components/GroupResultClient.tsx b/apps/web/src/app/tournament/[id]/result/group/_components/GroupResultClient.tsx
index e9c6e1a25..959606641 100644
--- a/apps/web/src/app/tournament/[id]/result/group/_components/GroupResultClient.tsx
+++ b/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"
>
-
-
+
+
+ {chooser.isHost && (
+
+
+
+ )}
+
+
{chooser.nickname}
diff --git a/apps/web/src/assets/images/host-badge.svg b/apps/web/src/assets/images/host-badge.svg
new file mode 100644
index 000000000..95f3e27fe
--- /dev/null
+++ b/apps/web/src/assets/images/host-badge.svg
@@ -0,0 +1,4 @@
+
diff --git a/apps/web/src/components/common/host-badge/index.tsx b/apps/web/src/components/common/host-badge/index.tsx
new file mode 100644
index 000000000..0d362606b
--- /dev/null
+++ b/apps/web/src/components/common/host-badge/index.tsx
@@ -0,0 +1,7 @@
+import HostBadgeSvg from '@/assets/images/host-badge.svg';
+
+function HostBadge() {
+ return ;
+}
+
+export default HostBadge;
diff --git a/apps/web/src/components/user-profile-group/UserProfile.tsx b/apps/web/src/components/user-profile-group/UserProfile.tsx
index 87cddad95..01e1a9468 100644
--- a/apps/web/src/components/user-profile-group/UserProfile.tsx
+++ b/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 = (
);
+
+ if (!user.isHost) return profileImage;
+
+ return (
+
+ {profileImage}
+
+
+
+
+ );
}
export default UserProfile;
diff --git a/apps/web/src/components/user-profile-group/userProfile.types.ts b/apps/web/src/components/user-profile-group/userProfile.types.ts
index 9e8016fec..a348feafc 100644
--- a/apps/web/src/components/user-profile-group/userProfile.types.ts
+++ b/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;
};