Feature/CDP-161-BackButton

src/app/(marketing)/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { SignupGroupButton } from "@/components/SiginupGroupButton";
+import { BackButton } from "@/shared/BackButton";
 import { Button } from "@/shared/button";
 import { FeatureButton } from "@/shared/FeatureButton";
 import { Icon } from "@/shared/Icon";
@@ -104,6 +105,8 @@ export default function Home() {
 
       <SignupGroupButton />
 
+      <BackButton>이전</BackButton>
+
       <Button
         preset="cta"
         disabled={!isReady} // false면 활성, true면 비활성

src/lib/variants/button.back.ts

@@ -0,0 +1,32 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const backButtonVariants = cva(
+  [
+    "group inline-flex items-center gap-2 px-4 py-2 rounded-md  cursor-pointer",
+    "text-[var(--color-gray-600)] hover:text-[var(--color-gray-900)] ",
+    "transition-colors duration-200",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "t-14-m",
+        md: "t-16-m",
+      },
+      underline: {
+        true: "hover:underline underline-offset-2",
+        false: "",
+      },
+      tone: {
+        default: "",
+        muted: "text-[var(--color-gray-500)] hover:text-[var(--color-gray-900)]",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      underline: false,
+      tone: "default",
+    },
+  },
+);
+
+export type BackButtonVariantProps = VariantProps<typeof backButtonVariants>;

src/lib/variants/button.cta.ts

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 export const ctaButtonVariants = cva(
   // 공통 베이스
   [
-    "inline-flex items-center justify-center select-none",
+    "inline-flex items-center justify-center select-none cursor-pointer",
     "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)]",

src/lib/variants/button.presets.ts

@@ -1,6 +1,8 @@
 import type { ButtonPreset } from "@/types/button";
 import type { VariantProps } from "class-variance-authority";
+
 import { loginButtonVariants } from "./button.auth";
+import { backButtonVariants } from "./button.back";
 import { ctaButtonVariants } from "./button.cta";
 import { featureButtonVariants } from "./button.feature";
 import { heroButtonVariants } from "./button.hero";
@@ -12,24 +14,27 @@ type FeatureVariantProps = VariantProps<typeof featureButtonVariants>;
 type AuthVariantProps = VariantProps<typeof loginButtonVariants>;
 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 AuthOpts = Partial<Pick<AuthVariantProps, "color">>;
 type SignupOpts = Partial<Pick<SignupVariantProps, "bg">>;
 type CtaOpts = Partial<Pick<CtaVariantProps, "state">>;
+type BackOpts = Partial<Pick<BackVariantProps, "size" | "tone" | "underline">>;
 
 // ✅ 프리셋별 오버로드
 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: "back", opts?: BackOpts): string;
 
 // 구현체
 export function getButtonClasses(
   preset: ButtonPreset,
-  opts: HeroOpts | FeatureOpts | AuthOpts | SignupOpts | CtaOpts = {},
+  opts: HeroOpts | FeatureOpts | AuthOpts | SignupOpts | CtaOpts | BackOpts = {},
 ): string {
   switch (preset) {
     case "hero": {
@@ -52,5 +57,9 @@ export function getButtonClasses(
       const { state } = opts as CtaOpts;
       return ctaButtonVariants({ state });
     }
+    case "back": {
+      const { size, tone, underline } = opts as BackOpts;
+      return backButtonVariants({ size, tone, underline });
+    }
   }
 }

src/shared/BackButton.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Button } from "@/shared/button";
+import { Icon } from "@/shared/Icon";
+import type { ButtonProps } from "@/types/button";
+import * as React from "react";
+
+type BackOnlyProps = Omit<Extract<ButtonProps, { preset: "back" }>, "preset">;
+
+export const BackButton = React.forwardRef<HTMLButtonElement, BackOnlyProps>(
+  ({ children = "이전", ...rest }, ref) => {
+    return (
+      <Button ref={ref} preset="back" {...rest}>
+        <Icon name="chevronleft" size={19} />
+        <span>{children}</span>
+      </Button>
+    );
+  },
+);
+
+BackButton.displayName = "BackButton";

src/shared/Icon.registry.ts

@@ -8,6 +8,7 @@ import {
   CalendarRange,
   Check,
   CheckSquare,
+  ChevronLeft,
   Clock,
   Eye,
   EyeOff,
@@ -57,6 +58,7 @@ export const icons = {
   calendarDays: CalendarDays,
   calendarRange: CalendarRange,
   checkSquare: CheckSquare,
+  chevronleft: ChevronLeft,
   stickyNote: StickyNote,
   rotateCcw: RotateCcw,
   bell: Bell,

src/shared/button.tsx

@@ -82,15 +82,33 @@ function computePlan(props: ButtonProps) {
     const native = omitKeys(props, [
       "preset",
       "disabled",
-      "fullWidth",
       "className",
       "asChild",
       "children",
     ] as const);
     return { asChild, className, children, classes, native };
   }
 
-  // 5️⃣ Auth (기본)
+  // 5️⃣ Back
+  if (props.preset === "back") {
+    const size = props.size ?? "md";
+    const tone = props.tone ?? "default";
+    const underline = props.underline ?? false;
+
+    const classes = getButtonClasses("back", { size, tone, underline });
+    const native = omitKeys(props, [
+      "preset",
+      "size",
+      "tone",
+      "underline",
+      "className",
+      "asChild",
+      "children",
+    ] as const);
+    return { asChild, className, children, classes, native };
+  }
+
+  // 6️⃣ Auth (기본)
   const color = props.color ?? "black";
   const classes = getButtonClasses("auth", { color });
   const native = omitKeys(props, ["preset", "color", "className", "asChild", "children"] as const);

src/types/button.ts

@@ -1,6 +1,8 @@
+import type { backButtonVariants } from "@/lib/variants/button.back";
+import type { VariantProps } from "class-variance-authority";
 import type { ButtonHTMLAttributes } from "react";
 
-export type ButtonPreset = "hero" | "feature" | "auth" | "signup" | "cta";
+export type ButtonPreset = "hero" | "feature" | "auth" | "signup" | "cta" | "back";
 export type ButtonIntent = "primary";
 export type Radius = "sm" | "md" | "lg" | "xl" | "2xl";
 export type AuthColor = "black" | "white";
@@ -57,12 +59,9 @@ export type SignupProps = BaseButtonProps & {
   color?: never;
 };
 
-/**  cta 전용 */
+/** cta 전용 */
 export type CtaProps = BaseButtonProps & {
   preset: "cta";
-  /** 전체 폭 확장 여부 */
-  fullWidth?: boolean;
-  /** 기본적으로 `disabled`로 비활성화 → active일 때 hover 등 동작 */
   disabled?: boolean;
   // 금지
   intent?: never;
@@ -73,5 +72,18 @@ export type CtaProps = BaseButtonProps & {
   bg?: never;
 };
 
+/** back 전용 */
+export type BackProps = BaseButtonProps &
+  VariantProps<typeof backButtonVariants> & {
+    preset: "back";
+    // 금지
+    intent?: never;
+    glow?: never;
+    pill?: never;
+    radius?: never;
+    color?: never;
+    bg?: never;
+  };
+
 /** 전체 버튼 타입 유니온 */
-export type ButtonProps = HeroProps | FeatureProps | AuthProps | SignupProps | CtaProps;
+export type ButtonProps = HeroProps | FeatureProps | AuthProps | SignupProps | CtaProps | BackProps;