ANTOOZA-FRONTEND/app/component/PoweredByYouTube.tsx

/**
 * "Powered by YouTube" 표시 컴포넌트.
 *
 * YouTube API Services — Developer Policies 의 branding 요구사항 준수:
 * YouTube API 로 가져온 데이터가 표시되는 영역에 attribution(저작권 표시)을 함께 노출.
 *
 * 사용처:
 *  - 채널 상세 페이지 (구독자 수·영상 수·라이브 상태 표시 영역)
 *  - 라이브 시청자 수 표시 영역
 *  - 통합 채팅 (YouTube 출처 메시지 영역)
 *
 * 가이드라인: 공식 브랜드 색상(#FF0000) 사용, 최소 1.5em 높이, 가독성 있는 위치.
 */

type Props = {
	className?: string;
	size?: 'sm'|'md';
};

export default function PoweredByYouTube({ className, size = 'sm' }: Props)
{
	const height = size === 'sm' ? 14 : 18;
	const width = size === 'sm' ? 70 : 90;

	return (
		<span
			className={`inline-flex items-center gap-1 text-muted-foreground text-xs ${className ?? ''}`}
			aria-label="Powered by YouTube"
		>
			<span>Powered by</span>
			<svg
				width={width}
				height={height}
				viewBox="0 0 90 20"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
				role="img"
				aria-hidden="true"
			>
				<rect x="0" y="0" width="28" height="20" rx="4" fill="#FF0000"/>
				<path d="M11 6 L20 10 L11 14 Z" fill="#FFFFFF"/>
				<text x="32" y="15" fontFamily="Arial, Helvetica, sans-serif" fontSize="13" fontWeight="700" fill="currentColor">YouTube</text>
			</svg>
		</span>
	);
}