diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx index 202ce1d..603c4c1 100644 --- a/src/app/(marketing)/page.tsx +++ b/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() { + 이전 + + ); + }, +); + +BackButton.displayName = "BackButton"; diff --git a/src/shared/Icon.registry.ts b/src/shared/Icon.registry.ts index 6985d47..3208a1a 100644 --- a/src/shared/Icon.registry.ts +++ b/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, diff --git a/src/shared/button.tsx b/src/shared/button.tsx index 4953fe1..e619f4e 100644 --- a/src/shared/button.tsx +++ b/src/shared/button.tsx @@ -82,7 +82,6 @@ function computePlan(props: ButtonProps) { const native = omitKeys(props, [ "preset", "disabled", - "fullWidth", "className", "asChild", "children", @@ -90,7 +89,26 @@ function computePlan(props: ButtonProps) { 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); diff --git a/src/types/button.ts b/src/types/button.ts index 09e1b12..d58af65 100644 --- a/src/types/button.ts +++ b/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 & { + 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;