import { MatchHistoryPanel } from '@/components/MatchHistoryPanel'; import { ResultRefreshButton } from '@/components/ResultRefreshButton'; import { ResultRequestWatcher } from '@/components/ResultRequestWatcher'; import { getSnapshot, getSnapshotMatches } from '@/lib/api'; import { getChampionDisplayNames } from '@/lib/champion-labels'; import { buildSummonerDetailPath } from '@/lib/routes'; import { getChampionSplashUrl, getChampionSquareUrl, getProfileIconUrl, } from '@/lib/lol-assets'; export async function SnapshotResultPageContent({ snapshotId, requestId = null, refreshError = null, stablePath = null, }: { snapshotId: string; requestId?: string | null; refreshError?: string | null; stablePath?: string | null; }) { const snapshot = await getSnapshot(snapshotId); const matchesResponse = await getSnapshotMatches(snapshotId, 0, 20).catch(() => null); const recentMatches = matchesResponse?.items ?? snapshot.recentMatches ?? []; const totalMatchCount = snapshot.totalMatchCount ?? matchesResponse?.total ?? recentMatches.length; const splashUrl = getChampionSplashUrl(snapshot.primaryChampionName); const squareUrl = getChampionSquareUrl(snapshot.primaryChampionName); const profileIconUrl = getProfileIconUrl(snapshot.profileIconId); const championDisplayNames = await getChampionDisplayNames([ snapshot.primaryChampionName, ...recentMatches.map((match) => match.championName), ]); const winCount = recentMatches.filter((match) => match.win).length; const lossCount = Math.max(0, recentMatches.length - winCount); const winRate = Math.round((winCount / Math.max(1, recentMatches.length)) * 100); const recentRecord = `${winCount}승 ${lossCount}패`; const currentSoloRank = snapshot.currentRanks?.solo ?? null; const currentFlexRank = snapshot.currentRanks?.flex ?? null; const soloRankLabel = formatRankLabel(currentSoloRank); const soloTierIcon = getTierIconUrl(currentSoloRank?.tier ?? null); const soloLeaguePoints = currentSoloRank?.leaguePoints ?? null; const soloRecord = currentSoloRank ? `${currentSoloRank.wins}승 ${currentSoloRank.losses}패` : '랭크 정보 없음'; const soloWinRate = currentSoloRank ? calculateWinRate(currentSoloRank.wins, currentSoloRank.losses) : null; const flexRankLabel = formatRankLabel(currentFlexRank); const flexTierIcon = getTierIconUrl(currentFlexRank?.tier ?? null); const flexRecord = currentFlexRank ? `${currentFlexRank.wins}승 ${currentFlexRank.losses}패` : '배치 전 또는 정보 없음'; const flexWinRate = currentFlexRank ? calculateWinRate(currentFlexRank.wins, currentFlexRank.losses) : null; const ggtiTokens = splitGgtiType(snapshot.ggtiType); const primaryGgtiType = ggtiTokens[0] ?? 'CARRY'; const ggtiCode = buildGgtiCode(ggtiTokens); const ggtiAccent = getGgtiAccent(primaryGgtiType); const dominantTraits = buildDominantTraitRows(snapshot.traitScores); const resolvedStablePath = stablePath ?? (snapshot.gameName && snapshot.tagLine ? buildSummonerDetailPath(snapshot.gameName, snapshot.tagLine) : null); const lastUpdated = snapshot.analyzedAt ? new Intl.DateTimeFormat('ko-KR', { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false, }).format(new Date(snapshot.analyzedAt)) : '갱신 정보 없음'; return (
{splashUrl ? (
) : null}
{profileIconUrl ? ( {`${snapshot.gameName ) : squareUrl ? ( {snapshot.primaryChampionName ) : (
G
)}
{snapshot.summonerLevel ? ( {snapshot.summonerLevel} ) : null}

{snapshot.gameName ?? '이름 없는 소환사'}

#{snapshot.tagLine ?? 'KR1'}
KR | {soloRankLabel} | 최근 {totalMatchCount}경기
라이엇 계정을 연동하면 프로필 설정과 공유 기능을 더 정확하게 사용할 수 있습니다.

최근 티어 이력 API와 저장 구조가 아직 없어 준비 중입니다.

{requestId ? (
) : null} {refreshError ? (
{refreshError}
) : null}
마지막 갱신: {lastUpdated}
{requestId ? ( ) : ( )}
); } function getQueryParam(value: string | string[] | undefined) { if (Array.isArray(value)) { return value[0] ?? null; } return value ?? null; } export default async function ResultPage({ params, searchParams, }: { params: Promise<{ snapshotId: string }>; searchParams: Promise<{ requestId?: string | string[]; refreshError?: string | string[]; }>; }) { const { snapshotId } = await params; const resolvedSearchParams = await searchParams; return ( ); } function GgtiSkeletonCard() { return ( ); } function formatRankLabel( rank: | { tier: string; rank: string; } | null | undefined, ) { if (!rank) return '언랭크'; return `${formatTierName(rank.tier)} ${formatRomanRank(rank.rank)}`.trim(); } function formatTierName(tier: string) { const labels: Record = { IRON: '아이언', BRONZE: '브론즈', SILVER: '실버', GOLD: '골드', PLATINUM: '플래티넘', EMERALD: '에메랄드', DIAMOND: '다이아몬드', MASTER: '마스터', GRANDMASTER: '그랜드마스터', CHALLENGER: '챌린저', }; return labels[tier] ?? tier; } function formatRomanRank(rank: string) { const labels: Record = { I: '1', II: '2', III: '3', IV: '4', }; return labels[rank] ?? rank; } function calculateWinRate(wins: number, losses: number) { return Math.round((wins / Math.max(1, wins + losses)) * 100); } function getTierIconUrl(tier: string | null) { if (!tier) return null; const slug = tier.toLowerCase(); const supported = new Set([ 'iron', 'bronze', 'silver', 'gold', 'platinum', 'emerald', 'diamond', 'master', 'grandmaster', 'challenger', ]); if (!supported.has(slug)) { return null; } return `https://opgg-static.akamaized.net/images/medals_new/${slug}.png?image=q_auto:good,f_webp,w_144&v=1777571117`; } function splitGgtiType(ggtiType: string) { return ggtiType .split('-') .map((value) => value.trim().toUpperCase()) .filter(Boolean); } function buildGgtiCode(types: string[]) { const codeMap: Record = { BAIT: 'BT', CARRY: 'CY', FARM: 'FM', LIMIT: 'LM', ROAM: 'RM', SAFE: 'SF', SHOT: 'ST', }; const first = codeMap[types[0] ?? ''] ?? 'GG'; const second = codeMap[types[1] ?? ''] ?? 'TI'; return `${first}${second}`; } function formatGgtiTypeLabel(type: string) { const labels: Record = { BAIT: '유도', CARRY: '캐리', FARM: '파밍', LIMIT: '리밋', ROAM: '로밍', SAFE: '안정', SHOT: '오더', }; return labels[type] ?? type; } function formatGgtiTokenPair(type: string) { const labels: Record = { BAIT: '심리 유도형', CARRY: '캐리 주도형', FARM: '성장 집중형', LIMIT: '한계 시험형', ROAM: '합류 순환형', SAFE: '안정 축적형', SHOT: '오더 집중형', }; return labels[type] ?? type; } function getGgtiAccent(type: string) { const accents: Record< string, { top: string; bottom: string; glow: string; bar: string } > = { BAIT: { top: '#313445', bottom: '#252838', glow: 'rgba(237,130,163,0.26)', bar: 'linear-gradient(90deg,#ff8db0 0%,#f25d91 100%)', }, CARRY: { top: '#2e3347', bottom: '#24293a', glow: 'rgba(255,178,92,0.24)', bar: 'linear-gradient(90deg,#ffcf7d 0%,#ff9150 100%)', }, FARM: { top: '#2a3646', bottom: '#232d3a', glow: 'rgba(112,175,255,0.22)', bar: 'linear-gradient(90deg,#7ca6ff 0%,#4e76ff 100%)', }, LIMIT: { top: '#332f45', bottom: '#25283b', glow: 'rgba(176,138,255,0.22)', bar: 'linear-gradient(90deg,#8f7cff 0%,#6a54f8 100%)', }, ROAM: { top: '#25394a', bottom: '#22313d', glow: 'rgba(88,220,210,0.2)', bar: 'linear-gradient(90deg,#63dfd7 0%,#3eb2d7 100%)', }, SAFE: { top: '#2f3746', bottom: '#27303c', glow: 'rgba(143,209,133,0.2)', bar: 'linear-gradient(90deg,#a7df86 0%,#67bb7d 100%)', }, SHOT: { top: '#373148', bottom: '#27283a', glow: 'rgba(247,188,100,0.2)', bar: 'linear-gradient(90deg,#ffcf76 0%,#e39a46 100%)', }, }; return ( accents[type] ?? { top: '#2e3341', bottom: '#252933', glow: 'rgba(83,131,232,0.18)', bar: 'linear-gradient(90deg,#7aa2ff 0%,#5b7fff 100%)', } ); } function buildDominantTraitRows(scores: { aggression: number; stability: number; roaming: number; vision: number; objective: number; growth: number; fightJoin: number; }) { const labels: Record = { aggression: '공격성', stability: '안정성', roaming: '로밍', vision: '시야', objective: '오브젝트', growth: '성장', fightJoin: '교전 합류', }; return Object.entries(scores) .sort((left, right) => right[1] - left[1]) .slice(0, 3) .map(([key, score]) => ({ key, label: labels[key] ?? key, score: Math.round(score), })); }