Feature/CDP-160-CTAButton

src/app/(marketing)/page.tsx

@@ -13,6 +13,7 @@ import { useState } from "react";
 export default function Home() {
   const [email, setEmail] = useState("");
   const [status, setStatus] = useState<InputStatus>("default");
+  const [isReady, setIsReady] = useState(false);
 
   return (
     <div className="flex flex-col justify-center items-center gap-8">
@@ -103,6 +104,18 @@ export default function Home() {
 
       <SignupGroupButton />
 
+      <Button
+        preset="cta"
+        disabled={!isReady} // false면 활성, true면 비활성
+        onClick={() => alert("다음 단계로 이동")}
+      >
+        선택 완료
+      </Button>
+
+      <Button preset="cta" disabled={false} onClick={() => setIsReady((prev) => !prev)}>
+        {isReady ? "선택 해제" : "활성화 토글"}
+      </Button>
+
       <SelectModuleCard
         kind="module" // "module" | "design"
         title="일간 플래너"

src/lib/variants/button.cta.ts

@@ -0,0 +1,37 @@
+import { cva } from "class-variance-authority";
+
+export const ctaButtonVariants = cva(
+  // 공통 베이스
+  [
+    "inline-flex items-center justify-center select-none",
+    "rounded-full px-14 py-4 t-16-m",
+    "transition-[background-color,color,box-shadow] duration-200 ease-out",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)]",
+    "will-change-[background-color,color,box-shadow]",
+  ].join(" "),
+  {
+    variants: {
+      /** 논리 상태: disabled(초기) | active(활성) */
+      state: {
+        /** 초기 비활성 — 회색 배경, 연한 텍스트 */
+        disabled: [
+          "bg-[var(--color-gray-400)]",
+          "text-[var(--color-gray-600)]",
+          "cursor-not-allowed",
+          "shadow-none",
+        ].join(" "),
+        /** 활성 — 흰 배경/짙은 텍스트 + hover 시 다크/화이트 반전, hover 그림자 */
+        active: [
+          "bg-white text-[var(--color-gray-900)]",
+          "border border-[var(--color-gray-200)]",
+          "shadow-[var(--shadow-soft)]",
+          "hover:bg-[var(--color-gray-900)] hover:text-white",
+          "hover:shadow-[var(--shadow-hover)]",
+        ].join(" "),
+      },
+    },
+    defaultVariants: {
+      state: "disabled",
+    },
+  },
+);

src/lib/variants/button.presets.ts

@@ -1,6 +1,7 @@
 import type { ButtonPreset } from "@/types/button";
 import type { VariantProps } from "class-variance-authority";
 import { loginButtonVariants } from "./button.auth";
+import { ctaButtonVariants } from "./button.cta";
 import { featureButtonVariants } from "./button.feature";
 import { heroButtonVariants } from "./button.hero";
 import { signupButtonVariants } from "./button.signup";
@@ -10,26 +11,29 @@ type HeroVariantProps = VariantProps<typeof heroButtonVariants>;
 type FeatureVariantProps = VariantProps<typeof featureButtonVariants>;
 type AuthVariantProps = VariantProps<typeof loginButtonVariants>;
 type SignupVariantProps = VariantProps<typeof signupButtonVariants>;
+type CtaVariantProps = VariantProps<typeof ctaButtonVariants>;
 
 type HeroOpts = Partial<Pick<HeroVariantProps, "intent" | "glow" | "pill">>;
 type FeatureOpts = Partial<Pick<FeatureVariantProps, "radius">>;
 type AuthOpts = Partial<Pick<AuthVariantProps, "color">>;
 type SignupOpts = Partial<Pick<SignupVariantProps, "bg">>;
+type CtaOpts = Partial<Pick<CtaVariantProps, "state">>;
 
-// ✅ 프리셋별 오버로드 (자동완성/타입가드 정확)
+// ✅ 프리셋별 오버로드
 export function getButtonClasses(preset: "hero", opts?: HeroOpts): string;
 export function getButtonClasses(preset: "feature", opts?: FeatureOpts): string;
 export function getButtonClasses(preset: "auth", opts?: AuthOpts): string;
 export function getButtonClasses(preset: "signup", opts?: SignupOpts): string;
+export function getButtonClasses(preset: "cta", opts?: CtaOpts): string;
+
 // 구현체
 export function getButtonClasses(
   preset: ButtonPreset,
-  opts: HeroOpts | FeatureOpts | AuthOpts | SignupOpts = {},
+  opts: HeroOpts | FeatureOpts | AuthOpts | SignupOpts | CtaOpts = {},
 ): string {
   switch (preset) {
     case "hero": {
       const { intent, glow, pill } = opts as HeroOpts;
-      // 필요한 키만 전달 (불필요 키 유입 차단)
       return heroButtonVariants({ intent, glow, pill });
     }
     case "feature": {
@@ -44,5 +48,9 @@ export function getButtonClasses(
       const { bg } = opts as SignupOpts;
       return signupButtonVariants({ bg });
     }
+    case "cta": {
+      const { state } = opts as CtaOpts;
+      return ctaButtonVariants({ state });
+    }
   }
 }

src/shared/button.tsx

@@ -8,6 +8,7 @@ import * as React from "react";
 
 type NativeBtn = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
+/** 일부 키를 제외한 props 반환 (타입 안전) */
 function omitKeys<T extends object, K extends readonly (keyof T)[]>(
   obj: T,
   keys: K,
@@ -24,11 +25,13 @@ function omitKeys<T extends object, K extends readonly (keyof T)[]>(
   return out as Omit<T, K[number]>;
 }
 
+/** preset별 처리 계획 수립 */
 function computePlan(props: ButtonProps) {
   const asChild = props.asChild ?? false;
   const className = props.className;
   const children = (props as React.PropsWithChildren).children;
 
+  // 1️⃣ Hero
   if (props.preset === "hero") {
     const intent = props.intent ?? "primary";
     const glow = props.glow ?? false;
@@ -47,6 +50,7 @@ function computePlan(props: ButtonProps) {
     return { asChild, className, children, classes, native };
   }
 
+  // 2️⃣ Feature
   if (props.preset === "feature") {
     const radius = props.radius ?? "2xl";
 
@@ -61,6 +65,7 @@ function computePlan(props: ButtonProps) {
     return { asChild, className, children, classes, native };
   }
 
+  // 3️⃣ Signup
   if (props.preset === "signup") {
     const bg = props.bg ?? "basic";
 
@@ -69,13 +74,30 @@ function computePlan(props: ButtonProps) {
     return { asChild, className, children, classes, native };
   }
 
-  // auth
+  // 4️⃣ CTA
+  if (props.preset === "cta") {
+    const state = props.disabled ? "disabled" : "active";
+    const classes = cn(getButtonClasses("cta", { state }));
+
+    const native = omitKeys(props, [
+      "preset",
+      "disabled",
+      "fullWidth",
+      "className",
+      "asChild",
+      "children",
+    ] as const);
+    return { asChild, className, children, classes, native };
+  }
+
+  // 5️⃣ Auth (기본)
   const color = props.color ?? "black";
   const classes = getButtonClasses("auth", { color });
   const native = omitKeys(props, ["preset", "color", "className", "asChild", "children"] as const);
   return { asChild, className, children, classes, native };
 }
 
+/** 공용 Button 컴포넌트 */
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const plan = computePlan(props);
   const Comp = plan.asChild ? Slot : "button";

src/types/button.ts

@@ -1,11 +1,12 @@
 import type { ButtonHTMLAttributes } from "react";
 
-export type ButtonPreset = "hero" | "feature" | "auth" | "signup";
+export type ButtonPreset = "hero" | "feature" | "auth" | "signup" | "cta";
 export type ButtonIntent = "primary";
 export type Radius = "sm" | "md" | "lg" | "xl" | "2xl";
 export type AuthColor = "black" | "white";
 export type SignupBg = "basic" | "google" | "kakao";
 
+/** 공통 기본 타입 */
 export interface BaseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   asChild?: boolean;
   className?: string;
@@ -44,7 +45,7 @@ export type AuthProps = BaseButtonProps & {
   radius?: never;
 };
 
-/** signup 전용 **/
+/** signup 전용 */
 export type SignupProps = BaseButtonProps & {
   preset: "signup";
   bg?: SignupBg;
@@ -56,4 +57,21 @@ export type SignupProps = BaseButtonProps & {
   color?: never;
 };
 
-export type ButtonProps = HeroProps | FeatureProps | AuthProps | SignupProps;
+/**  cta 전용 */
+export type CtaProps = BaseButtonProps & {
+  preset: "cta";
+  /** 전체 폭 확장 여부 */
+  fullWidth?: boolean;
+  /** 기본적으로 `disabled`로 비활성화 → active일 때 hover 등 동작 */
+  disabled?: boolean;
+  // 금지
+  intent?: never;
+  glow?: never;
+  pill?: never;
+  radius?: never;
+  color?: never;
+  bg?: never;
+};
+
+/** 전체 버튼 타입 유니온 */
+export type ButtonProps = HeroProps | FeatureProps | AuthProps | SignupProps | CtaProps;