Refact/CDP-185-Landing

src/components/landing/LandingFeatureGrid.tsx

@@ -15,7 +15,7 @@ export function LandingFeatureGrid({ className }: LandingFeatureGridProps) {
       {FEATURES.map((feature) => (
         <FeatureButton
           key={feature.title}
-          icon={<Icon name={feature.iconName} size={19} />}
+          icon={<Icon name={feature.iconName} className={cn("w-5 h-5", "md:w-8 md:h-8")} />}
           title={feature.title}
           description={feature.description}
           onMouseEnter={() => setActiveFeature(feature)}

src/components/landing/LandingHeroCtas.tsx

@@ -5,27 +5,31 @@ import Link from "next/link";
 
 export function LandingHeroCtas() {
   return (
-    <div className={cn("flex items-center flex-col gap-8 mt-10", "md:flex-row md:gap-12 md:mt-20")}>
+    <div className={cn("flex items-center flex-col gap-6 mt-10", "md:flex-row md:gap-12 md:mt-20")}>
       <Link href="/login">
-        <Button preset="hero" pill className="animate-bounce">
+        <Button
+          preset="hero"
+          size="sm"
+          className={cn("animate-bounce", "md:t-18-m md:px-[3rem] md:h-[5.4rem]")}
+        >
           <span className="inline-flex items-center gap-4">
-            <Icon name="monitor" />
+            <Icon name="monitor" className="h-6 w-6 md:h-9 md:w-9" />
             <span>Desktop</span>
           </span>
         </Button>
       </Link>
       <Link href="/login">
-        <Button preset="hero" pill>
+        <Button preset="hero" size="sm" className="md:t-18-m md:px-[3rem] md:h-[5.4rem]">
           <span className="inline-flex items-center gap-4">
-            <Icon name="laptop" />
+            <Icon name="laptop" className="h-6 w-6 md:h-9 md:w-9" />
             <span>Mac</span>
           </span>
         </Button>
       </Link>
       <Link href="/login">
-        <Button preset="hero" pill>
+        <Button preset="hero" size="sm" className="md:t-18-m md:px-[3rem] md:h-[5.4rem]">
           <span className="inline-flex items-center gap-4">
-            <Icon name="smartphone" />
+            <Icon name="smartphone" className="h-6 w-6 md:h-9 md:w-9" />
             <span>iOS</span>
           </span>
         </Button>

src/components/landing/LandingSpecialFeaturesSection.tsx

@@ -18,17 +18,17 @@ export function LandingSpecialFeaturesSection({ className }: LandingSpecialFeatu
         {/* 섹션 인트로: 제목 + 부제 (아래 → 위 슬라이드) */}
         <header
           className={cn(
-            "space-y-4 text-center transition-all duration-1000 ease-out",
+            "space-y-3 text-center transition-all duration-1000 ease-out",
             isInView ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
           )}
         >
           <h2
             id="landing-special-features-title"
-            className="t-30-b md:t-40-b text-[var(--color-gray-900)]"
+            className="t-26-b md:t-40-b text-[var(--color-gray-900)]"
           >
             PlanMate의 특별한 기능들
           </h2>
-          <p className="t-14-m md:t-16-m text-[var(--color-gray-600)]">
+          <p className="t-12-m md:t-16-m text-[var(--color-gray-600)]">
             당신의 생산성을 높이는 스마트한 도구들
           </p>
         </header>

src/lib/variants/button.feature.ts

@@ -3,28 +3,24 @@ import { cva } from "class-variance-authority";
 export const featureButtonVariants = cva(
   [
     // Layout
-    "inline-flex items-center justify-start w-full gap-3",
+    "inline-flex items-center justify-start gap-3",
     "h-[4.4rem] px-[1.8rem]",
+    "rounded-[var(--radius-2xl)]",
 
     // Hover & Interaction (soft bg only)
     "transition-[background-color,transform] duration-310",
     "hover:bg-[var(--color-gray-200)]",
   ].join(" "),
   {
     variants: {
-      // Radius (globals.css 토큰과 1:1 매핑)
-      radius: {
-        sm: "rounded-[var(--radius-sm)]",
-        md: "rounded-[var(--radius-md)]",
-        lg: "rounded-[var(--radius-lg)]",
-        xl: "rounded-[var(--radius-xl)]",
-        "2xl": "rounded-[var(--radius-2xl)]",
+      size: {
+        sm: "h-[3.4rem] px-[1rem] w-[20.8rem]",
+        md: "h-[6.4rem] px-[2rem] w-[29.6rem]",
       },
     },
 
-    // Defaults
     defaultVariants: {
-      radius: "2xl",
+      size: "sm",
     },
   },
 );

src/lib/variants/button.hero.ts

@@ -4,10 +4,7 @@ export const heroButtonVariants = cva(
   [
     // Layout
     "inline-flex items-center justify-center",
-    "h-[5.4rem] px-[3rem] cursor-pointer",
-
-    // Typography (from globals.css)
-    "t-18-m",
+    "cursor-pointer rounded-full",
 
     // Transitions & a11y
     "transition-[color,background-color,border-color,transform] duration-200",
@@ -21,14 +18,10 @@ export const heroButtonVariants = cva(
   ].join(" "),
   {
     variants: {
-      intent: { primary: "" },
-      glow: { true: "shadow-[0_6px_16px_0_rgba(0,0,0,0.08)]", false: "" },
-      pill: { true: "rounded-full", false: "" },
+      size: { md: "t-18-m px-[3rem] h-[5.4rem]", sm: "t-12-m px-[1.2rem] h-[3.7rem]" },
     },
     defaultVariants: {
-      intent: "primary",
-      glow: false,
-      pill: true,
+      size: "md",
     },
   },
 );

src/lib/variants/button.presets.ts

@@ -16,8 +16,8 @@ type SignupVariantProps = VariantProps<typeof signupButtonVariants>;
 type CtaVariantProps = VariantProps<typeof ctaButtonVariants>;
 type BackVariantProps = VariantProps<typeof backButtonVariants>;
 
-type HeroOpts = Partial<Pick<HeroVariantProps, "intent" | "glow" | "pill">>;
-type FeatureOpts = Partial<Pick<FeatureVariantProps, "radius">>;
+type HeroOpts = Partial<Pick<HeroVariantProps, "size">>;
+type FeatureOpts = Partial<Pick<FeatureVariantProps, "size">>;
 type AuthOpts = Partial<Pick<AuthVariantProps, "color">>;
 type SignupOpts = Partial<Pick<SignupVariantProps, "bg">>;
 type CtaOpts = Partial<Pick<CtaVariantProps, "state">>;
@@ -38,12 +38,12 @@ export function getButtonClasses(
 ): string {
   switch (preset) {
     case "hero": {
-      const { intent, glow, pill } = opts as HeroOpts;
-      return heroButtonVariants({ intent, glow, pill });
+      const { size } = opts as HeroOpts;
+      return heroButtonVariants({ size });
     }
     case "feature": {
-      const { radius } = opts as FeatureOpts;
-      return featureButtonVariants({ radius });
+      const { size } = opts as FeatureOpts;
+      return featureButtonVariants({ size });
     }
     case "auth": {
       const { color } = opts as AuthOpts;

src/lib/variants/card.specialFeatureCard.ts

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 export const specialFeatureCardVariants = cva(
   [
     // === 레이아웃 스타일 ===
-    "inline flex flex-col justify-center gap-5 p-7 text-center",
+    "inline flex flex-col justify-center text-center",
 
     // === 시각적 효과 ===
     "group relative isolate rounded-xl",
@@ -18,14 +18,14 @@ export const specialFeatureCardVariants = cva(
     variants: {
       // === 크기 variants ===
       size: {
-        sm: "w-[30rem] h-[20rem] p-5 gap-4",
+        sm: "max-w-[26rem] h-[16rem] p-4 gap-2",
         md: "w-[35rem] h-[22rem] p-6 gap-4",
         lg: "max-w-[40rem] h-[25rem] p-7 gap-5",
         xl: "w-[45rem] h-[28rem] p-8 gap-6",
       },
     },
     defaultVariants: {
-      size: "lg",
+      size: "sm",
     },
   },
 );

src/shared/FeatureButton.tsx

@@ -20,7 +20,7 @@ export const FeatureButton = React.forwardRef<HTMLButtonElement, FeatureGroupBut
       icon,
       title,
       description,
-      radius = "2xl",
+      size = "sm",
       iconRadius = "lg",
       className,
       // 안전 가드: 외부에서 type을 바꿔도 기본은 "button"
@@ -39,9 +39,9 @@ export const FeatureButton = React.forwardRef<HTMLButtonElement, FeatureGroupBut
       <Button
         ref={ref}
         preset="feature"
-        radius={radius}
+        size={size}
         type={type ?? "button"}
-        className={cn("h-[6.4rem] w-[29.6rem] justify-start px-[2.0rem]", className)}
+        className={cn("md:h-[6.4rem] md:w-[29.6rem] md:px-[2.0rem]", className)}
         aria-label={ariaLabel}
         {...rest}
       >
@@ -50,7 +50,8 @@ export const FeatureButton = React.forwardRef<HTMLButtonElement, FeatureGroupBut
             <span
               aria-hidden="true"
               className={cn(
-                "inline-flex h-[4.5rem] w-[4.5rem] shrink-0 items-center justify-center",
+                "inline-flex h-[3rem] w-[3rem] shrink-0 items-center justify-center",
+                "md:h-[4.5rem] md:w-[4.5rem]",
                 iconBoxRadius,
                 "bg-[var(--color-white)]",
                 "border border-[var(--color-gray-300)]",
@@ -62,9 +63,13 @@ export const FeatureButton = React.forwardRef<HTMLButtonElement, FeatureGroupBut
           ) : null}
 
           <span className="flex min-w-0 flex-col text-left">
-            <span className="t-16-b text-[var(--color-gray-900)] truncate">{title}</span>
+            <span className={cn("t-12-b text-[var(--color-gray-900)] truncate", "md:t-16-b")}>
+              {title}
+            </span>
             {description ? (
-              <span className="t-14-m text-[var(--color-gray-600)] truncate">{description}</span>
+              <span className={cn("t-10-m text-[var(--color-gray-600)] truncate", "md:t-14-m")}>
+                {description}
+              </span>
             ) : null}
           </span>
         </span>

src/shared/SpecialFeatureCard.tsx

@@ -8,20 +8,35 @@ export const SpecialFeatureCard = React.forwardRef<HTMLDivElement, SpecialFeatur
   (props, ref) => {
     const { className, icon, title, description, children, ...native } = props;
 
-    const classes = specialFeatureCardVariants({ size: "lg" });
+    const classes = specialFeatureCardVariants({ size: "sm" });
 
     return (
-      <div ref={ref} className={cn(classes, className)} {...native}>
+      <div
+        ref={ref}
+        className={cn("md:max-w-[40rem] md:h-[25rem] md:p-7 gap-5", classes, className)}
+        {...native}
+      >
         {icon && (
-          <div className="mx-auto mb-4 flex h-25 w-25 items-center justify-center rounded-lg bg-[var(--color-gray-100)]">
+          <div
+            className={cn(
+              "mx-auto flex h-15 w-15 items-center justify-center rounded-lg bg-[var(--color-gray-100)]",
+              "md:mb-4 flex md:h-25 md:w-25",
+            )}
+          >
             {icon}
           </div>
         )}
 
-        {title && <h3 className="mb-3 t-20-b text-[var(--color-gray-900)]">{title}</h3>}
+        {title && (
+          <h3 className={cn("t-16-b text-[var(--color-gray-900)]", "md:mb-3 md:t-20-b")}>
+            {title}
+          </h3>
+        )}
 
         {description && (
-          <p className="t-12-m text-[var(--color-gray-600)] text-center md:t-16-m">{description}</p>
+          <p className={cn("t-10-m text-[var(--color-gray-600)] text-center", "md:t-16-m")}>
+            {description}
+          </p>
         )}
 
         {children}

src/shared/button.tsx

@@ -33,35 +33,19 @@ function computePlan(props: ButtonProps) {
 
   // 1️⃣ Hero
   if (props.preset === "hero") {
-    const intent = props.intent ?? "primary";
-    const glow = props.glow ?? false;
-    const pill = props.pill ?? true;
+    const size = props.size ?? "sm";
 
-    const classes = getButtonClasses("hero", { intent, glow, pill });
-    const native = omitKeys(props, [
-      "preset",
-      "intent",
-      "glow",
-      "pill",
-      "className",
-      "asChild",
-      "children",
-    ] as const);
+    const classes = getButtonClasses("hero", { size });
+    const native = omitKeys(props, ["preset", "size", "className", "asChild", "children"] as const);
     return { asChild, className, children, classes, native };
   }
 
   // 2️⃣ Feature
   if (props.preset === "feature") {
-    const radius = props.radius ?? "2xl";
+    const size = props.size ?? "sm";
 
-    const classes = getButtonClasses("feature", { radius });
-    const native = omitKeys(props, [
-      "preset",
-      "radius",
-      "className",
-      "asChild",
-      "children",
-    ] as const);
+    const classes = getButtonClasses("feature", { size });
+    const native = omitKeys(props, ["preset", "size", "className", "asChild", "children"] as const);
     return { asChild, className, children, classes, native };
   }