Haewon Kam
63717f5eb9
GNB "상담 신청" 이 기본 상태에서 버튼으로 인식되지 않았다. 채움이 없고 테두리는 사실상 안 보여서, 남는 건 흰 글자와 화살표뿐 — 옆 nav 링크와 구분될 근거가 없었다. 테두리를 stage-line(#1E2A52)으로 잡은 게 원인이다. 그 색은 무대 바닥(#070E24) 위 카드용인데, 헤더는 방사형 그라데이션의 광원부(#16205A)에 앉는다. 같은 색 가족이라 하필 헤더 자리에서만 선이 배경에 묻힌다. 수정 전 테두리 대비 1.09:1 (배경과 사실상 동일) 수정 후 테두리 대비 3.56:1 (WCAG 1.4.11 UI 경계 3:1 통과) 무대색 토큰 대신 흰색 알파로 잡았다 — 무대 어디에 놓여도 같이 성립한다. 옅은 채움(white/10)도 함께 준다. "누를 수 있는 것"은 테두리보다 면이 더 강하게 전달한다. 히어로 "도입 문의" 도 같은 변형이라 함께 해결된다. 1차 CTA(파란 채움)와의 위계는 그대로다. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
57 lines
3.1 KiB
TypeScript
57 lines
3.1 KiB
TypeScript
import * as React from "react"
|
|
import { cva, type VariantProps } from "class-variance-authority"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
// CTA 버튼 토큰. 랜딩의 CTA 는 전부 앵커 스크롤이라 href 를 주면 <a> 로 렌더한다
|
|
// (SSG 특성상 하이드레이션 전에도 동작).
|
|
const buttonVariants = cva(
|
|
/* transition-colors 로 좁힌다. transition-all 이면 헤더 CTA 가 무대↔라이트로 variant 를
|
|
통째로 바꿀 때 배경이 투명에서 차오르며 플리커로 읽힌다. */
|
|
"inline-flex items-center justify-center gap-2 transition-colors duration-200 cursor-pointer disabled:opacity-50",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
primary: "bg-primary hover:bg-primary-deep text-white",
|
|
secondary: "bg-fill hover:bg-fill-hover text-ink-soft hover:text-ink",
|
|
// 밝은 배경 위 반투명 보조 버튼 (글라스 히어로)
|
|
glass: "bg-white/70 hover:bg-white text-ink-soft hover:text-ink border border-white shadow-sm",
|
|
// 다크 무대 위 1차 CTA
|
|
stage: "bg-primary hover:bg-primary-deep text-white",
|
|
/* 다크 무대 위 2차 CTA — 흰 알약.
|
|
테두리를 stage-line(#1E2A52)으로 두면 안 된다. 그 색은 무대 바닥(#070E24) 위
|
|
카드용이라, 방사형 광원부(#16205A)에 앉는 GNB 자리에서는 배경과 대비가 1.09:1 로
|
|
사라진다. 채움도 없으면 남는 건 흰 글자뿐이라 옆 nav 링크와 구분되지 않는다.
|
|
그래서 무대색 토큰이 아니라 흰색 알파로 잡는다 — 무대 어디에 놓여도 같이 성립한다.
|
|
옅은 채움이 테두리보다 "누를 수 있는 것"을 더 강하게 전달하므로 둘 다 준다. */
|
|
stageGhost: "bg-white/10 hover:bg-white text-white hover:text-stage border border-white/40 hover:border-white",
|
|
},
|
|
/* 레퍼런스(statworx) 실측: 10.4px / 600 / 알약(radius 39px) / 패딩 12·24 / 높이 33px.
|
|
작고 조밀한 버튼이 확신 있어 보인다 — 크고 굵은 버튼은 설득이 아니라 호소로 읽힌다.
|
|
한글 보정: 10.4px 는 판독이 어려워 12~13px 로 올리고 높이도 터치 타깃까지 확보한다.
|
|
(기존 주석의 "알약형 금지" 규칙은 레퍼런스 채택으로 폐기했다.) */
|
|
size: {
|
|
pill: "px-5 py-2.5 text-[12px] font-semibold rounded-full",
|
|
md: "px-6 py-3 text-[12px] font-semibold rounded-full",
|
|
lg: "px-7 py-3.5 text-[13px] font-semibold rounded-full",
|
|
xl: "px-8 py-4 text-[14px] font-semibold rounded-full",
|
|
stageRound: "px-7 py-3.5 text-[13px] font-semibold rounded-full",
|
|
},
|
|
},
|
|
defaultVariants: { variant: "primary", size: "lg" },
|
|
},
|
|
)
|
|
|
|
type ButtonProps = VariantProps<typeof buttonVariants> &
|
|
React.ButtonHTMLAttributes<HTMLButtonElement> &
|
|
React.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
href?: string
|
|
}
|
|
|
|
function Button({ className, variant, size, href, ...props }: ButtonProps) {
|
|
const Comp: React.ElementType = href ? "a" : "button"
|
|
return <Comp href={href} className={cn(buttonVariants({ variant, size }), className)} {...props} />
|
|
}
|
|
|
|
export { Button, buttonVariants }
|