109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
interface LogoProps {
|
|
className?: string;
|
|
variant?: "symbol" | "full";
|
|
/** 배경과 섞이는 모드 (홈 화면 등). 로고가 흰색으로 표시됩니다. */
|
|
blendWithBackground?: boolean;
|
|
}
|
|
|
|
export function Logo({
|
|
className,
|
|
variant = "full",
|
|
blendWithBackground = false,
|
|
}: LogoProps) {
|
|
// 색상 클래스 정의
|
|
const mainColorClass = blendWithBackground
|
|
? "fill-brand-500 stroke-brand-500" // 배경 혼합 모드에서도 심볼은 브랜드 컬러 유지
|
|
: "fill-brand-600 stroke-brand-600 dark:fill-brand-500 dark:stroke-brand-500";
|
|
|
|
return (
|
|
<div
|
|
className={cn("relative flex items-center gap-2 select-none", className)}
|
|
aria-label="JOORIN-E Logo"
|
|
>
|
|
<svg
|
|
viewBox="0 0 100 100"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={cn(
|
|
"shrink-0",
|
|
variant === "full" ? "h-10 w-10" : "h-full w-full",
|
|
)}
|
|
>
|
|
<defs>
|
|
{/* Mask for the cutout effect around the arrow */}
|
|
<mask id="arrow-cutout">
|
|
<rect width="100%" height="100%" fill="white" />
|
|
<path
|
|
d="M10 75 C 35 45, 55 85, 90 25"
|
|
fill="none"
|
|
stroke="black"
|
|
strokeWidth="12"
|
|
strokeLinecap="round"
|
|
/>
|
|
{/* Arrow Head Cutout */}
|
|
<path
|
|
d="M90 25 L 78 32 L 85 42 Z"
|
|
fill="black"
|
|
stroke="black"
|
|
strokeWidth="6"
|
|
strokeLinejoin="round"
|
|
transform="rotate(-15 90 25)"
|
|
/>
|
|
</mask>
|
|
</defs>
|
|
|
|
{/* ========== BARS (Masked) ========== */}
|
|
<g
|
|
mask="url(#arrow-cutout)"
|
|
className={
|
|
blendWithBackground
|
|
? "fill-brand-500" // 배경 혼합 모드에서도 브랜드 컬러 사용
|
|
: "fill-brand-600 dark:fill-brand-500"
|
|
}
|
|
>
|
|
{/* Bar 1 (Left, Short) */}
|
|
<rect x="15" y="45" width="18" height="40" rx="4" />
|
|
{/* Bar 2 (Middle, Medium) */}
|
|
<rect x="41" y="30" width="18" height="55" rx="4" />
|
|
{/* Bar 3 (Right, Tall) */}
|
|
<rect x="67" y="10" width="18" height="75" rx="4" />
|
|
</g>
|
|
|
|
{/* ========== ARROW (Foreground) ========== */}
|
|
<g className={mainColorClass}>
|
|
{/* Arrow Path */}
|
|
<path
|
|
d="M10 75 C 35 45, 55 85, 90 25"
|
|
fill="none"
|
|
strokeWidth="7"
|
|
strokeLinecap="round"
|
|
/>
|
|
{/* Arrow Head */}
|
|
<path
|
|
d="M90 25 L 78 32 L 85 42 Z"
|
|
fill="currentColor"
|
|
stroke="none"
|
|
transform="rotate(-15 90 25)"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
|
|
{/* ========== TEXT (Optional) ========== */}
|
|
{variant === "full" && (
|
|
<span
|
|
className={cn(
|
|
"font-heading font-semibold tracking-tight",
|
|
blendWithBackground
|
|
? "text-white opacity-95"
|
|
: "text-brand-900 dark:text-brand-50",
|
|
)}
|
|
style={{ fontSize: "1.35rem" }}
|
|
>
|
|
JOORIN-E
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|