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.nickname} - + + {chooser.nickname} + {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; };